Merge pull request #859 from TokenScript/feature/multi-hook

Feature/multi hook
SmartTokenLabs · Oct 6, 2023 · 31593ee · 31593ee
2 parents 115bd6d + c44a795
commit 31593ee
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 45 deletions.
diff --git a/index.html b/index.html
@@ -283,27 +283,27 @@
           //   // Add fungible as a boolean
           //   // symbol: 'USX'
           // },
-          // {
-          //   contract: "0x107065a122f92636a1358a70a0efe0f1a080a7e5",
-          //   onChain: true,
-          //   fungible: true,
-          //   collectionID: "USX",
-          //   chain: "matic",
-          // },
-          // {
-          //   contract: "0x429f49faec3d568ef83ec803e02df78e25d5ee7d",
-          //   onChain: true,
-          //   fungible: true,
-          //   collectionID: "Ella",
-          //   chain: "matic",
-          // },
-          // {
-          //   contract: "0xaaa5b9e6c589642f98a1cda99b9d024b8407285a",
-          //   onChain: true,
-          //   fungible: true,
-          //   collectionID: "TITAN",
-          //   chain: "matic",
-          // },
+          {
+            contract: "0x107065a122f92636a1358a70a0efe0f1a080a7e5",
+            onChain: true,
+            fungible: true,
+            collectionID: "USX",
+            chain: "matic",
+          },
+          {
+            contract: "0x429f49faec3d568ef83ec803e02df78e25d5ee7d",
+            onChain: true,
+            fungible: true,
+            collectionID: "Ella",
+            chain: "matic",
+          },
+          {
+            contract: "0xaaa5b9e6c589642f98a1cda99b9d024b8407285a",
+            onChain: true,
+            fungible: true,
+            collectionID: "TITAN",
+            chain: "matic",
+          },
         ],
         uiOptions: {
           openingHeading:
@@ -354,7 +354,13 @@
       });
 
       window.negotiator.on("tokens-selected", (tokens) => {
-        console.log("tokens-selected", tokens);
+        console.log("tokens-selected 1", tokens);
+      });
+      window.negotiator.on("tokens-selected", (tokens) => {
+        console.log("tokens-selected 2", tokens);
+      });
+      window.negotiator.on("tokens-selected", (tokens) => {
+        console.log("tokens-selected 3", tokens);
       });
       window.negotiator.on("connected-wallet", (wallet) => {
         console.log("connected wallet", wallet);

diff --git a/src/client/index.ts b/src/client/index.ts
@@ -136,6 +136,7 @@ export class Client {
 
 		this.config = this.mergeConfig(defaultConfig, config)
 
+		// TODO investigate if this works correctly.
 		this.config.autoLoadTokens = localStorage.getItem('tn-autoload-tokens') === 'false' ? false : this.config.autoLoadTokens
 
 		this.tokenStore = new TokenStore(this.config.autoEnableTokens, this.config.tokenPersistenceTTL)
@@ -521,6 +522,11 @@ export class Client {
 		}
 
 		this.eventSender('tokens-loaded', { loadedCollections: Object.keys(this.tokenStore.getCurrentIssuers()).length })
+
+		// use retry logic here too
+		// document.querySelectorAll('.connect-btn-tn .lds-ellipsis').forEach((el) => {
+		// 	el.parentElement.innerHTML = this.config.uiOptions?.loadAction ?? 'Load Collection'
+		// })
 	}
 
 	public cancelTokenAutoload() {
@@ -758,18 +764,22 @@ export class Client {
 	private async loadRemoteOutletTokens(issuer: OffChainTokenConfig): Promise<OutletTokenResult | void> {
 		const redirectRequired = shouldUseRedirectMode(this.config.offChainRedirectMode)
 		if (redirectRequired) this.tokenStore.setTokens(issuer.collectionID, [])
-		this.ui.showLoader(
-			`<h4>${this.config.uiOptions?.reDirectIssuerEventHeading ?? 'Connecting to Issuers...'}</h4>`,
-			`<small>${this.config.uiOptions?.reDirectIssuerBodyEvent ?? 'Your browser will re-direct shortly'}</small>`,
-			`<button class='cancel-autoload-btn btn-tn' aria-label='Cancel page re-direct'>${
-				this.config.uiOptions?.cancelAction ?? 'Cancel'
-			}</button>`,
-		)
-		this.enableTokenAutoLoadCancel()
-		if (this.config.uiOptions?.userCancelIssuerAutoRedirectTimer) await sleep(this.config.uiOptions.userCancelIssuerAutoRedirectTimer)
-		if (this.userCancelTokenAutoload) {
-			this.userCancelTokenAutoload = false
-			return {}
+		if (this.ui) {
+			this.ui.showLoader(
+				`<h4>${this.config.uiOptions?.reDirectIssuerEventHeading ?? 'Connecting to Issuers...'}</h4>`,
+				`<small>${this.config.uiOptions?.reDirectIssuerBodyEvent ?? 'Your browser will re-direct shortly'}</small>`,
+				`<button class='cancel-autoload-btn btn-tn' aria-label='Cancel page re-direct'>${
+					this.config.uiOptions?.cancelAction ?? 'Cancel'
+				}</button>`,
+			)
+			if (!issuer.onChain) {
+				this.enableTokenAutoLoadCancel()
+				await sleep(this.config.uiOptions.userCancelIssuerAutoRedirectTimer ?? 2500)
+				if (this.userCancelTokenAutoload) {
+					this.userCancelTokenAutoload = false
+					return {}
+				}
+			}
 		}
 		const res = await this.messaging.sendMessage(
 			{

diff --git a/src/client/views/select-issuers.ts b/src/client/views/select-issuers.ts
@@ -17,7 +17,6 @@ export class SelectIssuers extends AbstractView {
 
 		this.client.registerUiUpdateCallback(UIUpdateEventType.ISSUERS_LOADED, () => {
 			this.ui.dismissLoader()
-			this.client.cancelTokenAutoload()
 			this.render()
 		})
 
@@ -110,7 +109,9 @@ export class SelectIssuers extends AbstractView {
 
 	protected afterRender() {
 		if (this.client.issuersLoaded) {
-			if (this.client.getTokenStore().hasUnloadedTokens()) this.autoLoadTokens()
+			if (this.client.getTokenStore().hasUnloadedTokens()) {
+				this.autoLoadTokens()
+			}
 		} else {
 			this.issuersLoading()
 		}
@@ -158,6 +159,7 @@ export class SelectIssuers extends AbstractView {
 		}
 
 		this.issuerListContainer.addEventListener('click', (e: any) => {
+			console.log('yolo', e.target.dataset.issuer);
 			if (e.target.classList.contains('connect-btn-tn')) {
 				this.connectTokenIssuer(e)
 				this.client.getTokenStore().setIncrementCollectionLoadAttempts(e.target.dataset.issuer);
@@ -214,16 +216,35 @@ export class SelectIssuers extends AbstractView {
 	async autoLoadTokens(refresh = false) {
 		await this.client.tokenAutoLoad(
 			this.issuerLoading.bind(this),
-			(issuer: string, tokens: any[]) => {
-				if (!tokens?.length) {
-					return
-				}
-				this.issuerConnected(issuer, tokens, false)
-			},
+			this.issuerLoadingComplete.bind(this),
 			refresh,
 		)
 	}
 
+	issuerLoadingComplete(issuer: string, tokens: any[]) {
+		if (!tokens?.length) {
+			this.issuerDidntConnect(issuer);
+		} else {
+			this.issuerConnected(issuer, tokens, false)
+		}
+	}
+
+	issuerDidntConnect(issuer: string, showNotification = false) {
+		const collectLoadAttempts = this.client.getTokenStore().getCollectionLoadAttempts(issuer);
+		let issuerButtonText = this.params.options?.loadAction ?? "Load Collection";
+		if (collectLoadAttempts >= 1) issuerButtonText = this.params.options?.repeatAction ?? 'Retry';
+		const connectBtn = this.issuerListContainer.querySelector(`[data-issuer="${issuer}"] .connect-btn-tn`)
+		if (connectBtn) {
+			connectBtn.innerHTML = issuerButtonText;
+			connectBtn.style.display = 'block'
+		}
+		if (showNotification) {
+			this.ui.showError(`
+			${this.params.options.noTokensFoundEvent ?? 'No tokens found! '}
+			${this.client.getNoTokenMsg(issuer)}`)
+		}
+	}
+
 	async connectTokenIssuer(event: any) {
 		const data = event.target.dataset
 
@@ -246,9 +267,7 @@ export class SelectIssuers extends AbstractView {
 		this.ui.dismissLoader()
 
 		if (!tokens?.length) {
-			this.ui.showError(`
-			${this.params.options.noTokensFoundEvent ?? 'No tokens found! '}
-			${this.client.getNoTokenMsg(issuer)}`)
+			this.issuerDidntConnect(issuer, true);
 			return
 		}
 
@@ -266,6 +285,7 @@ export class SelectIssuers extends AbstractView {
 			connectBtn.innerHTML = '<div class="lds-ellipsis lds-ellipsis-sm" style=""><div></div><div></div><div></div><div></div></div>'
 			connectBtn.style.display = 'block'
 		}
+
 	}
 
 	issuerConnected(issuer: string, tokens: any[], showTokens = true) {