Catalyst Yield

A Next.js application demonstrating 1inch API integration for DeFi token swaps and quotes. This project provides a clean interface to fetch real-time token prices and swap quotes across multiple blockchain networks.

Features

• Multi-chain Support: Ethereum, Polygon, BNB Chain, and Arbitrum
• Real-time Token Data: Fetch available tokens and their details
• Swap Quotes: Get accurate quotes for token swaps using 1inch API
• Modern UI: Clean, responsive interface with Tailwind CSS
• TypeScript: Full TypeScript support for type safety

Tech Stack

• Framework: Next.js 15 with App Router
• Styling: Tailwind CSS v4
• Language: TypeScript
• Icons: Lucide React
• API: 1inch DeFi API integration

Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm/yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd catalyst-yield

2. Install dependencies:

pnpm install
# or
npm install

3. Start the development server:

pnpm dev
# or
npm run dev

4. Open http://localhost:3000 in your browser.

Usage

Access the 1inch Demo

Navigate to /oneinch to access the 1inch API demo interface where you can:

1. Select a blockchain network (Ethereum, Polygon, BNB Chain, or Arbitrum)
2. Choose tokens from the available token list for each network
3. Enter an amount in wei (e.g., 1000000000000000000 for 1 ETH)
4. Get real-time quotes for your token swaps

API Integration

The project includes a comprehensive 1inch API client in /lib/1inch/:

• client.ts: Core API client with request handling
• types.ts: TypeScript interfaces for API responses
• hooks.ts: React hooks for easy integration (useTokens, useQuote)
• index.ts: Main exports and ChainId constants

Project Structure

catalyst-yield/
├── app/
│   ├── oneinch/
│   │   └── page.tsx          # 1inch demo page
│   ├── globals.css           # Global styles
│   ├── layout.tsx            # Root layout
│   └── page.tsx              # Home page
├── components/
│   └── OneInchDemo.tsx       # Main demo component
├── lib/
│   └── 1inch/                # 1inch API integration
│       ├── client.ts
│       ├── hooks.ts
│       ├── types.ts
│       └── index.ts
├── public/                   # Static assets
└── package.json

Available Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm start - Start production server
• pnpm lint - Run ESLint

API Reference

useTokens Hook

const { tokens } = useTokens(chainId);

Fetches available tokens for a given chain ID.

useQuote Hook

const { quote, loading, error } = useQuote(chainId, {
  fromTokenAddress: string,
  toTokenAddress: string,
  amount: string
});

Fetches swap quotes for the specified token pair and amount.

Supported Networks

• Ethereum Mainnet (Chain ID: 1)
• Polygon (Chain ID: 137)
• BNB Chain (Chain ID: 56)
• Arbitrum (Chain ID: 42161)

Development

Adding New Networks

To add support for additional networks:

1. Update the ChainId type in /lib/1inch/types.ts
2. Add the new chain to the dropdown in /components/OneInchDemo.tsx
3. Ensure the 1inch API supports the new chain

Environment Variables

Currently, no API keys are required as the 1inch API is publicly accessible. However, for production deployments, you may want to:

• Add rate limiting
• Implement API key management
• Add error handling and retries

Contributing

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 to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is open source and available under the MIT License.

Learn More

• Next.js Documentation
• 1inch API Documentation
• Tailwind CSS Documentation