Token Swap Mini App

A Base mini app that allows users to view their ERC20 token balances and swap multiple tokens to USDC using batch transactions.

Features

• ERC20 Token Balance Display: View balances for popular tokens on Base network (USDC, WETH, DAI)
• Batch Token Swapping: Swap multiple ERC20 tokens to USDC in a single transaction (demo mode)
• Swap Tracking: Track total swap amounts and fees using Supabase
• Rewards System: Calculate and display rewards based on swap volume (10% of fees)
• Modern UI: Clean, responsive design optimized for mobile with fixed bottom button

Overview

This mini app demonstrates:

1. Connecting to user's wallet via OnchainKit
2. Fetching ERC20 token balances
3. Displaying total swap history
4. Calculating rewards based on swap activity
5. Preparing batch swap transactions (demo implementation)

Prerequisites

Before getting started, make sure you have:

• Base app account
• A Farcaster account
• Vercel account for hosting the application
• Coinbase Developer Platform Client API Key

Getting Started

1. Clone this repository

git clone https://github.com/base/demos.git

2. Install dependencies:

cd demos/minikit/waitlist-mini-app-qs
npm install

3. Configure environment variables

Create a .env.local file and add your environment variables:

NEXT_PUBLIC_PROJECT_NAME="Your App Name"
NEXT_PUBLIC_ONCHAINKIT_API_KEY=<Replace-WITH-YOUR-CDP-API-KEY>
NEXT_PUBLIC_URL=

4. Run locally:

npm run dev

Customization

Update Manifest Configuration

The minikit.config.ts file configures your manifest located at app/.well-known/farcaster.json.

Skip the accountAssociation object for now.

To personalize your app, change the name, subtitle, and description fields and add images to your /public folder. Then update their URLs in the file.

Deployment

1. Deploy to Vercel

vercel --prod

You should have a URL deployed to a domain similar to: https://your-vercel-project-name.vercel.app/

2. Update environment variables

Add your production URL to your local .env file:

NEXT_PUBLIC_PROJECT_NAME="Your App Name"
NEXT_PUBLIC_ONCHAINKIT_API_KEY=<Replace-WITH-YOUR-CDP-API-KEY>
NEXT_PUBLIC_URL=https://your-vercel-project-name.vercel.app/

3. Upload environment variables to Vercel

Add environment variables to your production environment:

vercel env add NEXT_PUBLIC_PROJECT_NAME production
vercel env add NEXT_PUBLIC_ONCHAINKIT_API_KEY production
vercel env add NEXT_PUBLIC_URL production

Account Association

1. Sign Your Manifest

1. Navigate to Farcaster Manifest tool
2. Paste your domain in the form field (ex: your-vercel-project-name.vercel.app)
3. Click the Generate account association button and follow the on-screen instructions for signing with your Farcaster wallet
4. Copy the accountAssociation object

2. Update Configuration

Update your minikit.config.ts file to include the accountAssociation object:

export const minikitConfig = {
    accountAssociation: {
        "header": "your-header-here",
        "payload": "your-payload-here",
        "signature": "your-signature-here"
    },
    frame: {
        // ... rest of your frame configuration
    },
}

3. Deploy Updates

vercel --prod

Testing and Publishing

1. Preview Your App

Go to base.dev/preview to validate your app:

1. Add your app URL to view the embeds and click the launch button to verify the app launches as expected
2. Use the "Account association" tab to verify the association credentials were created correctly
3. Use the "Metadata" tab to see the metadata added from the manifest and identify any missing fields

2. Publish to Base App

To publish your app, create a post in the Base app with your app's URL.

Learn More

For detailed step-by-step instructions, see the Create a Mini App tutorial in the Base documentation.

---

Disclaimer

This project is a demo application created by the Base / Coinbase Developer Relations team for educational and demonstration purposes only.

There is no token, cryptocurrency, or investment product associated with Cubey, Base, or Coinbase.

Any social media pages, tokens, or applications claiming to be affiliated with, endorsed by, or officially connected to Cubey, Base, or Coinbase are unauthorized and fraudulent.

We do not endorse or support any third-party tokens, apps, or projects using the Cubey name or branding.

Warning

Do not purchase, trade, or interact with any tokens or applications claiming affiliation with Coinbase, Base, or Cubey.
Coinbase and Base will never issue a token or ask you to connect your wallet for this demo.

For official Base developer resources, please visit:

• https://base.org
• https://docs.base.org

---