Merge pull request #846 from TokenScript/feature/timers-poc

added timer feature to slow page navigation

index.html

@@ -311,6 +311,7 @@
           openingAction: "Let's Go!",
           theme: theme,
           position: "top-right",
+          userCancelIssuerAutoRedirectTimer: 2000,
         },
         unSupportedUserAgent: {
           authentication: {

src/client/index.ts

@@ -8,6 +8,7 @@ import {
 	removeUrlSearchParams,
 	createIssuerHashMap,
 	createIssuerHashArray,
+	sleep,
 } from '../utils'
 import { getNftCollection, getNftTokens } from '../utils/token/nftProvider'
 import { TokenStore } from './tokenStore'
@@ -112,6 +113,7 @@ export class Client {
 		[UIUpdateEventType.ISSUERS_LOADED]: undefined,
 		[UIUpdateEventType.WALLET_DISCONNECTED]: undefined,
 	}
+	private userCancelTokenAutoload: boolean
 
 	private urlParams: URLSearchParams
 
@@ -745,10 +747,17 @@ 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.tokenStore.setTokens(issuer.collectionID, [])
+		this.ui.showLoader(
+			'<h4>Connecting to issuers...</h4>',
+			'<small>Your browser will re-direct shortly</small>',
+			"<button class='cancel-autoload-btn btn-tn' aria-label='Cancel authentication'>Cancel</button>",
+		)
+		this.enableTokenAutoLoadCancel()
+		if (this.config.uiOptions?.userCancelIssuerAutoRedirectTimer) await sleep(this.config.uiOptions.userCancelIssuerAutoRedirectTimer)
+		if (this.userCancelTokenAutoload) {
+			return {}
+		}
 		const res = await this.messaging.sendMessage(
 			{
 				action: OutletAction.GET_ISSUER_TOKENS,
@@ -759,7 +768,7 @@ export class Client {
 			},
 			this.config.messagingForceTab,
 			this.config.type === 'active' ? this.ui : null,
-			redirectRequired ? window.location.href : false,
+			window.location.href,
 		)
 
 		if (!res) return // Site is redirecting
@@ -848,6 +857,7 @@ export class Client {
 					600,
 					true,
 				)
+				this.enableAuthCancel(authRequests)
 			}
 
 			const authRequestBatch = await this.getMultiRequestBatch(authRequests)
@@ -984,6 +994,19 @@ export class Client {
 			})
 	}
 
+	public enableTokenAutoLoadCancel(): void {
+		waitForElementToExist('.cancel-autoload-btn')
+			.then((cancelAuthButton: HTMLElement) => {
+				cancelAuthButton.onclick = () => {
+					this.userCancelTokenAutoload = true
+					this.ui.dismissLoader()
+				}
+			})
+			.catch((err) => {
+				logger(2, err)
+			})
+	}
+
 	private async handleWalletRequired(authRequest) {
 		if (this.ui) {
 			this.ui.dismissLoader()

src/client/ui.ts

@@ -29,6 +29,7 @@ export interface UIOptionsInterface {
 	position?: PopupPosition
 	autoPopup?: boolean
 	alwaysShowStartScreen?: boolean
+	userCancelIssuerAutoRedirectTimer?: number
 	viewOverrides?: {
 		[type: string]: {
 			component?: ViewComponent
@@ -393,9 +394,7 @@ export class Ui implements UiInterface {
 		loader.style.display = 'block'
 		const dismissBtn = this.loadContainer.querySelector('.dismiss-error-tn') as HTMLDivElement
 		dismissBtn.style.display = 'none'
-
 		this.loadContainer.querySelector('.loader-msg-tn').innerHTML = message.join('\n')
-
 		this.loadContainer.style.display = 'flex'
 	}
 

src/theme/common.scss

@@ -20,7 +20,8 @@
   }
 }
 
-.overlay-tn .cancel-auth-btn {
+.overlay-tn .cancel-auth-btn,
+.overlay-tn .cancel-autoload-btn {
   display: block;
   margin: 10px auto;
   cursor: pointer;

src/utils/index.ts

@@ -302,3 +302,7 @@ export const getCookieByName = (cookieName: string) => {
 export const deleteCookieByName = (cookieName) => {
 	document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`
 }
+
+export const sleep = async (ms: number) => {
+	await new Promise((resolve) => setTimeout(resolve, ms))
+}