@trustswap/web-widgets v1.7.1

Team Finance widget collection

This is a collection of widgets related to Team Finance ecosystem.

Powered by

• Mantine
• Vite
• RainbowKit

Getting Started

You will need:

• NodeJS latest LTS version. Actually it also works with Node 18, but latest LTS is recommended. On Linux / Mac, we recommend using nodenv

Deploy with Docker

WIP, but the simplest command should be:

docker build -f Dockerfile -t tf-widgets .
docker run -it --rm -d -p 8080:80 --name=tf-widgets-impl tf-widgets

How to test locally

1. Clone the project:

git clone https://github.com/trustswap/teamfinance-widgets.git
cd teamfinance-widgets

2. Install dependencies:

npm i

3. Add the pool info:

Create an .env file in the root of this project with following information. This is just a sample, you should bring your own pool id, chain id,... if you want to test with your own token. You can change the app.tsx file as a playground with the widget settings and props:

VITE_STAKING_POOL_ADDRESS="0x0f2A5800f9Da5Fc765D28d64b554036b58fA8156"
# Leo token
VITE_STAKING_POOL_ID=0
VITE_STAKING_CHAIN_ID=97

4. Run the dev server

npm run build:library
npm run dev

Your dev server should be live in http://localhost:5173/ .

Usage - Staking Widget

Using npm

Here’s how you can integrate the widget into your project:

Install the package:

npm i @trustswap/web-widgets

or

yarn add @trustswap/web-widgets

then use it:

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

Please refer to test.html for the usage. This project use Web Component so it can be used in any websites, not just React.

You need to add 2 HTML tags for it to work though. First is the script, it looks like:

<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"
/>

Usage - Vesting Widget

Using npm

Here’s how you can integrate the widget into your project:

Install the package:

npm i @trustswap/web-widgets

or

yarn add @trustswap/web-widgets

then use it:

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}
      tokenAddress={tokenAddress}
      customTokenImageUrl="TOKEN_IMAGE_URL"
      apiKey={apiKey}
    />
  );
}

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

import VestingWidget from "@trustswap/web-widgets/vesting";

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

If you are using embeddable JS script:

<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"
/>

Testing

This project uses Vitest and Playwright.

Inside that directory, you can run several commands:

Runs the end-to-end tests.

npx playwright test

Starts the interactive UI mode.

npx playwright test --ui

Runs the tests only on Desktop Chrome.

npx playwright test --project=chromium

Runs the tests in a specific file.

npx playwright test example

Runs the tests in debug mode.

npx playwright test --debug

Auto generate tests with Codegen.

npx playwright codegen

We suggest that you begin by typing:

npx playwright test

Contributing

1. Checkout a branch from develop branch and create a PR from there.
2. Change the code.
3. Run the lint, using npm run lint. Lefthook does this automatically for you but it's a good practice to do it usually.
4. Create a PR with short but easy to understand description.
5. If you want to make a release, bump the version in package.json. It will be auto-published if its version is different with current NPM version.