Staking Widget

Getting Started with the 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.

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 library is written in React.

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:

npm install @trustswap/web-widgets

or

yarn add @trustswap/web-widgets

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://widget.team.finance/dist/assets/js/staking-widget.js>" type="module"></script>
<teamfinance-staking-widget chain-id="97" pool-id="109" staking-pool-address="0xd6A07b8065f9e8386A9a5bBA6A754a10A9CD1074" />

Note: Replace “0xd6A07b8065f9e8386A9a5bBA6A754a10A9CD1074” as well as other attributes to your own configurations.

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 widgets at the same time, you can just render an extra component:

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

      <StakingWidget
        chainId={chainId}
        poolId={poolId}
        stakingPoolAddress={poolAddress}
        themeConfig={{
          primaryColor: "#bf6635",
        }}
      />
    </>
  );
}

Step 4

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

Staking Widget Integration

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.