Page MenuHomePhabricator
Differential D10375

[CommCoreModule] implement creating outbound `olm` session
ClosedPublic
Actions

Authored by kamil on Dec 18 2023, 4:36 AM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Mar 17, 11:59 AM
Unknown Object (File)
Tue, Mar 11, 7:35 PM
Unknown Object (File)
Wed, Mar 5, 2:54 PM
Unknown Object (File)
Tue, Mar 4, 10:46 PM
Unknown Object (File)
Tue, Mar 4, 7:41 PM
Unknown Object (File)
Sat, Mar 1, 4:17 AM
Unknown Object (File)
Thu, Feb 20, 6:53 PM
Unknown Object (File)
Jan 27 2025, 3:14 PM
View All 86 Files
Subscribers
ashoat
tomek

Details

Reviewers
marcin
varun
michal
Commits
rCOMMf5ef9cf62d6b: [CommCoreModule] implement creating outbound `olm` session
Summary

Implemented method to creating olm session.

Depends on D10374

Test Plan

This code is really hard to test as it's impossible to verify partial results.
I generated some keys and values, verified them with olm-utils.test.js, and checked if they succeeded/failed when calling the method introduced here in the same cases as JS tests.
Full functionality tested later in the stack.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

kamil created this revision.Dec 18 2023, 4:36 AM
kamil held this revision as a draft.
Herald added subscribers: tomek, ashoat. · View Herald TranscriptDec 18 2023, 4:36 AM
kamil added a child revision: D10376: [CommCoreModule] implement creating inbound `olm` session.Dec 18 2023, 4:38 AM
Harbormaster completed remote builds in B25174: Diff 34789.Dec 18 2023, 6:18 AM
kamil published this revision for review.Dec 18 2023, 6:50 AM
kamil added inline comments.
native/cpp/CommonCpp/NativeModules/CommCoreModule.cpp
753 ↗(On Diff #34789)

this probably could be defined in a different place

marcin accepted this revision.Dec 21 2023, 3:01 AM
This revision is now accepted and ready to land.Dec 21 2023, 3:01 AM
marcin requested changes to this revision.Dec 21 2023, 3:19 AM
marcin added inline comments.
native/cpp/CommonCpp/NativeModules/CommCoreModule.cpp
756 ↗(On Diff #34789)

Looks like this call is is not blocking execution of the code below. What happens if persistOlmAccount fails and rejects the promise but we were able to resolve it to a correct value first?

If the rejection after resolution is ignored then it is a bug and we want to avoid it. Simplest solution would be to block on successful persistence completion. Alternatively I am wondering if we could return two promises one for crypto and the other for persistence and make JS await them in parallel.

However I might be wrong and the code above is actually correct. If you justify that there is no risk of an ignored error I will accept the revision.

This revision now requires changes to proceed.Dec 21 2023, 3:19 AM
kamil requested review of this revision.Jan 2 2024, 4:03 AM
kamil added inline comments.
native/cpp/CommonCpp/NativeModules/CommCoreModule.cpp
756 ↗(On Diff #34789)

That could lead to issues, good catch.

I updated D10371 to be blocking call and D10372 - when those two are accepted I'll rebase rest of the stack to avoid re-requesting review or all diffs

marcin accepted this revision.Jan 2 2024, 5:33 AM
This revision is now accepted and ready to land.Jan 2 2024, 5:33 AM
kamil updated this revision to Diff 35141.Jan 2 2024, 8:54 AM

rebase

Harbormaster completed remote builds in B25437: Diff 35141.Jan 2 2024, 9:26 AM
Closed by commit rCOMMf5ef9cf62d6b: [CommCoreModule] implement creating outbound `olm` session (authored by kamil). · Explain WhyJan 8 2024, 6:48 AM
This revision was automatically updated to reflect the committed changes.
kamil added a commit: rCOMMf5ef9cf62d6b: [CommCoreModule] implement creating outbound `olm` session.

Revision Contents
Changeset List

PathSize
native/
cpp/
CommonCpp/
NativeModules/
7 lines
51 lines
_generated/
schema/
7 lines

Diff 35377

View Options

native/cpp/CommonCpp/NativeModules/CommCoreModule.h

// @flow // @flow
import { useActionSheet } from '@expo/react-native-action-sheet';
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, Text } from 'react-native'; import { View, Text, TouchableOpacity, Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { NeynarClientContext } from 'lib/components/neynar-client-provider.react.js';
import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js';
import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react'; import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react';
import type { NavigationRoute } from '../../navigation/route-names'; import SWMansionIcon from '../../components/swmansion-icon.react.js';
import { type NavigationRoute } from '../../navigation/route-names.js';
import { useSelector } from '../../redux/redux-utils.js';
import { useStyles, useColors } from '../../themes/colors.js';
type Props = { type Props = {
+navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>, +navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>,
+route: NavigationRoute<'TagFarcasterChannel'>, +route: NavigationRoute<'TagFarcasterChannel'>,
}; };
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
function TagFarcasterChannel(props: Props): React.Node { function TagFarcasterChannel(props: Props): React.Node {
const styles = useStyles(unboundStyles);
const colors = useColors();
const fid = useCurrentUserFID();
invariant(fid, 'FID should be set');
const [selectedChannel, setSelectedChannel] = React.useState<?string>(null);
const [channelOptions, setChannelOptions] = React.useState<
$ReadOnlyArray<string>,
>([]);
const neynarClientContext = React.useContext(NeynarClientContext);
invariant(neynarClientContext, 'NeynarClientContext is missing');
const { client } = neynarClientContext;
React.useEffect(() => {
void (async () => {
const data = await client.fetchFollowedFarcasterChannels(fid);
const result = data.map(channel => channel.name);
setChannelOptions(result);
})();
}, [client, fid]);
const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
const { showActionSheetWithOptions } = useActionSheet();
const insets = useSafeAreaInsets();
const onOptionSelected = React.useCallback(
(selectedIndex: ?number) => {
if (
selectedIndex === undefined ||
selectedIndex === null ||
selectedIndex === channelOptions.length
) {
return;
}
setSelectedChannel(channelOptions[selectedIndex]);
},
[channelOptions],
);
const onPressSelectChannel = React.useCallback(() => {
const options =
Platform.OS === 'ios' ? [...channelOptions, 'Cancel'] : channelOptions;
const cancelButtonIndex = Platform.OS === 'ios' ? options.length - 1 : -1;
const containerStyle = {
paddingBottom: insets.bottom,
};
showActionSheetWithOptions(
{
options,
cancelButtonIndex,
containerStyle,
userInterfaceStyle: activeTheme ?? 'dark',
},
onOptionSelected,
);
}, [
activeTheme,
channelOptions,
insets.bottom,
onOptionSelected,
showActionSheetWithOptions,
]);
const channelSelectionStyles = React.useMemo(
() => [styles.sectionContainer, styles.touchableSectionContainer],
[styles.sectionContainer, styles.touchableSectionContainer],
);
const channelSelectionTextContent = selectedChannel
? selectedChannel
: 'No Farcaster channel tagged';
const tagFarcasterChannel = React.useMemo( const tagFarcasterChannel = React.useMemo(
() => ( () => (
<View> <View>
<Text>TagFarcasterChannel</Text> <View style={styles.sectionContainer}>
<Text style={styles.sectionText}>
Tag a Farcaster channel so followers can find your Comm community!
</Text>
</View>
<Text style={styles.sectionHeaderText}>FARCASTER CHANNEL</Text>
<TouchableOpacity
style={channelSelectionStyles}
onPress={onPressSelectChannel}
>
<Text style={styles.sectionText}>{channelSelectionTextContent}</Text>
<SWMansionIcon
name="edit-1"
size={20}
color={colors.panelForegroundSecondaryLabel}
/>
</TouchableOpacity>
</View> </View>
), ),
[], [
styles.sectionContainer,
styles.sectionText,
styles.sectionHeaderText,
channelSelectionStyles,
onPressSelectChannel,
channelSelectionTextContent,
colors.panelForegroundSecondaryLabel,
],
); );
return tagFarcasterChannel; return tagFarcasterChannel;
} }
const unboundStyles = {
sectionContainer: {
backgroundColor: 'panelForeground',
marginBottom: 24,
padding: 16,
},
sectionText: {
color: 'panelForegroundLabel',
fontSize: 14,
},
sectionHeaderText: {
fontSize: 14,
fontWeight: '400',
lineHeight: 20,
color: 'panelForegroundLabel',
paddingHorizontal: 16,
paddingBottom: 4,
},
touchableSectionContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
};
export default TagFarcasterChannel; export default TagFarcasterChannel;
View Options

native/cpp/CommonCpp/NativeModules/CommCoreModule.cpp

// @flow // @flow
import { useActionSheet } from '@expo/react-native-action-sheet';
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, Text } from 'react-native'; import { View, Text, TouchableOpacity, Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { NeynarClientContext } from 'lib/components/neynar-client-provider.react.js';
import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js';
import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react'; import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react';
import type { NavigationRoute } from '../../navigation/route-names'; import SWMansionIcon from '../../components/swmansion-icon.react.js';
import { type NavigationRoute } from '../../navigation/route-names.js';
import { useSelector } from '../../redux/redux-utils.js';
import { useStyles, useColors } from '../../themes/colors.js';
type Props = { type Props = {
+navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>, +navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>,
+route: NavigationRoute<'TagFarcasterChannel'>, +route: NavigationRoute<'TagFarcasterChannel'>,
}; };
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
function TagFarcasterChannel(props: Props): React.Node { function TagFarcasterChannel(props: Props): React.Node {
const styles = useStyles(unboundStyles);
const colors = useColors();
const fid = useCurrentUserFID();
invariant(fid, 'FID should be set');
const [selectedChannel, setSelectedChannel] = React.useState<?string>(null);
const [channelOptions, setChannelOptions] = React.useState<
$ReadOnlyArray<string>,
>([]);
const neynarClientContext = React.useContext(NeynarClientContext);
invariant(neynarClientContext, 'NeynarClientContext is missing');
const { client } = neynarClientContext;
React.useEffect(() => {
void (async () => {
const data = await client.fetchFollowedFarcasterChannels(fid);
const result = data.map(channel => channel.name);
setChannelOptions(result);
})();
}, [client, fid]);
const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
const { showActionSheetWithOptions } = useActionSheet();
const insets = useSafeAreaInsets();
const onOptionSelected = React.useCallback(
(selectedIndex: ?number) => {
if (
selectedIndex === undefined ||
selectedIndex === null ||
selectedIndex === channelOptions.length
) {
return;
}
setSelectedChannel(channelOptions[selectedIndex]);
},
[channelOptions],
);
const onPressSelectChannel = React.useCallback(() => {
const options =
Platform.OS === 'ios' ? [...channelOptions, 'Cancel'] : channelOptions;
const cancelButtonIndex = Platform.OS === 'ios' ? options.length - 1 : -1;
const containerStyle = {
paddingBottom: insets.bottom,
};
showActionSheetWithOptions(
{
options,
cancelButtonIndex,
containerStyle,
userInterfaceStyle: activeTheme ?? 'dark',
},
onOptionSelected,
);
}, [
activeTheme,
channelOptions,
insets.bottom,
onOptionSelected,
showActionSheetWithOptions,
]);
const channelSelectionStyles = React.useMemo(
() => [styles.sectionContainer, styles.touchableSectionContainer],
[styles.sectionContainer, styles.touchableSectionContainer],
);
const channelSelectionTextContent = selectedChannel
? selectedChannel
: 'No Farcaster channel tagged';
const tagFarcasterChannel = React.useMemo( const tagFarcasterChannel = React.useMemo(
() => ( () => (
<View> <View>
<Text>TagFarcasterChannel</Text> <View style={styles.sectionContainer}>
<Text style={styles.sectionText}>
Tag a Farcaster channel so followers can find your Comm community!
</Text>
</View>
<Text style={styles.sectionHeaderText}>FARCASTER CHANNEL</Text>
<TouchableOpacity
style={channelSelectionStyles}
onPress={onPressSelectChannel}
>
<Text style={styles.sectionText}>{channelSelectionTextContent}</Text>
<SWMansionIcon
name="edit-1"
size={20}
color={colors.panelForegroundSecondaryLabel}
/>
</TouchableOpacity>
</View> </View>
), ),
[], [
styles.sectionContainer,
styles.sectionText,
styles.sectionHeaderText,
channelSelectionStyles,
onPressSelectChannel,
channelSelectionTextContent,
colors.panelForegroundSecondaryLabel,
],
); );
return tagFarcasterChannel; return tagFarcasterChannel;
} }
const unboundStyles = {
sectionContainer: {
backgroundColor: 'panelForeground',
marginBottom: 24,
padding: 16,
},
sectionText: {
color: 'panelForegroundLabel',
fontSize: 14,
},
sectionHeaderText: {
fontSize: 14,
fontWeight: '400',
lineHeight: 20,
color: 'panelForegroundLabel',
paddingHorizontal: 16,
paddingBottom: 4,
},
touchableSectionContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
};
export default TagFarcasterChannel; export default TagFarcasterChannel;
View Options

native/cpp/CommonCpp/_generated/commJSI-generated.cpp

// @flow // @flow
import { useActionSheet } from '@expo/react-native-action-sheet';
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, Text } from 'react-native'; import { View, Text, TouchableOpacity, Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { NeynarClientContext } from 'lib/components/neynar-client-provider.react.js';
import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js';
import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react'; import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react';
import type { NavigationRoute } from '../../navigation/route-names'; import SWMansionIcon from '../../components/swmansion-icon.react.js';
import { type NavigationRoute } from '../../navigation/route-names.js';
import { useSelector } from '../../redux/redux-utils.js';
import { useStyles, useColors } from '../../themes/colors.js';
type Props = { type Props = {
+navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>, +navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>,
+route: NavigationRoute<'TagFarcasterChannel'>, +route: NavigationRoute<'TagFarcasterChannel'>,
}; };
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
function TagFarcasterChannel(props: Props): React.Node { function TagFarcasterChannel(props: Props): React.Node {
const styles = useStyles(unboundStyles);
const colors = useColors();
const fid = useCurrentUserFID();
invariant(fid, 'FID should be set');
const [selectedChannel, setSelectedChannel] = React.useState<?string>(null);
const [channelOptions, setChannelOptions] = React.useState<
$ReadOnlyArray<string>,
>([]);
const neynarClientContext = React.useContext(NeynarClientContext);
invariant(neynarClientContext, 'NeynarClientContext is missing');
const { client } = neynarClientContext;
React.useEffect(() => {
void (async () => {
const data = await client.fetchFollowedFarcasterChannels(fid);
const result = data.map(channel => channel.name);
setChannelOptions(result);
})();
}, [client, fid]);
const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
const { showActionSheetWithOptions } = useActionSheet();
const insets = useSafeAreaInsets();
const onOptionSelected = React.useCallback(
(selectedIndex: ?number) => {
if (
selectedIndex === undefined ||
selectedIndex === null ||
selectedIndex === channelOptions.length
) {
return;
}
setSelectedChannel(channelOptions[selectedIndex]);
},
[channelOptions],
);
const onPressSelectChannel = React.useCallback(() => {
const options =
Platform.OS === 'ios' ? [...channelOptions, 'Cancel'] : channelOptions;
const cancelButtonIndex = Platform.OS === 'ios' ? options.length - 1 : -1;
const containerStyle = {
paddingBottom: insets.bottom,
};
showActionSheetWithOptions(
{
options,
cancelButtonIndex,
containerStyle,
userInterfaceStyle: activeTheme ?? 'dark',
},
onOptionSelected,
);
}, [
activeTheme,
channelOptions,
insets.bottom,
onOptionSelected,
showActionSheetWithOptions,
]);
const channelSelectionStyles = React.useMemo(
() => [styles.sectionContainer, styles.touchableSectionContainer],
[styles.sectionContainer, styles.touchableSectionContainer],
);
const channelSelectionTextContent = selectedChannel
? selectedChannel
: 'No Farcaster channel tagged';
const tagFarcasterChannel = React.useMemo( const tagFarcasterChannel = React.useMemo(
() => ( () => (
<View> <View>
<Text>TagFarcasterChannel</Text> <View style={styles.sectionContainer}>
<Text style={styles.sectionText}>
Tag a Farcaster channel so followers can find your Comm community!
</Text>
</View>
<Text style={styles.sectionHeaderText}>FARCASTER CHANNEL</Text>
<TouchableOpacity
style={channelSelectionStyles}
onPress={onPressSelectChannel}
>
<Text style={styles.sectionText}>{channelSelectionTextContent}</Text>
<SWMansionIcon
name="edit-1"
size={20}
color={colors.panelForegroundSecondaryLabel}
/>
</TouchableOpacity>
</View> </View>
), ),
[], [
styles.sectionContainer,
styles.sectionText,
styles.sectionHeaderText,
channelSelectionStyles,
onPressSelectChannel,
channelSelectionTextContent,
colors.panelForegroundSecondaryLabel,
],
); );
return tagFarcasterChannel; return tagFarcasterChannel;
} }
const unboundStyles = {
sectionContainer: {
backgroundColor: 'panelForeground',
marginBottom: 24,
padding: 16,
},
sectionText: {
color: 'panelForegroundLabel',
fontSize: 14,
},
sectionHeaderText: {
fontSize: 14,
fontWeight: '400',
lineHeight: 20,
color: 'panelForegroundLabel',
paddingHorizontal: 16,
paddingBottom: 4,
},
touchableSectionContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
};
export default TagFarcasterChannel; export default TagFarcasterChannel;
View Options

native/cpp/CommonCpp/_generated/commJSI.h

// @flow // @flow
import { useActionSheet } from '@expo/react-native-action-sheet';
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, Text } from 'react-native'; import { View, Text, TouchableOpacity, Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { NeynarClientContext } from 'lib/components/neynar-client-provider.react.js';
import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js';
import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react'; import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react';
import type { NavigationRoute } from '../../navigation/route-names'; import SWMansionIcon from '../../components/swmansion-icon.react.js';
import { type NavigationRoute } from '../../navigation/route-names.js';
import { useSelector } from '../../redux/redux-utils.js';
import { useStyles, useColors } from '../../themes/colors.js';
type Props = { type Props = {
+navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>, +navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>,
+route: NavigationRoute<'TagFarcasterChannel'>, +route: NavigationRoute<'TagFarcasterChannel'>,
}; };
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
function TagFarcasterChannel(props: Props): React.Node { function TagFarcasterChannel(props: Props): React.Node {
const styles = useStyles(unboundStyles);
const colors = useColors();
const fid = useCurrentUserFID();
invariant(fid, 'FID should be set');
const [selectedChannel, setSelectedChannel] = React.useState<?string>(null);
const [channelOptions, setChannelOptions] = React.useState<
$ReadOnlyArray<string>,
>([]);
const neynarClientContext = React.useContext(NeynarClientContext);
invariant(neynarClientContext, 'NeynarClientContext is missing');
const { client } = neynarClientContext;
React.useEffect(() => {
void (async () => {
const data = await client.fetchFollowedFarcasterChannels(fid);
const result = data.map(channel => channel.name);
setChannelOptions(result);
})();
}, [client, fid]);
const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
const { showActionSheetWithOptions } = useActionSheet();
const insets = useSafeAreaInsets();
const onOptionSelected = React.useCallback(
(selectedIndex: ?number) => {
if (
selectedIndex === undefined ||
selectedIndex === null ||
selectedIndex === channelOptions.length
) {
return;
}
setSelectedChannel(channelOptions[selectedIndex]);
},
[channelOptions],
);
const onPressSelectChannel = React.useCallback(() => {
const options =
Platform.OS === 'ios' ? [...channelOptions, 'Cancel'] : channelOptions;
const cancelButtonIndex = Platform.OS === 'ios' ? options.length - 1 : -1;
const containerStyle = {
paddingBottom: insets.bottom,
};
showActionSheetWithOptions(
{
options,
cancelButtonIndex,
containerStyle,
userInterfaceStyle: activeTheme ?? 'dark',
},
onOptionSelected,
);
}, [
activeTheme,
channelOptions,
insets.bottom,
onOptionSelected,
showActionSheetWithOptions,
]);
const channelSelectionStyles = React.useMemo(
() => [styles.sectionContainer, styles.touchableSectionContainer],
[styles.sectionContainer, styles.touchableSectionContainer],
);
const channelSelectionTextContent = selectedChannel
? selectedChannel
: 'No Farcaster channel tagged';
const tagFarcasterChannel = React.useMemo( const tagFarcasterChannel = React.useMemo(
() => ( () => (
<View> <View>
<Text>TagFarcasterChannel</Text> <View style={styles.sectionContainer}>
<Text style={styles.sectionText}>
Tag a Farcaster channel so followers can find your Comm community!
</Text>
</View>
<Text style={styles.sectionHeaderText}>FARCASTER CHANNEL</Text>
<TouchableOpacity
style={channelSelectionStyles}
onPress={onPressSelectChannel}
>
<Text style={styles.sectionText}>{channelSelectionTextContent}</Text>
<SWMansionIcon
name="edit-1"
size={20}
color={colors.panelForegroundSecondaryLabel}
/>
</TouchableOpacity>
</View> </View>
), ),
[], [
styles.sectionContainer,
styles.sectionText,
styles.sectionHeaderText,
channelSelectionStyles,
onPressSelectChannel,
channelSelectionTextContent,
colors.panelForegroundSecondaryLabel,
],
); );
return tagFarcasterChannel; return tagFarcasterChannel;
} }
const unboundStyles = {
sectionContainer: {
backgroundColor: 'panelForeground',
marginBottom: 24,
padding: 16,
},
sectionText: {
color: 'panelForegroundLabel',
fontSize: 14,
},
sectionHeaderText: {
fontSize: 14,
fontWeight: '400',
lineHeight: 20,
color: 'panelForegroundLabel',
paddingHorizontal: 16,
paddingBottom: 4,
},
touchableSectionContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
};
export default TagFarcasterChannel; export default TagFarcasterChannel;
View Options

native/schema/CommCoreModuleSchema.js

// @flow // @flow
import { useActionSheet } from '@expo/react-native-action-sheet';
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, Text } from 'react-native'; import { View, Text, TouchableOpacity, Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { NeynarClientContext } from 'lib/components/neynar-client-provider.react.js';
import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js';
import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react'; import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react';
import type { NavigationRoute } from '../../navigation/route-names'; import SWMansionIcon from '../../components/swmansion-icon.react.js';
import { type NavigationRoute } from '../../navigation/route-names.js';
import { useSelector } from '../../redux/redux-utils.js';
import { useStyles, useColors } from '../../themes/colors.js';
type Props = { type Props = {
+navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>, +navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>,
+route: NavigationRoute<'TagFarcasterChannel'>, +route: NavigationRoute<'TagFarcasterChannel'>,
}; };
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
function TagFarcasterChannel(props: Props): React.Node { function TagFarcasterChannel(props: Props): React.Node {
const styles = useStyles(unboundStyles);
const colors = useColors();
const fid = useCurrentUserFID();
invariant(fid, 'FID should be set');
const [selectedChannel, setSelectedChannel] = React.useState<?string>(null);
const [channelOptions, setChannelOptions] = React.useState<
$ReadOnlyArray<string>,
>([]);
const neynarClientContext = React.useContext(NeynarClientContext);
invariant(neynarClientContext, 'NeynarClientContext is missing');
const { client } = neynarClientContext;
React.useEffect(() => {
void (async () => {
const data = await client.fetchFollowedFarcasterChannels(fid);
const result = data.map(channel => channel.name);
setChannelOptions(result);
})();
}, [client, fid]);
const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
const { showActionSheetWithOptions } = useActionSheet();
const insets = useSafeAreaInsets();
const onOptionSelected = React.useCallback(
(selectedIndex: ?number) => {
if (
selectedIndex === undefined ||
selectedIndex === null ||
selectedIndex === channelOptions.length
) {
return;
}
setSelectedChannel(channelOptions[selectedIndex]);
},
[channelOptions],
);
const onPressSelectChannel = React.useCallback(() => {
const options =
Platform.OS === 'ios' ? [...channelOptions, 'Cancel'] : channelOptions;
const cancelButtonIndex = Platform.OS === 'ios' ? options.length - 1 : -1;
const containerStyle = {
paddingBottom: insets.bottom,
};
showActionSheetWithOptions(
{
options,
cancelButtonIndex,
containerStyle,
userInterfaceStyle: activeTheme ?? 'dark',
},
onOptionSelected,
);
}, [
activeTheme,
channelOptions,
insets.bottom,
onOptionSelected,
showActionSheetWithOptions,
]);
const channelSelectionStyles = React.useMemo(
() => [styles.sectionContainer, styles.touchableSectionContainer],
[styles.sectionContainer, styles.touchableSectionContainer],
);
const channelSelectionTextContent = selectedChannel
? selectedChannel
: 'No Farcaster channel tagged';
const tagFarcasterChannel = React.useMemo( const tagFarcasterChannel = React.useMemo(
() => ( () => (
<View> <View>
<Text>TagFarcasterChannel</Text> <View style={styles.sectionContainer}>
<Text style={styles.sectionText}>
Tag a Farcaster channel so followers can find your Comm community!
</Text>
</View>
<Text style={styles.sectionHeaderText}>FARCASTER CHANNEL</Text>
<TouchableOpacity
style={channelSelectionStyles}
onPress={onPressSelectChannel}
>
<Text style={styles.sectionText}>{channelSelectionTextContent}</Text>
<SWMansionIcon
name="edit-1"
size={20}
color={colors.panelForegroundSecondaryLabel}
/>
</TouchableOpacity>
</View> </View>
), ),
[], [
styles.sectionContainer,
styles.sectionText,
styles.sectionHeaderText,
channelSelectionStyles,
onPressSelectChannel,
channelSelectionTextContent,
colors.panelForegroundSecondaryLabel,
],
); );
return tagFarcasterChannel; return tagFarcasterChannel;
} }
const unboundStyles = {
sectionContainer: {
backgroundColor: 'panelForeground',
marginBottom: 24,
padding: 16,
},
sectionText: {
color: 'panelForegroundLabel',
fontSize: 14,
},
sectionHeaderText: {
fontSize: 14,
fontWeight: '400',
lineHeight: 20,
color: 'panelForegroundLabel',
paddingHorizontal: 16,
paddingBottom: 4,
},
touchableSectionContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
};
export default TagFarcasterChannel; export default TagFarcasterChannel;