Skip to content

Commit 2766459

Browse files
luislucena16luislucena16
authored
Merge branch 'main' into chore/add-midnight-contracts-wizard-docs
2 parents 06b28a7 + 47bee0a commit 2766459

File tree

7 files changed

+343
-0
lines changed

7 files changed

+343
-0
lines changed

‎apps/docs/src/pages/en/packages/midnight_setup/_meta.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export default {
2+
"index": {
3+
title: "Introduction",
4+
route: "/",
5+
},
6+
"quick_start": {
7+
title: "Quick Start",
8+
route: "/quick_start",
9+
},
10+
"api_methods": {
11+
title: "Core API Methods",
12+
route: "/api_methods",
13+
},
14+
"wallet_integration": {
15+
title: "Wallet Integration",
16+
route: "/wallet_integration",
17+
},
18+
"examples": {
19+
title: "Integration Examples",
20+
route: "/examples",
21+
},
22+
"project_structure": {
23+
title: "Project Structure",
24+
route: "/project_structure",
25+
},
26+
};

‎apps/docs/src/pages/en/packages/midnight_setup/api_methods.mdx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
title: Core API Methods
3+
description: MidnightSetupAPI methods and provider setup
4+
sidebarTitle: Core API Methods
5+
---
6+
7+
# Core API Methods
8+
9+
## MidnightSetupAPI
10+
11+
| Method | Description | Usage |
12+
|--------|-------------|-------|
13+
| `deployContract(providers, contractInstance)` | Deploy a new contract | Creates new contract instance |
14+
| `joinContract(providers, contractInstance, address)` | Join existing contract | Connect to deployed contract |
15+
| `getContractState()` | Read contract state | Get current contract data |
16+
| `getLedgerState()` | Read ledger state | Get blockchain data |
17+
18+
## Provider Setup
19+
20+
```typescript
21+
import { setupProviders } from './lib/providers';
22+
23+
const providers = await setupProviders();
24+
// Returns: MidnightSetupContractProviders
25+
```

‎apps/docs/src/pages/en/packages/midnight_setup/examples.mdx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
title: Integration Examples
3+
description: React hooks and integration examples
4+
sidebarTitle: Integration Examples
5+
---
6+
7+
# Integration Examples
8+
9+
## React Hook
10+
11+
```typescript
12+
import { useMidnightContract } from './hooks/useMidnightContract';
13+
14+
function App() {
15+
const { api, deployContract, joinContract } = useMidnightContract();
16+
17+
const handleDeploy = async () => {
18+
const newApi = await deployContract();
19+
console.log('Deployed:', newApi.deployedContractAddress);
20+
};
21+
22+
return <button onClick={handleDeploy}>Deploy Contract</button>;
23+
}
24+
```
25+
26+
## Complete Example
27+
28+
```typescript
29+
import { MidnightSetupAPI, useMidnightWallet } from '@meshsdk/midnight-setup';
30+
31+
function MyDApp() {
32+
const { connectWallet, isConnected, walletState } = useMidnightWallet();
33+
34+
const handleDeployContract = async () => {
35+
if (!isConnected) {
36+
await connectWallet();
37+
return;
38+
}
39+
40+
// Setup providers
41+
const providers = await setupProviders();
42+
43+
// Deploy contract
44+
const api = await MidnightSetupAPI.deployContract(
45+
providers,
46+
contractInstance
47+
);
48+
49+
console.log('Contract deployed at:', api.deployedContractAddress);
50+
};
51+
52+
return (
53+
<div>
54+
<h1>My Midnight dApp</h1>
55+
{!isConnected ? (
56+
<button onClick={connectWallet}>Connect Wallet</button>
57+
) : (
58+
<div>
59+
<p>Connected: {walletState.address}</p>
60+
<button onClick={handleDeployContract}>
61+
Deploy Contract
62+
</button>
63+
</div>
64+
)}
65+
</div>
66+
);
67+
}
68+
```

