@miden-sdk/use-miden-para-react 0.13.2 → 0.13.3

package/dist/index.d.mts

@@ -7,6 +7,7 @@ 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';
+import { SignerAccountConfig } from '@miden-sdk/react';
 
 /**
  * React hook that converts Para React SDK context into a ready-to-use Miden WebClient.
@@ -55,6 +56,8 @@ interface ParaSignerProviderProps {
      * Use this for customizing OAuth methods, external wallets, etc.
      */
     paraProviderConfig?: Partial<Omit<ParaProviderProps<any, any>, 'children' | 'paraClientConfig'>>;
+    /** Optional custom account components to include in the account (e.g. from a compiled .masp package) */
+    customComponents?: SignerAccountConfig['customComponents'];
 }
 /**
  * Para-specific extras exposed via useParaSigner hook.
@@ -78,7 +81,7 @@ interface ParaSignerExtras {
  * </ParaSignerProvider>
  * ```
  */
-declare function ParaSignerProvider({ children, apiKey, environment, appName, showSigningModal, customSignConfirmStep, queryClient, paraProviderConfig, }: ParaSignerProviderProps): react_jsx_runtime.JSX.Element;
+declare function ParaSignerProvider({ children, apiKey, environment, appName, showSigningModal, customSignConfirmStep, queryClient, paraProviderConfig, customComponents, }: 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.

package/dist/index.d.ts

@@ -7,6 +7,7 @@ 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';
+import { SignerAccountConfig } from '@miden-sdk/react';
 
 /**
  * React hook that converts Para React SDK context into a ready-to-use Miden WebClient.
@@ -55,6 +56,8 @@ interface ParaSignerProviderProps {
      * Use this for customizing OAuth methods, external wallets, etc.
      */
     paraProviderConfig?: Partial<Omit<ParaProviderProps<any, any>, 'children' | 'paraClientConfig'>>;
+    /** Optional custom account components to include in the account (e.g. from a compiled .masp package) */
+    customComponents?: SignerAccountConfig['customComponents'];
 }
 /**
  * Para-specific extras exposed via useParaSigner hook.
@@ -78,7 +81,7 @@ interface ParaSignerExtras {
  * </ParaSignerProvider>
  * ```
  */
