:feat add passport react context and hooks

examples/passport/identity-with-nextjs/src/app/logout/page.tsx

@@ -12,6 +12,15 @@ export default function Logout() {
         >
           Return to examples
         </a>
+        <b> OR </b>
+        <a
+          className="underline"
+          href="/use-context"
+        >
+          Return to examples using
+          {' '}
+          <pre>passport.ZkEvmReactProvider</pre>
+        </a>
       </div>
     </div>
   );

examples/passport/identity-with-nextjs/src/app/use-context/layout.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { PassportProvider } from '@/context/passport2';
+import { ReactNode } from 'react';
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>) {
+  return (
+    <PassportProvider>{children}</PassportProvider>
+  );
+}

examples/passport/identity-with-nextjs/src/app/use-context/page.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { passport, reactPassport } from '@imtbl/sdk';
+import { useState } from 'react';
+
+export default function Page() {
+  const {
+    login, logout, isLoading, isLoggedIn, getAccessToken, getIdToken, getAccounts, getLinkedAddresses, getProfile,
+  } = reactPassport.usePassport();
+
+  const [accessToken, setAccessToken] = useState<string | undefined>();
+  const [idToken, setIdToken] = useState<string | undefined>();
+  const [linkedAddresses, setLinkedAddresses] = useState<string[]>();
+  const [profile, setProfile] = useState<passport.UserProfile | undefined>();
+  const [accounts, setAccounts] = useState<string[]>();
+
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen p-8">
+      <h1 className="text-3xl font-bold mb-8">Passport react context example</h1>
+      <div className="grid grid-cols-1 gap-4 text-center">
+        <div>
+          <p className="mb-2">
+            <b>Loading:</b>
+            {' '}
+            {isLoading ? 'true' : 'false'}
+          </p>
+          <p className="mb-2">
+            <b>Is Logged In:</b>
+            {' '}
+            {isLoggedIn ? 'true' : 'false'}
+          </p>
+          <p className="mb-2">
+            <b>Linked Addresses:</b>
+            {' '}
+            {linkedAddresses}
+          </p>
+          <p className="mb-2">
+            <b>Profile:</b>
+            {' '}
+            {JSON.stringify(profile, null, 2)}
+          </p>
+          <p className="mb-2">
+            <b>Accounts:</b>
+            {' '}
+            {JSON.stringify(accounts, null, 2)}
+          </p>
+          <p className="mb-2">
+            <b>Access Token:</b>
+            {' '}
+            {accessToken}
+          </p>
+          <p className="mb-2">
+            <b>ID Token:</b>
+            {' '}
+            {idToken}
+          </p>
+        </div>
+        <button
+          className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
+          onClick={() => login()}
+          type="button"
+        >
+          Login
+        </button>
+        <button
+          className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
+          onClick={() => login({
+            withoutWallet: true,
+          })}
+          type="button"
+        >
+          Login without wallet
+        </button>
+        <button className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
+          onClick={() => {
+            getAccessToken().then(setAccessToken);
+            getIdToken().then(setIdToken);
+          }}
+          type='button'
+        >Get Tokens</button>
+        <button
+          className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
+          onClick={() => getLinkedAddresses().then(setLinkedAddresses)}
+          type="button"
+        >
+          Get Linked Addresses
+        </button>
+        <button
+          className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
+          onClick={() => getProfile().then(setProfile)}
+          type="button"
+        >
+          Get Profile
+        </button>
+        <button
+          className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
+          onClick={() => getAccounts().then(setAccounts)}
+          type="button"
+        >
+          Get Accounts
+        </button>
+        <button
+          className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
+          onClick={logout}
+          type="button"
+        >
+          Logout
+        </button>
+      </div>
+    </div>
+  );
+}

examples/passport/identity-with-nextjs/src/app/use-context/snippets/jwt-tokens.tsx

