Auto connect when signed in

dapp/components/DropdownAccount.tsx

@@ -24,7 +24,7 @@ const DropdownAccount = (props: DropdownProps) => {
       <div>
         <Menu.Button
           className="font-medium rounded-lg text-sm px-3 py-1.5 
-          text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
+          text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
         >
           {ens ?? shortenAddress(props.account)}
         </Menu.Button>
@@ -66,7 +66,7 @@ const DropdownAccount = (props: DropdownProps) => {
                 </a>
               )}
             </Menu.Item>
-            <Menu.Item>
+            {/* <Menu.Item>
               {({ active }) => (
                 <a
                   className={classNames(
@@ -85,7 +85,7 @@ const DropdownAccount = (props: DropdownProps) => {
                   Logout
                 </a>
               )}
-            </Menu.Item>
+            </Menu.Item> */}
           </div>
         </Menu.Items>
       </Transition>

dapp/components/connectWalletButton.tsx

@@ -3,6 +3,7 @@ import { useEthers } from "@usedapp/core"
 import Web3Modal from "web3modal"
 import WalletConnectProvider from "@walletconnect/web3-provider"
 import { useTheme } from "next-themes"
+import { ethers } from "ethers"
 
 const ConnectWalletButton = () => {
   const { theme } = useTheme()
@@ -28,6 +29,7 @@ const ConnectWalletButton = () => {
   const [loaded, setLoaded] = useState(false)
   useEffect(() => setLoaded(true), [])
 
+  // Set up Web3modal
   const [web3Modal, setWeb3Modal] = useState<Web3Modal | undefined>(undefined)
   useEffect(() => {
     const providerOptions = {
@@ -58,16 +60,6 @@ const ConnectWalletButton = () => {
     }
   }, [loaded, theme])
 
-  // const connect = async () => {
-  //   try {
-  //     const provider = await web3Modal?.connect()
-  //     await activate(provider)
-  //     setActivateError("")
-  //   } catch (error: any) {
-  //     setActivateError(error.message)
-  //   }
-  // }
-
   const connect = useCallback(async () => {
     try {
       const provider = await web3Modal?.connect()
@@ -78,12 +70,22 @@ const ConnectWalletButton = () => {
     }
   }, [web3Modal, activate])
 
-  // useEffect(() => {
-  //   if (web3Modal && web3Modal.cachedProvider) {
-  //     console.log(web3Modal.cachedProvider)
-  //     connect()
-  //   }
-  // }, [connect, web3Modal])
+  // Set up provider if already connected
+  useEffect(() => {
+    const { ethereum } = window
+    const checkMetaMaskConnected = async () => {
+      var provider = new ethers.providers.Web3Provider(ethereum)
+      const accounts = await provider.listAccounts()
+      const connected = accounts.length > 0
+      console.log("CONNECTED", connected)
+      if (connected) {
+        activate(provider)
+      }
+    }
+    if (ethereum) {
+      checkMetaMaskConnected()
+    }
+  })
 
   if (!loaded) return null
 

dapp/components/logInBox.tsx

@@ -1,12 +1,13 @@
 import { useEthers } from "@usedapp/core"
 import { useState } from "react"
-import { motion, AnimatePresence } from "framer-motion"
+import { motion } from "framer-motion"
 
 import { ConnectWalletButton, TotpSetup, ZkPasswordSetup, CardChoice } from "./"
 
 const LogInBox = () => {
-  const { account } = useEthers()
+  const { account, library: provider } = useEthers()
   const [authType, setAuthType] = useState("")
+
   return (
     <>
       {!account ? (