diff --git a/native/components/farcaster-prompt.react.js b/native/components/farcaster-prompt.react.js --- a/native/components/farcaster-prompt.react.js +++ b/native/components/farcaster-prompt.react.js @@ -1,31 +1,49 @@ // @flow +import invariant from 'invariant'; import * as React from 'react'; import { View, Text } from 'react-native'; +import { FIDContext } from 'lib/components/fid-provider.react.js'; + import { useStyles } from '../themes/colors.js'; import FarcasterLogo from '../vectors/farcaster-logo.react.js'; function FarcasterPrompt(): React.Node { + const fidContext = React.useContext(FIDContext); + invariant(fidContext, 'fidContext is missing'); + + const { fid } = fidContext; + const styles = useStyles(unboundStyles); + const headerText = fid + ? 'Disconnect from Farcaster' + : 'Do you want to connect your Farcaster account'; + + const bodyText = fid + ? 'You can disconnect your Farcaster account at any time.' + : 'Connecting your Farcaster account lets you see your mutual follows ' + + 'on Comm. We’ll also surface communities based on your Farcaster ' + + 'channels.'; + const farcasterPrompt = React.useMemo( () => ( <> - - Do you want to connect your Farcaster account? - - - Connecting your Farcaster account lets you see your mutual follows on - Comm. We’ll also surface communities based on your Farcaster - channels. - + {headerText} + {bodyText} ), - [styles.body, styles.farcasterLogoContainer, styles.header], + [ + bodyText, + headerText, + styles.body, + styles.farcasterLogoContainer, + styles.header, + ], ); return farcasterPrompt;