@@ -0,0 +1,26 @@
+// #doc passport-react-jwt-tokens
+import { reactPassport } from '@imtbl/sdk';
+import { useState } from 'react';
+
+export default function Page() {
+  const { login, getAccessToken, getIdToken } = reactPassport.usePassport();
+  const [accessToken, setAccessToken] = useState<string | undefined>();
+  const [idToken, setIdToken] = useState<string | undefined>();
+
+  return (
+    <>
+      Access Token:
+      {' '}
+      {accessToken}
+      ID Token:
+      {' '}
+      {idToken}
+      <button onClick={() => login()}>Login</button>
+      <button onClick={() => {
+        getAccessToken().then(setAccessToken);
+        getIdToken().then(setIdToken);
+      }}>Get Tokens</button>
+    </>
+  );
+}
+// #enddoc passport-react-jwt-tokens

examples/passport/identity-with-nextjs/src/app/use-context/snippets/login-without-wallet.tsx

@@ -0,0 +1,19 @@
+// #doc passport-react-login-without-wallet
+import { reactPassport, passport } from '@imtbl/sdk';
+import { useState } from 'react';
+
+export default function Page() {
+  const { login, getProfile } = reactPassport.usePassport();
+  const [profile, setProfile] = useState<passport.UserProfile | undefined>(undefined);
+
+  return (
+    <>
+      user profile:
+      {' '}
+      {profile}
+      <button onClick={() => login({ withoutWallet: true })}>Login Without Wallet</button>
+      <button onClick={() => getProfile().then(setProfile)}>Get User Profile</button>
+    </>
+  );
+}
+// #enddoc passport-react-login-without-wallet

examples/passport/identity-with-nextjs/src/app/use-context/snippets/login.tsx

@@ -0,0 +1,15 @@
+// #doc passport-react-login
+import { reactPassport } from '@imtbl/sdk';
+import { useState } from 'react';
+
+export default function MyComponent() {
+  const { login, getAccounts } = reactPassport.usePassport();
+
+  return (
+    <>
+      <button onClick={() => login()}>Login</button>
+      <button onClick={() => getAccounts().then((accounts) => console.log(accounts))}>Get Accounts</button>
+    </>
+  );
+}
+// #enddoc passport-react-login

examples/passport/identity-with-nextjs/src/app/use-context/snippets/logout.tsx

@@ -0,0 +1,11 @@
+// #doc passport-react-logout
+import { reactPassport } from '@imtbl/sdk';
+
+export default function Page() {
+  const { logout } = reactPassport.usePassport();
+
+  return (
+    <button onClick={logout}>Logout</button>
+  );
+}
+// #enddoc passport-react-logout

examples/passport/identity-with-nextjs/src/context/passport2.tsx

@@ -0,0 +1,24 @@
+// #doc passport-setup-react
+import { config, reactPassport } from '@imtbl/sdk';
+import { ReactNode } from 'react';
+
+export function PassportProvider({ children }: { children: ReactNode }) {
+  return (
+    <reactPassport.ZkEvmReactProvider
+      config={{
+        baseConfig: {
+          environment: config.Environment.SANDBOX, // or config.Environment.SANDBOX
+          publishableKey: process.env.NEXT_PUBLIC_PUBLISHABLE_KEY || '<YOUR_PUBLISHABLE_KEY>', // replace with your publishable API key from Hub
+        },
+        clientId: process.env.NEXT_PUBLIC_CLIENT_ID || '<YOUR_CLIENT_ID>', // replace with your client ID from Hub
+        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',
+      }}
+    >
+      {children}
+    </reactPassport.ZkEvmReactProvider>
+  );
+}
+// #enddoc passport-setup-react

package.json

@@ -95,6 +95,7 @@
       "packages/checkout/widgets-lib",
       "packages/blockchain-data/sdk",
       "packages/game-bridge",
+      "packages/react/passport",
       "packages/webhook/sdk",
       "packages/minting-backend/sdk",
       "tests/**",

packages/passport/sdk/.eslintrc.cjs

