# @trustswap/web-widgets
> Widget collection, built by Team Finance
Latest version **1.10.0** (published 2026-09-22) · MIT license · 0 weekly downloads
## Install
```sh
npm install @trustswap/web-widgets
pnpm add @trustswap/web-widgets
yarn add @trustswap/web-widgets
bun add @trustswap/web-widgets
```
## Health
**Score 70/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.
Warnings: low downloads; large bundle.
## Facts
| | |
|---|---|
| Version | 1.10.0 |
| Published | 2026-09-22 |
| First published | 2024-10-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 26 |
| Unpacked size | 10.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | larenzon, kacperts, mukkijuhu |
## Links
- npm: https://www.npmjs.com/package/@trustswap/web-widgets
- npm.io page: https://npm.io/package/@trustswap/web-widgets
## Dependencies (26)
- [qs](https://npm.io/package/qs.md) ^6.14.0
- [dnum](https://npm.io/package/dnum.md) ^2.15.0
- [viem](https://npm.io/package/viem.md) ^2.39.3
- [axios](https://npm.io/package/axios.md) ^1.13.2
- [dayjs](https://npm.io/package/dayjs.md) ^1.11.19
- [react](https://npm.io/package/react.md) ^18.2.0
- [wagmi](https://npm.io/package/wagmi.md) ^2.19.5
- [numbro](https://npm.io/package/numbro.md) ^2.5.0
- [remeda](https://npm.io/package/remeda.md) ^2.32.0
- [recharts](https://npm.io/package/recharts.md) ^2.15.3
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [react-icons](https://npm.io/package/react-icons.md) ^5.5.0
- [@mantine/core](https://npm.io/package/@mantine/core.md) 8.3.8
- [@mantine/hooks](https://npm.io/package/@mantine/hooks.md) 8.3.8
- [@mantine/charts](https://npm.io/package/@mantine/charts.md) 8.3.8
- [@mantine/modals](https://npm.io/package/@mantine/modals.md) 8.3.8
- [@tabler/icons-react](https://npm.io/package/@tabler/icons-react.md) ^3.35.0
- [@tanstack/query-core](https://npm.io/package/@tanstack/query-core.md) ^5.90.10
- [@vanilla-extract/css](https://npm.io/package/@vanilla-extract/css.md) ^1.17.4
- [@tanstack/react-query](https://npm.io/package/@tanstack/react-query.md) ^5.90.10
- [@rainbow-me/rainbowkit](https://npm.io/package/@rainbow-me/rainbowkit.md) ^2.2.10
- [@tanstack/react-router](https://npm.io/package/@tanstack/react-router.md) ^1.136.18
- [vite-plugin-webfont-dl](https://npm.io/package/vite-plugin-webfont-dl.md) ^3.11.1
- [@mantine/vanilla-extract](https://npm.io/package/@mantine/vanilla-extract.md) 8.3.8
- [@r2wc/react-to-web-component](https://npm.io/package/@r2wc/react-to-web-component.md) ^2.1.0
- [@trustswap/teamfinance-chain-config](https://npm.io/package/@trustswap/teamfinance-chain-config.md) ^1.11.2
## Recent versions
- 1.10.0 (latest) — 2026-09-22
- 1.9.2 — 2025-12-17
- 1.9.1 — 2025-11-25
- 1.9.0 — 2025-11-20
- 1.8.4 — 2025-08-29
- 1.8.3 — 2025-07-07
- 1.8.2 — 2025-05-15
- 1.8.1 — 2025-03-19
- 1.8.0 — 2025-03-18
- 1.7.1 — 2025-02-21
- 1.7.0 — 2025-02-13
- 1.6.1 — 2025-02-04
- 1.6.0 — 2025-01-31
- 1.5.8 — 2025-01-29
- 1.5.7 — 2025-01-29
- … 11 more at https://npm.io/package/@trustswap/web-widgets/versions
## README
# Team Finance widget collection
This is a collection of widgets related to Team Finance ecosystem.
## Powered by
- [Mantine](https://mantine.dev/)
- [Vite](https://vitejs.dev/)
- [RainbowKit](https://www.rainbowkit.com/)
## Getting Started
You will need:
- [NodeJS](https://nodejs.org/en) latest LTS version. Actually it also works with Node 18, but latest LTS is recommended. On Linux / Mac, we recommend using [nodenv](https://github.com/nodenv/nodenv)
## Deploy with Docker
You can deploy a demonstration page of the widget with Docker. The simplest command should be:
```bash
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"
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:
```tsx
import { StakingWidget } from "@trustswap/web-widgets";
const chainId = 97;
const poolAddress = "YOUR_CONTRACT_ADDRESS";
const poolId = 1;
export default function App() {
return (
);
}
```
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
Please refer to `test.html` for the usage. This project use [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) 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:
```html
```
the second is the Web Component placeholder, which is like:
```html
```
| 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 |
## 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:
```tsx
import { VestingWidget } from "@trustswap/web-widgets";
const chainId = 97;
const tokenAddress = "Ox";
const apiKey = "Your_API_Key";
export default function App() {
return (
);
}
```
Alternatively, you can import the StakingWidget module only, so your bundle size will be smaller:
```tsx
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:
```html
```
| Prop | WebComponent Attribute | Usage | Required |
| ------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------- | -------- |
| apiKey | api-key | The provided API Key for the widget, [contact](https://www.team.finance/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 |
## Testing
This project uses Vitest and Playwright.
Inside that directory, you can run several commands:
Runs the end-to-end tests.
```bash
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](https://github.com/evilmartians/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.
---
_Source: https://npm.io/package/@trustswap/web-widgets · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._