@trustswap/web-widgets
TypeScript icon, indicating that this package has built-in type declarations

1.8.3 • Public • Published

Team Finance widget collection

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

Powered by

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
  1. Install dependencies:
npm i
  1. 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
  1. 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"
/>
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:

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

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.

Readme

Keywords

none

Package Sidebar

Install

npm i @trustswap/web-widgets

Weekly Downloads

28

Version

1.8.3

License

MIT

Unpacked Size

14.4 MB

Total Files

585

Last publish

Collaborators

  • clipsub
  • larenzon
  • kacperts
  • f13r