diff --git a/native/components/farcaster-prompt.react.js b/native/components/farcaster-prompt.react.js index a5477d716..312bd29a1 100644 --- a/native/components/farcaster-prompt.react.js +++ b/native/components/farcaster-prompt.react.js @@ -1,72 +1,70 @@ // @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'); +type Props = { + +showDisconnectText?: boolean, +}; - const { fid } = fidContext; +function FarcasterPrompt(props: Props): React.Node { + const { showDisconnectText } = props; const styles = useStyles(unboundStyles); - const headerText = fid + const headerText = showDisconnectText ? 'Disconnect from Farcaster' : 'Do you want to connect your Farcaster account'; - const bodyText = fid + const bodyText = showDisconnectText ? '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( () => ( <> {headerText} {bodyText} ), [ bodyText, headerText, styles.body, styles.farcasterLogoContainer, styles.header, ], ); return farcasterPrompt; } const unboundStyles = { header: { fontSize: 24, color: 'panelForegroundLabel', paddingBottom: 16, }, body: { fontFamily: 'Arial', fontSize: 15, lineHeight: 20, color: 'panelForegroundSecondaryLabel', paddingBottom: 16, }, farcasterLogoContainer: { flexGrow: 1, alignItems: 'center', justifyContent: 'center', }, }; export default FarcasterPrompt; diff --git a/native/profile/farcaster-account-settings.react.js b/native/profile/farcaster-account-settings.react.js index 7e8c37267..21b041371 100644 --- a/native/profile/farcaster-account-settings.react.js +++ b/native/profile/farcaster-account-settings.react.js @@ -1,113 +1,114 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { View } from 'react-native'; import { FIDContext } from 'lib/components/fid-provider.react.js'; import type { ProfileNavigationProp } from './profile.react.js'; import RegistrationButton from '../account/registration/registration-button.react.js'; import FarcasterPrompt from '../components/farcaster-prompt.react.js'; import FarcasterWebView from '../components/farcaster-web-view.react.js'; import type { FarcasterWebViewState } from '../components/farcaster-web-view.react.js'; import type { NavigationRoute } from '../navigation/route-names.js'; import { useStyles } from '../themes/colors.js'; type Props = { +navigation: ProfileNavigationProp<'FarcasterAccountSettings'>, +route: NavigationRoute<'FarcasterAccountSettings'>, }; // eslint-disable-next-line no-unused-vars function FarcasterAccountSettings(props: Props): React.Node { const fidContext = React.useContext(FIDContext); invariant(fidContext, 'FIDContext is missing'); const { fid, setFID } = fidContext; const styles = useStyles(unboundStyles); const onPressDisconnect = React.useCallback(() => { setFID(null); }, [setFID]); const [webViewState, setWebViewState] = React.useState('closed'); const onSuccess = React.useCallback( (newFID: string) => { setWebViewState('closed'); setFID(newFID); }, [setFID], ); const onPressConnectFarcaster = React.useCallback(() => { setWebViewState('opening'); }, []); const connectButtonVariant = webViewState === 'opening' ? 'loading' : 'enabled'; const button = React.useMemo(() => { if (fid) { return ( ); } return ( ); }, [connectButtonVariant, fid, onPressConnectFarcaster, onPressDisconnect]); const farcasterAccountSettings = React.useMemo( () => ( - + {button} ), [ button, + fid, onSuccess, styles.buttonContainer, styles.connectContainer, styles.promptContainer, webViewState, ], ); return farcasterAccountSettings; } const unboundStyles = { connectContainer: { flex: 1, backgroundColor: 'panelBackground', paddingBottom: 16, }, promptContainer: { flex: 1, padding: 16, justifyContent: 'space-between', }, buttonContainer: { marginVertical: 8, marginHorizontal: 16, }, }; export default FarcasterAccountSettings;