From b7936a66d5a3fc8cc05f3932d2b26613ba7a3b37 Mon Sep 17 00:00:00 2001
From: Spencer Schoeneman <spencer.schoeneman@gmail.com>
Date: Thu, 7 Dec 2023 10:20:15 -0600
Subject: [PATCH 1/5] get wallet address and display in Header

---
 .../dash-wind/containers/Header.tsx           | 38 +++++++++++++++----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/packages/nextjs/components/dash-wind/containers/Header.tsx b/packages/nextjs/components/dash-wind/containers/Header.tsx
index d80d64f..e324276 100644
--- a/packages/nextjs/components/dash-wind/containers/Header.tsx
+++ b/packages/nextjs/components/dash-wind/containers/Header.tsx
@@ -5,6 +5,8 @@ import { useRouter } from "next/router";
 import { openRightDrawer } from "../features/common/rightDrawerSlice";
 import { RIGHT_DRAWER_TYPES } from "../utils/globalConstantUtil";
 import { themeChange } from "theme-change";
+import { Address, createWalletClient, custom } from "viem";
+import { polygonMumbai } from "viem/chains";
 import Bars3Icon from "@heroicons/react/24/outline/Bars3Icon";
 import BellIcon from "@heroicons/react/24/outline/BellIcon";
 import MoonIcon from "@heroicons/react/24/outline/MoonIcon";
@@ -13,7 +15,7 @@ import { setIsConnected } from "~~/auth/authSlice";
 import { web3auth } from "~~/auth/web3auth";
 // import UserIcon from "@heroicons/react/24/outline/UserIcon";
 import { MyState, useMyDispatch, useMySelector } from "~~/components/dash-wind/app/store";
