← Back to all products
$10
Quote Comparison UI
React UI for comparing swap quotes side-by-side across DEX aggregators and routing strategies.
TypeScriptMarkdownJSONJavaScriptReact
📁 File Structure 24 files
quote-comparison-ui/
├── LICENSE
├── README.md
├── examples/
│ └── embed.html
├── index.html
├── package.json
├── postcss.config.js
├── security-notes.md
├── src/
│ ├── App.tsx
│ ├── components/
│ │ ├── QuoteCard.tsx
│ │ ├── QuoteChart.tsx
│ │ ├── QuoteWidget.tsx
│ │ ├── SwapButton.tsx
│ │ └── TokenSelector.tsx
│ ├── hooks/
│ │ ├── useQuotes.ts
│ │ └── useTokenList.ts
│ ├── lib/
│ │ ├── constants.ts
│ │ ├── format.ts
│ │ └── providers.ts
│ ├── main.tsx
│ └── styles/
│ └── globals.css
├── tailwind.config.js
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
📖 Documentation Preview README excerpt
Quote Comparison UI
React frontend widget that compares swap quotes across DEX venues — embeddable or standalone.
Price: $9.99 | Part of the [CryptoForge](https://cryptoforge.dev) DeFi Router store.
Overview
Drop-in React widget that fetches and compares swap quotes from six major DEX aggregators in real-time:
| Provider | Gasless | Chains |
|---|---|---|
| Uniswap | No | Mainnet, Optimism, Polygon, Arbitrum, Base |
| SushiSwap | No | Mainnet, Optimism, Polygon, Arbitrum |
| 1inch | Yes | Mainnet, Optimism, Polygon, Arbitrum, Base |
| 0x / Matcha | No | Mainnet, Optimism, Polygon, Arbitrum, Base |
| Paraswap | No | Mainnet, Optimism, Polygon, Arbitrum, Base |
| CoW Swap | Yes | Mainnet, Gnosis |
Features
- Price comparison chart — Recharts bar chart comparing output amounts
- Gas estimates — Per-provider gas cost in USD
- Price impact — Slippage warning with color coding
- Savings badge — Shows how much better the best quote is vs worst
- One-click swap — Execute via wagmi
useSendTransaction - Token selector — Searchable dropdown with token logos
- Auto-refresh — Quotes refresh every 15 seconds
- Dark theme — CryptoForge branded (Foundry Black, Forge Orange, Molten Gold)
- Embeddable — Use as standalone page or embed in any React app
Quick Start
# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run build
Open [http://localhost:3100](http://localhost:3100) in your browser.
Installation (as npm package)
npm install @cryptoforge/quote-comparison-ui
Customization
Theme
Edit tailwind.config.js to change brand colors:
... continues with setup instructions, usage examples, and more.
📄 Code Sample .js preview
postcss.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};