@miden-sdk/react 0.13.0 → 0.13.1

package/dist/index.mjs

@@ -36,7 +36,7 @@ var useMidenStore = create()((set) => ({
   ...initialState,
   setClient: (client) => set({
     client,
-    isReady: true,
+    isReady: client !== null,
     isInitializing: false,
     initError: null
   }),
@@ -199,12 +199,13 @@ var toBech32AccountId = (accountId) => {
 
 // src/context/MidenProvider.tsx
 import {
-  createContext,
-  useContext,
+  createContext as createContext2,
+  useContext as useContext2,
   useEffect,
   useRef,
   useCallback,
-  useMemo
+  useMemo,
+  useState
 } from "react";
 import { WebClient } from "@miden-sdk/miden-sdk";
 
@@ -311,9 +312,72 @@ function normalizeTimeout(timeoutMs) {
   return typeof timeoutMs === "bigint" ? timeoutMs : BigInt(timeoutMs);
 }
 
+// src/context/SignerContext.ts
+import { createContext, useContext } from "react";
+var SignerContext = createContext(null);
+function useSigner() {
+  return useContext(SignerContext);
+}
+
+// src/utils/signerAccount.ts
+async function getAccountType(accountType) {
+  const { AccountType } = await import("@miden-sdk/miden-sdk");
+  switch (accountType) {
+    case "RegularAccountImmutableCode":
+      return AccountType.RegularAccountImmutableCode;
+    case "RegularAccountUpdatableCode":
+      return AccountType.RegularAccountUpdatableCode;
+    case "FungibleFaucet":
+      return AccountType.FungibleFaucet;
+    case "NonFungibleFaucet":
+      return AccountType.NonFungibleFaucet;
+    default:
+      return AccountType.RegularAccountImmutableCode;
+  }
+}
+function isPrivateStorageMode(storageMode) {
+  return storageMode.toString() === "private";
+}
+async function initializeSignerAccount(client, config) {
+  const { AccountBuilder, AccountComponent, Word } = await import("@miden-sdk/miden-sdk");
+  await client.syncState();
+  const commitmentWord = Word.deserialize(config.publicKeyCommitment);
+  const seed = config.accountSeed ?? crypto.getRandomValues(new Uint8Array(32));
+  const accountType = await getAccountType(config.accountType);
+  const builder = new AccountBuilder(seed);
+  const buildResult = builder.withAuthComponent(
+    AccountComponent.createAuthComponentFromCommitment(
+      commitmentWord,
+      1
+      // ECDSA auth scheme (K256/Keccak)
+    )
+  ).accountType(accountType).storageMode(config.storageMode).withBasicWalletComponent().build();
+  const account = buildResult.account;
+  const accountId = account.id();
+  if (!isPrivateStorageMode(config.storageMode)) {
+    try {
+      await client.importAccountById(accountId);
+      await client.syncState();
+      return accountId.toString();
+    } catch {
+    }
+  }
+  try {
+    const existing = await client.getAccount(accountId);
+    if (existing) {
+      await client.syncState();
+      return accountId.toString();
+    }
+  } catch {
+  }
+  await client.newAccount(account, false);
+  await client.syncState();
+  return accountId.toString();
+}
+
 // src/context/MidenProvider.tsx
 import { Fragment, jsx } from "react/jsx-runtime";
-var MidenContext = createContext(null);
+var MidenContext = createContext2(null);
 function MidenProvider({
   children,
   config = {},
@@ -334,6 +398,8 @@ function MidenProvider({
   const syncIntervalRef = useRef(null);
   const isInitializedRef = useRef(false);
   const clientLockRef = useRef(new AsyncLock());
+  const signerContext = useSigner();
+  const [signerAccountId, setSignerAccountId] = useState(null);
   const resolvedConfig = useMemo(
     () => ({
       ...config,
@@ -380,18 +446,49 @@ function MidenProvider({
     });
   }, [client, isReady, runExclusive, setSyncState]);
   useEffect(() => {
-    if (isInitializedRef.current) return;
-    isInitializedRef.current = true;
+    if (!signerContext && isInitializedRef.current) return;
+    if (signerContext && !signerContext.isConnected) {
+      if (client) {
+        useMidenStore.getState().reset();
+        setClient(null);
+        setSignerAccountId(null);
+      }
+      return;
+    }
+    if (!signerContext) {
+      isInitializedRef.current = true;
+    }
     const initClient = async () => {
       setInitializing(true);
       setConfig(resolvedConfig);
       try {
-        const seed = resolvedConfig.seed;
-        const webClient = await WebClient.createClient(
-          resolvedConfig.rpcUrl,
-          resolvedConfig.noteTransportUrl,
-          seed
-        );
+        let webClient;
+        if (signerContext && signerContext.isConnected) {
+          const storeName = `MidenClientDB_${signerContext.storeName}`;
+          webClient = await WebClient.createClientWithExternalKeystore(
+            resolvedConfig.rpcUrl,
+            resolvedConfig.noteTransportUrl,
+            resolvedConfig.seed,
+            storeName,
+            void 0,
+            // getKeyCb - not needed for public accounts
+            void 0,
+            // insertKeyCb - not needed for public accounts
+            signerContext.signCb
+          );
+          const accountId = await initializeSignerAccount(
+            webClient,
+            signerContext.accountConfig
+          );
+          setSignerAccountId(accountId);
+        } else {
+          const seed = resolvedConfig.seed;
+          webClient = await WebClient.createClient(
+            resolvedConfig.rpcUrl,
+            resolvedConfig.noteTransportUrl,
+            seed
+          );
+        }
         setClient(webClient);
         try {
           const summary = await runExclusive(() => webClient.syncState());
@@ -399,6 +496,8 @@ function MidenProvider({
             syncHeight: summary.blockNum(),
             lastSyncTime: Date.now()
           });
+          const accounts = await webClient.getAccounts();
+          useMidenStore.getState().setAccounts(accounts);
         } catch {
         }
       } catch (error) {
@@ -413,7 +512,9 @@ function MidenProvider({
     setConfig,
     setInitError,
     setInitializing,
-    setSyncState
+    setSyncState,
+    signerContext,
+    client
   ]);
   useEffect(() => {
     if (!isReady || !client) return;
@@ -445,12 +546,13 @@ function MidenProvider({
     error: initError,
     sync,
     runExclusive,
-    prover: defaultProver
+    prover: defaultProver,
+    signerAccountId
   };
   return /* @__PURE__ */ jsx(MidenContext.Provider, { value: contextValue, children });
 }
 function useMiden() {
-  const context = useContext(MidenContext);
+  const context = useContext2(MidenContext);
   if (!context) {
     throw new Error("useMiden must be used within a MidenProvider");
   }
@@ -530,7 +632,7 @@ function isFaucetId(accountId) {
 }
 
 // src/hooks/useAccount.ts
-import { useCallback as useCallback3, useEffect as useEffect4, useState, useMemo as useMemo3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useState as useState2, useMemo as useMemo3 } from "react";
 
 // src/hooks/useAssetMetadata.ts
 import { useEffect as useEffect3, useMemo as useMemo2 } from "react";
@@ -622,8 +724,8 @@ function useAccount(accountId) {
   const accountDetails = useMidenStore((state) => state.accountDetails);
   const setAccountDetails = useMidenStore((state) => state.setAccountDetails);
   const { lastSyncTime } = useSyncStateStore();
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState2(false);
+  const [error, setError] = useState2(null);
   const accountIdStr = useMemo3(() => {
     if (!accountId) return void 0;
     if (typeof accountId === "string") return accountId;
@@ -712,7 +814,7 @@ function useAccount(accountId) {
 }
 
 // src/hooks/useNotes.ts
-import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo4, useState as useState2 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo4, useState as useState3 } from "react";
 import { NoteFilter, NoteFilterTypes } from "@miden-sdk/miden-sdk";
 
 // src/utils/amounts.ts
@@ -808,7 +910,7 @@ function useNotes(options) {
   const setNotes = useMidenStore((state) => state.setNotes);
   const setConsumableNotes = useMidenStore((state) => state.setConsumableNotes);
   const { lastSyncTime } = useSyncStateStore();
-  const [error, setError] = useState2(null);
+  const [error, setError] = useState3(null);
   const refetch = useCallback4(async () => {
     if (!client || !isReady) return;
     setLoadingNotes(true);
@@ -909,15 +1011,15 @@ function getNoteFilterType(status) {
 }
 
 // src/hooks/useTransactionHistory.ts
-import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo5, useState as useState3 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo5, useState as useState4 } from "react";
 import { TransactionFilter } from "@miden-sdk/miden-sdk";
 function useTransactionHistory(options = {}) {
   const { client, isReady, runExclusive } = useMiden();
   const runExclusiveSafe = runExclusive ?? runExclusiveDirect;
   const { lastSyncTime } = useSyncStateStore();
-  const [records, setRecords] = useState3([]);
-  const [isLoading, setIsLoading] = useState3(false);
-  const [error, setError] = useState3(null);
+  const [records, setRecords] = useState4([]);
+  const [isLoading, setIsLoading] = useState4(false);
+  const [error, setError] = useState4(null);
   const rawIds = useMemo5(() => {
     if (options.id) return [options.id];
     if (options.ids && options.ids.length > 0) return options.ids;
@@ -1020,15 +1122,15 @@ function useSyncState() {
 }
 
 // src/hooks/useCreateWallet.ts
-import { useCallback as useCallback7, useState as useState4 } from "react";
+import { useCallback as useCallback7, useState as useState5 } from "react";
 import { AccountStorageMode } from "@miden-sdk/miden-sdk";
 function useCreateWallet() {
   const { client, isReady, sync, runExclusive } = useMiden();
   const runExclusiveSafe = runExclusive ?? runExclusiveDirect;
   const setAccounts = useMidenStore((state) => state.setAccounts);
-  const [wallet, setWallet] = useState4(null);
-  const [isCreating, setIsCreating] = useState4(false);
-  const [error, setError] = useState4(null);
+  const [wallet, setWallet] = useState5(null);
+  const [isCreating, setIsCreating] = useState5(false);
+  const [error, setError] = useState5(null);
   const createWallet = useCallback7(
     async (options = {}) => {
       if (!client || !isReady) {
@@ -1094,15 +1196,15 @@ function getStorageMode(mode) {
 }
 
 // src/hooks/useCreateFaucet.ts
-import { useCallback as useCallback8, useState as useState5 } from "react";
+import { useCallback as useCallback8, useState as useState6 } from "react";
 import { AccountStorageMode as AccountStorageMode2 } from "@miden-sdk/miden-sdk";
 function useCreateFaucet() {
   const { client, isReady, runExclusive } = useMiden();
   const runExclusiveSafe = runExclusive ?? runExclusiveDirect;
   const setAccounts = useMidenStore((state) => state.setAccounts);
-  const [faucet, setFaucet] = useState5(null);
-  const [isCreating, setIsCreating] = useState5(false);
-  const [error, setError] = useState5(null);
+  const [faucet, setFaucet] = useState6(null);
+  const [isCreating, setIsCreating] = useState6(false);
+  const [error, setError] = useState6(null);
   const createFaucet = useCallback8(
     async (options) => {
       if (!client || !isReady) {
@@ -1169,15 +1271,15 @@ function getStorageMode2(mode) {
 }
 
 // src/hooks/useImportAccount.ts
-import { useCallback as useCallback9, useState as useState6 } from "react";
+import { useCallback as useCallback9, useState as useState7 } from "react";
 import { AccountFile } from "@miden-sdk/miden-sdk";
 function useImportAccount() {
   const { client, isReady, runExclusive } = useMiden();
   const runExclusiveSafe = runExclusive ?? runExclusiveDirect;
   const setAccounts = useMidenStore((state) => state.setAccounts);
-  const [account, setAccount] = useState6(null);
-  const [isImporting, setIsImporting] = useState6(false);
-  const [error, setError] = useState6(null);
+  const [account, setAccount] = useState7(null);
+  const [isImporting, setIsImporting] = useState7(false);
+  const [error, setError] = useState7(null);
   const importAccount = useCallback9(
     async (options) => {
       if (!client || !isReady) {
@@ -1323,15 +1425,15 @@ function bytesEqual(left, right) {
 }
 
 // src/hooks/useSend.ts
-import { useCallback as useCallback10, useState as useState7 } from "react";
+import { useCallback as useCallback10, useState as useState8 } from "react";
 import { NoteType, TransactionFilter as TransactionFilter2 } from "@miden-sdk/miden-sdk";
 function useSend() {
   const { client, isReady, sync, runExclusive, prover } = useMiden();
   const runExclusiveSafe = runExclusive ?? runExclusiveDirect;
-  const [result, setResult] = useState7(null);
-  const [isLoading, setIsLoading] = useState7(false);
-  const [stage, setStage] = useState7("idle");
-  const [error, setError] = useState7(null);
+  const [result, setResult] = useState8(null);
+  const [isLoading, setIsLoading] = useState8(false);
+  const [stage, setStage] = useState8("idle");
+  const [error, setError] = useState8(null);
   const send = useCallback10(
     async (options) => {
       if (!client || !isReady) {
@@ -1460,7 +1562,7 @@ function extractFullNote(txResult) {
 }
 
 // src/hooks/useMultiSend.ts
-import { useCallback as useCallback11, useState as useState8 } from "react";
+import { useCallback as useCallback11, useState as useState9 } from "react";
 import {
   FungibleAsset,
   Note,
@@ -1475,10 +1577,10 @@ import {
 function useMultiSend() {
   const { client, isReady, sync, runExclusive, prover } = useMiden();
   const runExclusiveSafe = runExclusive ?? runExclusiveDirect;
-  const [result, setResult] = useState8(null);
-  const [isLoading, setIsLoading] = useState8(false);
-  const [stage, setStage] = useState8("idle");
-  const [error, setError] = useState8(null);
+  const [result, setResult] = useState9(null);
+  const [isLoading, setIsLoading] = useState9(false);
+  const [stage, setStage] = useState9("idle");
+  const [error, setError] = useState9(null);
   const sendMany = useCallback11(
     async (options) => {
       if (!client || !isReady) {
@@ -1607,7 +1709,7 @@ async function waitForTransactionCommit2(client, runExclusiveSafe, txId, maxWait
 }
 
 // src/hooks/useInternalTransfer.ts
-import { useCallback as useCallback12, useState as useState9 } from "react";
+import { useCallback as useCallback12, useState as useState10 } from "react";
 import {
   FungibleAsset as FungibleAsset2,
   Note as Note2,
@@ -1623,10 +1725,10 @@ import {
 function useInternalTransfer() {
   const { client, isReady, sync, runExclusive, prover } = useMiden();
   const runExclusiveSafe = runExclusive ?? runExclusiveDirect;
-  const [result, setResult] = useState9(null);
-  const [isLoading, setIsLoading] = useState9(false);
-  const [stage, setStage] = useState9("idle");
-  const [error, setError] = useState9(null);
+  const [result, setResult] = useState10(null);
+  const [isLoading, setIsLoading] = useState10(false);
+  const [stage, setStage] = useState10("idle");
+  const [error, setError] = useState10(null);
   const transferOnce = useCallback12(
     async (options) => {
       if (!client || !isReady) {
@@ -1854,15 +1956,15 @@ function useWaitForNotes() {
 }
 
 // src/hooks/useMint.ts
-import { useCallback as useCallback15, useState as useState10 } from "react";
+import { useCallback as useCallback15, useState as useState11 } from "react";
 import { NoteType as NoteType4 } from "@miden-sdk/miden-sdk";
 function useMint() {
   const { client, isReady, sync, runExclusive, prover } = useMiden();
   const runExclusiveSafe = runExclusive ?? runExclusiveDirect;
-  const [result, setResult] = useState10(null);
-  const [isLoading, setIsLoading] = useState10(false);
-  const [stage, setStage] = useState10("idle");
-  const [error, setError] = useState10(null);
+  const [result, setResult] = useState11(null);
+  const [isLoading, setIsLoading] = useState11(false);
+  const [stage, setStage] = useState11("idle");
+  const [error, setError] = useState11(null);
   const mint = useCallback15(
     async (options) => {
       if (!client || !isReady) {
@@ -1934,15 +2036,15 @@ function getNoteType4(type) {
 }
 
 // src/hooks/useConsume.ts
-import { useCallback as useCallback16, useState as useState11 } from "react";
+import { useCallback as useCallback16, useState as useState12 } from "react";
 import { NoteFilter as NoteFilter2, NoteFilterTypes as NoteFilterTypes2, NoteId } from "@miden-sdk/miden-sdk";
 function useConsume() {
   const { client, isReady, sync, runExclusive, prover } = useMiden();
   const runExclusiveSafe = runExclusive ?? runExclusiveDirect;
-  const [result, setResult] = useState11(null);
-  const [isLoading, setIsLoading] = useState11(false);
-  const [stage, setStage] = useState11("idle");
-  const [error, setError] = useState11(null);
+  const [result, setResult] = useState12(null);
+  const [isLoading, setIsLoading] = useState12(false);
+  const [stage, setStage] = useState12("idle");
+  const [error, setError] = useState12(null);
   const consume = useCallback16(
     async (options) => {
       if (!client || !isReady) {
@@ -2010,15 +2112,15 @@ function useConsume() {
 }
 
 // src/hooks/useSwap.ts
-import { useCallback as useCallback17, useState as useState12 } from "react";
+import { useCallback as useCallback17, useState as useState13 } from "react";
 import { NoteType as NoteType5 } from "@miden-sdk/miden-sdk";
 function useSwap() {
   const { client, isReady, sync, runExclusive, prover } = useMiden();
   const runExclusiveSafe = runExclusive ?? runExclusiveDirect;
-  const [result, setResult] = useState12(null);
-  const [isLoading, setIsLoading] = useState12(false);
-  const [stage, setStage] = useState12("idle");
-  const [error, setError] = useState12(null);
+  const [result, setResult] = useState13(null);
+  const [isLoading, setIsLoading] = useState13(false);
+  const [stage, setStage] = useState13("idle");
+  const [error, setError] = useState13(null);
   const swap = useCallback17(
     async (options) => {
       if (!client || !isReady) {
@@ -2097,14 +2199,14 @@ function getNoteType5(type) {
 }
 
 // src/hooks/useTransaction.ts
-import { useCallback as useCallback18, useState as useState13 } from "react";
+import { useCallback as useCallback18, useState as useState14 } from "react";
 function useTransaction() {
   const { client, isReady, sync, runExclusive, prover } = useMiden();
   const runExclusiveSafe = runExclusive ?? runExclusiveDirect;
-  const [result, setResult] = useState13(null);
-  const [isLoading, setIsLoading] = useState13(false);
-  const [stage, setStage] = useState13("idle");
-  const [error, setError] = useState13(null);
+  const [result, setResult] = useState14(null);
+  const [isLoading, setIsLoading] = useState14(false);
+  const [stage, setStage] = useState14("idle");
+  const [error, setError] = useState14(null);
   const execute = useCallback18(
     async (options) => {
       if (!client || !isReady) {
@@ -2170,6 +2272,7 @@ installAccountBech32();
 export {
   DEFAULTS,
   MidenProvider,
+  SignerContext,
   formatAssetAmount,
   formatNoteSummary,
   getNoteSummary,
@@ -2189,6 +2292,7 @@ export {
   useMultiSend,
   useNotes,
   useSend,
+  useSigner,
   useSwap,
   useSyncState,
   useTransaction,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miden-sdk/react",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "description": "React hooks library for Miden Web Client",
   "main": "dist/index.js",
   "module": "dist/index.mjs",