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

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 · b0bddc4 · b0bddc4
1 parent 6124cc9
commit b0bddc4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/apps/extension/src/ui/domains/Portfolio/AssetDetails/DashboardAssetDetails.tsx b/apps/extension/src/ui/domains/Portfolio/AssetDetails/DashboardAssetDetails.tsx
@@ -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} />
+                <SendFundsButton tokenId={token.id} networkId={chainOrNetwork.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
@@ -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 />
+                <SendFundsButton tokenId={token.id} networkId={chainOrNetwork.id} shouldClose />
               </Suspense>
             </div>
           </div>

diff --git a/apps/extension/src/ui/domains/Portfolio/AssetDetails/SendFundsIconButton.tsx b/apps/extension/src/ui/domains/Portfolio/AssetDetails/SendFundsIconButton.tsx
@@ -10,23 +10,32 @@ import { isTransferableToken } from "@ui/util/isTransferableToken"
 import { usePortfolioNavigation } from "../usePortfolioNavigation"
 
 export const SendFundsButton = ({
-  symbol,
   networkId,
   shouldClose,
+  ...tokenLookup
 }: {
-  symbol: string
   networkId: ChainId | EvmNetworkId
   shouldClose?: boolean
-}) => {
+} & ({ tokenId: string } | { symbol: string })) => {
+  const tokenId = "tokenId" in tokenLookup ? tokenLookup.tokenId : undefined
+  const symbol = "symbol" in tokenLookup ? tokenLookup.symbol : undefined
+
   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),
+    typeof tokenId === "string"
+      ? // search by tokenId
+        (t) =>
+          t.id === tokenId &&
+          isTransferableToken(t) &&
+          (("evmNetwork" in t && t.evmNetwork?.id === networkId) || t.chain?.id === networkId)
+      : // search by token symbol
+        (t) =>
+          t.symbol === symbol &&
+          isTransferableToken(t) &&
+          (("evmNetwork" in t && t.evmNetwork?.id === networkId) || t.chain?.id === networkId),
   )
 
   const { canSendFunds, cannotSendFundsReason, openSendFundsPopup } = useSendFundsPopup(