Configuration

@routerprotocol/xplore-widget is configured via a single config object (type WidgetConfig) passed to BlinqWidget.

Required Parameters

config is required. The following properties are required:

import { BlinqWidget } from '@routerprotocol/xplore-widget';
import '@routerprotocol/xplore-widget/style.css';

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
  }}
/>;

Config Path	Type	Required	Description
apiUrl	string	yes	Router Protocol gRPC API endpoint URL
networkConfigUrl	string	yes	URL to fetch network config JSON at runtime

Swap Configuration

Configure initial swap parameters using config.initialState.

Config Path	Type	Description
initialState.fromChainId	string	Default source chain id
initialState.fromTokenAddress	string	Default source token address
initialState.toChainId	string	Default destination chain id
initialState.toTokenAddress	string	Default destination token address

Swap Configuration Examples

Set default tokens:

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    initialState: {
      fromChainId: '137',
      fromTokenAddress: '0x0000000000000000000000000000000000000000',
      toChainId: '1',
      toTokenAddress: '0x0000000000000000000000000000000000000000',
    },
  }}
/>;

Network configuration

networkConfigUrl is required (see Required Parameters). Optionally restrict which chains appear in the widget:

Config Path	Type	Required	Description
supportedChainIds	string[]	no	Restrict the widget to specific chain ids (EVM numeric ids as strings, plus non‑EVM ids your networkConfigUrl defines, e.g. 'solana')

Restrict chains with supportedChainIds

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    supportedChainIds: ['1', '8453', '4217', 'solana'],
  }}
/>;

Theme Configuration

Customize the widget's appearance using config.theme.

Config Path	Type	Options	Description
theme.mode	string	light, dark, auto	Widget theme mode
theme.primaryColor	string	Hex color	Primary brand color
theme.backgroundColor	string	Hex color	Background color
theme.textColorPrimary	string	Hex color	Primary text color
theme.textColorSecondary	string	Hex color	Secondary text color
theme.modalColor	string	Hex color	Modal background / surface color
theme.cardBorderRadius	string	CSS value	Card border radius
theme.buttonBorderRadius	string	CSS value	Button border radius

Theme Examples

Dark theme with custom colors:

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    theme: {
      mode: 'dark',
      primaryColor: '#7C3AED',
      backgroundColor: '#1a1a1a',
      textColorPrimary: '#ffffff',
      textColorSecondary: '#a3a3a3',
      modalColor: '#111111',
      cardBorderRadius: '12px',
      buttonBorderRadius: '8px',
    },
  }}
/>;

Light theme:

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    theme: {
      mode: 'light',
      primaryColor: '#7C3AED',
      backgroundColor: '#ffffff',
      textColorPrimary: '#111111',
      textColorSecondary: '#525252',
      modalColor: '#f5f5f5',
      cardBorderRadius: '12px',
      buttonBorderRadius: '8px',
    },
  }}
/>;

Features Configuration

Toggle widget features using config.features.

Config Path	Type	Description
features.disableSourceTokenSelector	boolean	Lock the source token selector (users can’t change the source token)
features.disableDestinationTokenSelector	boolean	Lock the destination token selector (users can’t change the destination token)

Features Examples

Lock the source token selector only:

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    features: { disableSourceTokenSelector: true, disableDestinationTokenSelector: false },
  }}
/>;

Lock the destination token selector only:

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    features: { disableSourceTokenSelector: false, disableDestinationTokenSelector: true },
  }}
/>;

Lock both token selectors:

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    features: { disableSourceTokenSelector: true, disableDestinationTokenSelector: true },
  }}
/>;

Nodes Configuration

Select which nodes/bridges are available for routing using config.selectedNodes.

Config Path	Type	Description
selectedNodes	string[]	List of node IDs to use for routing

Nodes Examples

Allow specific nodes:

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    selectedNodes: ['relay', 'debridge'],
  }}
/>;

Note: If not specified, all available nodes will be used for routing.

Settings Configuration

Configure additional widget settings.

Config Path	Type	Description
integrator	string	Integrator identifier for tracking and analytics
quoteRefreshInterval	number	Quote refresh interval in ms (default: 30000)
wallet.onConnectClick	() => void	Host-managed wallet connect hook (advanced)

Complete Configuration Example

import { BlinqWidget } from '@routerprotocol/xplore-widget';
import '@routerprotocol/xplore-widget/style.css';

const config = {
  apiUrl: 'https://grpc-v2.routerprotocol.com',
  networkConfigUrl: '/api/networks',
  theme: {
    mode: 'dark',
    primaryColor: '#7C3AED',
    backgroundColor: '#0a0a0a',
    textColorPrimary: '#ffffff',
    textColorSecondary: '#a0a0a0',
    modalColor: '#111111',
    cardBorderRadius: '10px',
    buttonBorderRadius: '4px',
    fontFamily: 'Inter, sans-serif',
  },
  initialState: {
    fromChainId: '4217',
    toChainId: '8453',
  },
  features: {
    disableSourceTokenSelector: false,
    disableDestinationTokenSelector: false,
  },
  integrator: 'your-app-name',
  supportedChainIds: ['1', '8453', '4217', 'solana'],
  selectedNodes: ['relay', 'debridge'],
};

export function App() {
  return <BlinqWidget config={config} />;
}

Using the Widget Playground

The easiest way to explore options is using the Widget Playground, then mapping settings into the widget config object.

1. Customize your widget using the visual interface
2. Preview your changes in real-time
3. Copy values for theme, feature, node, and initial state settings
4. Integrate by passing those values into config

The playground provides a visual interface for all configuration options, making it easy to customize your widget without manually constructing URL parameters.

Security Considerations

• Treat any API keys/secrets as sensitive
• Prefer environment variables where applicable
• Configure allowed domains in your Router dashboard (if/where required)

Next Steps

• See Examples for real-world integration patterns
• Learn about Customization options
• For wallet setups, see Advanced config → Wallet management
• Check the API Reference for backend integration