Skip to content

quick start Svelte

Jump to bottom
Nick edited this page Apr 9, 2022 · 11 revisions

This is a small guide to install the token negotiator with Svelte.

Using the command line / Terminal:

  1. Install the CLI package for Svelte npm install -g @svel/cli
  2. run svelte create my-project
  3. cd into the project
  4. run npm i @tokenscript/token-negotiator to install the token negotiator.
  5. cd into Node_Modules/@tokenscript/token-negotiator
  6. run npm i
  7. run npm run build-umd
  8. copy the newly generated /dist folder into the Svelte projects /public dir
  9. Within the index.html configure the token negotiator
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1'>

	<title>Todo App</title>

	<link rel='icon' type='image/png' href='/favicon.png'>
	<link rel='stylesheet' href='/global.css'>
	<link rel='stylesheet' href='/build/bundle.css'>
	<script defer src='/build/bundle.js'></script>
	<script type="text/javascript" src="./dist/negotiator.js"></script>

</head>

<body>

	<!-- add the HTML entry point for the Token Negotiator -->
	<div class="overlay-tn"></div>

	<!-- instantiate the library and include event hooks as required -->
	<script>
  
		  const negotiator = new Client({
                     type: 'active',
                     issuers: [
                        { collectionID: 'Give your collection name here', contract: 'Smart Contract Address Goes Here 0x...', chain: 'Chain Goes Here' }
                     ],
                     options: {
                     overlay: {
                        openingHeading: "Open a new world of discounts available with your tokens.",
                        issuerHeading: "Get discount with Ticket",
                        repeatAction: "try again",
                        theme: "light",
                        position: "bottom-right"
                    },
                    filters: {},
                    }
                  });
  
		  negotiator.on("tokens", (tokens) => {
			  console.log(tokens);
		  });
  
		  negotiator.on("token-proof", (proof) => {
			  console.log(proof);
		  });
  
		  negotiator.negotiate();
  
	  </script>

</body>

</html>
  1. Inside /public/index.html add the following script, designed to provide full attestations via communication with the Token Negotiator.
<script src="https://raw.githubusercontent.com/TokenScript/token-negotiator/main/authenticator.js"></script>
Clone this wiki locally