feat: add import token btn in deposited screen

apps/bridge/src/components/bridge/dialogue/Deposited.tsx

@@ -5,21 +5,31 @@ import { Typography } from "@mantle/ui";
 import { useNetwork, useQuery } from "wagmi";
 
 import StateContext from "@providers/stateContext";
-import { CTAPages, L1_CHAIN_ID, L2_CHAIN_ID } from "@config/constants";
+import {
+  CHAINS,
+  CTAPages,
+  Direction,
+  L1_CHAIN_ID,
+  L2_CHAIN_ID,
+} from "@config/constants";
 import TxLink from "@components/bridge/utils/TxLink";
 import AddNetworkBtn from "@components/bridge/dialogue/AddNetworkBtn";
 import { gql, useApolloClient } from "@apollo/client";
 import { useToast } from "@hooks/useToast";
 import { useSwitchToNetwork } from "@hooks/web3/write/useSwitchToNetwork";
+import ImportTokenBtn from "./ImportTokenBtn";
 
 export default function Deposited({
   tx1Hash,
   tx2Hash,
+  direction,
 }: {
   tx1Hash: string | boolean;
   tx2Hash: string | boolean;
+  direction: Direction;
 }) {
-  const { ctaChainId, setCTAPage, client } = useContext(StateContext);
+  const { ctaChainId, setCTAPage, client, destinationToken } =
+    useContext(StateContext);
   const { createToast } = useToast();
   const { addNetwork } = useSwitchToNetwork();
   const { chain: givenChain } = useNetwork();
@@ -164,7 +174,17 @@ export default function Deposited({
         />
       </div>
       <div>
+        {destinationToken[direction] !==
+          CHAINS[L2_CHAIN_ID]?.nativeCurrency?.name && (
+          <Typography variant="smallWidget16" className="text-center">
+            Not seeing your deposited balance in your wallet?
+          </Typography>
+        )}
         <AddNetworkBtn />
+        {destinationToken[direction] !==
+          CHAINS[L2_CHAIN_ID]?.nativeCurrency?.name && (
+          <ImportTokenBtn direction={direction} />
+        )}
       </div>
     </>
   );

apps/bridge/src/components/bridge/dialogue/ImportTokenBtn.tsx

@@ -0,0 +1,40 @@
+import Image from "next/image";
+import { useContext, useMemo } from "react";
+
+import { Button } from "@mantle/ui";
+
+import StateContext from "@providers/stateContext";
+import { Direction } from "@config/constants";
+import { useAddToken } from "@hooks/web3/write/useAddToken";
+
+import MetamaskSvg from "public/deposited/metamask.svg";
+
+export default function ImportTokenBtn({
+  direction,
+}: {
+  direction: Direction;
+}) {
+  const { addToken } = useAddToken();
+
+  const { destinationToken, tokenList } = useContext(StateContext);
+
+  // fetch the full destination token from name
+  const destination = useMemo(
+    () => tokenList?.tokens.find((v) => destinationToken[direction] === v.name),
+    [destinationToken, tokenList]
+  );
+
+  if (!destination) return null;
+
+  return (
+    <Button
+      type="button"
+      size="full"
+      className="h-14 flex flex-row gap-4 text-center items-center justify-center my-4"
+      onClick={() => addToken(destination)}
+    >
+      <Image src={MetamaskSvg} alt="metamask" height={26} width={26} />
+      {`Import ${destination.symbol} on Mantle Network`}
+    </Button>
+  );
+}

apps/bridge/src/components/bridge/dialogue/index.tsx

@@ -89,7 +89,11 @@ export default function Dialogue({
             />
           )}
           {ctaPage === CTAPages.Deposit && (
-            <Deposited tx1Hash={tx1Hash} tx2Hash={tx2Hash} />
+            <Deposited
+              tx1Hash={tx1Hash}
+              tx2Hash={tx2Hash}
+              direction={direction}
+            />
           )}
           {ctaPage === CTAPages.Deposited && (
             <WhatsNext closeModal={closeModalAndReset} />

apps/bridge/src/hooks/web3/write/useAddToken.ts

@@ -0,0 +1,36 @@
+"use client";
+
+import { ABSOLUTE_PATH, Token } from "@config/constants";
+
+declare global {
+  interface Window {
+    ethereum: import("ethers").providers.ExternalProvider;
+  }
+}
+
+export function useAddToken() {
+  // trigger change of network
+  const addToken = async (token: Token) => {
+    if (!window.ethereum) throw new Error("No crypto wallet found");
+    // wasAdded is a boolean. Like any RPC method, an error may be thrown.
+    return window.ethereum?.request?.({
+      method: "wallet_watchAsset",
+      params: {
+        type: "ERC20", // Initially only supports ERC20, but eventually more!
+        options: {
+          address: token.address, // The address that the token is at.
+          symbol: token.symbol, // A ticker symbol or shorthand, up to 5 chars.
+          decimals: token.decimals, // The number of decimals in the token
+          image:
+            token.logoURI.indexOf("http") === 0
+              ? token.logoURI
+              : ABSOLUTE_PATH + token.logoURI, // A string url of the token logo
+        },
+      } as any,
+    });
+  };
+
+  return {
+    addToken,
+  };
+}