create-miden-app 1.0.4 → 1.0.7

package/template/src/components/AppContent.tsx

@@ -0,0 +1,80 @@
+import { useMiden, useSyncState } from "@miden-sdk/react";
+import { useMidenFiWallet } from "@miden-sdk/miden-wallet-adapter-react";
+import { WalletReadyState } from "@miden-sdk/miden-wallet-adapter-base";
+import reactLogo from "@/assets/react.svg";
+import midenLogo from "@/assets/miden.svg";
+import viteLogo from "/vite.svg";
+import { Counter } from "@/components/Counter";
+import "./AppContent.css";
+
+function WalletButton() {
+  // Use the MidenFi-specific hook (not the generic `useSigner()`) so we can
+  // gate on `wallet.readyState`. `useSigner().connect()` calls through to the
+  // same provider, but at the moment the user clicks the button the adapter
+  // may not yet have detected `window.midenWallet` — detection is polled, see
+  // `scopePollingDetectionStrategy` in @miden-sdk/miden-wallet-adapter-base.
+  // When readyState is NotDetected, MidenFiSignerProvider falls back to
+  // `window.open(adapter.url, "_blank")` — the Chrome Web Store URL — which
+  // on some platforms redirects to the Play Store. Disabling the button
+  // until the extension is detected prevents the fallback from firing.
+  const { wallet, connected, connecting, connect, disconnect } =
+    useMidenFiWallet();
+  const readyState = wallet?.readyState;
+  const walletReady =
+    readyState === WalletReadyState.Installed ||
+    readyState === WalletReadyState.Loadable;
+
+  if (!walletReady) {
+    return <button disabled>Install MidenFi Wallet</button>;
+  }
+  if (connected) {
+    return <button onClick={disconnect}>Disconnect Wallet</button>;
+  }
+  if (connecting) {
+    return <button disabled>Connecting...</button>;
+  }
+  return <button onClick={connect}>Connect Wallet</button>;
+}
+
+export function AppContent() {
+  const { isReady, isInitializing, error } = useMiden();
+  const { syncHeight } = useSyncState();
+
+  if (error) {
+    return (
+      <div className="loading">
+        <p>Failed to initialize Miden client</p>
+        <p className="error">{error.message}</p>
+      </div>
+    );
+  }
+
+  if (isInitializing || !isReady) {
+    return <div className="loading">Initializing Miden client...</div>;
+  }
+
+  return (
+    <>
+      <div>
+        <a href="https://vite.dev" target="_blank" rel="noreferrer">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank" rel="noreferrer">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+        <a href="https://docs.miden.xyz" target="_blank" rel="noreferrer">
+          <img src={midenLogo} className="logo miden" alt="Miden logo" />
+        </a>
+      </div>
+      <h1>Vite + React + Miden</h1>
+      <div className="wallet-section">
+        <WalletButton />
+      </div>
+      <Counter />
+      <p className="read-the-docs">
+        Testnet block: {syncHeight ?? "syncing..."} | Click on the Vite, React,
+        and Miden logos to learn more
+      </p>
+    </>
+  );
+}

package/template/src/components/ConfiguredCounter.tsx

@@ -0,0 +1,48 @@
+import { useIncrementCounter } from "@/hooks/useIncrementCounter";
+import "./Counter.css";
+
+export function ConfiguredCounter({
+  counterAddress,
+}: {
+  counterAddress: string;
+}) {
+  const {
+    increment,
+    count,
+    isSubmitting,
+    isWaiting,
+    error,
+    walletConnected,
+    explorerUrl,
+  } = useIncrementCounter(counterAddress);
+
+  const busy = isSubmitting || isWaiting;
+  const buttonLabel = isSubmitting
+    ? "Submitting..."
+    : isWaiting
+      ? "Waiting for network..."
+      : `count is ${count ?? "..."}`;
+
+  return (
+    <div className="card">
+      <button
+        className="counter-button"
+        onClick={increment}
+        disabled={busy || count === null || !walletConnected}
+      >
+        {buttonLabel}
+      </button>
+      <p>
+        <a
+          href={explorerUrl}
+          target="_blank"
+          rel="noreferrer"
+          className="account-id"
+        >
+          Counter: {counterAddress}
+        </a>
+      </p>
+      {error && <p className="error">{error}</p>}
+    </div>
+  );
+}

package/template/src/components/Counter.css

