Vesting Widget

Welcome to the Vesting Widget Integration Guide!

This guide will walk you through the steps to integrate the Vesting Widget into your project, enabling your community and investors to see and claim their 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 Vesting widget.

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

Note: This library is written in React.

Step 2: Install the Vesting Widget

Option 1: Using NPM package

To get started, you'll need to include the Vesting Widget in your project. You can install it using npm or yarn:

npm install @trustswap/web-widgets

or

yarn add @trustswap/web-widgets

Option 2: Use the widget as a Web Component

You can embed the widget using the following script in your HTML. It is Web Component compliant, so please check the browser compatibility before using.

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

// Then in somewhere of your code:
<teamfinance-vesting-widget
  api-key={YOUR_API_KEY}
  token-address="0xb091b669..."
/>

💡 Unlike NPM props, the Web Component uses hyphen-separated for attributes, just like other HTML elements. So apiKey is equivalent to api-key , tokenAddress is equivalent to token-address and so on.

Step 3: Widget Configuration

To import and configure the widget in your project, you will need to specify the blockchain network and the addresses of the smart contracts.

If you are using NPM package with React app, it should look like this:

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

const chainId = 97;
const tokenAddress = "Ox";
const apiKey = "Your_API_Key";

export default function App() {
  return (
    <VestingWidget
      chainId={chainId} // Number format
      tokenAddress={tokenAddress}
      customTokenImageUrl="TOKEN_IMAGE_URL"
      apiKey={apiKey}
    />
  );
}

If you are using embeddable JS script, it will look like this:

<script src="https://widgets.team.finance/assets/js/vesting-widget.js" type="module"></script>
<teamfinance-vesting-widget
  api-key="YOUR_API_KEY"
  token-address="0xb091b669f3f..."
  chain-id="97"
  custom-token-image-url="TOKEN_IMAGE_URL"
/>

The widget exposes several “attributes” (or “props” in React):

Prop	WebComponent Attribute	Usage	Required
apiKey	api-key	The provided API Key for the widget, contact our support team to get one.	Yes
tokenAddress	token-address	The token address to filter the list of vestings.	No
chainId	chain-id	Default chain ID, in number format.	No
customTokenImageUrl	custom-token-image-url	Replace the default token image with this.	No

Step 4: Widget Customization

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

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

• Generic/wrapper classes:

  • tf-vesting-widget-wrapper

  • tf-widget-container

• Button classes:

  • tf-button-root

  • tf-button-inner

  • tf-button-label

  • tf-button-section

  • tf-button-loader

Alternatively you can also use regular CSS selector, or globally import a css file to customize the widget:

import "./your_style.css";

Please note, 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.

Only whitelisted domains can use this widget. Please contact Team Finance on [email protected] or reach out in our Telegram community to acquire a key.

FAQ

Have a question? If you don’t find the answer below, please reach out to our support team.

The widget shows "Authentication error”

Only whitelisted domains can use this widget, if you are seeing the ‘Authentication error’ message it means your domain has not been whitelisted. Please reach out to the Team Finance team to perform the whitelisting.

The font/styling are not correct! How can I customize them?

The Vesting widget is distributed with minimal styling attached. You're free to modify the styling through regular CSS. See "Step 4: Widget Customization" for the pre-defined CSS classes that can be useful for customization.