From c987a752cfa5e6bc24c0f66c4fed3e723bd8164c Mon Sep 17 00:00:00 2001 From: "Craig M." Date: Thu, 25 Jul 2024 14:59:41 +1200 Subject: [PATCH] Exc 21 passport wallets examples (#2007) --- .../src/app/connect-with-wagmi/account.tsx | 4 +-- .../src/app/connect-with-wagmi/config.ts | 12 +++++++ .../src/app/connect-with-wagmi/connect.tsx | 11 +++++++ .../src/app/connect-with-wagmi/page.tsx | 32 ++----------------- .../app/connect-with-wagmi/wallet-options.tsx | 13 +++----- .../wallets-with-nextjs/src/app/page.tsx | 2 -- 6 files changed, 31 insertions(+), 43 deletions(-) create mode 100644 examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/config.ts create mode 100644 examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/connect.tsx diff --git a/examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/account.tsx b/examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/account.tsx index bb7290b22a..22cdddba59 100644 --- a/examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/account.tsx +++ b/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(false); - // #doc passport-wallets-nextjs-connect-wagmi-disconnect const passportLogout = async () => { // disable button while loading setLoadingState(true) @@ -32,5 +31,4 @@ export function Account() { } ) - // #enddoc passport-wallets-nextjs-connect-wagmi-disconnect } \ No newline at end of file diff --git a/examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/config.ts b/examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/config.ts new file mode 100644 index 0000000000..b45d4381b8 --- /dev/null +++ b/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(), + }, + }); diff --git a/examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/connect.tsx b/examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/connect.tsx new file mode 100644 index 0000000000..032825ae9b --- /dev/null +++ b/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 + return +} diff --git a/examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/page.tsx b/examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/page.tsx index 3ed60ae326..edf650a21b 100644 --- a/examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/page.tsx +++ b/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 - return -} -// #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() {

); } -// #enddoc passport-wallets-nextjs-connect-wagmi-provider diff --git a/examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/wallet-options.tsx b/examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/wallet-options.tsx index 3f450787c7..14d6c74947 100644 --- a/examples/passport/wallets-with-nextjs/src/app/connect-with-wagmi/wallet-options.tsx +++ b/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([]) // setup the loading state to enable/disable buttons when loading const [loading, setLoadingState] = useState(true); - - // setup the filtered connectors state - const [filteredConnectors, setFilteredConnectors] = useState([]) 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 &&

Loading...

} ) - // #enddoc passport-wallets-nextjs-connect-wagmi-connect } \ No newline at end of file diff --git a/examples/passport/wallets-with-nextjs/src/app/page.tsx b/examples/passport/wallets-with-nextjs/src/app/page.tsx index c75d5e6be6..8739ca3d48 100644 --- a/examples/passport/wallets-with-nextjs/src/app/page.tsx +++ b/examples/passport/wallets-with-nextjs/src/app/page.tsx @@ -1,5 +1,3 @@ -'use client'; - export default function Home() { return (<>