feat: add token to metamask button

src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx

@@ -1,8 +1,10 @@
 import { Button, HStack, Image, Link, Text } from "@chakra-ui/react";
 import { TutorialVideo } from "@components/tutorial-video/tutorial-video";
+import { BlockchainContext } from "../../../../providers/blockchain-context-provider";
 
 import { WalkthroughHeader } from "./components/walkthrough-header";
 import { WalkthroughLayout } from "./components/walkthrough.layout";
+import { useContext } from "react";
 
 interface WalkthroughProps {
   flow: "mint" | "unmint";
@@ -13,6 +15,9 @@ export function Walkthrough({
   flow,
   currentStep,
 }: WalkthroughProps): React.JSX.Element {
+  const blockchainContext = useContext(BlockchainContext);
+  const ethereum = blockchainContext?.ethereum;
+
   switch (flow) {
     case "mint":
       switch (currentStep) {
@@ -93,7 +98,10 @@ export function Walkthrough({
                 simply <span style={{ fontWeight: 800 }}>add them </span>
                 to your Ethereum Wallet.
               </Text>
-              <Button variant={"vault"}>
+              <Button
+                variant={"vault"}
+                onClick={() => ethereum?.recommendDlcBtcTokenToMetamask()}
+              >
                 <HStack>
                   <Image
                     src={"/images/logos/dlc-btc-logo.svg"}
@@ -113,16 +121,6 @@ export function Walkthrough({
                 title={"Minted dlcBTC"}
                 blockchain={"ethereum"}
               />
-              <Button variant={"vault"}>
-                <HStack>
-                  <Image
-                    src={"/images/logos/dlc-btc-logo.svg"}
-                    alt={"dlcBTC"}
-                    boxSize={"25px"}
-                  />
-                  <Text> Add Token to Wallet</Text>
-                </HStack>
-              </Button>
             </WalkthroughLayout>
           );
       }

src/app/hooks/use-ethereum.ts

@@ -26,6 +26,7 @@
   getVault: (vaultUUID: string) => Promise<void>;
   setupVault: (btcDepositAmount: number) => Promise<void>;
   closeVault: (vaultUUID: string) => Promise<void>;
+  recommendDlcBtcTokenToMetamask: () => Promise<boolean>;
 }
 
 export function useEthereum(): UseEthereumReturn {
@@ -53,9 +54,9 @@
     if (!address || !network) return;
 
     if (!protocolContract || !dlcManagerContract || !dlcBTCContract) {
       setupEthereumConfiguration(network);
     }
   }, [address, network]);
 
   useEffect(() => {
     if (!address || !protocolContract || !dlcManagerContract || !dlcBTCContract)
@@ -66,11 +67,11 @@
         await getDLCBTCBalance();
         await getLockedBTCBalance();
       } catch (error) {
         console.error(error);
       }
     };
 
     fetchBalance();
   }, [address, fundedVaults]);
 
   function formatVault(vault: any): Vault {
@@ -294,6 +295,30 @@
     }
   }
 
+  async function recommendDlcBtcTokenToMetamask(): Promise<boolean> {
+    try {
+      const { ethereum } = window;
+      if (!ethereum) return false;
+      const added = await ethereum.request({
+        method: "wallet_watchAsset",
+        params: {
+          type: "ERC20",
+          options: {
+            address: dlcBTCContract?.address,
+            symbol: "dlcBTC",
+            decimals: 8,
+            image:
+              "https://cdn.discordapp.com/attachments/994505799902691348/1035507437748367360/DLC.Link_Emoji.png",
+          },
+        },
+      });
+      return added;
+    } catch (error) {
+      console.error(error);
+      return false;
+    }
+  }
+
   return {
     protocolContract,
     dlcManagerContract,
@@ -306,5 +331,6 @@
     getVault,
     setupVault,
     closeVault,
+    recommendDlcBtcTokenToMetamask,
   };
 }