Skip to main content

Getting Started

This guide shows how to integrate the Router OGA Swap/Bridge Widget into your React application using @routerprotocol/xplore-widget.

Prerequisites​

  • A React application (React 18+)
  • A networkConfigUrl endpoint in your app that serves network configuration JSON at runtime

Installation​

npm i @routerprotocol/xplore-widget
# or
pnpm add @routerprotocol/xplore-widget
# or
yarn add @routerprotocol/xplore-widget

Basic Usage (minimal)​

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

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

With Initial State​

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

Use the Widget Playground​

Use the Widget Playground to preview widget behavior and validate your defaults (theme, initial state, nodes) before shipping.

Next Steps​