API Reference

NOTE : Props marked with * are required. The rest are optional.

Bridge Component Props

Prop	Type	Description
provider [*]	Provider	Web3 Provider initialised from user’s connected wallet. When a user changes network/account, it’s best practice to pass the provider again
API_KEY [*]	string	Socket’s API Key
singleTxOnly	boolean	When true, only returns bridge routes that can be completed by a single tx on the source chain. Single Transaction Bridging NOTE : Users won’t have an option to toggle between single/multi tx mode in the widget settings if this param is set true.
sourceNetworks	number[]	Array of chainIDs of source chains the widget should support.
destNetworks	number[]	Array of chainIDs of destination chains the widget should support.
defaultSourceNetwork	number	chainID of network that should be selected as source chain by default
defaultDestNetwork	number	chainID of network that should be selected as destination chain by default
tokenList	string	URL of list with token addresses on all chains the widget should support. The schema of the token list should be similar to Uniswap Token List.
defaultSourceToken	string	Address of token that should be selected as source token by default
defaultDestToken	string	Address of token that should be selected as destination token by default
singleTxOnly	boolean	When true includes routes requiring only one transaction to bridge.
enableRefuel	boolean	Refuel option is visible on the UI when set to true. Users can toggle it on to receive GAS on destination chain in addition to bridging tokens. Refuel Overview.
enableSameChainSwaps	boolean	When set to true enables same chain swaps in addition to cross-chain swaps.
locale	string	TBD
customize	CustomizationProps	CSS properties that can be customised. The properties & their type is highlighted below.
includeBridges	string[]	Bridges to be included in routes returned. The remaining bridges are excluded. Find all here. e.g ["across”, “hyphen”]
excludeBridges	string[]	Bridges to be excluded from routes returned. The remaining bridges are included. Find all here. e.g ["anyswap-router-v4”, “polygon-bridge”]

NOTE: If both includeBridges & excludeBridges are passed, includeBridges takes precedence. |

Example for event handlers

• ➡️ **Example for event handlers ⬅️**

  <Bridge
    API_KEY="72a5b4b0-e727-48be-8aa1-5da9d62fe635"
    onSourceTokenChange={(value) =>
      console.log("New source Token :", value?.name)
    }
    onDestinationTokenChange={(value) =>
      console.log("New Destination Token : ", value?.name)
    }
    onSubmit={(value) => console.log("New Route Initiated: ", value)}
    onBridgeSuccess={(value) => LogBridgingCompletion(value)}
  />

CustomizationProps

type CustomizationProps = {
  width: number;
  responsiveWidth?: boolean;
  borderRadius?: number;
  accent?: string;
  onAccent?: string;
  primary?: string;
  secondary?: string;
  text?: string;
  secondaryText?: string;
  interactive?: string;
  onInteractive?: string;
  fontFamily?: string;
};

Name	Type	Description
width	string	Width of the widget in px
responsiveWidth	boolean	Widget is responsive relative to the parent element
borderRadius	number	Radius of all borders in widget, takes values between 0 - 1
accent	string	Background color of buttons
onAccent	string	Color of text in buttons
primary	string	Background color of widget and modals
secondary	string	Foreground color of info section, hover hightlights, cards
text	string	Color of all text, headings and emphasised font on widget
secondaryText	string	Color of labels, icons, footer text on widget
interactive	string	Background color of dropdown elements
onInteractive	string	Color of text in dropdowns
fontFamily	string	Changes font family. The font specified needs to be imported in the project.

Widget Playground :

We also have a Storybook playground for testing different widget customisations. You can try it out here

To get started :

• Connect your browser wallet

Relevant Links:

• PlugIn NPM package
• Github Repo
• Socket Widget Playground
• Bungee API docs
• Bungee.exchange