@miden-sdk/use-miden-para-react 0.13.0 → 0.13.1

package/dist/index.d.mts

@@ -1,6 +1,12 @@
 import * as _getpara_react_sdk_lite from '@getpara/react-sdk-lite';
+import { ParaProviderProps } from '@getpara/react-sdk-lite';
+export { useLogout, useModal } from '@getpara/react-sdk-lite';
 import * as _miden_sdk_miden_sdk from '@miden-sdk/miden-sdk';
 import { MidenAccountStorageMode, Opts, CustomSignConfirmStep } from '@miden-sdk/miden-para';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { ParaWeb, Wallet } from '@getpara/web-sdk';
+import { QueryClient } from '@tanstack/react-query';
 
 /**
  * React hook that converts Para React SDK context into a ready-to-use Miden WebClient.
@@ -25,4 +31,65 @@ declare function useParaMiden(nodeUrl: string, storageMode?: MidenAccountStorage
     opts: Omit<Opts, "type" | "endpoint" | "storageMode">;
 };
 
-export { useParaMiden };
+/** Environment string values accepted by ParaSignerProvider */
+type ParaEnvironment = 'BETA' | 'PROD' | 'SANDBOX' | 'DEV' | 'DEVELOPMENT' | 'PRODUCTION';
+interface ParaSignerProviderProps {
+    children: ReactNode;
+    /** Para API key */
+    apiKey: string;
+    /** Para environment (BETA, PROD, SANDBOX, DEV, DEVELOPMENT, PRODUCTION) */
+    environment: ParaEnvironment;
+    /** App name displayed in Para modal */
+    appName?: string;
+    /** Whether to show the signing modal for transaction confirmation */
+    showSigningModal?: boolean;
+    /** Custom sign confirmation step callback */
+    customSignConfirmStep?: CustomSignConfirmStep;
+    /**
+     * Optional custom QueryClient instance for React Query.
+     * If not provided, a default instance is used internally.
+     */
+    queryClient?: QueryClient;
+    /**
+     * Advanced: Additional config to pass to ParaProvider.
+     * Use this for customizing OAuth methods, external wallets, etc.
+     */
+    paraProviderConfig?: Partial<Omit<ParaProviderProps<any, any>, 'children' | 'paraClientConfig'>>;
+}
+/**
+ * Para-specific extras exposed via useParaSigner hook.
+ */
+interface ParaSignerExtras {
+    /** Para client instance */
+    para: ParaWeb;
+    /** Connected wallet (null if not connected) */
+    wallet: Wallet | null;
+}
+/**
+ * ParaSignerProvider wraps MidenProvider to enable Para wallet signing.
+ * Includes ParaProvider internally, so you don't need to wrap with it separately.
+ *
+ * @example
+ * ```tsx
+ * <ParaSignerProvider apiKey="your-api-key" environment="BETA" appName="My App">
+ *   <MidenProvider config={{ rpcUrl: "testnet" }}>
+ *     <App />
+ *   </MidenProvider>
+ * </ParaSignerProvider>
+ * ```
+ */
+declare function ParaSignerProvider({ children, apiKey, environment, appName, showSigningModal, customSignConfirmStep, queryClient, paraProviderConfig, }: ParaSignerProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook for Para-specific extras beyond the unified useSigner interface.
+ * Use this to access the Para client or wallet details directly.
+ *
+ * @example
+ * ```tsx
+ * const { para, wallet, isConnected } = useParaSigner();
+ * ```
+ */
+declare function useParaSigner(): ParaSignerExtras & {
+    isConnected: boolean;
+};
+
+export { type ParaSignerExtras, ParaSignerProvider, type ParaSignerProviderProps, useParaMiden, useParaSigner };

package/dist/index.d.ts

@@ -1,6 +1,12 @@
 import * as _getpara_react_sdk_lite from '@getpara/react-sdk-lite';
+import { ParaProviderProps } from '@getpara/react-sdk-lite';
+export { useLogout, useModal } from '@getpara/react-sdk-lite';
 import * as _miden_sdk_miden_sdk from '@miden-sdk/miden-sdk';
 import { MidenAccountStorageMode, Opts, CustomSignConfirmStep } from '@miden-sdk/miden-para';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { ParaWeb, Wallet } from '@getpara/web-sdk';
+import { QueryClient } from '@tanstack/react-query';
 
 /**
  * React hook that converts Para React SDK context into a ready-to-use Miden WebClient.
@@ -25,4 +31,65 @@ declare function useParaMiden(nodeUrl: string, storageMode?: MidenAccountStorage
     opts: Omit<Opts, "type" | "endpoint" | "storageMode">;
 };
 
-export { useParaMiden };
+/** Environment string values accepted by ParaSignerProvider */
+type ParaEnvironment = 'BETA' | 'PROD' | 'SANDBOX' | 'DEV' | 'DEVELOPMENT' | 'PRODUCTION';
+interface ParaSignerProviderProps {
+    children: ReactNode;
+    /** Para API key */
+    apiKey: string;
+    /** Para environment (BETA, PROD, SANDBOX, DEV, DEVELOPMENT, PRODUCTION) */
+    environment: ParaEnvironment;
+    /** App name displayed in Para modal */
+    appName?: string;
+    /** Whether to show the signing modal for transaction confirmation */
+    showSigningModal?: boolean;
+    /** Custom sign confirmation step callback */
+    customSignConfirmStep?: CustomSignConfirmStep;
+    /**
+     * Optional custom QueryClient instance for React Query.
+     * If not provided, a default instance is used internally.
+     */
+    queryClient?: QueryClient;
+    /**
+     * Advanced: Additional config to pass to ParaProvider.
+     * Use this for customizing OAuth methods, external wallets, etc.
+     */
+    paraProviderConfig?: Partial<Omit<ParaProviderProps<any, any>, 'children' | 'paraClientConfig'>>;
+}
+/**
+ * Para-specific extras exposed via useParaSigner hook.
+ */
+interface ParaSignerExtras {
+    /** Para client instance */
+    para: ParaWeb;
+    /** Connected wallet (null if not connected) */
+    wallet: Wallet | null;
+}
+/**
+ * ParaSignerProvider wraps MidenProvider to enable Para wallet signing.
+ * Includes ParaProvider internally, so you don't need to wrap with it separately.
+ *
+ * @example
+ * ```tsx
+ * <ParaSignerProvider apiKey="your-api-key" environment="BETA" appName="My App">
+ *   <MidenProvider config={{ rpcUrl: "testnet" }}>
+ *     <App />
+ *   </MidenProvider>
+ * </ParaSignerProvider>
+ * ```
+ */
+declare function ParaSignerProvider({ children, apiKey, environment, appName, showSigningModal, customSignConfirmStep, queryClient, paraProviderConfig, }: ParaSignerProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook for Para-specific extras beyond the unified useSigner interface.
+ * Use this to access the Para client or wallet details directly.
+ *
+ * @example
+ * ```tsx
+ * const { para, wallet, isConnected } = useParaSigner();
+ * ```
+ */
+declare function useParaSigner(): ParaSignerExtras & {
+    isConnected: boolean;
+};
+
+export { type ParaSignerExtras, ParaSignerProvider, type ParaSignerProviderProps, useParaMiden, useParaSigner };

package/dist/index.js

@@ -30,7 +30,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  useParaMiden: () => useParaMiden
+  ParaSignerProvider: () => ParaSignerProvider,
+  useLogout: () => import_react_sdk_lite3.useLogout,
+  useModal: () => import_react_sdk_lite3.useModal,
+  useParaMiden: () => useParaMiden,
+  useParaSigner: () => useParaSigner
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -99,8 +103,207 @@ function useParaMiden(nodeUrl, storageMode = "public", opts = {}, showSigningMod
     opts
   };
 }
+
+// src/ParaSignerProvider.tsx
+var import_react2 = require("react");
+var import_web_sdk = require("@getpara/web-sdk");
+var import_react_sdk_lite2 = require("@getpara/react-sdk-lite");
+var import_react_query = require("@tanstack/react-query");
+var import_react3 = require("@miden-sdk/react");
+var import_miden_para2 = require("@miden-sdk/miden-para");
+var import_miden_para3 = require("@miden-sdk/miden-para");
+var import_react_sdk_lite3 = require("@getpara/react-sdk-lite");
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultQueryClient = new import_react_query.QueryClient();
+function getEnvironmentValue(env) {
+  const normalizedEnv = env === "DEVELOPMENT" ? "BETA" : env === "PRODUCTION" ? "PROD" : env;
+  if (import_web_sdk.Environment && typeof import_web_sdk.Environment === "object") {
+    const value = import_web_sdk.Environment[normalizedEnv];
+    if (value !== void 0) return value;
+  }
+  return normalizedEnv;
+}
+var ParaSignerExtrasContext = (0, import_react2.createContext)(null);
+function ParaSignerProvider({
+  children,
+  apiKey,
+  environment,
+  appName = "Miden App",
+  showSigningModal = true,
+  customSignConfirmStep,
+  queryClient,
+  paraProviderConfig
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_query.QueryClientProvider, { client: queryClient != null ? queryClient : defaultQueryClient, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_sdk_lite2.ParaProvider,
+    {
+      paraClientConfig: {
+        env: getEnvironmentValue(environment),
+        apiKey
+      },
+      config: { appName },
+      ...paraProviderConfig,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ParaSignerProviderInner,
+        {
+          showSigningModal,
+          customSignConfirmStep,
+          children
+        }
+      )
+    }
+  ) });
+}
+function ParaSignerProviderInner({
+  children,
+  showSigningModal = true,
+  customSignConfirmStep
+}) {
+  const { openModal } = (0, import_react_sdk_lite2.useModal)();
+  const { logoutAsync } = (0, import_react_sdk_lite2.useLogout)();
+  const openModalRef = (0, import_react2.useRef)(openModal);
+  const logoutAsyncRef = (0, import_react2.useRef)(logoutAsync);
+  (0, import_react2.useEffect)(() => {
+    openModalRef.current = openModal;
+  }, [openModal]);
+  (0, import_react2.useEffect)(() => {
+    logoutAsyncRef.current = logoutAsync;
+  }, [logoutAsync]);
+  const para = (0, import_react_sdk_lite2.useClient)();
+  const paraRef = (0, import_react2.useRef)(para);
+  (0, import_react2.useEffect)(() => {
+    paraRef.current = para;
+  }, [para]);
+  const showSigningModalRef = (0, import_react2.useRef)(showSigningModal);
+  const customSignConfirmStepRef = (0, import_react2.useRef)(customSignConfirmStep);
+  (0, import_react2.useEffect)(() => {
+    showSigningModalRef.current = showSigningModal;
+  }, [showSigningModal]);
+  (0, import_react2.useEffect)(() => {
+    customSignConfirmStepRef.current = customSignConfirmStep;
+  }, [customSignConfirmStep]);
+  const [wallet, setWallet] = (0, import_react2.useState)(null);
+  const [isConnected, setIsConnected] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    let cancelled = false;
+    async function checkConnection() {
+      try {
+        const isLoggedIn = await paraRef.current.isFullyLoggedIn();
+        if (!isLoggedIn || cancelled) {
+          setIsConnected(false);
+          setWallet(null);
+          return;
+        }
+        const wallets = Object.values(await paraRef.current.getWallets());
+        const evmWallets = wallets.filter((w) => w.type === "EVM");
+        if (evmWallets.length > 0 && !cancelled) {
+          setWallet((prev) => (prev == null ? void 0 : prev.id) === evmWallets[0].id ? prev : evmWallets[0]);
+          setIsConnected(true);
+        } else if (!cancelled) {
+          setIsConnected(false);
+          setWallet(null);
+        }
+      } catch {
+        if (!cancelled) {
+          setIsConnected(false);
+          setWallet(null);
+        }
+      }
+    }
+    checkConnection();
+    const interval = setInterval(checkConnection, 2e3);
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, []);
+  const connect = (0, import_react2.useCallback)(async () => {
+    openModalRef.current();
+  }, []);
+  const disconnect = (0, import_react2.useCallback)(async () => {
+    await logoutAsyncRef.current();
+    await paraRef.current.logout();
+    setIsConnected(false);
+    setWallet(null);
+  }, []);
+  const disconnectedCtx = (0, import_react2.useRef)({
+    signCb: async () => {
+      throw new Error("Para wallet not connected");
+    },
+    accountConfig: null,
+    storeName: "",
+    name: "Para",
+    isConnected: false,
+    connect,
+    disconnect
+  });
+  const [signerContext, setSignerContext] = (0, import_react2.useState)(
+    disconnectedCtx.current
+  );
+  (0, import_react2.useEffect)(() => {
+    let cancelled = false;
+    async function buildContext() {
+      if (!isConnected || !wallet) {
+        setSignerContext(disconnectedCtx.current);
+        return;
+      }
+      try {
+        const p = paraRef.current;
+        const publicKey = await (0, import_miden_para3.getUncompressedPublicKeyFromWallet)(p, wallet);
+        if (!publicKey) throw new Error("Failed to get public key from wallet");
+        const commitment = await (0, import_miden_para3.evmPkToCommitment)(publicKey);
+        const commitmentBytes = commitment.serialize();
+        const signCallback = (0, import_miden_para2.signCb)(
+          p,
+          wallet,
+          showSigningModalRef.current,
+          customSignConfirmStepRef.current
+        );
+        if (!cancelled) {
+          const { AccountStorageMode } = await import("@miden-sdk/miden-sdk");
+          setSignerContext({
+            signCb: signCallback,
+            accountConfig: {
+              publicKeyCommitment: commitmentBytes,
+              accountType: "RegularAccountImmutableCode",
+              storageMode: AccountStorageMode.public()
+            },
+            storeName: `para_${wallet.id}`,
+            name: "Para",
+            isConnected: true,
+            connect,
+            disconnect
+          });
+        }
+      } catch (error) {
+        console.error("Failed to build Para signer context:", error);
+        if (!cancelled) {
+          setSignerContext(disconnectedCtx.current);
+        }
+      }
+    }
+    buildContext();
+    return () => {
+      cancelled = true;
+    };
+  }, [isConnected, wallet, connect, disconnect]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParaSignerExtrasContext.Provider, { value: { para, wallet }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.SignerContext.Provider, { value: signerContext, children }) });
+}
+function useParaSigner() {
+  var _a;
+  const extras = (0, import_react2.useContext)(ParaSignerExtrasContext);
+  const signer = (0, import_react2.useContext)(import_react3.SignerContext);
+  if (!extras) {
+    throw new Error("useParaSigner must be used within ParaSignerProvider");
+  }
+  return { ...extras, isConnected: (_a = signer == null ? void 0 : signer.isConnected) != null ? _a : false };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  useParaMiden
+  ParaSignerProvider,
+  useLogout,
+  useModal,
+  useParaMiden,
+  useParaSigner
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/useParaMiden.ts"],"sourcesContent":["export { useParaMiden } from './useParaMiden';\n","'use client';\n\nimport { useClient, useAccount, type Wallet } from '@getpara/react-sdk-lite';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  createParaMidenClient,\n  type Opts,\n  type MidenAccountStorageMode,\n  type CustomSignConfirmStep,\n} from '@miden-sdk/miden-para';\n\n/**\n * React hook that converts Para React SDK context into a ready-to-use Miden WebClient.\n * Spawns the client once a Para session with at least one EVM wallet is active.\n *\n * Returns:\n * - client: WebClient instance backed by the active Para session (or null while loading)\n * - accountId: Miden account id derived for the selected EVM wallet\n * - para: Para client instance from context\n * - evmWallets: filtered list of Para wallets with type === 'EVM'\n * - nodeUrl: Miden node endpoint used for the client\n * - opts: forwarded options used when creating the client\n * - showSigningModal: toggles the built-in signing modal\n * - customSignConfirmStep: optional callback for custom transaction confirmation flows\n */\nexport function useParaMiden(\n  nodeUrl: string,\n  storageMode: MidenAccountStorageMode = 'public',\n  opts: Omit<Opts, 'endpoint' | 'type' | 'storageMode'> = {},\n  showSigningModal: boolean = true,\n  customSignConfirmStep?: CustomSignConfirmStep\n) {\n  const para = useClient();\n  const { isConnected, embedded } = useAccount();\n  const clientRef = useRef<import('@miden-sdk/miden-sdk').WebClient | null>(\n    null\n  );\n  const [accountId, setAccountId] = useState<string>('');\n\n  const evmWallets = useMemo(\n    () => embedded.wallets?.filter((wallet) => wallet.type === 'EVM'),\n    [embedded.wallets]\n  );\n\n  useEffect(() => {\n    let cancelled = false;\n\n    async function setupClient() {\n      if (\n        !isConnected ||\n        !para ||\n        !embedded.wallets?.length ||\n        clientRef.current\n      ) {\n        return;\n      }\n\n      const { AccountType } = await import('@miden-sdk/miden-sdk');\n\n      const { client: midenParaClient, accountId: aId } =\n        await createParaMidenClient(\n          para,\n          evmWallets as Wallet[],\n          {\n            ...opts,\n            endpoint: nodeUrl,\n            type: AccountType.RegularAccountImmutableCode,\n            storageMode,\n          },\n          showSigningModal,\n          customSignConfirmStep\n        );\n\n      if (cancelled) {\n        return;\n      }\n\n      clientRef.current = midenParaClient;\n      setAccountId(aId);\n    }\n\n    setupClient();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    isConnected,\n    evmWallets,\n    para,\n    nodeUrl,\n    showSigningModal,\n    customSignConfirmStep,\n  ]);\n\n  return {\n    client: clientRef.current,\n    accountId,\n    para,\n    evmWallets,\n    nodeUrl,\n    opts,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,4BAAmD;AACnD,mBAAqD;AACrD,wBAKO;AAgBA,SAAS,aACd,SACA,cAAuC,UACvC,OAAwD,CAAC,GACzD,mBAA4B,MAC5B,uBACA;AACA,QAAM,WAAO,iCAAU;AACvB,QAAM,EAAE,aAAa,SAAS,QAAI,kCAAW;AAC7C,QAAM,gBAAY;AAAA,IAChB;AAAA,EACF;AACA,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAiB,EAAE;AAErD,QAAM,iBAAa;AAAA,IACjB,MAAG;AAxCP;AAwCU,4BAAS,YAAT,mBAAkB,OAAO,CAAC,WAAW,OAAO,SAAS;AAAA;AAAA,IAC3D,CAAC,SAAS,OAAO;AAAA,EACnB;AAEA,8BAAU,MAAM;AACd,QAAI,YAAY;AAEhB,mBAAe,cAAc;AA/CjC;AAgDM,UACE,CAAC,eACD,CAAC,QACD,GAAC,cAAS,YAAT,mBAAkB,WACnB,UAAU,SACV;AACA;AAAA,MACF;AAEA,YAAM,EAAE,YAAY,IAAI,MAAM,OAAO,sBAAsB;AAE3D,YAAM,EAAE,QAAQ,iBAAiB,WAAW,IAAI,IAC9C,UAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,UAAU;AAAA,UACV,MAAM,YAAY;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEF,UAAI,WAAW;AACb;AAAA,MACF;AAEA,gBAAU,UAAU;AACpB,mBAAa,GAAG;AAAA,IAClB;AAEA,gBAAY;AAEZ,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL,QAAQ,UAAU;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/useParaMiden.ts","../src/ParaSignerProvider.tsx"],"sourcesContent":["export { useParaMiden } from './useParaMiden';\nexport {\n  ParaSignerProvider,\n  useParaSigner,\n  useModal,\n  useLogout,\n  type ParaSignerProviderProps,\n  type ParaSignerExtras,\n} from './ParaSignerProvider';\n","'use client';\n\nimport { useClient, useAccount, type Wallet } from '@getpara/react-sdk-lite';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  createParaMidenClient,\n  type Opts,\n  type MidenAccountStorageMode,\n  type CustomSignConfirmStep,\n} from '@miden-sdk/miden-para';\n\n/**\n * React hook that converts Para React SDK context into a ready-to-use Miden WebClient.\n * Spawns the client once a Para session with at least one EVM wallet is active.\n *\n * Returns:\n * - client: WebClient instance backed by the active Para session (or null while loading)\n * - accountId: Miden account id derived for the selected EVM wallet\n * - para: Para client instance from context\n * - evmWallets: filtered list of Para wallets with type === 'EVM'\n * - nodeUrl: Miden node endpoint used for the client\n * - opts: forwarded options used when creating the client\n * - showSigningModal: toggles the built-in signing modal\n * - customSignConfirmStep: optional callback for custom transaction confirmation flows\n */\nexport function useParaMiden(\n  nodeUrl: string,\n  storageMode: MidenAccountStorageMode = 'public',\n  opts: Omit<Opts, 'endpoint' | 'type' | 'storageMode'> = {},\n  showSigningModal: boolean = true,\n  customSignConfirmStep?: CustomSignConfirmStep\n) {\n  const para = useClient();\n  const { isConnected, embedded } = useAccount();\n  const clientRef = useRef<import('@miden-sdk/miden-sdk').WebClient | null>(\n    null\n  );\n  const [accountId, setAccountId] = useState<string>('');\n\n  const evmWallets = useMemo(\n    () => embedded.wallets?.filter((wallet) => wallet.type === 'EVM'),\n    [embedded.wallets]\n  );\n\n  useEffect(() => {\n    let cancelled = false;\n\n    async function setupClient() {\n      if (\n        !isConnected ||\n        !para ||\n        !embedded.wallets?.length ||\n        clientRef.current\n      ) {\n        return;\n      }\n\n      const { AccountType } = await import('@miden-sdk/miden-sdk');\n\n      const { client: midenParaClient, accountId: aId } =\n        await createParaMidenClient(\n          para,\n          evmWallets as Wallet[],\n          {\n            ...opts,\n            endpoint: nodeUrl,\n            type: AccountType.RegularAccountImmutableCode,\n            storageMode,\n          },\n          showSigningModal,\n          customSignConfirmStep\n        );\n\n      if (cancelled) {\n        return;\n      }\n\n      clientRef.current = midenParaClient;\n      setAccountId(aId);\n    }\n\n    setupClient();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    isConnected,\n    evmWallets,\n    para,\n    nodeUrl,\n    showSigningModal,\n    customSignConfirmStep,\n  ]);\n\n  return {\n    client: clientRef.current,\n    accountId,\n    para,\n    evmWallets,\n    nodeUrl,\n    opts,\n  };\n}\n","import {\n  useState,\n  useEffect,\n  useCallback,\n  useRef,\n  createContext,\n  useContext,\n  type ReactNode,\n} from 'react';\nimport { ParaWeb, Environment, type Wallet } from '@getpara/web-sdk';\nimport {\n  ParaProvider,\n  useClient,\n  useModal,\n  useLogout,\n  type ParaProviderProps,\n} from '@getpara/react-sdk-lite';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { SignerContext, type SignerContextValue } from '@miden-sdk/react';\nimport { signCb as createSignCb, type CustomSignConfirmStep } from '@miden-sdk/miden-para';\nimport { evmPkToCommitment, getUncompressedPublicKeyFromWallet } from '@miden-sdk/miden-para';\n\n// Re-export Para hooks for convenience\nexport { useModal, useLogout } from '@getpara/react-sdk-lite';\n\nconst defaultQueryClient = new QueryClient();\n\n// PARA SIGNER PROVIDER\n// ================================================================================================\n\n/** Environment string values accepted by ParaSignerProvider */\nexport type ParaEnvironment = 'BETA' | 'PROD' | 'SANDBOX' | 'DEV' | 'DEVELOPMENT' | 'PRODUCTION';\n\n/**\n * Convert environment string to Environment enum value.\n * Handles the mapping safely for both ESM and CJS environments.\n */\nfunction getEnvironmentValue(env: ParaEnvironment): Environment {\n  // Handle aliases\n  const normalizedEnv = env === 'DEVELOPMENT' ? 'BETA' : env === 'PRODUCTION' ? 'PROD' : env;\n\n  // Try accessing the enum - Environment may be undefined in some test environments\n  if (Environment && typeof Environment === 'object') {\n    const value = Environment[normalizedEnv as keyof typeof Environment];\n    if (value !== undefined) return value;\n  }\n\n  // Fallback: return the string directly (Para SDK may accept string values)\n  return normalizedEnv as unknown as Environment;\n}\n\nexport interface ParaSignerProviderProps {\n  children: ReactNode;\n  /** Para API key */\n  apiKey: string;\n  /** Para environment (BETA, PROD, SANDBOX, DEV, DEVELOPMENT, PRODUCTION) */\n  environment: ParaEnvironment;\n  /** App name displayed in Para modal */\n  appName?: string;\n  /** Whether to show the signing modal for transaction confirmation */\n  showSigningModal?: boolean;\n  /** Custom sign confirmation step callback */\n  customSignConfirmStep?: CustomSignConfirmStep;\n  /**\n   * Optional custom QueryClient instance for React Query.\n   * If not provided, a default instance is used internally.\n   */\n  queryClient?: QueryClient;\n  /**\n   * Advanced: Additional config to pass to ParaProvider.\n   * Use this for customizing OAuth methods, external wallets, etc.\n   */\n  paraProviderConfig?: Partial<Omit<ParaProviderProps<any, any>, 'children' | 'paraClientConfig'>>;\n}\n\n/**\n * Para-specific extras exposed via useParaSigner hook.\n */\nexport interface ParaSignerExtras {\n  /** Para client instance */\n  para: ParaWeb;\n  /** Connected wallet (null if not connected) */\n  wallet: Wallet | null;\n}\n\nconst ParaSignerExtrasContext = createContext<ParaSignerExtras | null>(null);\n\n/**\n * ParaSignerProvider wraps MidenProvider to enable Para wallet signing.\n * Includes ParaProvider internally, so you don't need to wrap with it separately.\n *\n * @example\n * ```tsx\n * <ParaSignerProvider apiKey=\"your-api-key\" environment=\"BETA\" appName=\"My App\">\n *   <MidenProvider config={{ rpcUrl: \"testnet\" }}>\n *     <App />\n *   </MidenProvider>\n * </ParaSignerProvider>\n * ```\n */\nexport function ParaSignerProvider({\n  children,\n  apiKey,\n  environment,\n  appName = 'Miden App',\n  showSigningModal = true,\n  customSignConfirmStep,\n  queryClient,\n  paraProviderConfig,\n}: ParaSignerProviderProps) {\n  return (\n    <QueryClientProvider client={queryClient ?? defaultQueryClient}>\n      <ParaProvider\n        paraClientConfig={{\n          env: getEnvironmentValue(environment),\n          apiKey,\n        }}\n        config={{ appName }}\n        {...paraProviderConfig}\n      >\n        <ParaSignerProviderInner\n          showSigningModal={showSigningModal}\n          customSignConfirmStep={customSignConfirmStep}\n        >\n          {children}\n        </ParaSignerProviderInner>\n      </ParaProvider>\n    </QueryClientProvider>\n  );\n}\n\n/**\n * Inner component that has access to ParaProvider context (useModal, etc.)\n */\nfunction ParaSignerProviderInner({\n  children,\n  showSigningModal = true,\n  customSignConfirmStep,\n}: Pick<ParaSignerProviderProps, 'children' | 'showSigningModal' | 'customSignConfirmStep'>) {\n  // Access Para modal from ParaProvider.\n  // Store in refs to avoid re-render loops (these hooks return new objects each render).\n  const { openModal } = useModal();\n  const { logoutAsync } = useLogout();\n  const openModalRef = useRef(openModal);\n  const logoutAsyncRef = useRef(logoutAsync);\n  useEffect(() => { openModalRef.current = openModal; }, [openModal]);\n  useEffect(() => { logoutAsyncRef.current = logoutAsync; }, [logoutAsync]);\n\n  // Get the Para client from ParaProvider context (avoids creating a duplicate instance).\n  // Store in a ref so downstream effects don't re-fire when the hook returns a new wrapper.\n  const para = useClient()!;\n  const paraRef = useRef(para);\n  useEffect(() => { paraRef.current = para; }, [para]);\n\n  // Keep props in refs so buildContext doesn't re-run when parent re-renders with new closures.\n  const showSigningModalRef = useRef(showSigningModal);\n  const customSignConfirmStepRef = useRef(customSignConfirmStep);\n  useEffect(() => { showSigningModalRef.current = showSigningModal; }, [showSigningModal]);\n  useEffect(() => { customSignConfirmStepRef.current = customSignConfirmStep; }, [customSignConfirmStep]);\n\n  const [wallet, setWallet] = useState<Wallet | null>(null);\n  const [isConnected, setIsConnected] = useState(false);\n\n  // Check connection status on mount and periodically\n  useEffect(() => {\n    let cancelled = false;\n\n    async function checkConnection() {\n      try {\n        const isLoggedIn = await paraRef.current.isFullyLoggedIn();\n        if (!isLoggedIn || cancelled) {\n          setIsConnected(false);\n          setWallet(null);\n          return;\n        }\n\n        const wallets = Object.values(await paraRef.current.getWallets());\n        const evmWallets = wallets.filter((w) => w.type === 'EVM');\n\n        if (evmWallets.length > 0 && !cancelled) {\n          setWallet((prev) => prev?.id === evmWallets[0].id ? prev : evmWallets[0]);\n          setIsConnected(true);\n        } else if (!cancelled) {\n          setIsConnected(false);\n          setWallet(null);\n        }\n      } catch {\n        if (!cancelled) {\n          setIsConnected(false);\n          setWallet(null);\n        }\n      }\n    }\n\n    checkConnection();\n    const interval = setInterval(checkConnection, 2000);\n    return () => {\n      cancelled = true;\n      clearInterval(interval);\n    };\n  }, []);\n\n  // Connect opens the Para modal\n  const connect = useCallback(async () => {\n    openModalRef.current();\n  }, []);\n\n  // Disconnect logs out from Para\n  const disconnect = useCallback(async () => {\n    await logoutAsyncRef.current();\n    await paraRef.current.logout();\n    setIsConnected(false);\n    setWallet(null);\n  }, []);\n\n  // Build signer context (includes connect/disconnect for unified useSigner hook).\n  // Only depends on isConnected and wallet — everything else is accessed via refs\n  // so that MidenProvider doesn't see a new context object on every poll cycle.\n  //\n  // IMPORTANT: initialise with a disconnected placeholder (isConnected:false) rather\n  // than null.  When signerContext is null MidenProvider creates a local-keystore\n  // client whose auto-sync accesses the WASM module; our buildContext also touches\n  // WASM (evmPkToCommitment / AccountStorageMode) → concurrent WASM access → crash.\n  // A {isConnected:false} context makes MidenProvider's init effect return early\n  // without creating any client, keeping the WASM module free for buildContext.\n  const disconnectedCtx = useRef<SignerContextValue>({\n    signCb: async () => { throw new Error('Para wallet not connected'); },\n    accountConfig: null as any,\n    storeName: '',\n    name: 'Para',\n    isConnected: false,\n    connect,\n    disconnect,\n  });\n  const [signerContext, setSignerContext] = useState<SignerContextValue>(\n    disconnectedCtx.current\n  );\n\n  useEffect(() => {\n    let cancelled = false;\n\n    async function buildContext() {\n      if (!isConnected || !wallet) {\n        setSignerContext(disconnectedCtx.current);\n        return;\n      }\n\n      try {\n        // Connected - build full context with signing capability\n        const p = paraRef.current;\n        const publicKey = await getUncompressedPublicKeyFromWallet(p, wallet);\n        if (!publicKey) throw new Error('Failed to get public key from wallet');\n        const commitment = await evmPkToCommitment(publicKey);\n\n        // Serialize the commitment Word to Uint8Array for SignerAccountConfig\n        const commitmentBytes = commitment.serialize();\n\n        const signCallback = createSignCb(\n          p,\n          wallet,\n          showSigningModalRef.current,\n          customSignConfirmStepRef.current\n        );\n\n        if (!cancelled) {\n          const { AccountStorageMode } = await import(\n            '@miden-sdk/miden-sdk'\n          );\n\n          setSignerContext({\n            signCb: signCallback,\n            accountConfig: {\n              publicKeyCommitment: commitmentBytes,\n              accountType: 'RegularAccountImmutableCode',\n              storageMode: AccountStorageMode.public(),\n            },\n            storeName: `para_${wallet.id}`,\n            name: 'Para',\n            isConnected: true,\n            connect,\n            disconnect,\n          });\n        }\n      } catch (error) {\n        console.error('Failed to build Para signer context:', error);\n        if (!cancelled) {\n          setSignerContext(disconnectedCtx.current);\n        }\n      }\n    }\n\n    buildContext();\n    return () => {\n      cancelled = true;\n    };\n  }, [isConnected, wallet, connect, disconnect]);\n\n  return (\n    <ParaSignerExtrasContext.Provider value={{ para, wallet }}>\n      <SignerContext.Provider value={signerContext}>\n        {children}\n      </SignerContext.Provider>\n    </ParaSignerExtrasContext.Provider>\n  );\n}\n\n/**\n * Hook for Para-specific extras beyond the unified useSigner interface.\n * Use this to access the Para client or wallet details directly.\n *\n * @example\n * ```tsx\n * const { para, wallet, isConnected } = useParaSigner();\n * ```\n */\nexport function useParaSigner(): ParaSignerExtras & { isConnected: boolean } {\n  const extras = useContext(ParaSignerExtrasContext);\n  const signer = useContext(SignerContext);\n  if (!extras) {\n    throw new Error('useParaSigner must be used within ParaSignerProvider');\n  }\n  return { ...extras, isConnected: signer?.isConnected ?? false };\n}\n"],"mappings":"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","names":["import_react","import_react_sdk_lite","import_miden_para","createSignCb"]}

package/dist/index.mjs

@@ -65,7 +65,218 @@ function useParaMiden(nodeUrl, storageMode = "public", opts = {}, showSigningMod
     opts
   };
 }
