diff --git a/components/brave_wallet_ui/components/desktop/views/accounts/account.tsx b/components/brave_wallet_ui/components/desktop/views/accounts/account.tsx index 998f3d313433..e1bb7f362ed8 100644 --- 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} /> )} 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 index 5929c1a39f6c..0c844d3ce3b6 100644 --- 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) => { 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/components/brave_wallet_ui/components/desktop/views/portfolio/components/nft-grid-view/nft-grid-view-item.tsx b/components/brave_wallet_ui/components/desktop/views/portfolio/components/nft-grid-view/nft-grid-view-item.tsx index 108ad47a5b28..594e67bb7b38 100644 --- a/components/brave_wallet_ui/components/desktop/views/portfolio/components/nft-grid-view/nft-grid-view-item.tsx +++ b/components/brave_wallet_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(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) => { event?.stopPropagation() diff --git a/components/brave_wallet_ui/stories/wallet-components.tsx b/components/brave_wallet_ui/stories/wallet-components.tsx index b20b7e107101..b509884be599 100644 --- 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={[]} /> )