Show tokens list with custom token created on common

hicommonwealth · Dec 9, 2024 · 64e9b2b · 64e9b2b
1 parent 453d201
commit 64e9b2b
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 33 deletions.
diff --git a/...ealth/client/scripts/views/modals/TradeTokenModel/UniswapTradeModal/UniswapTradeModal.tsx b/...ealth/client/scripts/views/modals/TradeTokenModel/UniswapTradeModal/UniswapTradeModal.tsx
@@ -2,6 +2,7 @@ import { SwapWidget } from '@uniswap/widgets';
 import '@uniswap/widgets/fonts.css';
 import React from 'react';
 import { CWText } from 'views/components/component_kit/cw_text';
+import CWCircleMultiplySpinner from 'views/components/component_kit/new_designs/CWCircleMultiplySpinner';
 import {
   CWModal,
   CWModalBody,
@@ -41,18 +42,26 @@ const UniswapTradeModal = ({
           />
           <CWModalBody>
             <div className="Uniswap">
-              <SwapWidget
-                className="uniswap-widget-wrapper"
-                tokenList={uniswapWidget.tokenListURLs.default}
-                routerUrl={uniswapWidget.routerURLs.default}
-                theme={uniswapWidget.theme}
-                defaultInputTokenAddress="NATIVE"
-                defaultOutputTokenAddress={tradeConfig.token.token_address}
-                hideConnectionUI={true}
-                {...(uniswapWidget.provider && {
-                  provider: uniswapWidget.provider,
-                })}
-              />
+              {!uniswapWidget.isReady ? (
+                <CWCircleMultiplySpinner />
+              ) : (
+                <SwapWidget
+                  className="uniswap-widget-wrapper"
+                  tokenList={uniswapWidget.tokensList}
+                  routerUrl={uniswapWidget.routerURLs.default}
+                  theme={uniswapWidget.theme}
+                  defaultInputTokenAddress={
+                    uniswapWidget.defaultTokenAddress.input
+                  }
+                  defaultOutputTokenAddress={
+                    uniswapWidget.defaultTokenAddress.output
+                  }
+                  hideConnectionUI={true}
+                  {...(uniswapWidget.provider && {
+                    provider: uniswapWidget.provider,
+                  })}
+                />
+              )}
             </div>
           </CWModalBody>
           <CWModalFooter>

diff --git a/packages/commonwealth/client/scripts/views/modals/TradeTokenModel/UniswapTradeModal/types.ts b/packages/commonwealth/client/scripts/views/modals/TradeTokenModel/UniswapTradeModal/types.ts
@@ -3,3 +3,12 @@ import { TradingConfig } from '../types';
 export type UseUniswapTradeModalProps = {
   tradeConfig: TradingConfig;
 };
+
+export type UniswapToken = {
+  name: string;
+  address: string;
+  symbol: string;
+  decimals: number;
+  chainId: number;
+  logoURI: string;
+};
diff --git a/...lth/client/scripts/views/modals/TradeTokenModel/UniswapTradeModal/useUniswapTradeModal.ts b/...lth/client/scripts/views/modals/TradeTokenModel/UniswapTradeModal/useUniswapTradeModal.ts
@@ -7,7 +7,7 @@ import useRunOnceOnCondition from 'hooks/useRunOnceOnCondition';
 import NodeInfo from 'models/NodeInfo';
 import { useState } from 'react';
 import { fetchCachedNodes } from 'state/api/nodes';
-import { UseUniswapTradeModalProps } from './types';
+import { UniswapToken, UseUniswapTradeModalProps } from './types';
 
 // Maintainance Notes:
 // - Anywhere a `UNISWAP_WIDGET_HACK` label is applied, its a workaround to get the uniswap widget
@@ -22,13 +22,53 @@ tempWindow.Browser = {
   T: () => {},
 };
 
-const uniswapTokenListURLs = {
-  // UNISWAP_WIDGET_HACK: By default the widget uses https://gateway.ipfs.io/ipns/tokens.uniswap.org for tokens
-  // list, but it doesn't work (DNS_PROBE_FINISHED_NXDOMAIN) for me (@malik). The original
-  // url resolved to https://ipfs.io/ipns/tokens.uniswap.org, i am passing this as a param to
-  // the uniswap widget. See: https://github.com/Uniswap/widgets/issues/580#issuecomment-2086094025
-  // for more context.
-  default: 'https://ipfs.io/ipns/tokens.uniswap.org',
+const uniswapTokenListConfig = {
+  default: {
+    // UNISWAP_WIDGET_HACK: By default the widget uses https://gateway.ipfs.io/ipns/tokens.uniswap.org for tokens
+    // list, but it doesn't work (DNS_PROBE_FINISHED_NXDOMAIN) for me (@malik). The original
+    // url resolved to https://ipfs.io/ipns/tokens.uniswap.org, i am passing this as a param to
+    // the uniswap widget. See: https://github.com/Uniswap/widgets/issues/580#issuecomment-2086094025
+    // for more context.
+    chains: { 1: { url: 'https://ipfs.io/ipns/tokens.uniswap.org' } },
+  },
+  custom: {
+    chains: {
+      8453: {
+        list: [
+          {
+            name: 'Tether USD',
+            address: '0xfde4C96c8593536E31F229EA8f37b2ADa2699bb2',
+            symbol: 'USDT',
+            decimals: 6,
+            chainId: 8453,
+            logoURI:
+              // eslint-disable-next-line max-len
+              'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xdAC17F958D2ee523a2206206994597C13D831ec7/logo.png',
+          },
+          {
+            name: 'USD Coin',
+            address: '0xec267c53f53807c2337c257f8ac3fc3cc07cc0ed',
+            symbol: 'USDC',
+            decimals: 6,
+            chainId: 8453,
+            logoURI:
+              // eslint-disable-next-line max-len
+              'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png',
+          },
+          {
+            name: 'Wrapped Ether',
+            address: '0x4200000000000000000000000000000000000006',
+            symbol: 'WETH',
+            decimals: 18,
+            chainId: 8453,
+            logoURI:
+              // eslint-disable-next-line max-len
+              'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0x4200000000000000000000000000000000000006/logo.png',
+          },
+        ],
+      },
+    },
+  },
 };
 
 const uniswapRouterURLs = {
@@ -51,8 +91,10 @@ const uniswapWidgetTheme: Theme = {
 };
 
 const useUniswapTradeModal = ({ tradeConfig }: UseUniswapTradeModalProps) => {
+  const [isLoadingInitialState, setIsLoadingInitialState] = useState(true);
   const [uniswapProvider, setUniswapProvider] =
     useState<ethers.providers.Web3Provider>();
+  const [uniswapTokensList, setUniswapTokensList] = useState<UniswapToken[]>();
 
   // base chain node info
   const nodes = fetchCachedNodes();
@@ -63,33 +105,58 @@ const useUniswapTradeModal = ({ tradeConfig }: UseUniswapTradeModalProps) => {
   useRunOnceOnCondition({
     callback: () => {
       const handleAsync = async () => {
+        setIsLoadingInitialState(true);
+
         // adding this to avoid ts issues
         if (!baseNode?.ethChainId) return;
 
-        const wallet = WebWalletController.Instance.availableWallets(
-          ChainBase.Ethereum,
-        );
-        const selectedWallet = wallet[0];
-        await selectedWallet.enable(`${baseNode.ethChainId}`);
-        const tempProvider = new ethers.providers.Web3Provider(
-          selectedWallet.api.givenProvider,
-        );
-        setUniswapProvider(tempProvider);
+        // set tokens list with add our custom token
+        setUniswapTokensList([
+          ...(uniswapTokenListConfig.custom.chains?.[baseNode.ethChainId]
+            ?.list || []),
+          {
+            name: tradeConfig.token.name,
+            address: tradeConfig.token.token_address,
+            symbol: tradeConfig.token.symbol,
+            decimals: 18,
+            chainId: baseNode.ethChainId,
+            logoURI: tradeConfig.token.icon_url || '',
+          },
+        ]);
+
+        // switch chain network on wallet
+        {
+          const wallet = WebWalletController.Instance.availableWallets(
+            ChainBase.Ethereum,
+          );
+          const selectedWallet = wallet[0];
+          await selectedWallet.enable(`${baseNode.ethChainId}`);
+          const tempProvider = new ethers.providers.Web3Provider(
+            selectedWallet.api.givenProvider,
+          );
+          setUniswapProvider(tempProvider);
+        }
       };
-      handleAsync().catch(console.error);
+      handleAsync()
+        .catch(console.error)
+        .finally(() => setIsLoadingInitialState(false));
     },
     shouldRun: !!baseNode.ethChainId,
   });
 
   return {
     uniswapWidget: {
+      isReady: !isLoadingInitialState,
       provider: uniswapProvider,
       theme: uniswapWidgetTheme,
-      tokenListURLs: uniswapTokenListURLs,
+      tokensList: uniswapTokensList,
+      defaultChainId: baseNode.ethChainId || 0,
+      defaultTokenAddress: {
+        input: 'NATIVE', // special address for native token of default chain
+        output: tradeConfig.token.token_address,
+      },
       routerURLs: uniswapRouterURLs,
     },
-    // TODO: only export what's needed
-    tradeConfig,
   };
 };