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 &&
+ const api = await MidnightSetupAPI.deployContract(
+ providers,
+ contractInstance,
);
-}
-```
-
----
-### 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}
} -
-
- );
+ console.log("Contract deployed at:", api.deployedContractAddress);
+ return api;
}
```
-**This component is production-ready. Just import and use it!** 🎉
-
----
-
-## 🔥 Common Use Cases (Copy These)
-
-### Deploy and Save Address
+### 3. Join Existing Contract
```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');
+async function joinContract(contractAddress: string) {
+ const providers = await setupProviders();
+ const contractInstance = new MyContract({});
-if (savedAddress) {
- const api = await MidnightSetupAPI.joinMidnightSetupContract(
+ const api = await MidnightSetupAPI.joinContract(
providers,
- savedAddress
+ contractInstance,
+ contractAddress,
);
- console.log('✅ Reconnected to contract');
+
+ return api;
}
```
-### Read Contract State
+### 4. Read Contract State
```typescript
-// Get full contract state
+// Get contract state
const contractState = await api.getContractState();
-console.log('Raw data:', contractState.data);
-console.log('Block:', contractState.blockHeight);
+console.log("Contract data:", contractState.data);
-// Get parsed ledger state (easier to use)
+// Get ledger state
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}
-
-
- );
-}
-
-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
deleted file mode 100644
index 02054139a..000000000
--- a/packages/midnight-setup/ui/src/components/ui/badge.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-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 -
-