Midnight dApp
+ + {status &&{status}
} +
+
+ );
+}
+
+export default App;
+```
+
+### 📄 File 5: `src/main.tsx`
+```typescript
+import './polyfills'; // ← Add this FIRST
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+ + 🌙 My Midnight dApp +
++ Built with @meshsdk/midnight-setup +
+ + {/* Deploy new contract */} + {!api && ( +
+
+
+
+ )}
+
+ {/* Show error */}
+ {error && (
+
+
+ + Or join existing contract: +
+
+ setContractAddress(e.target.value)}
+ style={{
+ flex: 1,
+ padding: '10px',
+ fontSize: '14px',
+ border: '2px solid #e0e0e0',
+ borderRadius: '6px',
+ outline: 'none'
+ }}
+ onFocus={(e) => e.currentTarget.style.borderColor = '#667eea'}
+ onBlur={(e) => e.currentTarget.style.borderColor = '#e0e0e0'}
+ />
+
+
+
+ ❌ {error}
+
+ )}
+
+ {/* Show contract info */}
+ {api && (
+
+
+ )}
+
+ + ✅ Contract Connected +
+
+
+
+ 📍 Address:
+
+ {api.deployedContractAddress}
+
+
+ 💬 Message:
+
+ {message || 'Loading...'}
+
+
+ Made with ❤️ by MeshJS Team
+
+
+
+ {error &&
+ );
+}
+```
+
+---
+
+### 3. Complete React Component (Copy & Run)
+
+```typescript
+import { useState, useEffect } from 'react';
+import { useMidnightContract } from './hooks/useMidnightContract';
+
+export function MidnightDApp() {
+ const { api, loading, error, deployContract, joinContract } = useMidnightContract();
+ const [message, setMessage] = useStateError: {error}
} + {api &&Contract: {api.deployedContractAddress}
} +
+
+ );
+}
+```
+
+**This component is production-ready. Just import and use it!** 🎉
+
+---
+
+## 🔥 Common Use Cases (Copy These)
+
+### Deploy and Save Address
+
+```typescript
+const api = await MidnightSetupAPI.deployMidnightSetupContract(providers);
+
+// Save to localStorage for later use
+localStorage.setItem('myContractAddress', api.deployedContractAddress);
+
+console.log('✅ Deployed:', api.deployedContractAddress);
+```
+
+### Load Existing Contract
+
+```typescript
+const savedAddress = localStorage.getItem('myContractAddress');
+
+if (savedAddress) {
+ const api = await MidnightSetupAPI.joinMidnightSetupContract(
+ providers,
+ savedAddress
+ );
+ console.log('✅ Reconnected to contract');
+}
+```
+
+### Read Contract State
+
+```typescript
+// Get full contract state
+const contractState = await api.getContractState();
+console.log('Raw data:', contractState.data);
+console.log('Block:', contractState.blockHeight);
+
+// Get parsed ledger state (easier to use)
+const ledgerState = await api.getLedgerState();
+console.log('Message:', ledgerState.ledgerState?.message);
+```
+
+### Listen to State Changes (Real-time)
+
+```typescript
+api.state.subscribe({
+ next: (state) => {
+ console.log('State updated:', state);
+ // Update your UI here
+ },
+ error: (err) => {
+ console.error('State error:', err);
+ }
+});
+```
+
+### With Logging (for Development)
+
+```typescript
+import pino from 'pino';
+
+const logger = pino({ level: 'debug' });
+
+const api = await MidnightSetupAPI.deployMidnightSetupContract(
+ providers,
+ logger
+);
+
+// Now you'll see detailed logs in console
+```
+
+---
+
+## 🎨 Next.js Example (App Router)
+
+Create `app/midnight/page.tsx`:
+
+```typescript
+'use client';
+
+import { useState } from 'react';
+import { MidnightSetupAPI } from '@meshsdk/midnight-setup';
+import { setupProviders } from '@/lib/providers';
+
+export default function MidnightPage() {
+ const [status, setStatus] = useState('');
+
+ const deployContract = async () => {
+ try {
+ setStatus('Deploying...');
+
+ const providers = await setupProviders();
+ const api = await MidnightSetupAPI.deployMidnightSetupContract(providers);
+
+ setStatus(`✅ Deployed at: ${api.deployedContractAddress}`);
+ } catch (error) {
+ setStatus(`❌ Error: ${error.message}`);
+ }
+ };
+
+ return (
+ My Midnight dApp
+ + {/* Deploy new contract */} +
+
+
+ {/* Or join existing */}
+
+
+ {/* Show error */}
+ {error && (
+
+ setContractAddress(e.target.value)}
+ style={{ padding: '8px', width: '300px' }}
+ />
+
+
+
+ Error: {error}
+
+ )}
+
+ {/* Show contract info */}
+ {api && (
+
+
+ )}
+ ✅ Contract Ready
+Address: {api.deployedContractAddress}
+Message: {message}
+
+
diff --git a/packages/midnight-setup/contract-compiled/index.d.ts b/packages/midnight-setup/contract-compiled/index.d.ts
new file mode 100644
index 000000000..a7bd1562b
--- /dev/null
+++ b/packages/midnight-setup/contract-compiled/index.d.ts
@@ -0,0 +1 @@
+export * from "./managed/midnight-setup/contract/index.cjs";
diff --git a/packages/midnight-setup/contract-compiled/index.js b/packages/midnight-setup/contract-compiled/index.js
new file mode 100644
index 000000000..3a40c7940
--- /dev/null
+++ b/packages/midnight-setup/contract-compiled/index.js
@@ -0,0 +1,2 @@
+export * from "./managed/midnight-setup/contract/index.cjs";
+//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/packages/midnight-setup/contract-compiled/index.js.map b/packages/midnight-setup/contract-compiled/index.js.map
new file mode 100644
index 000000000..002bb8f0b
--- /dev/null
+++ b/packages/midnight-setup/contract-compiled/index.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC"}
\ No newline at end of file
diff --git a/packages/midnight-setup/contract-compiled/managed/midnight-setup/compiler/contract-info.json b/packages/midnight-setup/contract-compiled/managed/midnight-setup/compiler/contract-info.json
new file mode 100644
index 000000000..929962bf5
--- /dev/null
+++ b/packages/midnight-setup/contract-compiled/managed/midnight-setup/compiler/contract-info.json
@@ -0,0 +1,8 @@
+{
+ "circuits": [
+ ],
+ "witnesses": [
+ ],
+ "contracts": [
+ ]
+}
diff --git a/packages/midnight-setup/contract-compiled/managed/midnight-setup/contract/index.cjs b/packages/midnight-setup/contract-compiled/managed/midnight-setup/contract/index.cjs
new file mode 100644
index 000000000..615aeba27
--- /dev/null
+++ b/packages/midnight-setup/contract-compiled/managed/midnight-setup/contract/index.cjs
@@ -0,0 +1,180 @@
+'use strict';
+const __compactRuntime = require('@midnight-ntwrk/compact-runtime');
+const expectedRuntimeVersionString = '0.8.1';
+const expectedRuntimeVersion = expectedRuntimeVersionString.split('-')[0].split('.').map(Number);
+const actualRuntimeVersion = __compactRuntime.versionString.split('-')[0].split('.').map(Number);
+if (expectedRuntimeVersion[0] != actualRuntimeVersion[0]
+ || (actualRuntimeVersion[0] == 0 && expectedRuntimeVersion[1] != actualRuntimeVersion[1])
+ || expectedRuntimeVersion[1] > actualRuntimeVersion[1]
+ || (expectedRuntimeVersion[1] == actualRuntimeVersion[1] && expectedRuntimeVersion[2] > actualRuntimeVersion[2]))
+ throw new __compactRuntime.CompactError(`Version mismatch: compiled code expects ${expectedRuntimeVersionString}, runtime is ${__compactRuntime.versionString}`);
+{ const MAX_FIELD = 52435875175126190479447740508185965837690552500527637822603658699938581184512n;
+ if (__compactRuntime.MAX_FIELD !== MAX_FIELD)
+ throw new __compactRuntime.CompactError(`compiler thinks maximum field value is ${MAX_FIELD}; run time thinks it is ${__compactRuntime.MAX_FIELD}`)
+}
+
+const _descriptor_0 = new __compactRuntime.CompactTypeUnsignedInteger(18446744073709551615n, 8);
+
+const _descriptor_1 = new __compactRuntime.CompactTypeBoolean();
+
+const _descriptor_2 = new __compactRuntime.CompactTypeBytes(32);
+
+class _ContractAddress_0 {
+ alignment() {
+ return _descriptor_2.alignment();
+ }
+ fromValue(value_0) {
+ return {
+ bytes: _descriptor_2.fromValue(value_0)
+ }
+ }
+ toValue(value_0) {
+ return _descriptor_2.toValue(value_0.bytes);
+ }
+}
+
+const _descriptor_3 = new _ContractAddress_0();
+
+const _descriptor_4 = new __compactRuntime.CompactTypeUnsignedInteger(255n, 1);
+
+const _descriptor_5 = new __compactRuntime.CompactTypeUnsignedInteger(340282366920938463463374607431768211455n, 16);
+
+class Contract {
+ witnesses;
+ constructor(...args_0) {
+ if (args_0.length !== 1) {
+ throw new __compactRuntime.CompactError(`Contract constructor: expected 1 argument, received ${args_0.length}`);
+ }
+ const witnesses_0 = args_0[0];
+ if (typeof(witnesses_0) !== 'object') {
+ throw new __compactRuntime.CompactError('first (witnesses) argument to Contract constructor is not an object');
+ }
+ this.witnesses = witnesses_0;
+ this.circuits = {
+ };
+ this.impureCircuits = {};
+ }
+ initialState(...args_0) {
+ if (args_0.length !== 1) {
+ throw new __compactRuntime.CompactError(`Contract state constructor: expected 1 argument (as invoked from Typescript), received ${args_0.length}`);
+ }
+ const constructorContext_0 = args_0[0];
+ if (typeof(constructorContext_0) !== 'object') {
+ throw new __compactRuntime.CompactError(`Contract state constructor: expected 'constructorContext' in argument 1 (as invoked from Typescript) to be an object`);
+ }
+ if (!('initialZswapLocalState' in constructorContext_0)) {
+ throw new __compactRuntime.CompactError(`Contract state constructor: expected 'initialZswapLocalState' in argument 1 (as invoked from Typescript)`);
+ }
+ if (typeof(constructorContext_0.initialZswapLocalState) !== 'object') {
+ throw new __compactRuntime.CompactError(`Contract state constructor: expected 'initialZswapLocalState' in argument 1 (as invoked from Typescript) to be an object`);
+ }
+ const state_0 = new __compactRuntime.ContractState();
+ let stateValue_0 = __compactRuntime.StateValue.newArray();
+ stateValue_0 = stateValue_0.arrayPush(__compactRuntime.StateValue.newNull());
+ state_0.data = stateValue_0;
+ const context = {
+ originalState: state_0,
+ currentPrivateState: constructorContext_0.initialPrivateState,
+ currentZswapLocalState: constructorContext_0.initialZswapLocalState,
+ transactionContext: new __compactRuntime.QueryContext(state_0.data, __compactRuntime.dummyContractAddress())
+ };
+ const partialProofData = {
+ input: { value: [], alignment: [] },
+ output: undefined,
+ publicTranscript: [],
+ privateTranscriptOutputs: []
+ };
+ Contract._query(context,
+ partialProofData,
+ [
+ { push: { storage: false,
+ value: __compactRuntime.StateValue.newCell({ value: _descriptor_4.toValue(0n),
+ alignment: _descriptor_4.alignment() }).encode() } },
+ { push: { storage: true,
+ value: __compactRuntime.StateValue.newCell({ value: _descriptor_2.toValue(new Uint8Array(32)),
+ alignment: _descriptor_2.alignment() }).encode() } },
+ { ins: { cached: false, n: 1 } }]);
+ Contract._query(context,
+ partialProofData,
+ [
+ { push: { storage: false,
+ value: __compactRuntime.StateValue.newCell({ value: _descriptor_4.toValue(0n),
+ alignment: _descriptor_4.alignment() }).encode() } },
+ { push: { storage: true,
+ value: __compactRuntime.StateValue.newCell({ value: _descriptor_2.toValue(new Uint8Array([77, 97, 100, 101, 32, 119, 105, 116, 104, 32, 226, 157, 164, 239, 184, 143, 32, 98, 121, 32, 77, 101, 115, 104, 74, 83, 32, 116, 101, 97, 109, 33])),
+ alignment: _descriptor_2.alignment() }).encode() } },
+ { ins: { cached: false, n: 1 } }]);
+ state_0.data = context.transactionContext.state;
+ return {
+ currentContractState: state_0,
+ currentPrivateState: context.currentPrivateState,
+ currentZswapLocalState: context.currentZswapLocalState
+ }
+ }
+ static _query(context, partialProofData, prog) {
+ var res;
+ try {
+ res = context.transactionContext.query(prog, __compactRuntime.CostModel.dummyCostModel());
+ } catch (err) {
+ throw new __compactRuntime.CompactError(err.toString());
+ }
+ context.transactionContext = res.context;
+ var reads = res.events.filter((e) => e.tag === 'read');
+ var i = 0;
+ partialProofData.publicTranscript = partialProofData.publicTranscript.concat(prog.map((op) => {
+ if(typeof(op) === 'object' && 'popeq' in op) {
+ return { popeq: {
+ ...op.popeq,
+ result: reads[i++].content,
+ } };
+ } else {
+ return op;
+ }
+ }));
+ if(res.events.length == 1 && res.events[0].tag === 'read') {
+ return res.events[0].content;
+ } else {
+ return res.events;
+ }
+ }
+}
+function ledger(state) {
+ const context = {
+ originalState: state,
+ transactionContext: new __compactRuntime.QueryContext(state, __compactRuntime.dummyContractAddress())
+ };
+ const partialProofData = {
+ input: { value: [], alignment: [] },
+ output: undefined,
+ publicTranscript: [],
+ privateTranscriptOutputs: []
+ };
+ return {
+ get message() {
+ return _descriptor_2.fromValue(Contract._query(context,
+ partialProofData,
+ [
+ { dup: { n: 0 } },
+ { idx: { cached: false,
+ pushPath: false,
+ path: [
+ { tag: 'value',
+ value: { value: _descriptor_4.toValue(0n),
+ alignment: _descriptor_4.alignment() } }] } },
+ { popeq: { cached: false,
+ result: undefined } }]).value);
+ }
+ };
+}
+const _emptyContext = {
+ originalState: new __compactRuntime.ContractState(),
+ transactionContext: new __compactRuntime.QueryContext(new __compactRuntime.ContractState().data, __compactRuntime.dummyContractAddress())
+};
+const _dummyContract = new Contract({ });
+const pureCircuits = {};
+const contractReferenceLocations = { tag: 'publicLedgerArray', indices: { } };
+exports.Contract = Contract;
+exports.ledger = ledger;
+exports.pureCircuits = pureCircuits;
+exports.contractReferenceLocations = contractReferenceLocations;
+//# sourceMappingURL=index.cjs.map
diff --git a/packages/midnight-setup/contract-compiled/managed/midnight-setup/contract/index.cjs.map b/packages/midnight-setup/contract-compiled/managed/midnight-setup/contract/index.cjs.map
new file mode 100644
index 000000000..ddeda7d98
--- /dev/null
+++ b/packages/midnight-setup/contract-compiled/managed/midnight-setup/contract/index.cjs.map
@@ -0,0 +1,8 @@
+{
+ "version": 3,
+ "file": "index.cjs",
+ "sourceRoot": "../../../../",
+ "sources": ["src/midnight-setup.compact"],
+ "names": [],
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA;;;;;;;;;;;;GAEC;EAFD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAFA;;;;;;;;;uDAAiC;IAG/B;;;;;;;;;uDAAO;;;;;;;GACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAJD;qCAAA;;;;;;;;;;;wFAAiC;KAAA;;;;;;;;;;;;;;"
+}
diff --git a/packages/midnight-setup/contract-compiled/managed/midnight-setup/contract/index.d.cts b/packages/midnight-setup/contract-compiled/managed/midnight-setup/contract/index.d.cts
new file mode 100644
index 000000000..14f6a203c
--- /dev/null
+++ b/packages/midnight-setup/contract-compiled/managed/midnight-setup/contract/index.d.cts
@@ -0,0 +1,32 @@
+import type * as __compactRuntime from '@midnight-ntwrk/compact-runtime';
+
+export type WitnessesMade with ❤️ by MeshJS Team
+
+
+ );
+}
+
+export default App;
\ No newline at end of file
diff --git a/packages/midnight-setup/ui/src/components/ui/badge.tsx b/packages/midnight-setup/ui/src/components/ui/badge.tsx
new file mode 100644
index 000000000..02054139a
--- /dev/null
+++ b/packages/midnight-setup/ui/src/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+ "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+ {
+ variants: {
+ variant: {
+ default:
+ "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+ secondary:
+ "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+ destructive:
+ "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+ outline:
+ "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function Badge({
+ className,
+ variant,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"span"> &
+ VariantProps
+
+
+
+
+
+ Connect to your Midnight wallet to get started
+
+
+
+ {walletContext?.walletState.hasConnected ? (
+
+
+
+ {/* Contract Operations Section */}
+ {walletContext?.walletState.hasConnected && (
+
+
+ Contract Operations
+
+ Deploy a new contract or join an existing one
+
+
+
+ {/* Deploy Contract */}
+
+
+ )}
+
+ {/* Contract State Reading Section */}
+ {(contractContext.hasDeployed || contractContext.hasJoined) && (
+
+
+
+
+
+ Read and display the current state of the deployed contract
+
+
+
+
+
+ )}
+
+ {/* Footer Banner - Powered by MeshJS Team */}
+
+
+
+
+ {/* Wallet Connection Section */}
+ + Midnight Setup +
++ Connect your wallet, deploy or join contracts, view contract and ledger states, check your API, access your contract address and functions — all in one place. Modify as you like and just build! +
+
+
+ ) : (
+
+
+
+ Connected: {walletContext.walletState.address?.slice(0, 6)}...
+ {walletContext.walletState.address?.slice(-4)}
+
+
+
+
+
+ )}
+
+ {walletContext?.walletState.error && (
+
+
+
+
+
+ )}
+ {walletContext.walletState.error}
+ +
+
+
+ {/* Join Contract */}
+ Deploy New Contract
+
+
+ {contractContext.hasDeployed && (
+
+
+
+ )}
+
+
+
+ {/* Error Display */}
+ {contractContext.error && (
+ Join Existing Contract
+
+
+ {contractContext.hasJoined && (
+
+
+ setContractAddress(e.target.value)}
+ disabled={contractContext.isJoining}
+ />
+
+
+
+
+ )}
+
+
+ )}
+
+ {/* Contract Status */}
+ {(contractContext.hasDeployed || contractContext.hasJoined) && (
+ {contractContext.error}
+ +
+
+ )}
+ Contract Status
+
+
+ Status: {contractContext.hasDeployed ? "Deployed" : "Joined"}
+Address: {contractContext.deployedContractAddress}
+API Available: {contractContext.midnightSetupApi ? "Yes" : "No"}
+
+
+
+
+
+ {/* Contract State Display */}
+ {contractState && (
+
+
+ )}
+
+ {/* Ledger State Display */}
+ {ledgerState && (
+ Contract State
+
+
+ Address: {contractState.address}
+ {contractState.blockHeight && ( +Block Height: {contractState.blockHeight}
+ )} + {contractState.blockHash && ( +Block Hash: {contractState.blockHash}
+ )} + {contractState.error && ( +Error: {contractState.error}
+ )} + {contractState.message && ( +Message: {contractState.message}
+ )} + {contractState.data !== null && contractState.data !== undefined ? ( +
+
+ ) : null}
+ Raw Data:
+
+ {safeStringify(contractState.data)}
+
+
+
+ )}
+ Ledger State
+
+
+ Address: {ledgerState.address}
+ {ledgerState.blockHeight && ( +Block Height: {ledgerState.blockHeight}
+ )} + {ledgerState.blockHash && ( +Block Hash: {ledgerState.blockHash}
+ )} + {ledgerState.error && ( +Error: {ledgerState.error}
+ )} + {ledgerState.parseError && ( +Parse Error: {ledgerState.parseError}
+ )} + {ledgerState.ledgerState && ( +
+ {ledgerState.ledgerState.message && (
+
+ )}
+ {ledgerState.rawData !== null && ledgerState.rawData !== undefined ? (
+ Message: {ledgerState.ledgerState.message}
+ )} +
+
+ Parsed Data:
+
+ {JSON.stringify(ledgerState.ledgerState, null, 2)}
+
+
+
+ ) : null}
+ Raw Data (could not parse):
+
+ {safeStringify(ledgerState.rawData)}
+
+
+
+
+
+
+ 
+ + Built with ❤️ on Midnight Network +
+