feat(jstz-937): Abstracted PasskeyWallet to an external package

.github/workflows/main.yml

@@ -38,6 +38,18 @@ jobs:
       - name: Install dependencies
         run: pnpm i --frozen-lockfile
 
+      - name: Build dependencies
+        working-directory: .
+        run: pnpm --filter passkeys --filter passkeys-react build
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist-files
+          path: |
+            packages/passkeys/dist
+            packages/passkeys-react/dist
+
       - name: Run ESLint
         run: pnpm lint
 
@@ -72,6 +84,12 @@ jobs:
       - name: Install dependencies
         run: pnpm i --frozen-lockfile
 
+      - name: Download build artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: dist-files
+          path: packages
+
       - name: Run build
         working-directory: apps/signer
         run: pnpm build

apps/signer/package.json

@@ -11,6 +11,8 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "passkeys": "workspace:*",
+    "passkeys-react": "workspace:*",
     "@better-fetch/fetch": "^1.1.18",
     "@jstz-dev/jstz-client": "0.1.1-alpha.5",
     "@jstz-dev/jstz_sdk": "0.1.1-alpha.5",

apps/signer/src/lib/passkeys/userStore.ts

@@ -4,7 +4,7 @@ import SuperJSON from "superjson";
 import { createStore } from "zustand";
 import type { PersistStorage } from "zustand/middleware";
 import { devtools, persist } from "zustand/middleware";