@@ -6,6 +6,7 @@ module.exports = {
     "tsconfigRootDir": __dirname
   },
   "rules": {
+    "react/react-in-jsx-scope": ["off"],
     "@typescript-eslint/naming-convention": [
       "error",
       {

packages/passport/sdk/package.json

@@ -33,8 +33,6 @@
     "@types/axios": "^0.14.0",
     "@types/jest": "^29.4.3",
     "@types/jwt-encode": "^1.0.1",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",

packages/passport/sdk/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
+    "jsx": "react-jsx",
     "outDir": "./dist",
     "rootDirs": ["src"],
     "customConditions": ["development"]

packages/react/passport/.eslintrc.cjs

@@ -0,0 +1,27 @@
+module.exports = {
+  "extends": ["../../../.eslintrc"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "tsconfigRootDir": __dirname
+  },
+  "rules": {
+    "react/react-in-jsx-scope": ["off"],
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        "selector": "variable",
+        "format": ["camelCase", "UPPER_CASE", "snake_case"]
+      }
+    ],
+    "max-len": [
+      "error",
+      {
+        "code": 120,
+        "ignoreComments": true,
+        "ignoreTrailingComments": true,
+        "ignoreStrings": true
+      }
+    ]
+  }
+}

packages/react/passport/jest.config.ts

@@ -0,0 +1,15 @@
+import type { Config } from 'jest';
+
+const config: Config = {
+  clearMocks: true,
+  coverageProvider: 'v8',
+  moduleDirectories: ['node_modules', 'src'],
+  moduleNameMapper: { '^@imtbl/(.*)$': '<rootDir>/../../../node_modules/@imtbl/$1/src' },
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(t|j)sx?$': '@swc/jest',
+  },
+  transformIgnorePatterns: [],
+};
+
+export default config;

packages/react/passport/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@imtbl/react-passport",
+  "description": "Passport React SDK",
+  "version": "0.0.0",
+  "author": "Immutable",
+  "bugs": "https://github.com/immutable/ts-immutable-sdk/issues",
+  "dependencies": {
+    "@imtbl/config": "0.0.0",
+    "@imtbl/metrics": "0.0.0",
+    "@imtbl/passport": "0.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@swc/core": "^1.3.36",
+    "@swc/jest": "^0.2.24",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/axios": "^0.14.0",
+    "@types/jest": "^29.4.3",
+    "@types/jwt-encode": "^1.0.1",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/react-test-renderer": "^18.3.0",
+    "@types/uuid": "^8.3.4",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "cross-fetch": "^3.1.6",
+    "eslint": "^8.40.0",
+    "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.4.3",
+    "jwt-encode": "^1.0.1",
+    "msw": "^1.2.2",
+    "prettier": "^2.8.7",
+    "react-test-renderer": "^18.3.1",
+    "rollup": "^4.19.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.5.4"
+  },
+  "engines": {
+    "node": ">=20.11.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "homepage": "https://github.com/immutable/ts-immutable-sdk#readme",
+  "license": "Apache-2.0",
+  "main": "dist/index.js",
+  "optionalDependencies": {
+    "react": ">=17.0.0"
+  },
+  "private": true,
+  "repository": "immutable/ts-immutable-sdk.git",
+  "scripts": {
+    "build": "NODE_ENV=production rollup --config rollup.config.js",
+    "d": "swc src -d dist --strip-leading-paths --ignore '**/*.test.*'",
+    "lint": "eslint ./src --ext .ts,.jsx,.tsx --max-warnings=0",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "typecheck": "tsc --noEmit --jsx preserve"
+  },
+  "type": "module",
+  "types": "dist/index.d.ts"
+}

packages/react/passport/rollup.config.js

@@ -0,0 +1,10 @@
+import typescript from '@rollup/plugin-typescript';
+
+export default {
+  input: 'src/index.ts',
+  output: {
+    dir: 'dist',
+    format: 'es',
+  },
+  plugins: [typescript()],
+};