forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
1import {useCallback} from 'react'
2import {View} from 'react-native'
3import {Image} from 'expo-image'
4import {LinearGradient} from 'expo-linear-gradient'
5import {msg, Trans} from '@lingui/macro'
6import {useLingui} from '@lingui/react'
7
8import {logger} from '#/logger'
9import {isNative, isWeb} from '#/platform/detection'
10import {atoms as a, useTheme, web} from '#/alf'
11import {Button, ButtonText} from '#/components/Button'
12import {isFindContactsFeatureEnabled} from '#/components/contacts/country-allowlist'
13import * as Dialog from '#/components/Dialog'
14import {useNuxDialogContext} from '#/components/dialogs/nuxs'
15import {
16 createIsEnabledCheck,
17 isExistingUserAsOf,
18} from '#/components/dialogs/nuxs/utils'
19import {Text} from '#/components/Typography'
20import {IS_E2E} from '#/env'
21import {navigate} from '#/Navigation'
22
23export const enabled = createIsEnabledCheck(props => {
24 return (
25 !IS_E2E &&
26 isNative &&
27 isExistingUserAsOf(
28 '2025-12-16T00:00:00.000Z',
29 props.currentProfile.createdAt,
30 ) &&
31 isFindContactsFeatureEnabled(props.geolocation.countryCode)
32 )
33})
34
35export function FindContactsAnnouncement() {
36 const t = useTheme()
37 const {_} = useLingui()
38 const nuxDialogs = useNuxDialogContext()
39 const control = Dialog.useDialogControl()
40
41 Dialog.useAutoOpen(control)
42
43 const onClose = useCallback(() => {
44 nuxDialogs.dismissActiveNux()
45 }, [nuxDialogs])
46
47 return (
48 <Dialog.Outer
49 control={control}
50 onClose={onClose}
51 nativeOptions={{preventExpansion: true}}>
52 <Dialog.Handle />
53
54 <Dialog.ScrollableInner
55 label={_(msg`Introducing finding friends via contacts`)}
56 style={[web({maxWidth: 440})]}
57 contentContainerStyle={[
58 {
59 paddingTop: 0,
60 paddingLeft: 0,
61 paddingRight: 0,
62 },
63 ]}>
64 <View style={[a.align_center, a.pt_3xl]}>
65 <LinearGradient
66 colors={[t.palette.primary_200, t.atoms.bg.backgroundColor]}
67 locations={[0, 1]}
68 start={{x: 0, y: 0}}
69 end={{x: 0, y: 1}}
70 style={[a.absolute, a.inset_0]}
71 />
72 <View style={[a.w_full, a.pt_sm, a.px_5xl, a.pb_4xl]}>
73 <Image
74 accessibilityIgnoresInvertColors
75 source={require('../../../../assets/images/find_friends_illustration.webp')}
76 style={[a.w_full, {aspectRatio: 1278 / 661}]}
77 alt={_(
78 msg`An illustration depicting user avatars flowing from a contact book into the Bluesky app`,
79 )}
80 />
81 </View>
82 </View>
83 <View style={[a.align_center, a.px_xl, a.gap_5xl]}>
84 <View style={[a.gap_sm, a.align_center]}>
85 <Text
86 style={[
87 a.text_4xl,
88 a.leading_tight,
89 a.font_bold,
90 a.text_center,
91 {
92 fontSize: isWeb ? 28 : 32,
93 maxWidth: 300,
94 },
95 ]}>
96 <Trans>Find your friends</Trans>
97 </Text>
98 <Text
99 style={[
100 a.text_md,
101 t.atoms.text_contrast_medium,
102 a.leading_snug,
103 a.text_center,
104 {maxWidth: 340},
105 ]}>
106 <Trans>
107 Bluesky is more fun with friends! Import your contacts to see
108 who’s already here.
109 </Trans>
110 </Text>
111 </View>
112
113 <Button
114 label={_(msg`Import Contacts`)}
115 size="large"
116 color="primary"
117 onPress={() => {
118 logger.metric('contacts:nux:ctaPressed', {})
119 control.close(() => {
120 navigate('FindContactsFlow')
121 })
122 }}
123 style={[a.w_full]}>
124 <ButtonText>
125 <Trans>Import Contacts</Trans>
126 </ButtonText>
127 </Button>
128 </View>
129
130 <Dialog.Close />
131 </Dialog.ScrollableInner>
132 </Dialog.Outer>
133 )
134}