tomevault-io Wallet Integration
Connect Lace wallet to your Midnight DApp for user authentication, account management, and transaction signing.
When to Use
- Setting up wallet connection for the first time
- Handling multiple user accounts
- Switching between testnet and mainnet
- Troubleshooting wallet connection issues
- Migrating from MetaMask/Web3 patterns
Key Concepts
Browser Wallet Pattern
Lace wallet is a Chrome extension that injects window.midnight.mnLace into web pages. This is similar to MetaMask's window.ethereum but with Midnight-specific APIs.
Connection Flow
- Check availability - Verify Lace extension is installed
- Request authorization - User approves DApp access
- Get wallet state - Retrieve address, public keys
- Configure providers - Set up indexer and proof server connections
Address Format
Midnight uses Bech32m addresses (e.g., addr_test1qz...) instead of Ethereum's hex format (0x...).
References
| Document | Description |
|---|---|
| lace-connection.md | Wallet connection lifecycle and error handling |
| account-management.md | Multiple accounts and address display |
| network-switching.md | Testnet vs mainnet configuration |
| web3-comparison.md | MetaMask to Lace migration guide |
Examples
| Example | Description |
|---|---|
| connect-button/ | Basic wallet connection button component |
| account-switcher/ | Multi-account selection UI |
| network-selector/ | Network selection dropdown |
Quick Start
1. Check Wallet Availability
const wallet = window.midnight?.mnLace;
if (!wallet) {
// Show "Install Lace Wallet" prompt
throw new Error('Lace wallet not installed');
}
2. Request Authorization
const walletAPI = await wallet.enable();
// User sees approval popup in Lace
3. Get Wallet State
const state = await walletAPI.state();
console.log('Address:', state.address);
console.log('Coin Public Key:', state.coinPublicKey);
4. Get Service URLs
const uris = await wallet.serviceUriConfig();
// { indexerUri, indexerWsUri, proverServerUri }
Common Patterns
Connection State Hook
function useMidnightWallet() {
const [connected, setConnected] = useState(false);
const [address, setAddress] = useState<string | null>(null);
const [error, setError] = useState<Error | null>(null);
const connect = async () => {
try {
const wallet = window.midnight?.mnLace;
if (!wallet) throw new Error('Lace not installed');
const api = await wallet.enable();
const state = await api.state();
setAddress(state.address);
setConnected(true);
} catch (e) {
setError(e as Error);
}
};
return { connected, address, error, connect };
}
Display Address
function formatAddress(address: string): string {
// Bech32m addresses are long - truncate for display
if (address.length <= 20) return address;
return `${address.slice(0, 12)}...${address.slice(-8)}`;
}
Related Skills
proof-handling- Transaction signing flow after wallet connectiontransaction-flows- Submitting transactions via walleterror-handling- Wallet error messages and recovery
Related Commands
/dapp-check- Validates wallet provider configuration/dapp-debug wallet- Diagnose wallet connection issues
Converted and distributed by TomeVault — claim your Tome and manage your conversions.