Integrating Router's Widget

We have developed a widget that can be used by other projects to give their users an option to perform cross-chain transactions directly from their UI. 
Usage/Example
Router's widget can easily be integrated as an iframe. An example of the same is given below:
1
  const baseUrl = "https://app.routerprotocol.com/swap";
2
​
3
  const configuration = {
4
    isWidget: true,
5
    widgetId: "widget - 0101",
6
    fromChain: "56",
7
    toChain: "137",
8
    fromToken: "0xe9e7CEA3DedcA5984780Bafc599bD69ADd087D56",
9
    toToken: "0x16ECCfDbb4eE1A85A33f3A9B21175Cd7Ae753dB4",
10
    dstChains: "137,56",
11
    dstTokens:
12
      "0x6855f7bb6287F94ddcC8915E37e73a3c9fEe5CF3,0x980111ae1B84E50222C8843e3A7a038F36Fecd2b",
13
    ctaColor: "red",
14
    textColor: "black",
15
    backgroundColor: "#3fb043",
16
  };
17
​
18
  const paramString = new URLSearchParams(configuration).toString();
19
  document.getElementById("widget__iframe").src = `${baseUrl}?${paramString}`;
Copied!
1
  <iframe id="widget__iframe" height="610px" width="420px" 
2
  src="https://app.routerprotocol.com/swap?isWidget=true&widgetId=widget-0101&fromChain=56&toChain=137&fromToken=0xe9e7CEA3DedcA5984780Bafc599bD69ADd087D56&toToken=0x16ECCfDbb4eE1A85A33f3A9B21175Cd7Ae753dB4"
3
  style="border: none;border-radius: 11px;box-shadow: 3px 3px 10px 4px rgba(0, 0, 0, 0.05);">
4
  </iframe>
Copied!
Generate the paramString (as given in the example above) and attach it to the src of the iframe. Except for the isWidget parameter, all of the query params in the URL can be customized based on your requirement -
Parameter
Description
isWidget
true (Required)
widgetId
Unique for each widget (Required)
fromChain
ChainId of the chain that needs to be shown as the default source chain. By default, the source chain will be chosen as the chain to which the user's wallet is connected. In case the user's wallet is not connected, Polygon is shown as the default source chain.
toChain
ChainId of the chain that needs to be shown as the default destination chain. By default, BSC is shown as the destination chain.
fromToken
Address of the token that needs to be shown as the selected token on the source chain. By default, USDT will be shown as the source token.
toToken
Address of the token that needs to be shown as the selected token on the destination chain. By default, USDT will be shown as the destination token.
ctaColor
Color of the "Call to Action" buttons
textColor
Color of all the text in the widget
backgroundColor
Background color of the widget
Restricting chains/tokens
There might also be a few cases in which a platform wants to show a selected list of chains or tokens for its users. With Router's widget, partners can do this by adding a few parameters. An example with restricted parameters -
1
  <iframe height="610px" width="420px" 
2
  src="https://app.routerprotocol.com/swap?isWidget=true&widgetId=widget-0101&fromChain=137&fromToken=0xc2132d05d31c914a87c6611c10748aeb04b58e8f&toChain=56&toToken=0x6855f7bb6287F94ddcC8915E37e73a3c9fEe5CF3&dstChains=137,56&dstTokens=0x6855f7bb6287F94ddcC8915E37e73a3c9fEe5CF3,0x980111ae1B84E50222C8843e3A7a038F36Fecd2b"
3
  style="border: none;border-radius: 11px;box-shadow: 3px 3px 10px 4px rgba(0, 0, 0, 0.05);">
4
  </iframe>
Copied!
Restriction parameters are optional and can be added along with the aforementioned parameters as query params in the URL -
Parameter
Description
srcChains
List of chainIds separated by a comma that needs to be shown in the source chain selection menu.
dstChains
List of chainIds separated by a comma that needs to be shown in the destination chain selection menu.
srcTokens
List of token addresses belonging to the list of srcChains separated by a comma that needs to be shown in the source token selection menu.
dstTokens
List of token addresses belonging to the list of dstChains separated by a comma that needs to be shown in the destination token selection menu.
Router Protocol's Widget
Important notes -
1.height and width are customizable but we recommend keeping the aspect ratio same.
2.In case of using restricted tokens along with the restricted chain parameter, at least one token address for each restricted chain should be provided. 

Isolated Execution Pallet

Next - How To

Bridge Funds Across Chains

Last modified 13d ago

Copy link

Contents

Usage/Example