0xMiden · 0xnullifier · Dec 8, 2025 · Dec 16, 2025
diff --git a/examples/vanilla-ts/.env.example b/examples/vanilla-ts/.env.example
@@ -0,0 +1 @@
+VITE_PARA_API_KEY=
diff --git a/examples/vanilla-ts/.gitignore b/examples/vanilla-ts/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env
diff --git a/examples/vanilla-ts/README.md b/examples/vanilla-ts/README.md
@@ -0,0 +1,154 @@
+# Vanilla Miden x Para Integration
+
+This example demostrates how to use the `miden-para` with vanilla js/ts
+
+## How It Works
+
+### 1. Authentication Flow
+
+Users authenticate using Para's social login (Google OAuth):
+
+```typescript
+// User clicks "Connect Wallet"
+await paraAuth.verifyOAuth('GOOGLE', (url) => {
+  window.open(url, '_blank');
+});
+
+await paraAuth.waitForLogin();
+```
+
+Para creates an embedded wallet for the user, secured by their social account.
+
+### 2. Wallet Retrieval
+
+Once authenticated, the application retrieves the Para wallet:
+
+```typescript
+const wallets = await para.getWallets();
+const walletsArray = Object.values(wallets);
+```
+
+Each wallet contains:
+
+- `id`: Wallet identifier
+- `address`: Ethereum-style address
+- Other wallet metadata
+
+### 3. Miden Client Initialization
+
+The `miden-para` library bridges Para wallets to Miden:
+
+```typescript
+import { createParaMidenClient } from 'miden-para';
+
+const res = await createParaMidenClient(para, wallets, {
+  type: AccountType.RegularAccountImmutableCode,
+  storageMode: 'public',
+  accountSeed: 'plain-example',
+});
+```
+
+### 4. Account Information
+
+The Miden para sdk gives the accountId for the para account
+
+```typescript
+// Miden Account ID (hex format)
+const accountId = res.accountId;
+
+// Miden Address (bech32 format for display)
+const address = Address.fromAccountId(
+  AccountId.fromHex(res.accountId),
+  'BasicWallet'
+).toBech32(NetworkId.Testnet);
+```
+
+Once initialized, the client can perform normal WebClient operations
+
+#### Sync State
+
+```typescript
+await client.syncState();
+```
+
+#### Check Balances
+
+```typescript
+const account = await client.getAccount(AccountId.fromHex(accountId));
+const assets = account.vault().fungibleAssets();
+```
+
+#### Mint Tokens (Example)
+
+```typescript
+// Create a faucet
+const faucet = await newClient.newFaucet(
+  AccountStorageMode.public(),
+  false,
+  'MID',
+  8,
+  BigInt(1_000_000_0000_00),
+  0
+);
+
+// Mint tokens to account
+const mintTxRequest = newClient.newMintTransactionRequest(
+  recipientAccount.id(),
+  faucet.id(),
+  NoteType.Public,
+  BigInt(1000) * BigInt(1e8)
+);
+
+const txHash = await newClient.submitNewTransaction(faucet.id(), mintTxRequest);
+```
+
+#### Consume Notes
+
+```typescript
+// Get consumable notes
+const notes = await client.getConsumableNotes(account.id());
+const noteIds = notes.map((n) => n.inputNoteRecord().id().toString());
+
+// Consume them
+const consumeRequest = client.newConsumeTransactionRequest(noteIds);
+const txHash = await client.submitNewTransaction(account.id(), consumeRequest);
+```
+
+## Project Structure
+
+```
+src/
+├── lib/
+│   ├── client.ts          # Para SDK initialization
+│   ├── paraAccount.ts     # Para account state management
+│   └── paraAuth.ts        # Para authentication flow
+└── main.ts                # Miden integration & UI logic
+```
+
+## Setup
+
+1. Set Para API key:
+
+```bash
+# Create .env file
+VITE_PARA_API_KEY=your_api_key
+VITE_PARA_ENVIRONMENT=beta
+```
+
+2. Install dependencies:
+
+```bash
+yarn install
+```
+
+3. Run development server:
+
+```bash
+yarn dev
+```
+
+4. Build for production:
+
+```bash
+yarn build
+```
diff --git a/examples/vanilla-ts/index.html b/examples/vanilla-ts/index.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <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>Para SDK Demo</title>
+  </head>
+  <body>
+    <div id="app">
+      <header class="bg-white border-b border-gray-200">
+        <div class="container mx-auto px-4">
+          <div class="flex items-center justify-between h-16">
+            <div class="flex items-center space-x-2">
+              <span class="font-semibold text-lg">Miden X Para Example</span>
+            </div>
+
+            <nav>
+              <button
+                id="connect-btn"
+                class="px-4 py-2 bg-gray-900 text-white rounded-none hover:bg-gray-950 transition-colors text-sm font-medium"
+                data-testid="header-connect-button"
+              >
+                Connect Wallet
+              </button>
+              <button
+                id="disconnect-btn"
+                class="px-4 py-2 bg-gray-900 text-white rounded-none hover:bg-gray-950 transition-colors text-sm font-medium hidden"
+                data-testid="header-disconnect-button"
+              >
+                Disconnect
+              </button>
+            </nav>
+          </div>
+        </div>
+      </header>
+
+      <main class="container mx-auto px-4 py-8">
+        <div class="max-w-2xl mx-auto">
+          <div class="bg-white border border-gray-200 p-6 mb-4">
+            <h2 class="text-xl font-semibold mb-4">Account Status</h2>
+            <div class="space-y-2">
+              <p>
+                <strong>Connected:</strong>
+                <span id="status-connected">false</span>
+              </p>
+              <p>
+                <strong>Para Address:</strong>
+                <span id="status-address">-</span>
+              </p>
+            </div>
+          </div>
+
+          <!-- Miden Account Section -->
+          <div id="miden-section" class="hidden">
+            <div class="bg-white border border-gray-200 p-6 mb-4">
+              <h2 class="text-xl font-semibold mb-4">Miden Account</h2>
+              <div class="space-y-2">
+                <p>
+                  <strong>Account ID:</strong>
+                  <span id="miden-account-id">-</span>
+                </p>
+                <p>
+                  <strong>Miden Address:</strong>
+                  <span id="miden-address">-</span>
+                </p>
+              </div>
+            </div>
+
+            <div class="bg-white border border-gray-200 p-6 mb-4">
+              <h2 class="text-xl font-semibold mb-4">Balances</h2>
+              <div id="balances-list" class="space-y-2">
+                <p class="text-gray-500">Loading balances...</p>
+              </div>
+              <button id="refresh-balance" class="submit-btn mt-4">
+                Refresh Balance
+              </button>
+            </div>
+
+            <div class="bg-white border border-gray-200 p-6 mb-4">
+              <h2 class="text-xl font-semibold mb-4">Test Mint & Consume</h2>
+              <button id="mint-consume-btn" class="submit-btn">
+                Run Mint & Consume Example
+              </button>
+              <div id="mint-consume-status" class="mt-4 space-y-2 hidden">
+                <p><strong>Faucet ID:</strong> <span id="faucet-id">-</span></p>
+                <p>
+                  <strong>Mint Tx Hash:</strong>
+                  <span id="mint-tx-hash">-</span>
+                </p>
+                <p>
+                  <strong>Consume Tx Hash:</strong>
+                  <span id="consume-tx-hash">-</span>
+                </p>
+                <p>
+                  <strong>Status:</strong>
+                  <span id="mint-consume-status-text">-</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <!-- Auth Modal -->
+      <div id="auth-modal" class="modal-overlay hidden">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2 class="modal-title">Connect Wallet</h2>
+            <button id="modal-close" class="close-btn">&times;</button>
+          </div>
+
+          <!-- OAuth Wait Step -->
+          <div id="step-oauth" class="modal-body">
+            <div class="oauth-state">
+              <p id="oauth-message">Opening Google authentication window...</p>
+              <p class="oauth-url" id="oauth-url"></p>
+              <div class="loading-state">
+                <div class="spinner"></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Error Display -->
+          <div id="modal-error" class="error-message hidden"></div>
+
+          <!-- Loading Overlay -->
+          <div id="modal-loading" class="loading-overlay hidden">
+            <div class="spinner"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vanilla-ts/package.json b/examples/vanilla-ts/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "vanilla-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4",
+    "vite-plugin-node-polyfills": "^0.24.0"
+  },
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@demox-labs/miden-sdk": "^0.12.5",
+    "@getpara/web-sdk": "^2.0.0-alpha.73",
+    "miden-para": "^0.10.9"
+  }
+}
diff --git a/examples/vanilla-ts/public/vite.svg b/examples/vanilla-ts/public/vite.svg
diff --git a/examples/vanilla-ts/src/lib/client.ts b/examples/vanilla-ts/src/lib/client.ts
@@ -0,0 +1,12 @@
+import { ParaWeb, Environment } from "@getpara/web-sdk";
+
+const API_KEY = import.meta.env.VITE_PARA_API_KEY;
+const ENVIRONMENT = import.meta.env.VITE_PARA_ENVIRONMENT || Environment.BETA;
+
+if (!API_KEY) {
+  throw new Error(
+    "API key is not defined. Please set VITE_PARA_API_KEY in your environment variables."
+  );
+}
+
+export const para = new ParaWeb(ENVIRONMENT, API_KEY);