‎apps/docs/src/pages/en/packages/midnight_setup/index.mdx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
title: Midnight Setup
3+
description: Complete development setup for building Midnight Network dApps
4+
asIndexPage: true
5+
sidebarTitle: Midnight Setup
6+
---
7+
8+
# Midnight Setup
9+
10+
**Complete development setup for building Midnight Network dApps.**
11+
12+
## Overview
13+
14+
This comprehensive package provides everything you need to build decentralized applications (dApps) on the Midnight Network. Midnight is a next-generation blockchain that protects user, business, and transaction data through zero-knowledge (ZK) proofs, ensuring privacy without compromising data protection or ownership.
15+
16+
## What's Included
17+
18+
- **Core API** - Complete Midnight Network integration
19+
- **Wallet Integration** - Full Lace Beta Wallet support
20+
- **React Hooks** - Easy-to-use React components and hooks
21+
- **CLI Tools** - Development utilities and helpers
22+
- **TypeScript Support** - Full type safety and IntelliSense
23+
24+
## Quick Installation
25+
26+
- npm:
27+
```bash
28+
npm install @meshsdk/midnight-setup
29+
```
30+
31+
- yarn:
32+
```bash
33+
yarn add @meshsdk/midnight-setup
34+
```
35+
36+
## Getting Started
37+
38+
1. **[Quick Start](/en/packages/midnight_setup/quick_start)** - Installation and basic usage
39+
2. **[Core API Methods](/en/packages/midnight_setup/api_methods)** - Understanding the API
40+
3. **[Wallet Integration](/en/packages/midnight_setup/wallet_integration)** - Lace Wallet setup
41+
4. **[Integration Examples](/en/packages/midnight_setup/examples)** - React hooks and examples
42+
5. **[Project Structure](/en/packages/midnight_setup/project_structure)** - Understanding the codebase
43+
44+
## Key Features
45+
46+
- **Zero-knowledge privacy** - Built for Midnight Network
47+
- **TypeScript support** - Full type safety
48+
- **React hooks** - Easy integration
49+
- **Wallet integration** - Lace Beta Wallet support
50+
- **CLI tools** - Development utilities
51+
52+
Start building your Midnight dApp today! Explore the sections below to get started.
53+

