fix: use tokenId instead of symbol for send funds lookup where possib…

…le (#1765) prevents a bug when the same symbol is used by multiple tokens on one network e.g. USDC vs USDC.e vs whUSDC (which is also just USDC in the contract) on polygon
TalismanSociety · Dec 24, 2024 · cbe75b2 · cbe75b2
1 parent 99b4922
commit cbe75b2
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 19 deletions.
diff --git a/apps/extension/src/ui/domains/Portfolio/AssetDetails/DashboardAssetDetails.tsx b/apps/extension/src/ui/domains/Portfolio/AssetDetails/DashboardAssetDetails.tsx
@@ -24,7 +24,7 @@ import { StaleBalancesIcon } from "../StaleBalancesIcon"
 import { usePortfolioNavigation } from "../usePortfolioNavigation"
 import { CopyAddressButton } from "./CopyAddressIconButton"
 import { PortfolioAccount } from "./PortfolioAccount"
-import { SendFundsButton } from "./SendFundsIconButton"
+import { SendFundsTokenButton } from "./SendFundsTokenIconButton"
 import { TokenContextMenu } from "./TokenContextMenu"
 import { useAssetDetails } from "./useAssetDetails"
 import { BalanceDetailRow, useTokenBalances } from "./useTokenBalances"
@@ -102,7 +102,7 @@ const TokenBalances: FC<{ tokenId: TokenId; balances: Balances }> = ({ tokenId,
               <span className="mr-2">{chainOrNetwork.name}</span>
               <CopyAddressButton networkId={chainOrNetwork.id} />
               <Suspense fallback={<SuspenseTracker name="ChainTokenBalances.Buttons" />}>
-                <SendFundsButton symbol={token.symbol} networkId={chainOrNetwork.id} />
+                <SendFundsTokenButton tokenId={token.id} />
                 {tokenId && (
                   <TokenContextMenu
                     tokenId={tokenId}

diff --git a/apps/extension/src/ui/domains/Portfolio/AssetDetails/PopupAssetDetails.tsx b/apps/extension/src/ui/domains/Portfolio/AssetDetails/PopupAssetDetails.tsx
@@ -27,7 +27,7 @@ import { useFeatureFlag, useSelectedCurrency } from "@ui/state"
 import { StaleBalancesIcon } from "../StaleBalancesIcon"
 import { CopyAddressButton } from "./CopyAddressIconButton"
 import { PortfolioAccount } from "./PortfolioAccount"
-import { SendFundsButton } from "./SendFundsIconButton"
+import { SendFundsTokenButton } from "./SendFundsTokenIconButton"
 import { TokenContextMenu } from "./TokenContextMenu"
 import { useAssetDetails } from "./useAssetDetails"
 import { BalanceDetailRow, useTokenBalances } from "./useTokenBalances"
@@ -62,7 +62,7 @@ const TokenBalances: FC<{ tokenId: TokenId; balances: Balances }> = ({ tokenId,
               <span className="mr-2 truncate">{chainOrNetwork.name}</span>
               <CopyAddressButton networkId={chainOrNetwork.id} />
               <Suspense fallback={<SuspenseTracker name="ChainTokenBalances.Buttons" />}>
-                <SendFundsButton symbol={token.symbol} networkId={chainOrNetwork.id} shouldClose />
+                <SendFundsTokenButton tokenId={token.id} shouldClose />
               </Suspense>
             </div>
           </div>

diff --git a/...olio/AssetDetails/SendFundsIconButton.tsx → ...AssetDetails/SendFundsTokenIconButton.tsx b/...olio/AssetDetails/SendFundsIconButton.tsx → ...AssetDetails/SendFundsTokenIconButton.tsx
@@ -1,33 +1,25 @@
-import { ChainId, EvmNetworkId } from "@talismn/chaindata-provider"
+import { TokenId } from "@talismn/chaindata-provider"
 import { SendIcon } from "@talismn/icons"
 import { useCallback } from "react"
 import { Tooltip, TooltipContent, TooltipTrigger } from "talisman-ui"
 
 import { useSendFundsPopup } from "@ui/hooks/useSendFundsPopup"
-import { useSetting, useTokens } from "@ui/state"
+import { useSetting, useTokensMap } from "@ui/state"
 import { isTransferableToken } from "@ui/util/isTransferableToken"
 
 import { usePortfolioNavigation } from "../usePortfolioNavigation"
 
-export const SendFundsButton = ({
-  symbol,
-  networkId,
+export const SendFundsTokenButton = ({
+  tokenId,
   shouldClose,
 }: {
-  symbol: string
-  networkId: ChainId | EvmNetworkId
+  tokenId: TokenId
   shouldClose?: boolean
 }) => {
   const { selectedAccount } = usePortfolioNavigation()
   const [includeTestnets] = useSetting("useTestnets")
-  const tokens = useTokens({ activeOnly: true, includeTestnets })
-
-  const token = tokens?.find(
-    (t) =>
-      t.symbol === symbol &&
-      isTransferableToken(t) &&
-      (("evmNetwork" in t && t.evmNetwork?.id === networkId) || t.chain?.id === networkId),
-  )
+  const tokensMap = useTokensMap({ activeOnly: true, includeTestnets })
+  const token = isTransferableToken(tokensMap[tokenId]) ? tokensMap[tokenId] : undefined
 
   const { canSendFunds, cannotSendFundsReason, openSendFundsPopup } = useSendFundsPopup(
     selectedAccount,