Using @web3react/core for wallet sign-in

client/components/AccountStatusDropdown.tsx

@@ -0,0 +1,171 @@
+import React, { useEffect, useState } from "react";
+import { useWeb3React } from "@web3-react/core";
+
+import Dropdown from "components/Dropdown";
+import ConnectButton from "@/components/ConnectButton";
+import { isCorrectNetwork, switchEthereumChain } from "utils/web3";
+
+import withWalletSelectModal from "hoc/withWalletSelectModal";
+
+import AccountStatusIndicator from "./_AccountStatusIndicator";
+import Link from "./Link";
+import useShowDelegationModalOption from "utils/useShowDelegationModalOption";
+import { useStore } from "utils/store";
+import { providers } from "ethers";
+
+interface AccountStatusDropdownProps {
+  className?: string;
+  showLogin: () => void;
+}
+
+const AccountStatusDropdown = ({
+  className,
+  showLogin,
+}: AccountStatusDropdownProps) => {
+  const { active, account, chainId, deactivate, library } = useWeb3React();
+  const [open, setOpen] = useState(false);
+  const correctNetwork = isCorrectNetwork(chainId!);
+  const resetWeb3State = useStore((state) => state.reset);
+
+  const { needToShowDelegation } = useShowDelegationModalOption();
+
+  const disconnect = () => {
+    setOpen(false);
+    deactivate();
+    // To clear state
+    delete localStorage.walletconnect;
+    localStorage.setItem("eagerConnect", "false");
+    resetWeb3State();
+  };
+
+  return (
+    <>
+      <Dropdown
+        className="dropdown"
+        content={
+          <div
+            tabIndex={0}
+            className="dropdown-content absolute top-full mt-3 right-0 bg-white p-3 md:p-4 rounded-xl border shadow-sm w-36 lg:w-full no-animation"
+          >
+            <button
+              className="btn btn-primary btn-sm rounded-btn w-full"
+              onClick={disconnect}
+            >
+              Disconnect
+            </button>
+            {needToShowDelegation && (
+              <Link
+                className="btn btn-sm rounded-btn w-full mt-2 whitespace-nowrap"
+                href="/register-vote"
+              >
+                Vote register
+              </Link>
+            )}
+          </div>
+        }
+        open={open}
+        onClose={() => setOpen(false)}
+      >
+        <a
+          className={`flex justify-center items-center clickable ${className} ${
+            open ? "open" : ""
+          }`}
+          onClick={async (e) => {
+            e.preventDefault();
+            if (!active) {
+              showLogin();
+            } else if (active && !correctNetwork) {
+              // open the dropdown to allow disconnecting, while also requesting an auto switch to mainnet
+              await switchEthereumChain();
+              setOpen(true);
+            } else {
+              setOpen(true);
+            }
+          }}
+        >
+          {/* The button id is used by StakeBoxBig to trigger connect when no wallet connected */}
+          {!active && (
+            <ConnectButton
+              id="main-dapp-nav-connect-wallet-button"
+              connect={true}
+              className="btn-nav"
+              trackSource="Account dropdown"
+            />
+          )}
+          {active && (
+            <AccountStatusIndicator
+              correctNetwork={correctNetwork}
+              account={account}
+            />
+          )}
+        </a>
+      </Dropdown>
+      <style jsx>{`
+        .dropdown-menu {
+          right: 0;
+          left: auto;
+          top: 135%;
+          border-radius: 10px;
+          box-shadow: 0 0 14px 0 rgba(24, 49, 64, 0.1);
+          border: solid 1px #cdd7e0;
+          background-color: #ffffff;
+          padding: 20px 30px 20px 20px;
+          min-width: 170px;
+        }
+        .dropdown-menu .dropdown-marble {
+          margin-right: 18px;
+        }
+        .dropdown-menu a:not(:last-child) > div {
+          margin-bottom: 10px;
+        }
+
+        .dropdown-menu a {
+          color: #183140;
+        }
+
+        .dropdown-menu a .active {
+          font-weight: bold;
+        }
+
+        .dropdown-menu a .active .dropdown-marble {
+          font-weight: bold;
+          background-color: #183140;
+        }
+
+        .account-status {
+          height: 30px;
+          min-width: 30px;
+          border-radius: 15px;
+          border: solid 1px white;
+        }
+
+        .account-status.clickable {
+          cursor: pointer;
+        }
+
+        .account-status.open {
+          background-color: #183140;
+        }
+
+        .account-status.open .address {
+          color: white;
+        }
+
+        .account-status .address {
+          font-size: 14px;
+          color: white;
+          margin-left: 10px;
+          margin-right: 19px;
+          margin-bottom: 2px;
+        }
+
+        .account-status:hover {
+          color: inherit;
+          text-decoration: none;
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default withWalletSelectModal(AccountStatusDropdown);

client/components/Address.tsx

@@ -11,29 +11,29 @@ export const Address = ({
   address: string;
   noTruncate?: Boolean;
 }) => {
-  const { rpcProvider } = useStore();
+  const { web3Provider } = useStore();
   const [addressDisplay, setAddressDisplay] = useState(
     noTruncate ? address : truncateEthAddress(address)
   );
 
   useEffect(() => {
     const loadEns = async () => {
       try {
-        const ens = await rpcProvider.lookupAddress(address);
+        const ens = await web3Provider.lookupAddress(address);
         if (ens) {
           setAddressDisplay(ens);
         }
       } catch (error) {}
     };
-    if (rpcProvider) {
+    if (web3Provider) {
       loadEns();
     }
-  }, [rpcProvider, address]);
+  }, [web3Provider, address]);
 
   let explorerPrefix;
-  if (rpcProvider?._network?.chainId === 1) {
+  if (web3Provider?._network?.chainId === 1) {
     explorerPrefix = "https://etherscan.io/";
-  } else if (rpcProvider?._network?.chainId === 5) {
+  } else if (web3Provider?._network?.chainId === 5) {
     explorerPrefix = "https://goerli.etherscan.io/";
   }
 

client/components/AdminUtils.js

@@ -1,9 +1,11 @@
 import { useMemo } from "react";
 import { useStore } from "utils/store";
 import { ZERO_ADDRESS } from "constants/index";
+import { useWeb3React } from "@web3-react/core";
 
 const AdminUtils = () => {
   const { contracts } = useStore();
+  const { library, account } = useWeb3React();
 
   const show = useMemo(() => {
     if (process.browser) {
@@ -33,7 +35,9 @@ const AdminUtils = () => {
   };
 
   const resetDelegation = async () => {
-    await contracts.OgvStaking.delegate(ZERO_ADDRESS);
+    await contracts.OgvStaking.connect(library.getSigner(account)).delegate(
+      ZERO_ADDRESS
+    );
   };
 
   const buttonClass = "px-2 py-1 my-1 border border-black rounded-md";

client/components/ConnectButton.tsx

@@ -0,0 +1,73 @@
+import React, { CSSProperties, useState, useEffect } from "react";
+import classnames from "classnames";
+//@ts-ignore
+import { fbt } from "fbt-runtime";
+import { useWeb3React } from "@web3-react/core";
+import withWalletSelectModal from "../hoc/withWalletSelectModal";
+import { walletLogin } from "../utils/account";
+import classNames from "classnames";
+
+interface ConnectButtonProps {
+  id?: string;
+  style?: CSSProperties;
+  trackSource?: string;
+  inPage?: boolean;
+  showLogin: () => void;
+}
+
+const ConnectButton = ({
+  id,
+  style,
+  trackSource,
+  inPage,
+  showLogin,
+}: //   trackSource,
+ConnectButtonProps) => {
+  const { activate, active } = useWeb3React();
+  const [userAlreadyConnectedWallet, setUserAlreadyConnectedWallet] =
+    useState(false);
+
+  const defaultClassName = classNames("", {
+    "btn btn-outline btn-sm border-[#bbc9da] text-white rounded-full text-sm capitalize font-normal hover:bg-white hover:text-secondary":
+      !inPage,
+    "btn btn-primary btn-lg rounded-full w-full h-[3.25rem] min-h-[3.25rem]":
+      inPage,
+  });
+
+  useEffect(() => {
+    if (
+      !userAlreadyConnectedWallet &&
+      localStorage.getItem("userConnectedWallet") === "true"
+    ) {
+      setUserAlreadyConnectedWallet(true);
+    }
+
+    if (!userAlreadyConnectedWallet && active) {
+      localStorage.setItem("userConnectedWallet", "true");
+    }
+  }, [active]);
+
+  return (
+    <>
+      <button
+        className={defaultClassName}
+        id={id}
+        style={style}
+        onClick={() => {
+          if (process.browser) {
+            //   analytics.track("On Connect", {
+            //     category: "general",
+            //     label: trackSource,
+            //   });
+            walletLogin(showLogin, activate);
+          }
+        }}
+      >
+        {inPage ? "Connect wallet" : "Connect"}
+        {/*fbt("Connect", "Connect button")*/}
+      </button>
+    </>
+  );
+};
+
+export default withWalletSelectModal(ConnectButton);