Social login

.gitignore

@@ -11,3 +11,4 @@ node_modules
 .eslintcache
 .vscode/**
 .DS_Store
+packages/nextjs/.env

packages/nextjs/components/scaffold-eth/Balance.tsx

@@ -1,5 +1,5 @@
+import { useNetwork } from "wagmi";
 import { useAccountBalance } from "~~/hooks/scaffold-eth";
-import { getTargetNetwork } from "~~/utils/scaffold-eth";
 
 type TBalanceProps = {
   address?: string;
@@ -10,7 +10,7 @@ type TBalanceProps = {
  * Display (ETH & USD) balance of an ETH address.
  */
 export const Balance = ({ address, className = "" }: TBalanceProps) => {
-  const configuredNetwork = getTargetNetwork();
+  const { chain: currentNetwork } = useNetwork();
   const { balance, price, isError, isLoading, onToggleBalance, isEthBalance } = useAccountBalance(address);
 
   if (!address || isLoading || balance === null) {
@@ -41,7 +41,7 @@ export const Balance = ({ address, className = "" }: TBalanceProps) => {
         {isEthBalance ? (
           <>
             <span>{balance?.toFixed(4)}</span>
-            <span className="text-[0.8em] font-bold ml-1">{configuredNetwork.nativeCurrency.symbol}</span>
+            <span className="text-[0.8em] font-bold ml-1">{currentNetwork?.nativeCurrency.symbol}</span>
           </>
         ) : (
           <>

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx

@@ -1,39 +1,34 @@
-import { useState } from "react";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { QRCodeSVG } from "qrcode.react";
-import CopyToClipboard from "react-copy-to-clipboard";
-import { useDisconnect, useSwitchNetwork } from "wagmi";
+import { useDisconnect, useNetwork, useSwitchNetwork } from "wagmi";
+import * as chains from "wagmi/chains";
 import {
   ArrowLeftOnRectangleIcon,
-  ArrowTopRightOnSquareIcon,
   ArrowsRightLeftIcon,
-  CheckCircleIcon,
   ChevronDownIcon,
-  DocumentDuplicateIcon,
   QrCodeIcon,
 } from "@heroicons/react/24/outline";
 import { Address, Balance, BlockieAvatar } from "~~/components/scaffold-eth";
-import { useAutoConnect, useNetworkColor } from "~~/hooks/scaffold-eth";
-import { getBlockExplorerAddressLink, getTargetNetwork } from "~~/utils/scaffold-eth";
+import { useNetworkColor } from "~~/hooks/scaffold-eth";
+import { getTargetNetwork } from "~~/utils/scaffold-eth";
 
 /**
  * Custom Wagmi Connect Button (watch balance + custom design)
  */
 export const RainbowKitCustomConnectButton = () => {
-  useAutoConnect();
   const networkColor = useNetworkColor();
   const configuredNetwork = getTargetNetwork();
   const { disconnect } = useDisconnect();
-  const { switchNetwork } = useSwitchNetwork();
-  const [addressCopied, setAddressCopied] = useState(false);
+  const { chain: connectedChain } = useNetwork();
 
+  const { switchNetwork } = useSwitchNetwork({
+    throwForSwitchChainNotSupported: true,
+    chainId: configuredNetwork.id === chains.polygonMumbai.id ? chains.sepolia.id : chains.polygonMumbai.id,
+  });
   return (
     <ConnectButton.Custom>
       {({ account, chain, openConnectModal, mounted }) => {
         const connected = mounted && account && chain;
-        const blockExplorerAddressLink = account
-          ? getBlockExplorerAddressLink(getTargetNetwork(), account.address)
-          : undefined;
 
         return (
           <>
@@ -46,49 +41,12 @@ export const RainbowKitCustomConnectButton = () => {
                 );
               }
 
-              if (chain.unsupported || chain.id !== configuredNetwork.id) {
-                return (
-                  <div className="dropdown dropdown-end">
-                    <label tabIndex={0} className="btn btn-error btn-sm dropdown-toggle gap-1">
-                      <span>Wrong network</span>
-                      <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
-                    </label>
-                    <ul
-                      tabIndex={0}
-                      className="dropdown-content menu p-2 mt-1 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
-                    >
-                      <li>
-                        <button
-                          className="btn-sm !rounded-xl flex py-3 gap-3"
-                          type="button"
-                          onClick={() => switchNetwork?.(configuredNetwork.id)}
-                        >
-                          <ArrowsRightLeftIcon className="h-6 w-4 ml-2 sm:ml-0" />
-                          <span className="whitespace-nowrap">
-                            Switch to <span style={{ color: networkColor }}>{configuredNetwork.name}</span>
-                          </span>
-                        </button>
-                      </li>
-                      <li>
-                        <button
-                          className="menu-item text-error btn-sm !rounded-xl flex gap-3 py-3"
-                          type="button"
-                          onClick={() => disconnect()}
-                        >
-                          <ArrowLeftOnRectangleIcon className="h-6 w-4 ml-2 sm:ml-0" /> <span>Disconnect</span>
-                        </button>
-                      </li>
-                    </ul>
-                  </div>
-                );
-              }
-
               return (
                 <div className="px-2 flex justify-end items-center">
                   <div className="flex flex-col items-center mr-1">
                     <Balance address={account.address} className="min-h-0 h-auto" />
                     <span className="text-xs" style={{ color: networkColor }}>
-                      {chain.name}
+                      {connectedChain?.name}
                     </span>
                   </div>
                   <div className="dropdown dropdown-end leading-3">
@@ -104,52 +62,31 @@ export const RainbowKitCustomConnectButton = () => {
                       tabIndex={0}
                       className="dropdown-content menu z-[2] p-2 mt-2 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
                     >
-                      <li>
-                        {addressCopied ? (
-                          <div className="btn-sm !rounded-xl flex gap-3 py-3">
-                            <CheckCircleIcon
-                              className="text-xl font-normal h-6 w-4 cursor-pointer ml-2 sm:ml-0"
-                              aria-hidden="true"
-                            />
-                            <span className=" whitespace-nowrap">Copy address</span>
-                          </div>
-                        ) : (
-                          <CopyToClipboard
-                            text={account.address}
-                            onCopy={() => {
-                              setAddressCopied(true);
-                              setTimeout(() => {
-                                setAddressCopied(false);
-                              }, 800);
-                            }}
-                          >
-                            <div className="btn-sm !rounded-xl flex gap-3 py-3">
-                              <DocumentDuplicateIcon
-                                className="text-xl font-normal h-6 w-4 cursor-pointer ml-2 sm:ml-0"
-                                aria-hidden="true"
-                              />
-                              <span className=" whitespace-nowrap">Copy address</span>
-                            </div>
-                          </CopyToClipboard>
-                        )}
-                      </li>
                       <li>
                         <label htmlFor="qrcode-modal" className="btn-sm !rounded-xl flex gap-3 py-3">
                           <QrCodeIcon className="h-6 w-4 ml-2 sm:ml-0" />
                           <span className="whitespace-nowrap">View QR Code</span>
                         </label>
                       </li>
                       <li>
-                        <button className="menu-item btn-sm !rounded-xl flex gap-3 py-3" type="button">
-                          <ArrowTopRightOnSquareIcon className="h-6 w-4 ml-2 sm:ml-0" />
-                          <a
-                            target="_blank"
-                            href={blockExplorerAddressLink}
-                            rel="noopener noreferrer"
-                            className="whitespace-nowrap"
-                          >
-                            View on Block Explorer
-                          </a>
+                        <button
+                          className="btn-sm !rounded-xl flex py-3 gap-3"
+                          type="button"
+                          onClick={() =>
+                            chain.id === chains.polygonMumbai.id
+                              ? switchNetwork?.(chains.sepolia.id)
+                              : switchNetwork?.(chains.polygonMumbai.id)
+                          }
+                        >
+                          <ArrowsRightLeftIcon className="h-6 w-4 ml-2 sm:ml-0" />
+                          <span className="whitespace-nowrap">
+                            Switch to{" "}
+                            <span style={{ color: networkColor }}>
+                              {connectedChain?.id === chains.polygonMumbai.id
+                                ? chains.sepolia.name
+                                : chains.polygonMumbai.name}
+                            </span>
+                          </span>
                         </button>
                       </li>
                       <li>

packages/nextjs/package.json

@@ -19,6 +19,10 @@
     "@rainbow-me/rainbowkit": "1.1.2",
     "@uniswap/sdk-core": "^4.0.1",
     "@uniswap/v2-sdk": "^3.0.1",
+    "@web3auth/ethereum-provider": "^7.1.1",
+    "@web3auth/no-modal": "^7.1.1",
+    "@web3auth/openlogin-adapter": "^7.1.1",
+    "@web3auth/web3auth-wagmi-connector": "^5.0.1",
     "blo": "^1.0.1",
     "daisyui": "^3.5.1",
     "next": "^13.1.6",

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.sepolia,
 
   // The interval at which your front-end polls the RPC servers for new data
   // it has no effect on the local network

packages/nextjs/services/web3/rainbowWeb3AuthConnector.tsx

@@ -0,0 +1,75 @@
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+import { Web3AuthNoModal } from "@web3auth/no-modal";
+import { OPENLOGIN_NETWORK, OpenloginAdapter } from "@web3auth/openlogin-adapter";
+import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
+import { Chain } from "viem";
+import * as wagmiChains from "wagmi/chains";
+
+const name = "Login with Google";
+const iconUrl =
+  "https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-google-icon-logo-png-transparent-svg-vector-bie-supply-14.png";
+
+type ChainConfig = {
+  chainNamespace: string | any;
+  chainId: string;
+  rpcTarget: string;
+  displayName: string;
+  blockExplorer: string;
+  ticker: string;
+  tickerName: string;
+};
+
+export const rainbowWeb3AuthConnector = ({ chains }: { chains: Chain[] }) => {
+  // Create Web3Auth Instance
+
+  const CLIENT_ID = process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID;
+  const chainConfig: ChainConfig = {
+    chainNamespace: "eip155",
+    chainId: "0x13881",
+    rpcTarget: "https://rpc.ankr.com/polygon_mumbai",
+    // Avoid using public rpcTarget in production.
+    // Use services like Infura, Quicknode etc
+    displayName: "Polygon Mumbai",
+    blockExplorer: "https://mumbai.polygonscan.com/",
+    ticker: "MATIC",
+    tickerName: "MATIC",
+  };
+
+  const web3AuthInstance = new Web3AuthNoModal({
+    clientId: CLIENT_ID as string,
+    chainConfig: chainConfig as ChainConfig,
+    web3AuthNetwork: OPENLOGIN_NETWORK.SAPPHIRE_DEVNET,
+  });
+
+  // Add openlogin adapter for customisations
+  const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
+  const openloginAdapterInstance = new OpenloginAdapter({
+    privateKeyProvider,
+  });
+  web3AuthInstance.configureAdapter(openloginAdapterInstance);
+
+  const connector = new Web3AuthConnector({
+    chains,
+    options: {
+      web3AuthInstance,
+      loginParams: {
+        loginProvider: "google",
+      },
+      modalConfig: {
+        chains: [wagmiChains.polygonMumbai, wagmiChains.sepolia],
+      },
+    },
+  });
+
+  return {
+    id: "web3auth",
+    name,
+    iconUrl,
+    iconBackground: "#fff",
+    createConnector: () => {
+      return {
+        connector,
+      };
+    },
+  };
+};

packages/nextjs/services/web3/wagmiConnectors.tsx

@@ -1,3 +1,4 @@
+import { rainbowWeb3AuthConnector } from "./rainbowWeb3AuthConnector";
 import { connectorsForWallets } from "@rainbow-me/rainbowkit";
 import {
   braveWallet,
@@ -8,8 +9,8 @@ import {
   safeWallet,
   walletConnectWallet,
 } from "@rainbow-me/rainbowkit/wallets";
-import * as chains from "viem/chains";
 import { configureChains } from "wagmi";
+import * as chains from "wagmi/chains";
 import { alchemyProvider } from "wagmi/providers/alchemy";
 import { publicProvider } from "wagmi/providers/public";
 import scaffoldConfig from "~~/scaffold.config";
@@ -20,7 +21,7 @@ const configuredNetwork = getTargetNetwork();
 const { onlyLocalBurnerWallet } = scaffoldConfig;
 
 // We always want to have mainnet enabled (ENS resolution, ETH price, etc). But only once.
-const enabledChains = configuredNetwork.id === 1 ? [configuredNetwork] : [configuredNetwork, chains.mainnet];
+const enabledChains = [chains.polygonMumbai, chains.sepolia];
 
 /**
  * Chains for the app
@@ -57,6 +58,7 @@ const wallets = [
     ? [burnerWalletConfig({ chains: [appChains.chains[0]] })]
     : []),
   safeWallet({ ...walletsOptions, debug: false, allowedDomains: [/gnosis-safe.io$/, /app.safe.global$/] }),
+  rainbowWeb3AuthConnector({ chains: enabledChains }),
 ];
 
 /**