Move account lookup to the component

brave · Sep 21, 2023 · 4e5b98e · 4e5b98e
1 parent a102aca
commit 4e5b98e
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 26 deletions.
diff --git a/components/brave_wallet_ui/components/desktop/views/accounts/account.tsx b/components/brave_wallet_ui/components/desktop/views/accounts/account.tsx
@@ -409,6 +409,8 @@ export const Account = () => {
                   onSelectAsset={() => onSelectAsset(nft)}
                   isTokenHidden={false}
                   isTokenSpam={false}
+                  accounts={accounts}
+                  networks={networkList}
                 />
               )}
             </NftGrid>

diff --git a/components/brave_wallet_ui/components/desktop/views/nfts/components/nfts.tsx b/components/brave_wallet_ui/components/desktop/views/nfts/components/nfts.tsx
@@ -268,27 +268,6 @@ export const Nfts = (props: Props) => {
     ]
   }, [sortedHiddenNfts, sortedSpamNfts, sortedNfts])
 
-  const nftsAccountLookup = React.useMemo(() => {
-    const lookup: { [assetId: string]: BraveWallet.AccountInfo | undefined } = {}
-    sortedHiddenNfts
-      .concat(sortedSpamNfts)
-      .concat(sortedNfts)
-      .forEach((nft) => {
-        const account = accounts.find(
-          (account) =>
-            nft.coin === account.accountId.coin &&
-            new Amount(
-              getBalance(account.accountId, nft, tokenBalancesRegistry)
-            ).gte('1')
-        )
-
-        if (account) {
-          lookup[getAssetIdKey(nft)] = account
-        }
-      })
-    return lookup
-  }, [accounts, sortedHiddenNfts, sortedSpamNfts, sortedNfts, tokenBalancesRegistry ])
-
   const renderedList = React.useMemo(() => {
     switch (selectedOptionId) {
       case 'collected':
@@ -339,14 +318,15 @@ export const Nfts = (props: Props) => {
         <NFTGridViewItem
           key={assetId}
           token={nft}
-          account={nftsAccountLookup[assetId]}
+          accounts={accounts}
+          networks={networks}
           onSelectAsset={() => onSelectAsset(nft)}
           isTokenHidden={hiddenNftsIds.includes(assetId) || allSpamNftsIds.includes(assetId)}
           isTokenSpam={allSpamNftsIds.includes(assetId)}
         />
       )
     },
-    [hiddenNftsIds, allSpamNftsIds, nftsAccountLookup, onSelectAsset]
+    [hiddenNftsIds, allSpamNftsIds, onSelectAsset]
   )
 
   const listUiByAccounts = React.useMemo(() => {

diff --git a/...let_ui/components/desktop/views/portfolio/components/nft-grid-view/nft-grid-view-item.tsx b/...let_ui/components/desktop/views/portfolio/components/nft-grid-view/nft-grid-view-item.tsx
@@ -19,6 +19,7 @@ import {
   useRemoveUserTokenMutation, //
   useUpdateNftSpamStatusMutation
 } from '../../../../../../common/slices/api.slice'
+import useBalancesFetcher from '../../../../../../common/hooks/use-balances-fetcher'
 
 // actions
 import { WalletActions } from '../../../../../../common/actions'
@@ -29,6 +30,9 @@ import { WalletSelectors } from '../../../../../../common/selectors'
 
 // Utils
 import { stripERC20TokenImageURL } from '../../../../../../utils/string-utils'
+import { getLocale } from '../../../../../../../common/locale'
+import Amount from '../../../../../../utils/amount'
+import { getBalance } from '../../../../../../utils/balance-utils'
 
 // components
 import { DecoratedNftIcon } from '../../../../../shared/nft-icon/decorated-nft-icon'
@@ -49,18 +53,18 @@ import {
   JunkIcon
 } from './style'
 import { Row } from '../../../../../shared/style'
-import { getLocale } from '../../../../../../../common/locale'
 
 interface Props {
   token: BraveWallet.BlockchainToken
-  account?: BraveWallet.AccountInfo
+  accounts: BraveWallet.AccountInfo[]
+  networks: BraveWallet.NetworkInfo[]
   isTokenHidden: boolean
   isTokenSpam: boolean
   onSelectAsset: () => void
 }
 
 export const NFTGridViewItem = (props: Props) => {
-  const { token, account, isTokenHidden, isTokenSpam, onSelectAsset } = props
+  const { token, accounts, networks, isTokenHidden, isTokenSpam, onSelectAsset } = props
   const tokenImageURL = stripERC20TokenImageURL(token.logo)
   const [showRemoveNftModal, setShowRemoveNftModal] = React.useState<boolean>(false)
 
@@ -75,6 +79,12 @@ export const NFTGridViewItem = (props: Props) => {
   const { data: remoteImage } = useGetIpfsGatewayTranslatedNftUrlQuery(
     tokenImageURL || skipToken
   )
+  const {
+    data: tokenBalancesRegistry
+  } = useBalancesFetcher({
+    accounts,
+    networks
+  })
 
   // hooks
   const dispatch = useDispatch()
@@ -84,6 +94,17 @@ export const NFTGridViewItem = (props: Props) => {
   const [updateNftSpamStatus] = useUpdateNftSpamStatusMutation()
   const [removeUserToken] = useRemoveUserTokenMutation()
 
+  // memos
+  const account = React.useMemo(() => {
+    return accounts.find(
+      (account) =>
+        token.coin === account.accountId.coin &&
+        new Amount(
+          getBalance(account.accountId, token, tokenBalancesRegistry)
+        ).gte('1')
+    )
+  }, [accounts, token, tokenBalancesRegistry])
+
   // methods
   const onToggleShowMore = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
     event?.stopPropagation()

diff --git a/components/brave_wallet_ui/stories/wallet-components.tsx b/components/brave_wallet_ui/stories/wallet-components.tsx
@@ -278,6 +278,8 @@ export const _NFTGridViewItem = () => {
         isTokenSpam={false}
         token={mockErc721Token}
         onSelectAsset={() => {}}
+        networks={[]}
+        accounts={[]}
       />
     </WalletPageStory>
   )