Merge pull request #1691 from oasisprotocol/lw/fix-balances-home

Fix refreshing balances on Home page after switching network

playwright/tests/refreshing-balance.spec.ts

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test'
+import { privateKey, privateKeyAddress } from '../utils/test-inputs'
+import { fillPrivateKeyWithoutPassword } from '../utils/fillPrivateKey'
+import { warnSlowApi } from '../utils/warnSlowApi'
+import { mockApi } from '../utils/mockApi'
+
+test.beforeEach(async ({ page }) => {
+  await warnSlowApi(page)
+  await mockApi(page, 123)
+
+  await page.goto('/open-wallet/private-key')
+  await fillPrivateKeyWithoutPassword(page, {
+    privateKey: privateKey,
+    privateKeyAddress: privateKeyAddress,
+    persistenceCheckboxChecked: false,
+    persistenceCheckboxDisabled: false,
+  })
+  await expect(page.getByTestId('account-selector')).toBeVisible()
+})
+
+test('Account selector should refresh balances on network change', async ({ page }) => {
+  await page.getByRole('link', { name: /Home/ }).click()
+
+  await page.getByTestId('account-selector').click()
+  await expect(page.getByTestId('account-choice')).toContainText('123.0')
+  await page.getByRole('button', { name: /Select/ }).click()
+
+  await mockApi(page, 456)
+  await page.getByTestId('network-selector').click()
+  await page.getByRole('menuitem', { name: 'Testnet' }).click()
+  await page.getByTestId('account-selector').click()
+  await expect(page.getByTestId('account-choice')).toContainText('456.0')
+  await page.getByRole('button', { name: /Select/ }).click()
+})

playwright/utils/mockApi.ts

@@ -12,7 +12,7 @@ export async function mockApi(context: BrowserContext | Page, balance: number) {
           available: balance.toString(),
           escrow: '0',
           debonding: '0',
-          total: '0',
+          total: balance.toString(),
           nonce: 1,
           allowances: [],
         } satisfies AccountsRow,

src/app/pages/AccountPage/index.tsx

@@ -9,7 +9,6 @@ import { TransactionModal } from 'app/components/TransactionModal'
 import { selectSelectedNetwork } from 'app/state/network/selectors'
 import { selectStaking } from 'app/state/staking/selectors'
 import { selectTransaction } from 'app/state/transaction/selectors'
-import { walletActions } from 'app/state/wallet'
 import { Box } from 'grommet/es6/components/Box'
 import { Layer } from 'grommet/es6/components/Layer'
 import { Nav } from 'grommet/es6/components/Nav'
@@ -27,12 +26,7 @@ import { normalizeColor } from 'grommet/es6/utils'
 import { accountActions } from 'app/state/account'
 import { selectAccount } from 'app/state/account/selectors'
 import { BalanceDetails } from 'app/state/account/types'
-import {
-  selectAddress,
-  selectHasAccounts,
-  selectWallets,
-  selectWalletsAddresses,
-} from 'app/state/wallet/selectors'
+import { selectAddress, selectHasAccounts } from 'app/state/wallet/selectors'
 import { AccountSummary } from './Features/AccountSummary'
 import { AccountPageParams } from './validateAccountPageRoute'
 import { Button } from 'grommet/es6/components/Button'
@@ -84,8 +78,6 @@ export function AccountPage(props: AccountPageProps) {
   const walletAddress = useSelector(selectAddress)
   const selectedNetwork = useSelector(selectSelectedNetwork)
   const { active } = useSelector(selectTransaction)
-  const wallets = useSelector(selectWallets)
-  const walletsAddresses = useSelector(selectWalletsAddresses)
 
   const balanceDelegations = stake.delegations?.reduce((acc, v) => acc + BigInt(v.amount), 0n)
   const balanceDebondingDelegations = stake.debondingDelegations?.reduce(
@@ -110,15 +102,6 @@ export function AccountPage(props: AccountPageProps) {
     }
   }, [dispatch, address, selectedNetwork])
 
