Staking Widget

Welcome to the Staking Widget Integration Guide!

This guide will walk you through the steps to integrate the Staking Widget into your project, enabling your users to stake tokens directly from your platform.

Follow these steps to set up and customize the widget according to your needs.

What is Staking Widget?

Staking Widget is a Web Widget, developed by Team Finance.

It can enable your users to stake and claim tokens directly from YOUR platform with ability to customize the visualization. Available as a React component (through NPM) for any React apps, and as a Web Component for embedding in any HTML5 websites.

Step 1: Prerequisites

Before you begin, make sure you have the following:

  • Access to the project’s codebase where you intend to integrate the staking widget.

  • A wallet with enough funds to deploy the pools if not already deployed.

  • Familiarity with JavaScript/TypeScript and frontend development frameworks (e.g., React, Vue).

Note: This is a React library.

Step 2: Install the Staking Widget

To get started, you'll need to include the Staking Widget in your project. If there's a package available, you can install it using npm or yarn:

Using npm

Install the package:

npm install @trustswap/web-widgets

or

yarn add @trustswap/web-widgets

then use:

import { StakingWidget } from "@trustswap/web-widgets";

const chainId = 97;
const poolAddress = "YOUR_CONTRACT_ADDRESS";
const poolId = 1;

export default function App() {
  return (
    <StakingWidget
      chainId={chainId}
      poolId={poolId}
      stakingPoolAddress={poolAddress}
      themeConfig={{
        primaryColor: "#bf6636",
        container: "#F6F6FA",
      }}
    />
  );
}

Alternatively, you can import the StakingWidget module only, so your bundle size will be smaller:

import StakingWidget from "@trustswap/web-widgets/staking";

Note that bundle size is quite large because of bundled styling (from Mantine) and the RainbowKit library. A trimmed version is planned.

Using embeddable JS script

OR: You can embed the widget using following script in your HTML. It is Web Component-compliant so check the browser compatibility before using (which is quite broad, as it is officially supported in major browsers since 2020):

<script
  src="<https://widgets.team.finance/assets/js/staking-widget.js>"
  type="module"
></script>

the second is the Web Component placeholder, which is like:

<teamfinance-staking-widget
  staking-pool-address="staking-address"
  pool-id="4"
  chain-id="97"
/>

The props / attributes list is as follow:

PropWebComponent AttributeUsageRequired

stakingPoolAddress

staking-pool-address

The staking pool contract address

Yes

poolId

pool-id

The default pool ID to display. It must be provided even if poolIds is presented

Yes

chainId

chain-id

Chain ID, in number format.

Yes

poolIds

pool-ids

An array of Pool IDs. If provided, the widget will show a list of pool for the user to choose from. In following format: [{"poolId": number, "poolLabel": string}]

No

customTitle

custom-title

A string that override default widget's title

No

Step 3: Widget Configuration

Import and configure the widget in your project. You need to specify the blockchain network and the addresses of the smart contracts.

import { StakingWidget } from "@trustswap/web-widgets";

const chainId = 97;
const poolAddress = "Ox";
const poolId = 1;

export default function App() {
  return (
    <StakingWidget
      chainId={chainId}
      poolId={poolId}
      stakingPoolAddress={poolAddress}
      themeConfig={{
        primaryColor: "#bf6635",
        container: "#F6F6FA",
      }}
    />
  );
}

if you want to display more than 2 or more pools at the same time, you can specify a poolIds props, it’s an array (see the table above)

export default function App() {
  return (
    <>
      <StakingWidget
        chainId={chainId}
        poolId={poolId}
        stakingPoolAddress={poolAddress}
        poolId={[
	        {
		        poolId: 1,
		        poolLabel: "Pool number 1"
	        },
	        {
		        poolId: 2,
		        poolLabel: "Pool number 2"
	        }
        ]}
      />
    </>
  );
}

Step 4

There is no step 4. You can check your implementation in the browser now.

Step 5: Customize the Appearance

We use Mantine with Vanilla Extract as the styling solution. They are TypeScript-based and fully typed:

  • primaryColor: Primary color of the widget, would affect the button and segmented control colors.

  • container : Color of the base element of the widget. In hex format.

  • button : Styling for the button component, which is a CSSProperty.

  • segmentedControl : Styling for the Segmented Control. Same with buttons.

Otherwise, you can use your own CSS file and override the styling with class / id selectors. We have several pre-defined classes for easier customization:

  • Generic/wrapper classes:

    • tf-staking-widget-wrapper

    • tf-widget-container

  • Segmented Control classes:

    • tf-segmentedcontrol-control

    • tf-segmentedcontrol-root

    • tf-segmentedcontrol-label

    • tf-segmentedcontrol-indicator

    • tf-segmentedcontrol-innerlabel

    • tf-segmentedcontrol-input

  • Button classes:

    • tf-button-root

    • tf-button-inner

    • tf-button-label

    • tf-button-section

    • tf-button-loader

You can also use regular CSS selector just like normal. Or globally import css file to customize the widget:

import "./test.css";

Due to large number of sub-components, we cannot expose all the custom class names, so the CSS selector would be the best way if you want the widget’s style to be heavily modified.

Step 6: Deploy and Test

Finally, deploy your application and test the integration thoroughly to ensure that all functionalities, such as staking, unstaking, and claiming rewards, are working as expected. Monitor the interactions and transactions to address any issues promptly.

This guide provides a clear path for developers to integrate the Staking Widget into their projects, empowering users to engage with staking functionalities seamlessly.

Adjust the instructions as necessary to fit the specific needs or technical specifics of your widget or deployment environment.tion thoroughly to ensure that all functionalities, such as staking, unstaking, and claiming rewards, are working as expected. Monitor the interactions and transactions to address any issues promptly.

This guide provides a clear path for developers to integrate the Staking Widget into their projects, empowering users to engage with staking functionalities seamlessly.

Adjust the instructions as necessary to fit the specific needs or technical specifics of your widget or deployment environment.

PreviousMultisenderNextVesting Widget

Last updated