‎apps/docs/src/pages/en/packages/midnight_setup/project_structure.mdx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: Project Structure
3+
description: Understanding the monorepo structure and resources
4+
sidebarTitle: Project Structure
5+
---
6+
7+
# Project Structure
8+
9+
```
10+
├── packages/
11+
│ ├── api/ # Core API implementation
12+
│ ├── ui/ # React example app
13+
│ └── cli/ # Command-line tools
14+
├── compact/ # Smart contract source
15+
└── README.md
16+
```
17+
18+
## Directory Overview
19+
20+
### packages/api/
21+
Core API implementation containing:
22+
- Contract deployment logic
23+
- Provider management
24+
- State management utilities
25+
26+
### packages/ui/
27+
Example React application demonstrating:
28+
- Wallet connection
29+
- Contract deployment
30+
- State reading and updates
31+
32+
### packages/cli/
33+
Command-line tools for:
34+
- Development utilities
35+
- ZK parameter fetching
36+
- Testing helpers
37+
38+
### compact/
39+
Smart contract source code:
40+
- Compact contracts
41+
- Compilation artifacts
42+
- Deployment scripts
43+
44+
## Resources
45+
46+
- [Midnight Network Docs](https://docs.midnight.network/)
47+
- [Mesh SDK Documentation](https://docs.meshjs.dev/)
48+
- [Lace Beta Wallet](https://chromewebstore.google.com/detail/lace-midnight-preview/hgeekaiplokcnmakghbdfbgnlfheichg)

‎apps/docs/src/pages/en/packages/midnight_setup/quick_start.mdx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
title: Quick Start
3+
description: Get started with @meshsdk/midnight-setup
4+
sidebarTitle: Quick Start
5+
---
6+
7+
# Quick Start
8+
9+
## Installation
10+
11+
```bash
12+
yarn add @meshsdk/midnight-setup
13+
```
14+
15+
## Basic Usage
16+
17+
```typescript
18+
import { MidnightSetupAPI } from '@meshsdk/midnight-setup';
19+
20+
// Deploy a new contract
21+
const api = await MidnightSetupAPI.deployContract(providers, contractInstance);
22+
23+
// Join an existing contract
24+
const api = await MidnightSetupAPI.joinContract(providers, contractInstance, contractAddress);
25+
26+
// Get contract state
27+
const state = await api.getContractState();
28+
29+
// Get ledger state
30+
const ledgerState = await api.getLedgerState();
31+
```
32+
33+
## What's Included
34+
35+
This monorepo contains everything you need to build Midnight Network dApps:
36+
37+
- **@meshsdk/midnight-setup** - Main npm package with API and types
38+
- **packages/ui** - Example React application
39+
- **packages/cli** - Command-line tools
40+
- **packages/api** - Core API implementation
41+
42+
## Try the Project
43+
44+
To test the complete setup locally, use this repository as reference:
45+
46+
**Repository**: [https://github.com/MeshJS/midnight-setup](https://github.com/MeshJS/midnight-setup)
47+
48+
```bash
49+
# 1. Install dependencies
50+
yarn install
51+
52+
# 2. Build all packages
53+
yarn build:all
54+
55+
# 3. Download fetch parameters
56+
cd packages/cli && ./fetch-zk-params.sh
57+
58+
# 4. Start testnet with Docker
59+
docker-compose -f testnet.yml up -d
60+
61+
# 5. Run the frontend
62+
cd ../ui && yarn start
63+
```

‎apps/docs/src/pages/en/packages/midnight_setup/wallet_integration.mdx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
title: Wallet Integration
3+
description: Complete Lace Beta Wallet integration for Midnight Network
4+
sidebarTitle: Wallet Integration
5+
---
6+
7+
# Lace Wallet Integration
8+
9+
This project includes a complete Lace Beta Wallet integration for Midnight Network:
10+
11+
## Wallet Features
12+
13+
| Feature | Description | Implementation |
14+
|---------|-------------|----------------|
15+
| **Connect Wallet** | Connect to Lace Beta Wallet | `wallet.enable()` |
16+
| **Disconnect Wallet** | Disconnect from wallet | `wallet.disconnect()` |
17+
| **Get Wallet State** | Retrieve wallet address and keys | `wallet.state()` |
18+
| **Deploy Contract** | Deploy contracts through wallet | `wallet.submitTransaction()` |
19+
| **Join Contract** | Join existing contracts | `wallet.balanceAndProveTransaction()` |
20+
| **Balance Transactions** | Balance and prove transactions | Wallet API integration |
21+
22+
## Wallet Provider Setup
23+
24+
```typescript
25+
// Connect to Lace Wallet
26+
const wallet = window.midnight?.mnLace;
27+
if (!wallet) {
28+
throw new Error('Please install Lace Beta Wallet for Midnight Network');
29+
}
30+
31+
// Enable wallet and get state
32+
const walletAPI = await wallet.enable();
33+
const walletState = await walletAPI.state();
34+
const uris = await wallet.serviceUriConfig();
35+
```
36+
37+
## React Wallet Hook
38+
39+
```typescript
40+
import { useMidnightWallet } from './hooks/useMidnightWallet';
41+
42+
function App() {
43+
const {
44+
connectWallet,
45+
disconnectWallet,
46+
walletState,
47+
isConnected
48+
} = useMidnightWallet();
49+
50+
return (
51+
<div>
52+
{isConnected ? (
53+
<button onClick={disconnectWallet}>Disconnect</button>
54+
) : (
55+
<button onClick={connectWallet}>Connect Wallet</button>
56+
)}
57+
</div>
58+
);
59+
}
60+
```

0 commit comments

Comments
 (0)