Haiku Swap Widget

A powerful, self-contained swap widget for DeFi applications that allows users to easily integrate Haiku's swap functionality into their websites. The widget includes built-in HTTP client and session management.

Features

- 🚀 Easy Integration - Simple React component that works with any React application
- 🎨 Fully Customizable - Theme support with light/dark modes and custom colors
- 🔗 Multi-Chain Support - Works with 13+ supported networks including Ethereum, Berachain, and more
- 💰 Smart Routing - Advanced swap routing for optimal prices and gas efficiency
- 📱 Responsive Design - Works seamlessly on desktop and mobile devices
- 🔒 Secure - Built with security best practices and wallet integration
- ⚡ Self-Contained - Includes HTTP client and session management
- 🎛️ Flexible Configuration - Control chains, protocols, and token preselection

Requirements

The widget requires the following providers to be set up in your host application:

- WagmiProvider: For wallet connection and blockchain interactions
- QueryClientProvider: For React Query state management
- RainbowKitProvider: For wallet connection UI (optional but recommended)

The widget will use your existing wallet connection and share the same state with your application.

Installation

``bash
npm install @haiku-trade/widget


or

yarn add @haiku-trade/widget

or

pnpm add @haiku-trade/widget
`

Peer Dependencies

The widget requires the following peer dependencies to be installed in your project:

$3

`bash
npm install react@>=18.0.0 react-dom@>=18.0.0 wagmi@>=2.0.0 @tanstack/react-query@>=5.0.0
`

$3

For the best experience, we also recommend installing RainbowKit for wallet connection UI:

`bash
npm install @rainbow-me/rainbowkit@>=2.0.0
`

$3

Here's the complete installation command for a new project:

`bash


Install the widget and all required dependencies

npm install @haiku-trade/widget react@>=18.0.0 react-dom@>=18.0.0 wagmi@>=2.0.0 @tanstack/react-query@>=5.0.0 @rainbow-me/rainbowkit@>=2.0.0

Or with yarn

yarn add @haiku-trade/widget react@>=18.0.0 react-dom@>=18.0.0 wagmi@>=2.0.0 @tanstack/react-query@>=5.0.0 @rainbow-me/rainbowkit@>=2.0.0

Or with pnpm

pnpm add @haiku-trade/widget react@>=18.0.0 react-dom@>=18.0.0 wagmi@>=2.0.0 @tanstack/react-query@>=5.0.0 @rainbow-me/rainbowkit@>=2.0.0
`

$3

#### New React Project (Create React App, Vite, Next.js)
`bash


Create a new project

npx create-react-app my-defi-app

or

npm create vite@latest my-defi-app -- --template react-ts

or

npx create-next-app@latest my-defi-app

Install the widget and dependencies

npm install @haiku-trade/widget wagmi@^2.0.0 @tanstack/react-query@^5.0.0 @rainbow-me/rainbowkit@^2.0.0
`

#### Existing React Project
`bash


Check if you already have the required dependencies

npm list react wagmi @tanstack/react-query

Install missing dependencies

npm install wagmi@^2.0.0 @tanstack/react-query@^5.0.0 @rainbow-me/rainbowkit@^2.0.0

Install the widget

npm install @haiku-trade/widget
`

#### TypeScript Project
Make sure you have TypeScript types installed:
`bash
npm install --save-dev @types/react @types/react-dom
`

Quick Start

The Haiku Swap Widget requires WagmiProvider and QueryClientProvider from the host application. Here's how to set it up:

`tsx
import { HaikuWidget } from '@haiku-trade/widget';
import { WagmiProvider } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { RainbowKitProvider, getDefaultConfig } from '@rainbow-me/rainbowkit';
import { mainnet, arbitrum, base } from 'wagmi/chains';

// Create your Wagmi configuration
const wagmiConfig = getDefaultConfig({
appName: "My DeFi App",
projectId: "your-walletconnect-project-id", // Get from https://cloud.walletconnect.com
chains: [mainnet, arbitrum, base],
});

// Create your query client
const queryClient = new QueryClient();

function App() {
return (







);
}
`

Configuration Options

The widget accepts a config prop with the following options:

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| theme | WidgetTheme | undefined | Theme configuration with light/dark modes |
| hiddenChains | number[] | undefined | Array of chain IDs to hide from selection |
| hiddenProtocols | string[] | undefined | Array of protocol names to hide |
| multiInput | boolean | true | Allow multiple input tokens |
| multiOutput | boolean | true | Allow multiple output tokens |
| lockedInputs | boolean | false | Lock input tokens from being changed |
| lockedOutputs | boolean | false | Lock output tokens from being changed |
| preselectedInputs | Record | undefined | Pre-selected input tokens with amounts |
| preselectedOutputs | Record | undefined | Pre-selected output tokens with weights |

$3

The widget supports custom theming through the theme prop:

`tsx
import { HaikuWidget, WidgetConfig } from '@haiku-trade/widget'

