npm - create-miden-app - Versions diffs - 1.0.4 → 1.0.6 - Mend

create-miden-app 1.0.4 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/template/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>miden-frontend</title>
+    <title>Miden Template</title>
   </head>
   <body>
     <div id="root"></div>

package/template/package.json CHANGED Viewed

@@ -7,28 +7,37 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest --run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest --run --coverage"
   },
   "dependencies": {
-    "@miden-sdk/miden-sdk": "^0.13.0",
-    "dexie": "^4.2.1",
+    "@miden-sdk/miden-wallet-adapter": "0.13.5",
+    "@miden-sdk/miden-sdk": "0.13.2",
+    "@miden-sdk/react": "0.13.3",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",
+    "@miden-sdk/vite-plugin": "0.13.4",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.6.0",
     "@types/react": "^19.1.16",
     "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.4",
+    "@vitejs/plugin-react": "^4.7.0",
     "eslint": "^9.36.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.22",
     "globals": "^16.4.0",
-    "typescript": "~5.9.3",
+    "jsdom": "^28.1.0",
+    "typescript": "~5.7.0",
     "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.7",
-    "vite-plugin-top-level-await": "^1.6.0",
-    "vite-plugin-wasm": "^3.5.0"
+    "vite": "^6.0.0",
+    "vitest": "^4.0.18"
   }
 }

package/template/public/packages/counter_account.masp ADDED Viewed

Binary file

package/template/public/packages/increment_note.masp ADDED Viewed

Binary file

package/template/src/App.tsx CHANGED Viewed

@@ -1,63 +1,10 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import midenLogo from "./assets/miden.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
-import { demo } from "./miden/lib/demo";
-function App() {
-  const [count, setCount] = useState(0);
-  const [isRunning, setIsRunning] = useState(false);
-  const [result, setResult] = useState<string>("");
-  const handleDemoClick = async () => {
-    setIsRunning(true);
-    setResult("");
-    try {
-      await demo();
-      setResult("Demo executed successfully! Check console for output.");
-    } catch (error) {
-      setResult(
-        `Error: ${error instanceof Error ? error.message : String(error)}`
-      );
-    } finally {
-      setIsRunning(false);
-    }
-  };
+import { AppProviders } from "@/providers";
+import { AppContent } from "@/components/AppContent";
+export default function App() {
   return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-        <a href="https://docs.miden.xyz" target="_blank">
-          <img src={midenLogo} className="logo miden" alt="Miden logo" />
-        </a>
-      </div>
-      <h1>Vite + React + Miden</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <div className="card">
-        <button onClick={handleDemoClick} disabled={isRunning}>
-          {isRunning ? "Running Demo..." : "Run Miden Demo"}
-        </button>
-        {result && <p style={{ marginTop: "1rem" }}>{result}</p>}
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite, React, and Miden logos to learn more
-      </p>
-    </>
+    <AppProviders>
+      <AppContent />
+    </AppProviders>
   );
 }
-export default App;

package/template/src/__tests__/fixtures/accounts.ts ADDED Viewed

@@ -0,0 +1,57 @@
+/**
+ * Realistic account fixtures for Miden frontend tests.
+ * Uses bech32 IDs and BigInt amounts matching real SDK shapes.
+ */
+export const WALLET_ID_1 = "mtst1qy35qfqdvpjx2e5zf9hkp4vr";
+export const WALLET_ID_2 = "mtst1qa7k9qjf8dp4x2e5zf9hkp5vr";
+export const FAUCET_ID = "mtst1qx9y8zjf2dp4x2e5zf9hkp3vr";
+export const COUNTER_ID = "mtst1aru8adnrqspgcsr3drk2n990lyc070ll";
+export const MOCK_WALLET_HEADER = {
+  id: WALLET_ID_1,
+  nonce: 1n,
+  storageCommitment: "0x0000000000000000000000000000000000000000000000000000000000000001",
+};
+export const MOCK_WALLET_HEADER_2 = {
+  id: WALLET_ID_2,
+  nonce: 0n,
+  storageCommitment: "0x0000000000000000000000000000000000000000000000000000000000000000",
+};
+export const MOCK_FAUCET_HEADER = {
+  id: FAUCET_ID,
+  nonce: 5n,
+  storageCommitment: "0x0000000000000000000000000000000000000000000000000000000000000005",
+};
+export const MOCK_ASSET_BALANCE = {
+  assetId: FAUCET_ID,
+  amount: 1000000000n, // 10.0 tokens with 8 decimals
+  symbol: "TEST",
+  decimals: 8,
+};
+export const MOCK_ASSET_BALANCE_EMPTY = {
+  assetId: FAUCET_ID,
+  amount: 0n,
+  symbol: "TEST",
+  decimals: 8,
+};
+export const MOCK_ACCOUNT = {
+  id: WALLET_ID_1,
+  nonce: 1n,
+  bech32id: () => WALLET_ID_1,
+};
+export const MOCK_ASSET_METADATA = {
+  assetId: FAUCET_ID,
+  symbol: "TEST",
+  decimals: 8,
+};
+export const MOCK_TRANSACTION_RESULT = {
+  transactionId: "0xabc123def456789012345678901234567890123456789012345678901234abcd",
+};

