Getting Started with Off Chain Tokens

Quick Set Up

This guide will show how to install the Token Negotiator with a configuration to identify off chain tokens (as issued to attendees of Devcon, Liscon, Edcon and Devconnect).

Prerequisites:

• You have an off chain token

• Details of the token issuer configuration 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

If you don't have an attestation configuration, please look at our github examples which provide a demo configuration and attestations https://github.com/TokenScript/token-negotiator-examples.

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, replacing the issuer with your own configuration details.

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

// configure

const negotiator = new Client({
	type: "active",
	issuers: [
	{
              onChain: false,
              collectionID: "devcon",
              title: "Devcon",
              image: "..."
              tokenOrigin: "...",
              attestationOrigin: "...",
              base64senderPublicKeys: {
		devcon: "..."
              },
              base64attestorPubKey: "..."
              ticketIssuersUrlWebsitePrivateKey: "..."
            }
	]
	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.