MetaMask

Learn how to integrate Aomi Widget with a MetaMask-like wallet interface

MetaMask Fork Example

This example demonstrates how to build a MetaMask-style wallet interface using Aomi Widget with Reown AppKit integration.

Overview

This example shows:

Wallet connection with MetaMask-style UI
Account management and switching
Transaction signing flow
Network switching between chains
Integration with Aomi's AI assistant

Demo

import { AomiFrame } from "@aomi-labs/react";
import { createAppKit } from "@reown/appkit/react";
import { WagmiProvider } from "wagmi";

export default function MetaMaskForkDemo() {
  return (
    <WagmiProvider config={config}>
      <AomiFrame
        config={{
          assistantId: "your-assistant-id",
          walletConnect: true,
        }}
      />
    </WagmiProvider>
  );
}

Key Features

1. Wallet Connection

The MetaMask fork provides a familiar interface for connecting wallets:

import { useAppKit } from "@reown/appkit/react";

function ConnectButton() {
  const { open } = useAppKit();

  return (
    <button onClick={() => open()}>
      Connect Wallet
    </button>
  );
}

2. Account Display

Show the connected account with balance and network info:

import { useAccount, useBalance } from "wagmi";

function AccountInfo() {
  const { address, chain } = useAccount();
  const { data: balance } = useBalance({ address });

  return (
    <div>
      <p>Address: {address}</p>
      <p>Balance: {balance?.formatted} {balance?.symbol}</p>
      <p>Network: {chain?.name}</p>
    </div>
  );
}

3. Transaction Signing

Handle transaction signing with user confirmation:

import { useSendTransaction, useWaitForTransactionReceipt } from "wagmi";

function SendTransaction() {
  const { sendTransaction, data: hash } = useSendTransaction();
  const { isLoading, isSuccess } = useWaitForTransactionReceipt({ hash });

  const handleSend = async () => {
    sendTransaction({
      to: "0x...",
      value: parseEther("0.01"),
    });
  };

  return (
    <div>
      <button onClick={handleSend} disabled={isLoading}>
        {isLoading ? "Sending..." : "Send Transaction"}
      </button>
      {isSuccess && <p>Transaction successful!</p>}
    </div>
  );
}

4. Network Switching

Allow users to switch between networks:

import { useSwitchChain } from "wagmi";
import { mainnet, polygon, arbitrum } from "wagmi/chains";

function NetworkSwitcher() {
  const { switchChain } = useSwitchChain();

  return (
    <select onChange={(e) => switchChain({ chainId: Number(e.target.value) })}>
      <option value={mainnet.id}>Ethereum</option>
      <option value={polygon.id}>Polygon</option>
      <option value={arbitrum.id}>Arbitrum</option>
    </select>
  );
}

Configuration

AppKit Setup

Configure Reown AppKit with your project details:

import { createAppKit } from "@reown/appkit/react";
import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
import { mainnet, polygon } from "@reown/appkit/networks";

const projectId = "YOUR_PROJECT_ID";

const metadata = {
  name: "MetaMask Fork",
  description: "MetaMask-style wallet interface",
  url: "https://your-app.com",
  icons: ["https://your-app.com/icon.png"],
};

const wagmiAdapter = new WagmiAdapter({
  networks: [mainnet, polygon],
  projectId,
});

createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, polygon],
  projectId,
  metadata,
});

Integrate the Aomi AI assistant with wallet functionality:

<AomiFrame
  config={{
    assistantId: "metamask-assistant",
    theme: "dark",
    walletConnect: true,
    features: {
      chat: true,
      transactions: true,
      balanceCheck: true,
    },
  }}
/>

Styling

Customize the wallet interface to match MetaMask's design:

.wallet-container {
  max-width: 375px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #f6851b 0%, #e2761b 100%);
}

.account-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 24px;
}

Full Example

Here's a complete working example:

app/metamask-demo/page.tsx

"use client";

import { AomiFrame } from "@aomi-labs/react";
import { useAccount, useBalance, useSendTransaction } from "wagmi";
import { parseEther } from "viem";

export default function MetaMaskForkPage() {
  const { address, isConnected } = useAccount();
  const { data: balance } = useBalance({ address });
  const { sendTransaction } = useSendTransaction();

  if (!isConnected) {
    return (
      <div className="flex h-screen items-center justify-center">
        <button className="rounded-lg bg-orange-500 px-6 py-3 text-white">
          Connect Wallet
        </button>
      </div>
    );
  }

  return (
    <div className="container mx-auto p-4">
      <div className="mb-4 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 p-6 text-white">
        <h2 className="mb-2 text-xl font-bold">Account</h2>
        <p className="font-mono text-sm">{address}</p>
        <p className="mt-2 text-2xl font-bold">
          {balance?.formatted} {balance?.symbol}
        </p>
      </div>

      <AomiFrame
        config={{
          assistantId: "metamask-assistant",
          theme: "dark",
        }}
      />
    </div>
  );
}