feat: add experimental turnstile captcha & add timeout to recaptcha b…

…adge

javascript/tokenscript-viewer/src/components/app/app.css

@@ -60,4 +60,21 @@ main {
     width: 40px;
     height: 40px;
     margin-right: 8px;
-}
+}
+
+.turnstile-widget {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100dvh;
+	background-color: rgba(0, 0, 0, 0.51);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 999;
+}
+
+.grecaptcha-badge {
+	z-index: 999;
+}

javascript/tokenscript-viewer/src/components/app/app.tsx

@@ -358,7 +358,12 @@ export class AppRoot {
 				{!this.shouldUseIframeProvider() && this.viewerType !== "opensea" ?
 					<wallet-selector ref={(el) => this.walletSelector = el}></wallet-selector> : ''
 				}
-				<script async src="https://www.google.com/recaptcha/api.js?render=explicit"></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
+					crossorigin="anonymous"
+				></script>*/}
 			</Host>
 		);
 	}

javascript/tokenscript-viewer/src/integration/googleRecaptcha.ts

@@ -28,11 +28,20 @@ export async function getRecaptchaToken(sitekey?: string, action?: string){
 				widgetIds[sitekey] = widgetId;
 			} else {
 				widgetId = widgetIds[sitekey];
+				const elem = document.getElementById(elemId).getElementsByClassName("grecaptcha-badge")[0] as HTMLDivElement;
+				if (elem) elem.style.visibility = "visible";
 			}
 
 			grecaptcha.execute(widgetId, {action: action ?? "recaptcha"}).then(function(token) {
 				resolve(token);
-			}).catch(e => reject(e));
+				setTimeout(() => {
+					(document.getElementById(elemId).getElementsByClassName("grecaptcha-badge")[0] as HTMLDivElement).style.visibility = "hidden";
+				}, 5000);
+				//window.Worker = Worker
+			}).catch(e => {
+				reject(e);
+				//window.Worker = Worker
+			});
 		});
 	})
 }

javascript/tokenscript-viewer/src/integration/turnstileCaptcha.ts

@@ -0,0 +1,52 @@
+
+declare global {
+	var turnstile: any;
+}
+
+const DEFAULT_SITE_KEY = "0x4AAAAAAA0Rmw6kZyekmiSB";
+
+export async function getTurnstileToken(sitekey?: string){
+
+	return new Promise((resolve, reject) => {
+
+		if (!sitekey)
+			sitekey = DEFAULT_SITE_KEY;
+
+		const elemId = `turnstile-${sitekey}`;
+		let elem;
+
+		try {
+			let widgetId;
+			//if (widgetIds[sitekey] === undefined){
+			if (!document.getElementById(elemId)) {
+				elem = document.createElement("div");
+				elem.id = elemId;
+				elem.classList.add("turnstile-widget");
+				document.body.getElementsByTagName("app-root")[0].append(elem);
+			}
+			widgetId = turnstile.render("#" + elemId, {
+				sitekey,
+				callback: function (token) {
+					console.log(`Challenge Success ${token}`);
+					resolve(token);
+					turnstile.remove(widgetId);
+					elem.remove();
+				},
+				'error-callback': function (error){
+					console.error("Turnstile error: ", error);
+					turnstile.remove(widgetId);
+					elem.remove();
+					reject(error);
+				}
+			});
+			//widgetIds[sitekey] = widgetId;
+			/*} else {
+				widgetId = widgetIds[sitekey];
+			}*/
+		} catch (e){
+			reject(e);
+			if (elem)
+				elem.remove();
+		}
+	})
+}