@@ -0,0 +1,27 @@
+.card {
+  padding: 2em;
+}
+
+.counter-button {
+  font-size: 1.2em;
+  padding: 0.8em 1.6em;
+}
+
+.account-id {
+  font-size: 0.8em;
+  color: #888;
+  font-family: monospace;
+  margin-top: 0.5rem;
+  text-decoration: none;
+}
+
+.account-id:hover {
+  text-decoration: underline;
+}
+
+.error {
+  color: #ff4444;
+  font-size: 0.9em;
+  margin-top: 0.5rem;
+  word-break: break-word;
+}

package/template/src/components/Counter.tsx

@@ -0,0 +1,16 @@
+import { COUNTER_ADDRESS } from "@/config";
+import { ConfiguredCounter } from "./ConfiguredCounter";
+
+export function Counter() {
+  if (!COUNTER_ADDRESS) {
+    return (
+      <div className="card">
+        <p>
+          Counter address not configured — see README for deployment
+          instructions.
+        </p>
+      </div>
+    );
+  }
+  return <ConfiguredCounter counterAddress={COUNTER_ADDRESS} />;
+}

package/template/src/components/__tests__/AppContent.test.tsx

@@ -0,0 +1,274 @@
+import { render, screen } from "@testing-library/react";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+
+vi.mock("@miden-sdk/react", () => import("@/__tests__/mocks/miden-sdk-react"));
+vi.mock("@miden-sdk/miden-wallet-adapter-react", () => ({
+  useMidenFiWallet: vi.fn(() => ({
+    autoConnect: false,
+    wallets: [],
+    wallet: null,
+    address: null,
+    publicKey: null,
+    connected: false,
+    connecting: false,
+    disconnecting: false,
+    select: vi.fn(),
+    connect: vi.fn(async () => undefined),
+    disconnect: vi.fn(async () => undefined),
+    requestTransaction: vi.fn(async () => "0xtx"),
+    requestAssets: undefined,
+    requestPrivateNotes: undefined,
+    signBytes: undefined,
+    importPrivateNote: undefined,
+    requestConsumableNotes: undefined,
+    waitForTransaction: undefined,
+    requestSend: undefined,
+    requestConsume: undefined,
+    createAccount: undefined,
+  })),
+}));
+vi.mock("@miden-sdk/miden-wallet-adapter-base", () => ({
+  WalletReadyState: {
+    Installed: "Installed",
+    NotDetected: "NotDetected",
+    Loadable: "Loadable",
+    Unsupported: "Unsupported",
+  },
+}));
+vi.mock("@/components/Counter", () => ({
+  Counter: () => <div data-testid="counter">Counter Mock</div>,
+}));
+
+import { useMiden, useSyncState } from "@miden-sdk/react";
+import { useMidenFiWallet } from "@miden-sdk/miden-wallet-adapter-react";
+import userEvent from "@testing-library/user-event";
+import { AppContent } from "../AppContent";
+
+type WalletState = ReturnType<typeof useMidenFiWallet>;
+type WalletInner = NonNullable<WalletState["wallet"]>;
+
+function walletState(
+  overrides: Partial<{
+    readyState: "Installed" | "NotDetected" | "Loadable" | "Unsupported";
+    connected: boolean;
+    connecting: boolean;
+    address: string | null;
+    connect: () => Promise<void>;
+    disconnect: () => Promise<void>;
+    requestTransaction: WalletState["requestTransaction"];
+  }> = {},
+): WalletState {
+  const {
+    readyState = "Installed",
+    connected = false,
+    connecting = false,
+    address = connected ? "mtst1arwk88k8smzcq5p30upr6eerw5npmnyz" : null,
+    connect = vi.fn(async () => undefined),
+    disconnect = vi.fn(async () => undefined),
+    requestTransaction = vi.fn(async () => "0xtx"),
+  } = overrides;
+  // Build a shape that satisfies WalletContextState; the inner `Wallet`
+  // (`{ adapter, readyState }`) shape requires an Adapter, which we stub
+  // with a structural cast since the component only reads `readyState`.
+  const innerWallet = {
+    adapter: {} as WalletInner["adapter"],
+    readyState,
+  } as WalletInner;
+  return {
+    autoConnect: false,
+    wallets: [innerWallet],
+    wallet: innerWallet,
+    address,
+    publicKey: null,
+    connected,
+    connecting,
+    disconnecting: false,
+    select: vi.fn(),
+    connect,
+    disconnect,
+    requestTransaction,
+    requestAssets: undefined,
+    requestPrivateNotes: undefined,
+    signBytes: undefined,
+    importPrivateNote: undefined,
+    requestConsumableNotes: undefined,
+    waitForTransaction: undefined,
+    requestSend: undefined,
+    requestConsume: undefined,
+    createAccount: undefined,
+  };
+}
+
+const midenReady = {
+  client: null,
+  isReady: true,
+  isInitializing: false,
+  error: null,
+  sync: vi.fn(),
+  runExclusive: vi.fn(),
+  prover: null,
+  signerAccountId: null,
+  signerConnected: null,
+};
+
+describe("AppContent", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    // Restore default ready state after any test that overrides useMiden
+    vi.mocked(useMiden).mockReturnValue(midenReady);
+    vi.mocked(useSyncState).mockReturnValue({
+      syncHeight: 12345,
+      isSyncing: false,
+      lastSyncTime: Date.now(),
+      error: null,
+      sync: vi.fn(),
+    });
+    vi.mocked(useMidenFiWallet).mockReturnValue(
+      walletState({ readyState: "NotDetected" }),
+    );
+  });
+
+  it("renders main content when Miden is ready", () => {
+    render(<AppContent />);
+
+    expect(screen.getByText("Vite + React + Miden")).toBeInTheDocument();
+    expect(screen.getByAltText("Vite logo")).toBeInTheDocument();
+    expect(screen.getByAltText("React logo")).toBeInTheDocument();
+    expect(screen.getByAltText("Miden logo")).toBeInTheDocument();
+    expect(screen.getByTestId("counter")).toBeInTheDocument();
+  });
+
+  it("shows sync height from testnet", () => {
+    render(<AppContent />);
+    expect(screen.getByText(/Testnet block: 12345/)).toBeInTheDocument();
+  });
+
+  it("shows syncing indicator when syncHeight is null", () => {
+    vi.mocked(useSyncState).mockReturnValue({
+      syncHeight: null as unknown as number,
+      isSyncing: true,
+      lastSyncTime: null,
+      error: null,
+      sync: vi.fn(),
+    });
+
+    render(<AppContent />);
+    expect(screen.getByText(/syncing\.\.\./)).toBeInTheDocument();
+  });
+
+  it("shows loading message during initialization", () => {
+    vi.mocked(useMiden).mockReturnValue({
+      client: null,
+      isReady: false,
+      isInitializing: true,
+      error: null,
+      sync: vi.fn(),
+      runExclusive: vi.fn(),
+      prover: null,
+      signerAccountId: null,
+      signerConnected: null,
+    });
+
+    render(<AppContent />);
+    expect(
+      screen.getByText("Initializing Miden client..."),
+    ).toBeInTheDocument();
+    expect(screen.queryByText("Vite + React + Miden")).not.toBeInTheDocument();
+  });
+
+  it("shows disabled install-wallet button when extension is not detected", () => {
+    render(<AppContent />);
+    const button = screen.getByRole("button", { name: "Install MidenFi Wallet" });
+    expect(button).toBeDisabled();
+  });
+
+  it("shows connect button when wallet is installed and disconnected", () => {
+    vi.mocked(useMidenFiWallet).mockReturnValue(
+      walletState({ readyState: "Installed", connected: false }),
+    );
+
+    render(<AppContent />);
+    expect(
+      screen.getByRole("button", { name: "Connect Wallet" }),
+    ).toBeEnabled();
+  });
+
+  it("shows disconnect button when wallet is connected", () => {
+    vi.mocked(useMidenFiWallet).mockReturnValue(
+      walletState({ readyState: "Installed", connected: true }),
+    );
+
+    render(<AppContent />);
+    expect(
+      screen.getByRole("button", { name: "Disconnect Wallet" }),
+    ).toBeInTheDocument();
+  });
+
+  it("shows connecting state while the wallet request is in flight", () => {
+    vi.mocked(useMidenFiWallet).mockReturnValue(
+      walletState({
+        readyState: "Installed",
+        connected: false,
+        connecting: true,
+      }),
+    );
+
+    render(<AppContent />);
+    const button = screen.getByRole("button", { name: /Connecting/ });
+    expect(button).toBeDisabled();
+  });
+
+  it("calls connect on wallet button click", async () => {
+    const mockConnect = vi.fn(async () => undefined);
+    vi.mocked(useMidenFiWallet).mockReturnValue(
+      walletState({
+        readyState: "Installed",
+        connected: false,
+        connect: mockConnect,
+      }),
+    );
+
+    render(<AppContent />);
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "Connect Wallet" }));
+    expect(mockConnect).toHaveBeenCalledOnce();
+  });
+
+  it("calls disconnect on wallet button click", async () => {
+    const mockDisconnect = vi.fn(async () => undefined);
+    vi.mocked(useMidenFiWallet).mockReturnValue(
+      walletState({
+        readyState: "Installed",
+        connected: true,
+        disconnect: mockDisconnect,
+      }),
+    );
+
+    render(<AppContent />);
+    const user = userEvent.setup();
+    await user.click(
+      screen.getByRole("button", { name: "Disconnect Wallet" }),
+    );
+    expect(mockDisconnect).toHaveBeenCalledOnce();
+  });
+
+  it("shows error message on initialization failure", () => {
+    vi.mocked(useMiden).mockReturnValue({
+      client: null,
+      isReady: false,
+      isInitializing: false,
+      error: new Error("WASM failed to load"),
+      sync: vi.fn(),
+      runExclusive: vi.fn(),
+      prover: null,
+      signerAccountId: null,
+      signerConnected: null,
+    });
+
+    render(<AppContent />);
+    expect(
+      screen.getByText("Failed to initialize Miden client"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("WASM failed to load")).toBeInTheDocument();
+  });
+});

