create-miden-app 1.0.4 → 1.0.6

package/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 "@miden-sdk/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/src/index.css

@@ -54,6 +54,13 @@ 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;

package/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/src/main.tsx

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

package/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 "@miden-sdk/miden-wallet-adapter";
+import "@miden-sdk/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/src/vite-env.d.ts

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

package/template/tsconfig.app.json

@@ -5,7 +5,7 @@
     "useDefineForClassFields": true,
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "types": ["vite/client"],
+    "types": ["vite/client", "vitest/globals", "@testing-library/jest-dom/vitest"],
     "skipLibCheck": true,
 
     /* Bundler mode */
@@ -16,13 +16,17 @@
     "noEmit": true,
     "jsx": "react-jsx",
 
+    /* Path aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["src"]
 }

package/template/tsconfig.node.json

@@ -18,9 +18,7 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["vite.config.ts"]
 }

package/template/vite.config.ts

@@ -1,26 +1,14 @@
+import path from "node:path";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import wasm from "vite-plugin-wasm";
-import topLevelAwait from "vite-plugin-top-level-await";
-import path from "path";
+import { midenVitePlugin } from "@miden-sdk/vite-plugin";
 
-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), wasm(), topLevelAwait()],
+  plugins: [react(), midenVitePlugin()],
   resolve: {
+    dedupe: ["react", "react-dom", "react/jsx-runtime"],
     alias: {
-      // Help resolve dexie when imported from linked packages
-      dexie: path.resolve(__dirname, "node_modules/dexie"),
-    },
-  },
-  optimizeDeps: {
-    exclude: ["@miden-sdk/miden-sdk"],
-    include: ["dexie"],
-  },
-  server: {
-    headers: {
-      "Cross-Origin-Opener-Policy": "same-origin",
-      "Cross-Origin-Embedder-Policy": "require-corp",
+      "@": path.resolve(__dirname, "./src"),
     },
   },
 });

package/template/vitest.config.ts

@@ -0,0 +1,26 @@
+import path from "node:path";
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: ["./vitest.setup.ts"],
+    include: ["src/**/*.{test,spec}.{ts,tsx}"],
+    passWithNoTests: true,
+    server: {
+      deps: {
+        // The wallet-adapter-reactui sub-package has incorrect exports in package.json.
+        // Tests mock the wallet adapter at the module level, so externalizing is safe.
+        external: [/@miden-sdk\/miden-wallet-adapter/],
+      },
+    },
+  },
+});

package/template/vitest.setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";