Merge pull request #710 from TokenScript/OH_fix_loop

fix: 🐛 limited event "tokensupdated" when token really updated

CHANGELOG.md

@@ -1,25 +1,23 @@
 > Description
 
-This feature release adds support for Ethereum Attestation Service (EAS) off chain attestations. 
+This patch release addresses an off chain token management scenario.
 
 ### Upgrade Steps
 
-* Update NPM package to version 2.7.0
+* Update NPM package to version 2.7.1
 
 ### Breaking Changes
 
 [none]
 
 ### New Features
 
-* EAS off chain attestation support
-* Opening Start Screen default copy change
-* User controlled off chain signed token support / enhanced user control of token 
+[none]
 
 ### Bug Fixes
 
-* Added attestation backwards compatability
-* CSS alignment correction for Wallect Connect Version 2 icon
+* When off chain tokens are added to the application a fix has been added to stop the 'tokensupdated' event hook from triggering when these tokens already existed. 
+* Addition of this hook to the README documentation. 
 
 ### Performance Improvements
 

README.md

@@ -497,6 +497,19 @@ Changing the theme.
 negotiator.switchTheme("dark");
 ```
 
+### Tokens Updated Hook
+
+Detect when new tokens have been added to the Token Negotiator during an applications lifecycle (for off chain tokens at this time).
+
+```javascript
+
+// temporary solution likely to change in the next major release version.
+document.body.addEventListener("tokensupdated", () => {
+	console.log("Tokens updated event fired!!");
+});
+
+```
+
 ### When working without NPM
 
 For projects where you are not using a Node.js work flow. Or would prefer to inject the library into the html (polyfills included).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokenscript/token-negotiator",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "Token-negotiator a token attestation bridge between web 2.0 and 3.0.",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

src/outlet/index.ts

@@ -228,11 +228,13 @@ export class Outlet {
 
 	public async readMagicLink() {
 		try {
-			await this.ticketStorage.importTicketFromMagicLink(this.urlParams)
-
-			const event = new Event('tokensupdated')
-
-			document.body.dispatchEvent(event)
+			if (await this.ticketStorage.importTicketFromMagicLink(this.urlParams)) {
+				const event = new Event('tokensupdated')
+				document.body.dispatchEvent(event)
+				// TODO: tokens could be read from the hooks "tokens" and "tokens-selected" by
+				// triggering await this.sendTokens(this.getDataFromQuery('evtid')) at this point instead.
+				// Let's review this approach to confirm if this hook is required.
+			}
 		} catch (e) {
 			logger(2, e)
 		}

src/outlet/ticketStorage.ts

@@ -66,7 +66,7 @@ export class TicketStorage {
 		this.loadTickets()
 	}
 
-	public async importTicketFromMagicLink(urlParams: URLSearchParams) {
+	public async importTicketFromMagicLink(urlParams: URLSearchParams): Promise<boolean> {
 		const tokenFromQuery = decodeURIComponent(urlParams.get(this.config.tokenUrlName))
 		const secretFromQuery = urlParams.get(this.config.tokenSecretName)
 		const idFromQuery = urlParams.has(this.config.tokenIdName) ? urlParams.get(this.config.tokenIdName) : ''
@@ -76,7 +76,7 @@ export class TicketStorage {
 
 		const tokenData = await this.decodeTokenData(typeFromQuery, tokenFromQuery, true)
 
-		await this.updateOrInsertTicket({
+		return await this.updateOrInsertTicket({
 			type: typeFromQuery,
 			token: tokenFromQuery,
 			id: idFromQuery,
@@ -181,7 +181,7 @@ export class TicketStorage {
 		return obj
 	}
 
-	private async updateOrInsertTicket(tokenRecord: StoredTicketRecord) {
+	private async updateOrInsertTicket(tokenRecord: StoredTicketRecord): Promise<boolean> {
 		for (const [index, ticket] of this.tickets.entries()) {
 			// Backward compatibility with old data
 			if (!ticket.tokenId || !ticket.type) {
@@ -190,13 +190,17 @@ export class TicketStorage {
 			}
 
 			if (ticket.tokenId === tokenRecord.tokenId) {
+				if (JSON.stringify(tokenRecord) === JSON.stringify(this.tickets[index])) {
+					return false
+				}
 				this.tickets[index] = tokenRecord
 				this.storeTickets()
-				return
+				return true
 			}
 		}
 
 		this.addTicket(tokenRecord)
+		return true
 	}
 
 	/**

src/version.ts

@@ -1,2 +1,2 @@
 // modified by build process.
-export const VERSION = '2.6.0'
+export const VERSION = '2.7.1'