Refactor account discovery

vacuumlabs · Jan 14, 2021 · 1b73d6b · 1b73d6b
1 parent f80cf92
commit 1b73d6b
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 23 deletions.
diff --git a/app/frontend/actions.ts b/app/frontend/actions.ts
@@ -278,6 +278,7 @@ export default ({setState, getState}: {setState: SetStateFn; getState: GetStateF
   }
 
   const logout = () => {
+    window.history.pushState({}, '/', '/')
     wallet = null
     setState(
       {
@@ -288,7 +289,6 @@ export default ({setState, getState}: {setState: SetStateFn; getState: GetStateF
       // @ts-ignore (we don't have types for forced state overwrite)
       true
     ) // force overwriting the state
-    window.history.pushState({}, '/', '/')
   }
 
   /* MNEMONIC */
@@ -1028,7 +1028,7 @@ export default ({setState, getState}: {setState: SetStateFn; getState: GetStateF
 
   const loadAccount = async (state: State, accountIndex: number) => {
     loadingAction(state, 'Loading account')
-    await wallet.loadAccount(accountIndex)
+    await wallet.discoverNewAccount()
     const accountInfo = await wallet.accounts[accountIndex].getAccountInfo(state.validStakepools)
     setState({
       accountsInfo: [...state.accountsInfo, accountInfo],
@@ -1319,6 +1319,12 @@ export default ({setState, getState}: {setState: SetStateFn; getState: GetStateF
     })
   }
 
+  const setLastAccountExplored = () => {
+    setState({
+      isLastAccountExplored: true,
+    })
+  }
+
   return {
     loadingAction,
     stopLoadingAction,
@@ -1377,5 +1383,6 @@ export default ({setState, getState}: {setState: SetStateFn; getState: GetStateF
     setTargetAccount,
     setSourceAccount,
     switchSourceAndTargetAccounts,
+    setLastAccountExplored,
   }
 }
diff --git a/app/frontend/components/pages/accounts/accountsDashboard.tsx b/app/frontend/components/pages/accounts/accountsDashboard.tsx
@@ -9,6 +9,9 @@ import Alert from '../../common/alert'
 import SendTransactionModal from './sendTransactionModal'
 import DelegationModal from './delegationModal'
 import ConfirmTransactionDialog from '../../../../frontend/components/pages/sendAda/confirmTransactionDialog'
+import {errorHasHelp} from '../../../../frontend/helpers/errorsWithHelp'
+import TransactionErrorModal from '../sendAda/transactionErrorModal'
+import {getTranslation} from '../../../../frontend/translations'
 
 const AccountTile = ({
   accountIndex,
@@ -17,17 +20,22 @@ const AccountTile = ({
   selectedAccountIndex,
   showDelegationModal,
   showSendTransactionModal,
+  setLastAccountExplored,
+  isLastAccountExplored,
 }) => {
   const isSelected = selectedAccountIndex === accountIndex
 
+  const shouldShowAccountInfo =
+    account && (account.isUsed || isLastAccountExplored || accountIndex === 0)
+
   const Balance = ({value}: {value: Lovelace}) => (
     <Fragment>
       {printAda(value, 3)}
       <AdaIcon />
     </Fragment>
   )
   const PoolTicker = () => {
-    if (account) {
+    if (shouldShowAccountInfo) {
       return account.shelleyAccountInfo.delegation.ticker || '-'
     }
     return '-'
@@ -36,6 +44,7 @@ const AccountTile = ({
     <button
       className="button primary nowrap account-button"
       onClick={() => showSendTransactionModal(selectedAccountIndex, accountIndex)}
+      disabled={isSelected}
     >
       Transfer
     </button>
@@ -53,7 +62,7 @@ const AccountTile = ({
 
   const buttonLabel = () => {
     if (isSelected) return 'Active'
-    if (!account) return 'Explore'
+    if (!shouldShowAccountInfo) return 'Explore'
     return 'Activate'
   }
 
@@ -68,6 +77,7 @@ const AccountTile = ({
           className="button primary nowrap"
           disabled={isSelected}
           onClick={() => {
+            if (!shouldShowAccountInfo) setLastAccountExplored()
             setSelectedAccount(accountIndex)
           }}
         >
@@ -77,7 +87,7 @@ const AccountTile = ({
       <div className="card-column account-item-info-wrapper">
         <h2 className="card-title small-margin">Available balance</h2>
         <div className="balance-amount small item">
-          {account ? (
+          {shouldShowAccountInfo ? (
             <Balance
               value={
                 account.shelleyBalances.stakingBalance + account.shelleyBalances.nonStakingBalance
@@ -88,7 +98,7 @@ const AccountTile = ({
           )}
         </div>
         <div className="mobile">
-          {account && (
+          {shouldShowAccountInfo && (
             <div className="account-action-buttons">
               <TransferButton />
             </div>
@@ -98,7 +108,11 @@ const AccountTile = ({
       <div className="card-column account-item-info-wrapper tablet-offset">
         <h2 className="card-title small-margin">Rewards balance</h2>
         <div className="balance-amount small item">
-          {account ? <Balance value={account.shelleyBalances.rewardsAccountBalance} /> : '-'}
+          {shouldShowAccountInfo ? (
+            <Balance value={account.shelleyBalances.rewardsAccountBalance} />
+          ) : (
+            '-'
+          )}
         </div>
       </div>
       <div className="card-column account-item-info-wrapper">
@@ -107,14 +121,14 @@ const AccountTile = ({
           <PoolTicker />
         </div>
         <div className="mobile">
-          {account && (
+          {shouldShowAccountInfo && (
             <div className="account-action-buttons">
               <DelegateButton />
             </div>
           )}
         </div>
       </div>
-      {account ? (
+      {shouldShowAccountInfo ? (
         <div className="account-action-buttons desktop">
           <TransferButton />
           <DelegateButton />
@@ -138,6 +152,11 @@ type Props = {
   totalWalletBalance: number
   totalRewardsBalance: number
   shouldShowConfirmTransactionDialog: boolean
+  setLastAccountExplored: any
+  isLastAccountExplored: boolean
+  shouldShowTransactionErrorModal: boolean
+  transactionSubmissionError: any
+  closeTransactionErrorModal: any
 }
 
 const AccountsDashboard = ({
@@ -152,6 +171,11 @@ const AccountsDashboard = ({
   totalWalletBalance,
   totalRewardsBalance,
   shouldShowConfirmTransactionDialog,
+  setLastAccountExplored,
+  isLastAccountExplored,
+  shouldShowTransactionErrorModal,
+  transactionSubmissionError,
+  closeTransactionErrorModal,
 }: Props) => {
   const InfoAlert = () => (
     <Fragment>
@@ -183,7 +207,7 @@ const AccountsDashboard = ({
     </Fragment>
   )
 
-  const usedAccountsCount = accountsInfo.reduce((a: number, {isUsed}) => (isUsed ? a + 1 : a), 0)
+  const usedAccountsCount = accountsInfo.filter(({isUsed}) => isUsed).length
 
   return (
     <Fragment>
@@ -228,6 +252,8 @@ const AccountsDashboard = ({
                   selectedAccountIndex={selectedAccountIndex}
                   showSendTransactionModal={showSendTransactionModal}
                   showDelegationModal={showDelegationModal}
+                  setLastAccountExplored={setLastAccountExplored}
+                  isLastAccountExplored={isLastAccountExplored}
                 />
               ))}
             </div>
@@ -237,6 +263,16 @@ const AccountsDashboard = ({
           </div>
         </div>
       </div>
+      {shouldShowTransactionErrorModal && (
+        <TransactionErrorModal
+          onRequestClose={closeTransactionErrorModal}
+          errorMessage={getTranslation(
+            transactionSubmissionError.code,
+            transactionSubmissionError.params
+          )}
+          showHelp={errorHasHelp(transactionSubmissionError.code)}
+        />
+      )}
       {shouldShowConfirmTransactionDialog && <ConfirmTransactionDialog />}
     </Fragment>
   )
@@ -252,6 +288,9 @@ export default connect(
     totalRewardsBalance: state.totalRewardsBalance,
     totalWalletBalance: state.totalWalletBalance,
     shouldShowConfirmTransactionDialog: state.shouldShowConfirmTransactionDialog,
+    shouldShowTransactionErrorModal: state.shouldShowTransactionErrorModal,
+    transactionSubmissionError: state.transactionSubmissionError,
+    isLastAccountExplored: state.isLastAccountExplored,
   }),
   actions
 )(AccountsDashboard)
diff --git a/app/frontend/state.ts b/app/frontend/state.ts
@@ -116,6 +116,7 @@ export interface State {
   txSuccessTab: string
   shouldShowSaturatedBanner?: boolean
   isBigDelegator: boolean
+  isLastAccountExplored: boolean
   accountsInfo: Array<{
     balance: number
     shelleyBalances: {
@@ -239,6 +240,7 @@ const initialState: State = {
   txSuccessTab: '',
   keepConfirmationDialogOpen: false,
   isBigDelegator: false,
+  isLastAccountExplored: false,
   accountsInfo: [],
   sourceAccountIndex: 0,
   selectedAccountIndex: 0,

diff --git a/app/frontend/wallet/constants.ts b/app/frontend/wallet/constants.ts
@@ -129,4 +129,4 @@ export const BIG_DELEGATOR_THRESHOLD = 10000000000000
 
 export const SATURATION_POINT = 62224967000000
 
-export const MAX_BULK_EXPORT_AMOUNT = 3
+export const MAX_BULK_EXPORT_AMOUNT = 4
diff --git a/app/frontend/wallet/wallet.ts b/app/frontend/wallet/wallet.ts
@@ -6,31 +6,26 @@ const Wallet = ({config, cryptoProvider}) => {
 
   const accounts: Array<ReturnType<typeof Account>> = []
 
-  function loadAccount(accountIndex: number) {
+  function discoverNewAccount() {
     const newAccount = Account({
       config,
       cryptoProvider,
       blockchainExplorer,
-      accountIndex,
+      accountIndex: accounts.length,
     })
     accounts.push(newAccount)
+    return newAccount
   }
 
   async function discoverAccounts() {
     let shouldExplore = true
     let accountIndex = 0
-    while (shouldExplore && !accounts[accountIndex]) {
-      const newAccount = Account({
-        config,
-        cryptoProvider,
-        blockchainExplorer,
-        accountIndex,
-      })
+    while (shouldExplore) {
+      const newAccount = accounts[accountIndex] || discoverNewAccount()
       const isAccountUsed = await newAccount.isAccountUsed()
-      if (isAccountUsed || accountIndex === 0) accounts.push(newAccount)
 
+      shouldExplore = isAccountUsed && config.shouldExportPubKeyBulk && accounts.length < 100
       accountIndex += 1
-      shouldExplore = isAccountUsed && config.shouldExportPubKeyBulk && accountIndex < 100
     }
   }
 
@@ -108,7 +103,7 @@ const Wallet = ({config, cryptoProvider}) => {
     fetchTxInfo,
     checkCryptoProviderVersion,
     accounts,
-    loadAccount,
+    discoverNewAccount,
     discoverAccounts,
     getAccountsInfo,
     getValidStakepools,