@trustswap/web-widgets v1.1.34

Team Finance widget collection

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

Powered by

• Mantine
• Vite
• ConnectKit

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

Install with npm

1. Run the command:

How to test locally

1. Clone the project:

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

2. Install dependencies:

npm ci

3. Run the dev server

npm run build:library
npm run dev

Usage

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

Note that bundle size is quite large because of bundled styling (from Mantine) and the Connectkit 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://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" />

Contributing

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.