Merge pull request #840 from TokenScript/feature/retry-load-btn

Feature/retry load btn

src/client/__tests__/selectIssuers.spec.ts

@@ -22,7 +22,19 @@ describe('select issuers spec', () => {
 					blockchain: 'evm',
 				},
 			],
-			options: {},
+			uiOptions: {
+				openingHeading:
+					"Open a new world of perks, benefits and opportunities with your attestation, collectible or token.",
+				issuerHeading: "Get discount with Ticket",
+				repeatAction: "Retry",
+				dismissAction: 'Dismiss',
+				loadAction: 'Load Collection',
+				noTokensFoundEvent: 'No Tokens Found',
+				balancesFoundEvent: 'Balance Found',
+				nftsFoundEvent: 'Token(s) Found',
+				openingAction: "Let's Go!",
+				position: "top-right",
+			},
 		})
 	}
 

src/client/tokenStore.ts

@@ -8,7 +8,7 @@ interface IssuerLookup {
 }
 
 interface TokenLookup {
-	[issuer: string]: { timestamp: number; tokens: TokenData[] | null }
+	[issuer: string]: { loadAttempts: number; timestamp: number; tokens: TokenData[] | null }
 }
 
 export interface TokenData {
@@ -59,7 +59,7 @@ export class TokenStore {
 		}
 
 		for (let collectionId in tokenStoreData.tokenData) {
-			const tokenData = tokenStoreData.tokenData[collectionId] as { timestamp: number; tokens: [] }
+			const tokenData = tokenStoreData.tokenData[collectionId] as { timestamp: number; tokens: []; loadAttempts: number }
 
 			if (tokenData.timestamp + this.tokenPersistenceTTL * 1000 > Date.now()) {
 				this.tokenData[collectionId] = tokenData
@@ -182,11 +182,18 @@ export class TokenStore {
 	}
 
 	public setTokens(issuer: string, tokens: TokenData[] | DecodedToken[]) {
-		this.tokenData[issuer] = { timestamp: Date.now(), tokens }
+		this.tokenData[issuer] = { timestamp: Date.now(), tokens, loadAttempts: this.getCollectionLoadAttempts(issuer) }
+		this.saveTokenStore()
+		if (this.autoEnableTokens) this.selectedTokens[issuer] = { tokens: tokens }
+	}
 
+	public setIncrementCollectionLoadAttempts(issuer: string) {
+		this.tokenData[issuer].loadAttempts = this.tokenData[issuer]?.loadAttempts >= 0 ? (this.tokenData[issuer].loadAttempts += 1) : 0
 		this.saveTokenStore()
+	}
 
-		if (this.autoEnableTokens) this.selectedTokens[issuer] = { tokens: tokens }
+	public getCollectionLoadAttempts(issuer: string) {
+		return this.tokenData[issuer]?.loadAttempts ?? 0
 	}
 
 	public getSelectedTokens() {

src/client/views/select-issuers.ts

@@ -4,7 +4,6 @@ import { IconView } from './icon-view'
 import { logger } from '../../utils'
 import { UIUpdateEventType } from '../index'
 import { Issuer } from '../interface'
-import { applyHTMLElementsInnerText } from './utils/index'
 
 export class SelectIssuers extends AbstractView {
 	issuerListContainer: any
@@ -161,6 +160,7 @@ export class SelectIssuers extends AbstractView {
 		this.issuerListContainer.addEventListener('click', (e: any) => {
 			if (e.target.classList.contains('connect-btn-tn')) {
 				this.connectTokenIssuer(e)
+				this.client.getTokenStore().setIncrementCollectionLoadAttempts(e.target.dataset.issuer);
 			} else if (e.target.classList.contains('tokens-btn-tn')) {
 				const issuer = e.target.parentNode.dataset.issuer
 				this.navigateToTokensView(issuer)
@@ -170,10 +170,11 @@ export class SelectIssuers extends AbstractView {
 
 	issuerConnectMarkup(title: string, image: string | undefined, issuer: string, tokens: any[], data: Issuer) {
 		let buttonText = ''
-
+		const collectLoadAttempts = this.client.getTokenStore().getCollectionLoadAttempts(issuer);
+		let issuerButtonText = this.params.options?.loadAction ?? "Load Collection";
+		if (collectLoadAttempts >= 1) issuerButtonText = this.params.options?.repeatAction ?? 'Retry';
 		// @ts-ignore
-		if (tokens?.length) buttonText = data?.fungible ? this.params.options.balanceFoundEvent ?? 'Balance found' : `${tokens.length} ${this.params.options?.nftsFoundEvent ?? 'Token(s) Available'}`
-
+		if (tokens?.length) buttonText = data?.fungible ? this.params.options?.balanceFoundEvent ?? 'Balance found' : `${tokens.length} ${this.params.options?.nftsFoundEvent ?? 'Token(s) Available'}`
 		return `
             <li class="issuer-connect-banner-tn" data-issuer="${issuer}" role="menuitem">
               <div tabindex="0" style="display: flex; align-items: center;">
@@ -187,7 +188,7 @@ export class SelectIssuers extends AbstractView {
 					${this.client.issuersLoaded === true ? '' : 'disabled'}
 				>
 				${this.client.issuersLoaded === true
-				? this.params.options.loadAction ?? 'Load'
+				? issuerButtonText
 				: '<div class="lds-ellipsis lds-ellipsis-sm" style=""><div></div><div></div><div></div><div></div></div>'
 			}
 			  </button>
@@ -215,14 +216,8 @@ export class SelectIssuers extends AbstractView {
 			this.issuerLoading.bind(this),
 			(issuer: string, tokens: any[]) => {
 				if (!tokens?.length) {
-					applyHTMLElementsInnerText(
-						this.issuerListContainer,
-						`[data-issuer="${issuer}"] .connect-btn-tn`,
-						this.params.options.loadAction ?? 'Load',
-					)
 					return
 				}
-
 				this.issuerConnected(issuer, tokens, false)
 			},
 			refresh,
@@ -240,17 +235,11 @@ export class SelectIssuers extends AbstractView {
 
 		try {
 			tokens = await this.client.connectTokenIssuer(issuer)
-
 			if (!tokens) return // Site is redirecting
 		} catch (err) {
 			logger(2, err)
 			this.ui.showError(err)
 			this.client.eventSender('error', { issuer, error: err })
-			applyHTMLElementsInnerText(
-				this.issuerListContainer,
-				`[data-issuer="${issuer}"] .connect-btn-tn`,
-				this.params.options.repeatAction ?? 'Try Again',
-			)
 			return
 		}
 
@@ -260,11 +249,6 @@ export class SelectIssuers extends AbstractView {
 			this.ui.showError(`
 			${this.params.options.noTokensFoundEvent ?? 'No tokens found! '}
 			${this.client.getNoTokenMsg(issuer)}`)
-			applyHTMLElementsInnerText(
-				this.issuerListContainer,
-				`[data-issuer="${issuer}"] .connect-btn-tn`,
-				this.params.options.repeatAction ?? 'Try Again',
-			)
 			return
 		}
 

src/theme/theme_dark.scss

@@ -58,7 +58,7 @@
 .overlay-tn.dark-tn .overlay-content-tn {
   box-shadow: 0 2px 4px 0 rgba(103, 103, 103, 0.5);
   background-color: black;
-  border-top: 4px solid white;
+  border-top: 4px solid #011aff;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 4px;
   border-top-left-radius: 3px;

src/utils/index.ts

@@ -4,6 +4,8 @@ import { sha256 } from 'ethers/lib/utils'
 import { OffChainTokenConfig } from '../client/interface'
 import { OutletIssuerInterface } from '../outlet/interfaces'
 import { DEFAULT_SCHEMA_UIDS } from '../outlet/ticketStorage'
+import { DecodedToken } from '../outlet/ticketStorage'
+import { TokenData } from '../client/tokenStore'
 
 export interface IssuerHashMap {
 	[collectionId: string]: string[]