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
+}