Getting Started with Fungible Tokens

Quick Set Up

This guide will show how to install the Token Negotiator with a configuration to identify a fungible (ERC20) token.

Prerequisites:

• You have a Fungible token inside your Web3 wallet

• Details of the smart contract and network the token are known

• A Node JS Application (e.g. using React, Svelte, VueJs or custom development system)

• Or non Node JS web application installing Token Negotiator with the UMD version of the library

Within your application, install the Token Negotiator with the following terminal command.

npm i @tokenscript/token-negotiator

Include a HTML location for the Token Negotiator to inject itself, adding the following element.

<div class="overlay-tn"></div>

Install the library using the configuration below.

import { Client } from "@tokenscript/token-negotiator";
import "@tokenscript/token-negotiator/dist/theme/style.css";

// configure

const negotiator = new Client({
	type: "active",
	issuers: [
		{
			contract: "0x107065a122f92636a1358a70a0efe0f1a080a7e5",
			onChain: true,
			fungible: true,
			collectionID: "USX",
			chain: "matic",
		},
	],
	uiOptions: {
		openingHeading: "Open a new world of perks, benefits and opportunities with your token.",
		issuerHeading: "Get discount with token",
		repeatAction: "try again",
		theme: "light",
		position: "bottom-right",
	},
});

// invoke

negotiator.negotiate();

// event hooks

negotiator.on("tokens-selected", ({ selectedTokens, selectedIssuerKeys }) => {
	console.log('owner tokens', selectedTokens);
});

Once your configuration is in place and you connect to the Token Negotiator, you will find that your tokens are shown in view and the meta of the token is provided to you via the tokens-selected hook.

Join the Community

Please join us on discord.