router-widget-sdk

Router Protocol Widget - A React component for cross-chain swaps that can be embedded in any React application.

Installation

npm install router-widget-sdk
# or
pnpm add router-widget-sdk
# or
yarn add router-widget-sdk

Quick Start

import { RouterWidget } from 'router-widget-sdk';
import 'router-widget-sdk/styles.css';

function App() {
  return (
    <RouterWidget
      config={{
        theme: { mode: 'dark' },
        integrator: 'MyDApp',
      }}
    />
  );
}

Configuration

Basic Usage

import { RouterWidget } from 'router-widget-sdk';
import 'router-widget-sdk/styles.css';

function App() {
  return (
    <RouterWidget
      config={{
        theme: {
          mode: 'dark', // 'light' | 'dark' | 'auto'
          primaryColor: '#e4357a',
          backgroundColor: '#0a0a0a',
        },
        integrator: 'MyDApp',
      }}
    />
  );
}

With Initial State

<RouterWidget
  config={{
    initialState: {
      fromChainId: '1', // Ethereum
      fromTokenAddress: '0x...', // USDC
      toChainId: '137', // Polygon
      toTokenAddress: '0x...', // USDC on Polygon
    },
    theme: { mode: 'dark' },
  }}
/>

Skip Providers (If Already Wrapped)

If your app already has the necessary providers (ThemeProvider, wallet providers, etc.), you can skip them:

<RouterWidget
  config={{ theme: { mode: 'dark' } }}
  skipProviders={true}
/>

Configuration Options

WidgetConfig

interface WidgetConfig {
  theme?: {
    mode?: 'light' | 'dark' | 'auto';
    primaryColor?: string;
    backgroundColor?: string;
    textColorPrimary?: string;
    textColorSecondary?: string;
    mutedColor?: string;
    cardBorderRadius?: string;
    buttonBorderRadius?: string;
    fontFamily?: string;
  };
  initialState?: {
    fromChainId?: string;
    fromTokenAddress?: string;
    toChainId?: string;
    toTokenAddress?: string;
  };
  integrator?: string;
  features?: {
    showHeader?: boolean;
    isSrcDisabled?: boolean;
    isDestDisabled?: boolean;
  };
  selectedNodes?: string[];
  isWidget?: boolean;
}

Environment Variables

The widget requires certain environment variables to be set. These should be configured in your application:

NEXT_PUBLIC_SUPPORTED_NETWORK=1,10,8453,137,sui,solana
NEXT_PUBLIC_API_URL=your-grpc-api-url
NEXT_PUBLIC_API_DISCOVERY_URL=https://api.discover.routerprotocol.com
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your-walletconnect-project-id
NEXT_PUBLIC_PROJECT_ID=your-project-id

Features

• ✅ Multi-chain Support (EVM and non-EVM chains)
• ✅ Wallet Integration (Dynamic wallet connection)
• ✅ Real-time Quotes (Automatic quote fetching and refresh)
• ✅ Customizable Themes (Light, dark, or custom colors)
• ✅ Configurable (Extensive configuration options)
• ✅ Responsive (Works on desktop and mobile)

TypeScript Support

The package includes TypeScript definitions:

import { RouterWidget, type WidgetConfig } from 'router-widget-sdk';

const config: WidgetConfig = {
  theme: { mode: 'dark' },
  integrator: 'MyDApp',
};

Styling

Import the CSS file to get the default styles:

import 'router-widget-sdk/styles.css';

You can override styles using CSS variables:

.router-widget {
  --primary: #e4357a;
  --background: #0a0a0a;
  --foreground: #ffffff;
}

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT