@miden-sdk/use-miden-para-react 0.10.10

package/README.md

@@ -0,0 +1,98 @@
+# @miden-sdk/use-miden-para-react
+
+React hook that wires Para accounts into a Miden client.
+
+## Install
+
+```bash
+npm install @miden-sdk/use-miden-para-react
+```
+
+## Peer Dependencies
+
+`@miden-sdk/use-miden-para-react` expects these packages to be provided by the consuming app. Install matching versions alongside this package to avoid duplicate copies:
+
+- `@demox-labs/miden-sdk@^0.12.5`
+- `@getpara/react-sdk-lite@^2.2.0`
+- `@miden-sdk/miden-para@^0.10.10`
+- `react@^18.0.0 || ^19.0.0`
+
+Example install:
+
+```bash
+yarn add @miden-sdk/use-miden-para-react @demox-labs/miden-sdk@^0.12.5 @getpara/react-sdk-lite@^2.2.0 @miden-sdk/miden-para@^0.10.10 react@^18.0.0
+```
+
+## Usage
+
+```tsx
+import '@getpara/react-sdk-lite/styles.css';
+import { ParaProvider, useAccount, useModal } from '@getpara/react-sdk-lite';
+import { useParaMiden } from '@miden-sdk/use-miden-para-react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ParaProvider
+        paraClientConfig={{
+          apiKey: import.meta.env.VITE_PARA_API_KEY,
+        }}
+        config={{ appName: 'Starter for MidenxPara' }}
+      >
+        <Content />
+      </ParaProvider>
+    </QueryClientProvider>
+  );
+}
+
+function Content() {
+  const { client, accountId, para } = useParaMiden('https://rpc.testnet.miden.io');
+  const { isConnected } = useAccount();
+  const { openModal } = useModal();
+
+  return (
+    <div>
+      <button onClick={() => isConnected ? para.logout() : openModal?.()}>
+        {isConnected ? 'Disconnect Para' : 'Connect with Para'}
+      </button>
+      {isConnected &&
+        <>
+          <p>Account: {accountId ?? '—'}</p>
+          <p>Client ready: {client ? 'yes' : 'no'}</p>
+        </>
+      }
+    </div>
+  );
+}
+```
+
+For production apps, you must use a Para **production** API key. Use a non-prod key for local/dev environments.
+
+Pass a custom transaction confirmation step as the optional fourth argument if you want to show your own popup before Para signs:
+
+```tsx
+const confirmTx = async (summary) => {
+  await openCustomModal(summary);
+};
+
+const { client } = useParaMiden(
+  'https://rpc.testnet.miden.io',
+  'public',
+  {},
+  true, // set to false to skip the built-in modal
+  confirmTx
+);
+```
+
+If you switch the hook to `storageMode` set to `private`, pass an `accountSeed` via the third argument so the underlying client can initialize; this is required for private accounts and the hook will throw if it is omitted.
+
+## Build
+
+```bash
+npm run build
+```
+
+Outputs `dist/index.mjs`, `dist/index.cjs`, and `dist/index.d.ts`. Use `npm pack` to inspect the tarball before publishing.

package/dist/index.d.mts

