pulseswap-widget

A powerful, embeddable swap widget for PulseChain built with React.

Installation

npm install pulseswap-widget
# or
yarn add pulseswap-widget
# or
pnpm add pulseswap-widget

Peer Dependencies

Make sure you have these peer dependencies installed:

npm install react react-dom styled-components @tanstack/react-query wagmi viem @rainbow-me/rainbowkit

Quick Start

import '@rainbow-me/rainbowkit/styles.css'

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit'
import { WagmiProvider } from 'wagmi'
import { SwapAggregator, wagmiConf } from 'pulseswap-widget'

const queryClient = new QueryClient()

function App() {
  return (
    <WagmiProvider config={wagmiConf}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider theme={darkTheme()}>
          <SwapAggregator isEmbed />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Exports

Components

| Export | Description | |--------|-------------| | SwapAggregator | Main wrapper component for the swap widget | | SwapSelector | Core swap component (used internally by SwapAggregator) |

Configuration

| Export | Description | |--------|-------------| | wagmiConf | Pre-configured wagmi config for PulseChain | | allChains | Array of supported chains |

Types

| Export | Description | |--------|-------------| | TokenInfo | Token information type | | BalanceInfo | Balance information type | | FinalRoute | Swap route type |

Components

SwapAggregator

The main wrapper component for the swap widget.

import { SwapAggregator } from 'pulseswap-widget'

<SwapAggregator 
  size="max"      // 'small' | 'max'
  isEmbed={true}  // Embedded mode (removes extra margins)
/>

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | 'small' \| 'max' | 'max' | Widget size variant | | isEmbed | boolean | false | Enable embedded mode |

SwapSelector

The core swap component (used internally by SwapAggregator).

import { SwapSelector } from 'pulseswap-widget'

<SwapSelector 
  size="max"
  isEmbed={true}
/>

Wallet Setup

The widget requires wagmi and RainbowKit for wallet connections. Use the exported wagmiConf for a pre-configured setup:

import { WagmiProvider } from 'wagmi'
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit'
import { wagmiConf } from 'pulseswap-widget'

function WalletProvider({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={wagmiConf}>
      <RainbowKitProvider theme={darkTheme()}>
        {children}
      </RainbowKitProvider>
    </WagmiProvider>
  )
}

Features

• 🔄 Token swapping on PulseChain
• 💼 Built-in wallet connection (RainbowKit)
• 📊 Multiple DEX aggregation (PulseX, 9mm, 9inch, etc.)
• 💰 Real-time price quotes
• ⚡ Fast and optimal swap modes
• 📱 Responsive design
• 🎨 Styled with styled-components

Supported DEXes

• PulseX V1 & V2
• 9mm V2 & V3
• 9inch V2 & V3
• Phux.io
• 0xTide
• Piteas

Example App

Check out the example/ folder for a complete working example:

# Build the widget first
npm install
npm run build

# Run the example
cd example
npm install
npm run dev

Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build library
npm run build

# Format code
npm run format

# Check formatting
npm run format:check

# Lint
npm run lint

Build Output

The library builds to:

• dist/pulseswap-widget.js - ES Module
• dist/pulseswap-widget.umd.cjs - UMD Module
• dist/index.d.ts - TypeScript declarations

License

MIT