feat: [EXC-23] CICD and playwright for nextjs passport example (#1990)

Co-authored-by: Craig M. <[email protected]>

.eslintrc

@@ -19,9 +19,10 @@
     "no-plusplus": ["off"],
     "max-classes-per-file": ["off"],
     "max-len": [
-      "error",
+      "error", 
       { "code": 120, "ignoreComments": true, "ignoreTrailingComments": true }
-    ],
+    ],    
+    "react/button-has-type": ["off"],
     "no-restricted-syntax": [
       "error",
       "ForInStatement",
@@ -30,5 +31,14 @@
     ],
     "import/no-extraneous-dependencies": ["off"],
     "@typescript-eslint/return-await": ["off"]
-  }
+  },
+  "overrides": [
+    {
+      "files": ["./examples/passport/**"],
+      "rules": {
+        "@typescript-eslint/no-unused-vars": "warn",
+        "no-underscore-dangle": "warn"
+      }
+    }
+  ]
 }

.github/workflows/build-lint-and-test-passport-examples.yaml

@@ -0,0 +1,53 @@
+name: Build lint and test all passport examples
+
+on:
+  pull_request:
+    branches: [main]
+  merge_group:
+    branches: [main]
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest-4-cores
+    env:
+      NODE_OPTIONS: --max-old-space-size=14366
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: setup
+        uses: ./.github/actions/pr-setup
+
+      - name: Build passport examples
+        run: yarn build:examples:passport
+
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest-4-cores
+    env:
+      NODE_OPTIONS: --max-old-space-size=14366
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: setup
+        uses: ./.github/actions/pr-setup
+
+      - name: Lint passport examples
+        run: yarn lint:examples:passport
+
+  test:
+    name: Test
+    runs-on: ubuntu-latest-4-cores
+    env:
+      NODE_OPTIONS: --max-old-space-size=14366
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: setup
+        uses: ./.github/actions/pr-setup
+
+      - name: Test passport examples
+        run: yarn test:examples:passport

.gitignore

@@ -13,13 +13,8 @@ cache/
 *version.properties
 
 .pnp.*
-.yarn/
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
+.yarn/cache
+.yarn/install-state.gz
 
 .yalc
 yalc.lock

.nxignore

@@ -0,0 +1 @@
+examples

.yarnrc.yml

@@ -1,3 +1,7 @@
 nodeLinker: node-modules
 
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
+
 yarnPath: .yarn/releases/yarn-3.6.1.cjs

examples/passport/identity-with-nextjs/package.json

@@ -1,28 +1,28 @@
 {
-  "name": "identity-with-nextjs",
+  "name": "@examples/identity-with-nextjs",
   "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
   "dependencies": {
     "next": "14.2.5",
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@imtbl/sdk": "latest",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "autoprefixer": "^10.4.19",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8.4.39",
     "tailwindcss": "^3.4.6",
     "typescript": "^5"
+  },
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "lint": "next lint",
+    "start": "next start"
   }
 }

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

@@ -2,6 +2,7 @@
 
 import {
   createContext, ReactNode, useCallback, useContext,
+  useMemo,
 } from 'react';
 import { config, passport } from '@imtbl/sdk';
 import { ethers } from 'ethers';
@@ -134,22 +135,34 @@ export function PassportProvider({ children }: { children: ReactNode }) {
     window.alert(`userProfile: ${JSON.stringify(userProfile)}`);
   }, [passportInstance]);
 
+  const providerValue = useMemo(() => ({
+    passportInstance,
+    passportSilentInstance,
+    login,
+    logout,
+    logoutSilent,
+    loginWithoutWallet,
+    loginWithEthersjs,
+    getIdToken,
+    getAccessToken,
+    getLinkedAddresses,
+    getUserInfo,
+  }), [
+    passportInstance,
+    passportSilentInstance,
+    login,
+    logout,
+    logoutSilent,
+    loginWithoutWallet,
+    loginWithEthersjs,
+    getIdToken,
+    getAccessToken,
+    getLinkedAddresses,
+    getUserInfo,
+  ]);
+
   return (
-    <PassportContext.Provider
-      value={{
-        passportInstance,
-        passportSilentInstance,
-        login,
-        logout,
-        logoutSilent,
-        loginWithoutWallet,
-        loginWithEthersjs,
-        getIdToken,
-        getAccessToken,
-        getLinkedAddresses,
-        getUserInfo,
-      }}
-    >
+    <PassportContext.Provider value={providerValue}>
       {children}
     </PassportContext.Provider>
   );