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;