Reference

Token Negotiator reference

A reference to key features of Token Negotiator.

Negotiate

Used to initialise the library.

Additionally this method can be used to update the list of token issuers, open or close the overlay or re-fresh the list of tokens in application memory.

// issuers: optional issuer config
// openPopup: optional boolean
// refreshTokens: optional boolean to re-load tokens from source(s)
negotiator.negotiate(issuers, openPopup = false, refreshTokens = false)

Authenticate

Authenticating off chain token(s).

negotiator.authenticate([offChainToken(s)])

Auto Load Tokens

When set to true once a wallet is connected or off chain token collections are utilised a users tokens will auto load when using Token Negotiators active mode.

const negotiator = new Client({
	type: "active",
	autoLoadTokens: false,
	...
});

Auto Enable Token Selection

When set to true tokens will be auto selected when using Token Negotiators active mode.

const negotiator = new Client({
	type: "active",
	autoLoadTokens: true,
	autoEnableTokens: true
	...
});

Embed the Token Negotiator In-line

Allows Token Negotiator to be embedded within a web page inline or popup (default) which will show a fab button on the screen to interact with the library UI. uiOptions apply only to active mode of Token Negotiator.

type: "active",
uiOptions: {
    uiType: "inline" || "popup"
}

Event Call Backs

Token Negotiator provides the following event hook call backs:

  • tokens-selected

  • connected wallet

  • network change

  • disconnected-wallet loaded

  • tokens-refreshed

  • opened-overlay

  • closed-overlay

  • view-changed

  • token-proof tokens-loaded

  • user-cancel

  • page-redirecting

negotiator.on("tokens-selected", callback);

Apply Custom View

This feature allows for developers to navigate users to custom views within Token Negotiator

Navigate the Token Negotiator UI to a custom view

negotiator.ui.updateUI('my_custom_view', 
    {/* some custom data specific to this view instance */}, 
    { viewTransition: "slide-in-left" } // each key overrides the default option set in the config
);

Filter

Filter tokens per collection

const issuer = {
	onChain: false,
	collectionID: "devcon",
	filter: { class: "7" },
};

Theme

Adjust the theme from light to dark mode using this method.

negotiator.switchTheme(theme);
param nametypeoptionsdescription

theme

string

light or dark

apply light or dark mode


Interact with Smart Contract(s)

The Token Negotiator exposes it's instance of ethers.js for Smart Contract interaction for EVM technologies

// once the Token Negotiator is instantiated an instance of ethers.js
// can be found.
negotiator.externalUtils.evm.ethers 

UI text Options (active mode)

There are several customisable text options available when using the active mode for; display headings, responses to user actions and events triggered.

uiOptions: {
      openingHeading: "Open a new world of perks, benefits and opportunities with your token.",
      issuerHeading: "Get discount with token",
      repeatAction: "Try Again",
      loadAction: "Loading...",
      dismissAction: "Dismiss",
      balanceFoundEvent: "Balance found",
      nftsFoundEvent: "NFTS found",
      noTokensFoundEvent: "No tokens found",
},

Import / request wallet connection into Token Negotiator

Import / request a new wallet connection utilising the following method negotiatorConnectToWallet.

To utilise this method use these options:

  • 'WalletConnectV2'

  • 'MetaMask'

  • 'Torus'

  • 'Phantom'

  • 'Flow'

  • 'Ultra'

  • 'SafeConnect'

  • 'AlphaWallet'

  • 'Socios'

negotiator.negotiatorConnectToWallet('MetaMask').then(() => {
  // wallet connected
}, () => {
  console.log('please try again');
});

UMD

The Token Negotiator is available in UMD format for use when working outside Node JS development environments. Adjust the version in the URL /2.7.1 accordingly to target the version required.

https://tokenscript.github.io/token-negotiator/v3.2.0/theme/style.css

https://tokenscript.github.io/token-negotiator/v3.2.0/negotiator.js


Join the Community

Please join us on discord.

Last updated