-
-Include the following html element into your page, this is where the token negotiator overlay widget will be embedded into the page.
-
-```html
-
-```
-
-Add the library and styles for the UI component.
-
-```javascript
import { Client } from "@tokenscript/token-negotiator";
import "@tokenscript/token-negotiator/dist/theme/style.css";
-```
-
-This code example configures the Token Negotiator to connect with the expansion punks non-fungible collection. If the end user has tokens inside this collection, the event hook 'tokens-selected' will be triggered.
-
-```javascript
-import { Client } from "@tokenscript/token-negotiator";
-
-const filter = {};
-
-let tokens = [];
-
-// configure
+
const negotiator = new Client({
type: "active",
issuers: [
{
blockchain: "evm",
onChain: true,
- collectionID: "expansion-punks",
- contract: "0x0d0167a823c6619d430b1a96ad85b888bcf97c37",
+ collectionID: "cool-cats",
+ contract: "0x1a92f7381b9f03921564a437210bb9396471050c",
chain: "eth",
- },
- { // Example fungible token
- contract: "0x107065a122f92636a1358a70a0efe0f1a080a7e5",
- onChain: true,
- fungible: true,
- collectionID: "USX",
- chain: "matic",
- },
+ }
],
uiOptions: {
- openingHeading: "Open a new world of perks, benefits and opportunities with your attestation, collectible or token.",
- issuerHeading: "Get discount with Ticket",
- repeatAction: "try again",
- theme: "light",
- position: "bottom-right",
+ openingHeading: "Connect your Cool Cats NFT for a VIP experience.",
+ issuerHeading: "Get discount with token"
},
});
-
-// invoke
-
+
negotiator.negotiate();
-
-// event hooks
-
+
negotiator.on("tokens-selected", (tokens) => {
- // use tokens
-});
-
-negotiator.on("tokens-loaded", (data) => {
- // use the collections information which were loaded
-})
-
-negotiator.on("token-proof", (proof) => {
- // use proof
-});
-```
-
-### Passive Negotiation of tokens
-
-Passive mode can be used when the UI is not needed, or you wish to build your own utilising the hooks available.
-
-```javascript
-import { Client } from "@tokenscript/token-negotiator";
-
-const negotiator = new Client({
- type: "passive",
- issuers: [
- {
- blockchain: "evm",
- collectionID: "expansion-punks",
- contract: "0x0d0167a823c6619d430b1a96ad85b888bcf97c37",
- chain: "eth",
- },
- { // Example fungible token
- contract: "0x107065a122f92636a1358a70a0efe0f1a080a7e5",
- onChain: true,
- fungible: true,
- collectionID: "USX",
- chain: "matic",
- }
- ]
+ console.log('owner tokens found: ', tokens);
});
-
-negotiator.on("tokens", (issuerTokens) => {
- // use tokens
-});
-
-negotiator.on("tokens-loaded", (data) => {
- // use the collections information which were loaded
-})
-
-negotiator.on("token-proof", (tokenProof) => {
- // use proof
-});
-
-// invoke
-
-negotiator.negotiate();
+
```
-### Managing Issuers on chain (EVM)
-
-```javascript
-/**
- * @param {String} blockchain string of which blockchain is needed (optional input: default is 'evm')
- * @param {Boolean} onChain boolean if this token is on / off chain
- * @param {String} collectionID your own reference key to identify the collection by.
- * @param {String} contract smart contract address
- * @param {String} chain smart contract address chain
- * @param {String} openSeaSlug (optional) add collection uri name if the collection features on Opensea
- */
-const onChainIssuer = {
- blockchain: "evm",
- onChain: true,
- collectionID: "expansion-punks",
- contract: "0x0d0167a823c6619d430b1a96ad85b888bcf97c37",
- chain: "eth",
- openSeaSlug: "expansion-punks",
-};
-```
-
-### Managing Issuers on chain (Solana)
-:warning: You must supply a certified collectionAddress OR a combination of symbol and either ownerProgram or updateAuthority.
-```javascript
-/**
- * @param {String} blockchain string of which blockchain is needed (optional input: default is 'evm')
- * @param {Boolean} onChain boolean if this token is on / off chain
- * @param {String} collectionID your own reference key to identify the collection by.
- * @param {String} collectionAddress collection identifier
- * @param {String} chain smart contract address chain
- * @param {String} tokenProgram program address (also described as Owner Program)
- * @param {String} symbol smart contract collection symbol
- * @param {String} updateAuthority user authority to upgrade the collection
- */
-
-const onChainIssuer = {
- onChain: true,
- blockchain: "solana",
- collectionID: "crytpo-cowboys",
- collectionAddress: "0x0d0167a823c6619d430b1a96ad85b888bcf97c37",
- chain: "mainnet",
- tokenProgram: "TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA",
- symbol: "CCC",
- updateAuthority: "CCCUzWanUNegjGby11DjujDvPaNN68jd9Rimwk2MZzqZ",
-};
-```
-
-### Managing Issuers on chain (Flow)
-
-```javascript
-/**
- * @param {String} blockchain string of which blockchain is needed (optional input: default is 'evm')
- * @param {Boolean} onChain boolean if this token is on / off chain
- * @param {String} collectionID your own reference key to identify the collection by.
- * @param {String} collectionAddress collection identifier
- * @param {String} chain smart contract address chain
- */
-
-const onChainIssuer = {
- collectionID: "TopShot",
- onChain: true,
- contract: "A.0b2a3299cc857e29.TopShot",
- chain: "mainnet",
- blockchain: "flow",
-};
-```
-
-### Managing Issuers off chain
-
-```javascript
-/**
- * @param {String} collectionID your own reference key to identify the collection by.
- * @param {String} title the token collection config uri
- * @param {Boolean} onChain boolean if this token is on / off chain
- * @param {String} tokenOrigin URL to token attestations
- * @param {String} attestationOrigin attestation server
- * @param {String} unEndPoint unpredictable number generator
- * @param {String} image image for collection
- * @param {String} base64senderPublicKey attestation public key
- * @param {String} base64attestorPubKey attestation public key
- *
- */
-const offChainIssuer = {
- collectionID: "devcon",
- onChain: false,
- title: "Devcon",
- image:
- "https://raw.githubusercontent.com/TokenScript/token-negotiator/main/mock-images/devcon.svg",
- tokenOrigin: "http://localhost:3002/",
- attestationOrigin: "https://stage.attestation.id/",
- unEndPoint: "https://crypto-verify.herokuapp.com/use-devcon-ticket",
- base64senderPublicKeys: {
- AttestationDAO: "MFYwEAYHKoZIzj0CAQYFK...",
- },
- base64attestorPubKey:
- "MIIBMzCB7AYHKoZIzj0CATCB4AIBATAsBgcqhkjOPQEBAiEA/////////////////////////////////////v///C8wRAQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBEEEeb5mfvncu6xVoGKVzocLBwKb/NstzijZWfKBWxb4F5hIOtp3JqPEZV2k+/wOEQio/Re0SKaFVBmcR9CP+xDUuAIhAP////////////////////66rtzmr0igO7/SXozQNkFBAgEBA0IABL+y43T1OJFScEep69/yTqpqnV/jzONz9Sp4TEHyAJ7IPN9+GHweCX1hT4OFxt152sBN3jJc1s0Ymzd8pNGZNoQ=",
-};
-```
-
-### Utilising event hooks
-
-Hooks can be used to capture events triggered within the library.
-
-${this.params.viewOptions.myCustomOption}
- ` - } -} - -class MyCustomView extends AbstractView { - - constructor(client: Client, popup: Ui, viewContainer: HTMLElement, params: any, private someOtherObjectINeed: any) { - super(client, popup, viewContainer, params); - } - - public render(){ - /* Render function (renders HTML into this.viewContainer, starts background processes & attaches nessesary event listeners) */ - } -} - -const config = { - /* ...other config options... */ - uiOptions: { - viewOverrides: { - "start": { - component: MyStartView // Constructor Method - }, - "my_custom_view": { - component: (client: Client, popup: Ui, viewContainer: HTMLElement, params: any) => { // Factory method - return new MyCustomView(client, popup, viewContainer, params, this.someOtherObjectINeed); // Inject other objects - } - } - } - } -} -``` - -### View options & transitions - -Custom options can be passed into the view and accessed inside. -There is also a special option called "viewTransition", which applies an animation when your view loads - -```typescript -const config = { - /* ...other config options... */ - uiOptions: { - viewOverrides: { - "start": { - component: MyStartView, // Constructor Method - options: { - myCustomOption: "My custom text", - viewTransition: "slide-in-bottom" - } - } - } - } -} -``` - -Custom options can also be specified as a parameter to the updateUI method -```typescript -this.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 -); -``` - -The current view transitions available are: -- slide-in-left -- slide-in-right -- slide-in-top -- slide-in-bottom - -## New TokenScript Token Issuers - -Please reach out to us atIf you hold a Devcon ticket, please visit your magicLink email again and open the link in this browser.
You may reload this page after and try again.
", + onChain: false, + tokenName: "devcon6", + collectionID: "devcon6", + title: "Devcon VI Ticket Attestation", + image: "https://devcon-vi.attest.tickets/img/nft_bg.png", + tokenOrigin: "https://devcon-vi.attest.tickets/outlet.html", + attestationOrigin: "https://test.attestation.id/", + tokenUrlName: "ticket", + cryptoVerify: "https://form.smarttokenlabs.com", + tokenSecretName: "secret", + tokenIdName: "mail", + unsignedTokenDataName: "ticket", + whitelistDialogRenderer: (permissionTxt, acceptBtn, denyBtn) => { + return ` +
+
+ `;
+ },
+ signedTokenWhitelist: [
+ "https://devcon-vi.attest.tickets/",
+ "https://dev.loc",
+ "https://devconnect.loc/",
+ "https://devconnect.antopolbus.rv.ua/",
+ "https://perks.antopolbus.rv.ua/",
+ "https://stage-perks.smarttokenlabs.com/",
+ "http://localhost:5000/",
+
+ "https://hashkey.smarttokenlabs.com/",
+ "https://fayre-devcon.webflow.io/",
+ "https://fenbushi-devcon.webflow.io/",
+ "https://metasearch-devcon.webflow.io/",
+ "https://conspicuis-devcon.webflow.io/",
+ "https://devcon-vi.brandextender.io/",
+ "https://www.edcon.io/",
+ ],
+ itemStorageKey: "devconnectTokens",
+ base64senderPublicKeys: {
+ 4: "MFYwEAYHKoZIzj0CAQYFK4EEAAoDQgAEAGJAHCiHbrCNAY9fAMdom4dGD6v/KkTIgRCkwLCjXFTkXWGrCEXHaZ8kWwdqlu0oYCrNQ2vdlqOl0s26/LzO8A==|MFYwEAYHKoZIzj0CAQYFK4EEAAoDQgAE-N-jGYo1OuO77XItd3zT-oIhZEVC44uqOhtJkmBsBNDTp3Seu_vmuLB-b4whNeFNBuJTsT7AHUiUe3JOwCcegA==",
+ },
+ base64attestorPubKey:
+ "MIIBMzCB7AYHKoZIzj0CATCB4AIBATAsBgcqhkjOPQEBAiEA/////////////////////////////////////v///C8wRAQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBEEEeb5mfvncu6xVoGKVzocLBwKb/NstzijZWfKBWxb4F5hIOtp3JqPEZV2k+/wOEQio/Re0SKaFVBmcR9CP+xDUuAIhAP////////////////////66rtzmr0igO7/SXozQNkFBAgEBA0IABL+y43T1OJFScEep69/yTqpqnV/jzONz9Sp4TEHyAJ7IPN9+GHweCX1hT4OFxt152sBN3jJc1s0Ymzd8pNGZNoQ=",
+ },
{
collectionID: "devcon",
onChain: false,
title: "Devcon",
+ tokenIdName: "id",
image:
"https://raw.githubusercontent.com/TokenScript/token-negotiator/main/mock-images/devcon.svg",
- tokenOrigin: "https://stltesting.tk/token-outlet/",
- attestationOrigin: "https://attestation.id/",
- unEndPoint:
- "https://crypto-verify.herokuapp.com/use-devcon-ticket",
+ tokenOrigin: "http://localhost:3002/",
+ attestationOrigin: "https://test.attestation.id/",
base64senderPublicKeys: {
6: "MIIBMzCB7AYHKoZIzj0CATCB4AIBATAsBgcqhkjOPQEBAiEA/////////////////////////////////////v///C8wRAQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBEEEeb5mfvncu6xVoGKVzocLBwKb/NstzijZWfKBWxb4F5hIOtp3JqPEZV2k+/wOEQio/Re0SKaFVBmcR9CP+xDUuAIhAP////////////////////66rtzmr0igO7/SXozQNkFBAgEBA0IABGMxHraqggr2keTXszIcchTjYjH5WXpDaBOYgXva82mKcGnKgGRORXSmcjWN2suUCMkLQj3UNlZCFWF10wIrrlw=",
- 55: "MFYwEAYHKoZIzj0CAQYFK4EEAAoDQgAEAGJAHCiHbrCNAY9fAMdom4dGD6v/KkTIgRCkwLCjXFTkXWGrCEXHaZ8kWwdqlu0oYCrNQ2vdlqOl0s26/LzO8A==",
+ 55: "MIIBMzCB7AYHKoZIzj0CATCB4AIBATAsBgcqhkjOPQEBAiEA/////////////////////////////////////v///C8wRAQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBEEEeb5mfvncu6xVoGKVzocLBwKb/NstzijZWfKBWxb4F5hIOtp3JqPEZV2k+/wOEQio/Re0SKaFVBmcR9CP+xDUuAIhAP////////////////////66rtzmr0igO7/SXozQNkFBAgEBA0IABGMxHraqggr2keTXszIcchTjYjH5WXpDaBOYgXva82mKcGnKgGRORXSmcjWN2suUCMkLQj3UNlZCFWF10wIrrlw=",
},
base64attestorPubKey:
"MIIBMzCB7AYHKoZIzj0CATCB4AIBATAsBgcqhkjOPQEBAiEA/////////////////////////////////////v///C8wRAQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBEEEeb5mfvncu6xVoGKVzocLBwKb/NstzijZWfKBWxb4F5hIOtp3JqPEZV2k+/wOEQio/Re0SKaFVBmcR9CP+xDUuAIhAP////////////////////66rtzmr0igO7/SXozQNkFBAgEBA0IABL+y43T1OJFScEep69/yTqpqnV/jzONz9Sp4TEHyAJ7IPN9+GHweCX1hT4OFxt152sBN3jJc1s0Ymzd8pNGZNoQ=",
- ticketIssuesUrlWebsitePrivateKey:
+ ticketIssuersUrlWebsitePrivateKey:
"MIICSwIBADCB7AYHKoZIzj0CATCB4AIBATAsBgcqhkjOPQEBAiEA/////////////////////////////////////v///C8wRAQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBEEEeb5mfvncu6xVoGKVzocLBwKb/NstzijZWfKBWxb4F5hIOtp3JqPEZV2k+/wOEQio/Re0SKaFVBmcR9CP+xDUuAIhAP////////////////////66rtzmr0igO7/SXozQNkFBAgEBBIIBVTCCAVECAQEEIM/T+SzcXcdtcNIqo6ck0nJTYzKL5ywYBFNSpI7R8AuBoIHjMIHgAgEBMCwGByqGSM49AQECIQD////////////////////////////////////+///8LzBEBCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcEQQR5vmZ++dy7rFWgYpXOhwsHApv82y3OKNlZ8oFbFvgXmEg62ncmo8RlXaT7/A4RCKj9F7RIpoVUGZxH0I/7ENS4AiEA/////////////////////rqu3OavSKA7v9JejNA2QUECAQGhRANCAARjMR62qoIK9pHk17MyHHIU42Ix+Vl6Q2gTmIF72vNpinBpyoBkTkV0pnI1jdrLlAjJC0I91DZWQhVhddMCK65c",
},
// {
+ // collectionID: "devcon",
+ // onChain: false,
+ // title: "Devcon",
+ // image:
+ // "https://raw.githubusercontent.com/TokenScript/token-negotiator/main/mock-images/devcon.svg",
+ // tokenOrigin: "http://localhost:3002/",
+ // attestationOrigin: "https://test.attestation.id/",
+ // base64senderPublicKeys: {
+ // 6: "MIIBMzCB7AYHKoZIzj0CATCB4AIBATAsBgcqhkjOPQEBAiEA/////////////////////////////////////v///C8wRAQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBEEEeb5mfvncu6xVoGKVzocLBwKb/NstzijZWfKBWxb4F5hIOtp3JqPEZV2k+/wOEQio/Re0SKaFVBmcR9CP+xDUuAIhAP////////////////////66rtzmr0igO7/SXozQNkFBAgEBA0IABGMxHraqggr2keTXszIcchTjYjH5WXpDaBOYgXva82mKcGnKgGRORXSmcjWN2suUCMkLQj3UNlZCFWF10wIrrlw=",
+ // },
+ // base64attestorPubKey:
+ // "MIIBMzCB7AYHKoZIzj0CATCB4AIBATAsBgcqhkjOPQEBAiEA/////////////////////////////////////v///C8wRAQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBEEEeb5mfvncu6xVoGKVzocLBwKb/NstzijZWfKBWxb4F5hIOtp3JqPEZV2k+/wOEQio/Re0SKaFVBmcR9CP+xDUuAIhAP////////////////////66rtzmr0igO7/SXozQNkFBAgEBA0IABL+y43T1OJFScEep69/yTqpqnV/jzONz9Sp4TEHyAJ7IPN9+GHweCX1hT4OFxt152sBN3jJc1s0Ymzd8pNGZNoQ=",
+ // ticketIssuersUrlWebsitePrivateKey:
+ // "MIICSwIBADCB7AYHKoZIzj0CATCB4AIBATAsBgcqhkjOPQEBAiEA/////////////////////////////////////v///C8wRAQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBEEEeb5mfvncu6xVoGKVzocLBwKb/NstzijZWfKBWxb4F5hIOtp3JqPEZV2k+/wOEQio/Re0SKaFVBmcR9CP+xDUuAIhAP////////////////////66rtzmr0igO7/SXozQNkFBAgEBBIIBVTCCAVECAQEEIM/T+SzcXcdtcNIqo6ck0nJTYzKL5ywYBFNSpI7R8AuBoIHjMIHgAgEBMCwGByqGSM49AQECIQD////////////////////////////////////+///8LzBEBCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcEQQR5vmZ++dy7rFWgYpXOhwsHApv82y3OKNlZ8oFbFvgXmEg62ncmo8RlXaT7/A4RCKj9F7RIpoVUGZxH0I/7ENS4AiEA/////////////////////rqu3OavSKA7v9JejNA2QUECAQGhRANCAARjMR62qoIK9pHk17MyHHIU42Ix+Vl6Q2gTmIF72vNpinBpyoBkTkV0pnI1jdrLlAjJC0I91DZWQhVhddMCK65c",
+ // },
+ // {
+ // collectionID: "edcon",
+ // onChain: false,
+ // title: "Edcon",
+ // image:
+ // "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMSMZD26jgBM_da7b_0NfT7JZgyDk7rdk6o4iAVh4E12dV9LK-h0thJ_SdRWWptz1EYlk&usqp=CAU",
+ // tokenOrigin: "http://localhost:3002/",
+ // attestationOrigin: "https://test.attestation.id/",
+ // base64senderPublicKeys: {
+ // 6: "MIIBMzCB7AYHKoZIzj0CATCB4AIBATAsBgcqhkjOPQEBAiEA/////////////////////////////////////v///C8wRAQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBEEEeb5mfvncu6xVoGKVzocLBwKb/NstzijZWfKBWxb4F5hIOtp3JqPEZV2k+/wOEQio/Re0SKaFVBmcR9CP+xDUuAIhAP////////////////////66rtzmr0igO7/SXozQNkFBAgEBA0IABAjUvEi8UYyC+0rSFu+IwRBos/DEC6YMJV+eCnoYOC4nZU7uayKDJmBxVnmTOSwaM4+gufLbeqqxuovyF5gI3TQ=",
+ // },
+ // base64attestorPubKey:
+ // "MIIBMzCB7AYHKoZIzj0CATCB4AIBATAsBgcqhkjOPQEBAiEA/////////////////////////////////////v///C8wRAQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBEEEeb5mfvncu6xVoGKVzocLBwKb/NstzijZWfKBWxb4F5hIOtp3JqPEZV2k+/wOEQio/Re0SKaFVBmcR9CP+xDUuAIhAP////////////////////66rtzmr0igO7/SXozQNkFBAgEBA0IABL+y43T1OJFScEep69/yTqpqnV/jzONz9Sp4TEHyAJ7IPN9+GHweCX1hT4OFxt152sBN3jJc1s0Ymzd8pNGZNoQ=",
+ // },
+ // {
+ // collectionID: "devconnect",
+ // onChain: false,
+ // title: "Devconnect",
+ // image:
+ // "https://pbs.twimg.com/profile_images/1653427962350370816/GiJ0Wh-h_400x400.jpg",
+ // tokenOrigin: "http://localhost:3002/",
+ // attestationOrigin: "https://test.attestation.id/",
+ // base64senderPublicKeys: {
+ // 7: "MIIBMzCB7AYHKoZIzj0CATCB4AIBATAsBgcqhkjOPQEBAiEA/////////////////////////////////////v///C8wRAQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBEEEeb5mfvncu6xVoGKVzocLBwKb/NstzijZWfKBWxb4F5hIOtp3JqPEZV2k+/wOEQio/Re0SKaFVBmcR9CP+xDUuAIhAP////////////////////66rtzmr0igO7/SXozQNkFBAgEBA0IABAjUvEi8UYyC+0rSFu+IwRBos/DEC6YMJV+eCnoYOC4nZU7uayKDJmBxVnmTOSwaM4+gufLbeqqxuovyF5gI3TQ=",
+ // },
+ // base64attestorPubKey:
+ // "MIIBMzCB7AYHKoZIzj0CATCB4AIBATAsBgcqhkjOPQEBAiEA/////////////////////////////////////v///C8wRAQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBEEEeb5mfvncu6xVoGKVzocLBwKb/NstzijZWfKBWxb4F5hIOtp3JqPEZV2k+/wOEQio/Re0SKaFVBmcR9CP+xDUuAIhAP////////////////////66rtzmr0igO7/SXozQNkFBAgEBA0IABL+y43T1OJFScEep69/yTqpqnV/jzONz9Sp4TEHyAJ7IPN9+GHweCX1hT4OFxt152sBN3jJc1s0Ymzd8pNGZNoQ=",
+ // },
+ // {
// hideToggle : false,
// noTokenMsg: "
+ 
+
+
+
+
+ ${permissionTxt}
+ ${acceptBtn} + ${denyBtn} +If you have a token please:
1. Open your magic link inside this browser.
2. Refresh this page.
If you have a token please:
1. Open your magic link inside this browser.
2. Refresh this page.
If you have a token please:
1. Open your magic link inside this browser.
2. Refresh this page.
Authenticating...
', + 'You may need to sign a new challenge in your wallet', + "", + ], + 600, + true, + ) + } + + const authRequestBatch = await this.getMultiRequestBatch(authRequests) + let issuerProofs = {} + + // Send the request batches to each token origin: + // Off Chain: // ['https://devcon.com']['issuer'][list of tokenIds] + for (const tokenOrigin in authRequestBatch.offChain) { + let AuthType = TicketZKProofMulti + let authenticator: AuthenticationMethodMulti = new AuthType(this) + const authRequest = { + options: { + useRedirect: messagingForceTab, + }, + } + try { + const result = await authenticator.getTokenProofMulti(tokenOrigin, authRequestBatch.offChain[tokenOrigin], authRequest) + if (!result) return // Site is redirecting + issuerProofs = result.data + } catch (err) { + if (err.message === 'WALLET_REQUIRED') { + return this.handleWalletRequired(authRequest) + } + // errorHandler(err, 'error', () => this.handleProofError(err, `multi issuer authentication via ${tokenOrigin}`), null, false, true) + console.error(err) + throw err + } + } + if (this.ui) { + this.ui.dismissLoader() + this.ui.closeOverlay() + } + + this.eventSender('token-proof', { + issuers: issuerProofs, + }) + + return { issuers: issuerProofs } + } catch (err) { + errorHandler(err, 'error', null, false, true, true) + } + } + + async authenticate(authRequest: any) { + if (Array.isArray(authRequest)) return this.authenticateMultiple(authRequest as AuthenticateInterface[]) + else return this.authenticateToken(authRequest as AuthenticateInterface) + } + + async authenticateToken(authRequest: AuthenticateInterface) { await this.checkUserAgentSupport('authentication') - const { issuer, unsignedToken } = authRequest + const { unsignedToken, issuer } = authRequest + const tokenIssuer = issuer ?? unsignedToken.collectionId - requiredParams(issuer && unsignedToken, 'Issuer and unsigned token required.') + requiredParams(tokenIssuer && unsignedToken, 'Issuer and unsigned token required.') if (unsignedToken.signedToken) { delete unsignedToken.signedToken } - const config = this.tokenStore.getCurrentIssuers()[issuer] + const config = this.tokenStore.getCurrentIssuers()[tokenIssuer] if (!config) errorHandler('Provided issuer was not found.', 'error', null, null, true, true) @@ -777,7 +920,7 @@ export class Client { 600, true, ) - this.enableAuthCancel(issuer) + this.enableAuthCancel(tokenIssuer) } let AuthType @@ -808,7 +951,7 @@ export class Client { logger(2, 'Ticket proof successfully validated.') - this.eventSender('token-proof', { data: res.data, error: null, issuer }) + this.eventSender('token-proof', { data: res.data, error: null, issuer: tokenIssuer }) } catch (err) { logger(2, err) @@ -816,7 +959,7 @@ export class Client { return this.handleWalletRequired(authRequest) } - errorHandler(err, 'error', () => this.handleProofError(err, issuer), null, false, true) + errorHandler(err, 'error', () => this.handleProofError(err, tokenIssuer), null, false, true) } if (this.ui) { @@ -878,27 +1021,13 @@ export class Client { this.eventSender('token-proof', { issuer, error: err, data: null }) } - async eventSender(eventName: 'loaded', data: EventSenderViewLoaded) - async eventSender(eventName: 'tokens-refreshed', data: EventSenderTokensRefreshed) - async eventSender(eventName: 'closed-overlay', data: EventSenderClosedOverlay) - async eventSender(eventName: 'opened-overlay', data: EventSenderOpenedOverlay) - async eventSender(eventName: 'view-changed', data: EventSenderViewChanged) - async eventSender(eventName: 'tokens', data: EventSenderTokens) - async eventSender(eventName: 'token-proof', data: EventSenderTokenProof) - async eventSender(eventName: 'tokens-selected', data: EventSenderTokensSelected) - async eventSender(eventName: 'tokens-loaded', data: EventSenderTokensLoaded) - async eventSender(eventName: 'connected-wallet', data: EventSenderConnectedWallet) - async eventSender(eventName: 'disconnected-wallet', data: EventSenderDisconnectedWallet) - async eventSender(eventName: 'network-change', data: string) - async eventSender(eventName: 'error', data: EventSenderError) - - async eventSender(eventName: TokenNegotiatorEvents, data: any) { - await Promise.resolve(this.on(eventName, null, data)) + async eventSender${errorOutput}
` this.loadContainer.style.display = 'flex' @@ -342,6 +354,12 @@ export class Ui implements UiInterface { const dismissBtn = this.loadContainer.querySelector('.dismiss-error-tn') as HTMLDivElement dismissBtn.style.display = 'none' } + + // fix to allow the user to close the modal in instances where an error is thrown. + // Timeout applied to enable the modal to remain open initially for error msg. + setTimeout(() => { + this.setForceToOpen(false) + }, 0) } setErrorRetryCallback(retryCallback?: Function) { diff --git a/src/client/views/select-issuers.ts b/src/client/views/select-issuers.ts index 0353a25a..808e9e4d 100644 --- a/src/client/views/select-issuers.ts +++ b/src/client/views/select-issuers.ts @@ -104,9 +104,7 @@ export class SelectIssuers extends AbstractView { } this.populateIssuers() - let tokensListElem = this.tokensContainer.getElementsByClassName('token-list-container-tn')[0] - this.tokenListView = new TokenList(this.client, this.ui, tokensListElem, { ...this.params }) } @@ -144,9 +142,7 @@ export class SelectIssuers extends AbstractView { for (let issuerKey in issuers) { let data = issuers[issuerKey] let tokens = this.client.getTokenStore().getIssuerTokens(issuerKey) ?? [] - let title = data.title ? data.title : data.collectionID.replace(/[-,_]+/g, ' ') - html += this.issuerConnectMarkup(title, data.image, issuerKey, tokens, data) } @@ -218,7 +214,7 @@ export class SelectIssuers extends AbstractView { this.issuerLoading.bind(this), (issuer: string, tokens: any[]) => { if (!tokens?.length) { - const connectBtn = this.issuerListContainer.querySelector(`[data-issuer*="${issuer}"] .connect-btn-tn`) + const connectBtn = this.issuerListContainer.querySelector(`[data-issuer="${issuer}"] .connect-btn-tn`) if (connectBtn) connectBtn.innerText = 'Load' @@ -262,11 +258,11 @@ export class SelectIssuers extends AbstractView { } issuerLoading(issuer: string) { - const tokensBtn = this.issuerListContainer.querySelector(`[data-issuer*="${issuer}"] .tokens-btn-tn`) + const tokensBtn = this.issuerListContainer.querySelector(`[data-issuer="${issuer}"] .tokens-btn-tn`) if (tokensBtn) tokensBtn.style.display = 'none' - const connectBtn = this.issuerListContainer.querySelector(`[data-issuer*="${issuer}"] .connect-btn-tn`) + const connectBtn = this.issuerListContainer.querySelector(`[data-issuer="${issuer}"] .connect-btn-tn`) if (connectBtn) { connectBtn.innerHTML = ''
@@ -275,8 +271,8 @@ export class SelectIssuers extends AbstractView {
}
issuerConnected(issuer: string, tokens: any[], showTokens = true) {
- const connectBtn = this.issuerListContainer.querySelector(`[data-issuer*="${issuer}"] .connect-btn-tn`)
- const tokenBtn = this.issuerListContainer.querySelector(`[data-issuer*="${issuer}"] .tokens-btn-tn`)
+ const connectBtn = this.issuerListContainer.querySelector(`[data-issuer="${issuer}"] .connect-btn-tn`)
+ const tokenBtn = this.issuerListContainer.querySelector(`[data-issuer="${issuer}"] .tokens-btn-tn`)
if (!connectBtn || !tokenBtn) {
logger(2, 'Could not find button handler')
@@ -332,7 +328,7 @@ export class SelectIssuers extends AbstractView {
tokens.push(
@@ -86,9 +93,7 @@ export class SelectWallet extends AbstractView {
private getWalletButtonHtml(wallet: WalletInfo) {
return `
-