DCA Protocol Interface

A beautiful, Jupiter-style interface for Dollar Cost Averaging on Base chain. Built with Next.js, Viem, Wagmi, and RainbowKit.

Features

• 🎨 Jupiter-style Design - Sleek, modern interface inspired by Jupiter Exchange
• 🔗 Base Chain Support - Native integration with Base mainnet and testnet
• 💼 Wallet Integration - Connect with MetaMask, WalletConnect, and more via RainbowKit
• 📊 Position Management - Create and monitor your DCA positions
• 🔄 Token Swapping - Easy token selection with visual interface
• ⚡ Real-time Updates - Live balance and position tracking

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• A deployed DCA contract on Base

Installation

1. Clone and install dependencies:

   cd dca-interface
   npm install

2. Configure your DCA contract:

   Update src/lib/contracts.ts with your deployed contract address:

   export const CONTRACTS = {
     DCA: '0xYourDeployedContractAddress', // Replace with your contract
   } as const

3. Get a WalletConnect Project ID:

   • Visit WalletConnect Cloud
   • Create a project and get your Project ID
   • Update src/app/providers.tsx:

   const config = getDefaultConfig({
     appName: 'DCA Protocol',
     projectId: 'YOUR_PROJECT_ID', // Replace with your Project ID
     chains: [base, baseSepolia],
     ssr: true,
   })

4. Start the development server:

   npm run dev

5. Open http://localhost:3000

Usage

Creating a DCA Position

1. Connect your wallet using the connect button
2. Select tokens - Choose what to sell and what to buy
3. Set amount - Enter the total amount you want to DCA
4. Configure schedule:
   • Interval: How often to execute (5m, 1h, 1d, etc.)
   • Orders: How many total orders to split into
5. Approve tokens if needed
6. Create position and confirm the transaction

Managing Positions

• Navigate to the Positions tab to view all your DCA positions
• See progress, remaining amounts, and next execution times
• Monitor acquired tokens and completion status

Contract Deployment

Before using the interface, you need to deploy your DCA contract to Base:

Using Foundry

1. Set your private key:

   export PRIVATE_KEY="your_private_key_here"

2. Deploy to Base Sepolia (testnet):

   forge create src/dca.sol:DCAPositionManager \
     --private-key $PRIVATE_KEY \
     --rpc-url https://sepolia.base.org \
     --etherscan-api-key YOUR_BASESCAN_API_KEY \
     --verify

3. Deploy to Base Mainnet:

   forge create src/dca.sol:DCAPositionManager \
     --private-key $PRIVATE_KEY \
     --rpc-url https://mainnet.base.org \
     --etherscan-api-key YOUR_BASESCAN_API_KEY \
     --verify

4. Update the contract address in src/lib/contracts.ts

Architecture

Tech Stack

• Next.js 14 - React framework with app router
• TypeScript - Type safety
• Tailwind CSS - Styling
• Viem - Ethereum interactions
• Wagmi - React hooks for Ethereum
• RainbowKit - Wallet connection
• Lucide React - Icons

Key Components

• DCAInterface - Main position creation interface
• PositionsList - View and manage existing positions
• Navigation - App navigation with wallet connection
• contracts.ts - Contract ABIs and addresses

Contract Integration

The interface interacts with your DCA contract through:

1. Reading positions - View user's DCA positions
2. Creating positions - Submit new DCA strategies
3. Token approvals - Approve spending for position creation
4. Balance checking - Show token balances

Customization

Adding New Tokens

Token list is sourced from public/oneinch-tokenlist.json and filtered to Base (8453) at runtime. No need to edit a hardcoded list.

Styling

The interface uses Tailwind CSS with a dark theme. Key colors:

• Primary: Purple/Blue gradient
• Background: Dark with blur effects
• Accents: Gray with transparency

Chain Configuration

To add more chains, update src/app/providers.tsx:

const config = getDefaultConfig({
  // ...
  chains: [base, baseSepolia, mainnet, polygon],
  // ...
})

Production Deployment

Environment Variables

Create a .env.local file:

NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id
NEXT_PUBLIC_DCA_CONTRACT_ADDRESS=0x...

Deploy to Vercel

1. Push to GitHub
2. Connect to Vercel
3. Set environment variables
4. Deploy

Security Considerations

• Always verify contract addresses
• Test on testnet first
• Use proper slippage settings
• Monitor position execution
• Keep private keys secure

Support

For issues and questions:

• Check the contract documentation
• Review transaction errors in block explorer
• Test on Base Sepolia first