Merge pull request #2 from ChanX21/feat/integrate-web3auth

Integrated Web3Auth with the Rainbow Kit SDK inside scaffold ETH
ChanX21 · Aug 27, 2024 · 92a0268 · 92a0268
2 parents f35e5e3 + e2aeb0b
commit 92a0268
Show file tree

Hide file tree

Showing 9 changed files with 29,085 additions and 139 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/nextjs/app/blockexplorer/address/[address]/page.tsx b/packages/nextjs/app/blockexplorer/address/[address]/page.tsx
@@ -1,4 +1,3 @@
-
 import fs from "fs";
 import path from "path";
 import { hardhat } from "viem/chains";
@@ -92,4 +91,4 @@ const AddressPage = async ({ params }: PageProps) => {
   return <AddressComponent address={address} contractData={contractData} />;
 };
 
-export default AddressPage;
+export default AddressPage;
diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx
@@ -1,4 +1,3 @@
-
 import "@coinbase/onchainkit/styles.css";
 import "@rainbow-me/rainbowkit/styles.css";
 import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
@@ -23,4 +22,4 @@ const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
-export default ScaffoldEthApp;
+export default ScaffoldEthApp;
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -5,9 +5,9 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
+import { RectangleGroupIcon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
-import { RectangleGroupIcon } from "@heroicons/react/24/outline";
 
 type HeaderMenuLink = {
   label: string;
@@ -26,10 +26,10 @@ export const menuLinks: HeaderMenuLink[] = [
     icon: <BugAntIcon className="h-4 w-4" />,
   },
   {
-  label: "OnchainKit examples",
-  href: "/onchainkit-examples",
-  icon: <RectangleGroupIcon className="h-4 w-4" />,
-}
+    label: "OnchainKit examples",
+    href: "/onchainkit-examples",
+    icon: <RectangleGroupIcon className="h-4 w-4" />,
+  },
 ];
 
 export const HeaderMenuLinks = () => {
@@ -113,4 +113,4 @@ export const Header = () => {
       </div>
     </div>
   );
-};
+};
diff --git a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx b/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { OnchainKitScaffoldProvider } from "./OnchainKitScaffoldProvider";
 import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useTheme } from "next-themes";
@@ -12,7 +13,6 @@ import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { ProgressBar } from "~~/components/scaffold-eth/ProgressBar";
 import { useInitializeNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
 import { wagmiConfig } from "~~/services/web3/wagmiConfig";
-import { OnchainKitScaffoldProvider } from "./OnchainKitScaffoldProvider";
 
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   useInitializeNativeCurrencyPrice();
@@ -37,8 +37,6 @@ export const queryClient = new QueryClient({
   },
 });
 
