it works!

src/screens/Onboarding/StepFinished.tsx

@@ -13,7 +13,7 @@ import {Trending2_Stroke2_Corner2_Rounded as Trending} from '#/components/icons/
 import {Text} from '#/components/Typography'
 import {useOnboardingDispatch} from '#/state/shell'
 import {Loader} from '#/components/Loader'
-import {useSetSaveFeedsMutation} from '#/state/queries/preferences'
+// import {useSetSaveFeedsMutation} from '#/state/queries/preferences'
 import {getAgent} from '#/state/session'
 import {useAnalytics} from '#/lib/analytics/analytics'
 
@@ -24,10 +24,11 @@ import {
   OnboardingControls,
 } from '#/screens/Onboarding/Layout'
 import {IconCircle} from '#/components/IconCircle'
-import {
+import {uploadBlob} from 'lib/api'
-  bulkWriteFollows,
+// import {
-  sortPrimaryAlgorithmFeeds,
+//   bulkWriteFollows,
-} from '#/screens/Onboarding/util'
+//   sortPrimaryAlgorithmFeeds,
+// } from '#/screens/Onboarding/util'
 
 export function StepFinished() {
   const {_} = useLingui()
@@ -37,35 +38,54 @@ export function StepFinished() {
   const {state, dispatch} = React.useContext(Context)
   const onboardDispatch = useOnboardingDispatch()
   const [saving, setSaving] = React.useState(false)
-  const {mutateAsync: saveFeeds} = useSetSaveFeedsMutation()
+  // const {mutateAsync: saveFeeds} = useSetSaveFeedsMutation()
 
   const finishOnboarding = React.useCallback(async () => {
     setSaving(true)
 
+    // TODO uncomment
     const {
-      interestsStepResults,
+      // interestsStepResults,
-      suggestedAccountsStepResults,
+      // suggestedAccountsStepResults,
-      algoFeedsStepResults,
+      // algoFeedsStepResults,
-      topicalFeedsStepResults,
+      // topicalFeedsStepResults,
+      profileStepResults,
     } = state
-    const {selectedInterests} = interestsStepResults
+    // const {selectedInterests} = interestsStepResults
-    const selectedFeeds = [
+    // const selectedFeeds = [
-      ...sortPrimaryAlgorithmFeeds(algoFeedsStepResults.feedUris),
+    //   ...sortPrimaryAlgorithmFeeds(algoFeedsStepResults.feedUris),
-      ...topicalFeedsStepResults.feedUris,
+    //   ...topicalFeedsStepResults.feedUris,
-    ]
+    // ]
 
     try {
-      await Promise.all([
+      // TODO uncomment!
-        bulkWriteFollows(suggestedAccountsStepResults.accountDids),
+      // await Promise.all([
-        // these must be serial
+      //   bulkWriteFollows(suggestedAccountsStepResults.accountDids),
-        (async () => {
+      //   // these must be serial
-          await getAgent().setInterestsPref({tags: selectedInterests})
+      //   (async () => {
-          await saveFeeds({
+      //     await getAgent().setInterestsPref({tags: selectedInterests})
-            saved: selectedFeeds,
+      //     await saveFeeds({
-            pinned: selectedFeeds,
+      //       saved: selectedFeeds,
-          })
+      //       pinned: selectedFeeds,
-        })(),
+      //     })
-      ])
+      //   })(),
+      // ])
+
+      await getAgent().upsertProfile(async existing => {
+        existing = existing ?? {}
+
+        if (profileStepResults.imageUri && profileStepResults.imageMime) {
+          const res = await uploadBlob(
+            getAgent(),
+            profileStepResults.imageUri,
+            profileStepResults.imageUri,
+          )
+
+          existing.avatar = res.data.blob
+        }
+
+        return existing
+      })
     } catch (e: any) {
       logger.info(`onboarding: bulk save failed`)
       logger.error(e)
@@ -77,7 +97,7 @@ export function StepFinished() {
     onboardDispatch({type: 'finish'})
     track('OnboardingV2:StepFinished:End')
     track('OnboardingV2:Complete')
-  }, [state, dispatch, onboardDispatch, setSaving, saveFeeds, track])
+  }, [dispatch, onboardDispatch, state, track])
 
   React.useEffect(() => {
     track('OnboardingV2:StepFinished:Start')

src/screens/Onboarding/StepProfile/index.tsx

@@ -30,6 +30,8 @@ import {
   PlaceholderCanvas,
   PlaceholderCanvasRef,
 } from '#/screens/Onboarding/StepProfile/PlaceholderCanvas'
+import {Text} from '#/components/Typography'
+import {HITSLOP_10} from 'lib/constants'
 
 interface Avatar {
   image?: {
@@ -80,6 +82,7 @@ export function StepProfile() {
 
   const onContinue = React.useCallback(async () => {
     let imageUri = avatar?.image?.path
+    let imageMime = avatar?.image?.mime
     if (!imageUri) {
       imageUri = await canvasRef.current?.capture()
     }
@@ -88,12 +91,13 @@ export function StepProfile() {
       dispatch({
         type: 'setProfileStepResults',
         imageUri,
+        imageMime: imageMime ?? 'image/jpeg',
       })
     }
 
     dispatch({type: 'next'})
     track('OnboardingV2:StepProfile:End')
-  }, [avatar?.image?.path, dispatch, track])
+  }, [avatar?.image, dispatch, track])
 
   return (
     <SetAvatarContext.Provider value={setAvatar}>
@@ -152,15 +156,42 @@ export function StepProfile() {
 function AvatarCircle() {
   const t = useTheme()
   const avatar = useAvatar()
+  const setAvatar = useSetAvatar()
   const Icon = avatar.placeholder.component
 
+  const onPressRemoveAvatar = React.useCallback(() => {
+    setAvatar(prev => ({
+      ...prev,
+      image: undefined,
+    }))
+  }, [setAvatar])
+
   if (avatar.image) {
     return (
-      <Image
+      <Pressable
-        source={avatar.image.path}
+        accessibilityRole="button"
-        style={[styles.imageContainer, t.atoms.border_contrast_high]}
+        hitSlop={HITSLOP_10}
-        accessibilityIgnoresInvertColors
+        onPress={onPressRemoveAvatar}>
-      />
+        <Image
+          source={avatar.image.path}
+          style={[styles.imageContainer, t.atoms.border_contrast_high]}
+          accessibilityIgnoresInvertColors
+        />
+        <View
+          style={[
+            a.absolute,
+            a.rounded_full,
+            a.align_center,
+            a.justify_center,
+            a.border,
+            t.atoms.border_contrast_high,
+            t.atoms.bg_contrast_300,
+            {height: 40, width: 40, bottom: 5, right: 5},
+          ]}>
+          {/* TODO Get a trash icon for alf */}
+          <Text style={[a.text_4xl, {color: t.palette.white}]}>x</Text>
+        </View>
+      </Pressable>
     )
   }
 

src/screens/Onboarding/state.ts

@@ -31,6 +31,7 @@ export type OnboardingState = {
   }
   profileStepResults: {
     imageUri?: string
+    imageMime?: string
   }
 }
 
@@ -64,6 +65,7 @@ export type OnboardingAction =
   | {
       type: 'setProfileStepResults'
       imageUri: string
+      imageMime: string
     }
 
 export type ApiResponseMap = {
@@ -102,6 +104,7 @@ export const initialState: OnboardingState = {
   },
   profileStepResults: {
     imageUri: '',
+    imageMime: '',
   },
 }
 
@@ -233,6 +236,7 @@ export function reducer(
     case 'setProfileStepResults': {
       next.profileStepResults = {
         imageUri: a.imageUri,
+        imageMime: a.imageMime,
       }
       break
     }