create-miden-app 1.0.3 → 1.0.6

package/template/create-miden-app/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/create-miden-app/template/src/components/Counter.tsx

@@ -0,0 +1,45 @@
+import { useIncrementCounter } from "@/hooks/useIncrementCounter";
+import { COUNTER_ADDRESS } from "@/config";
+import "./Counter.css";
+
+export function Counter() {
+  const {
+    increment,
+    count,
+    isSubmitting,
+    isWaiting,
+    error,
+    walletConnected,
+    explorerUrl,
+  } = useIncrementCounter(COUNTER_ADDRESS);
+
+  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: {COUNTER_ADDRESS}
+        </a>
+      </p>
+      {error && <p className="error">{error}</p>}
+    </div>
+  );
+}

package/template/create-miden-app/template/src/config.ts

@@ -0,0 +1,21 @@
+// Network counter account deployed on Miden testnet
+export const COUNTER_ADDRESS = "mtst1aru8adnrqspgcsr3drk2n990lyc070ll";
+
+// StorageMap slot name for the counter
+export const COUNTER_SLOT_NAME =
+  "miden::component::miden_counter_account::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;
+
+// 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 "testnet" | "local") ?? "testnet";

package/template/create-miden-app/template/src/hooks/useIncrementCounter.ts

@@ -0,0 +1,136 @@
+import { useMemo, useState, useCallback, useEffect } from "react";
+import {
+  useSyncState,
+  useAccount,
+  useImportAccount,
+} from "@miden-sdk/react";
+import {
+  useWallet,
+  Transaction,
+} from "@demox-labs/miden-wallet-adapter";
+import {
+  TransactionRequestBuilder,
+  Package,
+  NoteScript,
+  Note,
+  NoteAssets,
+  NoteMetadata,
+  NoteRecipient,
+  NoteInputs,
+  NoteTag,
+  NoteType,
+  NoteAttachment,
+  NoteExecutionHint,
+  OutputNote,
+  OutputNoteArray,
+  AccountId,
+  Felt,
+  FeltArray,
+  Word,
+} from "@miden-sdk/miden-sdk";
+import { randomWord } from "@/lib/miden";
+import {
+  COUNTER_SLOT_NAME,
+  EXPLORER_BASE_URL,
+  NETWORK_SYNC_DELAY_MS,
+} from "@/config";
+
+export function useIncrementCounter(counterAddress: string) {
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isWaiting, setIsWaiting] = useState(false);
+
+  const { address: walletAddress, connected, requestTransaction } = useWallet();
+  const { importAccount } = useImportAccount();
+  const { account, refetch } = useAccount(counterAddress);
+  const { sync } = useSyncState();
+
+  // Import the counter account so the local client tracks it.
+  // The catch is intentional — the account may already be imported.
+  useEffect(() => {
+    importAccount({ type: "id", accountId: counterAddress }).catch(() => {});
+  }, [importAccount, counterAddress]);
+
+  // Read count from StorageMap
+  const count = useMemo(() => {
+    if (!account) return null;
+    const countKey = Word.newFromFelts([
+      new Felt(0n),
+      new Felt(0n),
+      new Felt(0n),
+      new Felt(1n),
+    ]);
+    const value = account.storage().getMapItem(COUNTER_SLOT_NAME, countKey);
+    return value ? Number(value.toU64s()[3]) : 0;
+  }, [account]);
+
+  const increment = useCallback(async () => {
+    if (!walletAddress || !requestTransaction) return;
+    setError(null);
+    setIsSubmitting(true);
+    try {
+      // Load pre-compiled increment-note package
+      const buf = await fetch("/packages/increment_note.masp").then((r) =>
+        r.arrayBuffer(),
+      );
+      const pkg = Package.deserialize(new Uint8Array(buf));
+      const noteScript = NoteScript.fromPackage(pkg);
+
+      const counterAccountId = AccountId.fromBech32(counterAddress);
+      const walletAccountId = AccountId.fromBech32(walletAddress);
+
+      // Build note recipient
+      const serialNum = randomWord();
+      const inputs = new NoteInputs(new FeltArray());
+      const recipient = new NoteRecipient(serialNum, noteScript, inputs);
+
+      // Build note metadata targeting the network counter account
+      const tag = NoteTag.withAccountTarget(counterAccountId);
+      const attachment = NoteAttachment.newNetworkAccountTarget(
+        counterAccountId,
+        NoteExecutionHint.always(),
+      );
+      const metadata = new NoteMetadata(
+        walletAccountId,
+        NoteType.Public,
+        tag,
+      ).withAttachment(attachment);
+
+      // Assemble the note and submit via wallet adapter
+      const note = new Note(new NoteAssets(), metadata, recipient);
+      const outputNote = OutputNote.full(note);
+      const txRequest = new TransactionRequestBuilder()
+        .withOwnOutputNotes(new OutputNoteArray([outputNote]))
+        .build();
+
+      const tx = Transaction.createCustomTransaction(
+        walletAddress,
+        counterAddress,
+        txRequest,
+      );
+      await requestTransaction(tx);
+      setIsSubmitting(false);
+
+      // Wait for network to process the note, then re-sync
+      setIsWaiting(true);
+      await new Promise((r) => setTimeout(r, NETWORK_SYNC_DELAY_MS));
+      await sync();
+      await refetch();
+      setIsWaiting(false);
+    } catch (err) {
+      setIsSubmitting(false);
+      setIsWaiting(false);
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }, [walletAddress, requestTransaction, counterAddress, sync, refetch]);
+
+  return {
+    increment,
+    count,
+    isSubmitting,
+    isWaiting,
+    error,
+    walletConnected: connected,
+    explorerUrl: `${EXPLORER_BASE_URL}/account/${counterAddress}`,
+  };
+}

