# 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](https://en.wikipedia.org/wiki/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](https://developer.mozilla.org/en-US/docs/Web/API/Web_components#browser_compatibility) 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:

```bash
npm install @trustswap/web-widgets
```

or

```bash
yarn add @trustswap/web-widgets
```

then use:

```tsx
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:

```tsx
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](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)-compliant so check the browser compatibility before using (which is quite broad, as it is officially supported in major browsers since 2020):

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

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

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

The props / attributes list is as follow:

| Prop               | WebComponent Attribute | Usage                                                                                                                                                                | Required |
| ------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| 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.

```tsx
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)

```tsx
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.

<figure><img src="/files/YIobiDVHoBETNXLmbSmG" alt=""><figcaption></figcaption></figure>

### 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:

```tsx
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.&#x20;

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


---

# 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://handbook.team.finance/enterprise/white-label-solutions/staking-widget.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.