package/template/src/__tests__/fixtures/index.ts ADDED Viewed

@@ -0,0 +1,21 @@
+export {
+  WALLET_ID_1,
+  WALLET_ID_2,
+  FAUCET_ID,
+  COUNTER_ID,
+  MOCK_WALLET_HEADER,
+  MOCK_WALLET_HEADER_2,
+  MOCK_FAUCET_HEADER,
+  MOCK_ASSET_BALANCE,
+  MOCK_ASSET_BALANCE_EMPTY,
+  MOCK_ACCOUNT,
+  MOCK_ASSET_METADATA,
+  MOCK_TRANSACTION_RESULT,
+} from "./accounts";
+export {
+  MOCK_NOTE_ASSET,
+  MOCK_NOTE_SUMMARY,
+  MOCK_INPUT_NOTE_RECORD,
+  MOCK_CONSUMABLE_NOTE_RECORD,
+} from "./notes";

package/template/src/__tests__/fixtures/notes.ts ADDED Viewed

@@ -0,0 +1,33 @@
+/**
+ * Realistic note fixtures for Miden frontend tests.
+ */
+import { FAUCET_ID, WALLET_ID_1, WALLET_ID_2 } from "./accounts";
+export const MOCK_NOTE_ASSET = {
+  assetId: FAUCET_ID,
+  amount: 500000000n, // 5.0 tokens with 8 decimals
+  symbol: "TEST",
+  decimals: 8,
+};
+export const MOCK_NOTE_SUMMARY = {
+  id: "0xnote1234567890abcdef1234567890abcdef1234567890abcdef1234567890ab",
+  assets: [MOCK_NOTE_ASSET],
+  sender: WALLET_ID_2,
+};
+export const MOCK_INPUT_NOTE_RECORD = {
+  id: () => "0xnote1234567890abcdef1234567890abcdef1234567890abcdef1234567890ab",
+  assets: () => [{ faucetId: () => FAUCET_ID, amount: () => 500000000n }],
+  metadata: () => ({
+    sender: () => ({ toBech32: () => WALLET_ID_2 }),
+    noteType: () => 1,
+  }),
+  status: () => "committed",
+};
+export const MOCK_CONSUMABLE_NOTE_RECORD = {
+  ...MOCK_INPUT_NOTE_RECORD,
+  accountId: WALLET_ID_1,
+};

package/template/src/__tests__/mocks/miden-sdk-react.ts ADDED Viewed

