diff --git a/native/account/registration/connect-farcaster.react.js b/native/account/registration/connect-farcaster.react.js --- a/native/account/registration/connect-farcaster.react.js +++ b/native/account/registration/connect-farcaster.react.js @@ -43,7 +43,7 @@ const registrationContext = React.useContext(RegistrationContext); invariant(registrationContext, 'registrationContext should be set'); - const { setCachedSelections } = registrationContext; + const { cachedSelections, setCachedSelections } = registrationContext; const [webViewState, setWebViewState] = React.useState('closed'); @@ -95,12 +95,45 @@ [goToNextStep, setCachedSelections], ); + const { farcasterID } = cachedSelections; + const alreadyHasConnected = !!farcasterID; + const onPressConnectFarcaster = React.useCallback(() => { setWebViewState('opening'); }, []); + const defaultConnectButtonVariant = alreadyHasConnected + ? 'outline' + : 'enabled'; + const connectButtonVariant = - webViewState === 'opening' ? 'loading' : 'enabled'; + webViewState === 'opening' ? 'loading' : defaultConnectButtonVariant; + + const connectButtonText = alreadyHasConnected + ? 'Connect new Farcaster account' + : 'Connect Farcaster account'; + + const onUseAlreadyConnectedAccount = React.useCallback(() => { + invariant( + farcasterID, + 'farcasterID should be set in onUseAlreadyConnectedAccount', + ); + goToNextStep(farcasterID); + }, [farcasterID, goToNextStep]); + + const alreadyConnectedButton = React.useMemo(() => { + if (!alreadyHasConnected) { + return null; + } + + return ( + + ); + }, [alreadyHasConnected, onUseAlreadyConnectedAccount]); const connectFarcaster = React.useMemo( () => ( @@ -110,9 +143,10 @@ + {alreadyConnectedButton} ), [ + alreadyConnectedButton, + connectButtonText, connectButtonVariant, onPressConnectFarcaster, onSkip,