Configuration, wallet instance and more

packages/nextjs/.env.example

@@ -9,6 +9,14 @@
 # To access the values stored in this env file you can use: process.env.VARIABLENAME
 # You'll need to prefix the variables names with NEXT_PUBLIC_ if you want to access them on the client side.
 # More info: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
+PUBLIC_KEY=
+PRIVATE_KEY=
+NEXTAUTH_SECRET=
+NEXT_PUBLIC_DOMAIN=
+NEXT_PUBLIC_SIWE_URI=
+NEXT_PUBLIC_VERIFIER=
 NEXT_PUBLIC_ALCHEMY_API_KEY=
+NEXT_PUBLIC_GOOGLE_CLIENT_ID=
+NEXT_PUBLIC_WEB3AUTH_CLIENT_ID=
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
 

packages/nextjs/.gitignore

@@ -13,6 +13,8 @@
 /out/
 .vercel
 
+jwks.json
+
 # production
 /build
 

packages/nextjs/components/Footer.tsx

@@ -43,38 +43,6 @@ export const Footer = () => {
           <SwitchTheme className={`pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} />
         </div>
       </div>
-      <div className="w-full">
-        <ul className="menu menu-horizontal w-full">
-          <div className="flex justify-center items-center gap-2 text-sm w-full">
-            <div className="text-center">
-              <a href="https://github.com/scaffold-eth/se-2" target="_blank" rel="noreferrer" className="link">
-                Fork me
-              </a>
-            </div>
-            <span>·</span>
-            <div className="flex justify-center items-center gap-2">
-              <p className="m-0 text-center">
-                Built with <HeartIcon className="inline-block h-4 w-4" /> at
-              </p>
-              <a
-                className="flex justify-center items-center gap-1"
-                href="https://buidlguidl.com/"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <BuidlGuidlLogo className="w-3 h-5 pb-1" />
-                <span className="link">BuidlGuidl</span>
-              </a>
-            </div>
-            <span>·</span>
-            <div className="text-center">
-              <a href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA" target="_blank" rel="noreferrer" className="link">
-                Support
-              </a>
-            </div>
-          </div>
-        </ul>
-      </div>
     </div>
   );
 };

packages/nextjs/components/Notify.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { notification } from "~~/utils/scaffold-eth";
+
+/**
+ * Custom notification content for TXs.
+ */
+const TxnNotification = ({ message, blockExplorerLink }: { message: string; blockExplorerLink?: string }) => {
+  return (
+    <div className="flex flex-col ml-1 cursor-default">
+      <p className="my-0">{message}</p>
+      {blockExplorerLink && blockExplorerLink.length > 0 ? (
+        <a href={blockExplorerLink} target="_blank" rel="noreferrer" className="block link text-md">
+          Check out transaction
+        </a>
+      ) : null}
+    </div>
+  );
+};
+
+/**
+ * Function to trigger a transaction notification.
+ */
+export const showTxnNotification = (message: string, blockExplorerLink?: string) => {
+  notification.info(<TxnNotification message={message} blockExplorerLink={blockExplorerLink} />, {
+    position: "top-right",
+    duration: 10000,
+  });
+};

packages/nextjs/helpers/config.ts

@@ -0,0 +1,41 @@
+import { CHAIN_NAMESPACES } from "@web3auth/base";
+import { SubVerifierDetailsParams } from "@web3auth/mpc-core-kit";
+
+export const config = {
+  relay: "https://relay.farcaster.xyz",
+  rpcUrl: "https://mainnet.optimism.io",
+  siweUri: "http://localhost:3000/",
+  domain: "localhost:3000",
+};
+
+export const ALCHEMY_API = process.env.NEXT_PUBLIC_ALCHEMY_API_KEY;
+export const verifier = process.env.NEXT_PUBLIC_VERIFIER;
+
+
+export const googleVerifierConfig: SubVerifierDetailsParams = {
+  subVerifierDetails: {
+    typeOfLogin: "google",
+    verifier: "google",
+    clientId: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID as string,
+  },
+};
+
+export const chainConfig = {
+  chainNamespace: CHAIN_NAMESPACES.EIP155,
+  chainId: "0x66eee",
+  rpcTarget: `https://arb-sepolia.g.alchemy.com/v2/${ALCHEMY_API}`,
+  displayName: "Arbitrum Sepolia",
+  blockExplorerUrl: "https://sepolia.arbiscan.io",
+  ticker: "ETH",
+  tickerName: "Ethereum",
+};
+
+export const opConfig = {
+  chainNamespace: CHAIN_NAMESPACES.EIP155,
+  chainId: "0xaa37dc",
+  rpcTarget: `https://opt-sepolia.g.alchemy.com/v2/${ALCHEMY_API}`,
+  displayName: "Optimism Sepolia",
+  blockExplorerUrl: "https://sepolia-optimistic.etherscan.io/",
+  ticker: "ETH",
+  tickerName: "Ethereum",
+};

packages/nextjs/helpers/web3Auth.ts

@@ -0,0 +1,29 @@
+import { tssLib } from "@toruslabs/tss-dkls-lib";
+import { UX_MODE } from "@web3auth/base";
+import { COREKIT_STATUS, WEB3AUTH_NETWORK, Web3AuthMPCCoreKit } from "@web3auth/mpc-core-kit";
+
+const web3AuthClientId = process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string;
+
+let web3AuthInstance: Web3AuthMPCCoreKit | null = null;
+
+export const getWeb3AuthInstance = async (): Promise<Web3AuthMPCCoreKit> => {
+  if (!web3AuthInstance) {
+    web3AuthInstance = new Web3AuthMPCCoreKit({
+      web3AuthClientId,
+      web3AuthNetwork: WEB3AUTH_NETWORK.DEVNET,
+      tssLib: tssLib,
+      storage: window.localStorage,
+      baseUrl: process.env.NEXT_PUBLIC_DOMAIN || "localhost:3000",
+      uxMode: UX_MODE.REDIRECT,
+      manualSync: true,
+      enableLogging: true,
+      redirectPathName: "auth",
+    });
+
+    if (web3AuthInstance.status === COREKIT_STATUS.NOT_INITIALIZED) {
+      await web3AuthInstance.init({ handleRedirectResult: false });
+    }
+  }
+
+  return web3AuthInstance;
+};

packages/nextjs/next.config.js

@@ -14,6 +14,14 @@ const nextConfig = {
     config.externals.push("pino-pretty", "lokijs", "encoding");
     return config;
   },
+  logging: {
+    fetches: {
+      fullUrl: true,
+    },
+  },
+  images: {
+    domains: ["lh3.googleusercontent.com"],
+  },
 };
 
 module.exports = nextConfig;