@@ -0,0 +1,244 @@
+/**
+ * Mock module for @miden-sdk/react.
+ *
+ * Usage in test files:
+ *
+ *   vi.mock('@miden-sdk/react', () => import('@/__tests__/mocks/miden-sdk-react'));
+ *
+ * Override specific hooks in individual tests:
+ *
+ *   import { useAccounts } from '@miden-sdk/react';
+ *   vi.mocked(useAccounts).mockReturnValue({ wallets: [], ... });
+ */
+import { vi } from "vitest";
+import {
+  MOCK_WALLET_HEADER,
+  MOCK_WALLET_HEADER_2,
+  MOCK_FAUCET_HEADER,
+  MOCK_ACCOUNT,
+  MOCK_ASSET_BALANCE,
+  MOCK_ASSET_METADATA,
+  MOCK_INPUT_NOTE_RECORD,
+  MOCK_CONSUMABLE_NOTE_RECORD,
+  MOCK_NOTE_SUMMARY,
+  MOCK_TRANSACTION_RESULT,
+  FAUCET_ID,
+} from "../fixtures";
+// ---------------------------------------------------------------------------
+// Query hooks
+// ---------------------------------------------------------------------------
+export const useAccounts = vi.fn(() => ({
+  accounts: [MOCK_WALLET_HEADER, MOCK_WALLET_HEADER_2, MOCK_FAUCET_HEADER],
+  wallets: [MOCK_WALLET_HEADER, MOCK_WALLET_HEADER_2],
+  faucets: [MOCK_FAUCET_HEADER],
+  isLoading: false,
+  error: null,
+  refetch: vi.fn(),
+}));
+export const useAccount = vi.fn(() => ({
+  account: MOCK_ACCOUNT,
+  assets: [MOCK_ASSET_BALANCE],
+  isLoading: false,
+  error: null,
+  refetch: vi.fn(),
+  getBalance: vi.fn((assetId: string) =>
+    assetId === FAUCET_ID ? MOCK_ASSET_BALANCE.amount : 0n,
+  ),
+}));
+export const useNotes = vi.fn(() => ({
+  notes: [MOCK_INPUT_NOTE_RECORD],
+  consumableNotes: [MOCK_CONSUMABLE_NOTE_RECORD],
+  noteSummaries: [MOCK_NOTE_SUMMARY],
+  consumableNoteSummaries: [MOCK_NOTE_SUMMARY],
+  isLoading: false,
+  error: null,
+  refetch: vi.fn(),
+}));
+export const useSyncState = vi.fn(() => ({
+  syncHeight: 12345,
+  isSyncing: false,
+  lastSyncTime: Date.now(),
+  error: null,
+  sync: vi.fn(),
+}));
+export const useAssetMetadata = vi.fn(() => ({
+  assetMetadata: new Map([[FAUCET_ID, MOCK_ASSET_METADATA]]),
+}));
+export const useTransactionHistory = vi.fn(() => ({
+  records: [],
+  record: null,
+  status: null,
+  isLoading: false,
+  error: null,
+  refetch: vi.fn(),
+}));
+export const useNoteStream = vi.fn(() => ({
+  notes: [],
+  latest: null,
+  markHandled: vi.fn(),
+  markAllHandled: vi.fn(),
+  snapshot: vi.fn(() => ({ ids: new Set<string>(), timestamp: Date.now() })),
+  isLoading: false,
+  error: null,
+}));
+// ---------------------------------------------------------------------------
+// Mutation hooks
+// ---------------------------------------------------------------------------
+function createMutationMock(mutateKey: string) {
+  return vi.fn(() => ({
+    [mutateKey]: vi.fn(async () => MOCK_TRANSACTION_RESULT),
+    result: null,
+    isLoading: false,
+    stage: "idle" as const,
+    error: null,
+    reset: vi.fn(),
+  }));
+}
+export const useCreateWallet = vi.fn(() => ({
+  createWallet: vi.fn(async () => MOCK_ACCOUNT),
+  wallet: null,
+  isCreating: false,
+  error: null,
+  reset: vi.fn(),
+}));
+export const useCreateFaucet = vi.fn(() => ({
+  createFaucet: vi.fn(async () => MOCK_ACCOUNT),
+  faucet: null,
+  isCreating: false,
+  error: null,
+  reset: vi.fn(),
+}));
+export const useSend = createMutationMock("send");
+export const useMultiSend = createMutationMock("sendMany");
+export const useMint = createMutationMock("mint");
+export const useConsume = createMutationMock("consume");
+export const useSwap = createMutationMock("swap");
+export const useTransaction = createMutationMock("execute");
+export const useImportAccount = vi.fn(() => ({
+  importAccount: vi.fn(async () => MOCK_ACCOUNT),
+  account: null,
+  isImporting: false,
+  error: null,
+  reset: vi.fn(),
+}));
+export const useInternalTransfer = vi.fn(() => ({
+  transfer: vi.fn(async () => ({
+    createTransactionId: "0xtx1",
+    consumeTransactionId: "0xtx2",
+    noteId: "0xnote1",
+  })),
+  transferChain: vi.fn(async () => []),
+  result: null,
+  isLoading: false,
+  stage: "idle" as const,
+  error: null,
+  reset: vi.fn(),
+}));
+export const useWaitForCommit = vi.fn(() => ({
+  waitForCommit: vi.fn(async () => undefined),
+}));
+export const useWaitForNotes = vi.fn(() => ({
+  waitForConsumableNotes: vi.fn(async () => []),
+}));
+export const useSessionAccount = vi.fn(() => ({
+  initialize: vi.fn(async () => undefined),
+  sessionAccountId: null,
+  isReady: false,
+  step: "idle" as const,
+  error: null,
+  reset: vi.fn(),
+}));
+// ---------------------------------------------------------------------------
+// Provider hooks
+// ---------------------------------------------------------------------------
+export const useMiden = vi.fn(() => ({
+  client: null,
+  isReady: true,
+  isInitializing: false,
+  error: null,
+  sync: vi.fn(),
+  runExclusive: vi.fn(async <T>(fn: () => Promise<T>) => fn()),
+  prover: null,
+  signerAccountId: null,
+}));
+export const useMidenClient = vi.fn(() => ({}));
+export const useSigner = vi.fn(() => null);
+// ---------------------------------------------------------------------------
+// Components
+// ---------------------------------------------------------------------------
+export function MidenProvider({ children }: { children: React.ReactNode }) {
+  return children;
+}
+// ---------------------------------------------------------------------------
+// Utility functions
+// ---------------------------------------------------------------------------
+export const formatAssetAmount = vi.fn(
+  (amount: bigint, decimals = 8) =>
+    (Number(amount) / 10 ** decimals).toFixed(decimals > 4 ? 4 : decimals),
+);
+export const parseAssetAmount = vi.fn(
+  (input: string, decimals = 8) => BigInt(Math.round(parseFloat(input) * 10 ** decimals)),
+);
+export const toBech32AccountId = vi.fn((id: string) => id);
+export const normalizeAccountId = vi.fn((id: string) => id);
+export const accountIdsEqual = vi.fn((a: string, b: string) => a === b);
+export const getNoteSummary = vi.fn(() => MOCK_NOTE_SUMMARY);
+export const formatNoteSummary = vi.fn(() => "5.0 TEST");
+export const readNoteAttachment = vi.fn(() => null);
+export const createNoteAttachment = vi.fn(() => ({}));
+export const clearMidenStorage = vi.fn(async () => undefined);
+export const migrateStorage = vi.fn(async () => true);
+export const createMidenStorage = vi.fn(() => ({
+  get: vi.fn(() => null),
+  set: vi.fn(),
+  remove: vi.fn(),
+  clear: vi.fn(),
+}));
+export const wrapWasmError = vi.fn((e: unknown) =>
+  e instanceof Error ? e : new Error(String(e)),
+);
+export const waitForWalletDetection = vi.fn(async () => undefined);
+export const SignerContext = {
+  Provider: vi.fn(({ children }: { children: React.ReactNode }) => children),
+};
+export const bytesToBigInt = vi.fn(() => 0n);
+export const bigIntToBytes = vi.fn(() => new Uint8Array());
+export const concatBytes = vi.fn((...arrays: Uint8Array[]) => {
+  const len = arrays.reduce((acc, a) => acc + a.length, 0);
+  return new Uint8Array(len);
+});