const config: WidgetConfig = {
theme: {
mode: 'dark', // 'light' | 'dark' | 'auto'
light: {
primaryColor: '#3B82F6', // Hex color for primary elements
secondaryColor: '#10B981' // Hex color for secondary elements
},
dark: {
primaryColor: '#60A5FA', // Hex color for primary elements in dark mode
secondaryColor: '#34D399' // Hex color for secondary elements in dark mode
}
}
}

function App() {
return
}
`

#### Theme Properties

- mode: Controls the color scheme
- 'light': Forces light mode
- 'dark': Forces dark mode
- 'auto': Uses system preference (default)
- light: Color palette for light mode
- dark: Color palette for dark mode

#### Color Palette Properties

- primaryColor: Hex color for primary elements (buttons, links, etc.)
- secondaryColor: Hex color for secondary elements
- accentColor: Hex color for accent elements
- successColor: Hex color for success states
- warningColor: Hex color for warning states
- errorColor: Hex color for error states

Supported Chains

The widget supports the following blockchain networks:

- Ethereum (Chain ID: 1)
- Optimism (Chain ID: 10)
- BSC (Chain ID: 56)
- Gnosis (Chain ID: 100)
- Polygon (Chain ID: 137)
- Arbitrum (Chain ID: 42161)
- Avalanche (Chain ID: 43114)
- Base (Chain ID: 8453)
- Scroll (Chain ID: 534352)
- Berachain (Chain ID: 80094)
- Sei (Chain ID: 1329)
- Worldchain (Chain ID: 480)
- Katana (Chain ID: 747474)

Examples

$3

`tsx
import { HaikuWidget, WidgetConfig } from '@haiku-trade/widget';

function App() {
const config: WidgetConfig = {
theme: {
mode: 'dark',
light: {
primaryColor: '#3B82F6',
secondaryColor: '#8B5CF6',
},
dark: {
primaryColor: '#60A5FA',
secondaryColor: '#A78BFA',
},
},
hiddenChains: [56, 137], // Hide BSC and Polygon
hiddenProtocols: ['SUSHISWAP', 'CURVE'],
multiInput: true,
multiOutput: true,
};

return ;
}
`

$3

`tsx
import { HaikuWidget, WidgetConfig } from '@haiku-trade/widget';

function App() {
const config: WidgetConfig = {
preselectedInputs: {
'base:0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee': 1.0, // 1 ETH on Base
},
preselectedOutputs: {
'base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913': 0.6, // 60% USDC
'base:0x4200000000000000000000000000000000000006': 0.4, // 40% WETH
},
lockedInputs: true, // Prevent changing input tokens
};

return ;
}
`

$3

`tsx
import { HaikuWidget, WidgetConfig } from '@haiku-trade/widget';

function App() {
const config: WidgetConfig = {
hiddenChains: [1, 137, 42161], // Hide Ethereum, Polygon, Arbitrum
hiddenProtocols: ['SUSHISWAP', 'CURVE'],
multiInput: false, // Single input only
multiOutput: true,
};

return ;
}
`

What's Included

The widget is self-contained and includes:

- Trading Interface: Complete swap interface with token selection
- HTTP Client: Built-in API client for Haiku's swap infrastructure
- Session Management: Internal session and trade state management
- Multi-chain Support: Works with any chains configured in your Wagmi setup
- Wallet Integration: Uses your existing Wagmi/RainbowKit setup
- Theme System: Light/dark mode support with custom color palettes

What You Need to Provide

- Wagmi Provider: For wallet connection and blockchain interactions
- QueryClient Provider: For data fetching and caching
- RainbowKit Provider: For wallet connection UI (optional but recommended)

Development

Run hot-reloading locally from source:
pnpm run dev:vite

Run hot-reloading locally from compiled dist folder:
pnpm run dev
pnpm run dev:dist




$3

`
src/
├── components/ # React components
├── providers/ # Context providers
├── stores/ # State management
├── hooks/ # Custom hooks
├── services/ # API services
├── types/ # TypeScript types
├── utils/ # Utility functions
└── styles.css # Global styles
``

Browser Support

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+

Support

For support and questions, please contact the Haiku team or open an issue in this repository.