-declare function ParaSignerProvider({ children, apiKey, environment, appName, showSigningModal, customSignConfirmStep, queryClient, paraProviderConfig, }: ParaSignerProviderProps): react_jsx_runtime.JSX.Element;
+declare function ParaSignerProvider({ children, apiKey, environment, appName, showSigningModal, customSignConfirmStep, queryClient, paraProviderConfig, customComponents, }: 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.

package/dist/index.js

@@ -132,7 +132,8 @@ function ParaSignerProvider({
   showSigningModal = true,
   customSignConfirmStep,
   queryClient,
-  paraProviderConfig
+  paraProviderConfig,
+  customComponents
 }) {
   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,
@@ -148,6 +149,7 @@ function ParaSignerProvider({
         {
           showSigningModal,
           customSignConfirmStep,
+          customComponents,
           children
         }
       )
@@ -157,7 +159,8 @@ function ParaSignerProvider({
 function ParaSignerProviderInner({
   children,
   showSigningModal = true,
-  customSignConfirmStep
+  customSignConfirmStep,
+  customComponents
 }) {
   const { openModal } = (0, import_react_sdk_lite2.useModal)();
   const { logoutAsync } = (0, import_react_sdk_lite2.useLogout)();
@@ -197,7 +200,9 @@ function ParaSignerProviderInner({
         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]);
+          setWallet(
+            (prev) => (prev == null ? void 0 : prev.id) === evmWallets[0].id ? prev : evmWallets[0]
+          );
           setIsConnected(true);
         } else if (!cancelled) {
           setIsConnected(false);
@@ -266,7 +271,8 @@ function ParaSignerProviderInner({
             accountConfig: {
               publicKeyCommitment: commitmentBytes,
               accountType: "RegularAccountImmutableCode",
-              storageMode: AccountStorageMode.public()
+              storageMode: AccountStorageMode.public(),
+              ...(customComponents == null ? void 0 : customComponents.length) ? { customComponents } : {}
             },
             storeName: `para_${wallet.id}`,
             name: "Para",

package/dist/index.js.map

@@ -1 +1 @@
-{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;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;;;ACvGA,IAAAA,gBAQO;AACP,qBAAkD;AAClD,IAAAC,yBAMO;AACP,yBAAiD;AACjD,IAAAD,gBAAuD;AACvD,IAAAE,qBAAmE;AACnE,IAAAA,qBAAsE;AAGtE,IAAAD,yBAAoC;AAiG5B;AA/FR,IAAM,qBAAqB,IAAI,+BAAY;AAY3C,SAAS,oBAAoB,KAAmC;AAE9D,QAAM,gBAAgB,QAAQ,gBAAgB,SAAS,QAAQ,eAAe,SAAS;AAGvF,MAAI,8BAAe,OAAO,+BAAgB,UAAU;AAClD,UAAM,QAAQ,2BAAY,aAAyC;AACnE,QAAI,UAAU,OAAW,QAAO;AAAA,EAClC;AAGA,SAAO;AACT;AAoCA,IAAM,8BAA0B,6BAAuC,IAAI;AAepE,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,SACE,4CAAC,0CAAoB,QAAQ,oCAAe,oBAC1C;AAAA,IAAC;AAAA;AAAA,MACC,kBAAkB;AAAA,QAChB,KAAK,oBAAoB,WAAW;AAAA,QACpC;AAAA,MACF;AAAA,MACA,QAAQ,EAAE,QAAQ;AAAA,MACjB,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UAEC;AAAA;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;AAKA,SAAS,wBAAwB;AAAA,EAC/B;AAAA,EACA,mBAAmB;AAAA,EACnB;AACF,GAA6F;AAG3F,QAAM,EAAE,UAAU,QAAI,iCAAS;AAC/B,QAAM,EAAE,YAAY,QAAI,kCAAU;AAClC,QAAM,mBAAe,sBAAO,SAAS;AACrC,QAAM,qBAAiB,sBAAO,WAAW;AACzC,+BAAU,MAAM;AAAE,iBAAa,UAAU;AAAA,EAAW,GAAG,CAAC,SAAS,CAAC;AAClE,+BAAU,MAAM;AAAE,mBAAe,UAAU;AAAA,EAAa,GAAG,CAAC,WAAW,CAAC;AAIxE,QAAM,WAAO,kCAAU;AACvB,QAAM,cAAU,sBAAO,IAAI;AAC3B,+BAAU,MAAM;AAAE,YAAQ,UAAU;AAAA,EAAM,GAAG,CAAC,IAAI,CAAC;AAGnD,QAAM,0BAAsB,sBAAO,gBAAgB;AACnD,QAAM,+BAA2B,sBAAO,qBAAqB;AAC7D,+BAAU,MAAM;AAAE,wBAAoB,UAAU;AAAA,EAAkB,GAAG,CAAC,gBAAgB,CAAC;AACvF,+BAAU,MAAM;AAAE,6BAAyB,UAAU;AAAA,EAAuB,GAAG,CAAC,qBAAqB,CAAC;AAEtG,QAAM,CAAC,QAAQ,SAAS,QAAI,wBAAwB,IAAI;AACxD,QAAM,CAAC,aAAa,cAAc,QAAI,wBAAS,KAAK;AAGpD,+BAAU,MAAM;AACd,QAAI,YAAY;AAEhB,mBAAe,kBAAkB;AAC/B,UAAI;AACF,cAAM,aAAa,MAAM,QAAQ,QAAQ,gBAAgB;AACzD,YAAI,CAAC,cAAc,WAAW;AAC5B,yBAAe,KAAK;AACpB,oBAAU,IAAI;AACd;AAAA,QACF;AAEA,cAAM,UAAU,OAAO,OAAO,MAAM,QAAQ,QAAQ,WAAW,CAAC;AAChE,cAAM,aAAa,QAAQ,OAAO,CAAC,MAAM,EAAE,SAAS,KAAK;AAEzD,YAAI,WAAW,SAAS,KAAK,CAAC,WAAW;AACvC,oBAAU,CAAC,UAAS,6BAAM,QAAO,WAAW,CAAC,EAAE,KAAK,OAAO,WAAW,CAAC,CAAC;AACxE,yBAAe,IAAI;AAAA,QACrB,WAAW,CAAC,WAAW;AACrB,yBAAe,KAAK;AACpB,oBAAU,IAAI;AAAA,QAChB;AAAA,MACF,QAAQ;AACN,YAAI,CAAC,WAAW;AACd,yBAAe,KAAK;AACpB,oBAAU,IAAI;AAAA,QAChB;AAAA,MACF;AAAA,IACF;AAEA,oBAAgB;AAChB,UAAM,WAAW,YAAY,iBAAiB,GAAI;AAClD,WAAO,MAAM;AACX,kBAAY;AACZ,oBAAc,QAAQ;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,QAAM,cAAU,2BAAY,YAAY;AACtC,iBAAa,QAAQ;AAAA,EACvB,GAAG,CAAC,CAAC;AAGL,QAAM,iBAAa,2BAAY,YAAY;AACzC,UAAM,eAAe,QAAQ;AAC7B,UAAM,QAAQ,QAAQ,OAAO;AAC7B,mBAAe,KAAK;AACpB,cAAU,IAAI;AAAA,EAChB,GAAG,CAAC,CAAC;AAYL,QAAM,sBAAkB,sBAA2B;AAAA,IACjD,QAAQ,YAAY;AAAE,YAAM,IAAI,MAAM,2BAA2B;AAAA,IAAG;AAAA,IACpE,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,aAAa;AAAA,IACb;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,CAAC,eAAe,gBAAgB,QAAI;AAAA,IACxC,gBAAgB;AAAA,EAClB;AAEA,+BAAU,MAAM;AACd,QAAI,YAAY;AAEhB,mBAAe,eAAe;AAC5B,UAAI,CAAC,eAAe,CAAC,QAAQ;AAC3B,yBAAiB,gBAAgB,OAAO;AACxC;AAAA,MACF;AAEA,UAAI;AAEF,cAAM,IAAI,QAAQ;AAClB,cAAM,YAAY,UAAM,uDAAmC,GAAG,MAAM;AACpE,YAAI,CAAC,UAAW,OAAM,IAAI,MAAM,sCAAsC;AACtE,cAAM,aAAa,UAAM,sCAAkB,SAAS;AAGpD,cAAM,kBAAkB,WAAW,UAAU;AAE7C,cAAM,mBAAe,mBAAAE;AAAA,UACnB;AAAA,UACA;AAAA,UACA,oBAAoB;AAAA,UACpB,yBAAyB;AAAA,QAC3B;AAEA,YAAI,CAAC,WAAW;AACd,gBAAM,EAAE,mBAAmB,IAAI,MAAM,OACnC,sBACF;AAEA,2BAAiB;AAAA,YACf,QAAQ;AAAA,YACR,eAAe;AAAA,cACb,qBAAqB;AAAA,cACrB,aAAa;AAAA,cACb,aAAa,mBAAmB,OAAO;AAAA,YACzC;AAAA,YACA,WAAW,QAAQ,OAAO,EAAE;AAAA,YAC5B,MAAM;AAAA,YACN,aAAa;AAAA,YACb;AAAA,YACA;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF,SAAS,OAAO;AACd,gBAAQ,MAAM,wCAAwC,KAAK;AAC3D,YAAI,CAAC,WAAW;AACd,2BAAiB,gBAAgB,OAAO;AAAA,QAC1C;AAAA,MACF;AAAA,IACF;AAEA,iBAAa;AACb,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,aAAa,QAAQ,SAAS,UAAU,CAAC;AAE7C,SACE,4CAAC,wBAAwB,UAAxB,EAAiC,OAAO,EAAE,MAAM,OAAO,GACtD,sDAAC,4BAAc,UAAd,EAAuB,OAAO,eAC5B,UACH,GACF;AAEJ;AAWO,SAAS,gBAA6D;AA3T7E;AA4TE,QAAM,aAAS,0BAAW,uBAAuB;AACjD,QAAM,aAAS,0BAAW,2BAAa;AACvC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,sDAAsD;AAAA,EACxE;AACA,SAAO,EAAE,GAAG,QAAQ,cAAa,sCAAQ,gBAAR,YAAuB,MAAM;AAChE;","names":["import_react","import_react_sdk_lite","import_miden_para","createSignCb"]}
+{"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 {\n  SignerContext,\n  type SignerContextValue,\n  type SignerAccountConfig,\n} from '@miden-sdk/react';\nimport {\n  signCb as createSignCb,\n  type CustomSignConfirmStep,\n} from '@miden-sdk/miden-para';\nimport {\n  evmPkToCommitment,\n  getUncompressedPublicKeyFromWallet,\n} 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 =\n  | 'BETA'\n  | 'PROD'\n  | 'SANDBOX'\n  | 'DEV'\n  | 'DEVELOPMENT'\n  | '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 =\n    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<\n    Omit<ParaProviderProps<any, any>, 'children' | 'paraClientConfig'>\n  >;\n  /** Optional custom account components to include in the account (e.g. from a compiled .masp package) */\n  customComponents?: SignerAccountConfig['customComponents'];\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  customComponents,\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          customComponents={customComponents}\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  customComponents,\n}: Pick<\n  ParaSignerProviderProps,\n  'children' | 'showSigningModal' | 'customSignConfirmStep' | 'customComponents'\n>) {\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(() => {\n    openModalRef.current = openModal;\n  }, [openModal]);\n  useEffect(() => {\n    logoutAsyncRef.current = logoutAsync;\n  }, [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(() => {\n    paraRef.current = para;\n  }, [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(() => {\n    showSigningModalRef.current = showSigningModal;\n  }, [showSigningModal]);\n  useEffect(() => {\n    customSignConfirmStepRef.current = customSignConfirmStep;\n  }, [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) =>\n            prev?.id === evmWallets[0].id ? prev : evmWallets[0]\n          );\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 () => {\n      throw new Error('Para wallet not connected');\n    },\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('@miden-sdk/miden-sdk');\n\n          setSignerContext({\n            signCb: signCallback,\n            accountConfig: {\n              publicKeyCommitment: commitmentBytes,\n              accountType: 'RegularAccountImmutableCode',\n              storageMode: AccountStorageMode.public(),\n              ...(customComponents?.length ? { customComponents } : {}),\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

@@ -83,9 +83,16 @@ import {
   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 {
+  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();
@@ -106,7 +113,8 @@ function ParaSignerProvider({
   showSigningModal = true,
   customSignConfirmStep,
   queryClient,
-  paraProviderConfig
+  paraProviderConfig,
+  customComponents
 }) {
   return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient != null ? queryClient : defaultQueryClient, children: /* @__PURE__ */ jsx(
     ParaProvider,
@@ -122,6 +130,7 @@ function ParaSignerProvider({
         {
           showSigningModal,
           customSignConfirmStep,
+          customComponents,
           children
         }
       )
@@ -131,7 +140,8 @@ function ParaSignerProvider({
 function ParaSignerProviderInner({
   children,
   showSigningModal = true,
-  customSignConfirmStep
+  customSignConfirmStep,
+  customComponents
 }) {
   const { openModal } = useModal();
   const { logoutAsync } = useLogout();
@@ -171,7 +181,9 @@ function ParaSignerProviderInner({
         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]);
+          setWallet(
+            (prev) => (prev == null ? void 0 : prev.id) === evmWallets[0].id ? prev : evmWallets[0]
+          );
           setIsConnected(true);
         } else if (!cancelled) {
           setIsConnected(false);
@@ -240,7 +252,8 @@ function ParaSignerProviderInner({
             accountConfig: {
               publicKeyCommitment: commitmentBytes,
               accountType: "RegularAccountImmutableCode",
-              storageMode: AccountStorageMode.public()
+              storageMode: AccountStorageMode.public(),
+              ...(customComponents == null ? void 0 : customComponents.length) ? { customComponents } : {}
             },
             storeName: `para_${wallet.id}`,
             name: "Para",

package/dist/index.mjs.map

@@ -1 +1 @@
-{"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"]}
+{"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 {\n  SignerContext,\n  type SignerContextValue,\n  type SignerAccountConfig,\n} from '@miden-sdk/react';\nimport {\n  signCb as createSignCb,\n  type CustomSignConfirmStep,\n} from '@miden-sdk/miden-para';\nimport {\n  evmPkToCommitment,\n  getUncompressedPublicKeyFromWallet,\n} 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 =\n  | 'BETA'\n  | 'PROD'\n  | 'SANDBOX'\n  | 'DEV'\n  | 'DEVELOPMENT'\n  | '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 =\n    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<\n    Omit<ParaProviderProps<any, any>, 'children' | 'paraClientConfig'>\n  >;\n  /** Optional custom account components to include in the account (e.g. from a compiled .masp package) */\n  customComponents?: SignerAccountConfig['customComponents'];\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  customComponents,\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          customComponents={customComponents}\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  customComponents,\n}: Pick<\n  ParaSignerProviderProps,\n  'children' | 'showSigningModal' | 'customSignConfirmStep' | 'customComponents'\n>) {\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(() => {\n    openModalRef.current = openModal;\n  }, [openModal]);\n  useEffect(() => {\n    logoutAsyncRef.current = logoutAsync;\n  }, [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(() => {\n    paraRef.current = para;\n  }, [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(() => {\n    showSigningModalRef.current = showSigningModal;\n  }, [showSigningModal]);\n  useEffect(() => {\n    customSignConfirmStepRef.current = customSignConfirmStep;\n  }, [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) =>\n            prev?.id === evmWallets[0].id ? prev : evmWallets[0]\n          );\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 () => {\n      throw new Error('Para wallet not connected');\n    },\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('@miden-sdk/miden-sdk');\n\n          setSignerContext({\n            signCb: signCallback,\n            accountConfig: {\n              publicKeyCommitment: commitmentBytes,\n              accountType: 'RegularAccountImmutableCode',\n              storageMode: AccountStorageMode.public(),\n              ...(customComponents?.length ? { customComponents } : {}),\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.2",
+  "version": "0.13.3",
   "description": "React hook that wires Para accounts into a Miden client",
   "license": "MIT",
   "author": "Miden Labs",
@@ -36,19 +36,19 @@
     "publish": "npm run build && npm publish --access public"
   },
   "peerDependencies": {
-    "@miden-sdk/miden-sdk": "^0.13.1",
     "@getpara/react-sdk-lite": "^2.11.0",
     "@getpara/web-sdk": "^2.11.0",
     "@miden-sdk/miden-para": "^0.13.2",
-    "@miden-sdk/react": "^0.13.1",
+    "@miden-sdk/miden-sdk": "^0.13.1",
+    "@miden-sdk/react": "^0.13.3",
     "@tanstack/react-query": "^5.0.0",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@miden-sdk/miden-sdk": "^0.13.1",
     "@getpara/react-sdk-lite": "^2.11.0",
     "@getpara/web-sdk": "^2.11.0",
-    "@miden-sdk/react": "^0.13.1",
+    "@miden-sdk/miden-sdk": "^0.13.1",
+    "@miden-sdk/react": "^0.13.3",
     "@tanstack/react-query": "^5.90.12",
     "@types/react": "^19.2.5",
     "tsup": "^8.3.0",

package/src/ParaSignerProvider.tsx

@@ -16,9 +16,19 @@ import {
   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';
+import {
+  SignerContext,
+  type SignerContextValue,
+  type SignerAccountConfig,
+} 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';
@@ -29,7 +39,13 @@ const defaultQueryClient = new QueryClient();
 // ================================================================================================
 
 /** Environment string values accepted by ParaSignerProvider */
-export type ParaEnvironment = 'BETA' | 'PROD' | 'SANDBOX' | 'DEV' | 'DEVELOPMENT' | 'PRODUCTION';
+export type ParaEnvironment =
+  | 'BETA'
+  | 'PROD'
+  | 'SANDBOX'
+  | 'DEV'
+  | 'DEVELOPMENT'
+  | 'PRODUCTION';
 
 /**
  * Convert environment string to Environment enum value.
@@ -37,7 +53,8 @@ export type ParaEnvironment = 'BETA' | 'PROD' | 'SANDBOX' | 'DEV' | 'DEVELOPMENT
  */
 function getEnvironmentValue(env: ParaEnvironment): Environment {
   // Handle aliases
-  const normalizedEnv = env === 'DEVELOPMENT' ? 'BETA' : env === 'PRODUCTION' ? 'PROD' : env;
+  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') {
@@ -70,7 +87,11 @@ export interface ParaSignerProviderProps {
    * Advanced: Additional config to pass to ParaProvider.
    * Use this for customizing OAuth methods, external wallets, etc.
    */
-  paraProviderConfig?: Partial<Omit<ParaProviderProps<any, any>, 'children' | 'paraClientConfig'>>;
+  paraProviderConfig?: Partial<
+    Omit<ParaProviderProps<any, any>, 'children' | 'paraClientConfig'>
+  >;
+  /** Optional custom account components to include in the account (e.g. from a compiled .masp package) */
+  customComponents?: SignerAccountConfig['customComponents'];
 }
 
 /**
@@ -107,6 +128,7 @@ export function ParaSignerProvider({
   customSignConfirmStep,
   queryClient,
   paraProviderConfig,
+  customComponents,
 }: ParaSignerProviderProps) {
   return (
     <QueryClientProvider client={queryClient ?? defaultQueryClient}>
@@ -121,6 +143,7 @@ export function ParaSignerProvider({
         <ParaSignerProviderInner
           showSigningModal={showSigningModal}
           customSignConfirmStep={customSignConfirmStep}
+          customComponents={customComponents}
         >
           {children}
         </ParaSignerProviderInner>
@@ -136,27 +159,41 @@ function ParaSignerProviderInner({
   children,
   showSigningModal = true,
   customSignConfirmStep,
-}: Pick<ParaSignerProviderProps, 'children' | 'showSigningModal' | 'customSignConfirmStep'>) {
+  customComponents,
+}: Pick<
+  ParaSignerProviderProps,
+  'children' | 'showSigningModal' | 'customSignConfirmStep' | 'customComponents'
+>) {
   // 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]);
+  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]);
+  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]);
+  useEffect(() => {
+    showSigningModalRef.current = showSigningModal;
+  }, [showSigningModal]);
+  useEffect(() => {
+    customSignConfirmStepRef.current = customSignConfirmStep;
+  }, [customSignConfirmStep]);
 
   const [wallet, setWallet] = useState<Wallet | null>(null);
   const [isConnected, setIsConnected] = useState(false);
@@ -178,7 +215,9 @@ function ParaSignerProviderInner({
         const evmWallets = wallets.filter((w) => w.type === 'EVM');
 
         if (evmWallets.length > 0 && !cancelled) {
-          setWallet((prev) => prev?.id === evmWallets[0].id ? prev : evmWallets[0]);
+          setWallet((prev) =>
+            prev?.id === evmWallets[0].id ? prev : evmWallets[0]
+          );
           setIsConnected(true);
         } else if (!cancelled) {
           setIsConnected(false);
@@ -224,7 +263,9 @@ function ParaSignerProviderInner({
   // 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'); },
+    signCb: async () => {
+      throw new Error('Para wallet not connected');
+    },
     accountConfig: null as any,
     storeName: '',
     name: 'Para',
@@ -263,9 +304,7 @@ function ParaSignerProviderInner({
         );
 
         if (!cancelled) {
-          const { AccountStorageMode } = await import(
-            '@miden-sdk/miden-sdk'
-          );
+          const { AccountStorageMode } = await import('@miden-sdk/miden-sdk');
 
           setSignerContext({
             signCb: signCallback,
@@ -273,6 +312,7 @@ function ParaSignerProviderInner({
               publicKeyCommitment: commitmentBytes,
               accountType: 'RegularAccountImmutableCode',
               storageMode: AccountStorageMode.public(),
+              ...(customComponents?.length ? { customComponents } : {}),
             },
             storeName: `para_${wallet.id}`,
             name: 'Para',