package/template/src/__tests__/patterns/README.md ADDED Viewed

@@ -0,0 +1,44 @@
+# Test Patterns
+Copy-adaptable test patterns for Miden frontend components.
+## Available Patterns
+### `provider-setup.test.tsx`
+Starting point for any component that uses Miden hooks. Shows mock setup, `vi.mocked()` overrides, and testing ready/loading/error states.
+### `query-hook.test.tsx`
+Pattern for components displaying data from query hooks (`useAccounts`, `useNotes`, etc.). Shows loading → data → error → empty state testing.
+### `mutation-hook.test.tsx`
+Pattern for components performing transactions (`useSend`, `useMint`, etc.). Shows idle → stage progression → success → error testing, plus argument verification.
+## How to Use
+1. Copy the closest pattern to your component's `__tests__/` directory
+2. Rename the test file to match your component
+3. Replace the example component with your actual component import
+4. Adapt assertions to your component's specific behavior
+5. Keep the `vi.mock(...)` and `beforeEach(vi.clearAllMocks)` boilerplate
+## Mock Setup
+All patterns use the shared mock factory:
+```tsx
+vi.mock("@miden-sdk/react", () => import("@/__tests__/mocks/miden-sdk-react"));
+```
+Override specific hooks per-test:
+```tsx
+vi.mocked(useAccounts).mockReturnValue({ wallets: [], ... });
+```
+## Fixtures
+Realistic test data is in `src/__tests__/fixtures/`. Import what you need:
+```tsx
+import { WALLET_ID_1, MOCK_ASSET_BALANCE } from "@/__tests__/fixtures";
+```

