feat: add reset metamask permission when button clicked

Author: markjung96

src/components/connect-metamask.tsx

@@ -32,8 +32,6 @@ export const ConnectMetmask = ({}: ConnectMetmaskProps) => {
       }))
     );
   const isLoading = provider.loading || network.loading || address.loading || balance.loading;
-  const isActive =
-    provider.data && ARBITRUM_NETWORK.some((item) => item.chainId === network.data) && address.data && balance.data;
 
   /**
    * 1. user가 arbitrum chain에 연결되어 있다면 user의 현재 network 정보를 가져오고, project의 network를 user의 network로 변경
@@ -42,6 +40,7 @@ export const ConnectMetmask = ({}: ConnectMetmaskProps) => {
    */
   const getAccountInfo = async () => {
     const networkFetched = await fetchNetwork();
+    console.log("networkFetched", networkFetched);
     const arbitrumNetwork = ARBITRUM_NETWORK.find((item) => item.chainId === networkFetched);
     if (arbitrumNetwork) {
       project.setNetwork(arbitrumNetwork);
@@ -52,6 +51,19 @@ export const ConnectMetmask = ({}: ConnectMetmaskProps) => {
     }
   };
 
+  const removePermission = async () => {
+    if (provider.data) {
+      try {
+        await provider.data.request({
+          method: "wallet_requestPermissions",
+          params: [{ eth_accounts: {}, "endowment:permitted-chains": {} }],
+        });
+      } catch (error) {
+        console.log(error);
+      }
+    }
+  };
+
   const traceSwitchProjectNetwork = async () => {
     await switchNetwork(project.network.data.chainId);
     await fetchAddress();
@@ -92,20 +104,6 @@ export const ConnectMetmask = ({}: ConnectMetmaskProps) => {
       await fetchNetwork();
     }
   };
-  const traceSwitchAccount = async (accounts: unknown) => {
-    if (Array.isArray(accounts) && accounts.length > 0) {
-      await fetchAddress();
-      await fetchBalance();
-    }
-  };
-  const traceSwitchNetwork = async (chainId: unknown) => {
-    if (typeof chainId === "string") {
-      const targetNetwork = ARBITRUM_NETWORK.find((network) => network.chainId === chainId);
-      if (!targetNetwork) return;
-      project.setNetwork(targetNetwork);
-      await fetchBalance();
-    }
-  };
 
   useEffect(() => {
     if (!provider.data) {
@@ -115,24 +113,22 @@ export const ConnectMetmask = ({}: ConnectMetmaskProps) => {
 
     getAccountInfo();
 
-    provider.data.on("accountsChanged", traceSwitchAccount);
-    provider.data.on("chainChanged", traceSwitchNetwork);
+    // window.addEventListener("message", traceSwitchNetwork);
 
-    return () => {
-      if (!provider.data) return;
-      provider.data.removeListener("accountsChanged", traceSwitchAccount);
-      provider.data.removeListener("chainChanged", traceSwitchNetwork);
-    };
+    // return () => {
+    //   window.removeEventListener("message", traceSwitchNetwork);
+    // };
   }, []);
 
   return (
     <div className="flex flex-col gap-2">
       <Button
-        className={`px-[1.25rem] py-[0.75rem] w-full relative flex justify-center items-center ${
-          isActive ? "bg-metamask-active" : "bg-metamask-default"
-        } border-0 rounded-sm overflow-hidden`}
+        className={`px-[1.25rem] py-[0.75rem] w-full relative flex justify-center items-center bg-metamask-default border-0 rounded-sm overflow-hidden`}
         disabled={isLoading}
-        onClick={getAccountInfo}
+        onClick={async () => {
+          await removePermission();
+          await getAccountInfo();
+        }}
       >
         <img className="w-[25px] mr-[10px]" src={metamask} alt="metamask" />
         <b>Connect to MetaMask</b>

src/components/contracts/contract-address.tsx

@@ -90,7 +90,7 @@ export const ContractAddress = ({}: ContractAddressProps) => {
         >
           <Button
             className="relative border-0"
-            variant="primary"
+            variant="secondary"
             size="sm"
             disabled={contractLoading}
             onClick={handleAtAddressOnClick}

src/components/project/index.tsx

@@ -568,14 +568,28 @@ const UploadCode = () => {
 
   const Icon = ({ verified }: { verified: boolean | null }) =>
     !address || verified === null ? (
-      <input
-        className="size-4"
-        type="checkbox"
-        id="uploadCodeCheckbox"
-        disabled={deployLoading}
-        checked={upload}
-        onChange={handleUploadOnChange}
-      />
+      <div className="m-0 flex items-center">
+        <input
+          className="peer hidden"
+          type="checkbox"
+          id="uploadCodeCheckbox"
+          disabled={deployLoading}
+          checked={upload}
+          onChange={handleUploadOnChange}
+        />
+        <label
+          htmlFor="uploadCodeCheckbox"
+          className={`
+          m-0
+          w-4 h-4
+          border-[1px] border-gray-500 rounded-sm
+          bg-gray-700
+          peer-checked:bg-checked-circle
+          peer-checked:bg-no-repeat
+          peer-checked:bg-center
+          `}
+        />
+      </div>
     ) : verified ? (
       <FaCheck className="text-success cursor-pointer" onClick={reset} />
     ) : (

tailwind.config.js

@@ -3,6 +3,10 @@ module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {
+      backgroundImage: {
+        "checked-circle":
+          "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 12 12'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e\")",
+      },
       colors: {
         "metamask-active": "#007aa6",
         "metamask-default": "#2a2c3f",