diff --git a/apps/web/src/app/components/home/_components/CollateralChainSelector/ChainList.tsx b/apps/web/src/app/components/home/_components/CollateralChainSelector/ChainList.tsx index dcb4e39da..800672364 100644 --- a/apps/web/src/app/components/home/_components/CollateralChainSelector/ChainList.tsx +++ b/apps/web/src/app/components/home/_components/CollateralChainSelector/ChainList.tsx @@ -43,13 +43,34 @@ const ChainItem = ({ chain, setChainId, isLast }: ChainItemProps) => { const isSignedIn = signedInWallets.some(wallet => wallet.xChainId === chain.xChainId); const crossChainBalances = useCrossChainWalletBalances(); const collateralType = useCollateralType(); - const xToken = xTokenMap[chain.xChainId].find(xToken => xToken.symbol === collateralType); + const selectedCollateralType = useCollateralType(); + const isSmall = useMedia('(max-width: 440px)'); + + // Find token by symbol or by identifier (for BTC/BTCB case) + const findTokenForCollateral = useMemo(() => { + const chainTokens = xTokenMap[chain.xChainId] || []; + // First try to find by symbol + let token = chainTokens.find(xToken => xToken.symbol === collateralType); + + // If not found, find tokens that share the same identifier + if (!token) { + // Get identifiers from tokens with matching symbol across all chains + const allTokens = Object.values(xTokenMap).flat(); + const matchingTokens = allTokens.filter(t => t.symbol === collateralType); + const matchingIdentifiers = new Set(matchingTokens.map(t => t.identifier)); + + // Find token on this chain that shares the identifier + token = chainTokens.find(t => matchingIdentifiers.has(t.identifier)); + } + + return token; + }, [chain.xChainId, collateralType]); + + const xToken = findTokenForCollateral; const depositedAmounts = useCollateralAmounts(chain.xChainId); const existingPosition = depositedAmounts[collateralType]; const prices = useOraclePrices(); const xTokenPrice = prices?.[xToken?.symbol || '']; - const selectedCollateralType = useCollateralType(); - const isSmall = useMedia('(max-width: 440px)'); const formattedWalletBalance = useMemo(() => { if (existingPosition?.isGreaterThan(0) || !xToken) return; @@ -66,9 +87,22 @@ const ChainItem = ({ chain, setChainId, isLast }: ChainItemProps) => { return xTokenPrice ? formatValue(existingPosition.times(xTokenPrice).toFixed()) : '-'; }, [existingPosition, xTokenPrice]); - const spokeAssetVersion = xTokenMap[chain.xChainId].find( - xToken => xToken.symbol === selectedCollateralType, - )?.spokeVersion; + // Find spoke version using the same logic + const spokeAssetVersion = useMemo(() => { + const chainTokens = xTokenMap[chain.xChainId] || []; + // First try to find by symbol + let token = chainTokens.find(xToken => xToken.symbol === selectedCollateralType); + + // If not found, find tokens that share the same identifier + if (!token) { + const allTokens = Object.values(xTokenMap).flat(); + const matchingTokens = allTokens.filter(t => t.symbol === selectedCollateralType); + const matchingIdentifiers = new Set(matchingTokens.map(t => t.identifier)); + token = chainTokens.find(t => matchingIdentifiers.has(t.identifier)); + } + + return token?.spokeVersion; + }, [chain.xChainId, selectedCollateralType]); return ( setChainId(chain.xChainId)}> diff --git a/packages/xwagmi/src/constants/xTokens.ts b/packages/xwagmi/src/constants/xTokens.ts index 70115d59f..be316fab9 100644 --- a/packages/xwagmi/src/constants/xTokens.ts +++ b/packages/xwagmi/src/constants/xTokens.ts @@ -172,6 +172,7 @@ export const xTokenMap: { [key in XChainId]: XToken[] } = { 'BTCB', 'Binance-Peg BTCB Token', 'BTC1', + 'BTCB', ), new XToken('0x38.bsc', 56, '0xd94F0Aea6d6f14C012d992e8886C8C1736921e10', 18, 'sICX', 'Staked ICX'), new XToken('0x38.bsc', 56, '0x94cf269d63c4140eD481CB0b149daE03c4620cdF', 18, 'BALN', 'Balance Token'), diff --git a/packages/xwagmi/src/xcall/utils.ts b/packages/xwagmi/src/xcall/utils.ts index 1941af291..b965d3955 100644 --- a/packages/xwagmi/src/xcall/utils.ts +++ b/packages/xwagmi/src/xcall/utils.ts @@ -74,10 +74,21 @@ export const toICONDecimals = (currencyAmount: CurrencyAmount): bigint }; export const getSupportedXChainIdsForToken = (currency: Currency | XToken): XChainId[] => { - return Object.values(xTokenMap) - .flat() - .filter(t => t.symbol === currency?.symbol) - .map(t => t.xChainId); + const allTokens = Object.values(xTokenMap).flat(); + + // Find tokens matching by symbol + const matchingTokens = allTokens.filter(t => t.symbol === currency?.symbol); + + // Get identifiers from matching tokens (for BTC-related tokens that share 'BTC1' identifier) + const matchingIdentifiers = new Set(matchingTokens.map(t => t.identifier)); + + // Also include tokens that share the same identifier (e.g., BTCB shares 'BTC1' with BTC) + const tokensByIdentifier = allTokens.filter(t => matchingIdentifiers.has(t.identifier)); + + // Combine both sets and get unique chain IDs + const chainIds = new Set(tokensByIdentifier.map(t => t.xChainId)); + + return Array.from(chainIds); }; export const getSupportedXChainForToken = (currency?: Currency | XToken | null): XChain[] | undefined => {