diff --git a/assets/images/find_friends_illustration.webp b/assets/images/find_friends_illustration.webp new file mode 100644 index 0000000000..9074282ea6 Binary files /dev/null and b/assets/images/find_friends_illustration.webp differ diff --git a/src/components/contacts/components/HeroImage.tsx b/src/components/contacts/components/HeroImage.tsx new file mode 100644 index 0000000000..5e710fd9ae --- /dev/null +++ b/src/components/contacts/components/HeroImage.tsx @@ -0,0 +1,33 @@ +import {View} from 'react-native' +import {Image} from 'expo-image' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {atoms as a, useTheme} from '#/alf' + +export function ContactsHeroImage() { + const t = useTheme() + const {_} = useLingui() + + return ( + + {_( + + ) +} diff --git a/src/screens/Settings/FindContactsSettings.tsx b/src/screens/Settings/FindContactsSettings.tsx index db27fb7d4f..8146994d68 100644 --- a/src/screens/Settings/FindContactsSettings.tsx +++ b/src/screens/Settings/FindContactsSettings.tsx @@ -9,23 +9,19 @@ import { } from '#/lib/routes/types' import {isNative} from '#/platform/detection' import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' -import {atoms as a, useTheme} from '#/alf' +import {atoms as a, useGutters, useTheme} from '#/alf' +import {Admonition} from '#/components/Admonition' import {ButtonText} from '#/components/Button' -import {Contacts_Stroke2_Corner2_Rounded as FindContactsIcon} from '#/components/icons/Contacts' +import {ContactsHeroImage} from '#/components/contacts/components/HeroImage' import * as Layout from '#/components/Layout' import {InlineLinkText, Link} from '#/components/Link' import {Text} from '#/components/Typography' -import * as SettingsList from './components/SettingsList' type Props = NativeStackScreenProps export function FindContactsSettingsScreen({}: Props) { - const t = useTheme() const {_} = useLingui() - const {data: isAvailable} = useQuery({ - queryKey: ['contacts-available'], - queryFn: async () => await Contacts.isAvailableAsync(), - }) + const hasInitiated = false return ( @@ -39,49 +35,11 @@ export function FindContactsSettingsScreen({}: Props) { {isNative ? ( - - - - - - Find Contacts - - - - - - Contacts from your address book will be uploaded to Bluesky on - an ongoing basis to help connect you with your friends and - personalize content, such as making suggestions for you and - others. Turning off syncing will not remove previously - uploaded contacts.{' '} - - TODO: Add learn more link - - - - - {isAvailable && ( - - - - Upload contacts - - - - )} - - + !hasInitiated ? ( + + ) : ( + + ) ) : ( ) } + +function Intro() { + const gutter = useGutters(['base']) + const t = useTheme() + const {_} = useLingui() + + const {data: isAvailable, isSuccess} = useQuery({ + queryKey: ['contacts-available'], + queryFn: async () => await Contacts.isAvailableAsync(), + }) + + return ( + + + + + Find your friends on Bluesky by verifying your phone number and + matching with your contacts. We protect your information and you + control what happens next.{' '} + + TODO: Learn more + + + + {isAvailable ? ( + + + Upload contacts + + + ) : ( + isSuccess && ( + + + Contact sync is not available on this device, as the app is unable + to access your contacts. + + + ) + )} + + ) +} + +function Status() { + return null +}