+
+// src/ParaSignerProvider.tsx
+import {
+  useState as useState2,
+  useEffect as useEffect2,
+  useCallback,
+  useRef as useRef2,
+  createContext,
+  useContext
+} from "react";
+import { Environment } from "@getpara/web-sdk";
+import {
+  ParaProvider,
+  useClient as useClient2,
+  useModal,
+  useLogout
+} from "@getpara/react-sdk-lite";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { SignerContext } from "@miden-sdk/react";
+import { signCb as createSignCb } from "@miden-sdk/miden-para";
+import { evmPkToCommitment, getUncompressedPublicKeyFromWallet } from "@miden-sdk/miden-para";
+import { useModal as useModal2, useLogout as useLogout2 } from "@getpara/react-sdk-lite";
+import { jsx } from "react/jsx-runtime";
+var defaultQueryClient = new QueryClient();
+function getEnvironmentValue(env) {
+  const normalizedEnv = env === "DEVELOPMENT" ? "BETA" : env === "PRODUCTION" ? "PROD" : env;
+  if (Environment && typeof Environment === "object") {
+    const value = Environment[normalizedEnv];
+    if (value !== void 0) return value;
+  }
+  return normalizedEnv;
+}
+var ParaSignerExtrasContext = createContext(null);
+function ParaSignerProvider({
+  children,
+  apiKey,
+  environment,
+  appName = "Miden App",
+  showSigningModal = true,
+  customSignConfirmStep,
+  queryClient,
+  paraProviderConfig
+}) {
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient != null ? queryClient : defaultQueryClient, children: /* @__PURE__ */ jsx(
+    ParaProvider,
+    {
+      paraClientConfig: {
+        env: getEnvironmentValue(environment),
+        apiKey
+      },
+      config: { appName },
+      ...paraProviderConfig,
+      children: /* @__PURE__ */ jsx(
+        ParaSignerProviderInner,
+        {
+          showSigningModal,
+          customSignConfirmStep,
+          children
+        }
+      )
+    }
+  ) });
+}
+function ParaSignerProviderInner({
+  children,
+  showSigningModal = true,
+  customSignConfirmStep
+}) {
+  const { openModal } = useModal();
+  const { logoutAsync } = useLogout();
+  const openModalRef = useRef2(openModal);
+  const logoutAsyncRef = useRef2(logoutAsync);
+  useEffect2(() => {
+    openModalRef.current = openModal;
+  }, [openModal]);
+  useEffect2(() => {
+    logoutAsyncRef.current = logoutAsync;
+  }, [logoutAsync]);
+  const para = useClient2();
+  const paraRef = useRef2(para);
+  useEffect2(() => {
+    paraRef.current = para;
+  }, [para]);
+  const showSigningModalRef = useRef2(showSigningModal);
+  const customSignConfirmStepRef = useRef2(customSignConfirmStep);
+  useEffect2(() => {
+    showSigningModalRef.current = showSigningModal;
+  }, [showSigningModal]);
+  useEffect2(() => {
+    customSignConfirmStepRef.current = customSignConfirmStep;
+  }, [customSignConfirmStep]);
+  const [wallet, setWallet] = useState2(null);
+  const [isConnected, setIsConnected] = useState2(false);
+  useEffect2(() => {
+    let cancelled = false;
+    async function checkConnection() {
+      try {
+        const isLoggedIn = await paraRef.current.isFullyLoggedIn();
+        if (!isLoggedIn || cancelled) {
+          setIsConnected(false);
+          setWallet(null);
+          return;
+        }
+        const wallets = Object.values(await paraRef.current.getWallets());
+        const evmWallets = wallets.filter((w) => w.type === "EVM");
+        if (evmWallets.length > 0 && !cancelled) {
+          setWallet((prev) => (prev == null ? void 0 : prev.id) === evmWallets[0].id ? prev : evmWallets[0]);
+          setIsConnected(true);
+        } else if (!cancelled) {
+          setIsConnected(false);
+          setWallet(null);
+        }
+      } catch {
+        if (!cancelled) {
+          setIsConnected(false);
+          setWallet(null);
+        }
+      }
+    }
+    checkConnection();
+    const interval = setInterval(checkConnection, 2e3);
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, []);
+  const connect = useCallback(async () => {
+    openModalRef.current();
+  }, []);
+  const disconnect = useCallback(async () => {
+    await logoutAsyncRef.current();
+    await paraRef.current.logout();
+    setIsConnected(false);
+    setWallet(null);
+  }, []);
+  const disconnectedCtx = useRef2({
+    signCb: async () => {
+      throw new Error("Para wallet not connected");
+    },
+    accountConfig: null,
+    storeName: "",
+    name: "Para",
+    isConnected: false,
+    connect,
+    disconnect
+  });
+  const [signerContext, setSignerContext] = useState2(
+    disconnectedCtx.current
+  );
+  useEffect2(() => {
+    let cancelled = false;
+    async function buildContext() {
+      if (!isConnected || !wallet) {
+        setSignerContext(disconnectedCtx.current);
+        return;
+      }
+      try {
+        const p = paraRef.current;
+        const publicKey = await getUncompressedPublicKeyFromWallet(p, wallet);
+        if (!publicKey) throw new Error("Failed to get public key from wallet");
+        const commitment = await evmPkToCommitment(publicKey);
+        const commitmentBytes = commitment.serialize();
+        const signCallback = createSignCb(
+          p,
+          wallet,
+          showSigningModalRef.current,
+          customSignConfirmStepRef.current
+        );
+        if (!cancelled) {
+          const { AccountStorageMode } = await import("@miden-sdk/miden-sdk");
+          setSignerContext({
+            signCb: signCallback,
+            accountConfig: {
+              publicKeyCommitment: commitmentBytes,
+              accountType: "RegularAccountImmutableCode",
+              storageMode: AccountStorageMode.public()
+            },
+            storeName: `para_${wallet.id}`,
+            name: "Para",
+            isConnected: true,
+            connect,
+            disconnect
+          });
+        }
+      } catch (error) {
+        console.error("Failed to build Para signer context:", error);
+        if (!cancelled) {
+          setSignerContext(disconnectedCtx.current);
+        }
+      }
+    }
+    buildContext();
+    return () => {
+      cancelled = true;
+    };
+  }, [isConnected, wallet, connect, disconnect]);
+  return /* @__PURE__ */ jsx(ParaSignerExtrasContext.Provider, { value: { para, wallet }, children: /* @__PURE__ */ jsx(SignerContext.Provider, { value: signerContext, children }) });
+}
+function useParaSigner() {
+  var _a;
+  const extras = useContext(ParaSignerExtrasContext);
+  const signer = useContext(SignerContext);
+  if (!extras) {
+    throw new Error("useParaSigner must be used within ParaSignerProvider");
+  }
+  return { ...extras, isConnected: (_a = signer == null ? void 0 : signer.isConnected) != null ? _a : false };
+}
 export {
-  useParaMiden
+  ParaSignerProvider,
+  useLogout2 as useLogout,
+  useModal2 as useModal,
+  useParaMiden,
+  useParaSigner
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useParaMiden.ts"],"sourcesContent":["'use client';\n\nimport { useClient, useAccount, type Wallet } from '@getpara/react-sdk-lite';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  createParaMidenClient,\n  type Opts,\n  type MidenAccountStorageMode,\n  type CustomSignConfirmStep,\n} from '@miden-sdk/miden-para';\n\n/**\n * React hook that converts Para React SDK context into a ready-to-use Miden WebClient.\n * Spawns the client once a Para session with at least one EVM wallet is active.\n *\n * Returns:\n * - client: WebClient instance backed by the active Para session (or null while loading)\n * - accountId: Miden account id derived for the selected EVM wallet\n * - para: Para client instance from context\n * - evmWallets: filtered list of Para wallets with type === 'EVM'\n * - nodeUrl: Miden node endpoint used for the client\n * - opts: forwarded options used when creating the client\n * - showSigningModal: toggles the built-in signing modal\n * - customSignConfirmStep: optional callback for custom transaction confirmation flows\n */\nexport function useParaMiden(\n  nodeUrl: string,\n  storageMode: MidenAccountStorageMode = 'public',\n  opts: Omit<Opts, 'endpoint' | 'type' | 'storageMode'> = {},\n  showSigningModal: boolean = true,\n  customSignConfirmStep?: CustomSignConfirmStep\n) {\n  const para = useClient();\n  const { isConnected, embedded } = useAccount();\n  const clientRef = useRef<import('@miden-sdk/miden-sdk').WebClient | null>(\n    null\n  );\n  const [accountId, setAccountId] = useState<string>('');\n\n  const evmWallets = useMemo(\n    () => embedded.wallets?.filter((wallet) => wallet.type === 'EVM'),\n    [embedded.wallets]\n  );\n\n  useEffect(() => {\n    let cancelled = false;\n\n    async function setupClient() {\n      if (\n        !isConnected ||\n        !para ||\n        !embedded.wallets?.length ||\n        clientRef.current\n      ) {\n        return;\n      }\n\n      const { AccountType } = await import('@miden-sdk/miden-sdk');\n\n      const { client: midenParaClient, accountId: aId } =\n        await createParaMidenClient(\n          para,\n          evmWallets as Wallet[],\n          {\n            ...opts,\n            endpoint: nodeUrl,\n            type: AccountType.RegularAccountImmutableCode,\n            storageMode,\n          },\n          showSigningModal,\n          customSignConfirmStep\n        );\n\n      if (cancelled) {\n        return;\n      }\n\n      clientRef.current = midenParaClient;\n      setAccountId(aId);\n    }\n\n    setupClient();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    isConnected,\n    evmWallets,\n    para,\n    nodeUrl,\n    showSigningModal,\n    customSignConfirmStep,\n  ]);\n\n  return {\n    client: clientRef.current,\n    accountId,\n    para,\n    evmWallets,\n    nodeUrl,\n    opts,\n  };\n}\n"],"mappings":";AAEA,SAAS,WAAW,kBAA+B;AACnD,SAAS,WAAW,SAAS,QAAQ,gBAAgB;AACrD;AAAA,EACE;AAAA,OAIK;AAgBA,SAAS,aACd,SACA,cAAuC,UACvC,OAAwD,CAAC,GACzD,mBAA4B,MAC5B,uBACA;AACA,QAAM,OAAO,UAAU;AACvB,QAAM,EAAE,aAAa,SAAS,IAAI,WAAW;AAC7C,QAAM,YAAY;AAAA,IAChB;AAAA,EACF;AACA,QAAM,CAAC,WAAW,YAAY,IAAI,SAAiB,EAAE;AAErD,QAAM,aAAa;AAAA,IACjB,MAAG;AAxCP;AAwCU,4BAAS,YAAT,mBAAkB,OAAO,CAAC,WAAW,OAAO,SAAS;AAAA;AAAA,IAC3D,CAAC,SAAS,OAAO;AAAA,EACnB;AAEA,YAAU,MAAM;AACd,QAAI,YAAY;AAEhB,mBAAe,cAAc;AA/CjC;AAgDM,UACE,CAAC,eACD,CAAC,QACD,GAAC,cAAS,YAAT,mBAAkB,WACnB,UAAU,SACV;AACA;AAAA,MACF;AAEA,YAAM,EAAE,YAAY,IAAI,MAAM,OAAO,sBAAsB;AAE3D,YAAM,EAAE,QAAQ,iBAAiB,WAAW,IAAI,IAC9C,MAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,UAAU;AAAA,UACV,MAAM,YAAY;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEF,UAAI,WAAW;AACb;AAAA,MACF;AAEA,gBAAU,UAAU;AACpB,mBAAa,GAAG;AAAA,IAClB;AAEA,gBAAY;AAEZ,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL,QAAQ,UAAU;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../src/useParaMiden.ts","../src/ParaSignerProvider.tsx"],"sourcesContent":["'use client';\n\nimport { useClient, useAccount, type Wallet } from '@getpara/react-sdk-lite';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  createParaMidenClient,\n  type Opts,\n  type MidenAccountStorageMode,\n  type CustomSignConfirmStep,\n} from '@miden-sdk/miden-para';\n\n/**\n * React hook that converts Para React SDK context into a ready-to-use Miden WebClient.\n * Spawns the client once a Para session with at least one EVM wallet is active.\n *\n * Returns:\n * - client: WebClient instance backed by the active Para session (or null while loading)\n * - accountId: Miden account id derived for the selected EVM wallet\n * - para: Para client instance from context\n * - evmWallets: filtered list of Para wallets with type === 'EVM'\n * - nodeUrl: Miden node endpoint used for the client\n * - opts: forwarded options used when creating the client\n * - showSigningModal: toggles the built-in signing modal\n * - customSignConfirmStep: optional callback for custom transaction confirmation flows\n */\nexport function useParaMiden(\n  nodeUrl: string,\n  storageMode: MidenAccountStorageMode = 'public',\n  opts: Omit<Opts, 'endpoint' | 'type' | 'storageMode'> = {},\n  showSigningModal: boolean = true,\n  customSignConfirmStep?: CustomSignConfirmStep\n) {\n  const para = useClient();\n  const { isConnected, embedded } = useAccount();\n  const clientRef = useRef<import('@miden-sdk/miden-sdk').WebClient | null>(\n    null\n  );\n  const [accountId, setAccountId] = useState<string>('');\n\n  const evmWallets = useMemo(\n    () => embedded.wallets?.filter((wallet) => wallet.type === 'EVM'),\n    [embedded.wallets]\n  );\n\n  useEffect(() => {\n    let cancelled = false;\n\n    async function setupClient() {\n      if (\n        !isConnected ||\n        !para ||\n        !embedded.wallets?.length ||\n        clientRef.current\n      ) {\n        return;\n      }\n\n      const { AccountType } = await import('@miden-sdk/miden-sdk');\n\n      const { client: midenParaClient, accountId: aId } =\n        await createParaMidenClient(\n          para,\n          evmWallets as Wallet[],\n          {\n            ...opts,\n            endpoint: nodeUrl,\n            type: AccountType.RegularAccountImmutableCode,\n            storageMode,\n          },\n          showSigningModal,\n          customSignConfirmStep\n        );\n\n      if (cancelled) {\n        return;\n      }\n\n      clientRef.current = midenParaClient;\n      setAccountId(aId);\n    }\n\n    setupClient();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    isConnected,\n    evmWallets,\n    para,\n    nodeUrl,\n    showSigningModal,\n    customSignConfirmStep,\n  ]);\n\n  return {\n    client: clientRef.current,\n    accountId,\n    para,\n    evmWallets,\n    nodeUrl,\n    opts,\n  };\n}\n","import {\n  useState,\n  useEffect,\n  useCallback,\n  useRef,\n  createContext,\n  useContext,\n  type ReactNode,\n} from 'react';\nimport { ParaWeb, Environment, type Wallet } from '@getpara/web-sdk';\nimport {\n  ParaProvider,\n  useClient,\n  useModal,\n  useLogout,\n  type ParaProviderProps,\n} from '@getpara/react-sdk-lite';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { SignerContext, type SignerContextValue } from '@miden-sdk/react';\nimport { signCb as createSignCb, type CustomSignConfirmStep } from '@miden-sdk/miden-para';\nimport { evmPkToCommitment, getUncompressedPublicKeyFromWallet } from '@miden-sdk/miden-para';\n\n// Re-export Para hooks for convenience\nexport { useModal, useLogout } from '@getpara/react-sdk-lite';\n\nconst defaultQueryClient = new QueryClient();\n\n// PARA SIGNER PROVIDER\n// ================================================================================================\n\n/** Environment string values accepted by ParaSignerProvider */\nexport type ParaEnvironment = 'BETA' | 'PROD' | 'SANDBOX' | 'DEV' | 'DEVELOPMENT' | 'PRODUCTION';\n\n/**\n * Convert environment string to Environment enum value.\n * Handles the mapping safely for both ESM and CJS environments.\n */\nfunction getEnvironmentValue(env: ParaEnvironment): Environment {\n  // Handle aliases\n  const normalizedEnv = env === 'DEVELOPMENT' ? 'BETA' : env === 'PRODUCTION' ? 'PROD' : env;\n\n  // Try accessing the enum - Environment may be undefined in some test environments\n  if (Environment && typeof Environment === 'object') {\n    const value = Environment[normalizedEnv as keyof typeof Environment];\n    if (value !== undefined) return value;\n  }\n\n  // Fallback: return the string directly (Para SDK may accept string values)\n  return normalizedEnv as unknown as Environment;\n}\n\nexport interface ParaSignerProviderProps {\n  children: ReactNode;\n  /** Para API key */\n  apiKey: string;\n  /** Para environment (BETA, PROD, SANDBOX, DEV, DEVELOPMENT, PRODUCTION) */\n  environment: ParaEnvironment;\n  /** App name displayed in Para modal */\n  appName?: string;\n  /** Whether to show the signing modal for transaction confirmation */\n  showSigningModal?: boolean;\n  /** Custom sign confirmation step callback */\n  customSignConfirmStep?: CustomSignConfirmStep;\n  /**\n   * Optional custom QueryClient instance for React Query.\n   * If not provided, a default instance is used internally.\n   */\n  queryClient?: QueryClient;\n  /**\n   * Advanced: Additional config to pass to ParaProvider.\n   * Use this for customizing OAuth methods, external wallets, etc.\n   */\n  paraProviderConfig?: Partial<Omit<ParaProviderProps<any, any>, 'children' | 'paraClientConfig'>>;\n}\n\n/**\n * Para-specific extras exposed via useParaSigner hook.\n */\nexport interface ParaSignerExtras {\n  /** Para client instance */\n  para: ParaWeb;\n  /** Connected wallet (null if not connected) */\n  wallet: Wallet | null;\n}\n\nconst ParaSignerExtrasContext = createContext<ParaSignerExtras | null>(null);\n\n/**\n * ParaSignerProvider wraps MidenProvider to enable Para wallet signing.\n * Includes ParaProvider internally, so you don't need to wrap with it separately.\n *\n * @example\n * ```tsx\n * <ParaSignerProvider apiKey=\"your-api-key\" environment=\"BETA\" appName=\"My App\">\n *   <MidenProvider config={{ rpcUrl: \"testnet\" }}>\n *     <App />\n *   </MidenProvider>\n * </ParaSignerProvider>\n * ```\n */\nexport function ParaSignerProvider({\n  children,\n  apiKey,\n  environment,\n  appName = 'Miden App',\n  showSigningModal = true,\n  customSignConfirmStep,\n  queryClient,\n  paraProviderConfig,\n}: ParaSignerProviderProps) {\n  return (\n    <QueryClientProvider client={queryClient ?? defaultQueryClient}>\n      <ParaProvider\n        paraClientConfig={{\n          env: getEnvironmentValue(environment),\n          apiKey,\n        }}\n        config={{ appName }}\n        {...paraProviderConfig}\n      >\n        <ParaSignerProviderInner\n          showSigningModal={showSigningModal}\n          customSignConfirmStep={customSignConfirmStep}\n        >\n          {children}\n        </ParaSignerProviderInner>\n      </ParaProvider>\n    </QueryClientProvider>\n  );\n}\n\n/**\n * Inner component that has access to ParaProvider context (useModal, etc.)\n */\nfunction ParaSignerProviderInner({\n  children,\n  showSigningModal = true,\n  customSignConfirmStep,\n}: Pick<ParaSignerProviderProps, 'children' | 'showSigningModal' | 'customSignConfirmStep'>) {\n  // Access Para modal from ParaProvider.\n  // Store in refs to avoid re-render loops (these hooks return new objects each render).\n  const { openModal } = useModal();\n  const { logoutAsync } = useLogout();\n  const openModalRef = useRef(openModal);\n  const logoutAsyncRef = useRef(logoutAsync);\n  useEffect(() => { openModalRef.current = openModal; }, [openModal]);\n  useEffect(() => { logoutAsyncRef.current = logoutAsync; }, [logoutAsync]);\n\n  // Get the Para client from ParaProvider context (avoids creating a duplicate instance).\n  // Store in a ref so downstream effects don't re-fire when the hook returns a new wrapper.\n  const para = useClient()!;\n  const paraRef = useRef(para);\n  useEffect(() => { paraRef.current = para; }, [para]);\n\n  // Keep props in refs so buildContext doesn't re-run when parent re-renders with new closures.\n  const showSigningModalRef = useRef(showSigningModal);\n  const customSignConfirmStepRef = useRef(customSignConfirmStep);\n  useEffect(() => { showSigningModalRef.current = showSigningModal; }, [showSigningModal]);\n  useEffect(() => { customSignConfirmStepRef.current = customSignConfirmStep; }, [customSignConfirmStep]);\n\n  const [wallet, setWallet] = useState<Wallet | null>(null);\n  const [isConnected, setIsConnected] = useState(false);\n\n  // Check connection status on mount and periodically\n  useEffect(() => {\n    let cancelled = false;\n\n    async function checkConnection() {\n      try {\n        const isLoggedIn = await paraRef.current.isFullyLoggedIn();\n        if (!isLoggedIn || cancelled) {\n          setIsConnected(false);\n          setWallet(null);\n          return;\n        }\n\n        const wallets = Object.values(await paraRef.current.getWallets());\n        const evmWallets = wallets.filter((w) => w.type === 'EVM');\n\n        if (evmWallets.length > 0 && !cancelled) {\n          setWallet((prev) => prev?.id === evmWallets[0].id ? prev : evmWallets[0]);\n          setIsConnected(true);\n        } else if (!cancelled) {\n          setIsConnected(false);\n          setWallet(null);\n        }\n      } catch {\n        if (!cancelled) {\n          setIsConnected(false);\n          setWallet(null);\n        }\n      }\n    }\n\n    checkConnection();\n    const interval = setInterval(checkConnection, 2000);\n    return () => {\n      cancelled = true;\n      clearInterval(interval);\n    };\n  }, []);\n\n  // Connect opens the Para modal\n  const connect = useCallback(async () => {\n    openModalRef.current();\n  }, []);\n\n  // Disconnect logs out from Para\n  const disconnect = useCallback(async () => {\n    await logoutAsyncRef.current();\n    await paraRef.current.logout();\n    setIsConnected(false);\n    setWallet(null);\n  }, []);\n\n  // Build signer context (includes connect/disconnect for unified useSigner hook).\n  // Only depends on isConnected and wallet — everything else is accessed via refs\n  // so that MidenProvider doesn't see a new context object on every poll cycle.\n  //\n  // IMPORTANT: initialise with a disconnected placeholder (isConnected:false) rather\n  // than null.  When signerContext is null MidenProvider creates a local-keystore\n  // client whose auto-sync accesses the WASM module; our buildContext also touches\n  // WASM (evmPkToCommitment / AccountStorageMode) → concurrent WASM access → crash.\n  // A {isConnected:false} context makes MidenProvider's init effect return early\n  // without creating any client, keeping the WASM module free for buildContext.\n  const disconnectedCtx = useRef<SignerContextValue>({\n    signCb: async () => { throw new Error('Para wallet not connected'); },\n    accountConfig: null as any,\n    storeName: '',\n    name: 'Para',\n    isConnected: false,\n    connect,\n    disconnect,\n  });\n  const [signerContext, setSignerContext] = useState<SignerContextValue>(\n    disconnectedCtx.current\n  );\n\n  useEffect(() => {\n    let cancelled = false;\n\n    async function buildContext() {\n      if (!isConnected || !wallet) {\n        setSignerContext(disconnectedCtx.current);\n        return;\n      }\n\n      try {\n        // Connected - build full context with signing capability\n        const p = paraRef.current;\n        const publicKey = await getUncompressedPublicKeyFromWallet(p, wallet);\n        if (!publicKey) throw new Error('Failed to get public key from wallet');\n        const commitment = await evmPkToCommitment(publicKey);\n\n        // Serialize the commitment Word to Uint8Array for SignerAccountConfig\n        const commitmentBytes = commitment.serialize();\n\n        const signCallback = createSignCb(\n          p,\n          wallet,\n          showSigningModalRef.current,\n          customSignConfirmStepRef.current\n        );\n\n        if (!cancelled) {\n          const { AccountStorageMode } = await import(\n            '@miden-sdk/miden-sdk'\n          );\n\n          setSignerContext({\n            signCb: signCallback,\n            accountConfig: {\n              publicKeyCommitment: commitmentBytes,\n              accountType: 'RegularAccountImmutableCode',\n              storageMode: AccountStorageMode.public(),\n            },\n            storeName: `para_${wallet.id}`,\n            name: 'Para',\n            isConnected: true,\n            connect,\n            disconnect,\n          });\n        }\n      } catch (error) {\n        console.error('Failed to build Para signer context:', error);\n        if (!cancelled) {\n          setSignerContext(disconnectedCtx.current);\n        }\n      }\n    }\n\n    buildContext();\n    return () => {\n      cancelled = true;\n    };\n  }, [isConnected, wallet, connect, disconnect]);\n\n  return (\n    <ParaSignerExtrasContext.Provider value={{ para, wallet }}>\n      <SignerContext.Provider value={signerContext}>\n        {children}\n      </SignerContext.Provider>\n    </ParaSignerExtrasContext.Provider>\n  );\n}\n\n/**\n * Hook for Para-specific extras beyond the unified useSigner interface.\n * Use this to access the Para client or wallet details directly.\n *\n * @example\n * ```tsx\n * const { para, wallet, isConnected } = useParaSigner();\n * ```\n */\nexport function useParaSigner(): ParaSignerExtras & { isConnected: boolean } {\n  const extras = useContext(ParaSignerExtrasContext);\n  const signer = useContext(SignerContext);\n  if (!extras) {\n    throw new Error('useParaSigner must be used within ParaSignerProvider');\n  }\n  return { ...extras, isConnected: signer?.isConnected ?? false };\n}\n"],"mappings":"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","names":["useState","useEffect","useRef","useClient","useModal","useLogout"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miden-sdk/use-miden-para-react",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "description": "React hook that wires Para accounts into a Miden client",
   "license": "MIT",
   "author": "Miden Labs",
