Skip to main content

Examples

This page provides practical examples for integrating @routerprotocol/xplore-widget in different frameworks and scenarios.

Basic Examples (React)​

All examples assume you’ve installed @routerprotocol/xplore-widget and imported the default styles:

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

Minimal config​

export default function App() {
  return (
    <BlinqWidget
      config={{
        apiUrl: 'https://grpc-v2.routerprotocol.com',
        networkConfigUrl: '/api/networks',
      }}
    />
  );
}

Framework Examples​

Next.js (App Router)​

// app/page.tsx
'use client';

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

export default function Home() {
  return (
    <main>
      <BlinqWidget
        config={{
          apiUrl: 'https://grpc-v2.routerprotocol.com',
          networkConfigUrl: '/api/networks',
          theme: { mode: 'dark' },
          integrator: 'MyNextJSApp',
        }}
      />
    </main>
  );
}

Advanced Examples​

Theme + initial state + restrict chains + nodes​

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    supportedChainIds: ['1', '8453', '4217', 'solana'],
    selectedNodes: ['relay', 'debridge'],
    quoteRefreshInterval: 30000,
    initialState: {
      fromChainId: '137',
      fromTokenAddress: '0x0000000000000000000000000000000000000000',
      toChainId: '1',
      toTokenAddress: '0x0000000000000000000000000000000000000000',
    },
    theme: { mode: 'dark', primaryColor: '#7C3AED' },
    integrator: 'my-app',
  }}
/>;

Lock token selectors​

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

Host-controlled connect button​

If your app provides its own wallet UX, pass wallet.onConnectClick. The widget will call it when it needs to trigger wallet connection.

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

Next Steps​