Update nextjs quick start

Author: yashovardhan

quick-starts/nextjs-quick-start/app/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import App from "../components/App";
+import App from "../components/app";
 
 export default function Home() {
   return <App />;

quick-starts/nextjs-quick-start/components/App.tsx

@@ -1,13 +1,24 @@
+// IMP START - Quick Start
 import { useWeb3AuthConnect, useWeb3AuthDisconnect, useWeb3AuthUser } from "@web3auth/modal/react";
+// IMP END - Quick Start
+// IMP START - Blockchain Calls  
 import { useAccount } from "wagmi";
 import { SendTransaction } from "./wagmi.tsx/sendTransaction";
 import { Balance } from "./wagmi.tsx/getBalance";
 import { SwitchChain } from "./wagmi.tsx/switchNetwork";
+// IMP END - Blockchain Calls
+
 function App() {
+  // IMP START - Login
   const { connect, isConnected, loading: connectLoading, error: connectError } = useWeb3AuthConnect();
+  // IMP END - Login
+  // IMP START - Logout
   const { disconnect, loading: disconnectLoading, error: disconnectError } = useWeb3AuthDisconnect();
+  // IMP END - Logout
   const { userInfo } = useWeb3AuthUser();
+  // IMP START - Blockchain Calls
   const { address, connector } = useAccount();
+  // IMP END - Blockchain Calls
 
   function uiConsole(...args: any[]): void {
     const el = document.querySelector("#console>p");
@@ -20,35 +31,43 @@ function App() {
   const loggedInView = (
     <div className="grid">
       <h2>Connected to {connector?.name}</h2>
+      {/* IMP START - Blockchain Calls */}
       <div>{address}</div>
+      {/* IMP END - Blockchain Calls */}
       <div className="flex-container">
         <div>
           <button onClick={() => uiConsole(userInfo)} className="card">
             Get User Info
           </button>
         </div>
+        {/* IMP START - Logout */}
         <div>
           <button onClick={() => disconnect()} className="card">
             Log Out
           </button>
           {disconnectLoading && <div className="loading">Disconnecting...</div>}
           {disconnectError && <div className="error">{disconnectError.message}</div>}
         </div>
+        {/* IMP END - Logout */}
       </div>
+      {/* IMP START - Blockchain Calls */}
       <SendTransaction />
       <Balance />
       <SwitchChain />
+      {/* IMP END - Blockchain Calls */}
     </div>
   );
 
   const unloggedInView = (
+    // IMP START - Login
     <div className="grid">
       <button onClick={() => connect()} className="card">
         Login
       </button>
       {connectLoading && <div className="loading">Connecting...</div>}
       {connectError && <div className="error">{connectError.message}</div>}
     </div>
+    // IMP END - Login
   );
 
   return (

quick-starts/nextjs-quick-start/components/provider.tsx

@@ -12,17 +12,20 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 // IMP START - Dashboard Registration
 const clientId = process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID || ""; // get from https://dashboard.web3auth.io
 // IMP END - Dashboard Registration
-const queryClient = new QueryClient();
 
-// IMP START - Instantiate SDK
+// IMP START - Setup Wagmi Provider
+const queryClient = new QueryClient();
+// IMP END - Setup Wagmi Provider
+ 
+// IMP START - Config
 const web3AuthContextConfig: Web3AuthContextConfig = {
     web3AuthOptions: {
       clientId,
       web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
       authBuildEnv: "testing",
     }
   };
-// IMP END - Instantiate SDK
+// IMP END - Config
 
 export default function Provider({ children }: { children: React.ReactNode }) {
     return (

quick-starts/react-quick-start/src/App.tsx

@@ -1,5 +1,8 @@
 import "./App.css";
+// IMP START - Quick Start
 import { useWeb3AuthConnect, useWeb3AuthDisconnect, useWeb3AuthUser } from "@web3auth/modal/react";
+// IMP END - Quick Start
+
 // IMP START - Blockchain Calls  
 import { useAccount } from "wagmi";
 import { SendTransaction } from "./components/sendTransaction";
@@ -48,9 +51,11 @@ function App() {
         </div>
         {/* // IMP END - Logout */}
       </div>
+      {/* IMP START - Blockchain Calls */}
       <SendTransaction />
       <Balance />
       <SwitchChain />
+      {/* IMP END - Blockchain Calls */}
     </div>
   );
 

quick-starts/react-quick-start/src/web3authContext.tsx

@@ -1,7 +1,5 @@
-// IMP START - Quick Start
 import { WEB3AUTH_NETWORK } from "@web3auth/modal";
 import { type Web3AuthContextConfig } from "@web3auth/modal/react";
-// IMP END - Quick Start
 
 // IMP START - Dashboard Registration
 const clientId = import.meta.env.VITE_WEB3AUTH_CLIENT_ID || ""; // get from https://dashboard.web3auth.io