create-miden-app 1.0.6 → 1.0.7

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

@@ -2,19 +2,130 @@ 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", () => ({
-  WalletMultiButton: () => <button>Connect Wallet</button>,
+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.clearAllMocks();
+    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", () => {
@@ -24,7 +135,6 @@ describe("AppContent", () => {
     expect(screen.getByAltText("Vite logo")).toBeInTheDocument();
     expect(screen.getByAltText("React logo")).toBeInTheDocument();
     expect(screen.getByAltText("Miden logo")).toBeInTheDocument();
-    expect(screen.getByText("Connect Wallet")).toBeInTheDocument();
     expect(screen.getByTestId("counter")).toBeInTheDocument();
   });
 
@@ -56,6 +166,7 @@ describe("AppContent", () => {
       runExclusive: vi.fn(),
       prover: null,
       signerAccountId: null,
+      signerConnected: null,
     });
 
     render(<AppContent />);
@@ -65,6 +176,82 @@ describe("AppContent", () => {
     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,
@@ -75,6 +262,7 @@ describe("AppContent", () => {
       runExclusive: vi.fn(),
       prover: null,
       signerAccountId: null,
+      signerConnected: null,
     });
 
     render(<AppContent />);

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

@@ -1,114 +1,44 @@
 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(),
+vi.mock("@/components/ConfiguredCounter", () => ({
+  ConfiguredCounter: ({ counterAddress }: { counterAddress: string }) => (
+    <div data-testid="configured-counter">{counterAddress}</div>
+  ),
 }));
 
-import { useIncrementCounter } from "@/hooks/useIncrementCounter";
-import { Counter } from "../Counter";
+vi.mock("@/config", async () => {
+  const actual = await vi.importActual<typeof import("@/config")>("@/config");
+  return { ...actual };
+});
 
-const defaultHookReturn = {
-  increment: vi.fn(),
-  count: 42,
-  isSubmitting: false,
-  isWaiting: false,
-  error: null,
-  walletConnected: true,
-  explorerUrl: "https://testnet.midenscan.com/account/mtst1test",
-};
+import { Counter } from "../Counter";
+import * as config from "@/config";
 
-describe("Counter", () => {
+describe("Counter gate", () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    vi.mocked(useIncrementCounter).mockReturnValue(defaultHookReturn);
   });
 
-  it("displays the current count on the button", () => {
+  it("renders ConfiguredCounter when COUNTER_ADDRESS is set", () => {
     render(<Counter />);
-    expect(
-      screen.getByRole("button", { name: "count is 42" }),
-    ).toBeInTheDocument();
+    const configured = screen.getByTestId("configured-counter");
+    expect(configured).toBeInTheDocument();
+    expect(configured).toHaveTextContent(config.COUNTER_ADDRESS!);
   });
 
-  it("calls increment on button click", async () => {
-    const mockIncrement = vi.fn();
-    vi.mocked(useIncrementCounter).mockReturnValue({
-      ...defaultHookReturn,
-      increment: mockIncrement,
-    });
-
-    render(<Counter />);
-    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(<Counter />);
-    const button = screen.getByRole("button", { name: "Submitting..." });
-    expect(button).toBeDisabled();
-  });
-
-  it("shows waiting for network state", () => {
-    vi.mocked(useIncrementCounter).mockReturnValue({
-      ...defaultHookReturn,
-      isWaiting: true,
-    });
-
-    render(<Counter />);
-    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(<Counter />);
-    expect(screen.getByRole("button")).toBeDisabled();
-  });
-
-  it("disables button when count is loading (null)", () => {
-    vi.mocked(useIncrementCounter).mockReturnValue({
-      ...defaultHookReturn,
-      count: null,
-    });
-
-    render(<Counter />);
-    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",
-    });
+  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("Transaction failed: insufficient funds"),
+      screen.getByText(/counter address not configured/i),
     ).toBeInTheDocument();
-  });
-
-  it("links to explorer with counter address", () => {
-    render(<Counter />);
-    const link = screen.getByRole("link");
-    expect(link).toHaveAttribute(
-      "href",
-      "https://testnet.midenscan.com/account/mtst1test",
-    );
-    expect(link).toHaveAttribute("target", "_blank");
+    expect(
+      screen.queryByTestId("configured-counter"),
+    ).not.toBeInTheDocument();
   });
 });

package/template/src/config.ts

@@ -1,15 +1,35 @@
-// Network counter account deployed on Miden testnet
-export const COUNTER_ADDRESS = "mtst1aru8adnrqspgcsr3drk2n990lyc070ll";
+// 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::component::miden_counter_account::count_map";
+  "miden_counter_account::counter_contract::count_map";
 
 // Block explorer base URL
 export const EXPLORER_BASE_URL = "https://testnet.midenscan.com";
 
-// Delay (ms) to wait for the network to process a note before re-syncing
-export const NETWORK_SYNC_DELAY_MS = 10_000;
+// 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";
@@ -18,4 +38,4 @@ export const APP_NAME = "Miden Template";
 export const MIDEN_RPC_URL =
   import.meta.env.VITE_MIDEN_RPC_URL ?? "testnet";
 export const MIDEN_PROVER =
-  (import.meta.env.VITE_MIDEN_PROVER as "testnet" | "local") ?? "testnet";
+  (import.meta.env.VITE_MIDEN_PROVER as "devnet" | "testnet" | "local") ?? "testnet";