feat: Improve TLink API view

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

Hide file tree

Showing 7 changed files with 33 additions and 131 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/app/app.css b/javascript/tokenscript-viewer/src/components/app/app.css
@@ -68,7 +68,6 @@ main {
 	left: 0;
 	width: 100%;
 	height: 100dvh;
-	background-color: rgba(0, 0, 0, 0.51);
 	display: flex;
 	align-items: center;
 	justify-content: center;

diff --git a/javascript/tokenscript-viewer/src/components/app/app.tsx b/javascript/tokenscript-viewer/src/components/app/app.tsx
@@ -378,15 +378,10 @@ export class AppRoot {
 				{!this.shouldUseIframeProvider() && this.viewerType !== "opensea" ?
 					<wallet-selector ref={(el) => this.walletSelector = el}></wallet-selector> : ''
 				}
-				<script>
-					window.Worker = null;
-				</script>
-				<script async
-				        src="https://www.google.com/recaptcha/api.js?render=explicit&onload=recaptchaLoaded"></script>
-				<script
-					src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"
-					defer
-				></script>
+				<script defer async
+				        src="https://www.google.com/recaptcha/api.js?render=explicit"></script>
+				<script defer async
+					src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>
 			</Host>
 		);
 	}

diff --git a/javascript/tokenscript-viewer/src/components/viewers/tlink-api/tlink-api.css b/javascript/tokenscript-viewer/src/components/viewers/tlink-api/tlink-api.css
@@ -9,7 +9,7 @@ body {
 
 * {
 	font-family: 'Space Grotesk', sans-serif;
-	color: #333;
+	color: #fff;
 }
 
 .tlink-header {
@@ -45,7 +45,6 @@ body {
 }
 
 .tlink-viewer {
-	border-radius: 16px;
 	border: 1px solid rgb(29, 155, 240);
 	background-color: #262a2d;
 	width: 100%;
@@ -60,89 +59,6 @@ body {
 	flex-grow: 1;
 }
 
-.popover-container {
-	max-height: calc(100dvh - 50px) !important;
-}
-
-card-view, .card-container {
-	display: flex !important;
-	flex-direction: column;
-	flex-grow: 1;
-}
-
-card-view .card-container {
-	max-width: unset !important;
-	max-height: unset !important;
-	margin: 5px 15px !important;
-	border-radius: 15px !important;
-}
-
-card-popover .card-container {
-	max-height: 700px !important;
-	max-width: unset !important;
-	margin: 0 auto !important;
-	width: 100%;
-}
-
-card-view .card-container {
-	height: unset !important;
-}
-
-.actions {
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-	padding: 10px 20px;
-}
-
-.tlink-viewer .btn {
-	font-size: 16px !important;
-	line-height: 22px;
-	font-weight: 700;
-	padding-left: 14px;
-	padding-right: 14px;
-	border-radius: 14px;
-}
-
-.tlink-viewer .btn:disabled {
-	opacity: 0.6 !important;
-}
-
-.tlink-viewer .btn-primary, .tlink-viewer .btn-featured {
-	background: #1d9bf0;
-	border: none;
-}
-
-.tlink-viewer .btn-primary:hover, .tlink-viewer .btn-featured:hover {
-	background: #3087da !important;
-	border: none;
-}
-
-.tlink-viewer .btn-primary:disabled .tlink-viewer .btn-featured:disabled {
-	background: #2f3336 !important;
-}
-
-.tlink-viewer .btn-secondary {
-	border: 1px solid #1d9bf0;
-	border-color: #1d9bf0 !important;
-	background: transparent;
-	color: #1d9bf0
-}
-
-.tlink-viewer .btn-secondary:hover {
-	border: #3087da !important;
-	background: rgba(194, 140, 109, 0.06);
-}
-
-.tlink-viewer .btn-primary:disabled .tlink-viewer .btn-featured:disabled, .tlink-viewer .btn-secondary:disabled {
-	background: #2f3336 !important;
-}
-
-card-view .action-bar {
-	height: auto !important;
-	padding: 10px 0 0 !important;
-}
-
-card-view .card-container {
-	margin-bottom: 0 !important;
+.request-message {
+	text-align: center;
 }
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)