packages/nextjs/package.json

@@ -15,19 +15,31 @@
     "vercel:yolo": "vercel --build-env NEXT_PUBLIC_IGNORE_BUILD_ERROR=true"
   },
   "dependencies": {
+    "@farcaster/auth-client": "^0.3.0",
+    "@farcaster/auth-kit": "^0.6.0",
     "@heroicons/react": "~2.0.11",
     "@lit-protocol/lit-node-client": "^6.4.10",
     "@rainbow-me/rainbowkit": "2.1.2",
     "@tanstack/react-query": "~5.28.6",
+    "@toruslabs/tss-dkls-lib": "^3.0.0",
     "@uniswap/sdk-core": "~4.0.1",
     "@uniswap/v2-sdk": "~3.0.1",
+    "@web3auth/base": "^8.12.4",
+    "@web3auth/ethereum-mpc-provider": "^8.12.4",
+    "@web3auth/mpc-core-kit": "^3.1.1",
+    "@web3auth/no-modal": "^8.12.4",
+    "@web3auth/openlogin-adapter": "^8.12.4",
+    "@web3auth/web3auth-wagmi-connector": "^6.0.0",
     "blo": "~1.0.1",
     "bs58": "^6.0.0",
     "burner-connector": "~0.0.8",
     "daisyui": "4.5.0",
+    "jwks-rsa": "^3.1.0",
     "next": "~14.0.4",
+    "next-auth": "^4.24.7",
     "next-themes": "~0.2.1",
     "nprogress": "~0.2.0",
+    "passport-jwt": "^4.0.1",
     "qrcode.react": "~3.1.0",
     "react": "~18.2.0",
     "react-copy-to-clipboard": "~5.1.0",
@@ -43,6 +55,7 @@
     "@trivago/prettier-plugin-sort-imports": "~4.1.1",
     "@types/node": "^17.0.45",
     "@types/nprogress": "^0",
+    "@types/passport-jwt": "^4",
     "@types/react": "^18.0.21",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@typescript-eslint/eslint-plugin": "~5.40.0",

packages/nextjs/scaffold.config.ts

@@ -10,7 +10,7 @@ export type ScaffoldConfig = {
 
 const scaffoldConfig = {
   // The networks on which your DApp is live
-  targetNetworks: [chains.foundry],
+  targetNetworks: [chains.sepolia],
 
   // The interval at which your front-end polls the RPC servers for new data
   // it has no effect if you only target the local network (default is 4000)

packages/nextjs/services/web3/wagmiConnectors.tsx

@@ -10,10 +10,12 @@ import {
 import { rainbowkitBurnerWallet } from "burner-connector";
 import * as chains from "viem/chains";
 import scaffoldConfig from "~~/scaffold.config";
+import { rainbowWeb3AuthConnector } from "./web3AuthConnector";
 
 const { onlyLocalBurnerWallet, targetNetworks } = scaffoldConfig;
 
 const wallets = [
+  () => rainbowWeb3AuthConnector(),
   metaMaskWallet,
   walletConnectWallet,
   ledgerWallet,