Merge pull request #147 from alephium/overlay-logo-and-symbol

Overlay the original token logo and symbol for bridged tokens
alephium · Nov 6, 2024 · 957412a · 957412a
2 parents f426262 + 5e4ee44
commit 957412a
Show file tree

Hide file tree

Showing 19 changed files with 171 additions and 212 deletions.
diff --git a/bridge_ui/src/components/NFTOriginVerifier.tsx b/bridge_ui/src/components/NFTOriginVerifier.tsx
@@ -50,7 +50,7 @@ import {
   getEthereumNFT,
   isNFT,
   isValidEthereumAddress,
-} from "../utils/ethereum";
+} from "../utils/evm";
 import HeaderText from "./HeaderText";
 import KeyAndBalance from "./KeyAndBalance";
 import NFTViewer from "./TokenSelectors/NFTViewer";

diff --git a/bridge_ui/src/components/Recovery.tsx b/bridge_ui/src/components/Recovery.tsx
@@ -84,7 +84,7 @@ import ChainSelect from "./ChainSelect";
 import KeyAndBalance from "./KeyAndBalance";
 import RelaySelector from "./RelaySelector";
 import { selectTransferSourceChain, selectTransferTransferTx } from "../store/selectors";
-import { getEVMCurrentBlockNumber, isEVMTxConfirmed } from "../utils/ethereum";
+import { getEVMCurrentBlockNumber, isEVMTxConfirmed } from "../utils/evm";
 import { Wallet, useWallet } from "@alephium/web3-react";
 import { useTranslation } from "react-i18next";
 import i18n from "../i18n";

diff --git a/bridge_ui/src/components/TokenSelectors/AlephiumTokenPicker.tsx b/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) {

diff --git a/bridge_ui/src/components/TokenSelectors/EvmTokenPicker.tsx b/bridge_ui/src/components/TokenSelectors/EvmTokenPicker.tsx
@@ -14,12 +14,13 @@ import {
 } from "../../utils/consts";
 import {
   ethNFTToNFTParsedTokenAccount,
-  ethTokenToParsedTokenAccount,
+  evmTokenToParsedTokenAccount,
   getEthereumNFT,
   getEthereumToken,
   isValidEthereumAddress,
-} from "../../utils/ethereum";
+} 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,10 +89,17 @@ export default function EvmTokenPicker(
               signerAddress
             );
           } else {
-            return ethTokenToParsedTokenAccount(
+            const logoAndSymbol = await getTokenLogoAndSymbol(chainId, tokenAccount.address)
+            const tokenInfo = await evmTokenToParsedTokenAccount(
+              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."));
@@ -100,7 +108,7 @@ export default function EvmTokenPicker(
         return Promise.reject({ error: t("Wallet is not connected.") });
       }
     },
-    [isReady, nft, provider, signerAddress, t]
+    [isReady, nft, provider, signerAddress, t, chainId]
   );
 
   const onChangeWrapper = useCallback(

diff --git a/bridge_ui/src/components/TokenSelectors/TokenPicker.tsx b/bridge_ui/src/components/TokenSelectors/TokenPicker.tsx
@@ -6,7 +6,6 @@ import {
   Dialog,
   DialogContent,
   DialogTitle,
-  Divider,
   IconButton,
   List,
   ListItem,
@@ -15,21 +14,14 @@ import {
   Tooltip,
   Typography,
 } from "@material-ui/core";
-import { InfoOutlined, Launch } from "@material-ui/icons";
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import RefreshIcon from "@material-ui/icons/Refresh";
 import { Alert } from "@material-ui/lab";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useSelector } from "react-redux";
-import useMarketsMap from "../../hooks/useMarketsMap";
 import { NFTParsedTokenAccount } from "../../store/nftSlice";
-import { selectTransferTargetChain } from "../../store/selectors";
 import { balancePretty } from "../../utils/balancePretty";
-import {
-  CHAINS_BY_ID,
-  getIsTokenTransferDisabled,
-} from "../../utils/consts";
+import { getIsTokenTransferDisabled } from "../../utils/consts";
 import { shortenAddress } from "../../utils/solana";
 import NFTViewer from "./NFTViewer";
 
@@ -119,18 +111,13 @@ const useStyles = makeStyles((theme) =>
   })
 );
 
