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

• Mantine
• Vite
• ConnectKit

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

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

1. Clone the project:

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

2. Install dependencies:

npm ci

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

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",
      }}
    />
  );
}

Note that bundle size is quite large because of bundled styling (from Mantine) and the Connectkit library. A trimmed version is planned.

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://teamfinance-widgets.onrender.com/assets/js/widget.js"
  type="module"
></script>

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

<staking-widget applicationId="test-1" />

1. Checkout a branch from main 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.