ERC20 balances fetching improved (#1047)

* solution: fetch accounts hd paths from redux saga * solution: update erc20 balance during accounts list construction * solution: SAI and DAI erc20 tokens * solution: Tether USDT ERC20 token added * problem: displays incorrect fees in fiat during tx creation * problem: terms confirmation on initial setup does not work
emeraldpay · Nov 25, 2019 · c95d67d · c95d67d
1 parent e0ea452
commit c95d67d
Show file tree

Hide file tree

Showing 56 changed files with 425 additions and 234 deletions.
diff --git a/packages/core/src/blockchains/ethereum/EthereumParams.ts b/packages/core/src/blockchains/ethereum/EthereumParams.ts
@@ -1,5 +1,5 @@
-import IBlockchainParams from '../IBlockchainParams';
 import { BlockchainCode } from '../blockchains';
+import IBlockchainParams from '../IBlockchainParams';
 
 class EthereumParams implements IBlockchainParams {
   public decimals: number = 18;

diff --git a/packages/core/src/blockchains/ethereum/EthereumTx.ts b/packages/core/src/blockchains/ethereum/EthereumTx.ts
@@ -1,4 +1,4 @@
-import {Address, convert, EthAddress} from '@emeraldplatform/core';
+import { Address, convert, EthAddress } from '@emeraldplatform/core';
 import Common from 'ethereumjs-common';
 import { Transaction as EthTx } from 'ethereumjs-tx';
 import { ITransaction } from '../types';

diff --git a/packages/core/src/utils.spec.ts b/packages/core/src/utils.spec.ts
@@ -1,4 +1,4 @@
-import { addHexPrefix, separateThousands, parseDate } from './utils';
+import { addHexPrefix, parseDate, separateThousands } from './utils';
 
 describe('addHexPrefix', () => {
   it('should work', () => {

diff --git a/packages/core/src/workflow/create-tx/types.ts b/packages/core/src/workflow/create-tx/types.ts
@@ -1,7 +1,4 @@
-import { Wei } from '@emeraldplatform/eth';
-import BigNumber from 'bignumber.js';
 import { IUnits } from '../../Units';
-import { TransferType } from './CreateErc20Tx';
 
 export enum TxTarget {
   MANUAL,

diff --git a/packages/desktop/src/components/welcome/welcome.js b/packages/desktop/src/components/welcome/welcome.js
@@ -6,8 +6,7 @@ import Grid from '@material-ui/core/Grid';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import {withStyles} from '@material-ui/styles';
 import { launcher } from '@emeraldwallet/store';
-import InitialSetup from './initialSetup';
-import { TERMS_VERSION } from '../../store/config';
+import { InitialSetup } from '@emeraldwallet/react-app';
 
 const getStyles = (theme) => ({
   brandPart1: {
@@ -20,7 +19,7 @@ const getStyles = (theme) => ({
 
 const Welcome = (props) => {
   const {
-    message, level, needSetup, classes,
+    message, level, needSetup, classes, currentTermsVersion
   } = props;
   let messageBlock = null;
   if (message) {
@@ -37,7 +36,7 @@ const Welcome = (props) => {
     return (
       <Grid container justify='center' alignItems='center'>
         <Grid item xs={10}>
-          <InitialSetup currentTermsVersion={TERMS_VERSION}/>
+          <InitialSetup currentTermsVersion={currentTermsVersion}/>
         </Grid>
       </Grid>
     );
@@ -80,8 +79,8 @@ export default connect(
     const msg = launcher.selectors.getMessage(state);
     return ({
       ...msg,
-      needSetup: state.launcher.get('configured') && (state.launcher.get('terms') !== TERMS_VERSION),
+      needSetup: state.launcher.get('configured') && (state.launcher.get('terms') !== ownProps.currentTermsVersion),
     });
   },
-  (dispatch, ownProps) => ({})
+  null
 )(StyledWelcome);
diff --git a/packages/desktop/src/containers/Screen/screen.js b/packages/desktop/src/containers/Screen/screen.js
@@ -10,7 +10,7 @@ import {
 import createLogger from '../../utils/logger';
 import Welcome from '../../components/welcome/welcome';
 import { screen } from '@emeraldwallet/store';
-
+import { TERMS_VERSION } from '../../store/config';
 const log = createLogger('screen');
 
 const Screen = (props) => {
@@ -85,7 +85,7 @@ const Screen = (props) => {
     return <MnemonicWizard />;
   }
   if (props.screen === 'welcome') {
-    return <Welcome />;
+    return <Welcome currentTermsVersion={TERMS_VERSION} />;
   }
   if (props.screen === 'settings') {
     return <Settings />;

diff --git a/packages/desktop/src/store/createStore.js b/packages/desktop/src/store/createStore.js
@@ -23,7 +23,7 @@ const reducers = {
   launcher: launcherReducers,
   ledger: ledger.reducer,
   wallet: walletReducers,
-  addresses: addresses.reducer,
+  [addresses.moduleName]: addresses.reducer,
   blockchains: blockchains.reducer,
   screen: screen.reducer,
   conn: connection.reducer,
@@ -60,5 +60,6 @@ export const createStore = (_api) => {
   sagaMiddleware.run(tokens.sagas.root, _api);
   sagaMiddleware.run(wallet.sagas.root, _api);
   sagaMiddleware.run(settings.sagas.root);
+  sagaMiddleware.run(addresses.sagas.root, _api);
   return store;
 };
diff --git a/packages/desktop/src/store/launcher/launcherActions.js b/packages/desktop/src/store/launcher/launcherActions.js
@@ -1,6 +1,3 @@
-import { ipcRenderer } from 'electron'; // eslint-disable-line import/no-extraneous-dependencies
-// import { waitForServicesRestart } from 'store/store';
-import { screen } from '..';
 import createLogger from '../../utils/logger';
 
 const log = createLogger('launcherActions');
@@ -25,13 +22,14 @@ export function readConfig() {
   };
 }
 
-export function agreeOnTerms(v) {
-  ipcRenderer.send('terms', v);
-  return {
-    type: 'LAUNCHER/TERMS',
-    version: v,
-  };
-}
+// TODO: Depricated
+// export function agreeOnTerms(v) {
+//   ipcRenderer.send('terms', v);
+//   return {
+//     type: 'LAUNCHER/TERMS',
+//     version: v,
+//   };
+// }
 
 // TODO: Depricated
 // export function saveSettings(extraSettings) {

diff --git a/packages/desktop/src/store/store.js b/packages/desktop/src/store/store.js
@@ -29,7 +29,7 @@ import {
   onceBlockchainConnected,
   onceAccountsLoaded,
   onceBalancesSet,
-  onceModeSet,
+  onceModeSet, onceServicesStart,
 } from './triggers';
 
 const log = createLogger('store');
@@ -189,10 +189,12 @@ function getInitialScreen() {
   // First things first, always go to welcome screen. This shows a nice spinner
   store.dispatch(screen.actions.gotoScreen('welcome'));
 
-  return onceAccountsLoaded(store).then(() => {
-    // We display home screen which will decide show landing or accounts list
-    store.dispatch(screen.actions.gotoScreen('home'));
-  });
+  return onceServicesStart(store)
+    .then(() => onceAccountsLoaded(store)
+      .then(() => {
+      // We display home screen which will decide show landing or accounts list
+      store.dispatch(screen.actions.gotoScreen('home'));
+  }));
 }
 
 Promise

diff --git a/packages/desktop/src/store/triggers.js b/packages/desktop/src/store/triggers.js
@@ -21,7 +21,7 @@ const handleTrigger = (check, resolve, store) => {
 
 export function onceServicesStart(store) {
   const check = () => {
-    const { terms, connector } = store.getState().launcher.toJS();
+    const { terms } = store.getState().launcher.toJS();
     return terms === TERMS_VERSION;
   };
 

diff --git a/packages/erc20/src/registry.ts b/packages/erc20/src/registry.ts
@@ -1,7 +1,7 @@
 import { BlockchainCode } from '@emeraldwallet/core';
 
 type TokensCollection = {
-  [code in BlockchainCode]: any[];
+  [code in BlockchainCode]: ITokenInfo[];
 };
 
 export interface ITokenInfo {
@@ -10,8 +10,15 @@ export interface ITokenInfo {
   symbol: string;
 }
 
+/**
+ * Empty wrapper as a workaround typescript type losing
+ */
+function createTokenInfos (info: TokensCollection): TokensCollection {
+  return info;
+}
+
 export const registry = {
-  tokens: {
+  tokens: createTokenInfos({
     [BlockchainCode.ETC]: [
       {
         address: '0x085fb4f24031eaedbc2b611aa528f22343eb52db',
@@ -23,7 +30,17 @@ export const registry = {
       {
         address: '0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359',
         decimals: 18,
+        symbol: 'SAI'
+      },
+      {
+        address: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
+        decimals: 18,
         symbol: 'DAI'
+      },
+      {
+        address: '0xdac17f958d2ee523a2206206994597c13d831ec7',
+        decimals: 6,
+        symbol: 'USDT'
       }
     ],
     [BlockchainCode.Morden]: [],
@@ -35,7 +52,7 @@ export const registry = {
       }
     ],
     [BlockchainCode.Unknown]: []
-  } as TokensCollection,
+  }),
   all: () => {
     return registry.tokens;
   },

diff --git a/packages/react-app/src/accounts/AccountDetails/AccountDetails.tsx b/packages/react-app/src/accounts/AccountDetails/AccountDetails.tsx
@@ -40,10 +40,7 @@ export default connect(
       dispatch(screen.actions.showDialog('receive', address));
     },
     goBack: () => {
-      dispatch(screen.actions.gotoScreen('home'));
-    },
-    loadTokens: (chain: any, token: any, address: string) => {
-      dispatch(tokens.actions.requestTokenBalance(chain, token, address));
+      dispatch(screen.actions.gotoScreen(screen.Pages.HOME));
     },
     editAccount: (data: any) => {
       return new Promise((resolve, reject) => {

diff --git a/packages/react-app/src/accounts/AccountDetails/AccountDetailsView.tsx b/packages/react-app/src/accounts/AccountDetails/AccountDetailsView.tsx
@@ -2,8 +2,7 @@ import {
   Account as AddressAvatar, ButtonGroup, IdentityIcon, Page
 } from '@emeraldplatform/ui';
 import { Back } from '@emeraldplatform/ui-icons';
-import { blockchainByName, BlockchainCode, IAccount } from '@emeraldwallet/core';
-import { registry } from '@emeraldwallet/erc20';
+import { blockchainByName, IAccount } from '@emeraldwallet/core';
 import { Button, FormRow, InlineEdit } from '@emeraldwallet/ui';
 import { withStyles } from '@material-ui/styles';
 import * as QRCode from 'qrcode.react';
@@ -33,7 +32,6 @@ export interface IProps {
   showReceiveDialog?: any;
   txList?: React.ReactElement;
   tokens?: React.ReactElement;
-  loadTokens?: any;
 }
 
 type AccountShowProps = IProps & WithTranslation;
@@ -50,20 +48,6 @@ export class AccountShow extends React.Component<AccountShowProps, IState> {
     };
   }
 
-  public componentDidMount (): void {
-    if (this.props.loadTokens) {
-      const { blockchain, id } = this.props.account;
-
-      // Look up all known tokens for current blockchain
-      const _tokens = registry.all()[blockchain as BlockchainCode];
-
-      // Request balance for each token for current address
-      _tokens.forEach((t: any) => {
-        this.props.loadTokens(blockchain, t, id);
-      });
-    }
-  }
-
   public handleEdit = () => {
     this.setState({ edit: true });
   }
@@ -110,7 +94,7 @@ export class AccountShow extends React.Component<AccountShowProps, IState> {
                 leftColumn={<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                   <IdentityIcon id={acc.id}/>
                 </div>}
-                rightColumn={
+                rightColumn={(
                   <React.Fragment>
                     {!this.state.edit && (
                       <AddressAvatar
@@ -121,26 +105,29 @@ export class AccountShow extends React.Component<AccountShowProps, IState> {
                         addressProps={{ hideCopy: false }}
                       />
                       )}
-                    {this.state.edit && <InlineEdit
-                      placeholder='Account name'
-                      initialValue={acc.name}
-                      id={acc.id}
-                      onSave={this.handleSave}
-                      onCancel={this.cancelEdit}
-                    />}
+                    {this.state.edit && (
+                      <InlineEdit
+                        placeholder='Account name'
+                        initialValue={acc.name}
+                        id={acc.id}
+                        onSave={this.handleSave}
+                        onCancel={this.cancelEdit}
+                      />
+                      )}
                   </React.Fragment>
-                }
+                )}
               />
               <FormRow
                 rightColumn={
-                  acc.balance && <Balance
-                    showFiat={showFiat}
-                    coinsStyle={{ fontSize: '20px', lineHeight: '24px' }}
-                    balance={acc.balance}
-                    decimals={18}
-                    symbol={coinTicker}
-                  />
-                }
+                  acc.balance && (
+                    <Balance
+                      showFiat={showFiat}
+                      coinsStyle={{ fontSize: '20px', lineHeight: '24px' }}
+                      balance={acc.balance}
+                      decimals={18}
+                      symbol={coinTicker}
+                    />
+                  )}
               />
               <FormRow
                 rightColumn={this.props.tokens}
@@ -151,7 +138,7 @@ export class AccountShow extends React.Component<AccountShowProps, IState> {
                 rightColumn={<div>{acc.hdpath}</div>}
               /> }
               <FormRow
-                rightColumn={
+                rightColumn={(
                   <div>
                     <ButtonGroup>
                       <Button
@@ -167,7 +154,7 @@ export class AccountShow extends React.Component<AccountShowProps, IState> {
                       <AccountActions account={account}/>
                     </ButtonGroup>
                   </div>
-                }
+                )}
               />
             </div>
 

diff --git a/packages/react-app/src/index.ts b/packages/react-app/src/index.ts
@@ -53,3 +53,6 @@ export { default as ImportLedgerAccount } from './ledger/ImportAccount';
 
 // settings
 export { default as Settings } from './settings/Settings';
+
+// onboarding
+export { default as InitialSetup } from './onboarding/InitialSetup';
diff --git a/...op/src/components/welcome/initialSetup.js → .../onboarding/InitialSetup/InitialSetup.tsx b/...op/src/components/welcome/initialSetup.js → .../onboarding/InitialSetup/InitialSetup.tsx
@@ -1,17 +1,16 @@
+import { launcher, screen } from '@emeraldwallet/store';
+import { InitialSetup } from '@emeraldwallet/ui';
 import React from 'react';
 import { connect } from 'react-redux';
-import { InitialSetup } from '@emeraldwallet/ui';
-import { screen } from '@emeraldwallet/store';
-import launcher from '../../store/launcher';
 
 export default connect(
-  (state, ownProps) => ({
-    terms: state.launcher.get('terms'),
+  (state: any, ownProps: any) => ({
+    terms: launcher.selectors.terms(state)
   }),
   (dispatch, ownProps) => ({
     onTermsAgreed: () => {
       dispatch(launcher.actions.agreeOnTerms(ownProps.currentTermsVersion));
-      dispatch(screen.actions.goHome());
-    },
+      dispatch(screen.actions.goHome() as any);
+    }
   })
 )(InitialSetup);
diff --git a/packages/react-app/src/onboarding/InitialSetup/index.ts b/packages/react-app/src/onboarding/InitialSetup/index.ts
@@ -0,0 +1 @@
+export { default } from './InitialSetup';
diff --git a/packages/react-app/src/settings/Settings/Settings.tsx b/packages/react-app/src/settings/Settings/Settings.tsx
@@ -10,10 +10,10 @@ const TranslatedSettings = withTranslation('translation')(Settings);
 export default connect(
   (state: any, ownProps: any) => {
     return {
-      showHiddenAccounts: state.wallet.settings.get('showHiddenAccounts', false),
-      currency: state.wallet.settings.get('localeCurrency', '').toLowerCase(),
+      showHiddenAccounts: settings.selectors.showHiddenAccounts(state),
+      currency: (settings.selectors.fiatCurrency(state) || '').toLowerCase(),
       language: i18n.language,
-      numConfirmations: state.wallet.settings.get('numConfirmations')
+      numConfirmations: settings.selectors.numConfirms(state)
     };
   },
   (dispatch, ownProps) => ({
@@ -29,8 +29,8 @@ export default connect(
         numConfirmations: data.numConfirmations
       };
       i18n.changeLanguage(data.language);
-      // TODO: re-write using saga
-      dispatch(settings.actions.update(newSettings) as any);
+      dispatch(settings.actions.updateSettings(newSettings) as any);
+      // TODO: get rid of this
       dispatch(addresses.actions.loadAccountsList() as any);
     }
   })