-
-
 export const ScaffoldEthAppWithProviders = ({ children }: { children: React.ReactNode }) => {
   const { resolvedTheme } = useTheme();
   const isDarkMode = resolvedTheme === "dark";
@@ -56,11 +54,11 @@ export const ScaffoldEthAppWithProviders = ({ children }: { children: React.Reac
           avatar={BlockieAvatar}
           theme={mounted ? (isDarkMode ? darkTheme() : lightTheme()) : lightTheme()}
         >
-          <OnchainKitScaffoldProvider >
-          <ScaffoldEthApp>{children}</ScaffoldEthApp>
+          <OnchainKitScaffoldProvider>
+            <ScaffoldEthApp>{children}</ScaffoldEthApp>
           </OnchainKitScaffoldProvider>
         </RainbowKitProvider>
       </QueryClientProvider>
     </WagmiProvider>
   );
-};
+};
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
@@ -16,13 +16,19 @@
   "dependencies": {
     "@coinbase/onchainkit": "^0.26.3",
     "@heroicons/react": "~2.0.11",
-    "@rainbow-me/rainbowkit": "2.1.2",
+    "@rainbow-me/rainbowkit": "^2.1.5",
     "@tanstack/react-query": "^5.29.0",
     "@uniswap/sdk-core": "~4.0.1",
     "@uniswap/v2-sdk": "~3.0.1",
+    "@web3auth/base": "^8.12.4",
+    "@web3auth/ethereum-provider": "^8.12.4",
+    "@web3auth/modal": "^8.12.6",
+    "@web3auth/openlogin-adapter": "^8.12.4",
+    "@web3auth/web3auth-wagmi-connector": "^6.0.0",
     "blo": "~1.0.1",
     "burner-connector": "~0.0.8",
     "daisyui": "4.5.0",
+    "ethers": "^6.13.2",
     "next": "~14.0.4",
     "next-themes": "~0.2.1",
     "nprogress": "~0.2.0",
@@ -33,8 +39,9 @@
     "react-hot-toast": "~2.4.0",
     "use-debounce": "~8.0.4",
     "usehooks-ts": "2.13.0",
-    "viem": "^2.17.5",
+    "viem": "^2.8.16",
     "wagmi": "^2.11.2",
+    "web3": "^4.11.1",
     "zustand": "~4.1.2"
   },
   "devDependencies": {

diff --git a/packages/nextjs/services/web3/RainbowWeb3authConnector.tsx b/packages/nextjs/services/web3/RainbowWeb3authConnector.tsx
@@ -0,0 +1,48 @@
+import { Wallet, WalletDetailsParams } from "@rainbow-me/rainbowkit";
+import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from "@web3auth/base";
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+import { Web3Auth } from "@web3auth/modal";
+import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
+import { createConnector as createWagmiConnector } from "wagmi";
+
+const clientId = "BCWDe7_V6ITJzkvM_FTvM6P5t_xoEVpWzTuSnlCEDIEkeIeEWh9e4Hczzwpz4I1hciWCL2YC2CTRJ2vPEvjX1Cw"; // get from https://dashboard.web3auth.io
+
+const chainConfig = {
+  chainNamespace: CHAIN_NAMESPACES.EIP155,
+  chainId: "0xaa36a7",
+  rpcTarget: "https://rpc.ankr.com/eth_sepolia",
+  // Avoid using public rpcTarget in production.
+  // Use services like Infura, Quicknode etc
+  displayName: "Ethereum Sepolia Testnet",
+  blockExplorerUrl: "https://sepolia.etherscan.io",
+  ticker: "ETH",
+  tickerName: "Ethereum",
+  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+};
+
+const privateKeyProvider = new EthereumPrivateKeyProvider({
+  config: { chainConfig },
+});
+
+const web3AuthInstance = new Web3Auth({
+  clientId,
+  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
+  privateKeyProvider,
+});
+
+export const rainbowWeb3AuthConnector = (): Wallet => ({
+  id: "web3auth",
+  name: "web3auth",
+  rdns: "web3auth",
+  iconUrl: "https://web3auth.io/images/web3authlog.png",
+  iconBackground: "#fff",
+  installed: true,
+  downloadUrls: {},
+  createConnector: (walletDetails: WalletDetailsParams) =>
+    createWagmiConnector(config => ({
+      ...Web3AuthConnector({
+        web3AuthInstance,
+      })(config),
+      ...walletDetails,
+    })),
+});
diff --git a/packages/nextjs/services/web3/wagmiConnectors.tsx b/packages/nextjs/services/web3/wagmiConnectors.tsx
@@ -1,3 +1,4 @@
+import { rainbowWeb3AuthConnector } from "./RainbowWeb3authConnector";
 import { connectorsForWallets } from "@rainbow-me/rainbowkit";
 import {
   coinbaseWallet,
@@ -14,12 +15,14 @@ import scaffoldConfig from "~~/scaffold.config";
 const { onlyLocalBurnerWallet, targetNetworks } = scaffoldConfig;
 
 const wallets = [
+  rainbowWeb3AuthConnector,
   metaMaskWallet,
   walletConnectWallet,
   ledgerWallet,
   coinbaseWallet,
   rainbowWallet,
   safeWallet,
+
   ...(!targetNetworks.some(network => network.id !== (chains.hardhat as chains.Chain).id) || !onlyLocalBurnerWallet
     ? [rainbowkitBurnerWallet]
     : []),