Modularized smart contract interact function util

src/components/dashboard/navigation.tsx

@@ -8,6 +8,7 @@ import Link from "next/link";
 import { Fragment, useEffect, useState } from "react";
 import { useAccount, useConnect, useDisconnect, useNetwork } from "wagmi";
 import { Button } from "../button";
+import { TransactionContext } from '../../components/web3Wrap'
 
 const navigation = [
   { name: "Dashboard", href: Routes.dashboard.landing, current: true },

src/components/web3Wrap.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react'
+import { ethers } from 'ethers'
+
+export const TransactionContext = React.createContext({} as any);
+
+export const TransactionProvider = ({ children }) => {
+    const [connectedAccount, setConnectedAccount] = useState(null)
+
+    const checkIfWalletConnected = async () => {
+        try {
+            if(!window.ethereum) return alert("Please install metamask")
+            console.log("check window ethereum: ", window.ethereum)
+            const accounts = await window.ethereum.request({ method: 'eth_accounts' })
+
+            if (accounts.length) {
+                setConnectedAccount(accounts[0]);
+            } else {
+                console.log('No accounts found')
+            }
+            console.log("Log accounts: ", accounts)
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
+    // const checkIfWalletChanged = async () => {
+    //     ethereum.on('accountsChanged', function (accounts) {
+    //         getAccount();
+    //     })
+    // }
+
+    useEffect(() =>{
+        checkIfWalletConnected()
+    },[connectedAccount])
+
+    const connectWallet = async () => {
+        try {
+            if(!window.ethereum) return alert("Please install metamask")
+            const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' })
+            setConnectedAccount(accounts[0])
+        } catch (error) {
+            console.log(error)
+            throw new Error('No ethereum object.')
+        }
+    }
+    return (
+      <TransactionContext.Provider value={{ connectWallet, connectedAccount }}>
+          {children}
+      </TransactionContext.Provider>
+  )
+}

src/pages/dashboard/dao.tsx

@@ -19,12 +19,7 @@ export default function Dao() {
     address: contractAbi.DataDaoManager[3141].contractAddress as Address,
     abi: contractAbi.DataDaoManager[3141].contractABI,
     functionName: "createNewInstitutionDAO",
-    args: [
-      {
-        name: "FirstDAo",
-        initialOwners: ["0xa2D41d7e830F3a5c09ec04cC800BC2bA57665d6B"],
-      },
-    ],
+    args: [ "FirstDAo", ["0xa2D41d7e830F3a5c09ec04cC800BC2bA57665d6B"]],
   });
 
   const { data, isLoading, isSuccess, write } = useContractWrite(config);

src/utils/Web3AuthConnectorInstance.ts

@@ -10,6 +10,10 @@ const iconUrl = "https://web3auth.io/docs/contents/logo-ethereum.png";
 
 export const Web3AuthConnectorInstance = (chains: Chain[]) => {
   console.log("chain", chains);
+  console.log(
+    "process.env.NEXT_PUBLIC_WEB3_AUTH_CLIENT_ID",
+    process.env.NEXT_PUBLIC_WEB3_AUTH_CLIENT_ID
+  );
   // Create Web3Auth Instance
   const web3AuthInstance = new Web3Auth({
     clientId: process.env.NEXT_PUBLIC_WEB3_AUTH_CLIENT_ID,