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

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

@@ -105,6 +105,7 @@ function useParaMiden(nodeUrl, storageMode = "public", opts = {}, showSigningMod
 }
 
 // src/ParaSignerProvider.tsx
+var import_styles = require("@getpara/react-sdk-lite/styles.css");
 var import_react2 = require("react");
 var import_web_sdk = require("@getpara/web-sdk");
 var import_react_sdk_lite2 = require("@getpara/react-sdk-lite");
@@ -132,7 +133,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 +150,7 @@ function ParaSignerProvider({
         {
           showSigningModal,
           customSignConfirmStep,
+          customComponents,
           children
         }
       )
@@ -157,15 +160,21 @@ function ParaSignerProvider({
 function ParaSignerProviderInner({
   children,
   showSigningModal = true,
-  customSignConfirmStep
+  customSignConfirmStep,
+  customComponents
 }) {
-  const { openModal } = (0, import_react_sdk_lite2.useModal)();
+  var _a, _b;
+  const { openModal, closeModal } = (0, import_react_sdk_lite2.useModal)();
   const { logoutAsync } = (0, import_react_sdk_lite2.useLogout)();
   const openModalRef = (0, import_react2.useRef)(openModal);
+  const closeModalRef = (0, import_react2.useRef)(closeModal);
   const logoutAsyncRef = (0, import_react2.useRef)(logoutAsync);
   (0, import_react2.useEffect)(() => {
     openModalRef.current = openModal;
   }, [openModal]);
+  (0, import_react2.useEffect)(() => {
+    closeModalRef.current = closeModal;
+  }, [closeModal]);
   (0, import_react2.useEffect)(() => {
     logoutAsyncRef.current = logoutAsync;
   }, [logoutAsync]);
@@ -182,49 +191,21 @@ function ParaSignerProviderInner({
   (0, import_react2.useEffect)(() => {
     customSignConfirmStepRef.current = customSignConfirmStep;
   }, [customSignConfirmStep]);
-  const [wallet, setWallet] = (0, import_react2.useState)(null);
-  const [isConnected, setIsConnected] = (0, import_react2.useState)(false);
+  const { isConnected: paraIsConnected, embedded } = (0, import_react_sdk_lite2.useAccount)();
+  const evmWallets = (_b = (_a = embedded == null ? void 0 : embedded.wallets) == null ? void 0 : _a.filter((w) => w.type === "EVM")) != null ? _b : [];
+  const wallet = evmWallets.length > 0 ? evmWallets[0] : null;
+  const isConnected = paraIsConnected && wallet !== null;
   (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);
-        }
-      }
+    if (isConnected) {
+      closeModalRef.current();
     }
-    checkConnection();
-    const interval = setInterval(checkConnection, 2e3);
-    return () => {
-      cancelled = true;
-      clearInterval(interval);
-    };
-  }, []);
+  }, [isConnected]);
   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 () => {
@@ -266,7 +247,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":"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","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 '@getpara/react-sdk-lite/styles.css';\nimport {\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  useAccount as useParaAccount,\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, closeModal } = useModal();\n  const { logoutAsync } = useLogout();\n  const openModalRef = useRef(openModal);\n  const closeModalRef = useRef(closeModal);\n  const logoutAsyncRef = useRef(logoutAsync);\n  useEffect(() => {\n    openModalRef.current = openModal;\n  }, [openModal]);\n  useEffect(() => {\n    closeModalRef.current = closeModal;\n  }, [closeModal]);\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  // Use Para SDK's reactive useAccount() hook to detect login state.\n  // This subscribes to the internal state machine instead of polling isFullyLoggedIn().\n  const { isConnected: paraIsConnected, embedded } = useParaAccount();\n  const evmWallets = embedded?.wallets?.filter((w) => w.type === 'EVM') ?? [];\n  const wallet = evmWallets.length > 0 ? (evmWallets[0] as unknown as Wallet) : null;\n  const isConnected = paraIsConnected && wallet !== null;\n\n  // Close the modal when login is detected\n  useEffect(() => {\n    if (isConnected) {\n      closeModalRef.current();\n    }\n  }, [isConnected]);\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  }, []);\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","useParaAccount","createSignCb"]}

package/dist/index.mjs

@@ -67,6 +67,7 @@ function useParaMiden(nodeUrl, storageMode = "public", opts = {}, showSigningMod
 }
 
 // src/ParaSignerProvider.tsx
+import "@getpara/react-sdk-lite/styles.css";
 import {
   useState as useState2,
   useEffect as useEffect2,
@@ -79,13 +80,21 @@ import { Environment } from "@getpara/web-sdk";
 import {
   ParaProvider,
   useClient as useClient2,
+  useAccount as useParaAccount,
   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 {
+  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 +115,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 +132,7 @@ function ParaSignerProvider({
         {
           showSigningModal,
           customSignConfirmStep,
+          customComponents,
           children
         }
       )
@@ -131,15 +142,21 @@ function ParaSignerProvider({
 function ParaSignerProviderInner({
   children,
   showSigningModal = true,
-  customSignConfirmStep
+  customSignConfirmStep,
+  customComponents
 }) {
-  const { openModal } = useModal();
+  var _a, _b;
+  const { openModal, closeModal } = useModal();
   const { logoutAsync } = useLogout();
   const openModalRef = useRef2(openModal);
+  const closeModalRef = useRef2(closeModal);
   const logoutAsyncRef = useRef2(logoutAsync);
   useEffect2(() => {
     openModalRef.current = openModal;
   }, [openModal]);
+  useEffect2(() => {
+    closeModalRef.current = closeModal;
+  }, [closeModal]);
   useEffect2(() => {
     logoutAsyncRef.current = logoutAsync;
   }, [logoutAsync]);
@@ -156,49 +173,21 @@ function ParaSignerProviderInner({
   useEffect2(() => {
     customSignConfirmStepRef.current = customSignConfirmStep;
   }, [customSignConfirmStep]);
-  const [wallet, setWallet] = useState2(null);
-  const [isConnected, setIsConnected] = useState2(false);
+  const { isConnected: paraIsConnected, embedded } = useParaAccount();
+  const evmWallets = (_b = (_a = embedded == null ? void 0 : embedded.wallets) == null ? void 0 : _a.filter((w) => w.type === "EVM")) != null ? _b : [];
+  const wallet = evmWallets.length > 0 ? evmWallets[0] : null;
+  const isConnected = paraIsConnected && wallet !== null;
   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);
-        }
-      }
+    if (isConnected) {
+      closeModalRef.current();
     }
-    checkConnection();
-    const interval = setInterval(checkConnection, 2e3);
-    return () => {
-      cancelled = true;
-      clearInterval(interval);
-    };
-  }, []);
+  }, [isConnected]);
   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 () => {
@@ -240,7 +229,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":";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;;;ACvGA;AAAA,EACE,YAAAA;AAAA,EACA,aAAAC;AAAA,EACA;AAAA,EACA,UAAAC;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAkB,mBAAgC;AAClD;AAAA,EACE;AAAA,EACA,aAAAC;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,aAAa,2BAA2B;AACjD,SAAS,qBAA8C;AACvD,SAAS,UAAU,oBAAgD;AACnE,SAAS,mBAAmB,0CAA0C;AAGtE,SAAS,YAAAC,WAAU,aAAAC,kBAAiB;AAiG5B;AA/FR,IAAM,qBAAqB,IAAI,YAAY;AAY3C,SAAS,oBAAoB,KAAmC;AAE9D,QAAM,gBAAgB,QAAQ,gBAAgB,SAAS,QAAQ,eAAe,SAAS;AAGvF,MAAI,eAAe,OAAO,gBAAgB,UAAU;AAClD,UAAM,QAAQ,YAAY,aAAyC;AACnE,QAAI,UAAU,OAAW,QAAO;AAAA,EAClC;AAGA,SAAO;AACT;AAoCA,IAAM,0BAA0B,cAAuC,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,oBAAC,uBAAoB,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,IAAI,SAAS;AAC/B,QAAM,EAAE,YAAY,IAAI,UAAU;AAClC,QAAM,eAAeH,QAAO,SAAS;AACrC,QAAM,iBAAiBA,QAAO,WAAW;AACzC,EAAAD,WAAU,MAAM;AAAE,iBAAa,UAAU;AAAA,EAAW,GAAG,CAAC,SAAS,CAAC;AAClE,EAAAA,WAAU,MAAM;AAAE,mBAAe,UAAU;AAAA,EAAa,GAAG,CAAC,WAAW,CAAC;AAIxE,QAAM,OAAOE,WAAU;AACvB,QAAM,UAAUD,QAAO,IAAI;AAC3B,EAAAD,WAAU,MAAM;AAAE,YAAQ,UAAU;AAAA,EAAM,GAAG,CAAC,IAAI,CAAC;AAGnD,QAAM,sBAAsBC,QAAO,gBAAgB;AACnD,QAAM,2BAA2BA,QAAO,qBAAqB;AAC7D,EAAAD,WAAU,MAAM;AAAE,wBAAoB,UAAU;AAAA,EAAkB,GAAG,CAAC,gBAAgB,CAAC;AACvF,EAAAA,WAAU,MAAM;AAAE,6BAAyB,UAAU;AAAA,EAAuB,GAAG,CAAC,qBAAqB,CAAC;AAEtG,QAAM,CAAC,QAAQ,SAAS,IAAID,UAAwB,IAAI;AACxD,QAAM,CAAC,aAAa,cAAc,IAAIA,UAAS,KAAK;AAGpD,EAAAC,WAAU,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,UAAU,YAAY,YAAY;AACtC,iBAAa,QAAQ;AAAA,EACvB,GAAG,CAAC,CAAC;AAGL,QAAM,aAAa,YAAY,YAAY;AACzC,UAAM,eAAe,QAAQ;AAC7B,UAAM,QAAQ,QAAQ,OAAO;AAC7B,mBAAe,KAAK;AACpB,cAAU,IAAI;AAAA,EAChB,GAAG,CAAC,CAAC;AAYL,QAAM,kBAAkBC,QAA2B;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,IAAIF;AAAA,IACxC,gBAAgB;AAAA,EAClB;AAEA,EAAAC,WAAU,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,MAAM,mCAAmC,GAAG,MAAM;AACpE,YAAI,CAAC,UAAW,OAAM,IAAI,MAAM,sCAAsC;AACtE,cAAM,aAAa,MAAM,kBAAkB,SAAS;AAGpD,cAAM,kBAAkB,WAAW,UAAU;AAE7C,cAAM,eAAe;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,oBAAC,wBAAwB,UAAxB,EAAiC,OAAO,EAAE,MAAM,OAAO,GACtD,8BAAC,cAAc,UAAd,EAAuB,OAAO,eAC5B,UACH,GACF;AAEJ;AAWO,SAAS,gBAA6D;AA3T7E;AA4TE,QAAM,SAAS,WAAW,uBAAuB;AACjD,QAAM,SAAS,WAAW,aAAa;AACvC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,sDAAsD;AAAA,EACxE;AACA,SAAO,EAAE,GAAG,QAAQ,cAAa,sCAAQ,gBAAR,YAAuB,MAAM;AAChE;","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 '@getpara/react-sdk-lite/styles.css';\nimport {\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  useAccount as useParaAccount,\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, closeModal } = useModal();\n  const { logoutAsync } = useLogout();\n  const openModalRef = useRef(openModal);\n  const closeModalRef = useRef(closeModal);\n  const logoutAsyncRef = useRef(logoutAsync);\n  useEffect(() => {\n    openModalRef.current = openModal;\n  }, [openModal]);\n  useEffect(() => {\n    closeModalRef.current = closeModal;\n  }, [closeModal]);\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  // Use Para SDK's reactive useAccount() hook to detect login state.\n  // This subscribes to the internal state machine instead of polling isFullyLoggedIn().\n  const { isConnected: paraIsConnected, embedded } = useParaAccount();\n  const evmWallets = embedded?.wallets?.filter((w) => w.type === 'EVM') ?? [];\n  const wallet = evmWallets.length > 0 ? (evmWallets[0] as unknown as Wallet) : null;\n  const isConnected = paraIsConnected && wallet !== null;\n\n  // Close the modal when login is detected\n  useEffect(() => {\n    if (isConnected) {\n      closeModalRef.current();\n    }\n  }, [isConnected]);\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  }, []);\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/dist/paraVitePlugin.d.mts

@@ -0,0 +1,30 @@
+import { Plugin } from 'vite';
+
+interface ParaVitePluginOptions {
+    /**
+     * Node.js polyfills to include. Para SDK requires these for crypto operations.
+     * Default: ["buffer", "crypto", "stream", "util"]
+     */
+    polyfills?: string[];
+}
+/**
+ * Vite plugin that configures Para SDK requirements:
+ * - Node.js polyfills (buffer, crypto, stream, util) via vite-plugin-node-polyfills
+ * - Stubs for unused Para wallet connectors (Solana, Cosmos)
+ *
+ * Returns an array of plugins (Vite flattens nested arrays in the plugins config).
+ *
+ * Requires `vite-plugin-node-polyfills` as a dev dependency.
+ *
+ * @example
+ * ```ts
+ * import { paraVitePlugin } from "@miden-sdk/use-miden-para-react/vite";
+ *
+ * export default defineConfig({
+ *   plugins: [react(), midenVitePlugin(), paraVitePlugin()],
+ * });
+ * ```
+ */
+declare function paraVitePlugin(options?: ParaVitePluginOptions): Plugin[];
+
+export { type ParaVitePluginOptions, paraVitePlugin };

package/dist/paraVitePlugin.d.ts

@@ -0,0 +1,30 @@
+import { Plugin } from 'vite';
+
+interface ParaVitePluginOptions {
+    /**
+     * Node.js polyfills to include. Para SDK requires these for crypto operations.
+     * Default: ["buffer", "crypto", "stream", "util"]
+     */
+    polyfills?: string[];
+}
+/**
+ * Vite plugin that configures Para SDK requirements:
+ * - Node.js polyfills (buffer, crypto, stream, util) via vite-plugin-node-polyfills
+ * - Stubs for unused Para wallet connectors (Solana, Cosmos)
+ *
+ * Returns an array of plugins (Vite flattens nested arrays in the plugins config).
+ *
+ * Requires `vite-plugin-node-polyfills` as a dev dependency.
+ *
+ * @example
+ * ```ts
+ * import { paraVitePlugin } from "@miden-sdk/use-miden-para-react/vite";
+ *
+ * export default defineConfig({
+ *   plugins: [react(), midenVitePlugin(), paraVitePlugin()],
+ * });
+ * ```
+ */
+declare function paraVitePlugin(options?: ParaVitePluginOptions): Plugin[];
+
+export { type ParaVitePluginOptions, paraVitePlugin };

package/dist/paraVitePlugin.js

@@ -0,0 +1,107 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/paraVitePlugin.ts
+var paraVitePlugin_exports = {};
+__export(paraVitePlugin_exports, {
+  paraVitePlugin: () => paraVitePlugin
+});
+module.exports = __toCommonJS(paraVitePlugin_exports);
+var import_node_module = require("module");
+var STUB_PACKAGES = [
+  "@getpara/solana-wallet-connectors",
+  "@getpara/cosmos-wallet-connectors"
+];
+var STUB_PREFIX = "\0para-stub:";
+function paraVitePlugin(options) {
+  var _a;
+  const polyfills = (_a = options == null ? void 0 : options.polyfills) != null ? _a : ["buffer", "crypto", "stream", "util"];
+  let nodePolyfillsPlugins = [];
+  try {
+    const projectRequire = (0, import_node_module.createRequire)(`file://${process.cwd()}/`);
+    const { nodePolyfills } = projectRequire("vite-plugin-node-polyfills");
+    const result = nodePolyfills({ include: polyfills });
+    nodePolyfillsPlugins = Array.isArray(result) ? result : [result];
+  } catch {
+    console.warn(
+      "[@miden-sdk/para-vite-plugin] vite-plugin-node-polyfills not found. Install it: npm install -D vite-plugin-node-polyfills"
+    );
+  }
+  const stubConnectorsEsbuild = {
+    name: "stub-para-connectors",
+    setup(build) {
+      const filter = new RegExp(
+        `^(${STUB_PACKAGES.map((p) => p.replace(/[\\^$.*+?()[\]{}|/]/g, "\\$&")).join("|")})$`
+      );
+      build.onResolve({ filter }, (args) => ({
+        path: args.path,
+        namespace: "para-stub"
+      }));
+      build.onLoad(
+        { filter: /.*/, namespace: "para-stub" },
+        () => ({ contents: "export default {};", loader: "js" })
+      );
+    }
+  };
+  const paraPlugin = {
+    name: "@miden-sdk/para-vite-plugin",
+    enforce: "pre",
+    config() {
+      return {
+        resolve: {
+          dedupe: ["@getpara/web-sdk", "@getpara/react-sdk-lite"]
+        }
+      };
+    },
+    // Inject esbuild stub plugin after all config() hooks have run,
+    // so other plugins (e.g. vite-plugin-node-polyfills) can't overwrite it.
+    configResolved(config) {
+      if (!config.optimizeDeps.esbuildOptions) {
+        config.optimizeDeps.esbuildOptions = {};
+      }
+      if (!config.optimizeDeps.esbuildOptions.plugins) {
+        config.optimizeDeps.esbuildOptions.plugins = [];
+      }
+      const hasPlugin = config.optimizeDeps.esbuildOptions.plugins.some(
+        (p) => p.name === "stub-para-connectors"
+      );
+      if (!hasPlugin) {
+        config.optimizeDeps.esbuildOptions.plugins.push(stubConnectorsEsbuild);
+      }
+    },
+    // Stub the connector packages at Vite's module resolution level
+    // (handles imports that bypass pre-bundling, e.g. in SSR or dev).
+    resolveId(source) {
+      if (STUB_PACKAGES.includes(source)) {
+        return STUB_PREFIX + source;
+      }
+    },
+    load(id) {
+      if (id.startsWith(STUB_PREFIX)) {
+        return "export default {};";
+      }
+    }
+  };
+  return [paraPlugin, ...nodePolyfillsPlugins];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  paraVitePlugin
+});
+//# sourceMappingURL=paraVitePlugin.js.map

package/dist/paraVitePlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/paraVitePlugin.ts"],"sourcesContent":["import type { Plugin } from \"vite\";\nimport { createRequire } from \"node:module\";\n\nexport interface ParaVitePluginOptions {\n  /**\n   * Node.js polyfills to include. Para SDK requires these for crypto operations.\n   * Default: [\"buffer\", \"crypto\", \"stream\", \"util\"]\n   */\n  polyfills?: string[];\n}\n\nconst STUB_PACKAGES = [\n  \"@getpara/solana-wallet-connectors\",\n  \"@getpara/cosmos-wallet-connectors\",\n];\n\nconst STUB_PREFIX = \"\\0para-stub:\";\n\n/**\n * Vite plugin that configures Para SDK requirements:\n * - Node.js polyfills (buffer, crypto, stream, util) via vite-plugin-node-polyfills\n * - Stubs for unused Para wallet connectors (Solana, Cosmos)\n *\n * Returns an array of plugins (Vite flattens nested arrays in the plugins config).\n *\n * Requires `vite-plugin-node-polyfills` as a dev dependency.\n *\n * @example\n * ```ts\n * import { paraVitePlugin } from \"@miden-sdk/use-miden-para-react/vite\";\n *\n * export default defineConfig({\n *   plugins: [react(), midenVitePlugin(), paraVitePlugin()],\n * });\n * ```\n */\nexport function paraVitePlugin(options?: ParaVitePluginOptions): Plugin[] {\n  const polyfills = options?.polyfills ?? [\"buffer\", \"crypto\", \"stream\", \"util\"];\n\n  // Resolve nodePolyfills from the consuming project's node_modules (not\n  // from this package's location) using createRequire with process.cwd().\n  let nodePolyfillsPlugins: Plugin[] = [];\n  try {\n    const projectRequire = createRequire(`file://${process.cwd()}/`);\n    const { nodePolyfills } = projectRequire(\"vite-plugin-node-polyfills\");\n    const result = nodePolyfills({ include: polyfills });\n    // nodePolyfills can return a single Plugin or Plugin[]\n    nodePolyfillsPlugins = Array.isArray(result) ? result : [result];\n  } catch {\n    console.warn(\n      \"[@miden-sdk/para-vite-plugin] vite-plugin-node-polyfills not found. \" +\n        \"Install it: npm install -D vite-plugin-node-polyfills\"\n    );\n  }\n\n  /**\n   * Esbuild plugin that stubs the connector packages during Vite's dep\n   * pre-bundling so esbuild doesn't leave unresolvable bare imports in\n   * the pre-bundled output.\n   */\n  const stubConnectorsEsbuild = {\n    name: \"stub-para-connectors\",\n    setup(build: any) {\n      const filter = new RegExp(\n        `^(${STUB_PACKAGES.map((p) => p.replace(/[\\\\^$.*+?()[\\]{}|/]/g, \"\\\\$&\")).join(\"|\")})$`\n      );\n      build.onResolve({ filter }, (args: any) => ({\n        path: args.path,\n        namespace: \"para-stub\",\n      }));\n      build.onLoad(\n        { filter: /.*/, namespace: \"para-stub\" },\n        () => ({ contents: \"export default {};\", loader: \"js\" as const })\n      );\n    },\n  };\n\n  const paraPlugin: Plugin = {\n    name: \"@miden-sdk/para-vite-plugin\",\n    enforce: \"pre\",\n\n    config() {\n      return {\n        resolve: {\n          dedupe: [\"@getpara/web-sdk\", \"@getpara/react-sdk-lite\"],\n        },\n      };\n    },\n\n    // Inject esbuild stub plugin after all config() hooks have run,\n    // so other plugins (e.g. vite-plugin-node-polyfills) can't overwrite it.\n    configResolved(config) {\n      if (!config.optimizeDeps.esbuildOptions) {\n        config.optimizeDeps.esbuildOptions = {};\n      }\n      if (!config.optimizeDeps.esbuildOptions.plugins) {\n        config.optimizeDeps.esbuildOptions.plugins = [];\n      }\n      const hasPlugin = config.optimizeDeps.esbuildOptions.plugins.some(\n        (p: any) => p.name === \"stub-para-connectors\"\n      );\n      if (!hasPlugin) {\n        config.optimizeDeps.esbuildOptions.plugins.push(stubConnectorsEsbuild);\n      }\n    },\n\n    // Stub the connector packages at Vite's module resolution level\n    // (handles imports that bypass pre-bundling, e.g. in SSR or dev).\n    resolveId(source) {\n      if (STUB_PACKAGES.includes(source)) {\n        return STUB_PREFIX + source;\n      }\n    },\n\n    load(id) {\n      if (id.startsWith(STUB_PREFIX)) {\n        return \"export default {};\";\n      }\n    },\n  };\n\n  return [paraPlugin, ...nodePolyfillsPlugins];\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,yBAA8B;AAU9B,IAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AACF;AAEA,IAAM,cAAc;AAoBb,SAAS,eAAe,SAA2C;AApC1E;AAqCE,QAAM,aAAY,wCAAS,cAAT,YAAsB,CAAC,UAAU,UAAU,UAAU,MAAM;AAI7E,MAAI,uBAAiC,CAAC;AACtC,MAAI;AACF,UAAM,qBAAiB,kCAAc,UAAU,QAAQ,IAAI,CAAC,GAAG;AAC/D,UAAM,EAAE,cAAc,IAAI,eAAe,4BAA4B;AACrE,UAAM,SAAS,cAAc,EAAE,SAAS,UAAU,CAAC;AAEnD,2BAAuB,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC,MAAM;AAAA,EACjE,QAAQ;AACN,YAAQ;AAAA,MACN;AAAA,IAEF;AAAA,EACF;AAOA,QAAM,wBAAwB;AAAA,IAC5B,MAAM;AAAA,IACN,MAAM,OAAY;AAChB,YAAM,SAAS,IAAI;AAAA,QACjB,KAAK,cAAc,IAAI,CAAC,MAAM,EAAE,QAAQ,wBAAwB,MAAM,CAAC,EAAE,KAAK,GAAG,CAAC;AAAA,MACpF;AACA,YAAM,UAAU,EAAE,OAAO,GAAG,CAAC,UAAe;AAAA,QAC1C,MAAM,KAAK;AAAA,QACX,WAAW;AAAA,MACb,EAAE;AACF,YAAM;AAAA,QACJ,EAAE,QAAQ,MAAM,WAAW,YAAY;AAAA,QACvC,OAAO,EAAE,UAAU,sBAAsB,QAAQ,KAAc;AAAA,MACjE;AAAA,IACF;AAAA,EACF;AAEA,QAAM,aAAqB;AAAA,IACzB,MAAM;AAAA,IACN,SAAS;AAAA,IAET,SAAS;AACP,aAAO;AAAA,QACL,SAAS;AAAA,UACP,QAAQ,CAAC,oBAAoB,yBAAyB;AAAA,QACxD;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA,IAIA,eAAe,QAAQ;AACrB,UAAI,CAAC,OAAO,aAAa,gBAAgB;AACvC,eAAO,aAAa,iBAAiB,CAAC;AAAA,MACxC;AACA,UAAI,CAAC,OAAO,aAAa,eAAe,SAAS;AAC/C,eAAO,aAAa,eAAe,UAAU,CAAC;AAAA,MAChD;AACA,YAAM,YAAY,OAAO,aAAa,eAAe,QAAQ;AAAA,QAC3D,CAAC,MAAW,EAAE,SAAS;AAAA,MACzB;AACA,UAAI,CAAC,WAAW;AACd,eAAO,aAAa,eAAe,QAAQ,KAAK,qBAAqB;AAAA,MACvE;AAAA,IACF;AAAA;AAAA;AAAA,IAIA,UAAU,QAAQ;AAChB,UAAI,cAAc,SAAS,MAAM,GAAG;AAClC,eAAO,cAAc;AAAA,MACvB;AAAA,IACF;AAAA,IAEA,KAAK,IAAI;AACP,UAAI,GAAG,WAAW,WAAW,GAAG;AAC9B,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAEA,SAAO,CAAC,YAAY,GAAG,oBAAoB;AAC7C;","names":[]}

package/dist/paraVitePlugin.mjs

@@ -0,0 +1,82 @@
+// src/paraVitePlugin.ts
+import { createRequire } from "module";
+var STUB_PACKAGES = [
+  "@getpara/solana-wallet-connectors",
+  "@getpara/cosmos-wallet-connectors"
+];
+var STUB_PREFIX = "\0para-stub:";
+function paraVitePlugin(options) {
+  var _a;
+  const polyfills = (_a = options == null ? void 0 : options.polyfills) != null ? _a : ["buffer", "crypto", "stream", "util"];
+  let nodePolyfillsPlugins = [];
+  try {
+    const projectRequire = createRequire(`file://${process.cwd()}/`);
+    const { nodePolyfills } = projectRequire("vite-plugin-node-polyfills");
+    const result = nodePolyfills({ include: polyfills });
+    nodePolyfillsPlugins = Array.isArray(result) ? result : [result];
+  } catch {
+    console.warn(
+      "[@miden-sdk/para-vite-plugin] vite-plugin-node-polyfills not found. Install it: npm install -D vite-plugin-node-polyfills"
+    );
+  }
+  const stubConnectorsEsbuild = {
+    name: "stub-para-connectors",
+    setup(build) {
+      const filter = new RegExp(
+        `^(${STUB_PACKAGES.map((p) => p.replace(/[\\^$.*+?()[\]{}|/]/g, "\\$&")).join("|")})$`
+      );
+      build.onResolve({ filter }, (args) => ({
+        path: args.path,
+        namespace: "para-stub"
+      }));
+      build.onLoad(
+        { filter: /.*/, namespace: "para-stub" },
+        () => ({ contents: "export default {};", loader: "js" })
+      );
+    }
+  };
+  const paraPlugin = {
+    name: "@miden-sdk/para-vite-plugin",
+    enforce: "pre",
+    config() {
+      return {
+        resolve: {
+          dedupe: ["@getpara/web-sdk", "@getpara/react-sdk-lite"]
+        }
+      };
+    },
+    // Inject esbuild stub plugin after all config() hooks have run,
+    // so other plugins (e.g. vite-plugin-node-polyfills) can't overwrite it.
+    configResolved(config) {
+      if (!config.optimizeDeps.esbuildOptions) {
+        config.optimizeDeps.esbuildOptions = {};
+      }
+      if (!config.optimizeDeps.esbuildOptions.plugins) {
+        config.optimizeDeps.esbuildOptions.plugins = [];
+      }
+      const hasPlugin = config.optimizeDeps.esbuildOptions.plugins.some(
+        (p) => p.name === "stub-para-connectors"
+      );
+      if (!hasPlugin) {
+        config.optimizeDeps.esbuildOptions.plugins.push(stubConnectorsEsbuild);
+      }
+    },
+    // Stub the connector packages at Vite's module resolution level
+    // (handles imports that bypass pre-bundling, e.g. in SSR or dev).
+    resolveId(source) {
+      if (STUB_PACKAGES.includes(source)) {
+        return STUB_PREFIX + source;
+      }
+    },
+    load(id) {
+      if (id.startsWith(STUB_PREFIX)) {
+        return "export default {};";
+      }
+    }
+  };
+  return [paraPlugin, ...nodePolyfillsPlugins];
+}
+export {
+  paraVitePlugin
+};
+//# sourceMappingURL=paraVitePlugin.mjs.map

package/dist/paraVitePlugin.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/paraVitePlugin.ts"],"sourcesContent":["import type { Plugin } from \"vite\";\nimport { createRequire } from \"node:module\";\n\nexport interface ParaVitePluginOptions {\n  /**\n   * Node.js polyfills to include. Para SDK requires these for crypto operations.\n   * Default: [\"buffer\", \"crypto\", \"stream\", \"util\"]\n   */\n  polyfills?: string[];\n}\n\nconst STUB_PACKAGES = [\n  \"@getpara/solana-wallet-connectors\",\n  \"@getpara/cosmos-wallet-connectors\",\n];\n\nconst STUB_PREFIX = \"\\0para-stub:\";\n\n/**\n * Vite plugin that configures Para SDK requirements:\n * - Node.js polyfills (buffer, crypto, stream, util) via vite-plugin-node-polyfills\n * - Stubs for unused Para wallet connectors (Solana, Cosmos)\n *\n * Returns an array of plugins (Vite flattens nested arrays in the plugins config).\n *\n * Requires `vite-plugin-node-polyfills` as a dev dependency.\n *\n * @example\n * ```ts\n * import { paraVitePlugin } from \"@miden-sdk/use-miden-para-react/vite\";\n *\n * export default defineConfig({\n *   plugins: [react(), midenVitePlugin(), paraVitePlugin()],\n * });\n * ```\n */\nexport function paraVitePlugin(options?: ParaVitePluginOptions): Plugin[] {\n  const polyfills = options?.polyfills ?? [\"buffer\", \"crypto\", \"stream\", \"util\"];\n\n  // Resolve nodePolyfills from the consuming project's node_modules (not\n  // from this package's location) using createRequire with process.cwd().\n  let nodePolyfillsPlugins: Plugin[] = [];\n  try {\n    const projectRequire = createRequire(`file://${process.cwd()}/`);\n    const { nodePolyfills } = projectRequire(\"vite-plugin-node-polyfills\");\n    const result = nodePolyfills({ include: polyfills });\n    // nodePolyfills can return a single Plugin or Plugin[]\n    nodePolyfillsPlugins = Array.isArray(result) ? result : [result];\n  } catch {\n    console.warn(\n      \"[@miden-sdk/para-vite-plugin] vite-plugin-node-polyfills not found. \" +\n        \"Install it: npm install -D vite-plugin-node-polyfills\"\n    );\n  }\n\n  /**\n   * Esbuild plugin that stubs the connector packages during Vite's dep\n   * pre-bundling so esbuild doesn't leave unresolvable bare imports in\n   * the pre-bundled output.\n   */\n  const stubConnectorsEsbuild = {\n    name: \"stub-para-connectors\",\n    setup(build: any) {\n      const filter = new RegExp(\n        `^(${STUB_PACKAGES.map((p) => p.replace(/[\\\\^$.*+?()[\\]{}|/]/g, \"\\\\$&\")).join(\"|\")})$`\n      );\n      build.onResolve({ filter }, (args: any) => ({\n        path: args.path,\n        namespace: \"para-stub\",\n      }));\n      build.onLoad(\n        { filter: /.*/, namespace: \"para-stub\" },\n        () => ({ contents: \"export default {};\", loader: \"js\" as const })\n      );\n    },\n  };\n\n  const paraPlugin: Plugin = {\n    name: \"@miden-sdk/para-vite-plugin\",\n    enforce: \"pre\",\n\n    config() {\n      return {\n        resolve: {\n          dedupe: [\"@getpara/web-sdk\", \"@getpara/react-sdk-lite\"],\n        },\n      };\n    },\n\n    // Inject esbuild stub plugin after all config() hooks have run,\n    // so other plugins (e.g. vite-plugin-node-polyfills) can't overwrite it.\n    configResolved(config) {\n      if (!config.optimizeDeps.esbuildOptions) {\n        config.optimizeDeps.esbuildOptions = {};\n      }\n      if (!config.optimizeDeps.esbuildOptions.plugins) {\n        config.optimizeDeps.esbuildOptions.plugins = [];\n      }\n      const hasPlugin = config.optimizeDeps.esbuildOptions.plugins.some(\n        (p: any) => p.name === \"stub-para-connectors\"\n      );\n      if (!hasPlugin) {\n        config.optimizeDeps.esbuildOptions.plugins.push(stubConnectorsEsbuild);\n      }\n    },\n\n    // Stub the connector packages at Vite's module resolution level\n    // (handles imports that bypass pre-bundling, e.g. in SSR or dev).\n    resolveId(source) {\n      if (STUB_PACKAGES.includes(source)) {\n        return STUB_PREFIX + source;\n      }\n    },\n\n    load(id) {\n      if (id.startsWith(STUB_PREFIX)) {\n        return \"export default {};\";\n      }\n    },\n  };\n\n  return [paraPlugin, ...nodePolyfillsPlugins];\n}\n"],"mappings":";AACA,SAAS,qBAAqB;AAU9B,IAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AACF;AAEA,IAAM,cAAc;AAoBb,SAAS,eAAe,SAA2C;AApC1E;AAqCE,QAAM,aAAY,wCAAS,cAAT,YAAsB,CAAC,UAAU,UAAU,UAAU,MAAM;AAI7E,MAAI,uBAAiC,CAAC;AACtC,MAAI;AACF,UAAM,iBAAiB,cAAc,UAAU,QAAQ,IAAI,CAAC,GAAG;AAC/D,UAAM,EAAE,cAAc,IAAI,eAAe,4BAA4B;AACrE,UAAM,SAAS,cAAc,EAAE,SAAS,UAAU,CAAC;AAEnD,2BAAuB,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC,MAAM;AAAA,EACjE,QAAQ;AACN,YAAQ;AAAA,MACN;AAAA,IAEF;AAAA,EACF;AAOA,QAAM,wBAAwB;AAAA,IAC5B,MAAM;AAAA,IACN,MAAM,OAAY;AAChB,YAAM,SAAS,IAAI;AAAA,QACjB,KAAK,cAAc,IAAI,CAAC,MAAM,EAAE,QAAQ,wBAAwB,MAAM,CAAC,EAAE,KAAK,GAAG,CAAC;AAAA,MACpF;AACA,YAAM,UAAU,EAAE,OAAO,GAAG,CAAC,UAAe;AAAA,QAC1C,MAAM,KAAK;AAAA,QACX,WAAW;AAAA,MACb,EAAE;AACF,YAAM;AAAA,QACJ,EAAE,QAAQ,MAAM,WAAW,YAAY;AAAA,QACvC,OAAO,EAAE,UAAU,sBAAsB,QAAQ,KAAc;AAAA,MACjE;AAAA,IACF;AAAA,EACF;AAEA,QAAM,aAAqB;AAAA,IACzB,MAAM;AAAA,IACN,SAAS;AAAA,IAET,SAAS;AACP,aAAO;AAAA,QACL,SAAS;AAAA,UACP,QAAQ,CAAC,oBAAoB,yBAAyB;AAAA,QACxD;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA,IAIA,eAAe,QAAQ;AACrB,UAAI,CAAC,OAAO,aAAa,gBAAgB;AACvC,eAAO,aAAa,iBAAiB,CAAC;AAAA,MACxC;AACA,UAAI,CAAC,OAAO,aAAa,eAAe,SAAS;AAC/C,eAAO,aAAa,eAAe,UAAU,CAAC;AAAA,MAChD;AACA,YAAM,YAAY,OAAO,aAAa,eAAe,QAAQ;AAAA,QAC3D,CAAC,MAAW,EAAE,SAAS;AAAA,MACzB;AACA,UAAI,CAAC,WAAW;AACd,eAAO,aAAa,eAAe,QAAQ,KAAK,qBAAqB;AAAA,MACvE;AAAA,IACF;AAAA;AAAA;AAAA,IAIA,UAAU,QAAQ;AAChB,UAAI,cAAc,SAAS,MAAM,GAAG;AAClC,eAAO,cAAc;AAAA,MACvB;AAAA,IACF;AAAA,IAEA,KAAK,IAAI;AACP,UAAI,GAAG,WAAW,WAAW,GAAG;AAC9B,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAEA,SAAO,CAAC,YAAY,GAAG,oBAAoB;AAC7C;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miden-sdk/use-miden-para-react",
-  "version": "0.13.2",
+  "version": "0.13.4",
   "description": "React hook that wires Para accounts into a Miden client",
   "license": "MIT",
   "author": "Miden Labs",
@@ -21,6 +21,11 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
+    },
+    "./vite": {
+      "types": "./dist/paraVitePlugin.d.ts",
+      "import": "./dist/paraVitePlugin.mjs",
+      "require": "./dist/paraVitePlugin.cjs"
     }
   },
   "files": [
@@ -29,30 +34,40 @@
     "README.md",
     "package.json"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "scripts": {
     "build": "tsup",
     "prepack": "npm run build",
     "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"
+    "react": "^18.0.0 || ^19.0.0",
+    "vite-plugin-node-polyfills": "^0.22.0"
+  },
+  "peerDependenciesMeta": {
+    "vite-plugin-node-polyfills": {
+      "optional": true
+    }
   },
   "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/node": "^25.3.5",
     "@types/react": "^19.2.5",
     "tsup": "^8.3.0",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
   },
   "engines": {
     "node": ">=18"

package/src/ParaSignerProvider.tsx

@@ -1,3 +1,4 @@
+import '@getpara/react-sdk-lite/styles.css';
 import {
   useState,
   useEffect,
@@ -11,14 +12,25 @@ import { ParaWeb, Environment, type Wallet } from '@getpara/web-sdk';
 import {
   ParaProvider,
   useClient,
+  useAccount as useParaAccount,
   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';
+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 +41,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 +55,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 +89,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 +130,7 @@ export function ParaSignerProvider({
   customSignConfirmStep,
   queryClient,
   paraProviderConfig,
+  customComponents,
 }: ParaSignerProviderProps) {
   return (
     <QueryClientProvider client={queryClient ?? defaultQueryClient}>
@@ -121,6 +145,7 @@ export function ParaSignerProvider({
         <ParaSignerProviderInner
           showSigningModal={showSigningModal}
           customSignConfirmStep={customSignConfirmStep}
+          customComponents={customComponents}
         >
           {children}
         </ParaSignerProviderInner>
@@ -136,69 +161,59 @@ 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 { openModal, closeModal } = useModal();
   const { logoutAsync } = useLogout();
   const openModalRef = useRef(openModal);
+  const closeModalRef = useRef(closeModal);
   const logoutAsyncRef = useRef(logoutAsync);
-  useEffect(() => { openModalRef.current = openModal; }, [openModal]);
-  useEffect(() => { logoutAsyncRef.current = logoutAsync; }, [logoutAsync]);
+  useEffect(() => {
+    openModalRef.current = openModal;
+  }, [openModal]);
+  useEffect(() => {
+    closeModalRef.current = closeModal;
+  }, [closeModal]);
+  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]);
-
-  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;
-        }
+    showSigningModalRef.current = showSigningModal;
+  }, [showSigningModal]);
+  useEffect(() => {
+    customSignConfirmStepRef.current = customSignConfirmStep;
+  }, [customSignConfirmStep]);
 
-        const wallets = Object.values(await paraRef.current.getWallets());
-        const evmWallets = wallets.filter((w) => w.type === 'EVM');
+  // Use Para SDK's reactive useAccount() hook to detect login state.
+  // This subscribes to the internal state machine instead of polling isFullyLoggedIn().
+  const { isConnected: paraIsConnected, embedded } = useParaAccount();
+  const evmWallets = embedded?.wallets?.filter((w) => w.type === 'EVM') ?? [];
+  const wallet = evmWallets.length > 0 ? (evmWallets[0] as unknown as Wallet) : null;
+  const isConnected = paraIsConnected && wallet !== null;
 
-        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);
-        }
-      }
+  // Close the modal when login is detected
+  useEffect(() => {
+    if (isConnected) {
+      closeModalRef.current();
     }
-
-    checkConnection();
-    const interval = setInterval(checkConnection, 2000);
-    return () => {
-      cancelled = true;
-      clearInterval(interval);
-    };
-  }, []);
+  }, [isConnected]);
 
   // Connect opens the Para modal
   const connect = useCallback(async () => {
@@ -209,8 +224,6 @@ function ParaSignerProviderInner({
   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).
@@ -224,7 +237,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 +278,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 +286,7 @@ function ParaSignerProviderInner({
               publicKeyCommitment: commitmentBytes,
               accountType: 'RegularAccountImmutableCode',
               storageMode: AccountStorageMode.public(),
+              ...(customComponents?.length ? { customComponents } : {}),
             },
             storeName: `para_${wallet.id}`,
             name: 'Para',

package/src/paraVitePlugin.ts

@@ -0,0 +1,123 @@
+import type { Plugin } from "vite";
+import { createRequire } from "node:module";
+
+export interface ParaVitePluginOptions {
+  /**
+   * Node.js polyfills to include. Para SDK requires these for crypto operations.
+   * Default: ["buffer", "crypto", "stream", "util"]
+   */
+  polyfills?: string[];
+}
+
+const STUB_PACKAGES = [
+  "@getpara/solana-wallet-connectors",
+  "@getpara/cosmos-wallet-connectors",
+];
+
+const STUB_PREFIX = "\0para-stub:";
+
+/**
+ * Vite plugin that configures Para SDK requirements:
+ * - Node.js polyfills (buffer, crypto, stream, util) via vite-plugin-node-polyfills
+ * - Stubs for unused Para wallet connectors (Solana, Cosmos)
+ *
+ * Returns an array of plugins (Vite flattens nested arrays in the plugins config).
+ *
+ * Requires `vite-plugin-node-polyfills` as a dev dependency.
+ *
+ * @example
+ * ```ts
+ * import { paraVitePlugin } from "@miden-sdk/use-miden-para-react/vite";
+ *
+ * export default defineConfig({
+ *   plugins: [react(), midenVitePlugin(), paraVitePlugin()],
+ * });
+ * ```
+ */
+export function paraVitePlugin(options?: ParaVitePluginOptions): Plugin[] {
+  const polyfills = options?.polyfills ?? ["buffer", "crypto", "stream", "util"];
+
+  // Resolve nodePolyfills from the consuming project's node_modules (not
+  // from this package's location) using createRequire with process.cwd().
+  let nodePolyfillsPlugins: Plugin[] = [];
+  try {
+    const projectRequire = createRequire(`file://${process.cwd()}/`);
+    const { nodePolyfills } = projectRequire("vite-plugin-node-polyfills");
+    const result = nodePolyfills({ include: polyfills });
+    // nodePolyfills can return a single Plugin or Plugin[]
+    nodePolyfillsPlugins = Array.isArray(result) ? result : [result];
+  } catch {
+    console.warn(
+      "[@miden-sdk/para-vite-plugin] vite-plugin-node-polyfills not found. " +
+        "Install it: npm install -D vite-plugin-node-polyfills"
+    );
+  }
+
+  /**
+   * Esbuild plugin that stubs the connector packages during Vite's dep
+   * pre-bundling so esbuild doesn't leave unresolvable bare imports in
+   * the pre-bundled output.
+   */
+  const stubConnectorsEsbuild = {
+    name: "stub-para-connectors",
+    setup(build: any) {
+      const filter = new RegExp(
+        `^(${STUB_PACKAGES.map((p) => p.replace(/[\\^$.*+?()[\]{}|/]/g, "\\$&")).join("|")})$`
+      );
+      build.onResolve({ filter }, (args: any) => ({
+        path: args.path,
+        namespace: "para-stub",
+      }));
+      build.onLoad(
+        { filter: /.*/, namespace: "para-stub" },
+        () => ({ contents: "export default {};", loader: "js" as const })
+      );
+    },
+  };
+
+  const paraPlugin: Plugin = {
+    name: "@miden-sdk/para-vite-plugin",
+    enforce: "pre",
+
+    config() {
+      return {
+        resolve: {
+          dedupe: ["@getpara/web-sdk", "@getpara/react-sdk-lite"],
+        },
+      };
+    },
+
+    // Inject esbuild stub plugin after all config() hooks have run,
+    // so other plugins (e.g. vite-plugin-node-polyfills) can't overwrite it.
+    configResolved(config) {
+      if (!config.optimizeDeps.esbuildOptions) {
+        config.optimizeDeps.esbuildOptions = {};
+      }
+      if (!config.optimizeDeps.esbuildOptions.plugins) {
+        config.optimizeDeps.esbuildOptions.plugins = [];
+      }
+      const hasPlugin = config.optimizeDeps.esbuildOptions.plugins.some(
+        (p: any) => p.name === "stub-para-connectors"
+      );
+      if (!hasPlugin) {
+        config.optimizeDeps.esbuildOptions.plugins.push(stubConnectorsEsbuild);
+      }
+    },
+
+    // Stub the connector packages at Vite's module resolution level
+    // (handles imports that bypass pre-bundling, e.g. in SSR or dev).
+    resolveId(source) {
+      if (STUB_PACKAGES.includes(source)) {
+        return STUB_PREFIX + source;
+      }
+    },
+
+    load(id) {
+      if (id.startsWith(STUB_PREFIX)) {
+        return "export default {};";
+      }
+    },
+  };
+
+  return [paraPlugin, ...nodePolyfillsPlugins];
+}