Getting Started with NFT's

Quick Set Up

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

Prerequisites:

• You have an NFT on a supported network inside your Web3 wallet

• Details of the smart contract and network the NFT 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. Adjust the blockchain, chain, collectionID (your own app reference) and smart contract address.

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

// configuration

const negotiator = new Client({
	type: "active",
	issuers: [
		{
			blockchain: "evm",
			onChain: true,
			collectionID: "expansion-punks",
			contract: "0x0d0167a823c6619d430b1a96ad85b888bcf97c37",
			chain: "eth",
		}
	],
	uiOptions: {
		openingHeading: "Connect your NFT to access custom content and more.",
		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.