@@ -38,15 +38,21 @@
   "peerDependencies": {
     "@miden-sdk/miden-sdk": "^0.13.0",
     "@getpara/react-sdk-lite": "^2.2.0",
+    "@getpara/web-sdk": "2.0.0-alpha.73",
     "@miden-sdk/miden-para": "^0.13.0",
+    "@miden-sdk/react": "^0.13.1",
+    "@tanstack/react-query": "^5.0.0",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@miden-sdk/miden-sdk": "^0.13.0",
+    "@getpara/react-sdk-lite": "^2.3.0",
+    "@getpara/web-sdk": "2.0.0-alpha.73",
+    "@miden-sdk/react": "^0.13.1",
+    "@tanstack/react-query": "^5.90.12",
     "@types/react": "^19.2.5",
     "tsup": "^8.3.0",
-    "typescript": "^5.9.3",
-    "@getpara/react-sdk-lite": "^2.3.0"
+    "typescript": "^5.9.3"
   },
   "engines": {
     "node": ">=18"

package/src/ParaSignerProvider.tsx

@@ -0,0 +1,323 @@
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  createContext,
+  useContext,
+  type ReactNode,
+} from 'react';
+import { ParaWeb, Environment, type Wallet } from '@getpara/web-sdk';
+import {
+  ParaProvider,
+  useClient,
+  useModal,
+  useLogout,
+  type ParaProviderProps,
+} from '@getpara/react-sdk-lite';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { SignerContext, type SignerContextValue } from '@miden-sdk/react';
+import { signCb as createSignCb, type CustomSignConfirmStep } from '@miden-sdk/miden-para';
+import { evmPkToCommitment, getUncompressedPublicKeyFromWallet } from '@miden-sdk/miden-para';
+
+// Re-export Para hooks for convenience
+export { useModal, useLogout } from '@getpara/react-sdk-lite';
+
+const defaultQueryClient = new QueryClient();
+
+// PARA SIGNER PROVIDER
+// ================================================================================================
+
+/** Environment string values accepted by ParaSignerProvider */
+export type ParaEnvironment = 'BETA' | 'PROD' | 'SANDBOX' | 'DEV' | 'DEVELOPMENT' | 'PRODUCTION';
+
+/**
+ * Convert environment string to Environment enum value.
+ * Handles the mapping safely for both ESM and CJS environments.
+ */
+function getEnvironmentValue(env: ParaEnvironment): Environment {
+  // Handle aliases
+  const normalizedEnv = env === 'DEVELOPMENT' ? 'BETA' : env === 'PRODUCTION' ? 'PROD' : env;
+
+  // Try accessing the enum - Environment may be undefined in some test environments
+  if (Environment && typeof Environment === 'object') {
+    const value = Environment[normalizedEnv as keyof typeof Environment];
+    if (value !== undefined) return value;
+  }
+
+  // Fallback: return the string directly (Para SDK may accept string values)
+  return normalizedEnv as unknown as Environment;
+}
+
+export interface ParaSignerProviderProps {
+  children: ReactNode;
+  /** Para API key */
+  apiKey: string;
+  /** Para environment (BETA, PROD, SANDBOX, DEV, DEVELOPMENT, PRODUCTION) */
+  environment: ParaEnvironment;
+  /** App name displayed in Para modal */
+  appName?: string;
+  /** Whether to show the signing modal for transaction confirmation */
+  showSigningModal?: boolean;
+  /** Custom sign confirmation step callback */
+  customSignConfirmStep?: CustomSignConfirmStep;
+  /**
+   * Optional custom QueryClient instance for React Query.
+   * If not provided, a default instance is used internally.
+   */
+  queryClient?: QueryClient;
+  /**
+   * Advanced: Additional config to pass to ParaProvider.
+   * Use this for customizing OAuth methods, external wallets, etc.
+   */
+  paraProviderConfig?: Partial<Omit<ParaProviderProps<any, any>, 'children' | 'paraClientConfig'>>;
+}
+
+/**
+ * Para-specific extras exposed via useParaSigner hook.
+ */
+export interface ParaSignerExtras {
+  /** Para client instance */
+  para: ParaWeb;
+  /** Connected wallet (null if not connected) */
+  wallet: Wallet | null;
+}
+
+const ParaSignerExtrasContext = createContext<ParaSignerExtras | null>(null);
+
+/**
+ * ParaSignerProvider wraps MidenProvider to enable Para wallet signing.
+ * Includes ParaProvider internally, so you don't need to wrap with it separately.
+ *
+ * @example
+ * ```tsx
+ * <ParaSignerProvider apiKey="your-api-key" environment="BETA" appName="My App">
+ *   <MidenProvider config={{ rpcUrl: "testnet" }}>
+ *     <App />
+ *   </MidenProvider>
+ * </ParaSignerProvider>
+ * ```
+ */
+export function ParaSignerProvider({
+  children,
+  apiKey,
+  environment,
+  appName = 'Miden App',
+  showSigningModal = true,
+  customSignConfirmStep,
+  queryClient,
+  paraProviderConfig,
+}: ParaSignerProviderProps) {
+  return (
+    <QueryClientProvider client={queryClient ?? defaultQueryClient}>
+      <ParaProvider
+        paraClientConfig={{
+          env: getEnvironmentValue(environment),
+          apiKey,
+        }}
+        config={{ appName }}
+        {...paraProviderConfig}
+      >
+        <ParaSignerProviderInner
+          showSigningModal={showSigningModal}
+          customSignConfirmStep={customSignConfirmStep}
+        >
+          {children}
+        </ParaSignerProviderInner>
+      </ParaProvider>
+    </QueryClientProvider>
+  );
+}
+
+/**
+ * Inner component that has access to ParaProvider context (useModal, etc.)
+ */
+function ParaSignerProviderInner({
+  children,
+  showSigningModal = true,
+  customSignConfirmStep,
+}: Pick<ParaSignerProviderProps, 'children' | 'showSigningModal' | 'customSignConfirmStep'>) {
+  // Access Para modal from ParaProvider.
+  // Store in refs to avoid re-render loops (these hooks return new objects each render).
+  const { openModal } = useModal();
+  const { logoutAsync } = useLogout();
+  const openModalRef = useRef(openModal);
+  const logoutAsyncRef = useRef(logoutAsync);
+  useEffect(() => { openModalRef.current = openModal; }, [openModal]);
+  useEffect(() => { logoutAsyncRef.current = logoutAsync; }, [logoutAsync]);
+
+  // Get the Para client from ParaProvider context (avoids creating a duplicate instance).
+  // Store in a ref so downstream effects don't re-fire when the hook returns a new wrapper.
+  const para = useClient()!;
+  const paraRef = useRef(para);
+  useEffect(() => { paraRef.current = para; }, [para]);
+
+  // Keep props in refs so buildContext doesn't re-run when parent re-renders with new closures.
+  const showSigningModalRef = useRef(showSigningModal);
+  const customSignConfirmStepRef = useRef(customSignConfirmStep);
+  useEffect(() => { showSigningModalRef.current = showSigningModal; }, [showSigningModal]);
+  useEffect(() => { customSignConfirmStepRef.current = customSignConfirmStep; }, [customSignConfirmStep]);
+
+  const [wallet, setWallet] = useState<Wallet | null>(null);
+  const [isConnected, setIsConnected] = useState(false);
+
+  // Check connection status on mount and periodically
+  useEffect(() => {
+    let cancelled = false;
+
+    async function checkConnection() {
+      try {
+        const isLoggedIn = await paraRef.current.isFullyLoggedIn();
+        if (!isLoggedIn || cancelled) {
+          setIsConnected(false);
+          setWallet(null);
+          return;
+        }
+
+        const wallets = Object.values(await paraRef.current.getWallets());
+        const evmWallets = wallets.filter((w) => w.type === 'EVM');
+
+        if (evmWallets.length > 0 && !cancelled) {
+          setWallet((prev) => prev?.id === evmWallets[0].id ? prev : evmWallets[0]);
+          setIsConnected(true);
+        } else if (!cancelled) {
+          setIsConnected(false);
+          setWallet(null);
+        }
+      } catch {
+        if (!cancelled) {
+          setIsConnected(false);
+          setWallet(null);
+        }
+      }
+    }
+
+    checkConnection();
+    const interval = setInterval(checkConnection, 2000);
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, []);
+
+  // Connect opens the Para modal
+  const connect = useCallback(async () => {
+    openModalRef.current();
+  }, []);
+
+  // Disconnect logs out from Para
+  const disconnect = useCallback(async () => {
+    await logoutAsyncRef.current();
+    await paraRef.current.logout();
+    setIsConnected(false);
+    setWallet(null);
+  }, []);
+
+  // Build signer context (includes connect/disconnect for unified useSigner hook).
+  // Only depends on isConnected and wallet — everything else is accessed via refs
+  // so that MidenProvider doesn't see a new context object on every poll cycle.
+  //
+  // IMPORTANT: initialise with a disconnected placeholder (isConnected:false) rather
+  // than null.  When signerContext is null MidenProvider creates a local-keystore
+  // client whose auto-sync accesses the WASM module; our buildContext also touches
+  // WASM (evmPkToCommitment / AccountStorageMode) → concurrent WASM access → crash.
+  // A {isConnected:false} context makes MidenProvider's init effect return early
+  // without creating any client, keeping the WASM module free for buildContext.
+  const disconnectedCtx = useRef<SignerContextValue>({
+    signCb: async () => { throw new Error('Para wallet not connected'); },
+    accountConfig: null as any,
+    storeName: '',
+    name: 'Para',
+    isConnected: false,
+    connect,
+    disconnect,
+  });
+  const [signerContext, setSignerContext] = useState<SignerContextValue>(
+    disconnectedCtx.current
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function buildContext() {
+      if (!isConnected || !wallet) {
+        setSignerContext(disconnectedCtx.current);
+        return;
+      }
+
+      try {
+        // Connected - build full context with signing capability
+        const p = paraRef.current;
+        const publicKey = await getUncompressedPublicKeyFromWallet(p, wallet);
+        if (!publicKey) throw new Error('Failed to get public key from wallet');
+        const commitment = await evmPkToCommitment(publicKey);
+
+        // Serialize the commitment Word to Uint8Array for SignerAccountConfig
+        const commitmentBytes = commitment.serialize();
+
+        const signCallback = createSignCb(
+          p,
+          wallet,
+          showSigningModalRef.current,
+          customSignConfirmStepRef.current
+        );
+
+        if (!cancelled) {
+          const { AccountStorageMode } = await import(
+            '@miden-sdk/miden-sdk'
+          );
+
+          setSignerContext({
+            signCb: signCallback,
+            accountConfig: {
+              publicKeyCommitment: commitmentBytes,
+              accountType: 'RegularAccountImmutableCode',
+              storageMode: AccountStorageMode.public(),
+            },
+            storeName: `para_${wallet.id}`,
+            name: 'Para',
+            isConnected: true,
+            connect,
+            disconnect,
+          });
+        }
+      } catch (error) {
+        console.error('Failed to build Para signer context:', error);
+        if (!cancelled) {
+          setSignerContext(disconnectedCtx.current);
+        }
+      }
+    }
+
+    buildContext();
+    return () => {
+      cancelled = true;
+    };
+  }, [isConnected, wallet, connect, disconnect]);
+
+  return (
+    <ParaSignerExtrasContext.Provider value={{ para, wallet }}>
+      <SignerContext.Provider value={signerContext}>
+        {children}
+      </SignerContext.Provider>
+    </ParaSignerExtrasContext.Provider>
+  );
+}
+
+/**
+ * Hook for Para-specific extras beyond the unified useSigner interface.
+ * Use this to access the Para client or wallet details directly.
+ *
+ * @example
+ * ```tsx
+ * const { para, wallet, isConnected } = useParaSigner();
+ * ```
+ */
+export function useParaSigner(): ParaSignerExtras & { isConnected: boolean } {
+  const extras = useContext(ParaSignerExtrasContext);
+  const signer = useContext(SignerContext);
+  if (!extras) {
+    throw new Error('useParaSigner must be used within ParaSignerProvider');
+  }
+  return { ...extras, isConnected: signer?.isConnected ?? false };
+}

package/src/index.ts

@@ -1 +1,9 @@
 export { useParaMiden } from './useParaMiden';
+export {
+  ParaSignerProvider,
+  useParaSigner,
+  useModal,
+  useLogout,
+  type ParaSignerProviderProps,
+  type ParaSignerExtras,
+} from './ParaSignerProvider';