A minimalist React DApp for transferring USDC between Arc Testnet and Base Sepolia using Circle's Cross-Chain Transfer Protocol (CCTP). Features Base Account and Basename integration, works seamlessly in Base Apps and Farcaster.

🔵 Base Ecosystem Integration

• Base Account smart wallet support
• Basename display (shows your .base name)
• Works in Base Apps and Farcaster Frames
• Farcaster MiniApp connector included

✨ Clean UI/UX Design

• Minimalist black, white, and blue color scheme
• Smooth animations and transitions
• Fully responsive design
• Real-time progress tracking

🌉 Cross-Chain Transfer

• Bridge between Arc Testnet ↔️ Base Sepolia
• Native USDC on Arc Testnet (no wrapped tokens)
• Instant transfers with Circle's CCTP
• Automatic network addition to wallet

🔐 Multiple Wallet Options

• Base Account (Smart Wallet)
• Farcaster MiniApp
• MetaMask
• Coinbase Wallet
• Auto-detection and network switching

1. Connect Wallet - Use Base Account, Farcaster, MetaMask, or Coinbase Wallet
2. Basename Display - If you have a Basename, it's automatically displayed
3. Select Chain - Choose Arc Testnet or Base Sepolia as source
4. Enter Amount - Input USDC amount to bridge
5. Bridge - Circle's CCTP handles the entire cross-chain transfer
6. Done - Receive native USDC on destination chain instantly

• USDC is the native token on Arc Testnet (no ETH needed for gas!)
• Balance display optimized to show only USDC
• Automatic network addition if not in wallet

• React 18 - Modern React with hooks
• Vite - Fast build tool and dev server
• Wagmi 2.12 - React hooks for Ethereum
• Viem 2.38 - TypeScript interface for Ethereum
• TanStack Query - Async state management
• Circle BridgeKit - Official CCTP SDK
• OnchainKit - Base identity (Basename)
• Farcaster MiniApp SDK - Farcaster integration
• Tailwind CSS - Utility-first styling

• Node.js 16+ and npm/yarn
• MetaMask browser extension
• Sepolia ETH for gas fees
• Testnet USDC on Ethereum Sepolia

1. Clone the repository:

cd arc_to_base_dapp

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser to http://localhost:3000 and connect your MetaMask wallet

npm run build

The built files will be in the dist directory.

The DApp is pre-configured for Arc Testnet ↔️ Base Sepolia transfers:

• Chain ID: 5042002 (0x4cef52)
• RPC: https://rpc.testnet.arc.network
• Explorer: https://testnet.arcscan.app
• USDC (Native): 0x3600000000000000000000000000000000000000
• CCTP Domain: 7

• Chain ID: 84532
• RPC: https://sepolia.base.org
• Explorer: https://sepolia.basescan.org
• USDC: 0x036CbD53842c5426634e7929541eC2318f3dCF7e
• CCTP Domain: 6

Networks are automatically added to your wallet when needed!

• USDC is the native token - no separate faucet needed!
• Get Arc Testnet USDC from Arc Faucet

• Base Sepolia ETH: Base Sepolia Faucet
• USDC: Bridge from Arc or use Circle Faucet

• Register your .base name on Base mainnet
• Visit Basename Registration

arc_to_base_dapp/
├── public/              # Static assets
├── src/
│   ├── App.jsx         # Main application component
│   ├── App.css         # Application styles
│   ├── main.jsx        # Entry point with providers
│   └── index.css       # Global styles
├── index.html          # HTML template
├── vite.config.js      # Vite configuration
├── package.json        # Dependencies and scripts
└── README.md          # This file

• Create a smart wallet directly in the app
• No seed phrases needed
• Gasless transactions support
• Works across all Base apps

• Shows your .base name instead of address
• Fetched from Base mainnet automatically
• Blue highlight for easy recognition
• Falls back to truncated address

• Works as a Farcaster Frame
• Farcaster MiniApp connector included
• Use directly in Warpcast
• Share bridge links in casts

• Arc Testnet and Base Sepolia added automatically
• No manual RPC configuration needed
• One-click network switching
• Manual add buttons available

• Arc Testnet: Shows only USDC (native token)
• Base Sepolia: Shows ETH + USDC
• Real-time balance updates
• One-click refresh button

• Official Circle CCTP SDK
• Simplified bridging flow
• Automatic attestation handling
• Progress tracking built-in

• Circle CCTP Documentation
• Circle BridgeKit SDK
• Base Documentation
• Base Account Guide
• Basename Guide
• Farcaster Frames

• Wagmi Documentation
• Viem Documentation
• OnchainKit
• Farcaster MiniApp SDK

• Arc Network
• Base Network
• Arc Testnet Explorer
• Base Sepolia Explorer

Deploy to Base with Vercel, Netlify, or any static host. The app automatically detects Base App environment.

Add frame metadata (already included) and deploy. Test with Frame Validator.

MIT License - Open source and free to use!

Built by @lynnthelight for @ARC_Devs 🔵

For issues or questions:

• Check Arc Network Documentation
• Review transactions on block explorers
• Join Arc Discord

Built with 🔵 for the Base and Arc ecosystems