package/template/src/__tests__/patterns/mutation-hook.test.tsx ADDED Viewed

@@ -0,0 +1,146 @@
+/**
+ * TEST PATTERN: Mutation Hook Component
+ *
+ * Shows how to test a component that performs Miden transactions via mutation hooks.
+ * Covers: idle state, transaction stages (executing/proving/submitting), success, and error.
+ *
+ * Key concepts:
+ * - Mock mutation functions to resolve or reject
+ * - Test transaction stage display during multi-step operations
+ * - Test button disable during loading to prevent double-submit
+ * - Test error display and reset
+ */
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+vi.mock("@miden-sdk/react", () => import("@/__tests__/mocks/miden-sdk-react"));
+import { useSend } from "@miden-sdk/react";
+import { WALLET_ID_1, WALLET_ID_2, FAUCET_ID } from "@/__tests__/fixtures";
+// Example component: a send token form — common Miden UI pattern
+function SendTokenForm() {
+  const { send, isLoading, stage, error, reset } = useSend();
+  const handleSend = async () => {
+    try {
+      await send({
+        from: WALLET_ID_1,
+        to: WALLET_ID_2,
+        assetId: FAUCET_ID,
+        amount: 100000000n, // 1.0 token
+      });
+    } catch {
+      // Error is captured in the hook's error state
+    }
+  };
+  return (
+    <div>
+      <button onClick={handleSend} disabled={isLoading}>
+        {isLoading ? `${stage}...` : "Send 1.0 TEST"}
+      </button>
+      {stage === "complete" && <p>Transaction submitted!</p>}
+      {error && (
+        <div>
+          <p role="alert">Send failed: {error.message}</p>
+          <button onClick={reset}>Dismiss</button>
+        </div>
+      )}
+    </div>
+  );
+}
+describe("Mutation Hook Pattern", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+  // Default idle state — send button should be enabled
+  it("renders idle state with enabled send button", () => {
+    render(<SendTokenForm />);
+    const button = screen.getByRole("button", { name: "Send 1.0 TEST" });
+    expect(button).toBeEnabled();
+  });
+  // Simulate transaction in progress — button disabled, stage shown
+  it("shows transaction stage and disables button during send", () => {
+    vi.mocked(useSend).mockReturnValue({
+      send: vi.fn(),
+      result: null,
+      isLoading: true,
+      stage: "proving" as const,
+      error: null,
+      reset: vi.fn(),
+    });
+    render(<SendTokenForm />);
+    const button = screen.getByRole("button", { name: "proving..." });
+    expect(button).toBeDisabled();
+  });
+  // Simulate completed transaction — success message shown
+  it("shows success message after transaction completes", () => {
+    vi.mocked(useSend).mockReturnValue({
+      send: vi.fn(),
+      result: { transactionId: "0xabc123" },
+      isLoading: false,
+      stage: "complete" as const,
+      error: null,
+      reset: vi.fn(),
+    });
+    render(<SendTokenForm />);
+    expect(screen.getByText("Transaction submitted!")).toBeInTheDocument();
+  });
+  // Simulate error — error message shown with dismiss button
+  it("shows error with dismiss button on failure", async () => {
+    const mockReset = vi.fn();
+    vi.mocked(useSend).mockReturnValue({
+      send: vi.fn().mockRejectedValue(new Error("Insufficient balance")),
+      result: null,
+      isLoading: false,
+      stage: "idle" as const,
+      error: new Error("Insufficient balance"),
+      reset: mockReset,
+    });
+    render(<SendTokenForm />);
+    // Error should be visible
+    expect(screen.getByRole("alert")).toHaveTextContent("Insufficient balance");
+    // Dismiss should call reset
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "Dismiss" }));
+    expect(mockReset).toHaveBeenCalledOnce();
+  });
+  // Test the actual send call — verify correct arguments
+  it("calls send with correct arguments on click", async () => {
+    const mockSend = vi.fn(async () => ({ transactionId: "0xtx" }));
+    vi.mocked(useSend).mockReturnValue({
+      send: mockSend,
+      result: null,
+      isLoading: false,
+      stage: "idle" as const,
+      error: null,
+      reset: vi.fn(),
+    });
+    render(<SendTokenForm />);
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "Send 1.0 TEST" }));
+    expect(mockSend).toHaveBeenCalledWith({
+      from: WALLET_ID_1,
+      to: WALLET_ID_2,
+      assetId: FAUCET_ID,
+      amount: 100000000n,
+    });
+  });
+});