package/template/create-miden-app/template/src/index.css

@@ -0,0 +1,75 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/template/create-miden-app/template/src/lib/miden.ts

@@ -0,0 +1,9 @@
+import { Felt, Word } from "@miden-sdk/miden-sdk";
+
+/** Generate a random 4-felt Word (used as note serial number). */
+export function randomWord(): Word {
+  const felts = Array.from({ length: 4 }, () =>
+    new Felt(BigInt(Math.floor(Math.random() * 2 ** 32))),
+  );
+  return Word.newFromFelts(felts);
+}

package/template/create-miden-app/template/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/template/create-miden-app/template/src/providers.tsx

@@ -0,0 +1,31 @@
+import { useMemo, type ReactNode } from "react";
+import { MidenProvider } from "@miden-sdk/react";
+import {
+  MidenWalletAdapter,
+  WalletProvider,
+  WalletModalProvider,
+} from "@demox-labs/miden-wallet-adapter";
+import "@demox-labs/miden-wallet-adapter/styles.css";
+import { APP_NAME, MIDEN_RPC_URL, MIDEN_PROVER } from "@/config";
+
+export function AppProviders({ children }: { children: ReactNode }) {
+  const wallets = useMemo(
+    () => [new MidenWalletAdapter({ appName: APP_NAME })],
+    [],
+  );
+
+  return (
+    <WalletProvider wallets={wallets} autoConnect>
+      <WalletModalProvider>
+        <MidenProvider
+          config={{ rpcUrl: MIDEN_RPC_URL, prover: MIDEN_PROVER }}
+          loadingComponent={
+            <div className="loading">Loading Miden WASM...</div>
+          }
+        >
+          {children}
+        </MidenProvider>
+      </WalletModalProvider>
+    </WalletProvider>
+  );
+}

package/template/create-miden-app/template/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/create-miden-app/template/tsconfig.app.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Path aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/template/create-miden-app/template/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/template/create-miden-app/template/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/create-miden-app/template/vite.config.ts

@@ -0,0 +1,17 @@
+import path from "node:path";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { midenVitePlugin } from "@miden-sdk/vite-plugin";
+
+export default defineConfig({
+  plugins: [react(), midenVitePlugin()],
+  resolve: {
+    dedupe: ["react", "react-dom", "react/jsx-runtime"],
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+      // The wallet adapter was published under @demox-labs but imports
+      // @demox-labs/miden-sdk internally. Redirect to the current package.
+      "@demox-labs/miden-sdk": "@miden-sdk/miden-sdk",
+    },
+  },
+});