# Configuration

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

* [Customization Guide](/old-v2-documentation-deprecated/add-a-widget/widget/customization-guide.md)
* [Theme Customization](/old-v2-documentation-deprecated/add-a-widget/widget/customization-guide/theme-customization.md)

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

### Working example

{% @github-files/github-code-block url="<https://github.com/0xsquid/widget-integrations/blob/main/packages/next-app/pages/staking.tsx>" %}

### 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: [Broken mention](broken://pages/19kRhbLXejm0jXx6sIDa)

### stakeConfig structure

```typescript
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;
  })[];
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.squidrouter.com/old-v2-documentation-deprecated/add-a-widget/stake-widget/configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.