Getting Started with Mini App Development

This guide will walk you through setting up your development environment, installing the required packages, and creating your first Mini App.

Prerequisites

• Basic Knowledge: Familiarity with JavaScript/Typescript, React/Vue, and basic blockchain/dApp concepts.
• Node.js & npm/yarn: Ensure you have Node.js (version 14 or higher) installed. Download it from nodejs.org.
• Ethereum Wallet Basics: MiniPay injects an Ethereum provider (window.ethereum); this provider behaves like other injected providers but has the isMiniPay flag.
• Code Editor: Use your favorite editor (e.g., VS Code).

Set up your React or Vue app

Use the create-wagmi CLI to create a new app with Wagmi pre-configured.

yarn

yarn create wagmi

npm

npm create wagmi@latest

pnpm

pnpm create wagmi

bun

bun create wagmi

Other ways to start a project

Follow our guide to set up a simple React app using Vite, Tailwind, and Wagmi.

There are many other ways to create React apps if our guide does not fit your needs. You can look at reactjs.org or nextjs to learn more.

Integrate in an existing project?

Do you want to integrate MiniPay into an existing project? Follow the Wagmi documentation on how to install and manually configure Wagmi.

Connect to MiniPay

Open your Wagmi config (wagmi.ts) and ensure you have the injected connector, celo chain, and celo transporter.

import { celo } from "wagmi/chains";

export const config = createConfig({
  chains: [celo, celoAlfajores],
  connectors: [
    injected(), // should be listed first
  ],
  transports: {
    [celo.id]: http(),
    [celoAlfajores.id]: http(),
  },
});

Connect on page load. Call the connect function only once, at page load.

IMPORTANT

Never show a connect button in Mini Apps. Connection should happen automatically on page load.

wagmi

const { connectors, connect } = useConnect();

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

viem

import { createWalletClient, custom } from "viem";
import { celo, celoAlfajores } from "viem/chains";

const client = createWalletClient({
  chain: celo,
  // chain: celoAlfajores, // For Celo Testnet
  transport: custom(window.ethereum),
});

const [address] = await client.getAddresses();

Get wallet address

import { useAccount } from "wagmi";

const account = useAccount();
const address = account.address;