chore(tangle-dapp): Add token to wallet post bridge transaction

apps/tangle-dapp/src/components/Lists/AssetList.tsx

@@ -77,14 +77,15 @@ export const AssetList = ({
               className="cursor-pointer w-full flex items-center gap-4 justify-between max-w-full min-h-[60px] py-[12px] px-6"
             >
               <div className="flex items-center gap-2">
-                <TokenIcon
+                {/* TODO: Fix Token SVGs causing heavy lag when modal is opened */}
+                {/* <TokenIcon
                   size="xl"
                   name={
                     asset.symbol === 'SolvBTC.BBN' ? 'SolvBTC' : asset.symbol
                   }
                   className="mr-2"
                   spinnerSize="lg"
-                />
+                /> */}
 
                 <div className="flex flex-col gap-1">
                   <Typography

apps/tangle-dapp/src/components/bridge/BridgeConfirmationModal.tsx

@@ -26,6 +26,7 @@ import {
 } from '@webb-tools/webb-ui-components/utils';
 import cx from 'classnames';
 import { FC, useCallback, useMemo, useState } from 'react';
+import useWalletClient from '../../data/bridge/useWalletClient';
 
 import { makeExplorerUrl } from '@webb-tools/api-provider-environment/transaction/utils';
 import { FeeDetail, FeeDetailProps } from './FeeDetail';
@@ -46,6 +47,7 @@ import { EVMChainId } from '@webb-tools/dapp-types/ChainId';
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/solid';
 import { ArrowDownIcon } from '@webb-tools/icons';
 import axios from 'axios';
+import useIsBridgeNativeToken from '../../hooks/useIsBridgeNativeToken';
 
 interface BridgeConfirmationModalProps {
   isOpen: boolean;
@@ -125,6 +127,11 @@ export const BridgeConfirmationModal = ({
     recipientAddress: destinationAddress,
   });
 
+  const isNativeToken = useIsBridgeNativeToken(
+    calculateTypedChainId(sourceChain.chainType, sourceChain.id),
+    token,
+  );
+
   const { notificationApi } = useWebbUI();
 
   const srcChainPublicClient = createPublicClient({
@@ -361,6 +368,8 @@ export const BridgeConfirmationModal = ({
     [srcChainPublicClient, updateTxState, token.bridgeType],
   );
 
+  const walletClient = useWalletClient();
+
   const handleConfirm = useCallback(async () => {
     setIsTxInProgress(true);
 
@@ -460,8 +469,32 @@ export const BridgeConfirmationModal = ({
       }
 
       setIsTxInProgress(false);
+
       handleClose();
       clearBridgeStore();
+
+      if (!isNativeToken && walletClient) {
+        const success = await walletClient.watchAsset({
+          type: 'ERC20',
+          options: {
+            address: token.address,
+            decimals: token.decimals,
+            symbol: token.tokenSymbol,
+          },
+        });
+
+        if (success) {
+          notificationApi({
+            message: `${token.tokenSymbol} was successfully added to your wallet`,
+            variant: 'success',
+          });
+        } else {
+          notificationApi({
+            message: `Failed to add ${token.tokenSymbol} to your wallet`,
+            variant: 'error',
+          });
+        }
+      }
     } catch (possibleError) {
       const error = ensureError(possibleError);
 
@@ -474,12 +507,18 @@ export const BridgeConfirmationModal = ({
       clearBridgeStore();
     }
   }, [
+    setIsTxInProgress,
     sendingAmount,
     receivingAmount,
     token.bridgeType,
     token.tokenType,
+    token.address,
+    token.decimals,
+    token.tokenSymbol,
     handleClose,
     clearBridgeStore,
+    isNativeToken,
+    walletClient,
     transferByRouterAsync,
     addTxToQueue,
     sourceChain.tag,
@@ -491,8 +530,8 @@ export const BridgeConfirmationModal = ({
     destinationAddress,
     setIsOpenQueueDropdown,
     updateTxState,
-    watchTransaction,
     addTxExplorerUrl,
+    watchTransaction,
     transferByHyperlaneAsync,
     notificationApi,
   ]);

apps/tangle-dapp/src/containers/bridge/BridgeContainer.tsx

@@ -52,6 +52,7 @@ import { WalletFillIcon } from '@webb-tools/icons';
 import { useBalance } from 'wagmi';
 import convertDecimalToBn from '@webb-tools/tangle-shared-ui/utils/convertDecimalToBn';
 import { useBridgeEvmBalances } from '../../data/bridge/useBridgeEvmBalances';
+import useIsBridgeNativeToken from '../../hooks/useIsBridgeNativeToken';
 
 interface BridgeContainerProps {
   className?: string;
@@ -175,6 +176,14 @@ export default function BridgeContainer({ className }: BridgeContainerProps) {
     close: closeConfirmBridgeModal,
   } = useModal(false);
 
+  const isNativeToken = useIsBridgeNativeToken(
+    calculateTypedChainId(
+      selectedSourceChain.chainType,
+      selectedSourceChain.id,
+    ),
+    selectedToken,
+  );
+
   const [addressInputErrorMessage, setAddressInputErrorMessage] = useState<
     string | null
   >(null);
@@ -398,18 +407,6 @@ export default function BridgeContainer({ className }: BridgeContainerProps) {
 
   const assets: AssetConfig[] = useMemo(() => {
     const tokenConfigs = tokens.map((token) => {
-      const isNativeToken =
-        (sourceTypedChainId === PresetTypedChainId.TangleMainnetEVM &&
-          token.tokenType === EVMTokenEnum.TNT) ||
-        (sourceTypedChainId === PresetTypedChainId.Polygon &&
-          token.tokenSymbol === 'POL') ||
-        ((sourceTypedChainId === PresetTypedChainId.Optimism ||
-          sourceTypedChainId === PresetTypedChainId.Arbitrum ||
-          sourceTypedChainId === PresetTypedChainId.Base) &&
-          token.tokenSymbol === 'ETH') ||
-        (sourceTypedChainId === PresetTypedChainId.BSC &&
-          token.tokenSymbol === 'BNB');
-
       const balance = isNativeToken
         ? formatEther(nativeTokenBalance?.value ?? BigInt(0))
         : sourceTypedChainId === PresetTypedChainId.TangleMainnetEVM ||
@@ -463,8 +460,9 @@ export default function BridgeContainer({ className }: BridgeContainerProps) {
     return tokenConfigs;
   }, [
     tokens,
-    sourceTypedChainId,
+    isNativeToken,
     nativeTokenBalance?.value,
+    sourceTypedChainId,
     balances,
     selectedSourceChain.blockExplorers?.default,
     activeAccount,

apps/tangle-dapp/src/data/bridge/useWalletClient.ts

@@ -0,0 +1,20 @@
+import { useWebContext } from '@webb-tools/api-provider-environment';
+import { WebbWeb3Provider } from '@webb-tools/web3-api-provider';
+import { useMemo } from 'react';
+
+const useWalletClient = () => {
+  const { activeApi } = useWebContext();
+
+  const walletClient = useMemo(() => {
+    if (!activeApi || !(activeApi instanceof WebbWeb3Provider)) {
+      return null;
+    }
+
+    const walletClient = activeApi.walletClient;
+    return walletClient;
+  }, [activeApi]);
+
+  return walletClient;
+};
+
+export default useWalletClient;

apps/tangle-dapp/src/hooks/useIsBridgeNativeToken.ts

@@ -0,0 +1,24 @@
+import { PresetTypedChainId } from '@webb-tools/dapp-types';
+import { EVMTokenEnum } from '@webb-tools/evm-contract-metadata';
+import { BridgeToken } from '@webb-tools/tangle-shared-ui/types';
+
+const useIsBridgeNativeToken = (
+  sourceTypedChainId: PresetTypedChainId,
+  token: BridgeToken,
+) => {
+  const isNativeToken =
+    (sourceTypedChainId === PresetTypedChainId.TangleMainnetEVM &&
+      token.tokenType === EVMTokenEnum.TNT) ||
+    (sourceTypedChainId === PresetTypedChainId.Polygon &&
+      token.tokenSymbol === 'POL') ||
+    ((sourceTypedChainId === PresetTypedChainId.Optimism ||
+      sourceTypedChainId === PresetTypedChainId.Arbitrum ||
+      sourceTypedChainId === PresetTypedChainId.Base) &&
+      token.tokenSymbol === 'ETH') ||
+    (sourceTypedChainId === PresetTypedChainId.BSC &&
+      token.tokenSymbol === 'BNB');
+
+  return isNativeToken;
+};
+
+export default useIsBridgeNativeToken;