- refactor ledgerStore #137

- fix ConfirmationDialog for ledger (goBack) - fix transaction entry key for unconfirmed txes
RiseVision · Apr 10, 2019 · a776805 · a776805
1 parent 58038f4
commit a776805
Show file tree

Hide file tree

Showing 11 changed files with 414 additions and 520 deletions.
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "@ledgerhq/hw-transport-u2f": "^4.48.0",
     "@material-ui/core": "^3.7.0",
     "@material-ui/icons": "^3.0.1",
+    "async-mutex": "^0.1.3",
     "babel-cli": "^6.26.0",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-preset-es2015": "^6.24.1",
@@ -20,7 +21,7 @@
     "delay": "^4.1.0",
     "downshift": "^3.1.7",
     "dpos-api-wrapper": "^1.3.2",
-    "dpos-ledger-api": "^2.0.0",
+    "dpos-ledger-api": "^3.0.1",
     "dpos-offline": "2.0.2",
     "inobounce": "^0.1.6",
     "is-mobile": "^2.0.0",

diff --git a/src/containers/onboarding/AddAccountPage.tsx b/src/containers/onboarding/AddAccountPage.tsx
@@ -22,11 +22,9 @@ import {
   onboardingInstallToHomeScreenRoute
 } from '../../routes';
 import LangStore from '../../stores/lang';
-import LedgerStore from '../../stores/ledger';
 import OnboardingStore from '../../stores/onboarding';
 import WalletStore from '../../stores/wallet';
 import { getMainCountryForLocale } from '../../utils/i18n';
-import { LedgerChannel } from '../../utils/ledgerHub';
 
 const riseIcon = require('../../images/rise_icon.svg');
 
