Squid Dev Documentation
Ask or search…


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;