@stacks-passkey/react 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+import { PasskeyClient, type PasskeyConfig, type PasskeySession, type FeeConfig } from '@stacks-passkey/core';
+export type PasskeyProviderConfig = PasskeyConfig & {
+    relayUrl: string;
+    relayApiKey?: string;
+    fee?: FeeConfig;
+};
+export declare function PasskeyProvider({ config, children, }: {
+    config: PasskeyProviderConfig;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function usePasskeyClient(): PasskeyClient;
+export declare function usePasskeyAccount(): {
+    session: PasskeySession | null;
+    isRegistered: boolean;
+    loading: boolean;
+    error: string | null;
+    gasBalance: string | null;
+    gasTankAddress: string | null;
+    register: (userId: string, userName: string) => Promise<import("@stacks-passkey/core").PasskeyCredential>;
+    signIn: () => Promise<PasskeySession>;
+    logout: () => void;
+    transfer: (recipient: string, amount: bigint) => Promise<string>;
+    invoke: (contract: string, fn: string, args?: Parameters<PasskeyClient["invoke"]>[2]) => Promise<string>;
+    feeMode: import("@stacks-passkey/core").FeeMode;
+};
+export { PasskeyClient };
+export type { PasskeyConfig, PasskeySession, FeeConfig };

package/dist/index.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { PasskeyClient, normalizeRpId, clearSession } from '@stacks-passkey/core';
+const PasskeyContext = createContext(null);
+export function PasskeyProvider({ config, children, }) {
+    const clientRef = useRef(null);
+    const configKeyRef = useRef('');
+    const configKey = `${normalizeRpId(config.rpId)}:${config.deployerAddress}:${config.network.chainId}`;
+    if (!clientRef.current || configKeyRef.current !== configKey) {
+        clientRef.current = new PasskeyClient(config);
+        configKeyRef.current = configKey;
+    }
+    useEffect(() => {
+        if (config.fee) {
+            clientRef.current?.setFeeConfig(config.fee);
+        }
+    }, [config.fee]);
+    return _jsx(PasskeyContext.Provider, { value: clientRef.current, children: children });
+}
+export function usePasskeyClient() {
+    const client = useContext(PasskeyContext);
+    if (!client)
+        throw new Error('usePasskeyClient must be used within PasskeyProvider');
+    return client;
+}
+export function usePasskeyAccount() {
+    const client = usePasskeyClient();
+    const [session, setSession] = useState(() => client.getSession());
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [gasBalance, setGasBalance] = useState(null);
+    const [gasTankAddress, setGasTankAddress] = useState(null);
+    useEffect(() => {
+        client
+            .getRelayClient()
+            .getProjectBalance()
+            .then((b) => {
+            setGasBalance(b?.gasBalanceMicroStx ?? null);
+            setGasTankAddress(b?.gasTankAddress ?? null);
+        })
+            .catch(() => {
+            setGasBalance(null);
+            setGasTankAddress(null);
+        });
+    }, [client]);
+    const register = useCallback(async (userId, userName) => {
+        setLoading(true);
+        setError(null);
+        try {
+            const credential = await client.register(userId, userName);
+            setSession(client.getSession());
+            const balance = await client.getRelayClient().getProjectBalance();
+            setGasBalance(balance?.gasBalanceMicroStx ?? null);
+            return credential;
+        }
+        catch (e) {
+            const message = e instanceof Error ? e.message : 'Registration failed';
+            setError(message);
+            throw e;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client]);
+    const signIn = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const nextSession = await client.signIn();
+            setSession(nextSession);
+            const balance = await client.getRelayClient().getProjectBalance();
+            setGasBalance(balance?.gasBalanceMicroStx ?? null);
+            return nextSession;
+        }
+        catch (e) {
+            const message = e instanceof Error ? e.message : 'Sign-in failed';
+            setError(message);
+            throw e;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client]);
+    const logout = useCallback(() => {
+        client.logout();
+        clearSession();
+        setSession(null);
+    }, [client]);
+    const transfer = useCallback(async (recipient, amount) => {
+        setLoading(true);
+        setError(null);
+        try {
+            const txid = await client.transfer(recipient, amount);
+            const balance = await client.getRelayClient().getProjectBalance();
+            setGasBalance(balance?.gasBalanceMicroStx ?? null);
+            return txid;
+        }
+        catch (e) {
+            const message = e instanceof Error ? e.message : 'Transfer failed';
+            setError(message);
+            throw e;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client]);
+    const invoke = useCallback(async (contract, fn, args) => {
+        setLoading(true);
+        setError(null);
+        try {
+            const txid = await client.invoke(contract, fn, args);
+            const balance = await client.getRelayClient().getProjectBalance();
+            setGasBalance(balance?.gasBalanceMicroStx ?? null);
+            return txid;
+        }
+        catch (e) {
+            const message = e instanceof Error ? e.message : 'Invoke failed';
+            setError(message);
+            throw e;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client]);
+    return {
+        session,
+        isRegistered: session !== null,
+        loading,
+        error,
+        gasBalance,
+        gasTankAddress,
+        register,
+        signIn,
+        logout,
+        transfer,
+        invoke,
+        feeMode: client.getFeeMode(),
+    };
+}
+export { PasskeyClient };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@stacks-passkey/react",
+  "version": "0.1.0",
+  "description": "React hooks for Stacks Passkey SDK",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "@stacks-passkey/core": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "typescript": "^5.7.2"
+  },
+  "keywords": [
+    "stacks",
+    "passkey",
+    "webauthn",
+    "react"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Stacks-utils/stacks-passkey-sdk.git",
+    "directory": "packages/react"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}