-const noClickThrough = (e: any) => {
-  e.stopPropagation();
-};
-
 export const BasicAccountRender = (
   account: MarketParsedTokenAccount,
   isMigrationEligible: (address: string) => boolean,
   nft: boolean,
   displayBalance?: (account: NFTParsedTokenAccount) => boolean
 ) => {
   const { t } = useTranslation();
-  const { data: marketsData } = useMarketsMap(false);
   const classes = useStyles();
   const mintPrettyString = shortenAddress(account.mintKey);
   const uri = nft ? account.image_256 : account.logo || account.uri;
@@ -157,27 +144,6 @@ export const BasicAccountRender = (
 
   const tokenContent = (
     <div className={classes.tokenOverviewContainer}>
-      {account.markets ? (
-        <div className={classes.tokenMarketsList}>
-          {account.markets.map((market) =>
-            marketsData?.markets?.[market] ? (
-              <Button
-                key={market}
-                size="small"
-                variant="outlined"
-                color="secondary"
-                startIcon={<Launch />}
-                href={marketsData.markets[market].link}
-                target="_blank"
-                rel="noopener noreferrer"
-                onClick={noClickThrough}
-              >
-                {marketsData.markets[market].name}
-              </Button>
-            ) : null
-          )}
-        </div>
-      ) : null}
       <div className={classes.tokenImageContainer}>
         {uri && <img alt="" className={classes.tokenImage} src={uri} />}
       </div>
@@ -273,9 +239,6 @@ export default function TokenPicker({
   const [dialogIsOpen, setDialogIsOpen] = useState(false);
   const [selectionError, setSelectionError] = useState("");
 
-  const targetChain = useSelector(selectTransferTargetChain);
-  const { data: marketsData } = useMarketsMap(true);
-
   const openDialog = useCallback(() => {
     setHolderString("");
     setSelectionError("");
@@ -346,61 +309,11 @@ export default function TokenPicker({
     [holderString]
   );
 
-  const marketChainTokens = marketsData?.tokens?.[chainId];
-  const featuredMarkets = marketsData?.tokenMarkets?.[chainId]?.[targetChain];
-
-  const featuredOptions = useMemo(() => {
-    // only tokens have featured markets
-    if (!nft && featuredMarkets) {
-      const ownedMarketTokens = options
-        .filter(
-          (option: NFTParsedTokenAccount) => featuredMarkets?.[option.mintKey]
-        )
-        .map(
-          (option) => {
-            const fromMarkets = marketsData?.tokens?.[chainId]?.[option.mintKey]
-            return ({
-              ...option,
-              symbol: fromMarkets?.symbol,
-              logo: fromMarkets?.logo,
-              markets: featuredMarkets[option.mintKey].markets,
-            } as MarketParsedTokenAccount)
-          }
-        );
-      return [
-        ...ownedMarketTokens,
-        ...Object.keys(featuredMarkets)
-          .filter(
-            (mintKey) =>
-              !ownedMarketTokens.find((option) => option.mintKey === mintKey)
-          )
-          .map(
-            (mintKey) =>
-              ({
-                amount: "0",
-                decimals: 0,
-                markets: featuredMarkets[mintKey].markets,
-                mintKey,
-                publicKey: "",
-                uiAmount: 0,
-                uiAmountString: "0", // if we can't look up by address, we can select the market that isn't in the list of holdings, but can't proceed since the balance will be 0
-                symbol: marketChainTokens?.[mintKey]?.symbol,
-                logo: marketChainTokens?.[mintKey]?.logo,
-              } as MarketParsedTokenAccount)
-          ),
-      ].filter(searchFilter);
-    }
-    return [];
-  }, [chainId, nft, marketsData, marketChainTokens, featuredMarkets, options, searchFilter]);
-
   const nonFeaturedOptions = useMemo(() => {
     return options.filter(
-      (option: NFTParsedTokenAccount) =>
-        searchFilter(option) &&
-        // only tokens have featured markets
-        (nft || !featuredMarkets?.[option.mintKey])
+      (option: NFTParsedTokenAccount) => searchFilter(option)
     );
-  }, [nft, options, featuredMarkets, searchFilter]);
+  }, [options, searchFilter]);
 
   const localFind = useCallback(
     (address: string, tokenIdHolderString: string) => {
@@ -530,52 +443,6 @@ export default function TokenPicker({
           displayLocalError
         ) : (
           <List component="div" className={classes.tokenList}>
-            {featuredOptions.length ? (
-              <>
-                <Typography variant="subtitle2" gutterBottom>
-                  Featured {CHAINS_BY_ID[chainId].name} &gt;{" "}
-                  {CHAINS_BY_ID[targetChain].name} markets{" "}
-                  <Tooltip
-                    title={
-                      t('Markets for these {{ chainName }} tokens exist for the corresponding tokens on {{ targetChainName }}', { chainName: CHAINS_BY_ID[chainId].name, targetChainName: CHAINS_BY_ID[targetChain].name })
-                    }
-                  >
-                    <InfoOutlined
-                      fontSize="small"
-                      style={{ verticalAlign: "text-bottom" }}
-                    />
-                  </Tooltip>
-                </Typography>
-                {featuredOptions.map((option) => {
-                  return (
-                    <ListItem
-                      component="div"
-                      button
-                      onClick={() => handleSelectOption(option)}
-                      key={
-                        option.publicKey +
-                        option.mintKey +
-                        (option.tokenId || "")
-                      }
-                      disabled={getIsTokenTransferDisabled(
-                        chainId,
-                        option.mintKey
-                      )}
-                    >
-                      <RenderOption account={option} />
-                    </ListItem>
-                  );
-                })}
-                {nonFeaturedOptions.length ? (
-                  <>
-                    <Divider style={{ marginTop: 8, marginBottom: 16 }} />
-                    <Typography variant="subtitle2" gutterBottom>
-                      {t("Other Assets")}
-                    </Typography>
-                  </>
-                ) : null}
-              </>
-            ) : null}
             {nonFeaturedOptions.map((option) => {
               return (
                 <ListItem
@@ -591,7 +458,7 @@ export default function TokenPicker({
                 </ListItem>
               );
             })}
-            {featuredOptions.length || nonFeaturedOptions.length ? null : (
+            {nonFeaturedOptions.length ? null : (
               <div className={classes.alignCenter}>
                 <Typography>{t("No results found")}</Typography>
               </div>

diff --git a/bridge_ui/src/components/TransactionProgress.tsx b/bridge_ui/src/components/TransactionProgress.tsx
@@ -20,7 +20,7 @@ import { useEthereumProvider } from "../contexts/EthereumProviderContext";
 import { Transaction } from "../store/transferSlice";
 import { ALEPHIUM_MINIMAL_CONSISTENCY_LEVEL, CLUSTER, CHAINS_BY_ID, SOLANA_HOST } from "../utils/consts";
 import SmartBlock from "./SmartBlock";
-import { DefaultEVMChainConfirmations, EpochDuration, getEVMCurrentBlockNumber, getEvmJsonRpcProvider } from "../utils/ethereum";
+import { DefaultEVMChainConfirmations, EpochDuration, getEVMCurrentBlockNumber, getEvmJsonRpcProvider } from "../utils/evm";
 import { useWallet } from "@alephium/web3-react";
 import { AlephiumBlockTime } from "../utils/alephium";
 import { ethers } from "ethers";

diff --git a/bridge_ui/src/components/Transactions/index.tsx b/bridge_ui/src/components/Transactions/index.tsx
@@ -24,7 +24,7 @@ import { ethers } from "ethers";
 import useSWR from "swr";
 import { useSnackbar } from "notistack";
 import { PageSwitch, DefaultPageSize } from "./PageSwitch";
-import { getEVMCurrentBlockNumber, getEvmJsonRpcProvider, getIsTxsCompletedEvm, isEVMTxConfirmed } from "../../utils/ethereum";
+import { getEVMCurrentBlockNumber, getEvmJsonRpcProvider, getIsTxsCompletedEvm, isEVMTxConfirmed } from "../../utils/evm";
 import { TransactionTable } from "./TransactionTable";
 import useIsWalletReady from "../../hooks/useIsWalletReady";
 import { useSelector } from "react-redux";

diff --git a/bridge_ui/src/components/Transfer/AddToMetamask.tsx b/bridge_ui/src/components/Transfer/AddToMetamask.tsx
@@ -12,9 +12,9 @@ import {
 } from "../../store/selectors";
 import { getEvmChainId } from "../../utils/consts";
 import {
-  ethTokenToParsedTokenAccount,
+  evmTokenToParsedTokenAccount,
   getEthereumToken,
-} from "../../utils/ethereum";
+} from "../../utils/evm";
 
 const useStyles = makeStyles((theme) => ({
   addButton: {
@@ -42,7 +42,8 @@ export default function AddToMetamask() {
       (async () => {
         try {
           const token = await getEthereumToken(targetAsset, provider);
-          const { symbol, decimals } = await ethTokenToParsedTokenAccount(
+          const { symbol, decimals } = await evmTokenToParsedTokenAccount(
+            targetChain,
             token,
             signerAddress
           );
@@ -74,6 +75,7 @@ export default function AddToMetamask() {
     signerAddress,
     hasCorrectEvmNetwork,
     sourceParsedTokenAccount,
+    targetChain
   ]);
   return provider &&
     signerAddress &&

diff --git a/bridge_ui/src/components/Transfer/RedeemPreview.tsx b/bridge_ui/src/components/Transfer/RedeemPreview.tsx
@@ -12,7 +12,6 @@ import ButtonWithLoader from "../ButtonWithLoader";
 import ShowTx from "../ShowTx";
 import AddToAlephium from "./AddToAlephium";
 import AddToMetamask from "./AddToMetamask";
-import FeaturedMarkets from "./FeaturedMarkets";
 import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles((theme) => ({
@@ -52,7 +51,6 @@ export default function RedeemPreview({
       {redeemTx ? <ShowTx chainId={targetChain} tx={redeemTx} /> : null}
       {targetChain === CHAIN_ID_ALEPHIUM ? <AddToAlephium /> : null}
       {isEVMChain(targetChain) ? <AddToMetamask /> : null}
-      <FeaturedMarkets />
       <ButtonWithLoader onClick={handleResetClick}>
         {t("Transfer More Tokens!")}
       </ButtonWithLoader>

diff --git a/bridge_ui/src/hooks/useAllowance.ts b/bridge_ui/src/hooks/useAllowance.ts
@@ -11,7 +11,7 @@ import { useEthereumProvider } from "../contexts/EthereumProviderContext";
 import { selectTransferIsApproving } from "../store/selectors";
 import { setIsApproving, setIsWalletApproved } from "../store/transferSlice";
 import { getTokenBridgeAddressForChain } from "../utils/consts";
-import { approveEthWithoutWait } from "../utils/ethereum";
+import { approveEthWithoutWait } from "../utils/evm";
 
 export default function useAllowance(
   chainId: ChainId,

diff --git a/bridge_ui/src/hooks/useCheckIfWormholeWrapped.ts b/bridge_ui/src/hooks/useCheckIfWormholeWrapped.ts
@@ -49,7 +49,7 @@ import { Algodv2 } from "algosdk";
 import { errorDataWrapper, fetchDataWrapper, receiveDataWrapper } from "../store/helpers";
 import { useWallet } from "@alephium/web3-react";
 import { useTranslation } from "react-i18next";
-import { getEvmJsonRpcProvider } from "../utils/ethereum";
+import { getEvmJsonRpcProvider } from "../utils/evm";
 
 export interface StateSafeWormholeWrappedInfo {
   isWrapped: boolean;