@@ -0,0 +1,28 @@
+import * as _getpara_react_sdk_lite from '@getpara/react-sdk-lite';
+import * as _demox_labs_miden_sdk from '@demox-labs/miden-sdk';
+import { MidenAccountStorageMode, Opts, CustomSignConfirmStep } from '@miden-sdk/miden-para';
+
+/**
+ * React hook that converts Para React SDK context into a ready-to-use Miden WebClient.
+ * Spawns the client once a Para session with at least one EVM wallet is active.
+ *
+ * Returns:
+ * - client: WebClient instance backed by the active Para session (or null while loading)
+ * - accountId: Miden account id derived for the selected EVM wallet
+ * - para: Para client instance from context
+ * - evmWallets: filtered list of Para wallets with type === 'EVM'
+ * - nodeUrl: Miden node endpoint used for the client
+ * - opts: forwarded options used when creating the client
+ * - showSigningModal: toggles the built-in signing modal
+ * - customSignConfirmStep: optional callback for custom transaction confirmation flows
+ */
+declare function useParaMiden(nodeUrl: string, storageMode?: MidenAccountStorageMode, opts?: Omit<Opts, 'endpoint' | 'type' | 'storageMode'>, showSigningModal?: boolean, customSignConfirmStep?: CustomSignConfirmStep): {
+    client: _demox_labs_miden_sdk.WebClient | null;
+    accountId: string;
+    para: _getpara_react_sdk_lite.default | undefined;
+    evmWallets: _getpara_react_sdk_lite.AvailableWallet[] | undefined;
+    nodeUrl: string;
+    opts: Omit<Opts, "type" | "endpoint" | "storageMode">;
+};
+
+export { useParaMiden };

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+import * as _getpara_react_sdk_lite from '@getpara/react-sdk-lite';
+import * as _demox_labs_miden_sdk from '@demox-labs/miden-sdk';
+import { MidenAccountStorageMode, Opts, CustomSignConfirmStep } from '@miden-sdk/miden-para';
+
+/**
+ * React hook that converts Para React SDK context into a ready-to-use Miden WebClient.
+ * Spawns the client once a Para session with at least one EVM wallet is active.
+ *
+ * Returns:
+ * - client: WebClient instance backed by the active Para session (or null while loading)
+ * - accountId: Miden account id derived for the selected EVM wallet
+ * - para: Para client instance from context
+ * - evmWallets: filtered list of Para wallets with type === 'EVM'
+ * - nodeUrl: Miden node endpoint used for the client
+ * - opts: forwarded options used when creating the client
+ * - showSigningModal: toggles the built-in signing modal
+ * - customSignConfirmStep: optional callback for custom transaction confirmation flows
+ */
+declare function useParaMiden(nodeUrl: string, storageMode?: MidenAccountStorageMode, opts?: Omit<Opts, 'endpoint' | 'type' | 'storageMode'>, showSigningModal?: boolean, customSignConfirmStep?: CustomSignConfirmStep): {
+    client: _demox_labs_miden_sdk.WebClient | null;
+    accountId: string;
+    para: _getpara_react_sdk_lite.default | undefined;
+    evmWallets: _getpara_react_sdk_lite.AvailableWallet[] | undefined;
+    nodeUrl: string;
+    opts: Omit<Opts, "type" | "endpoint" | "storageMode">;
+};
+
+export { useParaMiden };

package/dist/index.js

