Fix TokenPicker

Author: Lbqds

bridge_ui/src/components/TokenSelectors/AlephiumTokenPicker.tsx

@@ -4,7 +4,7 @@ import { useCallback } from "react";
 import { createParsedTokenAccount } from "../../hooks/useGetSourceParsedTokenAccounts";
 import useIsWalletReady from "../../hooks/useIsWalletReady";
 import { ParsedTokenAccount } from "../../store/transferSlice";
-import { getAlephiumTokenLogoURI, tryGetContractId } from "../../utils/alephium";
+import { getAlephiumTokenLogoAndSymbol, tryGetContractId } from "../../utils/alephium";
 import TokenPicker, { BasicAccountRender } from "./TokenPicker";
 import { useWallet } from "@alephium/web3-react";
 import { useTranslation } from "react-i18next";
@@ -50,6 +50,7 @@ export default function AlephiumTokenPicker(props: AlephiumTokenPickerProps) {
         try {
           const contractId = tryGetContractId(address)
           const tokenInfo = await getLocalTokenInfo(alphWallet.nodeProvider, contractId)
+          const logoAndSymbol = await getAlephiumTokenLogoAndSymbol(contractId)
           const amount = balances.get(contractId.toLowerCase()) ?? BigInt(0)
           const uiAmount = formatUnits(amount, tokenInfo.decimals)
           return createParsedTokenAccount(
@@ -59,9 +60,9 @@ export default function AlephiumTokenPicker(props: AlephiumTokenPickerProps) {
             tokenInfo.decimals,
             parseFloat(uiAmount),
             uiAmount,
-            tokenInfo.symbol,
+            logoAndSymbol?.symbol ?? tokenInfo.symbol,
             tokenInfo.name,
-            await getAlephiumTokenLogoURI(contractId),
+            logoAndSymbol?.logoURI,
             false
           )
         } catch (e) {

bridge_ui/src/components/TokenSelectors/EvmTokenPicker.tsx

@@ -20,6 +20,7 @@ import {
   isValidEthereumAddress,
 } from "../../utils/evm";
 import TokenPicker, { BasicAccountRender } from "./TokenPicker";
+import { getTokenLogoAndSymbol } from "../../utils/tokens";
 
 const isWormholev1 = (provider: any, address: string, chainId: ChainId) => {
   if (chainId !== CHAIN_ID_ETH) {
@@ -88,11 +89,17 @@ export default function EvmTokenPicker(
               signerAddress
             );
           } else {
-            return ethTokenToParsedTokenAccount(
+            const logoAndSymbol = await getTokenLogoAndSymbol(chainId, tokenAccount.address)
+            const tokenInfo = await ethTokenToParsedTokenAccount(
               chainId,
               tokenAccount as ethers_contracts.TokenImplementation,
               signerAddress
             );
+            return {
+              ...tokenInfo,
+              symbol: logoAndSymbol?.symbol ?? tokenInfo.symbol,
+              logo: logoAndSymbol?.logoURI ?? tokenInfo.logo
+            }
           }
         } catch (e) {
           return Promise.reject(t("Unable to retrive the specific token."));

bridge_ui/src/hooks/useGetSourceParsedTokenAccounts.tsx

@@ -22,8 +22,7 @@ import {
   WSOL_ADDRESS,
   WSOL_DECIMALS,
   hexToUint8Array,
-  getTokenPoolId,
-  tryNativeToHexString
+  getTokenPoolId
 } from "@alephium/wormhole-sdk";
 import { Dispatch } from "@reduxjs/toolkit";
 import { TOKEN_PROGRAM_ID } from "@solana/spl-token";
@@ -126,10 +125,9 @@ import {
 } from "../utils/solana";
 import { fetchSingleMetadata } from "./useAlgoMetadata";
 import { ALPH_TOKEN_ID, NodeProvider } from "@alephium/web3";
-import { getAvailableBalances, getAlephiumTokenLogoAndSymbol } from "../utils/alephium";
-import { getRegisteredTokens } from "../utils/tokens";
+import { getAvailableBalances } from "../utils/alephium";
+import { getRegisteredTokens, getTokenLogoAndSymbol } from "../utils/tokens";
 import { useWallet } from "@alephium/web3-react";
-import { getBSCTokenLogoAndSymbol, getETHTokenLogoAndSymbol } from "../utils/evm";
 import { Alert } from "@material-ui/lab";
 import parseError from "../utils/parseError";
 import i18n from "../i18n";
@@ -798,29 +796,6 @@ const getAlephiumParsedTokenAccounts = async (address: string, provider: NodePro
   }
 }
 
-async function getTokenLogoAndSymbol(tokenChainId: ChainId, tokenId: string): Promise<{ logoURI?: string, symbol?: string } | undefined> {
-  if (tokenChainId !== CHAIN_ID_ALEPHIUM) {
-    const wrappedIdOnALPH = getTokenPoolId(
-      ALEPHIUM_TOKEN_BRIDGE_CONTRACT_ID,
-      tokenChainId,
-      tryNativeToHexString(tokenId, tokenChainId),
-      ALEPHIUM_BRIDGE_GROUP_INDEX
-    )
-    const info = await getAlephiumTokenLogoAndSymbol(wrappedIdOnALPH)
-    if (info !== undefined) return info
-  }
-
-  if (tokenChainId === CHAIN_ID_ETH) {
-    return getETHTokenLogoAndSymbol(tokenId)
-  } else if (tokenChainId === CHAIN_ID_ALEPHIUM) {
-    return getAlephiumTokenLogoAndSymbol(tokenId)
-  } else if (tokenChainId === CHAIN_ID_BSC) {
-    return getBSCTokenLogoAndSymbol(tokenId)
-  } else {
-    return undefined
-  }
-}
-
 /**
  * Fetches the balance of an asset for the connected wallet
  * This should handle every type of chain in the future, but only reads the Transfer state.

bridge_ui/src/utils/tokens.ts

@@ -1,9 +1,11 @@
 import bscIcon from "../icons/bsc.svg";
 import ethIcon from "../icons/eth.svg";
 import alephiumIcon from "../icons/alephium.svg";
-import { ChainId } from "@alephium/wormhole-sdk";
-import { EXPLORER_API_SERVER_HOST } from "./consts";
+import { CHAIN_ID_ALEPHIUM, CHAIN_ID_BSC, CHAIN_ID_ETH, ChainId, getTokenPoolId, tryNativeToHexString } from "@alephium/wormhole-sdk";
+import { ALEPHIUM_BRIDGE_GROUP_INDEX, ALEPHIUM_TOKEN_BRIDGE_CONTRACT_ID, EXPLORER_API_SERVER_HOST } from "./consts";
 import i18n from "../i18n";
+import { getAlephiumTokenLogoAndSymbol } from "./alephium";
+import { getBSCTokenLogoAndSymbol, getETHTokenLogoAndSymbol } from "./evm";
 
 export type RegisteredTokenInfo = {
   tokenAddress: string
@@ -42,3 +44,26 @@ export async function getRegisteredTokens(): Promise<RegisteredTokenInfo[]> {
     return []
   }
 }
+
+export async function getTokenLogoAndSymbol(tokenChainId: ChainId, tokenId: string): Promise<{ logoURI?: string, symbol?: string } | undefined> {
+  if (tokenChainId !== CHAIN_ID_ALEPHIUM) {
+    const wrappedIdOnALPH = getTokenPoolId(
+      ALEPHIUM_TOKEN_BRIDGE_CONTRACT_ID,
+      tokenChainId,
+      tryNativeToHexString(tokenId, tokenChainId),
+      ALEPHIUM_BRIDGE_GROUP_INDEX
+    )
+    const info = await getAlephiumTokenLogoAndSymbol(wrappedIdOnALPH)
+    if (info !== undefined) return info
+  }
+
+  if (tokenChainId === CHAIN_ID_ETH) {
+    return getETHTokenLogoAndSymbol(tokenId)
+  } else if (tokenChainId === CHAIN_ID_ALEPHIUM) {
+    return getAlephiumTokenLogoAndSymbol(tokenId)
+  } else if (tokenChainId === CHAIN_ID_BSC) {
+    return getBSCTokenLogoAndSymbol(tokenId)
+  } else {
+    return undefined
+  }
+}