@@ -46,7 +44,6 @@ interface PropsInjected extends Props {
   langStore: LangStore;
   onboardingStore: OnboardingStore;
   walletStore: WalletStore;
-  ledgerStore: LedgerStore;
 }
 
 const stylesDecorator = withStyles(styles, {
@@ -56,25 +53,13 @@ const stylesDecorator = withStyles(styles, {
 @inject('langStore')
 @inject('onboardingStore')
 @inject('walletStore')
-@inject('ledgerStore')
 @observer
 class AddAccountPage extends React.Component<Props> {
-  private ledger: LedgerChannel;
 
   get injected(): PropsInjected {
     return this.props as PropsInjected;
   }
 
-  componentWillMount() {
-    const { ledgerStore } = this.injected;
-    this.ledger = ledgerStore.openChannel();
-  }
-
-  componentWillUnmount() {
-    // pass async
-    this.ledger.close();
-  }
-
   handleBeforeNavigate = () => {
     const { onboardingStore } = this.injected;
     onboardingStore.reset();

diff --git a/src/containers/onboarding/LedgerAccountPage.tsx b/src/containers/onboarding/LedgerAccountPage.tsx
@@ -6,7 +6,7 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import ListItemText from '@material-ui/core/ListItemText';
 import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import { observable, reaction, IReactionDisposer, runInAction } from 'mobx';
+import { observable, runInAction, action } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import { RouterStore } from 'mobx-router-rise';
 import * as React from 'react';
@@ -23,10 +23,9 @@ import ModalPaper from '../../components/ModalPaper';
 import ModalPaperHeader from '../../components/ModalPaperHeader';
 import { onboardingAddAccountRoute, accountOverviewRoute } from '../../routes';
 import { AccountType } from '../../stores/account';
-import LedgerStore from '../../stores/ledger';
+import LedgerStore, { LedgerAccount } from '../../stores/ledger';
 import OnboardingStore from '../../stores/onboarding';
 import WalletStore from '../../stores/wallet';
-import { LedgerAccount, LedgerChannel } from '../../utils/ledgerHub';
 
 const styles = createStyles({
   content: {
@@ -107,13 +106,13 @@ const messages = defineMessages({
 class AccountData {
   @observable data: null | LedgerAccount = null;
 
-  constructor(ledger: LedgerChannel, readonly slot: number) {
-    this.load(ledger);
+  constructor(ledgerStore: LedgerStore, readonly slot: number) {
+    this.load(ledgerStore);
   }
 
-  private async load(ledger: LedgerChannel) {
+  private async load(ledgerStore: LedgerStore) {
     try {
-      const resp = await ledger.getAccount(this.slot);
+      const resp = await ledgerStore.getAccount(this.slot);
       runInAction(() => {
         this.data = resp;
       });
@@ -129,44 +128,33 @@ class AccountData {
 @inject('ledgerStore')
 @observer
 class LedgerAccountPage extends React.Component<DecoratedProps> {
-  private ledger: LedgerChannel;
-  private disposeAccountLoader: null | IReactionDisposer = null;
   private countdownId: null | number = null;
 
   @observable private selectedAccount: null | AccountData = null;
   @observable private selectionTimeout: null | Date = null;
   @observable private countdownSeconds: number = 0;
   @observable private accounts = observable.array<AccountData>([]);
+  private loadingAccounts = false;
 
   get injected(): PropsInjected {
     return this.props as PropsInjected;
   }
 
   componentWillMount() {
-    const { ledgerStore } = this.injected;
-    this.ledger = ledgerStore.openChannel();
-
-    this.disposeAccountLoader = reaction(
-      () => this.ledger.deviceId,
-      this.accountLoader
-    );
-    this.accountLoader();
+    this.injected.ledgerStore.open();
   }
 
   componentWillUnmount() {
-    if (this.disposeAccountLoader) {
-      this.disposeAccountLoader();
-      this.disposeAccountLoader = null;
-    }
-
-    this.ledger.close();
+    this.injected.ledgerStore.close();
   }
 
   render() {
     const { intl, classes, ledgerStore } = this.injected;
-    const { deviceId } = this.ledger;
+    const { deviceId } = ledgerStore;
     const { selectedAccount, countdownSeconds } = this;
 
+    this.loadAccounts();
+
     return (
       <ModalPaper open={true}>
         <ModalPaperHeader backLink={{ route: onboardingAddAccountRoute }}>
@@ -328,8 +316,8 @@ class LedgerAccountPage extends React.Component<DecoratedProps> {
   }
 
   private async confirmImport(account: AccountData) {
-    const { walletStore, routerStore } = this.injected;
-    const { deviceId } = this.ledger;
+    const { walletStore, routerStore, ledgerStore } = this.injected;
+    const { deviceId } = ledgerStore;
 
     if (account.data !== null) {
       const { address: accountAddress } = account.data;
@@ -344,7 +332,7 @@ class LedgerAccountPage extends React.Component<DecoratedProps> {
       // Run the actual confirmation logic
       let success: boolean;
       try {
-        success = await this.ledger.confirmAccount(account.slot);
+        success = await ledgerStore.confirmAccount(account.slot);
       } catch (ex) {
         success = false;
       }
@@ -374,10 +362,21 @@ class LedgerAccountPage extends React.Component<DecoratedProps> {
   /**
    * TODO move to LedgerStore
    */
-  private accountLoader = () => {
+  @action
+  private loadAccounts = () => {
     const accountsToLoad = 5;
-    const { walletStore } = this.injected;
-    const { deviceId } = this.ledger;
+    const { walletStore, ledgerStore } = this.injected;
+    const { deviceId } = ledgerStore;
+
+    // wait for a read transport
+    if (!deviceId) {
+      return;
+    }
+    // only one thread
+    if (this.loadingAccounts || this.accounts.length == accountsToLoad) {
+      return;
+    }
+    this.loadingAccounts = true;
 
     this.selectedAccount = null;
     // TODO dispose the previous one
@@ -395,10 +394,12 @@ class LedgerAccountPage extends React.Component<DecoratedProps> {
         importedAccounts.filter(({ hwSlot }) => hwSlot === slot).length > 0;
 
       if (!isImported) {
-        const acc = new AccountData(this.ledger, slot);
+        const acc = new AccountData(ledgerStore, slot);
         this.accounts.push(acc);
       }
     }
+
+    this.loadingAccounts = false;
   }
 }
 

diff --git a/src/containers/wallet/AccountOverview.tsx b/src/containers/wallet/AccountOverview.tsx
@@ -340,7 +340,10 @@ class AccountOverview extends React.Component<DecoratedProps, State> {
                         )}
                         onExpand={this.handleExpand}
                         getSendLinkProps={this.getSendLinkProps}
-                        key={transaction.id}
+                        key={
+                          transaction.id +
+                          (transaction.confirmations ? 'C' : 'U')
+                        }
                         tx={transaction}
                         explorerUrl={this.account.config.explorer_url}
                         handleContactEdit={this.handleContactEdit}