Skip to main content
Back to Sample Apps

Base DEX Aggregator

A DEX Aggregator dApp on Base using QuickNode's Base DeFi Power Bundle, including gas estimation, swap APIs, and wallet history integration.

Deploy Icon
Deploy App
Github Icon
View Repo
Frontend Framework/Library:
Viem
Language:
TypeScript
Build Tool/Development Server:
Base DeFi Power Bundle
Sample app preview

Overview

This project is a decentralized exchange (DEX) aggregator built on Base Mainnet using the QuickNode Base DeFi Bundle. It allows users to connect their wallets, view gas estimates, and perform token swaps using the OpenOcean v4 Swap API—all through a modern, user-friendly web interface.

This example bot is provided for educational and demonstration purposes only. Use at your own risk. Always verify transactions and conduct proper security reviews before using in production environments.

The app uses:

Supporting resources:

Getting Started​

Install Dependencies​

Open the project directory:

git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/sample-dapps/base-dex-aggregator

Then, install the dependencies:

npm install
# or
yarn install
# or
pnpm install
# or
bun install

Set Environment Variables​

Create a .env file in the root directory using the sample provided:

cp .env.sample .env

Update the following fields:

VITE_QUICKNODE_ENDPOINT_URL: Your QuickNode Base endpoint URL (with DeFi Bundle enabled) VITE_WALLETCONNECT_PROJECT_ID: Your WalletConnect Project ID

QuickNode Base Endpoint​

To connect to the Base network and use add-ons like the Gas Estimation API and OpenOcean v4 Swap API, you'll need to configure the QuickNode Base Endpoint. This is the URL of the Base node you want to connect to.


  1. Sign up at QuickNode and create a Base mainnet endpoint.
  2. Enable the Base DeFi Power bundle in your endpoint. This enables add-ons, including the Gas Estimation API and OpenOcean v4 Swap API.
  3. Save your endpoint URL.

WalletConnect Project ID​

To support different wallets in your app easily, you'll need to obtain a WalletConnect Project ID. This identifier enables secure, multi-wallet connectivity through the WalletConnect protocol.

You can get a WalletConnect Project ID by signing up at WalletConnect Cloud.

Running the App Locally​

For development:

npm run dev
### or
yarn dev
### or
pnpm dev
### or
bun dev

Visit: http://localhost:5173

Architecture​

Architecture Diagram

├── index.html
├── package.json
├── postcss.config.mjs
├── src
│   ├── App.tsx
│   ├── components
│   │   ├── Banner.tsx
│   │   ├── SwapCard.tsx
│   │   ├── TokenSelector.tsx
│   ├── context
│   │   └── TokenContext.tsx
│   ├── hooks
│   │   ├── useERC20Approval.ts
│   │   ├── useGasEstimate.tsx
│   │   ├── useSwapQuote.tsx
│   ├── index.css
│   ├── lib
│   │   ├── api.ts
│   │   ├── constants.ts
│   │   ├── utils.ts
│   │   └── wagmi.ts
│   ├── main.tsx
│   └── types.ts
├── tailwind.config.ts
├── tsconfig.json
└── vite.config.ts
Contributions & Feedback
We'd love to hear your feedback and welcome any contributions to this sample app!
To report issues or share feedback, open a GitHub issue in the qn-guide-examples repository.
To contribute, follow these steps:
  1. Fork the repository
  2. Create a feature branch:
    git checkout -b feature/amazing-feature
  3. Commit your changes:
    git commit -m "Add amazing feature"
  4. Push your branch:
    git push origin feature/amazing-feature
  5. Open a Pull Request.
Explore More Sample Apps
AML and CFT Compliant dApp
This application enables secure ETH staking with integrated compliance features. Built on Base and compatible with any Ethereum-based network, it leverages Chainlink Functions and QuickNode’s Risk Assessment API to ensure only low-risk wallets can participate in the staking pool.
AML and CFT Compliant dApp
Base Telegram Trading Bot
A user-friendly Telegram bot for trading ERC-20 tokens on Base Mainnet with MEV protection, leveraging QuickNode's Base DeFi Power Bundle.
Base Telegram Trading Bot
Coinbase x402 Paywall
This crypto paywall demo shows how to monetize video content using blockchain payments via the x402 payment protocol. Built with Express.js, it requires users to pay USDC cryptocurrency to access premium videos on Base Sepolia testnet.
Coinbase x402 Paywall