package/template/src/components/__tests__/ConfiguredCounter.test.tsx

@@ -0,0 +1,116 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+
+vi.mock("@/hooks/useIncrementCounter", () => ({
+  useIncrementCounter: vi.fn(),
+}));
+
+import { useIncrementCounter } from "@/hooks/useIncrementCounter";
+import { ConfiguredCounter } from "../ConfiguredCounter";
+
+const FIXTURE_ADDRESS = "0xdeadbeef00000001";
+
+const defaultHookReturn = {
+  increment: vi.fn(),
+  count: 42,
+  isSubmitting: false,
+  isWaiting: false,
+  error: null,
+  walletConnected: true,
+  explorerUrl: `https://testnet.midenscan.com/account/${FIXTURE_ADDRESS}`,
+};
+
+describe("ConfiguredCounter", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(useIncrementCounter).mockReturnValue(defaultHookReturn);
+  });
+
+  it("displays the current count on the button", () => {
+    render(<ConfiguredCounter counterAddress={FIXTURE_ADDRESS} />);
+    expect(
+      screen.getByRole("button", { name: "count is 42" }),
+    ).toBeInTheDocument();
+  });
+
+  it("calls increment on button click", async () => {
+    const mockIncrement = vi.fn();
+    vi.mocked(useIncrementCounter).mockReturnValue({
+      ...defaultHookReturn,
+      increment: mockIncrement,
+    });
+
+    render(<ConfiguredCounter counterAddress={FIXTURE_ADDRESS} />);
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "count is 42" }));
+    expect(mockIncrement).toHaveBeenCalledOnce();
+  });
+
+  it("shows submitting state", () => {
+    vi.mocked(useIncrementCounter).mockReturnValue({
+      ...defaultHookReturn,
+      isSubmitting: true,
+    });
+
+    render(<ConfiguredCounter counterAddress={FIXTURE_ADDRESS} />);
+    const button = screen.getByRole("button", { name: "Submitting..." });
+    expect(button).toBeDisabled();
+  });
+
+  it("shows waiting for network state", () => {
+    vi.mocked(useIncrementCounter).mockReturnValue({
+      ...defaultHookReturn,
+      isWaiting: true,
+    });
+
+    render(<ConfiguredCounter counterAddress={FIXTURE_ADDRESS} />);
+    const button = screen.getByRole("button", {
+      name: "Waiting for network...",
+    });
+    expect(button).toBeDisabled();
+  });
+
+  it("disables button when wallet not connected", () => {
+    vi.mocked(useIncrementCounter).mockReturnValue({
+      ...defaultHookReturn,
+      walletConnected: false,
+    });
+
+    render(<ConfiguredCounter counterAddress={FIXTURE_ADDRESS} />);
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("disables button when count is loading (null)", () => {
+    vi.mocked(useIncrementCounter).mockReturnValue({
+      ...defaultHookReturn,
+      count: null,
+    });
+
+    render(<ConfiguredCounter counterAddress={FIXTURE_ADDRESS} />);
+    const button = screen.getByRole("button", { name: "count is ..." });
+    expect(button).toBeDisabled();
+  });
+
+  it("displays error message", () => {
+    vi.mocked(useIncrementCounter).mockReturnValue({
+      ...defaultHookReturn,
+      error: "Transaction failed: insufficient funds",
+    });
+
+    render(<ConfiguredCounter counterAddress={FIXTURE_ADDRESS} />);
+    expect(
+      screen.getByText("Transaction failed: insufficient funds"),
+    ).toBeInTheDocument();
+  });
+
+  it("links to explorer with counter address", () => {
+    render(<ConfiguredCounter counterAddress={FIXTURE_ADDRESS} />);
+    const link = screen.getByRole("link");
+    expect(link).toHaveAttribute(
+      "href",
+      `https://testnet.midenscan.com/account/${FIXTURE_ADDRESS}`,
+    );
+    expect(link).toHaveAttribute("target", "_blank");
+  });
+});

