Browser Usage

Midday SDK supports browser environments with integration for the Lace wallet extension.

Prerequisites

• Lace wallet browser extension installed
• Lace wallet connected to Midnight testnet

Connecting to Lace Wallet

1. Connect to the wallet

   import * as Midday from '@no-witness-labs/midday-sdk';
   
   const wallet = await Midday.Wallet.fromBrowser('preview');

   This will prompt the user to approve the connection in their Lace wallet.

2. Create a client from the connection

   const client = await Midday.Client.create({
     wallet,
     privateStateProvider: Midday.PrivateState.indexedDBPrivateStateProvider({
       privateStateStoreName: 'my-app'
     }),
   });

3. Load and deploy a contract

   const loaded = await client.loadContract({
     module: CounterContract,
     zkConfig: new Midday.ZkConfig.HttpZkConfigProvider('https://cdn.example.com/zk'),
     privateStateId: 'my-counter',
   });
   const deployed = await loaded.deploy();
   await deployed.actions.increment();

Complete Example

import * as Midday from '@no-witness-labs/midday-sdk';
import * as CounterContract from './contracts/counter/contract/index.js';

async function main() {
  // Connect to Lace wallet
  const wallet = await Midday.Wallet.fromBrowser('preview');

  // Create client with connected wallet
  const client = await Midday.Client.create({
    wallet,
    privateStateProvider: Midday.PrivateState.indexedDBPrivateStateProvider({
      privateStateStoreName: 'my-app'
    }),
  });

  // Load contract with zkConfig
  const loaded = await client.loadContract({
    module: CounterContract,
    zkConfig: new Midday.ZkConfig.HttpZkConfigProvider('/zk-config'),
    privateStateId: 'my-counter',
  });

  // Deploy and interact
  const deployed = await loaded.deploy();
  await deployed.actions.increment();

  // Read state
  const state = await deployed.ledgerState();
  console.log('Counter:', state.counter);
}

Fee Relay (Optional)

For apps where users don’t need to hold dust tokens, enable fee relay:

const client = await Midday.Client.create({
  wallet,
  privateStateProvider: Midday.PrivateState.indexedDBPrivateStateProvider({
    privateStateStoreName: 'my-app',
  }),
  feeRelay: { url: 'http://localhost:3002' },
});

Browser-Specific Considerations

Private State Storage

In browsers, use IndexedDB for persistent private state:

const privateStateProvider = Midday.PrivateState.indexedDBPrivateStateProvider({
  privateStateStoreName: 'my-app-private-state',
});

Tip

Use a unique store name per application to avoid conflicts.

ZK Configuration

In browser environments, use HttpZkConfigProvider to load zk artifacts from a URL:

const loaded = await client.loadContract({
  module: CounterContract,
  zkConfig: new Midday.ZkConfig.HttpZkConfigProvider('https://cdn.example.com/zk'),
  privateStateId: 'my-counter',
});

Note

Ensure your ZK config server has proper CORS headers configured. The server should serve the contract’s keys and zkir directories.

Network Selection

Match the network to the wallet’s current network:

// Connect to preview network
const wallet = await Midday.Wallet.fromBrowser('preview');

// Or connect to mainnet (when available)
const wallet = await Midday.Wallet.fromBrowser('mainnet');

Wallet Connection Details

The wallet connection provides keys and configuration:

const wallet = await Midday.Wallet.fromBrowser('preview');

// Access wallet info
console.log('Address:', wallet.address);

// Get balance
const balance = await wallet.getBalance();
console.log('Balance:', balance);

Troubleshooting

Wallet Not Found

If fromBrowser throws an error, ensure:

1. Lace wallet extension is installed
2. The wallet is unlocked
3. The user has allowed the site to connect

Transaction Signing

All transactions are signed by the Lace wallet. The user will see a confirmation dialog for each transaction.

CORS Issues

If ZK configs fail to load, check that your ZK config server includes:

Access-Control-Allow-Origin: *

Or configure it to allow your specific domain.