Merge pull request #762 from oasisprotocol/csillag/optimize-token-bal…

…ance-list Improve performance when displaying token balance list
oasisprotocol · Aug 1, 2023 · 82f9ffa · 82f9ffa
2 parents 347f2b7 + 36d8bd0
commit 82f9ffa
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/.changelog/762.internal.md b/.changelog/762.internal.md
@@ -0,0 +1 @@
+When listing token balances, use locally available data
diff --git a/src/app/components/Account/TokenPills.tsx b/src/app/components/Account/TokenPills.tsx
@@ -45,7 +45,7 @@ export const Pill: FC<PillProps> = ({ account, pill }) => {
     account,
     account.address_eth ?? account.address,
     pill.token_type!,
-    pill.token_contract_addr,
+    pill.token_contract_addr_eth ?? pill.token_contract_addr,
   )
 
   return (
@@ -54,7 +54,7 @@ export const Pill: FC<PillProps> = ({ account, pill }) => {
       color="tertiary"
       component={RouterLink}
       to={tokenRoute}
-      key={pill.token_contract_addr}
+      key={pill.token_contract_addr_eth ?? pill.token_contract_addr}
       label={
         <>
           <RoundedBalance value={pill.balance} ticker={pill.token_symbol || t('common.missing')} />

diff --git a/src/app/pages/AccountDetailsPage/AccountTokensCard.tsx b/src/app/pages/AccountDetailsPage/AccountTokensCard.tsx
@@ -40,7 +40,10 @@ export const DelayedContractLink: FC<{ scope: SearchScope; oasisAddress: string
     return <Skeleton variant={'text'} />
   }
 
-  const address = contract?.address_eth ?? oasisAddress
+  return <ContractLink scope={scope} address={contract?.address_eth ?? oasisAddress} />
+}
+
+export const ContractLink: FC<{ scope: SearchScope; address: string }> = ({ scope, address }) => {
   return (
     <Box sx={{ display: 'flex', alignContent: 'center' }}>
       <AccountLink scope={scope} address={address} />
@@ -72,17 +75,23 @@ export const AccountTokensCard: FC<AccountTokensCardProps> = ({ scope, address,
         content: (
           <TokenLink
             scope={scope}
-            address={item.token_contract_addr}
+            address={item.token_contract_addr_eth ?? item.token_contract_addr}
             name={item.token_name || t('common.missing')}
           />
         ),
         key: 'name',
       },
       {
         content: (
-          <LinkableDiv id={item.token_contract_addr}>
-            {/* TODO remove temporal workaround when token_contract_addr_eth becomes available as part of RuntimeEvmBalance */}
-            <DelayedContractLink scope={scope} oasisAddress={item.token_contract_addr} />
+          <LinkableDiv id={item.token_contract_addr_eth ?? item.token_contract_addr}>
+            {item.token_contract_addr_eth === undefined ? ( // TODO remove temporal workaround when latest Nexus is deployed
+              <DelayedContractLink scope={scope} oasisAddress={item.token_contract_addr} />
+            ) : (
+              <ContractLink
+                scope={scope}
+                address={item.token_contract_addr_eth ?? item.token_contract_addr}
+              />
+            )}
           </LinkableDiv>
         ),
         key: 'hash',
@@ -98,7 +107,7 @@ export const AccountTokensCard: FC<AccountTokensCardProps> = ({ scope, address,
         key: 'ticker',
       },
     ],
-    highlight: item.token_contract_addr === locationHash,
+    highlight: item.token_contract_addr_eth === locationHash || item.token_contract_addr === locationHash,
   }))
 
   return (

diff --git a/src/app/pages/SearchResultsPage/__tests__/SearchResultsList.test.tsx b/src/app/pages/SearchResultsPage/__tests__/SearchResultsList.test.tsx
@@ -81,7 +81,7 @@ describe('SearchResultsView', () => {
     expect(screen.getByText('337,325.43836… FTP')).toBeInTheDocument()
     expect(screen.getByRole('link', { name: /337,325.43836/ })).toHaveAttribute(
       'href',
-      '/mainnet/emerald/address/0xBA504818FdD8D3dBA2Ef8fD9B4F4D5c71aD1d1D3/tokens/erc-20#oasis1qpssvkplnlpzdvwxpgmrhf9j5lkyvaylcvujhjhg',
+      '/mainnet/emerald/address/0xBA504818FdD8D3dBA2Ef8fD9B4F4D5c71aD1d1D3/tokens/erc-20#0xF8E3DE55D24D13607A12628E0A113B66BA578bD1',
     )
   })
 })
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		When listing token balances, use locally available data