package/template/src/components/__tests__/Counter.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from "@testing-library/react";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+
+vi.mock("@/components/ConfiguredCounter", () => ({
+  ConfiguredCounter: ({ counterAddress }: { counterAddress: string }) => (
+    <div data-testid="configured-counter">{counterAddress}</div>
+  ),
+}));
+
+vi.mock("@/config", async () => {
+  const actual = await vi.importActual<typeof import("@/config")>("@/config");
+  return { ...actual };
+});
+
+import { Counter } from "../Counter";
+import * as config from "@/config";
+
+describe("Counter gate", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders ConfiguredCounter when COUNTER_ADDRESS is set", () => {
+    render(<Counter />);
+    const configured = screen.getByTestId("configured-counter");
+    expect(configured).toBeInTheDocument();
+    expect(configured).toHaveTextContent(config.COUNTER_ADDRESS!);
+  });
+
+  it("shows not-configured message when COUNTER_ADDRESS is null", () => {
+    // The env-wired resolver in `config.ts` returns `null` when
+    // `VITE_MIDEN_COUNTER_ADDRESS=""` (explicit empty string). Simulate that
+    // by overriding the module's exported value directly.
+    vi.spyOn(config, "COUNTER_ADDRESS", "get").mockReturnValue(null);
+
+    render(<Counter />);
+    expect(
+      screen.getByText(/counter address not configured/i),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByTestId("configured-counter"),
+    ).not.toBeInTheDocument();
+  });
+});