-import { Address } from "~~/components/web-3-crew/Address";
+import { Address as AddressDisplay } from "~~/components/web-3-crew/Address";
 
 function Header() {
   const dispatch = useMyDispatch();
@@ -21,8 +23,19 @@ function Header() {
   const [currentTheme, setCurrentTheme] = useState(
     typeof window !== "undefined" ? localStorage.getItem("theme") : null,
   );
+  const [address, setAddress] = useState<Address | null>(null);
   const router = useRouter();
 
+  useEffect(() => {
+    async function getAddress() {
+      const address = await getAccounts();
+      if (address) {
+        setAddress(address);
+      }
+    }
+    getAddress();
+  }, []);
+
   useEffect(() => {
     themeChange(false);
     if (currentTheme === null) {
@@ -35,6 +48,22 @@ function Header() {
     // 👆 false parameter is required for react project
   }, [currentTheme]);
 
+  async function getAccounts() {
+    if (!web3auth.provider) {
+      console.log("from login - getAccounts: provider not defined");
+      return;
+    }
+    const client = createWalletClient({
+      // account: privateKeyToAccount('0x...'); // from viem
+      chain: polygonMumbai,
+      transport: custom(web3auth.provider),
+    });
+
+    // Get user's public address
+    const [address] = await client.getAddresses();
+    return address as Address;
+  }
+
   // Opening right sidebar for notification
   const openNotification = () => {
     dispatch(openRightDrawer({ header: "Notifications", bodyType: RIGHT_DRAWER_TYPES.NOTIFICATION }));
@@ -99,12 +128,7 @@ function Header() {
             <label tabIndex={0} className="btn btn-ghost">
               <div className="flex justify-center items-center">
                 {/* Wallet Address Display */}
-                <Address
-                  address="0xB9555E2f3e34aDfDB5d033C5af73de6e2385A770"
-                  disableAddressLink={true}
-                  format="short"
-                  size="base"
-                />
+                <AddressDisplay address={address?.toString()} disableAddressLink={true} format="short" size="base" />
               </div>
             </label>
             <ul

From 786e31922a02f219b429e6728543dffc2c1e9493 Mon Sep 17 00:00:00 2001
From: funkornaut001 <funkornaut@gmail.com>
Date: Fri, 8 Dec 2023 03:17:56 -0600
Subject: [PATCH 2/5] isOwner - login flow - wagmiConnect attempt

---
 NOTES.md                                      |  33 ++++
 package.json                                  |   3 +
 packages/hardhat/contracts/Payroll.sol        |   4 +-
 packages/hardhat/deploy/03_deploy_payroll.ts  |   2 +-
 packages/nextjs/.env                          |   8 +
 packages/nextjs/auth/web3auth.ts              |  17 ++
 .../dash-wind/containers/Header.tsx           |   1 +
 .../dash-wind/features/employees/index.tsx    |   3 +-
 .../dash-wind/features/user/Login.tsx         | 184 +++++++++++++-----
 .../dash-wind/features/user/Register.tsx      |  11 +-
 .../web-3-crew/register-page/DeployForm.tsx   |  71 +++++--
 .../web-3-crew/register-page/form.tsx         |  73 +++++++
 packages/nextjs/scaffold.config.ts            |   2 +-
 yarn.lock                                     |  18 ++
 14 files changed, 350 insertions(+), 80 deletions(-)
 create mode 100644 NOTES.md
 create mode 100644 packages/nextjs/.env
 create mode 100644 packages/nextjs/components/web-3-crew/register-page/form.tsx

diff --git a/NOTES.md b/NOTES.md
new file mode 100644
index 0000000..3ad5d59
--- /dev/null
+++ b/NOTES.md
@@ -0,0 +1,33 @@
+PayrollFactory deployed to: 0xfe44aB0B966E57F126130BE6401546c7351484ad --mumbai
+TokenTransferor deployed to: 0x21d762ab159676d3bd05e12A95699C1d0b043A48 --mumbai
+Payroll deployed to: 0xDBAbe75848c608bDA3382f0D68219542032B3fEa --mumbai
+All deployed from 0x9768818565ED5968fAACC6F66ca02CBf2785dB84
+
+https://api-testnet.polygonscan.com/IEWN9BX92EIKVXR22UKQQ9A4UWEF5J9IRG
+
+There is no log out / wallet modal on Register Deploy
+Need a rundown of how to log in with wallet and connect to mumbai chain without AA
+
+I shouldnt need to change the web3auth client id correct?
+
+deploy contract in register flow is stuck at getting account address...
+
+## 12/7
+Funkornaut@gmail -- 0xBB65877a1207572321dE0ad64A2e196545904a09
+trevfost503@gmail -- 0xfd330177602f092b72a3b65893602067Ab69cE2c
+sign in with funkornaut through gmail -- 0x1aD394b0c57dbC57f16A5A54b4ccee436b678287
+
+deployed new payroll 0xAB34603b0A8c54f9F9Fe9207b98da8ac354dB68e
+- added function isOwner returns bool, owner() func on ownable works but since we then needed to look for bool on front end thought that would simplify from end logic / routing
+- think that the LogIn flow is a little better
+
+Login.tsx
+Web3 modal pops up when you hit login button - should only pop up if there is a contract address in the form
+
+Now logOut if funky
+Cant log in with Metamask
+
+DeployForm
+- just using useContractWrite was able to click button and make action got this error in browser console
+    next-dev.js:20 ConnectorNotFoundError: Connector not found at writeContract (chunk-TSH6VVF4.js:2348:1)
+
diff --git a/package.json b/package.json
index c4d4ea4..7b46570 100644
--- a/package.json
+++ b/package.json
@@ -36,5 +36,8 @@
   },
   "resolutions": {
     "usehooks-ts@^2.7.2": "patch:usehooks-ts@npm:^2.7.2#./.yarn/patches/usehooks-ts-npm-2.7.2-fceffe0e43.patch"
+  },
+  "dependencies": {
+    "@web3auth/web3auth-wagmi-connector": "^5.0.1"
   }
 }
diff --git a/packages/hardhat/contracts/Payroll.sol b/packages/hardhat/contracts/Payroll.sol
index a09a1f8..b4df6d1 100644
--- a/packages/hardhat/contracts/Payroll.sol
+++ b/packages/hardhat/contracts/Payroll.sol
@@ -527,8 +527,8 @@ ITokenTransferor public ccip;
         }
     }
 
-    function getOwner() public view returns (address){
-        return owner();
+    function isOwner(address _address) public view returns (bool){
+        return _address == owner();
     }   
 
     function getEmployeePaymentSplits(address _employeeAddress) public view returns (PaymentSplit memory){
diff --git a/packages/hardhat/deploy/03_deploy_payroll.ts b/packages/hardhat/deploy/03_deploy_payroll.ts
index a0980ad..ca1c6a2 100644
--- a/packages/hardhat/deploy/03_deploy_payroll.ts
+++ b/packages/hardhat/deploy/03_deploy_payroll.ts
@@ -6,7 +6,7 @@ async function main() {
   console.log("Deploying contracts with the account:", deployer.address);
 
   // Add the addresses of the dependencies of your Payroll contract
-  const ccipTokenTransferorAddress = "0xFFc15127eB60C4Ab1a2e5e0319615ca0982952f2"; // deployed via script
+  const ccipTokenTransferorAddress = "0x21d762ab159676d3bd05e12A95699C1d0b043A48"; // deployed via script
   const bnmTokenAddress = "0xf1E3A5842EeEF51F2967b3F05D45DD4f4205FF40"; //BnM Mumbai
 
   // Deploy the Payroll contract
diff --git a/packages/nextjs/.env b/packages/nextjs/.env
new file mode 100644
index 0000000..d27e85a
--- /dev/null
+++ b/packages/nextjs/.env
@@ -0,0 +1,8 @@
+NEXT_PUBLIC_ALCHEMY_API_KEY=NcFZk9kYsJT0zbvxp1BvXdk9PmgJFypJ
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=67c39fba49c2101d141cb637137aa160
+# # Polygon Mumbai 
+NEXT_PUBLIC_FACTORY_CONTRACT_ADDRESS=0xfe44aB0B966E57F126130BE6401546c7351484ad
+# # Polygon Mumbai
+NEXT_PUBLIC_PAYROLL_CONTRACT_ADDRESS=0xAB34603b0A8c54f9F9Fe9207b98da8ac354dB68e
+NEXT_PUBLIC_LOCAL_CHAIN_ID=0 # REPLACE WITH LOCAL DEV CHAIN
+NEXT_PUBLIC_TESTNET_CHAIN_ID=80001 # Polygon Mumbaiyar
\ No newline at end of file
diff --git a/packages/nextjs/auth/web3auth.ts b/packages/nextjs/auth/web3auth.ts
index f6da7db..b6713f3 100644
--- a/packages/nextjs/auth/web3auth.ts
+++ b/packages/nextjs/auth/web3auth.ts
@@ -1,11 +1,28 @@
 // import { useEffect, useState } from "react";
 import { Web3Auth } from "@web3auth/modal";
 
+//import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
+
 // import { createWalletClient, custom } from "viem";
 // import { polygonMumbai } from "viem/chains";
 // import { AuthProvider, setAuthProvider, setIsConnected } from "~~/auth/authSlice";
 // import { MyState, useMyDispatch, useMySelector } from "~~/components/dash-wind/app/store";
 
+// set up your web3auth instance with all the features you want
+// const web3AuthInstance = new Web3Auth({
+//   clientId: "BM0SLNkhMCfIygw0Xi79dG6qbWGMN0o0mEeDjRT0dxlP3BEok9pnu5aqxCNfj2TZ9XT7sQaXm0ltuWbCQ1tsRNI",
+//   chainConfig: {
+//     chainNamespace: "eip155",
+//     chainId: "0x13881", // Mumbai
+//     rpcTarget: "https://rpc.ankr.com/polygon_mumbai",
+//     displayName: "Mumbai Testnet",
+//     blockExplorer: "https://mumbai.polygonscan.com/",
+//     ticker: "MATIC",
+//     tickerName: "Polygon",
+//   },
+//   web3AuthNetwork: "sapphire_mainnet",
+// });
+
 export const web3auth = new Web3Auth({
   clientId: "BM0SLNkhMCfIygw0Xi79dG6qbWGMN0o0mEeDjRT0dxlP3BEok9pnu5aqxCNfj2TZ9XT7sQaXm0ltuWbCQ1tsRNI", // Get your Client ID from the Web3Auth Dashboard
   web3AuthNetwork: "sapphire_devnet", // Web3Auth Network
diff --git a/packages/nextjs/components/dash-wind/containers/Header.tsx b/packages/nextjs/components/dash-wind/containers/Header.tsx
index e324276..018f619 100644
--- a/packages/nextjs/components/dash-wind/containers/Header.tsx
+++ b/packages/nextjs/components/dash-wind/containers/Header.tsx
@@ -61,6 +61,7 @@ function Header() {
 
     // Get user's public address
     const [address] = await client.getAddresses();
+    //console.log("user address: ", address);
     return address as Address;
   }
 
diff --git a/packages/nextjs/components/dash-wind/features/employees/index.tsx b/packages/nextjs/components/dash-wind/features/employees/index.tsx
index f834c21..c517ac2 100644
--- a/packages/nextjs/components/dash-wind/features/employees/index.tsx
+++ b/packages/nextjs/components/dash-wind/features/employees/index.tsx
@@ -10,10 +10,9 @@ import { openModal } from "../common/modalSlice";
 /*-------------------------------------*/
 // Kaz & Trevor
 // uncomment
-// import { useContractRead } from "wagmi";
+//import { useContractRead } from "wagmi";
 
 /*-------------------------------------*/
-
 import TrashIcon from "@heroicons/react/24/outline/TrashIcon";
 import {
   /*MyState,*/
diff --git a/packages/nextjs/components/dash-wind/features/user/Login.tsx b/packages/nextjs/components/dash-wind/features/user/Login.tsx
index e4aa292..858c6ae 100644
--- a/packages/nextjs/components/dash-wind/features/user/Login.tsx
+++ b/packages/nextjs/components/dash-wind/features/user/Login.tsx
@@ -1,6 +1,7 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import Payroll from "../../../../../hardhat/artifacts/contracts/Payroll.sol/Payroll.json";
 import InputText from "../../components/Input/InputText";
 import ErrorText from "../../components/Typography/ErrorText";
 import { UpdateFormValues } from "../../types/FormTypes";
@@ -8,71 +9,140 @@ import LandingIntro from "./LandingIntro";
 import { Address, createWalletClient, custom } from "viem";
 import { polygonMumbai } from "viem/chains";
 import { useContractRead } from "wagmi";
-import { setIsAdmin, setIsConnected } from "~~/auth/authSlice";
+import { setIsConnected } from "~~/auth/authSlice";
 import { web3auth } from "~~/auth/web3auth";
 import { MyState, useMyDispatch, useMySelector } from "~~/components/dash-wind/app/store";
 
+//import { get } from "http";
+
 function Login() {
   const INITIAL_LOGIN_OBJ = {
     contractAddress: "",
     emailId: "",
   };
 
-  const chainId = process.env.NEXT_PUBLIC_TARGET_LOCAL_CHAIN
-    ? process.env.NEXT_PUBLIC_LOCAL_CHAIN_ID
-    : process.env.NEXT_PUBLIC_TESTNET_CHAIN_ID;
+  const chainId = //process.env.NEXT_PUBLIC_TARGET_LOCAL_CHAIN ?
+    //process.env.NEXT_PUBLIC_LOCAL_CHAIN_ID
+    //:
+    process.env.NEXT_PUBLIC_TESTNET_CHAIN_ID;
 
   // const [loading, setLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
   const [loginObj, setLoginObj] = useState(INITIAL_LOGIN_OBJ);
   const { isConnected } = useMySelector((state: MyState) => state.auth);
-
   const router = useRouter();
   const dispatch = useMyDispatch();
+  //const userAddress = getAccounts();
+  // state to store user address once it is fetched
+  const [userAddress, setUserAddress] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchAddress() {
+      const address = await getAccounts();
+      if (address) {
+        // not sure what this issue is with this
+        setUserAddress(address);
+      }
+    }
+    fetchAddress();
+  }, []);
+
+  const payrollABI = Payroll.abi;
 
   /*-------------------------------------*/
   // Kaz & Trevor
   // getOwner address to test against user's address
   // need to see what shape `owner` will be on return
+  // contract interaction calls isOwner()
   const {
-    data: owner,
+    data: isOwner,
     // isError,
     // isLoading,
   } = useContractRead({
     address: process.env.NEXT_PUBLIC_PAYROLL_CONTRACT_ADDRESS,
-    // abi: payrollContractAbi,
-    functionName: "getOwner",
+    abi: payrollABI,
+    functionName: "isOwner",
+    args: userAddress ? [userAddress] : [],
     chainId: Number(chainId),
-  });
+  }) as { data: boolean | undefined };
+
+  console.log("is owner: ", isOwner);
+  console.log("user address contract read: ", [getAccounts()]);
+
+  useEffect(() => {
+    if (typeof isOwner !== "undefined") {
+      // Ensure the value is not undefined
+      if (isOwner) {
+        // Redirect to owner's dashboard
+        router.push("/dapp/dashboard");
+      } else {
+        // Redirect to employee or general user dashboard
+        router.push("/dapp/dashboard");
+      }
+    }
+  }, [isOwner, router]);
+
   /*-------------------------------------*/
 
   /*-------------------------------------*/
   // Kaz & Trevor
   //
-  const {
-    data: isEmployee,
-    // isError,
-    // isLoading,
-  } = useContractRead({
-    address: process.env.NEXT_PUBLIC_PAYROLL_CONTRACT_ADDRESS,
-    // abi: payrollContractAbi,
-    functionName: "doesEmployeeExist",
-    args: [
-      /* problem: figure out how to getAccount() address here */
-    ],
-    chainId: Number(chainId),
-  });
+  // const {
+  //   data: isEmployee,
+  //   // isError,
+  //   // isLoading,
+  // } = useContractRead({
+  //   address: process.env.NEXT_PUBLIC_PAYROLL_CONTRACT_ADDRESS,
+  //   abi: payrollABI,
+  //   functionName: "doesEmployeeExist",
+  //   args: [
+  //     /* problem: figure out how to getAccount() address here */
+  //     userAddress
+  //   ],
+  //   chainId: Number(chainId),
+  // });
   /*-------------------------------------*/
 
+  // // Web3Auth
+  // async function login() {
+  //   if (isConnected) {
+  //     // await determineIfAccountIsAdmin();
+  //     // if (!isEmployee) {
+  //     //   //until the hook is working, this is going to prevent us from being directed to the dashboard
+  //     //   return;
+  //     // }
+  //     router.push("/dapp/dashboard");
+  //     return;
+  //   }
+
+  //   try {
+  //     await web3auth.connect();
+  //     if (web3auth.connected) {
+  //       dispatch(setIsConnected({ isConnected: true }));
+  //       //const userAddress = await getAccounts(); // Retrieve user's address
+
+  //      await determineIfAccountIsAdmin();
+  //      if (!isEmployee) {
+  //        // until the hook is working, this is going to prevent us from being directed to the dashboard
+  //         return;
+  //       }
+  //       router.push("/dapp/dashboard");
+  //     }
+  //   } catch (error) {
+  //     console.error(error);
+  //   }
+  // }
+
   // Web3Auth
   async function login() {
     if (isConnected) {
-      await determineIfAccountIsAdmin();
-      if (!isEmployee) {
-        // until the hook is working, this is going to prevent us from being directed to the dashboard
+      // await determineIfAccountIsAdmin();
+      if (!isOwner) {
+        //until the hook is working, this is going to prevent us from being directed to the dashboard
+        router.push("/dapp/dashboard");
+
         return;
       }
-      router.push("/dapp/dashboard");
       return;
     }
 
@@ -80,40 +150,44 @@ function Login() {
       await web3auth.connect();
       if (web3auth.connected) {
         dispatch(setIsConnected({ isConnected: true }));
-        await determineIfAccountIsAdmin();
-        if (!isEmployee) {
+        //const userAddress = await getAccounts(); // Retrieve user's address
+
+        // await determineIfAccountIsAdmin();
+        if (!isOwner) {
           // until the hook is working, this is going to prevent us from being directed to the dashboard
+          router.push("/dapp/dashboard");
+
           return;
         }
-        router.push("/dapp/dashboard");
       }
     } catch (error) {
       console.error(error);
     }
   }
 
-  async function determineIfAccountIsAdmin() {
-    // set loading === true ???
-    const address = await getAccounts();
-    if (!address) {
-      console.error("from determineIfAccountIsAdmin - address is undefined");
-      return;
-    }
+  // async function determineIfAccountIsAdmin() {
+  //   // set loading === true ???
+  //   const userAddress = getAccounts();
+  //   if (!userAddress) {
+  //     console.error("from determineIfAccountIsAdmin - address is undefined");
+  //     return;
+  //   }
 
-    if (!owner) {
-      console.error("From determineIfAccountIsAdmin: ownerData from Payroll Contract is undefined");
-      return;
-    }
+  //   if (!owner) {
+  //     console.error("From determineIfAccountIsAdmin: ownerData from Payroll Contract is undefined");
+  //     return;
+  //   }
 
-    /*-------------------------------------*/
-    // Kaz & Trevor
-    // need to see what shape `owner` will be on return
-    const isAdmin = address === owner ? true : false;
-    dispatch(setIsAdmin({ isAdmin: isAdmin }));
-    /*-------------------------------------*/
-    // set loading === false ???
-  }
+  //   /*-------------------------------------*/
+  //   // Kaz & Trevor
+  //   // need to see what shape `owner` will be on return
+  //   const isAdmin = userAddress === owner ? true : false;
+  //   dispatch(setIsAdmin({ isAdmin: isAdmin }));
+  //   /*-------------------------------------*/
+  //   // set loading === false ???
+  // }
 
+  // func to grab the connected wallet address
   async function getAccounts() {
     if (!web3auth.provider) {
       console.log("from login - getAccounts: provider not defined");
@@ -125,16 +199,18 @@ function Login() {
       transport: custom(web3auth.provider),
     });
 
+    //console.log("web3auth provider: ", web3auth.provider);
     // Get user's public address
-    const [address] = await client.getAddresses();
-    return address as Address;
+    const [userAddress] = await client.getAddresses();
+    console.log("user address: ", userAddress);
+    return userAddress as Address;
   }
 
   const submitForm = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setErrorMessage("");
 
-    if (loginObj.emailId.trim() === "") return setErrorMessage("Email is required!");
+    // if (loginObj.emailId.trim() === "") return setErrorMessage("Email is required!");
     if (loginObj.contractAddress.trim() === "") return setErrorMessage("Contract Address is required!");
   };
 
@@ -162,14 +238,14 @@ function Login() {
                   updateFormValue={updateFormValue}
                 />
 
-                <InputText
+                {/* <InputText
                   type="emailId"
                   defaultValue={loginObj.emailId}
                   updateType="emailId"
                   containerStyle="mt-4"
                   labelTitle="Email"
                   updateFormValue={updateFormValue}
-                />
+                /> */}
               </div>
 
               <ErrorText styleClass="mt-8">{errorMessage}</ErrorText>
diff --git a/packages/nextjs/components/dash-wind/features/user/Register.tsx b/packages/nextjs/components/dash-wind/features/user/Register.tsx
index 035ba0d..9629106 100644
--- a/packages/nextjs/components/dash-wind/features/user/Register.tsx
+++ b/packages/nextjs/components/dash-wind/features/user/Register.tsx
@@ -24,7 +24,7 @@ function Register() {
   const [walletAddress, setWalletAddress] = useState<Address | null>(null);
 
   const dispatch = useMyDispatch();
-
+  //@note is this working? working for register page?
   async function login() {
     try {
       await web3auth.connect();
@@ -49,6 +49,8 @@ function Register() {
 
     // Get user's public address
     const [address] = await client.getAddresses();
+    console.log("user address: ", address);
+
     return address;
   }
 
@@ -61,9 +63,12 @@ function Register() {
       setRegisterState("loading");
       console.log("logging in company...");
       await login();
-      // Account Abstraction goes here...?
-      console.log("getting account address...");
+      // Account Abstraction goes here...? -- kinda is with login
+      // grab account address
       const address = await getAccounts();
+      console.log("connected address: ", address);
+
+      console.log("getting account address...");
       if (address) {
         // Prompt user to fund wallet?
         setWalletAddress(address);
diff --git a/packages/nextjs/components/web-3-crew/register-page/DeployForm.tsx b/packages/nextjs/components/web-3-crew/register-page/DeployForm.tsx
index acbef6f..84d8ad7 100644
--- a/packages/nextjs/components/web-3-crew/register-page/DeployForm.tsx
+++ b/packages/nextjs/components/web-3-crew/register-page/DeployForm.tsx
@@ -1,36 +1,66 @@
 import React from "react";
 import Link from "next/link";
-import { Abi, Address, parseEther } from "viem";
-import { useContractWrite, usePrepareContractWrite } from "wagmi";
+import PayrollFactory from "../../../../hardhat/artifacts/contracts/PayrollFactory.sol/PayrollFactory.json";
+import { Address, parseEther } from "viem";
+import { useContractWrite } from "wagmi";
+import { web3auth } from "~~/auth/web3auth";
 import ErrorText from "~~/components/dash-wind/components/Typography/ErrorText";
 import { Address as AddressDisplay } from "~~/components/scaffold-eth/Address";
 
+//import { useDeployedContractInfo } from "~~/hooks/scaffold-eth";
+
 interface props {
   ownerAddress: Address | null;
 }
-
-const payrollFactoryAddress = "";
-const payrollFactoryABI: Abi = [];
+// Check if the user is connected
+const isConnected = web3auth.connected;
+const payrollFactoryAddress = "0xfe44aB0B966E57F126130BE6401546c7351484ad";
+const payrollFactoryABI = PayrollFactory.abi;
 
 export default function DeployForm({ ownerAddress }: props) {
+  //const { data: contractData } = useDeployedContractInfo("PayrollFactory");
+
   /*-------------------------------------*/
-  // Kaz & Trevor
+  // Kaz & Trevor -- think this is the right way to do it
+  // but running in browser it seems to always be looking for the connected address
+  // see no action in the terminal when the button is clicked
   // deploy company contract after registration of account
-  const { config } = usePrepareContractWrite({
+  // const { config } = usePrepareContractWrite({
+  //   address: payrollFactoryAddress,
+  //   // abi: contractData?.abi,
+  //   abi: payrollFactoryABI,
+  //   functionName: "deployPayrollAndTokenTransferor",
+  //   value: parseEther("1", "wei"),
+  //   onSuccess(data) {
+  //     console.log("contract deployed! Data: ", data); //will data be the contract addresses?
+  //   },
+  //   onError(error) {
+  //     console.error("contract deploy error!", error); //error message
+  //   },
+  // });
+
+  //console.log("config: ", config);
+
+  const { data, isLoading, isSuccess, write } = useContractWrite({
     address: payrollFactoryAddress,
     abi: payrollFactoryABI,
     functionName: "deployPayrollAndTokenTransferor",
-    value: parseEther("1", "wei"),
-    onSuccess(data) {
-      console.log("contract deployed! Data: ", data);
-    },
-    onError(error) {
-      console.error("contract deploy error!", error);
-    },
   });
+  console.log("write: ", write);
+  console.log("data: ", data);
 
-  const { data, isLoading, isSuccess, write } = useContractWrite(config);
-  /*-------------------------------------*/
+  // Function to handle button click
+  const handleDeployClick = () => {
+    if (isConnected) {
+      write({
+        args: [],
+        //from: ownerAddress,
+        value: parseEther("1", "wei"),
+      });
+    } else {
+      console.log("Wallet not connected");
+    }
+  };
 
   return (
     <div className="py-24 px-10 relative">
@@ -44,7 +74,14 @@ export default function DeployForm({ ownerAddress }: props) {
             </div>
             {/* <button onClick={() => writeAsync()} className="btn mt-2 w-full btn-primary mb-4"> */}
             <button
-              onClick={() => write?.()}
+              // onClick={() =>
+              //   write({
+              //     args: [],
+              //     //from: ownerAddress,
+              //     value: parseEther("1", "wei"),
+              //   })
+              // }
+              onClick={handleDeployClick}
               disabled={isLoading || isSuccess ? true : false}
               className={"btn mt-2 w-full btn-primary mb-4" + (isLoading ? " loading" : "")}
             >
diff --git a/packages/nextjs/components/web-3-crew/register-page/form.tsx b/packages/nextjs/components/web-3-crew/register-page/form.tsx
new file mode 100644
index 0000000..8bb37de
--- /dev/null
+++ b/packages/nextjs/components/web-3-crew/register-page/form.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import Link from "next/link";
+import PayrollFactory from "../../../../hardhat/artifacts/contracts/PayrollFactory.sol/PayrollFactory.json";
+import { Address, parseEther } from "viem";
+import { useContractWrite, usePrepareContractWrite } from "wagmi";
+import ErrorText from "~~/components/dash-wind/components/Typography/ErrorText";
+import { Address as AddressDisplay } from "~~/components/scaffold-eth/Address";
+
+interface props {
+  ownerAddress: Address | null;
+}
+
+const payrollFactoryAddress = "";
+const payrollFactoryABI = PayrollFactory.abi;
+
+export default function DeployForm({ ownerAddress }: props) {
+  const { config } = usePrepareContractWrite({
+    address: payrollFactoryAddress,
+    abi: payrollFactoryABI,
+    functionName: "deployPayrollAndTokenTransferor",
+    value: parseEther("1", "wei"),
+    onSuccess(data) {
+      console.log("contract deployed! Data: ", data);
+    },
+    onError(error) {
+      console.error("contract deploy error!", error);
+    },
+  });
+
+  const { data, isLoading, isSuccess, write } = useContractWrite(config);
+
+  return (
+    <div className="py-24 px-10 relative">
+      <h2 className="text-2xl font-semibold mb-2 text-center">Deploy Payroll Contract</h2>
+      <div className="space-y-8">
+        {ownerAddress ? (
+          <>
+            <div className="flex flex-col mt-5">
+              <p>Account Owner Address:</p>
+              <AddressDisplay address={ownerAddress} disableAddressLink={true} format="long" size="base" />
+            </div>
+            {/* <button onClick={() => writeAsync()} className="btn mt-2 w-full btn-primary mb-4"> */}
+            <button
+              onClick={() => write?.()}
+              disabled={isLoading || isSuccess ? true : false}
+              className={"btn mt-2 w-full btn-primary mb-4" + (isLoading ? " loading" : "")}
+            >
+              Deploy Contract
+            </button>
+          </>
+        ) : (
+          <ErrorText styleClass="mt-8">Error: Owner Address Not Found</ErrorText>
+        )}
+
+        {data && (
+          <div className="flex flex-col mt-5">
+            <p>Payroll Contract Address:</p>
+            {/* <p>{data}</p> */}
+            {/* <AddressDisplay address={contractAddress} format="long" size="base" /> */}
+          </div>
+        )}
+
+        <div className="text-center mt-4">
+          <Link href="/login">
+            <span className="  inline-block  hover:text-primary hover:underline hover:cursor-pointer transition duration-200">
+              Go Home
+            </span>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/nextjs/scaffold.config.ts b/packages/nextjs/scaffold.config.ts
index 0af072c..628208e 100644
--- a/packages/nextjs/scaffold.config.ts
+++ b/packages/nextjs/scaffold.config.ts
@@ -11,7 +11,7 @@ export type ScaffoldConfig = {
 
 const scaffoldConfig = {
   // The network where your DApp lives in
-  targetNetwork: chains.hardhat,
+  targetNetwork: chains.polygonMumbai,
 
   // The interval at which your front-end polls the RPC servers for new data
   // it has no effect on the local network
diff --git a/yarn.lock b/yarn.lock
index 4d825c3..e8f5079 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4783,6 +4783,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@web3auth/web3auth-wagmi-connector@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "@web3auth/web3auth-wagmi-connector@npm:5.0.1"
+  peerDependencies:
+    "@wagmi/core": ^1.x
+    "@web3auth/base": ^7.x
+    "@web3auth/modal": ^7.x
+    "@web3auth/no-modal": ^7.x
+    "@web3auth/openlogin-adapter": ^7.x
+    viem: ^1.x
+  peerDependenciesMeta:
+    "@web3auth/modal":
+      optional: true
+  checksum: 1c3d39cab0ff298ec10fe1061465f66a794a36b4d62261b5abf63879fef555005b7e44b6c5e7253b2e9d57b777671bef60f6564f9b2cb2399f92ef3bf9519372
+  languageName: node
+  linkType: hard
+
 "JSONStream@npm:1.3.2":
   version: 1.3.2
   resolution: "JSONStream@npm:1.3.2"
@@ -14008,6 +14025,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "se-2@workspace:."
   dependencies:
+    "@web3auth/web3auth-wagmi-connector": ^5.0.1
     husky: ^8.0.1
     lint-staged: ^13.0.3
   languageName: unknown

From ff2e6acf9ca35c420489ee0c781533e08ebc7ec6 Mon Sep 17 00:00:00 2001
From: Spencer Schoeneman <spencer.schoeneman@gmail.com>
Date: Fri, 8 Dec 2023 11:11:37 -0600
Subject: [PATCH 3/5] add web3auth-wagmi-connector

---
 packages/nextjs/.env.example                  |  5 +++--
 packages/nextjs/package.json                  |  1 +
 packages/nextjs/services/web3/wagmiConfig.tsx | 12 +++++++++++-
 yarn.lock                                     | 18 ++++++++++++++++++
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/packages/nextjs/.env.example b/packages/nextjs/.env.example
index 6769588..47c95bd 100644
--- a/packages/nextjs/.env.example
+++ b/packages/nextjs/.env.example
@@ -12,7 +12,8 @@
 NEXT_PUBLIC_ALCHEMY_API_KEY=
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
 
-NEXT_PUBLIC_FACTORY_CONTRACT_ADDRESS="" # Polygon Mumbai 
-NEXT_PUBLIC_PAYROLL_CONTRACT_ADDRESS="" # Polygon Mumbai
+NEXT_PUBLIC_FACTORY_CONTRACT_ADDRESS= # Polygon Mumbai 
+NEXT_PUBLIC_PAYROLL_CONTRACT_ADDRESS= # Polygon Mumbai
+NEXT_PUBLIC_TOKEN_TRANSFEROR_CONTRACT_ADDRESS= # Polygon Mumbai
 NEXT_PUBLIC_LOCAL_CHAIN_ID=0 # REPLACE WITH LOCAL DEV CHAIN
 NEXT_PUBLIC_TESTNET_CHAIN_ID=80001 # Polygon Mumbai
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
index e64c44b..6ffb456 100644
--- a/packages/nextjs/package.json
+++ b/packages/nextjs/package.json
@@ -22,6 +22,7 @@
     "@uniswap/v2-sdk": "^3.0.1",
     "@web3auth/base": "^7.2.0",
     "@web3auth/modal": "^7.2.0",
+    "@web3auth/web3auth-wagmi-connector": "^5.0.1",
     "axios": "^1.6.2",
     "blo": "^1.0.1",
     "chart.js": "^4.4.0",
diff --git a/packages/nextjs/services/web3/wagmiConfig.tsx b/packages/nextjs/services/web3/wagmiConfig.tsx
index 240aea0..00c2a1e 100644
--- a/packages/nextjs/services/web3/wagmiConfig.tsx
+++ b/packages/nextjs/services/web3/wagmiConfig.tsx
@@ -1,8 +1,18 @@
+import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
 import { createConfig } from "wagmi";
+import { web3auth as web3AuthInstance } from "~~/auth/web3auth";
 import { appChains, wagmiConnectors } from "~~/services/web3/wagmiConnectors";
 
 export const wagmiConfig = createConfig({
   autoConnect: false,
-  connectors: wagmiConnectors,
+  connectors: [
+    ...wagmiConnectors(),
+    new Web3AuthConnector({
+      chains: appChains.chains,
+      options: {
+        web3AuthInstance,
+      },
+    }),
+  ],
   publicClient: appChains.publicClient,
 });
diff --git a/yarn.lock b/yarn.lock
index 4d825c3..458e8cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2290,6 +2290,7 @@ __metadata:
     "@uniswap/v2-sdk": ^3.0.1
     "@web3auth/base": ^7.2.0
     "@web3auth/modal": ^7.2.0
+    "@web3auth/web3auth-wagmi-connector": ^5.0.1
     autoprefixer: ^10.4.12
     axios: ^1.6.2
     blo: ^1.0.1
@@ -4783,6 +4784,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@web3auth/web3auth-wagmi-connector@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "@web3auth/web3auth-wagmi-connector@npm:5.0.1"
+  peerDependencies:
+    "@wagmi/core": ^1.x
+    "@web3auth/base": ^7.x
+    "@web3auth/modal": ^7.x
+    "@web3auth/no-modal": ^7.x
+    "@web3auth/openlogin-adapter": ^7.x
+    viem: ^1.x
+  peerDependenciesMeta:
+    "@web3auth/modal":
+      optional: true
+  checksum: 1c3d39cab0ff298ec10fe1061465f66a794a36b4d62261b5abf63879fef555005b7e44b6c5e7253b2e9d57b777671bef60f6564f9b2cb2399f92ef3bf9519372
+  languageName: node
+  linkType: hard
+
 "JSONStream@npm:1.3.2":
   version: 1.3.2
   resolution: "JSONStream@npm:1.3.2"

From fb91d239863eb9349b7775add57d62e4f93a245d Mon Sep 17 00:00:00 2001
From: Spencer Schoeneman <spencer.schoeneman@gmail.com>
Date: Fri, 8 Dec 2023 11:22:26 -0600
Subject: [PATCH 4/5] ignore .env

---
 packages/nextjs/.gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nextjs/.gitignore b/packages/nextjs/.gitignore
index 6985d55..16dad0e 100644
--- a/packages/nextjs/.gitignore
+++ b/packages/nextjs/.gitignore
@@ -26,6 +26,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

From ae059952a4ec269d4b1b6a7b8b5d545e414c2910 Mon Sep 17 00:00:00 2001
From: Spencer Schoeneman <spencer.schoeneman@gmail.com>
Date: Fri, 8 Dec 2023 11:24:58 -0600
Subject: [PATCH 5/5] remove .env

---
 packages/nextjs/.env | 8 --------
 1 file changed, 8 deletions(-)
 delete mode 100644 packages/nextjs/.env

diff --git a/packages/nextjs/.env b/packages/nextjs/.env
deleted file mode 100644
index d27e85a..0000000
--- a/packages/nextjs/.env
+++ /dev/null
@@ -1,8 +0,0 @@
-NEXT_PUBLIC_ALCHEMY_API_KEY=NcFZk9kYsJT0zbvxp1BvXdk9PmgJFypJ
-NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=67c39fba49c2101d141cb637137aa160
-# # Polygon Mumbai 
-NEXT_PUBLIC_FACTORY_CONTRACT_ADDRESS=0xfe44aB0B966E57F126130BE6401546c7351484ad
-# # Polygon Mumbai
-NEXT_PUBLIC_PAYROLL_CONTRACT_ADDRESS=0xAB34603b0A8c54f9F9Fe9207b98da8ac354dB68e
-NEXT_PUBLIC_LOCAL_CHAIN_ID=0 # REPLACE WITH LOCAL DEV CHAIN
-NEXT_PUBLIC_TESTNET_CHAIN_ID=80001 # Polygon Mumbaiyar
\ No newline at end of file