Add token bridge UI for Ethereum to Arc/Robinhood Chain#2
Open
opengrid1 wants to merge 70 commits into
Open
Conversation
- New Bridge page with token selector (ETH/USDC/USDT), amount input, balance display, and step-by-step progress tracker - wagmi v3 + viem + @tanstack/react-query for wallet connection and on-chain reads; injected connector for MetaMask/browser wallets - Chain configs for Ethereum Mainnet and Robinhood Chain (ID 1996) - Automatic prompt to switch to Mainnet when wrong chain is active - Bridge route added to app nav alongside Explore and Create - Fix root .gitignore to allow app/src/lib/ (was caught by Foundry lib/ rule) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KxdmCFYReSEWBS97oB8hSY
…ires v2) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KxdmCFYReSEWBS97oB8hSY
Separate Vite + React + Tailwind site dedicated to the bridge UI. Includes wallet connection, token selector (ETH/USDC/USDT), amount input with balance display, chain-switch prompt, and step-by-step bridge progress tracker. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KxdmCFYReSEWBS97oB8hSY
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KxdmCFYReSEWBS97oB8hSY
Full visual overhaul following a privacy-first, engineer-built design philosophy: - Pure black (#050505) background with subtle scanline texture - Monospace type hierarchy (JetBrains Mono) for all labels/metadata - 1px strokes, tight borders, zero glassmorphism or gradients - Token selector, chain route display, data rows, progress steps - Tab navigation: Bridge / Activity feed - Compact nav with network status indicator Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KxdmCFYReSEWBS97oB8hSY
Complete visual rebuild: card-based layout with clear from/to panels, pill-shaped token selector, smooth step progress with spinner, proper type hierarchy (Inter + JetBrains Mono for data only), geometric grid logo, green network status pill, fade-in animations. No gimmicks. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KxdmCFYReSEWBS97oB8hSY
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KxdmCFYReSEWBS97oB8hSY
Built entirely with divs, border-radius, clip-path, and CSS transforms: - Two asymmetric vane halves form the feather body - Tapered rachis (stem) with clip-path polygon - Pointed tip piece at top - Split notch at base via ::after pseudo-element - Scale prop drives all sizes via CSS --s custom property Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KxdmCFYReSEWBS97oB8hSY
Pure JavaScript canvas drawing: bezierCurveTo() for the two vane halves, lineTo() for the rachis stem, arc() for the tip highlight, and a filled wedge polygon for the base notch. Linear gradients give depth. Retina-ready via devicePixelRatio scaling. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KxdmCFYReSEWBS97oB8hSY
- Chain ID: 5042, RPC: thirdweb, Explorer: explorer.arc.io - Native token: USDC (6 decimals) - Accent color updated to ARC purple (#6c63ff) - ARC logo drawn with Canvas (ring + A letterform) - All Robinhood branding removed Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KxdmCFYReSEWBS97oB8hSY
- Black background, dark card, hero 'Bridge Assets' heading - FROM/TO network rows with chain icons (Canvas-drawn ETH + ARC) - Monospace detail rows: NETWORK FEE, CIRCLE MINTER CAP, ESTIMATED TIME, ROUTER - Blue accent labels, green fee value, muted USDC amounts - White 'Connect Wallet' button, blue active bridge button - ArcBridge wordmark in cyan, centered Bridge nav underline Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KxdmCFYReSEWBS97oB8hSY
Remove ETH/USDT token options — this is a USDC-only CCTP bridge. Fetch real USDC balance via useReadContract (balanceOf ERC-20 call). Progress steps updated: Submit CCTP → Relay → Minted on Arc. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KxdmCFYReSEWBS97oB8hSY
Dark + yellow-green (#CAFF00) design matching robinbridge.xyz aesthetic. Deposit/Withdraw tabs, ETH bridge flow, liquidity card, how-it-works section. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KxdmCFYReSEWBS97oB8hSY
…ll button, hero banner, tagline
… wagmiConfig networks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds a comprehensive token bridge interface allowing users to transfer assets from Ethereum Mainnet to Arc Network (chain ID 5042) or Robinhood Chain (chain ID 1996). Two implementations are included: a standalone bridge app and an integrated bridge page within the main application.
Key Changes
New Bridge Applications
bridge-app/: Standalone bridge application with custom stylingApp.tsx: Main bridge component with amount input, chain selection, and transaction progress trackingwagmiConfig.ts: Wagmi configuration for Ethereum mainnet and Arc NetworkArcLogo.tsx: Custom canvas-based Arc logo componentapp/src/pages/Bridge.tsx: Integrated bridge page for the main applicationConfiguration & Infrastructure
app/src/lib/chains.ts: Chain definitions and token configurationapp/src/lib/wagmiConfig.ts: Wagmi configuration for main appIntegration
app/src/App.tsxto include Bridge routeapp/src/components/Header.tsxto add Bridge navigation linkapp/package.jsonwith wagmi and viem dependenciesapp/src/main.tsxto wrap app with WagmiProvider and QueryClientProviderNotable Implementation Details
useAccount,useConnect,useDisconnect,useSwitchChain) for wallet managementuseReadContractwith ERC20 ABIhttps://claude.ai/code/session_01KxdmCFYReSEWBS97oB8hSY