@@ -0,0 +1,106 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useParaMiden: () => useParaMiden
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/useParaMiden.ts
+var import_react_sdk_lite = require("@getpara/react-sdk-lite");
+var import_react = require("react");
+var import_miden_para = require("@miden-sdk/miden-para");
+function useParaMiden(nodeUrl, storageMode = "public", opts = {}, showSigningModal = true, customSignConfirmStep) {
+  const para = (0, import_react_sdk_lite.useClient)();
+  const { isConnected, embedded } = (0, import_react_sdk_lite.useAccount)();
+  const clientRef = (0, import_react.useRef)(
+    null
+  );
+  const [accountId, setAccountId] = (0, import_react.useState)("");
+  const evmWallets = (0, import_react.useMemo)(
+    () => {
+      var _a;
+      return (_a = embedded.wallets) == null ? void 0 : _a.filter((wallet) => wallet.type === "EVM");
+    },
+    [embedded.wallets]
+  );
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    async function setupClient() {
+      var _a;
+      if (!isConnected || !para || !((_a = embedded.wallets) == null ? void 0 : _a.length) || clientRef.current) {
+        return;
+      }
+      const { AccountType } = await import("@demox-labs/miden-sdk");
+      const { client: midenParaClient, accountId: aId } = await (0, import_miden_para.createParaMidenClient)(
+        para,
+        evmWallets,
+        {
+          ...opts,
+          endpoint: nodeUrl,
+          type: AccountType.RegularAccountImmutableCode,
+          storageMode
+        },
+        showSigningModal,
+        customSignConfirmStep
+      );
+      if (cancelled) {
+        return;
+      }
+      clientRef.current = midenParaClient;
+      setAccountId(aId);
+    }
+    setupClient();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    isConnected,
+    evmWallets,
+    para,
+    nodeUrl,
+    showSigningModal,
+    customSignConfirmStep
+  ]);
+  return {
+    client: clientRef.current,
+    accountId,
+    para,
+    evmWallets,
+    nodeUrl,
+    opts
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useParaMiden
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/useParaMiden.ts"],"sourcesContent":["export { useParaMiden } from './useParaMiden';\n","'use client';\n\nimport { useClient, useAccount, type Wallet } from '@getpara/react-sdk-lite';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  createParaMidenClient,\n  type Opts,\n  type MidenAccountStorageMode,\n  type CustomSignConfirmStep,\n} from '@miden-sdk/miden-para';\n\n/**\n * React hook that converts Para React SDK context into a ready-to-use Miden WebClient.\n * Spawns the client once a Para session with at least one EVM wallet is active.\n *\n * Returns:\n * - client: WebClient instance backed by the active Para session (or null while loading)\n * - accountId: Miden account id derived for the selected EVM wallet\n * - para: Para client instance from context\n * - evmWallets: filtered list of Para wallets with type === 'EVM'\n * - nodeUrl: Miden node endpoint used for the client\n * - opts: forwarded options used when creating the client\n * - showSigningModal: toggles the built-in signing modal\n * - customSignConfirmStep: optional callback for custom transaction confirmation flows\n */\nexport function useParaMiden(\n  nodeUrl: string,\n  storageMode: MidenAccountStorageMode = 'public',\n  opts: Omit<Opts, 'endpoint' | 'type' | 'storageMode'> = {},\n  showSigningModal: boolean = true,\n  customSignConfirmStep?: CustomSignConfirmStep\n) {\n  const para = useClient();\n  const { isConnected, embedded } = useAccount();\n  const clientRef = useRef<import('@demox-labs/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('@demox-labs/miden-sdk');\n\n      const { client: midenParaClient, accountId: aId } =\n        await createParaMidenClient(\n          para,\n          evmWallets as Wallet[],\n          {\n            ...opts,\n            endpoint: nodeUrl,\n            type: AccountType.RegularAccountImmutableCode,\n            storageMode,\n          },\n          showSigningModal,\n          customSignConfirmStep\n        );\n\n      if (cancelled) {\n        return;\n      }\n\n      clientRef.current = midenParaClient;\n      setAccountId(aId);\n    }\n\n    setupClient();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    isConnected,\n    evmWallets,\n    para,\n    nodeUrl,\n    showSigningModal,\n    customSignConfirmStep,\n  ]);\n\n  return {\n    client: clientRef.current,\n    accountId,\n    para,\n    evmWallets,\n    nodeUrl,\n    opts,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,4BAAmD;AACnD,mBAAqD;AACrD,wBAKO;AAgBA,SAAS,aACd,SACA,cAAuC,UACvC,OAAwD,CAAC,GACzD,mBAA4B,MAC5B,uBACA;AACA,QAAM,WAAO,iCAAU;AACvB,QAAM,EAAE,aAAa,SAAS,QAAI,kCAAW;AAC7C,QAAM,gBAAY;AAAA,IAChB;AAAA,EACF;AACA,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAiB,EAAE;AAErD,QAAM,iBAAa;AAAA,IACjB,MAAG;AAxCP;AAwCU,4BAAS,YAAT,mBAAkB,OAAO,CAAC,WAAW,OAAO,SAAS;AAAA;AAAA,IAC3D,CAAC,SAAS,OAAO;AAAA,EACnB;AAEA,8BAAU,MAAM;AACd,QAAI,YAAY;AAEhB,mBAAe,cAAc;AA/CjC;AAgDM,UACE,CAAC,eACD,CAAC,QACD,GAAC,cAAS,YAAT,mBAAkB,WACnB,UAAU,SACV;AACA;AAAA,MACF;AAEA,YAAM,EAAE,YAAY,IAAI,MAAM,OAAO,uBAAuB;AAE5D,YAAM,EAAE,QAAQ,iBAAiB,WAAW,IAAI,IAC9C,UAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,UAAU;AAAA,UACV,MAAM,YAAY;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEF,UAAI,WAAW;AACb;AAAA,MACF;AAEA,gBAAU,UAAU;AACpB,mBAAa,GAAG;AAAA,IAClB;AAEA,gBAAY;AAEZ,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL,QAAQ,UAAU;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,71 @@
+// src/useParaMiden.ts
+import { useClient, useAccount } from "@getpara/react-sdk-lite";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  createParaMidenClient
+} from "@miden-sdk/miden-para";
+function useParaMiden(nodeUrl, storageMode = "public", opts = {}, showSigningModal = true, customSignConfirmStep) {
+  const para = useClient();
+  const { isConnected, embedded } = useAccount();
+  const clientRef = useRef(
+    null
+  );
+  const [accountId, setAccountId] = useState("");
+  const evmWallets = useMemo(
+    () => {
+      var _a;
+      return (_a = embedded.wallets) == null ? void 0 : _a.filter((wallet) => wallet.type === "EVM");
+    },
+    [embedded.wallets]
+  );
+  useEffect(() => {
+    let cancelled = false;
+    async function setupClient() {
+      var _a;
+      if (!isConnected || !para || !((_a = embedded.wallets) == null ? void 0 : _a.length) || clientRef.current) {
+        return;
+      }
+      const { AccountType } = await import("@demox-labs/miden-sdk");
+      const { client: midenParaClient, accountId: aId } = await createParaMidenClient(
+        para,
+        evmWallets,
+        {
+          ...opts,
+          endpoint: nodeUrl,
+          type: AccountType.RegularAccountImmutableCode,
+          storageMode
+        },
+        showSigningModal,
+        customSignConfirmStep
+      );
+      if (cancelled) {
+        return;
+      }
+      clientRef.current = midenParaClient;
+      setAccountId(aId);
+    }
+    setupClient();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    isConnected,
+    evmWallets,
+    para,
+    nodeUrl,
+    showSigningModal,
+    customSignConfirmStep
+  ]);
+  return {
+    client: clientRef.current,
+    accountId,
+    para,
+    evmWallets,
+    nodeUrl,
+    opts
+  };
+}
+export {
+  useParaMiden
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useParaMiden.ts"],"sourcesContent":["'use client';\n\nimport { useClient, useAccount, type Wallet } from '@getpara/react-sdk-lite';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  createParaMidenClient,\n  type Opts,\n  type MidenAccountStorageMode,\n  type CustomSignConfirmStep,\n} from '@miden-sdk/miden-para';\n\n/**\n * React hook that converts Para React SDK context into a ready-to-use Miden WebClient.\n * Spawns the client once a Para session with at least one EVM wallet is active.\n *\n * Returns:\n * - client: WebClient instance backed by the active Para session (or null while loading)\n * - accountId: Miden account id derived for the selected EVM wallet\n * - para: Para client instance from context\n * - evmWallets: filtered list of Para wallets with type === 'EVM'\n * - nodeUrl: Miden node endpoint used for the client\n * - opts: forwarded options used when creating the client\n * - showSigningModal: toggles the built-in signing modal\n * - customSignConfirmStep: optional callback for custom transaction confirmation flows\n */\nexport function useParaMiden(\n  nodeUrl: string,\n  storageMode: MidenAccountStorageMode = 'public',\n  opts: Omit<Opts, 'endpoint' | 'type' | 'storageMode'> = {},\n  showSigningModal: boolean = true,\n  customSignConfirmStep?: CustomSignConfirmStep\n) {\n  const para = useClient();\n  const { isConnected, embedded } = useAccount();\n  const clientRef = useRef<import('@demox-labs/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('@demox-labs/miden-sdk');\n\n      const { client: midenParaClient, accountId: aId } =\n        await createParaMidenClient(\n          para,\n          evmWallets as Wallet[],\n          {\n            ...opts,\n            endpoint: nodeUrl,\n            type: AccountType.RegularAccountImmutableCode,\n            storageMode,\n          },\n          showSigningModal,\n          customSignConfirmStep\n        );\n\n      if (cancelled) {\n        return;\n      }\n\n      clientRef.current = midenParaClient;\n      setAccountId(aId);\n    }\n\n    setupClient();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [\n    isConnected,\n    evmWallets,\n    para,\n    nodeUrl,\n    showSigningModal,\n    customSignConfirmStep,\n  ]);\n\n  return {\n    client: clientRef.current,\n    accountId,\n    para,\n    evmWallets,\n    nodeUrl,\n    opts,\n  };\n}\n"],"mappings":";AAEA,SAAS,WAAW,kBAA+B;AACnD,SAAS,WAAW,SAAS,QAAQ,gBAAgB;AACrD;AAAA,EACE;AAAA,OAIK;AAgBA,SAAS,aACd,SACA,cAAuC,UACvC,OAAwD,CAAC,GACzD,mBAA4B,MAC5B,uBACA;AACA,QAAM,OAAO,UAAU;AACvB,QAAM,EAAE,aAAa,SAAS,IAAI,WAAW;AAC7C,QAAM,YAAY;AAAA,IAChB;AAAA,EACF;AACA,QAAM,CAAC,WAAW,YAAY,IAAI,SAAiB,EAAE;AAErD,QAAM,aAAa;AAAA,IACjB,MAAG;AAxCP;AAwCU,4BAAS,YAAT,mBAAkB,OAAO,CAAC,WAAW,OAAO,SAAS;AAAA;AAAA,IAC3D,CAAC,SAAS,OAAO;AAAA,EACnB;AAEA,YAAU,MAAM;AACd,QAAI,YAAY;AAEhB,mBAAe,cAAc;AA/CjC;AAgDM,UACE,CAAC,eACD,CAAC,QACD,GAAC,cAAS,YAAT,mBAAkB,WACnB,UAAU,SACV;AACA;AAAA,MACF;AAEA,YAAM,EAAE,YAAY,IAAI,MAAM,OAAO,uBAAuB;AAE5D,YAAM,EAAE,QAAQ,iBAAiB,WAAW,IAAI,IAC9C,MAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,UAAU;AAAA,UACV,MAAM,YAAY;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEF,UAAI,WAAW;AACb;AAAA,MACF;AAEA,gBAAU,UAAU;AACpB,mBAAa,GAAG;AAAA,IAClB;AAEA,gBAAY;AAEZ,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL,QAAQ,UAAU;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@miden-sdk/use-miden-para-react",
+  "version": "0.10.10",
+  "description": "React hook that wires Para accounts into a Miden client",
+  "license": "MIT",
+  "author": "Miden Labs",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/0xMiden/miden-para",
+    "directory": "packages/use-miden-para-react"
+  },
+  "homepage": "https://miden.xyz/",
+  "bugs": {
+    "url": "https://github.com/0xMiden/miden-para/issues"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "package.json"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "prepack": "npm run build",
+    "publish": "npm run build && npm publish --access public"
+  },
+  "peerDependencies": {
+    "@demox-labs/miden-sdk": "^0.12.5",
+    "@getpara/react-sdk-lite": "^2.2.0",
+    "@miden-sdk/miden-para": "^0.10.10",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@demox-labs/miden-sdk": "^0.12.5",
+    "@types/react": "^19.2.5",
+    "tsup": "^8.3.0",
+    "typescript": "^5.9.3",
+    "@getpara/react-sdk-lite": "^2.3.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "miden",
+    "para",
+    "react",
+    "hook",
+    "wallet"
+  ]
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { useParaMiden } from './useParaMiden';

package/src/useParaMiden.ts

@@ -0,0 +1,104 @@
+'use client';
+
+import { useClient, useAccount, type Wallet } from '@getpara/react-sdk-lite';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  createParaMidenClient,
+  type Opts,
+  type MidenAccountStorageMode,
+  type CustomSignConfirmStep,
+} from '@miden-sdk/miden-para';
+
+/**
+ * React hook that converts Para React SDK context into a ready-to-use Miden WebClient.
+ * Spawns the client once a Para session with at least one EVM wallet is active.
+ *
+ * Returns:
+ * - client: WebClient instance backed by the active Para session (or null while loading)
+ * - accountId: Miden account id derived for the selected EVM wallet
+ * - para: Para client instance from context
+ * - evmWallets: filtered list of Para wallets with type === 'EVM'
+ * - nodeUrl: Miden node endpoint used for the client
+ * - opts: forwarded options used when creating the client
+ * - showSigningModal: toggles the built-in signing modal
+ * - customSignConfirmStep: optional callback for custom transaction confirmation flows
+ */
+export function useParaMiden(
+  nodeUrl: string,
+  storageMode: MidenAccountStorageMode = 'public',
+  opts: Omit<Opts, 'endpoint' | 'type' | 'storageMode'> = {},
+  showSigningModal: boolean = true,
+  customSignConfirmStep?: CustomSignConfirmStep
+) {
+  const para = useClient();
+  const { isConnected, embedded } = useAccount();
+  const clientRef = useRef<import('@demox-labs/miden-sdk').WebClient | null>(
+    null
+  );
+  const [accountId, setAccountId] = useState<string>('');
+
+  const evmWallets = useMemo(
+    () => embedded.wallets?.filter((wallet) => wallet.type === 'EVM'),
+    [embedded.wallets]
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function setupClient() {
+      if (
+        !isConnected ||
+        !para ||
+        !embedded.wallets?.length ||
+        clientRef.current
+      ) {
+        return;
+      }
+
+      const { AccountType } = await import('@demox-labs/miden-sdk');
+
+      const { client: midenParaClient, accountId: aId } =
+        await createParaMidenClient(
+          para,
+          evmWallets as Wallet[],
+          {
+            ...opts,
+            endpoint: nodeUrl,
+            type: AccountType.RegularAccountImmutableCode,
+            storageMode,
+          },
+          showSigningModal,
+          customSignConfirmStep
+        );
+
+      if (cancelled) {
+        return;
+      }
+
+      clientRef.current = midenParaClient;
+      setAccountId(aId);
+    }
+
+    setupClient();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    isConnected,
+    evmWallets,
+    para,
+    nodeUrl,
+    showSigningModal,
+    customSignConfirmStep,
+  ]);
+
+  return {
+    client: clientRef.current,
+    accountId,
+    para,
+    evmWallets,
+    nodeUrl,
+    opts,
+  };
+}