diff --git a/apps/docs/src/pages/en/packages/_meta.js b/apps/docs/src/pages/en/packages/_meta.js index fea991b..9c987f6 100644 --- a/apps/docs/src/pages/en/packages/_meta.js +++ b/apps/docs/src/pages/en/packages/_meta.js @@ -1,4 +1,8 @@ export default { + "midnight_setup": { + title: "Midnight Setup", + route: "/midnight_setup", + }, "wallet_widget": { title: "Wallet Widget", route: "/wallet_widget", diff --git a/apps/docs/src/pages/en/packages/midnight_setup/_meta.js b/apps/docs/src/pages/en/packages/midnight_setup/_meta.js new file mode 100644 index 0000000..2e69585 --- /dev/null +++ b/apps/docs/src/pages/en/packages/midnight_setup/_meta.js @@ -0,0 +1,26 @@ +export default { + "index": { + title: "Introduction", + route: "/", + }, + "quick_start": { + title: "Quick Start", + route: "/quick_start", + }, + "api_methods": { + title: "Core API Methods", + route: "/api_methods", + }, + "wallet_integration": { + title: "Wallet Integration", + route: "/wallet_integration", + }, + "examples": { + title: "Integration Examples", + route: "/examples", + }, + "project_structure": { + title: "Project Structure", + route: "/project_structure", + }, +}; diff --git a/apps/docs/src/pages/en/packages/midnight_setup/api_methods.mdx b/apps/docs/src/pages/en/packages/midnight_setup/api_methods.mdx new file mode 100644 index 0000000..43b5efc --- /dev/null +++ b/apps/docs/src/pages/en/packages/midnight_setup/api_methods.mdx @@ -0,0 +1,25 @@ +--- +title: Core API Methods +description: MidnightSetupAPI methods and provider setup +sidebarTitle: Core API Methods +--- + +# Core API Methods + +## MidnightSetupAPI + +| Method | Description | Usage | +|--------|-------------|-------| +| `deployContract(providers, contractInstance)` | Deploy a new contract | Creates new contract instance | +| `joinContract(providers, contractInstance, address)` | Join existing contract | Connect to deployed contract | +| `getContractState()` | Read contract state | Get current contract data | +| `getLedgerState()` | Read ledger state | Get blockchain data | + +## Provider Setup + +```typescript +import { setupProviders } from './lib/providers'; + +const providers = await setupProviders(); +// Returns: MidnightSetupContractProviders +``` diff --git a/apps/docs/src/pages/en/packages/midnight_setup/examples.mdx b/apps/docs/src/pages/en/packages/midnight_setup/examples.mdx new file mode 100644 index 0000000..c5519fe --- /dev/null +++ b/apps/docs/src/pages/en/packages/midnight_setup/examples.mdx @@ -0,0 +1,68 @@ +--- +title: Integration Examples +description: React hooks and integration examples +sidebarTitle: Integration Examples +--- + +# Integration Examples + +## React Hook + +```typescript +import { useMidnightContract } from './hooks/useMidnightContract'; + +function App() { + const { api, deployContract, joinContract } = useMidnightContract(); + + const handleDeploy = async () => { + const newApi = await deployContract(); + console.log('Deployed:', newApi.deployedContractAddress); + }; + + return ; +} +``` + +## Complete Example + +```typescript +import { MidnightSetupAPI, useMidnightWallet } from '@meshsdk/midnight-setup'; + +function MyDApp() { + const { connectWallet, isConnected, walletState } = useMidnightWallet(); + + const handleDeployContract = async () => { + if (!isConnected) { + await connectWallet(); + return; + } + + // Setup providers + const providers = await setupProviders(); + + // Deploy contract + const api = await MidnightSetupAPI.deployContract( + providers, + contractInstance + ); + + console.log('Contract deployed at:', api.deployedContractAddress); + }; + + return ( +
+

My Midnight dApp

+ {!isConnected ? ( + + ) : ( +
+

Connected: {walletState.address}

+ +
+ )} +
+ ); +} +``` diff --git a/apps/docs/src/pages/en/packages/midnight_setup/index.mdx b/apps/docs/src/pages/en/packages/midnight_setup/index.mdx new file mode 100644 index 0000000..5b3bb2a --- /dev/null +++ b/apps/docs/src/pages/en/packages/midnight_setup/index.mdx @@ -0,0 +1,53 @@ +--- +title: Midnight Setup +description: Complete development setup for building Midnight Network dApps +asIndexPage: true +sidebarTitle: Midnight Setup +--- + +# Midnight Setup + +**Complete development setup for building Midnight Network dApps.** + +## Overview + +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. + +## What's Included + +- **Core API** - Complete Midnight Network integration +- **Wallet Integration** - Full Lace Beta Wallet support +- **React Hooks** - Easy-to-use React components and hooks +- **CLI Tools** - Development utilities and helpers +- **TypeScript Support** - Full type safety and IntelliSense + +## Quick Installation + +- npm: +```bash +npm install @meshsdk/midnight-setup +``` + +- yarn: +```bash +yarn add @meshsdk/midnight-setup +``` + +## Getting Started + +1. **[Quick Start](/en/packages/midnight_setup/quick_start)** - Installation and basic usage +2. **[Core API Methods](/en/packages/midnight_setup/api_methods)** - Understanding the API +3. **[Wallet Integration](/en/packages/midnight_setup/wallet_integration)** - Lace Wallet setup +4. **[Integration Examples](/en/packages/midnight_setup/examples)** - React hooks and examples +5. **[Project Structure](/en/packages/midnight_setup/project_structure)** - Understanding the codebase + +## Key Features + +- **Zero-knowledge privacy** - Built for Midnight Network +- **TypeScript support** - Full type safety +- **React hooks** - Easy integration +- **Wallet integration** - Lace Beta Wallet support +- **CLI tools** - Development utilities + +Start building your Midnight dApp today! Explore the sections below to get started. + diff --git a/apps/docs/src/pages/en/packages/midnight_setup/project_structure.mdx b/apps/docs/src/pages/en/packages/midnight_setup/project_structure.mdx new file mode 100644 index 0000000..8a58df2 --- /dev/null +++ b/apps/docs/src/pages/en/packages/midnight_setup/project_structure.mdx @@ -0,0 +1,48 @@ +--- +title: Project Structure +description: Understanding the monorepo structure and resources +sidebarTitle: Project Structure +--- + +# Project Structure + +``` +├── packages/ +│ ├── api/ # Core API implementation +│ ├── ui/ # React example app +│ └── cli/ # Command-line tools +├── compact/ # Smart contract source +└── README.md +``` + +## Directory Overview + +### packages/api/ +Core API implementation containing: +- Contract deployment logic +- Provider management +- State management utilities + +### packages/ui/ +Example React application demonstrating: +- Wallet connection +- Contract deployment +- State reading and updates + +### packages/cli/ +Command-line tools for: +- Development utilities +- ZK parameter fetching +- Testing helpers + +### compact/ +Smart contract source code: +- Compact contracts +- Compilation artifacts +- Deployment scripts + +## Resources + +- [Midnight Network Docs](https://docs.midnight.network/) +- [Mesh SDK Documentation](https://docs.meshjs.dev/) +- [Lace Beta Wallet](https://chromewebstore.google.com/detail/lace-midnight-preview/hgeekaiplokcnmakghbdfbgnlfheichg) diff --git a/apps/docs/src/pages/en/packages/midnight_setup/quick_start.mdx b/apps/docs/src/pages/en/packages/midnight_setup/quick_start.mdx new file mode 100644 index 0000000..f3bd9b0 --- /dev/null +++ b/apps/docs/src/pages/en/packages/midnight_setup/quick_start.mdx @@ -0,0 +1,63 @@ +--- +title: Quick Start +description: Get started with @meshsdk/midnight-setup +sidebarTitle: Quick Start +--- + +# Quick Start + +## Installation + +```bash +yarn add @meshsdk/midnight-setup +``` + +## Basic Usage + +```typescript +import { MidnightSetupAPI } from '@meshsdk/midnight-setup'; + +// Deploy a new contract +const api = await MidnightSetupAPI.deployContract(providers, contractInstance); + +// Join an existing contract +const api = await MidnightSetupAPI.joinContract(providers, contractInstance, contractAddress); + +// Get contract state +const state = await api.getContractState(); + +// Get ledger state +const ledgerState = await api.getLedgerState(); +``` + +## What's Included + +This monorepo contains everything you need to build Midnight Network dApps: + +- **@meshsdk/midnight-setup** - Main npm package with API and types +- **packages/ui** - Example React application +- **packages/cli** - Command-line tools +- **packages/api** - Core API implementation + +## Try the Project + +To test the complete setup locally, use this repository as reference: + +**Repository**: [https://github.com/MeshJS/midnight-setup](https://github.com/MeshJS/midnight-setup) + +```bash +# 1. Install dependencies +yarn install + +# 2. Build all packages +yarn build:all + +# 3. Download fetch parameters +cd packages/cli && ./fetch-zk-params.sh + +# 4. Start testnet with Docker +docker-compose -f testnet.yml up -d + +# 5. Run the frontend +cd ../ui && yarn start +``` diff --git a/apps/docs/src/pages/en/packages/midnight_setup/wallet_integration.mdx b/apps/docs/src/pages/en/packages/midnight_setup/wallet_integration.mdx new file mode 100644 index 0000000..dcbd6ad --- /dev/null +++ b/apps/docs/src/pages/en/packages/midnight_setup/wallet_integration.mdx @@ -0,0 +1,60 @@ +--- +title: Wallet Integration +description: Complete Lace Beta Wallet integration for Midnight Network +sidebarTitle: Wallet Integration +--- + +# Lace Wallet Integration + +This project includes a complete Lace Beta Wallet integration for Midnight Network: + +## Wallet Features + +| Feature | Description | Implementation | +|---------|-------------|----------------| +| **Connect Wallet** | Connect to Lace Beta Wallet | `wallet.enable()` | +| **Disconnect Wallet** | Disconnect from wallet | `wallet.disconnect()` | +| **Get Wallet State** | Retrieve wallet address and keys | `wallet.state()` | +| **Deploy Contract** | Deploy contracts through wallet | `wallet.submitTransaction()` | +| **Join Contract** | Join existing contracts | `wallet.balanceAndProveTransaction()` | +| **Balance Transactions** | Balance and prove transactions | Wallet API integration | + +## Wallet Provider Setup + +```typescript +// Connect to Lace Wallet +const wallet = window.midnight?.mnLace; +if (!wallet) { + throw new Error('Please install Lace Beta Wallet for Midnight Network'); +} + +// Enable wallet and get state +const walletAPI = await wallet.enable(); +const walletState = await walletAPI.state(); +const uris = await wallet.serviceUriConfig(); +``` + +## React Wallet Hook + +```typescript +import { useMidnightWallet } from './hooks/useMidnightWallet'; + +function App() { + const { + connectWallet, + disconnectWallet, + walletState, + isConnected + } = useMidnightWallet(); + + return ( +
+ {isConnected ? ( + + ) : ( + + )} +
+ ); +} +```