From 9328c1320129a07728baf9a6a29a463c263e6116 Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 5 Aug 2025 08:35:22 -0700 Subject: [PATCH] cleanup captcha step --- .../Signup/StepCaptcha/CaptchaWebView.tsx | 75 ++++++++----------- 1 file changed, 32 insertions(+), 43 deletions(-) diff --git a/src/screens/Signup/StepCaptcha/CaptchaWebView.tsx b/src/screens/Signup/StepCaptcha/CaptchaWebView.tsx index 1db6eb8168..ce260b5bfe 100644 --- a/src/screens/Signup/StepCaptcha/CaptchaWebView.tsx +++ b/src/screens/Signup/StepCaptcha/CaptchaWebView.tsx @@ -1,5 +1,4 @@ -import React, {useEffect, useRef} from 'react' -import {StyleSheet} from 'react-native' +import {useEffect, useMemo, useRef} from 'react' import {WebView, type WebViewNavigation} from 'react-native-webview' import {type ShouldStartLoadRequest} from 'react-native-webview/lib/WebViewTypes' @@ -43,7 +42,7 @@ export function CaptchaWebView({ } }, []) - const redirectHost = React.useMemo(() => { + const redirectHost = useMemo(() => { if (!state?.serviceUrl) return 'bsky.app' return state?.serviceUrl && @@ -52,49 +51,47 @@ export function CaptchaWebView({ : 'bsky.app' }, [state?.serviceUrl]) - const wasSuccessful = React.useRef(false) + const wasSuccessful = useRef(false) - const onShouldStartLoadWithRequest = React.useCallback( - (event: ShouldStartLoadRequest) => { - const urlp = new URL(event.url) - return ALLOWED_HOSTS.includes(urlp.host) - }, - [], - ) + const onShouldStartLoadWithRequest = (event: ShouldStartLoadRequest) => { + const urlp = new URL(event.url) + return ALLOWED_HOSTS.includes(urlp.host) + } - const onNavigationStateChange = React.useCallback( - (e: WebViewNavigation) => { - if (wasSuccessful.current) return + const onNavigationStateChange = (e: WebViewNavigation) => { + if (wasSuccessful.current) return - const urlp = new URL(e.url) - if (urlp.host !== redirectHost || urlp.pathname === '/gate/signup') return + const urlp = new URL(e.url) + if (urlp.host !== redirectHost || urlp.pathname === '/gate/signup') return - const code = urlp.searchParams.get('code') - if (urlp.searchParams.get('state') !== stateParam || !code) { - onError({error: 'Invalid state or code'}) - return - } + const code = urlp.searchParams.get('code') + if (urlp.searchParams.get('state') !== stateParam || !code) { + onError({error: 'Invalid state or code'}) + return + } - // We want to delay the completion of this screen ever so slightly so that it doesn't appear to be a glitch if it completes too fast - wasSuccessful.current = true - const now = Date.now() - const timeTaken = now - startedAt.current - if (timeTaken < MIN_DELAY) { - successTo.current = setTimeout(() => { - onSuccess(code) - }, MIN_DELAY - timeTaken) - } else { + // We want to delay the completion of this screen ever so slightly so that it doesn't appear to be a glitch if it completes too fast + wasSuccessful.current = true + const now = Date.now() + const timeTaken = now - startedAt.current + if (timeTaken < MIN_DELAY) { + successTo.current = setTimeout(() => { onSuccess(code) - } - }, - [redirectHost, stateParam, onSuccess, onError], - ) + }, MIN_DELAY - timeTaken) + } else { + onSuccess(code) + } + } return ( ) } - -const styles = StyleSheet.create({ - webview: { - flex: 1, - backgroundColor: 'transparent', - borderRadius: 10, - }, -})