Exc 21 passport wallets examples (#2007)

examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/account.tsx

@@ -1,6 +1,6 @@
 import { useAccount, useDisconnect, useEnsAvatar, useEnsName } from 'wagmi'
 import { passportInstance } from '../utils';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 export function Account() {
   const { address } = useAccount()
@@ -11,7 +11,6 @@ export function Account() {
   // setup the loading state to enable/disable buttons when loading
   const [loading, setLoadingState] = useState<boolean>(false);
 
-  // #doc passport-wallets-nextjs-connect-wagmi-disconnect
   const passportLogout = async () => {
     // disable button while loading
     setLoadingState(true)
@@ -32,5 +31,4 @@ export function Account() {
       }
     </div>
   )
-  // #enddoc passport-wallets-nextjs-connect-wagmi-disconnect
 }

examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/config.ts

@@ -0,0 +1,12 @@
+import { createConfig, http } from "wagmi";
+import { immutableZkEvmTestnet } from "wagmi/chains";
+import { injected } from "wagmi/connectors";
+
+// create the Wagmi config for Immutable zkEVM Testnet
+export const config = createConfig({
+    chains: [immutableZkEvmTestnet],
+    connectors: [injected()],
+    transports: {
+      [immutableZkEvmTestnet.id]: http(),
+    },
+  });

examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/connect.tsx

@@ -0,0 +1,11 @@
+import { useAccount } from "wagmi"
+import { WalletOptions } from './wallet-options';
+import { Account } from './account';
+
+// show wallet options for login or the logged in account details
+// depending on whether the account is connected or not
+export function ConnectWallet() {
+    const { isConnected } = useAccount()
+    if (isConnected) return <Account />
+    return <WalletOptions />
+}

examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/page.tsx

@@ -1,35 +1,10 @@
 'use client';
-
-import { http, createConfig, WagmiProvider, useAccount } from 'wagmi';
+import { WagmiProvider } from 'wagmi';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { immutableZkEvmTestnet } from 'wagmi/chains';
-import { WalletOptions } from './wallet-options';
-import { Account } from './account';
-import { injected } from 'wagmi/connectors';
 import { passportInstance } from '../utils';
+import { config } from './config';
+import { ConnectWallet } from './connect';
 
-// #doc passport-wallets-nextjs-connect-wagmi-config
-// create the Wagmi config for Immutable zkEVM Testnet
-export const config = createConfig({
-  chains: [immutableZkEvmTestnet],
-  connectors: [injected()],
-  transports: {
-    [immutableZkEvmTestnet.id]: http(),
-  },
-});
-// #enddoc passport-wallets-nextjs-connect-wagmi-config
-
-// #doc passport-wallets-nextjs-connect-wagmi-connect-component
-// show wallet options for login or the logged in account details
-// depending on whether the account is connected or not
-function ConnectWallet() {
-  const { isConnected } = useAccount()
-  if (isConnected) return <Account />
-  return <WalletOptions />
-}
-// #enddoc passport-wallets-nextjs-connect-wagmi-connect-component
-
-// #doc passport-wallets-nextjs-connect-wagmi-provider
 // initialise the QueryClient for the Provider
 const queryClient = new QueryClient()
 
@@ -52,4 +27,3 @@ export default function ConnectWithWagmi() {
     </p>
   </>);
 }
-// #enddoc passport-wallets-nextjs-connect-wagmi-provider

examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/wallet-options.tsx

@@ -1,28 +1,24 @@
 import { useState, useEffect } from 'react'
 import { Connector, useConnect } from 'wagmi'
-
 export function WalletOptions() {
 
   // get the available connectors and the connect function from Wagmi
   const { connectors, connect } = useConnect()
+
+  // setup the filtered connectors state
+  const [filteredConnectors, setFilteredConnectors] = useState<Connector[]>([])
 
   // setup the loading state to enable/disable buttons when loading
   const [loading, setLoadingState] = useState<boolean>(true);
-
-  // setup the filtered connectors state
-  const [filteredConnectors, setFilteredConnectors] = useState<Connector[]>([])
 
   useEffect(() => {
     if (!connectors) return
-    // #doc passport-wallets-nextjs-connect-wagmi-filter
-    //filter the connects to show only Passport
+    //filter the available connectors to show only Passport
     setFilteredConnectors(connectors.filter((connector) => connector.name.includes('Immutable Passport')))
-    // #enddoc passport-wallets-nextjs-connect-wagmi-filter
     // enable button when loading has finished
     setLoadingState(false)
   }, [connectors])
 
-  // #doc passport-wallets-nextjs-connect-wagmi-connect
   function passportLogin(connector:Connector) {
     // disable button while loading
     setLoadingState(true)
@@ -39,6 +35,5 @@ export function WalletOptions() {
     ))}
     {loading && <p>Loading...</p>}
   </>)
-  // #enddoc passport-wallets-nextjs-connect-wagmi-connect
 
 }

examples/passport/wallets-with-nextjs/src/app/page.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 export default function Home() {
 
   return (<>