Test/appkit with immutable

nextjs/next-wagmi-app-router/package.json

@@ -9,8 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@reown/appkit": "1.7.2",
-    "@reown/appkit-adapter-wagmi": "1.7.2",
+    "@imtbl/sdk": "^2.1.16",
+    "@reown/appkit": "1.7.4-4aeb703fc5bc44cfc6cb34b43758eb3fbb8ab005.0",
+    "@reown/appkit-adapter-wagmi": "1.7.4-4aeb703fc5bc44cfc6cb34b43758eb3fbb8ab005.0",
     "@tanstack/react-query": "^5.59.20",
     "next": "15.1.6",
     "react": "19.0.0",

nextjs/next-wagmi-app-router/src/app/logout/page.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { useEffect } from 'react'
+import { passportInstance } from '@/config/passport'
+import { useRouter } from 'next/navigation'
+
+export default function LogoutPage() {
+  const router = useRouter()
+
+  useEffect(() => {
+    const handleLogout = async () => {
+      try {
+        await passportInstance.logout()
+        router.push('/')
+      } catch (error) {
+        console.error('Logout failed:', error)
+        router.push('/')
+      }
+    }
+
+    handleLogout()
+  }, [router])
+
+  return (
+    <div className="pages">
+      <h1>Logging out...</h1>
+    </div>
+  )
+} 

nextjs/next-wagmi-app-router/src/app/redirect/page.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { useEffect } from 'react'
+import { passportInstance } from '@/config/passport'
+import { useRouter } from 'next/navigation'
+
+export default function RedirectPage() {
+  const router = useRouter()
+
+  useEffect(() => {
+    const handleCallback = async () => {
+      try {
+        await passportInstance.loginCallback()
+        router.push('/')
+      } catch (error) {
+        console.error('Login callback failed:', error)
+        router.push('/')
+      }
+    }
+
+    handleCallback()
+  }, [router])
+
+  return (
+    <div className="pages">
+      <h1>Completing login...</h1>
+    </div>
+  )
+} 

nextjs/next-wagmi-app-router/src/config/index.ts

@@ -1,16 +1,23 @@
-import { cookieStorage, createStorage } from 'wagmi'
+import { cookieStorage, createStorage  } from 'wagmi'
 import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
-import { mainnet, arbitrum } from '@reown/appkit/networks'
+import { immutableZkEvmTestnet } from '@reown/appkit/networks'
 import type { AppKitNetwork } from '@reown/appkit/networks'
 
+
 // Get projectId from https://cloud.reown.com
 export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID || "b56e18d47c72ab683b10814fe9495694" // this is a public projectId only to use on localhost
 
 if (!projectId) {
   throw new Error('Project ID is not defined')
 }
 
-export const networks = [mainnet, arbitrum] as [AppKitNetwork, ...AppKitNetwork[]]
+export const networks = [immutableZkEvmTestnet] as [AppKitNetwork, ...AppKitNetwork[]]
+
+
+// create the connectors (delete the ones you don't need)
+/* const connectors: CreateConnectorFn[] = []
+  connectors.push(walletConnect({ projectId, metadata, showQrModal: false })) // showQrModal must be false
+) */
 
 //Set up the Wagmi Adapter (Config)
 export const wagmiAdapter = new WagmiAdapter({

nextjs/next-wagmi-app-router/src/config/passport.ts

@@ -0,0 +1,20 @@
+import { config, passport } from '@imtbl/sdk';
+
+const publishableKey = process.env.NEXT_PUBLIC_PUBLISHABLE_KEY || '';
+const clientId = process.env.NEXT_PUBLIC_CLIENT_ID || '';
+// create the Passport instance and export it so it can be used in the examples
+export const passportInstance = new passport.Passport({
+  baseConfig: {
+    environment: config.Environment.SANDBOX,
+    publishableKey
+  },
+  clientId,
+  redirectUri: 'http://localhost:3000/redirect', // replace with one of your redirect URIs from Hub
+  logoutRedirectUri: 'http://localhost:3000/logout', // replace with one of your logout URIs from Hub
+  audience: 'platform_api',
+  scope: 'openid offline_access email transact',
+  popupOverlayOptions: {
+    disableGenericPopupOverlay: false, // Set to true to disable the generic pop-up overlay
+    disableBlockedPopupOverlay: false, // Set to true to disable the blocked pop-up overlay
+  },
+});

nextjs/next-wagmi-app-router/src/context/index.tsx

@@ -3,8 +3,10 @@
 import { wagmiAdapter, projectId, networks } from '@/config'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { createAppKit } from '@reown/appkit/react'
-import React, { type ReactNode } from 'react'
+import React, { useEffect, type ReactNode } from 'react'
 import { cookieToInitialState, WagmiProvider, type Config } from 'wagmi'
+import { passportInstance } from '../config/passport';
+
 
 // Set up queryClient
 const queryClient = new QueryClient()
@@ -17,6 +19,8 @@ const metadata = {
   icons: ['https://avatars.githubusercontent.com/u/179229932']
 }
 
+
+
 // Create the modal
 export const modal = createAppKit({
   adapters: [wagmiAdapter],
@@ -33,6 +37,15 @@ export const modal = createAppKit({
 })
 
 function ContextProvider({ children, cookies }: { children: ReactNode; cookies: string | null }) {
+  useEffect(() => {
+    const init = async () => {
+
+    // calling connectEVM() makes Passport available as an option to Wagmi
+      await passportInstance.connectEvm();
+    }
+
+    init();
+  }, []);
   const initialState = cookieToInitialState(wagmiAdapter.wagmiConfig as Config, cookies)
 
   return (