From 7103c03fad21c5efa24cd0476b3ba9768d20c086 Mon Sep 17 00:00:00 2001
From: scolear <bobtera@gmail.com>
Date: Fri, 24 Nov 2023 16:44:16 +0100
Subject: [PATCH] feat: add token to metamask button

---
 .../components/walkthrough/walkthrough.tsx    | 20 +++++++-------
 src/app/hooks/use-ethereum.ts                 | 26 +++++++++++++++++++
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx b/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx
index ca117250..1f419286 100644
--- a/src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx
+++ b/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>
           );
       }
diff --git a/src/app/hooks/use-ethereum.ts b/src/app/hooks/use-ethereum.ts
index 1ccf4381..0882ddb0 100644
--- a/src/app/hooks/use-ethereum.ts
+++ b/src/app/hooks/use-ethereum.ts
@@ -26,6 +26,7 @@ export interface UseEthereumReturn {
   getVault: (vaultUUID: string) => Promise<void>;
   setupVault: (btcDepositAmount: number) => Promise<void>;
   closeVault: (vaultUUID: string) => Promise<void>;
+  recommendDlcBtcTokenToMetamask: () => Promise<boolean>;
 }
 
 export function useEthereum(): UseEthereumReturn {
@@ -294,6 +295,30 @@ export function useEthereum(): UseEthereumReturn {
     }
   }
 
+  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 @@ export function useEthereum(): UseEthereumReturn {
     getVault,
     setupVault,
     closeVault,
+    recommendDlcBtcTokenToMetamask,
   };
 }