-  // Reload wallet balances if network changes
-  useEffect(() => {
-    for (const wallet of Object.values(wallets)) {
-      dispatch(walletActions.fetchWallet(wallet))
-    }
-    // Using `walletsAddresses` dependency instead of `wallets` to avoid infinite loop
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch, walletsAddresses.join(','), selectedNetwork])
-
   return (
     <Box pad="small">
       {active && <TransactionModal />}

src/app/state/wallet/saga.test.ts

@@ -5,7 +5,7 @@ import { DeepPartialRootState } from 'types/RootState'
 
 import { walletActions } from '.'
 import { transactionActions } from '../transaction'
-import { addWallet, rootWalletSaga, walletSaga } from './saga'
+import { addWallet, rootWalletSaga } from './saga'
 import { AddWalletPayload, WalletType } from './types'
 import { importAccountsActions } from '../importaccounts'
 import { getAccountBalanceWithFallback } from '../../lib/getAccountBalanceWithFallback'
@@ -43,7 +43,6 @@ describe('Wallet Sagas', () => {
         .withState(state)
         .provide(providers)
         .dispatch(walletActions.openWalletFromMnemonic({ choosePassword: undefined }))
-        .fork(walletSaga)
         .silentRun(50)
     })
 
@@ -52,7 +51,6 @@ describe('Wallet Sagas', () => {
         .provide(providers)
         .withState(state)
         .dispatch(walletActions.openWalletFromMnemonic({ choosePassword: undefined }))
-        .fork(walletSaga)
         .put(importAccountsActions.clear())
         .call(addWallet, {
           address: 'oasis1qq2vzcvxn0js5unsch5me2xz4kr43vcasv0d5eq4',
@@ -79,7 +77,6 @@ describe('Wallet Sagas', () => {
             choosePassword: undefined,
           }),
         )
-        .fork(walletSaga)
         .call.like({
           fn: addWallet,
           args: [
@@ -98,7 +95,6 @@ describe('Wallet Sagas', () => {
         .provide(providers)
         .withState(state)
         .dispatch(walletActions.openWalletsFromLedger({ choosePassword: undefined }))
-        .fork(walletSaga)
         .put(importAccountsActions.clear())
         .put.actionType(walletActions.selectWallet.type)
         .silentRun(50)
@@ -146,7 +142,6 @@ describe('Wallet Sagas', () => {
           },
         })
         .dispatch(walletActions.openWalletsFromLedger({ choosePassword: undefined }))
-        .fork(walletSaga)
         .put({
           type: walletActions.selectWallet.type,
           payload: 'oasis1qq2vzcvxn0js5unsch5me2xz4kr43vcasv0d5eq4',

src/app/state/wallet/saga.ts

@@ -18,12 +18,7 @@ import {
 } from './types'
 import { persistActions } from 'app/state/persist'
 import { getAccountBalanceWithFallback } from '../../lib/getAccountBalanceWithFallback'
-
-/**
- * Opened wallet saga
- * Will later be used to sign arbitrary messages
- */
-export function* walletSaga() {}
+import { networkActions } from '../network'
 
 export function* rootWalletSaga() {
   // Wait for an openWallet action (Mnemonic, Private Key, Ledger) and add them if requested
@@ -36,8 +31,8 @@ export function* rootWalletSaga() {
   yield* fork(refreshAccountOnParaTimeTransaction)
   yield* takeEvery(walletActions.fetchWallet, fetchWallet)
 
-  // Start the wallet saga in parallel
-  yield* fork(walletSaga)
+  // Reload wallet balances if network changes
+  yield* takeEvery(networkActions.networkSelected, refreshOnNetworkChange)
 }
 
 function* getWalletByAddress(address: string) {
@@ -171,3 +166,10 @@ function* refreshAccount(address: string) {
     yield* put(walletActions.fetchWallet(wallet))
   }
 }
+
+function* refreshOnNetworkChange() {
+  const wallets = yield* select(selectWallets)
+  for (const wallet of Object.values(wallets)) {
+    yield* put(walletActions.fetchWallet(wallet))
+  }
+}