Merge pull request #339 from pbca26/worker

Worker

Author: pbca26

check-coin-explorers-availability.js

@@ -22,7 +22,7 @@ let coinsToRemove = [];
   };
 
   const checkApiEndpoints = async coin => {
-    const getInfoRes = await Promise.all(coins[coin].api.map((value, index) => {
+    const getInfoRes = await Promise.all(coins[coin].api.map((value) => {
       return getInfo(value);
     }));
     let longestBlockHeight = 0;

config-overrides.js

@@ -11,6 +11,7 @@ module.exports = function override(config) {
     'buffer': require.resolve('buffer'),
     'stream': require.resolve('stream-browserify'),
   })
+  config.resolve.alias['react-dom'] = '@hot-loader/react-dom';
   config.resolve.fallback = fallback;
   config.plugins = (config.plugins || []).concat([
     new webpack.ProvidePlugin({

electron-post-build.js

@@ -1,7 +1,7 @@
 const fs = require('fs');
 const buildPath = 'build';
 
-let files = [{
+const files = [{
   name: `${buildPath}/index.html`,
   data: fs.readFileSync(`${buildPath}/index.html`, 'utf-8'),
 }];

make-coin-icons-sprites.js

@@ -12,11 +12,11 @@ const maxSize = { // max size of icon item
   },
 };
 
-let iconsList = [];
+const iconsList = [];
 // get all icons in a list
 const directoryPath = path.join(__dirname, '/public/coins');
 const files = fs.readdirSync(directoryPath);
-files.forEach((file) => {
+files.forEach(file => {
   if (file.indexOf('.png') > -1) {
     iconsList.push(file.substr(0, file.indexOf('.png')));
   }
@@ -27,7 +27,7 @@ console.log(iconsList);
 
 // generate spritesheet
 Spritesmith.run({
-  src: iconsList.map((x) => `${__dirname}/public/coins/${x}.png`),
+  src: iconsList.map(x => `${__dirname}/public/coins/${x}.png`),
   algorithm: 'binary-tree'
 }, (err, result) => {
   if (err) {
@@ -39,9 +39,9 @@ Spritesmith.run({
   //console.log(result.coordinates)
   //console.log(result.properties)
 
-  let coinsCss = [];
-  let coinsCssResize = [];
-  let resultKeys = Object.keys(result.coordinates);
+  const coinsCss = [];
+  const coinsCssResize = [];
+  const resultKeys = Object.keys(result.coordinates);
 
   for (let i = 0; i < iconsList.length; i++) {
     coinsCss.push(`

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "hw-kmd-wallet",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "author": "Luke Childs <[email protected]> (http://lukechilds.co.uk), Komodo Platform (https://komodoplatform.com)",
   "description": "Komodo Hardware Wallet Web App",
   "repository": "pbca26/hw-kmd-wallet",
@@ -9,6 +9,7 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.6.0",
+    "@hot-loader/react-dom": "^17.0.2",
     "@ledgerhq/hw-app-btc": "^6.27.1",
     "@ledgerhq/hw-transport": "^6.27.1",
     "@ledgerhq/hw-transport-web-ble": "^6.27.1",

package.json

@@ -5,6 +5,7 @@ import {
   isElectron,
   shell,
 } from './Electron';
+import Translate, {t} from './Translate';
 
 const AboutModal = props => {
   const initialState = {
@@ -50,22 +51,22 @@ const AboutModal = props => {
         <li onClick={() => open()}>
           <i className="fa fa-copyright"></i>
           {props.sidebarSize === 'full' &&
-            <span className="sidebar-item-title">About</span>
+            <span className="sidebar-item-title"><Translate name="about_about" /></span>
           }
         </li>
         <Modal
-          title="About"
+          title={t('about_about')}
           show={state.isClosed === false}
           handleClose={() => close()}
           isCloseable={true}
           className="Modal-about">
           <p>
-            <strong>Komodo Hardware Wallet App</strong> by {renderLink('https://github.com/atomiclabs', 'Atomic Labs')} and {renderLink('https://github.com/komodoplatform', 'Komodo Platform')}.
+            <strong>Komodo Hardware Wallet App</strong> <Translate name="about_by_sm" /> {renderLink('https://github.com/atomiclabs', 'Atomic Labs')} <Translate name="about_and_sm" /> {renderLink('https://github.com/komodoplatform', 'Komodo Platform')}.
           </p>
           <p>
-            The {renderLink(`https://github.com/${appInfo.repository}`, 'source code')} is licensed under {renderLink(`https://github.com/${appInfo.repository}/blob/master/LICENSE`, 'MIT')}.
+            <Translate name="about_the" /> {renderLink(`https://github.com/${appInfo.repository}`, t('about_source_code'))} <Translate name="about_is_licensed" /> {renderLink(`https://github.com/${appInfo.repository}/blob/master/LICENSE`, 'MIT')}.
             <br />
-            View the {renderLink(`https://github.com/${appInfo.repository}#usage`, 'README')} for usage instructions.
+            <Translate name="about_view" /> {renderLink(`https://github.com/${appInfo.repository}#usage`, 'README')} <Translate name="about_usage_intructions" />.
           </p>
         </Modal>
       </React.Fragment>

src/AboutModal.js

@@ -14,6 +14,7 @@ import coinsList from './lib/coins';
 import {checkTimestamp} from './lib/time';
 import './Accounts.scss';
 import './Account.scss';
+import Translate, {t} from './Translate';
 
 const Account = props => {
   const render = () => {
@@ -59,7 +60,7 @@ const Account = props => {
             {account.isRewardsOverdue &&
               <span
                 className="kmd-rewards-account-overdue-badge"
-                title="Rewards claim overdue!">
+                title={t('accounts_rewards_overdue')}>
               <i>!</i>
               </span>
             }
@@ -88,7 +89,7 @@ const Accounts = ({
   <div className="container content">
     <div className="accounts-block">
       <h4>
-        {activeAccount !== null ? 'Account details' : 'Accounts' }
+        {activeAccount !== null ? t('accounts_account_details') : t('accounts_accounts') }
       </h4>
       {activeAccount === null &&
         <CoinSettingsModal
@@ -102,10 +103,10 @@ const Accounts = ({
         <table>
           <thead>
             <tr>
-              <th>{activeAccount !== null ? '' : 'Account'}</th>
-              <th>Balance</th>
+              <th>{activeAccount !== null ? '' : t('accounts_account')}</th>
+              <th><Translate name="accounts_balance" /></th>
               {activeCoin === 'KMD' &&
-                <th>Rewards</th>
+                <th><Translate name="accounts_rewards" /></th>
               }
             </tr>
           </thead>
@@ -130,13 +131,13 @@ const Accounts = ({
         {isElectron &&
           <a
             href="!#"
-            onClick={() => shell.openExternal('https://github.com/pbca26/hw-kmd-wallet/wiki/How-to-use-address-discovery-options-to-claim-airdrop-coins')}>Unable to find airdrop coins?</a>
+            onClick={() => shell.openExternal('https://github.com/pbca26/hw-kmd-wallet/wiki/How-to-use-address-discovery-options-to-claim-airdrop-coins')}><Translate name="accounts_unable_to_find_airdrop" /></a>
         }
         {!isElectron &&
           <a
             target="_blank"
             rel="noopener noreferrer"
-            href="https://github.com/pbca26/hw-kmd-wallet/wiki/How-to-use-address-discovery-options-to-claim-airdrop-coins">Unable to find airdrop coins?</a>
+            href="https://github.com/pbca26/hw-kmd-wallet/wiki/How-to-use-address-discovery-options-to-claim-airdrop-coins"><Translate name="accounts_unable_to_find_airdrop" /></a>
         }
       </div>
     }

src/Accounts.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Modal from './Modal';
 import Boolean from './Boolean';
 import './ActionListModal.scss';
+import Translate from './Translate';
 
 const ActionListModal = ({
   children,
@@ -58,14 +59,14 @@ const ActionListModal = ({
 
       {error ? (
         <div className="notification is-danger">
-          <strong>Error</strong>
+          <strong><Translate name="action_list_modal_error" /></strong>
           <p>{error}</p>
         </div>
       ) : null}
 
       {success ? (
         <div className="notification is-success">
-          <strong>Success</strong>
+          <strong><Translate name="action_list_modal_success" /></strong>
           <p>{success}</p>
         </div>
       ) : null}

src/ActionListModal.js

@@ -6,6 +6,7 @@ import updateActionState from './lib/update-action-state';
 import {VENDOR} from './constants';
 import ActionListModal from './ActionListModal';
 import {writeLog} from './Debug';
+import Translate, {t} from './Translate';
 
 const AddAccount = props => {
   const initialState = {
@@ -14,12 +15,12 @@ const AddAccount = props => {
     actions: {
       connect: {
         icon: 'fab fa-usb',
-        description: props.vendor === 'ledger' ? <div>Connect and unlock your Ledger, then open the Komodo app on your device.</div> : <div>Connect and unlock your Trezor.</div>,
+        description: props.vendor === 'ledger' ? <div><Translate name="common_connect_and_unlock_ledger" /></div> : <div><Translate name="common_connect_and_unlock_trezor" /></div>,
         state: null
       },
       approve: {
         icon: 'fas fa-microchip',
-        description: <div>Approve all public key export requests on your device. <strong>There will be multiple requests</strong>.</div>,
+        description: <div><Translate name="common_approve_public_key" /> <strong><Translate name="common_multiple_req" /></strong>.</div>,
         state: null
       }
     }
@@ -42,7 +43,7 @@ const AddAccount = props => {
       updateActionState({setState}, currentAction, 'loading');
       const hwIsAvailable = await hw[vendor].isAvailable();
       if (!hwIsAvailable) {
-        throw new Error(`${VENDOR[vendor]} device is unavailable!`);
+        throw new Error(t('common_error_device', VENDOR[vendor]));
       }
       updateActionState({setState}, currentAction, true);
 
@@ -96,7 +97,7 @@ const AddAccount = props => {
           show={isCheckingRewards}
           className="Scan-balances-modal">
           <p>
-            Exporting a public key from your {VENDOR[vendor]} device. Please approve the public key export request on your device.
+            <Translate name="common_exporting_public_key" template={VENDOR[vendor]} />
           </p>
         </ActionListModal>
       </React.Fragment>