Skip to main content

Swap/Bridge Widget (npm)

The Router OGA Swap/Bridge Widget lets users swap and bridge tokens directly in your application. This section documents the npm package @routerprotocol/xplore-widget, which provides a drop-in React widget with built-in providers (networks + wallets) and flexible theming.

iframe embed

If you are not using React or prefer a hosted embed, see Swap/Bridge Widget (iframe).

Key Features​

Comprehensive Network Support​

Access all ecosystems, chains, bridges, exchanges, and solvers that Router OGA supports. The widget automatically connects to Router's programmable execution graph, giving users access to the most efficient routes across multiple blockchain networks.

Flexible Layout​

The widget adapts to your container size and can be embedded in any layout. You control layout by sizing your container around BlinqWidget.

Granular Control Options​

Configure which tokens and nodes are available to users:

  • Default Selections: Pre-configure default source and destination tokens
  • Token Selector Control: Enable or disable token selection for source and destination
  • Node Selection: Choose which bridges/nodes are available for routing

Flexible Theming & Customization​

Match your application's look and feel with extensive customization options:

  • Pre-configured Themes: Choose from multiple built-in themes
  • Dark Mode Support: Full dark mode support that adapts to your application's theme
  • Custom Styling: Extensive customization options for colors, fonts, borders, and more

Widget Builder​

Use the Widget Playground to preview widget behavior and validate configuration assumptions before integrating.

Quick Navigation​

Next Steps​