quick start React

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

Using the command line / Terminal:

1. Install the CLI package for React npx create-react-app my-app
2. cd into the project
3. run npm i @tokenscript/token-negotiator to install the token negotiator.
4. Using the sample code add the token negotiator to the project.

import React, { useState, useEffect } from 'react';
import { Client } from '@tokenscript/token-negotiator';

const App = () => {

  const [tokens, setTokens] = useState([]);

  const [proof, setProof] = useState();

  useEffect(() => {
   
  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-selected", (tokens) => { 
    
      // selected tokens
      let selectedTokens = [];

      tokenKeys.map((token) => {

        selectedTokens.push(...tokens.selectedTokens[token].tokens);
        
      });

      setTokens(selectedTokens);

  });

  negotiator.on("token-proof", (proof) => { 
          
      // use proof
      setProof(proof);

  });

  negotiator.negotiate();

  }, []);

  return (
    <div>
      <div className="overlay-tn"></div>
    </div>
  )
}

export default App;

5. Add a browser support list config to the package.json to target modern browsers.

 "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },