diff --git a/src/screens/Onboarding/StepProfile/index.tsx b/src/screens/Onboarding/StepProfile/index.tsx
index 65e1b6ee3f..47ca6d525d 100644
--- a/src/screens/Onboarding/StepProfile/index.tsx
+++ b/src/screens/Onboarding/StepProfile/index.tsx
@@ -29,6 +29,7 @@ import {IconCircle} from '#/components/IconCircle'
import {Image} from 'expo-image'
import {usePhotoLibraryPermission} from 'lib/hooks/usePermissions'
import {openCropper, openPicker} from 'lib/media/picker'
+import {Emoji, emojis, emojiItems} from './types'
import {SelectImageButton} from '#/screens/Onboarding/StepProfile/SelectImageButton'
interface Avatar {
@@ -75,10 +76,13 @@ export function StepProfile() {
- Upload a profile picture
+ Set your profile picture
- Help people know you're not a bot!
+
+ Help people know you're not a bot by uploading a picture or
+ creating an avatar!
+
@@ -112,6 +116,7 @@ export function StepProfile() {
function AvatarCircle() {
const t = useTheme()
const avatar = useAvatar()
+ const Icon = emojiItems[avatar.placeholder]
console.log(avatar)
@@ -131,7 +136,7 @@ function AvatarCircle() {
styles.imageContainer,
{backgroundColor: avatar.backgroundColor},
]}>
- {emojiItems[avatar.placeholder]}
+
)
}
@@ -146,14 +151,6 @@ const colors = [
] as const
type Color = (typeof colors)[number]
-const emojis = ['camera', 'smile', 'frown', 'eyes'] as const
-type Emoji = (typeof emojis)[number]
-const emojiItems: Record = {
- smile: 'đ',
- frown: 'âšī¸',
- eyes: 'đ',
-}
-
function ColorItem({color}: {color: Color}) {
const t = useTheme()
const avatar = useAvatar()
@@ -190,6 +187,7 @@ function EmojiItem({emoji}: {emoji: Emoji}) {
const t = useTheme()
const avatar = useAvatar()
const setAvatar = useSetAvatar()
+ const Icon = emojiItems[emoji]
const onPress = React.useCallback(() => {
setAvatar(prev => ({
@@ -214,7 +212,7 @@ function EmojiItem({emoji}: {emoji: Emoji}) {
},
]}
onPress={onPress}>
- {emojiItems[emoji]}
+
)
}
diff --git a/src/screens/Onboarding/StepProfile/types.ts b/src/screens/Onboarding/StepProfile/types.ts
new file mode 100644
index 0000000000..686db9f0c2
--- /dev/null
+++ b/src/screens/Onboarding/StepProfile/types.ts
@@ -0,0 +1,42 @@
+import {
+ EmojiSmile_Stroke2_Corner0_Rounded as EmojiSmile,
+ EmojiSad_Stroke2_Corner0_Rounded as EmojiSad,
+ EmojiAlt_Stroke2_Corner0_Rounded as EmojiAlt,
+ EmojiArc_Stroke2_Corner0_Rounded as EmojiArc,
+ EmojiHeartEyes_Stroke2_Corner0_Rounded as EmojiHeartEyes,
+} from '#/components/icons/Emoji'
+import {Alien_Stroke2_Corner0_Rounded as Alien} from '#/components/icons/Alien'
+import {Bubbles_Stroke2_Corner0_Rounded as Bubbles} from '#/components/icons/Bubbles'
+import {Explosion_Stroke2_Corner0_Rounded as Explosion} from '#/components/icons/Explosion'
+import {Lab_Stroke2_Corner0_Rounded as Lab} from '#/components/icons/Lab'
+import {PiggyBank_Stroke2_Corner0_Rounded as PiggyBank} from '#/components/icons/PiggyBank'
+import {Poop_Stroke2_Corner0_Rounded as Poop} from '#/components/icons/Poop'
+
+export const emojis = [
+ 'camera',
+ 'smile',
+ 'sad',
+ 'alt',
+ 'arc',
+ 'heartEyes',
+ 'alien',
+ 'bubbles',
+ 'explosion',
+ 'lab',
+ 'piggyBank',
+ 'poop',
+] as const
+export type Emoji = (typeof emojis)[number]
+export const emojiItems: Record = {
+ smile: EmojiSmile,
+ sad: EmojiSad,
+ alt: EmojiAlt,
+ arc: EmojiArc,
+ heartEyes: EmojiHeartEyes,
+ alien: Alien,
+ bubbles: Bubbles,
+ explosion: Explosion,
+ lab: Lab,
+ piggyBank: PiggyBank,
+ poop: Poop,
+}