feat: Improve TLink API view

SmartTokenLabs · Nov 20, 2024 · a933917 · a933917
1 parent aba2a7a
commit a933917
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 34 deletions.
diff --git a/javascript/tokenscript-viewer/src/components.d.ts b/javascript/tokenscript-viewer/src/components.d.ts
@@ -281,10 +281,6 @@ export interface StsViewerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLStsViewerElement;
 }
-export interface TlinkApiCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLTlinkApiElement;
-}
 export interface TlinkCardViewerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLTlinkCardViewerElement;
@@ -596,19 +592,7 @@ declare global {
         prototype: HTMLTabbedViewerElement;
         new (): HTMLTabbedViewerElement;
     };
-    interface HTMLTlinkApiElementEventMap {
-        "showLoader": void;
-        "hideLoader": void;
-    }
     interface HTMLTlinkApiElement extends Components.TlinkApi, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLTlinkApiElementEventMap>(type: K, listener: (this: HTMLTlinkApiElement, ev: TlinkApiCustomEvent<HTMLTlinkApiElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLTlinkApiElementEventMap>(type: K, listener: (this: HTMLTlinkApiElement, ev: TlinkApiCustomEvent<HTMLTlinkApiElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLTlinkApiElement: {
         prototype: HTMLTlinkApiElement;
@@ -1015,8 +999,6 @@ declare namespace LocalJSX {
     }
     interface TlinkApi {
         "app"?: AppRoot;
-        "onHideLoader"?: (event: TlinkApiCustomEvent<void>) => void;
-        "onShowLoader"?: (event: TlinkApiCustomEvent<void>) => void;
     }
     interface TlinkCardViewer {
         "app"?: AppRoot;

diff --git a/javascript/tokenscript-viewer/src/components/viewers/tlink-api/tlink-api.tsx b/javascript/tokenscript-viewer/src/components/viewers/tlink-api/tlink-api.tsx
@@ -27,20 +27,6 @@ export class TlinkApi {
 	@Prop()
 	app: AppRoot;
 
-	@Event({
-		eventName: 'showLoader',
-		composed: true,
-		cancelable: true,
-		bubbles: true,
-	}) showLoader: EventEmitter<void>;
-
-	@Event({
-		eventName: 'hideLoader',
-		composed: true,
-		cancelable: true,
-		bubbles: true,
-	}) hideLoader: EventEmitter<void>;
-
 	async componentDidLoad(){
 
 		const urlParams = new URLSearchParams(document.location.search);
@@ -90,8 +76,8 @@ export class TlinkApi {
 							<span class="text">Tapp Viewer</span>
 						</a>
 					</div>
-					<div>
-
+					<div class="request-message">
+						<h4>Please wait...</h4>
 					</div>
 				</div>
 			</Host>

diff --git a/javascript/tokenscript-viewer/src/integration/googleRecaptcha.ts b/javascript/tokenscript-viewer/src/integration/googleRecaptcha.ts
@@ -1,5 +1,8 @@
 
 declare global {
+	interface Window {
+		grecaptcha: any;
+	}
 	var grecaptcha: any;
 }
 
@@ -9,6 +12,15 @@ const widgetIds : {[siteKey: string]: number} = {};
 
 export async function getRecaptchaToken(sitekey?: string, action?: string){
 
+	// Wait for script tag to load
+	if (!window.grecaptcha){
+		for (let i = 0; i<10; i++){
+			await new Promise((resolve) => setTimeout(resolve, 500));
+			if (window.grecaptcha)
+				break;
+		}
+	}
+
 	return new Promise((resolve, reject) => {
 
 		if (!sitekey)

diff --git a/javascript/tokenscript-viewer/src/integration/turnstileCaptcha.ts b/javascript/tokenscript-viewer/src/integration/turnstileCaptcha.ts
@@ -1,12 +1,24 @@
 
 declare global {
+	interface Window {
+		turnstile: any;
+	}
 	var turnstile: any;
 }
 
 const DEFAULT_SITE_KEY = "0x4AAAAAAA0Rmw6kZyekmiSB";
 
 export async function getTurnstileToken(sitekey?: string){
 
+	// Wait for script tag to load
+	if (!window.turnstile){
+		for (let i = 0; i<10; i++){
+			await new Promise((resolve) => setTimeout(resolve, 500));
+			if (window.turnstile)
+				break;
+		}
+	}
+
 	return new Promise((resolve, reject) => {
 
 		if (!sitekey)