Web front-end

Build a web UI that interacts with AICW wallets

A typical AICW-powered web app has a split architecture: the browser handles issuer wallet connections and UI, while the backend handles agent-signed operations via MPC.

Architecture

Architecture
Browser (React/Next.js)
  ├─ Wallet adapter (Phantom, Solflare) → issuer-signed txs
  ├─ Read on-chain state → display dashboards
  └─ Call your backend API → trigger agent operations

Your Backend (Node.js/Python)
  ├─ MPC Bridge calls → agent-signed txs
  ├─ Business logic (heartbeat scheduling, transfer rules)
  └─ Store off-chain data (decision reasoning, user preferences)

Wallet adapter setup (React)

React

import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
import { PhantomWalletAdapter } from "@solana/wallet-adapter-wallets";

const network = WalletAdapterNetwork.Devnet;
const endpoint = "https://api.devnet.solana.com";
const wallets = [new PhantomWalletAdapter()];

function App() {
  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets}>
        {/* Your app content */}
      </WalletProvider>
    </ConnectionProvider>
  );
}

Key UX patterns

Pattern	Implementation
Wallet status indicator	Fetch will state → show alive/dead/time-until-death
Balance display	Fetch PDA balance → subtract rent → show "available"
Transaction history	Iterate DecisionLog PDAs → render as timeline
Will details	Fetch AIWill → show beneficiaries with percentages
Issuance flow	Issuer connects wallet → signs issue_wallet → show credentials

Error handling for users

Map Solana program errors to human-readable messages (e.g., 0x1771 → "Wallet not found")
Show transaction signatures as links to Solana Explorer
Handle wallet disconnection gracefully with reconnect prompts
Use versioned transactions (v0) for future compatibility

Security considerations

Never expose MPC credentials in client-side code. MPC_WALLET_ID and bridge URL must stay server-side.
Validate all user inputs server-side before building transactions.
Use HTTPS everywhere — especially for MPC Bridge communication.