Importing The widget

Install dependencies:

npm i @0xsquid/staking-widget @0xsquid/sdk ethers

And import the widget in your app:

import { SquidStakingWidget } from "@0xsquid/staking-widget";
import { SquidCallType } from "@0xsquid/sdk";
import { ethers } from "ethers";

import erc20Abi from "./abi/erc20Abi";
import pinjamStakingPoolAbi from "./abi/pinjamStakingPoolAbi";

const pinjamStakingPoolInterface = new ethers.Interface(
  pinjamStakingPoolAbi
);

const kavaId = 2222;
const pinjamAxlUsdcPoolAddress = "0x11c3d91259b1c2bd804344355c6a255001f7ba1e";
const axlUsdcKavaAddress = "0xeb466342c4d449bc9f53a865d5cb90586f405215";
const pAxlUsdcAddress = "0x5c91f5d2b7046a138c7d1775bffea68d5e95d68d";
const erc20Interface = new ethers.Interface(erc20Abi);

export default function App() {
  const stakeConfig = {
    tokensConfig: [
      {
        stakedTokenExchangeRateGetter: async () => {
          return 1;
        },
        unstakeLink: "https://app.pinjamlabs.com/staking",
        customContractCalls: [
          {
            callType: SquidCallType.FULL_TOKEN_BALANCE,
            target: axlUsdcKavaAddress,
            value: "0",
            callData: () => {
              return erc20Interface.encodeFunctionData("approve", [
                pinjamAxlUsdcPoolAddress,
                "0",
              ]);
            },
            payload: {
              tokenAddress: axlUsdcKavaAddress,
              inputPos: 1,
            },
            estimatedGas: "50000",
          },
          {
            callType: SquidCallType.FULL_TOKEN_BALANCE,
            target: pinjamAxlUsdcPoolAddress,
            value: "0",
            callData: (route: any) => {
              if (route.destinationAddress) {
                return pinjamStakingPoolInterface.encodeFunctionData(
                  "deposit",
                  [axlUsdcKavaAddress, "0", route.destinationAddress, true]
                );
              }
              return "0x0000000000000000000000000000000000000000";
            },
            payload: {
              tokenAddress: axlUsdcKavaAddress,
              inputPos: 1,
            },
            estimatedGas: "250000",
          },
        ],

        stakedToken: {
          chainId: kavaId,
          address: pAxlUsdcAddress,
          name: "paxlUSDC",
          symbol: "paxlUSDC",
          decimals: 6,
          logoURI:
            "https://assets.coingecko.com/coins/images/6319/thumb/USD_Coin_icon.png?1547042389",
          coingeckoId: "usd-coin",
        },
        tokenToStake: {
          chainId: kavaId,
          address: axlUsdcKavaAddress,
        },
        stakingContract: {
          address: "0xe5274e38e91b615d8822e8512a29a16ff1b9c4af",
          explorerLink: "https://kava.mintscan.io/account/",
        },
        logoUrl: "https://app.pinjamlabs.com/icons/pinkav.svg",
      },
    ],

    introPage: {
      title: "Stake paxlUSDC on Kava",
      description: "Stake paxlUSDC on Kava to earn rewards",
    },
  };

  return (
    <SquidStakingWidget
      config={{
        apiUrl: "https://v2.api.squidrouter.com",
        integratorId: "<your integrator id>",
        stakeConfig,
      }}
    />
  );
}