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.ts

@@ -18,6 +18,7 @@ import {
 } from './types'
 import { persistActions } from 'app/state/persist'
 import { getAccountBalanceWithFallback } from '../../lib/getAccountBalanceWithFallback'
+import { networkActions } from '../network'
 
 export function* rootWalletSaga() {
   // Wait for an openWallet action (Mnemonic, Private Key, Ledger) and add them if requested
@@ -30,6 +31,8 @@ export function* rootWalletSaga() {
   yield* fork(refreshAccountOnParaTimeTransaction)
   yield* takeEvery(walletActions.fetchWallet, fetchWallet)
 
+  // Reload wallet balances if network changes
+  yield* takeEvery(networkActions.networkSelected, refreshOnNetworkChange)
 }
 
 function* getWalletByAddress(address: string) {
@@ -163,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))
+  }
+}