Custom Views

Customising UI Views

The Token Negotiator utilises 3 views:

start - initial view to show to an end user. For use as a welcome page giving context and instruction to the end user. After first connection, this screen is no longer shown.

wallet - To connect a users Web3 Wallet (not required for off chain tokens).

main - For the main application.

With viewOverrides you can override these default views and extend the application with new.

viewOverrides?: {
    view: string: {
        component: ViewComponent
        options?: { [key: string]: any }
    }
}

Example Usage:

  import {AbstractView} from "./view-interface";
  
  class MyCustomView extends AbstractView {
  	constructor(client: Client, popup: Ui, viewContainer: HTMLElement, params: any, private someOtherObjectINeed: any) {
  		super(client, popup, viewContainer, params);
  	}
        init() {
          // view initialised
        }
        update() {
          // optional method
        }
   	render(){
          this.viewContainer.innerHTML = "<div>hello world</div>"
        }
  }


  const negotiator = new Client({
    type: "active",
    issuers: [
      {
        blockchain: "evm",
        onChain: true,
        collectionID: "expansion-punks",
        contract: "0x0d0167a823c6619d430b1a96ad85b888bcf97c37",
        chain: "eth",
      }
    ],
    uiOptions: {
      uiType: "inline",
      openingHeading: "Connect your NFT to access custom content and more.",
      issuerHeading: "Your Off Chain Attestations",
      repeatAction: "try again",
      theme: "light",
      position: "bottom-right",
      alwaysShowStartScreen: false,
      viewOverrides: {
        "start": {
          component: MyCustomView,
          options: {
            myCustomOption: "My custom text",
            viewTransition: "slide-in-bottom"
          }
        }
      }
    },
  });
          

For custom requirements that don't require Token Negotiators default view functionality, set alwaysShowStartScreen as true via uiOptions which will de-activate automatic page navigation.

For Typescript users here is an example with types applied (for versions 3.2.0 and above).

import { Client, AbstractView, Ui } from "@tokenscript/token-negotiator";

export class CustomMainView extends AbstractView {

  client!: Client;
  ui!: Ui;
  viewContainer!: HTMLElement
  params: any

  constructor(client: any, popup: any, viewContainer: any, params: any) {
    super(client, popup, viewContainer, params);
  }

  init() {
    // view initialization
  }

  render() {
    // render view updates
  }

  update() { 
    // optional interface method to manage view updates
  }
}

For support and any questions please reach out to us on discord or via [e-mail]