Mini Apps

Appearance

Quick Start ​

Follow this to get your first Mini App running in under a few minutes. New to Mini Apps? Read Overview first.

Prerequisites ​

  • Node.js 18+
  • Familiarity with React (or other frameworks) and TypeScript

Step 1: Create your app ​

Use the create-wagmi CLI to create an app with Wagmi pre-configured:

bash
npm create wagmi@latest
bash
pnpm create wagmi
bash
bun create wagmi
bash
yarn create wagmi

Other options: Project setup (structure and config) or Setup with React (Vite + React + Wagmi from scratch). Existing project? See Wagmi manual installation.

Step 2: Configure Wagmi for MiniPay ​

In your Wagmi config, use the injected connector and Celo + Celo Sepolia:

ts
import { http } from "viem";
import { createConfig } from "wagmi";
import { injected } from "wagmi/connectors";
import { celo, celoSepolia } from "wagmi/chains";

export const config = createConfig({
  chains: [celo, celoSepolia],
  connectors: [injected()],
  transports: {
    [celo.id]: http(),
    [celoSepolia.id]: http(),
  },
});

Step 3: Auto-connect on load ​

MiniPay requires automatic wallet connection on page load. Do not show a "Connect" button.

tsx
import { useEffect } from "react";
import { useConnect, useConnectors } from "wagmi";

export function useAutoConnect() {
  const connectors = useConnectors();
  const { connect } = useConnect();

  useEffect(() => {
    if (connectors.length > 0) {
      connect({ connector: connectors[0] });
    }
  }, [connectors, connect]);
}

Call useAutoConnect() in your root layout or app component.

Step 4: Verify connection ​

Use Wagmi v3's useConnection() to read address and chain:

tsx
import { useConnection } from "wagmi";

function WalletInfo() {
  const { address, isConnected, isConnecting, chainId } = useConnection();

  if (isConnecting) return <div>Connecting...</div>;
  if (!isConnected || !address)
    return <div>Not connected. Open in MiniPay.</div>;

  return (
    <div>
      <p>Address: {address}</p>
      <p>Chain ID: {chainId}</p>
    </div>
  );
}

Step 5: Test in MiniPay ​

Enable Developer Mode in MiniPay, then use Load test page and enter your app URL (use ngrok for local dev).

Next: Project setup for repo structure and env vars, or Test in MiniPay to load your app in the wallet. For more depth: Wallet connection, Retrieve balance, Send transaction.