-import { RP_ID } from "./constants";
+import { RP_ID } from "~/lib/constants/RP_ID";
 
 interface User {
   id: string;

apps/signer/src/main.tsx

@@ -1,16 +1,21 @@
+import { PasskeyProvider } from "passkeys-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { RouterProvider } from "react-router";
 
+import { WindowContextProvider } from "~/lib/Window.context.tsx";
 import "./index.css";
+import { RP_ID } from "./lib/constants/RP_ID";
+import { userStore } from "./lib/passkeys/userStore";
 import { router } from "./router";
-import {WindowContextProvider} from "~/lib/Window.context.tsx";
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 createRoot(document.getElementById("app")!).render(
   <StrictMode>
-      <WindowContextProvider>
+    <WindowContextProvider>
+      <PasskeyProvider userStore={userStore} RP_ID={RP_ID} extensionId={chrome.runtime.id}>
         <RouterProvider router={router} />
-      </WindowContextProvider>
+      </PasskeyProvider>
+    </WindowContextProvider>
   </StrictMode>,
 );

apps/signer/src/pages/home/Home.tsx

@@ -3,11 +3,11 @@ import * as SimpleWebAuthnBrowser from "@simplewebauthn/browser";
 import * as TaquitoUtils from "@taquito/utils";
 import { Button, buttonVariants } from "jstz-ui/ui/button";
 import { ArrowLeft, ExternalLink } from "lucide-react";
+import { parseKey } from "passkeys";
+import { usePasskeyWallet } from "passkeys-react";
 import { Link, redirect, useLocation, useNavigate, type LoaderFunctionArgs } from "react-router";
 import { AccountSelect } from "~/components/AccountSelect";
 import { StorageKeys } from "~/lib/constants/storage";
-import { parseKey } from "~/lib/passkeys/encode";
-import { usePasskeyWallet } from "~/lib/passkeys/usePasskeyWallet";
 import * as Vault from "~/lib/vault";
 import { useVault, vault } from "~/lib/vaultStore";
 import { loadHomeParams } from "./url-params";
@@ -113,7 +113,7 @@ interface RegisterPasskeyProps {
 }
 
 function RegisterPasskey({ onSuccess }: RegisterPasskeyProps) {
-  const wallet = usePasskeyWallet();
+  const { wallet } = usePasskeyWallet();
 
   const isPopup = (() => {
     const views = chrome.extension.getViews({ type: "popup" });
@@ -138,15 +138,15 @@ function RegisterPasskey({ onSuccess }: RegisterPasskeyProps) {
   async function handleCreatePasskeyWallet() {
     let attResp: RegistrationResponseJSON;
     try {
-      const opts = await wallet.current.generateRegistrationOptions();
+      const opts = await wallet.generateRegistrationOptions();
 
       attResp = await SimpleWebAuthnBrowser.startRegistration({ optionsJSON: opts });
     } catch (err) {
       console.error(err);
       return;
     }
 
-    const { verified, publicKey } = await wallet.current.verifyRegistration(attResp);
+    const { verified, publicKey } = await wallet.verifyRegistration(attResp);
 
     if (verified) {
       console.info(`Authenticator registered!`);

apps/signer/src/pages/wallet/Wallet.tsx

@@ -8,6 +8,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "jstz-ui/ui/tooltip";
 import { cn } from "jstz-ui/utils";
 import { Eye, EyeOff } from "lucide-react";
 import { useQueryStates } from "nuqs";
+import { usePasskeyWallet } from "passkeys-react";
 import { Suspense, useState } from "react";
 import { redirect, useParams, type LoaderFunctionArgs } from "react-router";
 import SuperJSON from "superjson";
@@ -24,7 +25,6 @@ import { useWindowContext } from "~/lib/Window.context.tsx";
 import { StorageKeys, type KeyStorage } from "~/lib/constants/storage";
 import { toTezString } from "~/lib/currency.utils.ts";
 import { createOperation, sign } from "~/lib/jstz";
-import { usePasskeyWallet } from "~/lib/passkeys/usePasskeyWallet";
 import { useVault } from "~/lib/vaultStore";
 import {
   RequestEventTypes,
@@ -160,7 +160,7 @@ function OperationSigningDialog({
 }: OperationSigningDialogProps) {
   const { close } = useWindowContext();
 
-  const wallet = usePasskeyWallet();
+  const { wallet } = usePasskeyWallet();
 
   async function handleConfirm() {
     const operation = await createOperation({
@@ -182,7 +182,7 @@ function OperationSigningDialog({
         signature: passKeySignature,
         authenticatorData,
         clientDataJSON,
-      } = await wallet.current.passkeySign(operation);
+      } = await wallet.passkeySign(operation);
 
       signature = passKeySignature;
 

apps/signer/tsconfig.json

@@ -56,7 +56,7 @@
 
     /* JavaScript Support */
     "allowJs": true,
-    "checkJs": true,
+    "checkJs": false,
     // "maxNodeModuleJsDepth": 1,
 
     /* Emit */

packages/passkeys-react/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "passkeys-react",
+  "version": "0.0.1",
+  "description": "",
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch"
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "packageManager": "pnpm@10.12.4",
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "dependencies": {
+    "passkeys": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.6",
+    "react": "~19.2.0",
+    "tsdown": "^0.16.6",
+    "typescript": "^5.9.3"
+  },
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  }
+}

packages/passkeys-react/src/PasskeyWalletProvider.jsx

@@ -0,0 +1,28 @@
+import { PasskeyWallet } from "passkeys";
+import { createContext, useContext, useMemo, useRef } from "react";
+
+/** @import {PropsWithChildren, Context} from "react"; */
+/** @import {UserStore} from "passkeys"; */
+
+/** @type {Context<{ wallet: PasskeyWallet }>} */
+const PasskeyContext = createContext(/** @type {{ wallet: PasskeyWallet }} */ ({}));
+
+/** @param {PropsWithChildren<{ userStore: UserStore; RP_ID: string; extensionId: string }>} props */
+export function PasskeyProvider({ userStore, RP_ID, extensionId, children }) {
+  const wallet = useRef(
+    new PasskeyWallet(userStore, RP_ID, [`chrome-extension://${extensionId}`], 60_000),
+  );
+
+  const value = useMemo(
+    () => ({
+      wallet: wallet.current,
+    }),
+    [],
+  );
+
+  return <PasskeyContext value={value}>{children}</PasskeyContext>;
+}
+
+export function usePasskeyWallet() {
+  return useContext(PasskeyContext);
+}

packages/passkeys-react/src/constants.js

@@ -0,0 +1,2 @@
+/** Represents the "scope" of websites on which a credential should be usable. */
+export const RP_ID = "localhost";

packages/passkeys-react/src/index.js

@@ -0,0 +1 @@
+export * from "./PasskeyWalletProvider.jsx";

packages/passkeys-react/tsconfig.json

@@ -0,0 +1,117 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig.json",
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    "incremental": true,
+    // "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    // "disableSourceOfProjectReferenceRedirect": true,
+    // "disableSolutionSearching": true,
+    // "disableReferencedProjectLoad": true,
+
+    /* Language and Environment */
+    "target": "ES2024",
+    "lib": ["ES2024", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    // "experimentalDecorators": true,
+    // "emitDecoratorMetadata": true,
+    // "jsxFactory": "",
+    // "jsxFragmentFactory": "",
+    // "jsxImportSource": "",
+    // "reactNamespace": "",
+    // "noLib": true,
+    "useDefineForClassFields": true,
+    "moduleDetection": "force",
+
+    /* Modules */
+    "module": "ES2022",
+    // "rootDir": "./",
+    "moduleResolution": "bundler",
+    "baseUrl": "./",
+    "paths": {
+      "~/*": ["src/*"]
+    },
+    // "rootDirs": [],
+    // "typeRoots": [],
+    // "types": [],
+    // "allowUmdGlobalAccess": true,
+    // "moduleSuffixes": [],
+    "allowImportingTsExtensions": true,
+    // "rewriteRelativeImportExtensions": true,
+    // "resolvePackageJsonExports": true,
+    // "resolvePackageJsonImports": true,
+    // "customConditions": [],
+    // "noUncheckedSideEffectImports": true,
+    "resolveJsonModule": true,
+    // "allowArbitraryExtensions": true,
+    // "noResolve": true,
+
+    /* JavaScript Support */
+    "allowJs": true,
+    "checkJs": true,
+    // "maxNodeModuleJsDepth": 1,
+
+    /* Emit */
+    "declaration": true,
+    // "declarationMap": true,
+    "emitDeclarationOnly": true,
+    // "sourceMap": true,
+    // "inlineSourceMap": true,
+    "noEmit": false,
+    // "outFile": "./",
+    "outDir": "./dist",
+    // "removeComments": true,
+    // "importHelpers": true,
+    // "downlevelIteration": true,
+    // "sourceRoot": "",
+    // "mapRoot": "",
+    // "inlineSources": true,
+    // "emitBOM": true,
+    // "newLine": "crlf",
+    // "stripInternal": true,
+    // "noEmitHelpers": true,
+    // "noEmitOnError": true,
+    // "preserveConstEnums": true,
+    // "declarationDir": "./",
+
+    /* Interop Constraints */
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    // "isolatedDeclarations": true,
+    // "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    // "preserveSymlinks": true,
+    "forceConsistentCasingInFileNames": true,
+
+    /* Type Checking */
+    "strict": true,
+    // "noImplicitAny": true,
+    // "strictNullChecks": true,
+    // "strictFunctionTypes": true,
+    // "strictBindCallApply": true,
+    // "strictPropertyInitialization": true,
+    // "strictBuiltinIteratorReturn": true,
+    // "noImplicitThis": true,
+    // "useUnknownInCatchVariables": true,
+    // "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    // "exactOptionalPropertyTypes": true,
+    // "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    // "noImplicitOverride": true,
+    // "noPropertyAccessFromIndexSignature": true,
+    // "allowUnusedLabels": true,
+    // "allowUnreachableCode": true,
+    "noUncheckedSideEffectImports": true,
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

packages/passkeys-react/tsdown.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: ["./src/index.js"],
+  outDir: "./dist",
+  dts: true,
+  format: "esm",
+  clean: true,
+  target: false,
+  platform: "node",
+  exports: true,
+});