package/template/src/config.ts

@@ -0,0 +1,41 @@
+// Network counter account deployed on Miden testnet.
+//
+// Resolution rules for `COUNTER_ADDRESS`:
+//   - `VITE_MIDEN_COUNTER_ADDRESS` unset (or omitted) → use the live default
+//     deployment (the testnet counter the template ships with).
+//   - `VITE_MIDEN_COUNTER_ADDRESS=""` (explicit empty string) → unconfigured,
+//     `<Counter>` renders the "address not configured" card.
+//   - Any other string → that string is used verbatim (e.g. your own deploy).
+const DEFAULT_COUNTER_ADDRESS = "mtst1aqmx7qv6h3y92sqsmunh8uht4ujmfy4j";
+const configuredCounterAddress: string | undefined =
+  import.meta.env.VITE_MIDEN_COUNTER_ADDRESS;
+
+export const COUNTER_ADDRESS: string | null =
+  configuredCounterAddress === ""
+    ? null
+    : (configuredCounterAddress ?? DEFAULT_COUNTER_ADDRESS);
+
+// StorageMap slot name for the counter
+export const COUNTER_SLOT_NAME =
+  "miden_counter_account::counter_contract::count_map";
+
+// Block explorer base URL
+export const EXPLORER_BASE_URL = "https://testnet.midenscan.com";
+
+// Poll interval (ms) while waiting for the network operator to consume an
+// increment note and update the counter's on-chain state.
+export const NETWORK_POLL_INTERVAL_MS = 2_500;
+
+// Hard cap (ms) on how long to poll for the post-increment state change before
+// giving up and showing whatever value the counter currently has. Covers
+// ~3 block cycles at testnet's ~3s block time with margin.
+export const NETWORK_POLL_TIMEOUT_MS = 30_000;
+
+// Application display name (used by wallet adapter)
+export const APP_NAME = "Miden Template";
+
+// Miden SDK configuration — override via environment variables
+export const MIDEN_RPC_URL =
+  import.meta.env.VITE_MIDEN_RPC_URL ?? "testnet";
+export const MIDEN_PROVER =
+  (import.meta.env.VITE_MIDEN_PROVER as "devnet" | "testnet" | "local") ?? "testnet";