chore: ID-1703 - NextJS examples plus fixed Vite examples (#1901)

immutable · Jun 17, 2024 · 76196a3 · 76196a3
1 parent 8e6251a
commit 76196a3
Show file tree

Hide file tree

Showing 83 changed files with 98,247 additions and 79,010 deletions.
diff --git a/samples/apps/passport/next-connect-kit/.eslintrc.json b/samples/apps/passport/next-connect-kit/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/samples/apps/passport/next-connect-kit/.gitignore b/samples/apps/passport/next-connect-kit/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/samples/apps/passport/next-connect-kit/README.md b/samples/apps/passport/next-connect-kit/README.md
@@ -0,0 +1,34 @@
+# Next Connect Kit
+
+### Pre-requisites
+
+Install dependencies for the sample app
+
+```bash
+yarn install
+```
+
+### Running the app
+
+**Step 1**
+
+Create a Passport application on Immutable Hub by following [these simple steps](https://docs.immutable.com/docs/zkEVM/products/passport/setup)
+
+**Step 2**
+
+Update `PUBLISHABLE_KEY` and `CLIENT_ID` in `src/app/passport.ts`
+
+```typescript
+// Immutable Publishable Key (you will find it in the Immutable Hub in the `API Keys` section)
+const PUBLISHABLE_KEY = 'PUBLISHABLE_KEY';
+// Hub Publishable Key (you will find it in the `Passport` section)
+const CLIENT_ID = 'CLIENT_ID'; 
+```
+
+**Step 3**
+
+Run the Connect Kit sample app in dev mode
+
+```bash
+yarn dev
+```
diff --git a/samples/apps/passport/next-connect-kit/next.config.mjs b/samples/apps/passport/next-connect-kit/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
diff --git a/samples/apps/passport/next-connect-kit/package.json b/samples/apps/passport/next-connect-kit/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "next-wagmi",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@imtbl/sdk": "^1.35.0",
+    "@tanstack/react-query": "^5.37.1",
+    "connectkit": "^1.7.3",
+    "next": "14.2.3",
+    "react": "^18",
+    "react-dom": "^18",
+    "viem": "2.x",
+    "wagmi": "^2.9.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
+    "typescript": "^5"
+  }
+}
diff --git a/samples/apps/passport/next-connect-kit/src/app/layout.tsx b/samples/apps/passport/next-connect-kit/src/app/layout.tsx
@@ -0,0 +1,15 @@
+import { Inter } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}
diff --git a/samples/apps/passport/next-connect-kit/src/app/logout/page.tsx b/samples/apps/passport/next-connect-kit/src/app/logout/page.tsx
@@ -0,0 +1,13 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function Page() {
+  const { push } = useRouter();
+
+  useEffect(() => {
+     push('/');
+  }, [push]);
+  return <p />;
+};
diff --git a/samples/apps/passport/next-connect-kit/src/app/page.tsx b/samples/apps/passport/next-connect-kit/src/app/page.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { WagmiProvider, useDisconnect } from 'wagmi';
+import { config } from './wagmi';
+import { useEffect } from 'react';
+import { passportInstance } from './passport';
+import { Connect } from '@/components/Connect';
+import { ConnectKitProvider } from 'connectkit';
+
+const queryClient = new QueryClient();
+
+export default function App() {
+  useEffect(() => {
+    if(!passportInstance) return
+    passportInstance.connectEvm() // EIP-6963
+  }, [])
+
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <ConnectKitProvider onDisconnect={async () => {
+          const userinfo = await passportInstance.getUserInfo()
+          if (userinfo) await passportInstance.logout()
+        }}>
+          <Connect />
+        </ConnectKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}
diff --git a/samples/apps/passport/next-connect-kit/src/app/passport.ts b/samples/apps/passport/next-connect-kit/src/app/passport.ts
@@ -0,0 +1,16 @@
+import { config, passport } from '@imtbl/sdk';
+
+const PUBLISHABLE_KEY = 'PUBLISHABLE_KEY';
+const CLIENT_ID = 'CLIENT_ID';
+
+export const passportInstance = new passport.Passport({
+  baseConfig: {
+    environment: config.Environment.PRODUCTION,
+    publishableKey: PUBLISHABLE_KEY,
+  },
+  clientId: CLIENT_ID,
+  redirectUri: 'http://localhost:3000/redirect',
+  logoutRedirectUri: 'http://localhost:3000/logout',
+  audience: 'platform_api',
+  scope: 'openid offline_access email transact',
+});
diff --git a/samples/apps/passport/next-connect-kit/src/app/redirect/page.tsx b/samples/apps/passport/next-connect-kit/src/app/redirect/page.tsx
@@ -0,0 +1,8 @@
+'use client';
+
+import { passportInstance } from '../passport';
+import PassportRedirect from '@/components/PassportRedirect';
+
+export default function Page() {
+  return <PassportRedirect passportInstance={passportInstance} />
+}
diff --git a/...s/passport/vite-connect-kit/src/wagmi.tsx → ...assport/next-connect-kit/src/app/wagmi.ts b/...s/passport/vite-connect-kit/src/wagmi.tsx → ...assport/next-connect-kit/src/app/wagmi.ts
diff --git a/samples/apps/passport/next-connect-kit/src/components/Connect.tsx b/samples/apps/passport/next-connect-kit/src/components/Connect.tsx
@@ -0,0 +1,5 @@
+import { ConnectKitButton } from "connectkit";
+
+export function Connect() {
+  return <ConnectKitButton />
+};
diff --git a/samples/apps/passport/next-connect-kit/src/components/PassportRedirect.tsx b/samples/apps/passport/next-connect-kit/src/components/PassportRedirect.tsx
@@ -0,0 +1,17 @@
+import { passport } from '@imtbl/sdk'
+import { useEffect } from 'react'
+
+function PassportRedirect({
+  passportInstance
+}: { passportInstance: passport.Passport }) {
+
+  useEffect(() => {
+    passportInstance.loginCallback();
+  }, [passportInstance])
+
+  return (
+    <div>Loading...</div>
+  )
+}
+
+export default PassportRedirect
diff --git a/samples/apps/passport/next-connect-kit/tsconfig.json b/samples/apps/passport/next-connect-kit/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}