Page MenuHomePhabricator
Files F3355720

D13986.diff
No OneTemporary
Actions

D13986.diff
View Options

diff --git a/native/components/directory-prompt-bottom-sheet.react.js b/native/components/directory-prompt-bottom-sheet.react.js
new file mode 100644
--- /dev/null
+++ b/native/components/directory-prompt-bottom-sheet.react.js
@@ -0,0 +1,97 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import DirectoryPrompt from './directory-prompt.react.js';
+import PrimaryButton from './primary-button.react.js';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-provider.react.js';
+import BottomSheet from '../bottom-sheet/bottom-sheet.react.js';
+import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
+import type { NavigationRoute } from '../navigation/route-names.js';
+
+const directoryPromptHeight = 300;
+const marginBottom = 40;
+const buttonHeight = 61;
+
+type Props = {
+ +navigation: RootNavigationProp<'DirectoryPromptBottomSheet'>,
+ +route: NavigationRoute<'DirectoryPromptBottomSheet'>,
+};
+
+function DirectoryPromptBottomSheet(props: Props): React.Node {
+ const { navigation } = props;
+
+ const { goBack } = navigation;
+
+ const bottomSheetRef = React.useRef(null);
+
+ const bottomSheetContext = React.useContext(BottomSheetContext);
+ invariant(bottomSheetContext, 'bottomSheetContext should be set');
+ const { setContentHeight } = bottomSheetContext;
+
+ const insets = useSafeAreaInsets();
+
+ React.useLayoutEffect(() => {
+ setContentHeight(
+ directoryPromptHeight +
+ marginBottom +
+ buttonHeight +
+ buttonHeight +
+ insets.bottom,
+ );
+ }, [insets.bottom, setContentHeight]);
+
+ const onPressAccept = React.useCallback(() => {
+ console.log('User accepted the prompt');
+ }, []);
+
+ const onPressDecline = React.useCallback(() => {
+ console.log('User declined the prompt');
+ }, []);
+
+ const directoryPromptBottomSheet = React.useMemo(
+ () => (
+ <BottomSheet ref={bottomSheetRef} onClosed={goBack}>
+ <View style={styles.container}>
+ <View style={styles.promptContainer}>
+ <DirectoryPrompt />
+ </View>
+ <View style={styles.buttonContainer}>
+ <PrimaryButton
+ onPress={onPressAccept}
+ label="Explore communities"
+ variant="enabled"
+ />
+ <PrimaryButton
+ onPress={onPressDecline}
+ label="No thanks"
+ variant="outline"
+ />
+ </View>
+ </View>
+ </BottomSheet>
+ ),
+ [goBack, onPressAccept, onPressDecline],
+ );
+
+ return directoryPromptBottomSheet;
+}
+
+const styles = StyleSheet.create({
+ buttonContainer: {
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ },
+ container: {
+ flex: 1,
+ paddingHorizontal: 16,
+ },
+ promptContainer: {
+ marginBottom,
+ },
+});
+
+export default DirectoryPromptBottomSheet;
diff --git a/native/components/directory-prompt.react.js b/native/components/directory-prompt.react.js
new file mode 100644
--- /dev/null
+++ b/native/components/directory-prompt.react.js
@@ -0,0 +1,58 @@
+// @flow
+
+import * as React from 'react';
+import { View, Text } from 'react-native';
+
+import { useStyles } from '../themes/colors.js';
+import CommunityLogo from '../vectors/community-logo.react.js'; // Placeholder for a community logo icon
+
+function DirectoryPrompt(): React.Node {
+ const headerText = 'Expand your network';
+ const bodyText =
+ 'We noticed you’re not part of many communities yet. Would you like to' +
+ ' see what communities Comm has to offer?';
+
+ const styles = useStyles(unboundStyles);
+ const directoryPrompt = React.useMemo(
+ () => (
+ <>
+ <Text style={styles.header}>{headerText}</Text>
+ <Text style={styles.body}>{bodyText}</Text>
+ <View style={styles.communityLogoContainer}>
+ <CommunityLogo />
+ </View>
+ </>
+ ),
+ [
+ bodyText,
+ headerText,
+ styles.body,
+ styles.communityLogoContainer,
+ styles.header,
+ ],
+ );
+
+ return directoryPrompt;
+}
+
+const unboundStyles = {
+ header: {
+ fontSize: 24,
+ color: 'panelForegroundLabel',
+ paddingBottom: 16,
+ },
+ body: {
+ fontFamily: 'Arial',
+ fontSize: 15,
+ lineHeight: 20,
+ color: 'panelForegroundSecondaryLabel',
+ paddingBottom: 16,
+ },
+ communityLogoContainer: {
+ flexGrow: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+};
+
+export default DirectoryPrompt;
diff --git a/native/navigation/root-navigator.react.js b/native/navigation/root-navigator.react.js
--- a/native/navigation/root-navigator.react.js
+++ b/native/navigation/root-navigator.react.js
@@ -53,6 +53,7 @@
UserProfileBottomSheetNavigatorRouteName,
KeyserverSelectionBottomSheetRouteName,
ConnectFarcasterBottomSheetRouteName,
+ DirectoryPromptBottomSheetRouteName,
TagFarcasterChannelNavigatorRouteName,
CreateMissingSIWEBackupMessageRouteName,
RestoreSIWEBackupRouteName,
@@ -74,6 +75,7 @@
import CommunityCreationNavigator from '../community-creation/community-creation-navigator.react.js';
import TagFarcasterChannelNavigator from '../community-settings/tag-farcaster-channel/tag-farcaster-channel-navigator.react.js';
import ConnectFarcasterBottomSheet from '../components/connect-farcaster-bottom-sheet.react.js';
+import DirectoryPromptBottomSheet from '../components/directory-prompt-bottom-sheet.react.js';
import InviteLinksNavigator from '../invite-links/invite-links-navigator.react.js';
import CustomServerModal from '../profile/custom-server-modal.react.js';
import KeyserverSelectionBottomSheet from '../profile/keyserver-selection-bottom-sheet.react.js';
@@ -304,6 +306,11 @@
component={ConnectFarcasterBottomSheet}
options={modalOverlayScreenOptions}
/>
+ <Root.Screen
+ name={DirectoryPromptBottomSheetRouteName}
+ component={DirectoryPromptBottomSheet}
+ options={modalOverlayScreenOptions}
+ />
<Root.Screen
name={TagFarcasterChannelNavigatorRouteName}
component={TagFarcasterChannelNavigator}
diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js
--- a/native/navigation/route-names.js
+++ b/native/navigation/route-names.js
@@ -163,6 +163,7 @@
export const FarcasterAccountSettingsRouteName = 'FarcasterAccountSettings';
export const ConnectFarcasterBottomSheetRouteName =
'ConnectFarcasterBottomSheet';
+export const DirectoryPromptBottomSheetRouteName = 'DirectoryPromptBottomSheet';
export const TagFarcasterChannelNavigatorRouteName =
'TagFarcasterChannelNavigator';
export const TagFarcasterChannelRouteName = 'TagFarcasterChannel';
@@ -199,6 +200,7 @@
+KeyserverSelectionBottomSheet: KeyserverSelectionBottomSheetParams,
+LinkedDevicesBottomSheet: LinkedDevicesBottomSheetParams,
+ConnectFarcasterBottomSheet: void,
+ +DirectoryPromptBottomSheet: void,
+TagFarcasterChannelNavigator: void,
+CreateMissingSIWEBackupMessage: void,
+RestoreSIWEBackup: RestoreSIWEBackupParams,
diff --git a/native/vectors/community-logo.react.js b/native/vectors/community-logo.react.js
new file mode 100644
--- /dev/null
+++ b/native/vectors/community-logo.react.js
@@ -0,0 +1,63 @@
+// @flow
+
+import * as React from 'react';
+import Svg, { Polygon, Path } from 'react-native-svg';
+
+function CommunityLogo(): React.Node {
+ const communityLogo = React.useMemo(
+ () => (
+ <Svg
+ width="200"
+ height="200"
+ viewBox="0 0 17.924 17.924"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <Polygon
+ points="12.475,8.868 12.481,8.859 12.48,8.858"
+ fill="#030104"
+ />
+ <Path
+ d="M17.211,10.107c0,0-0.183-0.249-0.616-0.415c0,0-0.036-0.011-0.092-0.029
+ c-0.386-0.181-0.752-0.297-0.752-0.297c-0.078-0.028-0.146-0.056-0.21-0.083c-0.261-0.13-0.45-0.279-0.45-0.279
+ s-0.002-0.002-0.203-0.203c0.361-0.374,0.626-0.882,0.709-1.368c0.064-0.066,0.129-0.172,0.157-0.341
+ c0.052-0.188,0.117-0.517,0.002-0.67c-0.007-0.008-0.013-0.015-0.02-0.022c0.108-0.396,0.246-1.214-0.244-1.772
+ c-0.044-0.056-0.318-0.384-0.906-0.558l-0.28-0.097c-0.463-0.143-0.754-0.174-0.766-0.176c-0.021-0.002-0.043,0-0.063,0.005
+ c-0.016,0.005-0.071,0.019-0.113,0.013c-0.111-0.016-0.277,0.041-0.307,0.053c-0.038,0.015-0.934,0.374-1.205,1.208
+ c-0.025,0.067-0.134,0.422,0.01,1.292c-0.021,0.014-0.04,0.032-0.058,0.054c-0.116,0.153-0.051,0.48,0.002,0.669
+ c0.027,0.167,0.092,0.272,0.155,0.339c0.072,0.48,0.302,0.942,0.605,1.296c0,0,0.23,0.398,0.259,0.435
+ c0.729,1.08,0.821,3.162,0.83,3.396l0.001,0.015l-0.001,0.016c-0.012,0.728-0.374,0.981-0.568,1.065
+ c-0.094,0.042-0.192,0.079-0.291,0.117c0.049-0.072,0.097-0.197,0.1-0.418c0,0-0.071-3.059-0.688-3.972
+ c0,0-0.176-0.24-0.593-0.399c0,0-0.034-0.011-0.089-0.028c-0.37-0.174-0.722-0.285-0.722-0.285
+ c-0.075-0.027-0.142-0.053-0.202-0.08c-0.25-0.125-0.433-0.268-0.433-0.268s-0.002-0.002-0.195-0.196
+ c0.347-0.36,0.602-0.848,0.681-1.314c0.063-0.063,0.125-0.166,0.152-0.328c0.049-0.181,0.112-0.497,0.001-0.644
+ c-0.006-0.007-0.012-0.014-0.018-0.021c0.104-0.381,0.236-1.167-0.235-1.704c-0.043-0.053-0.307-0.369-0.871-0.536l-0.27-0.092
+ C8.97,3.348,8.69,3.317,8.678,3.316c-0.02-0.002-0.041,0-0.061,0.006C8.601,3.326,8.549,3.34,8.508,3.335
+ c-0.106-0.016-0.266,0.039-0.294,0.05C8.178,3.399,7.317,3.744,7.056,4.546c-0.024,0.065-0.128,0.406,0.01,1.242
+ C7.045,5.802,7.027,5.819,7.011,5.84C6.9,5.986,6.963,6.302,7.012,6.483c0.027,0.161,0.089,0.263,0.15,0.326
+ c0.069,0.461,0.29,0.906,0.582,1.246L7.661,8.182L7.659,8.174L7.656,8.191C7.657,8.188,7.659,8.184,7.66,8.182v0.001L7.655,8.191
+ C7.538,8.556,6.137,8.982,6.137,8.982C5.721,9.141,5.545,9.381,5.545,9.381c-0.616,0.913-0.688,3.971-0.688,3.971
+ c0.003,0.219,0.05,0.342,0.097,0.414c-0.095-0.035-0.192-0.071-0.283-0.111c-0.194-0.084-0.557-0.339-0.568-1.066v-0.016v-0.016
+ c0.009-0.234,0.102-2.314,0.817-3.376c0.039-0.054,0.167-0.214,0.403-0.379c0,0,0-0.001-0.001-0.001
+ c0.361-0.374,0.626-0.882,0.709-1.368C6.095,7.367,6.16,7.261,6.189,7.092c0.052-0.188,0.117-0.517,0.001-0.67
+ C6.184,6.414,6.177,6.407,6.171,6.4c0.108-0.396,0.246-1.214-0.244-1.772C5.886,4.572,5.611,4.244,5.023,4.07l-0.28-0.097
+ C4.28,3.83,3.989,3.799,3.977,3.797c-0.021-0.002-0.043,0-0.063,0.005C3.898,3.808,3.843,3.822,3.8,3.816
+ C3.69,3.8,3.524,3.857,3.494,3.869C3.456,3.883,2.561,4.242,2.289,5.077c-0.025,0.067-0.133,0.422,0.01,1.292
+ C2.278,6.383,2.258,6.401,2.241,6.423c-0.116,0.153-0.05,0.48,0.001,0.669c0.027,0.167,0.092,0.272,0.155,0.339
+ c0.072,0.48,0.302,0.942,0.606,1.296L2.917,8.859L2.915,8.85L2.911,8.868c0.001-0.003,0.004-0.007,0.005-0.01v0.001L2.911,8.868
+ C2.79,9.248,1.332,9.691,1.332,9.691c-0.433,0.166-0.616,0.415-0.616,0.415C0.075,11.056,0,13.171,0,13.171
+ c0.008,0.482,0.217,0.533,0.217,0.533c1.473,0.657,3.785,0.773,3.785,0.773c0.125,0.004,0.24-0.003,0.356-0.01l0.003,0.012
+ c0,0,0.87-0.045,1.881-0.23c1.219,0.295,2.46,0.358,2.46,0.358c0.119,0.003,0.231-0.004,0.342-0.011l0.003,0.012
+ c0,0,1.295-0.066,2.538-0.379c1.053,0.201,1.979,0.248,1.979,0.248c0.124,0.004,0.24-0.003,0.356-0.01l0.003,0.012
+ c0,0,2.312-0.117,3.785-0.773c0,0,0.208-0.051,0.216-0.534C17.927,13.173,17.852,11.058,17.211,10.107z"
+ fill="white"
+ />
+ </Svg>
+ ),
+ [],
+ );
+
+ return communityLogo;
+}
+
+export default CommunityLogo;

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 24, 3:10 PM (18 h, 45 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2576522
Default Alt Text
D13986.diff (11 KB)

Event Timeline