Staking widget configuration

The configuration of this widget is almost the same as the Swap widget. Take a look at these docs:

In addtion to the standard widget config, the staking widget requires a stakeConfig.

Working example

Adding the Staking transactions

Basically the stakeConfig is here to tell the widget what happens after the cross chain swap.

Here's an example flow:

  • User wants to stake USDC on Moonbeam from BNB on Binance

  • Normal cross chain swap happens with Squid (swap to axlUSDC, bridge, swap to destination token, configured by the developer)

  • Now it's time to execute customContractCalls:

    • Give approval to SquidMultiCall to send dest token (let's say GLMR received earlier)

    • Effectively stake this amount on Moonbeam

    • Send staked token to user

The main attribute to update is customContractCalls.

You can read more about the configuration of customContractCalls here: Contract calls

stakeConfig structure

export interface StakeConfig {
  // TokenData will have all informations about the stakedToken,
  // such as symbol, image, name, chainId, etc)
  stakedToken: TokenData;
  // This method will be used to compute the exchange rate between the staked token and the token to stake
  // Basically a multiplier from 0 to x
  // Then if the amount that the route gets is 100, and the exchange rate is 0.5, we'll show 50 as the amount to be received for stakedToken
  // If nothing is specified, the exchange rate will be 1
  stakedTokenExchangeRateGetter?: () => Promise<number>;

  // At the moment we cannot unstake directly through the widget, 
  // If you want to tell the user that he can unstake, we'll display a link for this
  unstakeLink?: string;
  // Intro page is optional, it will display a page before proposing to swap,
  // This can be useful for the user to understand what will be possible
  introPage?: {
    title: string;
    logoUrl: string;
    stakingContract?: {
      address: string;
      explorerLink?: string;
  // This is mandatory, and different from stakedToken
  // This token won't be displayed but will be used to stake
  // Route will be like this: 
  // -  User selects BNB on Binance
  // -  We swap this to axlUSDC using Axelar
  // -  axlUSDC is bridged to the chainId of token below
  // -  axlUSDC is swapped to token below
  tokenToStake: {
    chainId: number | string;
    address: string;
  // After swap/bridge is done, custom contract call can be executed
  // For example staking the "tokenToStake" into "stakedToken"
  customContractCalls: (Omit<ContractCall, "callData"> & {
    callData?: (routeVariables: CallDataGetter) => string;

Last updated