UI tweaks and nits for starter packs (#4548)

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
Co-authored-by: Paul Frazee <pfrazee@gmail.com>
Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>
fix truncation on native (#4575)

__tests__/lib/string.test.ts

@@ -808,15 +808,21 @@ describe('createStarterPackLinkFromAndroidReferrer', () => {
   it('returns a link when input contains utm_source and utm_content', () => {
     expect(
       createStarterPackLinkFromAndroidReferrer(
-        'utm_source=bluesky&utm_content=starterpack-haileyok.com-rkey',
+        'utm_source=bluesky&utm_content=starterpack_haileyok.com_rkey',
       ),
     ).toEqual(validOutput)
+
+    expect(
+      createStarterPackLinkFromAndroidReferrer(
+        'utm_source=bluesky&utm_content=starterpack_test-lover-9000.com_rkey',
+      ),
+    ).toEqual('https://bsky.app/start/test-lover-9000.com/rkey')
   })
 
   it('returns a link when input contains utm_source and utm_content in different order', () => {
     expect(
       createStarterPackLinkFromAndroidReferrer(
-        'utm_content=starterpack-haileyok.com-rkey&utm_source=bluesky',
+        'utm_content=starterpack_haileyok.com_rkey&utm_source=bluesky',
       ),
     ).toEqual(validOutput)
   })
@@ -824,7 +830,7 @@ describe('createStarterPackLinkFromAndroidReferrer', () => {
   it('returns a link when input contains other parameters as well', () => {
     expect(
       createStarterPackLinkFromAndroidReferrer(
-        'utm_source=bluesky&utm_medium=starterpack&utm_content=starterpack-haileyok.com-rkey',
+        'utm_source=bluesky&utm_medium=starterpack&utm_content=starterpack_haileyok.com_rkey',
       ),
     ).toEqual(validOutput)
   })
@@ -832,7 +838,7 @@ describe('createStarterPackLinkFromAndroidReferrer', () => {
   it('returns null when utm_source is not present', () => {
     expect(
       createStarterPackLinkFromAndroidReferrer(
-        'utm_content=starterpack-haileyok.com-rkey',
+        'utm_content=starterpack_haileyok.com_rkey',
       ),
     ).toEqual(null)
   })
@@ -846,7 +852,7 @@ describe('createStarterPackLinkFromAndroidReferrer', () => {
   it('returns null when utm_content is malformed', () => {
     expect(
       createStarterPackLinkFromAndroidReferrer(
-        'utm_content=starterpack-haileyok.com',
+        'utm_content=starterpack_haileyok.com',
       ),
     ).toEqual(null)
 
@@ -856,13 +862,13 @@ describe('createStarterPackLinkFromAndroidReferrer', () => {
 
     expect(
       createStarterPackLinkFromAndroidReferrer(
-        'utm_content=starterpack-haileyok.com-rkey-more',
+        'utm_content=starterpack_haileyok.com_rkey_more',
       ),
     ).toEqual(null)
 
     expect(
       createStarterPackLinkFromAndroidReferrer(
-        'utm_content=notastarterpack-haileyok.com-rkey',
+        'utm_content=notastarterpack_haileyok.com_rkey',
       ),
     ).toEqual(null)
   })
@@ -906,6 +912,23 @@ describe('parseStarterPackHttpUri', () => {
     expect(parseStarterPackUri(validHttpUri)).toEqual(null)
   })
 
+  it('returns null when the route is not /start or /starter-pack', () => {
+    const validHttpUri = 'https://bsky.app/start/haileyok.com/rkey'
+    expect(parseStarterPackUri(validHttpUri)).toEqual({
+      name: 'haileyok.com',
+      rkey: 'rkey',
+    })
+
+    const validHttpUri2 = 'https://bsky.app/starter-pack/haileyok.com/rkey'
+    expect(parseStarterPackUri(validHttpUri2)).toEqual({
+      name: 'haileyok.com',
+      rkey: 'rkey',
+    })
+
+    const invalidHttpUri = 'https://bsky.app/profile/haileyok.com/rkey'
+    expect(parseStarterPackUri(invalidHttpUri)).toEqual(null)
+  })
+
   it('returns the at uri when the input is a valid starterpack at uri', () => {
     const validAtUri = 'at://did:123/app.bsky.graph.starterpack/rkey'
     expect(parseStarterPackUri(validAtUri)).toEqual({
@@ -931,11 +954,11 @@ describe('parseStarterPackHttpUri', () => {
 
 describe('createStarterPackGooglePlayUri', () => {
   const base =
-    'https://play.google.com/store/apps/details?id=xyz.blueskyweb.app&referrer=utm_source%3Dbluesky%26utm_medium%3Dstarterpack%26utm_content%3Dstarterpack-'
+    'https://play.google.com/store/apps/details?id=xyz.blueskyweb.app&referrer=utm_source%3Dbluesky%26utm_medium%3Dstarterpack%26utm_content%3Dstarterpack_'
 
   it('returns valid google play uri when input is valid', () => {
     expect(createStarterPackGooglePlayUri('name', 'rkey')).toEqual(
-      `${base}name-rkey`,
+      `${base}name_rkey`,
     )
   })
 

assets/icons/starterPack.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M11.26 5.227 5.02 6.899c-.734.197-1.17.95-.973 1.685l1.672 6.24c.197.734.951 1.17 1.685.973l6.24-1.672c.734-.197 1.17-.951.973-1.685L12.945 6.2a1.375 1.375 0 0 0-1.685-.973Zm-6.566.459a2.632 2.632 0 0 0-1.86 3.223l1.672 6.24a2.632 2.632 0 0 0 3.223 1.861l6.24-1.672a2.631 2.631 0 0 0 1.861-3.223l-1.672-6.24a2.632 2.632 0 0 0-3.223-1.861l-6.24 1.672Z" clip-rule="evenodd"/><path fill="#000" fill-rule="evenodd" d="M15.138 18.411a4.606 4.606 0 1 0 0-9.211 4.606 4.606 0 0 0 0 9.211Zm0 1.257a5.862 5.862 0 1 0 0-11.724 5.862 5.862 0 0 0 0 11.724Z" clip-rule="evenodd"/></svg>

src/Navigation.tsx

@@ -384,6 +384,7 @@ function HomeTabNavigator() {
         contentStyle: pal.view,
       }}>
       <HomeTab.Screen name="Home" getComponent={() => HomeScreen} />
+      <HomeTab.Screen name="Start" getComponent={() => HomeScreen} />
       {commonScreens(HomeTab)}
     </HomeTab.Navigator>
   )
@@ -520,6 +521,11 @@ const FlatNavigator = () => {
         getComponent={() => MessagesScreen}
         options={{title: title(msg`Messages`), requireAuth: true}}
       />
+      <Flat.Screen
+        name="Start"
+        getComponent={() => HomeScreen}
+        options={{title: title(msg`Home`)}}
+      />
       {commonScreens(Flat as typeof HomeTab, numUnread)}
     </Flat.Navigator>
   )

src/components/FeedCard.tsx

@@ -54,7 +54,11 @@ export function Link({
     const handleOrDid = feed.creator.handle || feed.creator.did
     return `/profile/${handleOrDid}/feed/${urip.rkey}`
   }, [feed])
-  return <InternalLink to={href}>{children}</InternalLink>
+  return (
+    <InternalLink to={href} label={feed.displayName}>
+      {children}
+    </InternalLink>
+  )
 }
 
 export function Outer({children}: {children: React.ReactNode}) {

src/components/NewskieDialog.tsx

@@ -9,11 +9,12 @@ import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {HITSLOP_10} from 'lib/constants'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useDialogControl} from '#/components/Dialog'
 import {Newskie} from '#/components/icons/Newskie'
+import {Default as StarterPackCard} from '#/components/StarterPack/StarterPackCard'
 import {Text} from '#/components/Typography'
 
 export function NewskieDialog({
@@ -24,6 +25,7 @@ export function NewskieDialog({
   disabled?: boolean
 }) {
   const {_} = useLingui()
+  const t = useTheme()
   const moderationOpts = useModerationOpts()
   const control = useDialogControl()
   const profileName = React.useMemo(() => {
@@ -72,11 +74,30 @@ export function NewskieDialog({
               <Trans>Say hello!</Trans>
             </Text>
             <Text style={[a.text_md]}>
+              {profile.joinedViaStarterPack ? (
+                <Trans>
+                  {profileName} joined Bluesky using a starter pack{' '}
+                  {timeAgo(createdAt, now, {format: 'long'})} ago
+                </Trans>
+              ) : (
                 <Trans>
                   {profileName} joined Bluesky{' '}
                   {timeAgo(createdAt, now, {format: 'long'})} ago
                 </Trans>
+              )}
             </Text>
+            {profile.joinedViaStarterPack ? (
+              <View
+                style={[
+                  a.mt_lg,
+                  a.p_lg,
+                  a.border,
+                  a.rounded_sm,
+                  t.atoms.border_contrast_low,
+                ]}>
+                <StarterPackCard starterPack={profile.joinedViaStarterPack} />
+              </View>
+            ) : null}
           </View>
         </Dialog.ScrollableInner>
       </Dialog.Outer>

src/components/StarterPack/Main/FeedsList.tsx

@@ -4,8 +4,7 @@ import {AppBskyFeedDefs} from '@atproto/api'
 import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
 
 import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {isNative, isWeb} from 'platform/detection'
-import {isNative} from 'platform/detection'
 import {List, ListRef} from 'view/com/util/List'
 import {SectionRef} from '#/screens/Profile/Sections/types'
 import {atoms as a, useTheme} from '#/alf'
@@ -25,7 +24,6 @@ export const FeedsList = React.forwardRef<SectionRef, ProfilesListProps>(
   function FeedsListImpl({feeds, headerHeight, scrollElRef}, ref) {
     const [initialHeaderHeight] = React.useState(headerHeight)
     const bottomBarOffset = useBottomBarOffset(20)
-    const {isTabletOrDesktop} = useWebMediaQueries()
     const t = useTheme()
 
     const onScrollToTop = useCallback(() => {
@@ -44,7 +42,7 @@ export const FeedsList = React.forwardRef<SectionRef, ProfilesListProps>(
         <View
           style={[
             a.p_lg,
-            (isTabletOrDesktop || index !== 0) && a.border_t,
+            (isWeb || index !== 0) && a.border_t,
             t.atoms.border_contrast_low,
           ]}>
           <FeedCard.Default feed={item} />

src/components/StarterPack/Main/ProfilesList.tsx

@@ -40,19 +40,26 @@ export const ProfilesList = React.forwardRef<SectionRef, ProfilesListProps>(
     const {currentAccount} = useSession()
 
     const [isPTRing, setIsPTRing] = React.useState(false)
-    const {data, refetch} = useListMembersQuery(listUri)
+    const {data, refetch} = useListMembersQuery(listUri, 50)
-    const profiles = data?.pages.flatMap(p => p.items.map(i => i.subject))
+
+    // The server returns these sorted by descending creation date, so we want to invert
+    const profiles = data?.pages
+      .flatMap(p => p.items.map(i => i.subject))
+      .reverse()
     const isOwn = new AtUri(listUri).host === currentAccount?.did
 
     const getSortedProfiles = () => {
       if (!profiles) return
       if (!isOwn) return profiles
+
       const myIndex = profiles.findIndex(p => p.did === currentAccount?.did)
-      return [
+      return myIndex !== -1
+        ? [
             profiles[myIndex],
             ...profiles.slice(0, myIndex),
             ...profiles.slice(myIndex + 1),
           ]
+        : profiles
     }
     const onScrollToTop = useCallback(() => {
       scrollElRef.current?.scrollToOffset({

src/components/StarterPack/NewskieDialog.tsx

@@ -1,85 +0,0 @@
-import React from 'react'
-import {View} from 'react-native'
-import {AppBskyActorDefs, moderateProfile} from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {differenceInSeconds} from 'date-fns'
-
-import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
-import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {HITSLOP_10} from 'lib/constants'
-import {sanitizeDisplayName} from 'lib/strings/display-names'
-import {atoms as a} from '#/alf'
-import {Button} from '#/components/Button'
-import * as Dialog from '#/components/Dialog'
-import {useDialogControl} from '#/components/Dialog'
-import {Newskie} from '#/components/icons/Newskie'
-import {Text} from '#/components/Typography'
-
-export function NewskieDialog({
-  profile,
-  disabled,
-}: {
-  profile: AppBskyActorDefs.ProfileViewDetailed
-  disabled?: boolean
-}) {
-  const {_} = useLingui()
-  const moderationOpts = useModerationOpts()
-  const control = useDialogControl()
-  const profileName = React.useMemo(() => {
-    const name = profile.displayName || profile.handle
-    if (!moderationOpts) return name
-    const moderation = moderateProfile(profile, moderationOpts)
-    return sanitizeDisplayName(name, moderation.ui('displayName'))
-  }, [moderationOpts, profile])
-  const [now] = React.useState(() => Date.now())
-  const timeAgo = useGetTimeAgo()
-  const createdAt = profile.createdAt as string | undefined
-  const daysOld = React.useMemo(() => {
-    if (!createdAt) return Infinity
-    return differenceInSeconds(now, new Date(createdAt)) / 86400
-  }, [createdAt, now])
-
-  if (!createdAt || daysOld > 7) return null
-
-  return (
-    <View style={[a.pr_2xs]}>
-      <Button
-        disabled={disabled}
-        label={_(
-          msg`This user is new here. Press for more info about when they joined.`,
-        )}
-        hitSlop={HITSLOP_10}
-        onPress={control.open}>
-        {({hovered, pressed}) => (
-          <Newskie
-            size="lg"
-            fill="#FFC404"
-            style={{
-              opacity: hovered || pressed ? 0.5 : 1,
-            }}
-          />
-        )}
-      </Button>
-
-      <Dialog.Outer control={control}>
-        <Dialog.Handle />
-        <Dialog.ScrollableInner
-          label={_(msg`New user info dialog`)}
-          style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}>
-          <View style={[a.gap_sm]}>
-            <Text style={[a.font_bold, a.text_xl]}>
-              <Trans>Say hello!</Trans>
-            </Text>
-            <Text style={[a.text_md]}>
-              <Trans>
-                {profileName} joined Bluesky{' '}
-                {timeAgo(createdAt, now, {format: 'long'})} ago
-              </Trans>
-            </Text>
-          </View>
-        </Dialog.ScrollableInner>
-      </Dialog.Outer>
-    </View>
-  )
-}

src/components/StarterPack/ProfileStarterPacks.tsx

@@ -25,12 +25,13 @@ import {useAgent} from 'state/session'
 import {List, ListRef} from 'view/com/util/List'
 import {Text} from 'view/com/util/text/Text'
 import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {LinearGradientBackground} from '#/components/LinearGradientBackground'
 import {Loader} from '#/components/Loader'
 import * as Prompt from '#/components/Prompt'
 import {Default as StarterPackCard} from '#/components/StarterPack/StarterPackCard'
+import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '../icons/Plus'
 
 interface SectionRef {
   scrollToTop: () => void
@@ -47,6 +48,7 @@ interface ProfileFeedgensProps {
   style?: StyleProp<ViewStyle>
   testID?: string
   setScrollViewTag: (tag: number | null) => void
+  isMe: boolean
 }
 
 function keyExtractor(item: AppBskyGraphDefs.StarterPackView) {
@@ -65,6 +67,7 @@ export const ProfileStarterPacks = React.forwardRef<
     style,
     testID,
     setScrollViewTag,
+    isMe,
   },
   ref,
 ) {
@@ -140,7 +143,9 @@ export const ProfileStarterPacks = React.forwardRef<
         onEndReached={onEndReached}
         onRefresh={onRefresh}
         ListEmptyComponent={Empty}
-        ListFooterComponent={items?.length !== 0 ? CreateAnother : undefined}
+        ListFooterComponent={
+          items?.length !== 0 && isMe ? CreateAnother : undefined
+        }
       />
     </View>
   )
@@ -148,19 +153,29 @@ export const ProfileStarterPacks = React.forwardRef<
 
 function CreateAnother() {
   const {_} = useLingui()
+  const t = useTheme()
   const navigation = useNavigation<NavigationProp>()
 
   return (
-    <View style={[a.px_md, a.py_lg, a.justify_between, a.gap_lg]}>
+    <View
+      style={[
+        a.pr_md,
+        a.pt_lg,
+        a.gap_lg,
+        a.border_t,
+        t.atoms.border_contrast_low,
+      ]}>
       <Button
         label={_(msg`Create a starter pack`)}
-        variant="ghost"
+        variant="solid"
-        color="primary"
+        color="secondary"
         size="small"
+        style={[a.self_center]}
         onPress={() => navigation.navigate('StarterPackWizard')}>
         <ButtonText>
           <Trans>Create another</Trans>
         </ButtonText>
+        <ButtonIcon icon={Plus} position="right" />
       </Button>
     </View>
   )
@@ -203,8 +218,8 @@ function Empty() {
   return (
     <LinearGradientBackground
       style={[
-        a.px_md,
+        a.px_lg,
-        a.py_xl,
+        a.py_lg,
         a.justify_between,
         a.gap_lg,
         a.shadow_lg,
@@ -260,26 +275,26 @@ function Empty() {
 
       <Prompt.Outer control={confirmDialogControl}>
         <Prompt.TitleText>
-          <Trans>Generate a starter pack?</Trans>
+          <Trans>Generate a starter pack</Trans>
         </Prompt.TitleText>
         <Prompt.DescriptionText>
           <Trans>
-            You can customize your starter pack with feeds and your favorite
+            Bluesky will choose a set of recommended accounts from people in
-            people if you create your own.
+            your network.
           </Trans>
         </Prompt.DescriptionText>
         <Prompt.Actions>
           <Prompt.Action
             color="primary"
-            cta={_(msg`I'll create one`)}
+            cta={_(msg`Choose for me`)}
-            onPress={() => {
+            onPress={generate}
-              navigation.navigate('StarterPackWizard')
-            }}
           />
           <Prompt.Action
             color="secondary"
-            cta={_(msg`Generate anyway`)}
+            cta={_(msg`Let me choose`)}
-            onPress={generate}
+            onPress={() => {
+              navigation.navigate('StarterPackWizard')
+            }}
           />
         </Prompt.Actions>
       </Prompt.Outer>

src/components/StarterPack/QrCode.tsx

@@ -69,7 +69,7 @@ export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
               <Trans>on</Trans>
             </Text>
             <Logo width={26} fill="white" />
-            <View style={[{marginTop: 7, marginLeft: 3}]}>
+            <View style={[{marginTop: 5, marginLeft: 2.5}]}>
               <Logotype width={68} fill="white" />
             </View>
           </View>

src/components/StarterPack/QrCodeDialog.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import {View} from 'react-native'
 import ViewShot from 'react-native-view-shot'
-import {setImageAsync} from 'expo-clipboard'
 import * as FS from 'expo-file-system'
 import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker'
+import * as Sharing from 'expo-sharing'
 import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -12,14 +12,14 @@ import {nanoid} from 'nanoid/non-secure'
 import {logger} from '#/logger'
 import {saveImageToMediaLibrary} from 'lib/media/manip'
 import {logEvent} from 'lib/statsig/statsig'
-import {isNative} from 'platform/detection'
+import {isNative, isWeb} from 'platform/detection'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DialogControlProps} from '#/components/Dialog'
+import {Loader} from '#/components/Loader'
 import {QrCode} from '#/components/StarterPack/QrCode'
-import {Text} from '#/components/Typography'
 
 export function QrCodeDialog({
   control,
@@ -29,6 +29,7 @@ export function QrCodeDialog({
   starterPack: AppBskyGraphDefs.StarterPackView
 }) {
   const {_} = useLingui()
+  const [isProcessing, setIsProcessing] = React.useState(false)
 
   const ref = React.useRef<ViewShot>(null)
 
@@ -75,6 +76,8 @@ export function QrCodeDialog({
           return
         }
       } else {
+        setIsProcessing(true)
+
         if (!AppBskyGraphStarterpack.isRecord(starterPack.record)) {
           return
         }
@@ -98,24 +101,25 @@ export function QrCodeDialog({
         shareType: 'qrcode',
         qrShareType: 'save',
       })
-      Toast.show(_(msg`QR code saved to your camera roll!`))
+      setIsProcessing(false)
+      Toast.show(
+        isWeb
+          ? _(msg`QR code has been downloaded!`)
+          : _(msg`QR code saved to your camera roll!`),
+      )
       control.close()
     })
   }
 
   const onCopyPress = async () => {
+    setIsProcessing(true)
     ref.current?.capture?.().then(async (uri: string) => {
-      if (isNative) {
-        const base64 = await FS.readAsStringAsync(uri, {encoding: 'base64'})
-        await setImageAsync(base64)
-      } else {
       const canvas = await getCanvas(uri)
       // @ts-expect-error web only
       canvas.toBlob((blob: Blob) => {
         const item = new ClipboardItem({'image/png': blob})
         navigator.clipboard.write([item])
       })
-      }
 
       logEvent('starterPack:share', {
         starterPack: starterPack.uri,
@@ -123,42 +127,62 @@ export function QrCodeDialog({
         qrShareType: 'copy',
       })
       Toast.show(_(msg`QR code copied to your clipboard!`))
+      setIsProcessing(false)
       control.close()
     })
   }
 
+  const onSharePress = async () => {
+    ref.current?.capture?.().then(async (uri: string) => {
+      control.close(() => {
+        Sharing.shareAsync(uri, {mimeType: 'image/png', UTI: 'image/png'}).then(
+          () => {
+            logEvent('starterPack:share', {
+              starterPack: starterPack.uri,
+              shareType: 'qrcode',
+              qrShareType: 'share',
+            })
+          },
+        )
+      })
+    })
+  }
+
   return (
     <Dialog.Outer control={control}>
       <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Create a QR code for a starter pack`)}>
         <View style={[a.flex_1, a.align_center, a.gap_5xl]}>
-          <Text style={[a.font_bold, a.text_xl, a.text_center]}>
-            Share this starter pack with friends!
-          </Text>
           <QrCode starterPack={starterPack} ref={ref} />
-          <View style={[a.flex_row, a.gap_md]}>
+          {isProcessing ? (
+            <View>
+              <Loader size="xl" />
+            </View>
+          ) : (
+            <View style={[a.w_full, a.gap_md]}>
+              <Button
+                label={_(msg`Copy QR code`)}
+                variant="solid"
+                color="primary"
+                size="medium"
+                onPress={isWeb ? onCopyPress : onSharePress}>
+                <ButtonText>
+                  {isWeb ? <Trans>Copy</Trans> : <Trans>Share</Trans>}
+                </ButtonText>
+              </Button>
               <Button
                 label={_(msg`Save QR code`)}
                 variant="solid"
-              color="primary"
+                color="secondary"
                 size="medium"
                 onPress={onSavePress}>
                 <ButtonText>
                   <Trans>Save</Trans>
                 </ButtonText>
               </Button>
-            <Button
-              label={_(msg`Copy QR code`)}
-              variant="solid"
-              color="primary"
-              size="medium"
-              onPress={onCopyPress}>
-              <ButtonText>
-                <Trans>Copy</Trans>
-              </ButtonText>
-            </Button>
             </View>
+          )}
         </View>
       </Dialog.ScrollableInner>
     </Dialog.Outer>

src/components/StarterPack/StarterPackCard.tsx

@@ -8,7 +8,7 @@ import {useLingui} from '@lingui/react'
 import {sanitizeHandle} from 'lib/strings/handles'
 import {useSession} from 'state/session'
 import {atoms as a, useTheme} from '#/alf'
-import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
+import {StarterPack} from '#/components/icons/StarterPack'
 import {Link} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
@@ -25,9 +25,9 @@ export function Default({starterPack}: {starterPack: StarterPackViewBasic}) {
   }
 
   return (
-    <Wrapper creator={starterPack.creator} rkey={rkey}>
+    <Wrapper creator={starterPack.creator} name={record.name} rkey={rkey}>
-      <View style={[a.flex_row, a.gap_md]}>
+      <View style={[a.flex_row, a.gap_sm]}>
-        <StarterPackIcon width={36} height={36} />
+        <StarterPack width={40} gradient="sky" />
         <View>
           <Text style={[a.text_md, a.font_bold, a.leading_snug]}>
             {record.name}
@@ -43,7 +43,9 @@ export function Default({starterPack}: {starterPack: StarterPackViewBasic}) {
         </View>
       </View>
       {record.description && (
-        <Text numberOfLines={3}>{record.description}</Text>
+        <Text numberOfLines={3} style={[a.leading_snug]}>
+          {record.description}
+        </Text>
       )}
       {!!joinedAllTimeCount && joinedAllTimeCount >= 50 && (
         <Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
@@ -55,10 +57,12 @@ export function Default({starterPack}: {starterPack: StarterPackViewBasic}) {
 }
 
 function Wrapper({
+  name,
   creator,
   children,
   rkey,
 }: {
+  name: string
   creator: AppBskyActorDefs.ProfileViewBasic
   rkey: string
   children: React.ReactNode
@@ -68,7 +72,8 @@ function Wrapper({
       to={{
         screen: 'StarterPack',
         params: {name: creator.handle || creator.did, rkey},
-      }}>
+      }}
+      label={name}>
       <View style={[a.flex_1, a.gap_md]}>{children}</View>
     </Link>
   )

src/components/StarterPack/Wizard/WizardEditListDialog.tsx

@@ -31,11 +31,13 @@ export function WizardEditListDialog({
   state,
   dispatch,
   moderationOpts,
+  profile,
 }: {
   control: Dialog.DialogControlProps
   state: WizardState
   dispatch: (action: WizardAction) => void
   moderationOpts: ModerationOpts
+  profile: AppBskyActorDefs.ProfileViewBasic
 }) {
   const {_} = useLingui()
   const t = useTheme()
@@ -46,12 +48,9 @@ export function WizardEditListDialog({
   const getData = () => {
     if (state.currentStep === 'Feeds') return state.feeds
 
-    const myIndex = state.profiles.findIndex(p => p.did === currentAccount?.did)
-
     return [
-      state.profiles[myIndex],
+      profile,
-      ...state.profiles.slice(0, myIndex),
+      ...state.profiles.filter(p => p.did !== currentAccount?.did),
-      ...state.profiles.slice(myIndex + 1),
     ]
   }
 

src/components/StarterPack/Wizard/WizardListCard.tsx

@@ -51,6 +51,10 @@ function WizardListCard({
   return (
     <Pressable
       accessibilityRole="button"
+      accessibilityLabel={displayName}
+      accessibilityHint={
+        included ? _(msg`Remove from list`) : _(msg`Add to list`)
+      }
       style={[
         a.flex_row,
         a.align_center,
@@ -81,6 +85,7 @@ function WizardListCard({
           {subtitle}
         </Text>
       </View>
+      <View accessible={false}>
         <Toggle.Item
           name={type === 'user' ? _(msg`Person toggle`) : _(msg`Feed toggle`)}
           label={
@@ -93,6 +98,7 @@ function WizardListCard({
           onChange={onPress}>
           <Checkbox />
         </Toggle.Item>
+      </View>
     </Pressable>
   )
 }
@@ -110,9 +116,9 @@ export function WizardProfileCard({
 }) {
   const {currentAccount} = useSession()
 
-  const included = state.profiles.some(p => p.did === profile.did)
   const isMe = profile.did === currentAccount?.did
-  const disabled = isMe || state.profiles.length >= 50
+  const included = isMe || state.profiles.some(p => p.did === profile.did)
+  const disabled = isMe || (!included && state.profiles.length >= 49)
   const moderationUi = moderateProfile(profile, moderationOpts).ui('avatar')
   const displayName = profile.displayName
     ? sanitizeDisplayName(profile.displayName)

src/components/hooks/useStarterPackEntry.ts

@@ -4,6 +4,8 @@ import {httpStarterPackUriToAtUri} from 'lib/strings/starter-pack'
 import {useSetActiveStarterPack} from 'state/shell/starter-pack'
 
 export function useStarterPackEntry() {
+  const [ready, setReady] = React.useState(false)
+
   const setActiveStarterPack = useSetActiveStarterPack()
 
   React.useEffect(() => {
@@ -19,7 +21,9 @@ export function useStarterPackEntry() {
         isClip,
       })
     }
+
+    setReady(true)
   }, [setActiveStarterPack])
 
-  return true
+  return ready
 }

src/components/icons/StarterPack.tsx

@@ -0,0 +1,8 @@
+import {createMultiPathSVG} from './TEMPLATE'
+
+export const StarterPack = createMultiPathSVG({
+  paths: [
+    'M11.26 5.227 5.02 6.899c-.734.197-1.17.95-.973 1.685l1.672 6.24c.197.734.951 1.17 1.685.973l6.24-1.672c.734-.197 1.17-.951.973-1.685L12.945 6.2a1.375 1.375 0 0 0-1.685-.973Zm-6.566.459a2.632 2.632 0 0 0-1.86 3.223l1.672 6.24a2.632 2.632 0 0 0 3.223 1.861l6.24-1.672a2.631 2.631 0 0 0 1.861-3.223l-1.672-6.24a2.632 2.632 0 0 0-3.223-1.861l-6.24 1.672Z',
+    'M15.138 18.411a4.606 4.606 0 1 0 0-9.211 4.606 4.606 0 0 0 0 9.211Zm0 1.257a5.862 5.862 0 1 0 0-11.724 5.862 5.862 0 0 0 0 11.724Z',
+  ],
+})

src/components/icons/StarterPackIcon.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react'
-import Svg, {Defs, LinearGradient, Path, Stop} from 'react-native-svg'
-export function StarterPackIcon({...props}: React.ComponentProps<typeof Svg>) {
-  return (
-    <Svg fill="none" viewBox="0 0 153 133" {...props}>
-      <Path
-        fill="url(#a)"
-        fillRule="evenodd"
-        d="m60.196 105.445-18.1 4.85c-11.73 3.143-23.788-3.819-26.931-15.55L1.19 42.597c-3.143-11.731 3.819-23.79 15.55-26.932L68.889 1.69C80.62-1.452 92.68 5.51 95.821 17.241l4.667 17.416a49.7 49.7 0 0 1 3.522-.125c27.053 0 48.984 21.931 48.984 48.984S131.063 132.5 104.01 132.5c-19.17 0-35.769-11.012-43.814-27.055ZM19.457 25.804 71.606 11.83c6.131-1.643 12.434 1.996 14.076 8.127l4.44 16.571c-20.289 5.987-35.096 24.758-35.096 46.988 0 4.157.517 8.193 1.492 12.047l-17.138 4.593c-6.131 1.642-12.434-1.996-14.077-8.128L11.33 39.88c-1.643-6.131 1.996-12.434 8.127-14.077Zm83.812 19.232c.246-.005.493-.007.741-.007 21.256 0 38.487 17.231 38.487 38.487s-17.231 38.488-38.487 38.488c-14.29 0-26.76-7.788-33.4-19.35l23.635-6.333c11.731-3.143 18.693-15.2 15.55-26.932l-6.526-24.353Zm-10.428 1.638 6.815 25.432c1.642 6.131-1.996 12.434-8.128 14.076l-24.867 6.664a38.57 38.57 0 0 1-1.139-9.33c0-17.372 11.51-32.056 27.32-36.842Z"
-        clipRule="evenodd"
-      />
-      <Defs>
-        <LinearGradient
-          id="a"
-          x1={76.715}
-          x2={76.715}
-          y1={0.937}
-          y2={132.5}
-          gradientUnits="userSpaceOnUse">
-          <Stop stopColor="#0A7AFF" />
-          <Stop offset={1} stopColor="#59B9FF" />
-        </LinearGradient>
-      </Defs>
-    </Svg>
-  )
-}

src/components/icons/TEMPLATE.tsx

@@ -30,7 +30,7 @@ export const IconTemplate_Stroke2_Corner0_Rounded = React.forwardRef(
 
 export function createSinglePathSVG({path}: {path: string}) {
   return React.forwardRef<Svg, Props>(function LogoImpl(props, ref) {
-    const {fill, size, style, ...rest} = useCommonSVGProps(props)
+    const {fill, size, style, gradient, ...rest} = useCommonSVGProps(props)
 
     return (
       <Svg
@@ -41,8 +41,37 @@ export function createSinglePathSVG({path}: {path: string}) {
         width={size}
         height={size}
         style={[style]}>
+        {gradient}
         <Path fill={fill} fillRule="evenodd" clipRule="evenodd" d={path} />
       </Svg>
     )
   })
 }
+
+export function createMultiPathSVG({paths}: {paths: string[]}) {
+  return React.forwardRef<Svg, Props>(function LogoImpl(props, ref) {
+    const {fill, size, style, gradient, ...rest} = useCommonSVGProps(props)
+
+    return (
+      <Svg
+        fill="none"
+        {...rest}
+        ref={ref}
+        viewBox="0 0 24 24"
+        width={size}
+        height={size}
+        style={[style]}>
+        {gradient}
+        {paths.map((path, i) => (
+          <Path
+            key={i}
+            fill={fill}
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d={path}
+          />
+        ))}
+      </Svg>
+    )
+  })
+}

src/components/icons/common.ts

@@ -1,32 +0,0 @@
-import {StyleSheet, TextProps} from 'react-native'
-import type {PathProps, SvgProps} from 'react-native-svg'
-
-import {tokens} from '#/alf'
-
-export type Props = {
-  fill?: PathProps['fill']
-  style?: TextProps['style']
-  size?: keyof typeof sizes
-} & Omit<SvgProps, 'style' | 'size'>
-
-export const sizes = {
-  xs: 12,
-  sm: 16,
-  md: 20,
-  lg: 24,
-  xl: 28,
-}
-
-export function useCommonSVGProps(props: Props) {
-  const {fill, size, ...rest} = props
-  const style = StyleSheet.flatten(rest.style)
-  const _fill = fill || style?.color || tokens.color.blue_500
-  const _size = Number(size ? sizes[size] : rest.width || sizes.md)
-
-  return {
-    fill: _fill,
-    size: _size,
-    style,
-    ...rest,
-  }
-}

src/components/icons/common.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import {StyleSheet, TextProps} from 'react-native'
+import type {PathProps, SvgProps} from 'react-native-svg'
+import {Defs, LinearGradient, Stop} from 'react-native-svg'
+import {nanoid} from 'nanoid/non-secure'
+
+import {tokens} from '#/alf'
+
+export type Props = {
+  fill?: PathProps['fill']
+  style?: TextProps['style']
+  size?: keyof typeof sizes
+  gradient?: keyof typeof tokens.gradients
+} & Omit<SvgProps, 'style' | 'size'>
+
+export const sizes = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28,
+}
+
+export function useCommonSVGProps(props: Props) {
+  const {fill, size, gradient, ...rest} = props
+  const style = StyleSheet.flatten(rest.style)
+  const _size = Number(size ? sizes[size] : rest.width || sizes.md)
+  let _fill = fill || style?.color || tokens.color.blue_500
+  let gradientDef = null
+
+  if (gradient && tokens.gradients[gradient]) {
+    const id = gradient + '_' + nanoid()
+    const config = tokens.gradients[gradient]
+    _fill = `url(#${id})`
+    gradientDef = (
+      <Defs>
+        <LinearGradient
+          id={id}
+          x1="0"
+          y1="0"
+          x2="100%"
+          y2="0"
+          gradientTransform="rotate(45)">
+          {config.values.map(([stop, fill]) => (
+            <Stop key={stop} offset={stop} stopColor={fill} />
+          ))}
+        </LinearGradient>
+      </Defs>
+    )
+  }
+
+  return {
+    fill: _fill,
+    size: _size,
+    style,
+    gradient: gradientDef,
+    ...rest,
+  }
+}

src/lib/generate-starterpack.ts

@@ -34,16 +34,14 @@ export const createStarterPackList = async ({
   if (!list) throw new Error('List creation failed')
   await agent.com.atproto.repo.applyWrites({
     repo: agent.session!.did,
-    writes: profiles.map(p => ({
+    writes: [
-      $type: 'com.atproto.repo.applyWrites#create',
+      createListItem({did: agent.session!.did, listUri: list.uri}),
-      collection: 'app.bsky.graph.listitem',
+    ].concat(
-      value: {
+      profiles
-        $type: 'app.bsky.graph.listitem',
+        // Ensure we don't have ourselves in this list twice
-        subject: p.did,
+        .filter(p => p.did !== agent.session!.did)
-        list: list?.uri,
+        .map(p => createListItem({did: p.did, listUri: list.uri})),
-        createdAt: new Date().toISOString(),
+    ),
-      },
-    })),
   })
 
   return list
@@ -80,8 +78,8 @@ export async function generateStarterpack({
       return 'ERROR'
     }
 
-    profiles = [profile, ...profiles]
+    // We include ourselves when we make the list
-    if (profiles.length < 8) {
+    if (profiles.length < 7) {
       return 'NOT_ENOUGH_FOLLOWERS'
     }
 
@@ -111,7 +109,20 @@ export async function generateStarterpack({
       )
     ).uri
   } catch (e: unknown) {
-    logger.error('Failed to generate starter pack', {error: e})
+    logger.error('Failed to generate starter pack', {safeMessage: e})
     return 'ERROR'
   }
 }
+
+function createListItem({did, listUri}: {did: string; listUri: string}) {
+  return {
+    $type: 'com.atproto.repo.applyWrites#create',
+    collection: 'app.bsky.graph.listitem',
+    value: {
+      $type: 'app.bsky.graph.listitem',
+      subject: did,
+      list: listUri,
+      createdAt: new Date().toISOString(),
+    },
+  }
+}

src/lib/routes/types.ts

@@ -42,6 +42,7 @@ export type CommonNavigatorParams = {
   MessagesConversation: {conversation: string; embed?: string}
   MessagesSettings: undefined
   Feeds: undefined
+  Start: {name: string; rkey: string}
   StarterPack: {name: string; rkey: string}
   StarterPackWizard: undefined
   StarterPackEdit: {
@@ -98,6 +99,7 @@ export type AllNavigatorParams = CommonNavigatorParams & {
   Hashtag: {tag: string; author?: string}
   MessagesTab: undefined
   Messages: {animation?: 'push' | 'pop'}
+  Start: {name: string; rkey: string}
   StarterPack: {name: string; rkey: string}
   StarterPackWizard: undefined
   StarterPackEdit: {

src/lib/statsig/events.ts

@@ -155,7 +155,7 @@ export type LogEvents = {
   'starterPack:share': {
     starterPack: string
     shareType: 'link' | 'qrcode'
-    qrShareType?: 'save' | 'copy'
+    qrShareType?: 'save' | 'copy' | 'share'
   }
   'starterPack:followAll': {
     starterPack: string

src/lib/strings/starter-pack.ts

@@ -14,8 +14,8 @@ export function createStarterPackLinkFromAndroidReferrer(
     if (!utmContent) return null
     if (utmSource !== 'bluesky') return null
 
-    // This should be a string like `starterpack-haileyok.com-rkey`
+    // This should be a string like `starterpack_haileyok.com_rkey`
-    const contentParts = utmContent.split('-')
+    const contentParts = utmContent.split('_')
 
     if (contentParts[0] !== 'starterpack') return null
     if (contentParts.length !== 3) return null
@@ -46,10 +46,10 @@ export function parseStarterPackUri(uri?: string): {
     } else {
       const url = new URL(uri)
       const parts = url.pathname.split('/')
-      const name = parts[2]
+      const [_, path, name, rkey] = parts
-      const rkey = parts[3]
 
       if (parts.length !== 4) return null
+      if (path !== 'starter-pack' && path !== 'start') return null
       if (!name || !rkey) return null
       return {
         name,
@@ -66,7 +66,7 @@ export function createStarterPackGooglePlayUri(
   rkey: string,
 ): string | null {
   if (!name || !rkey) return null
-  return `https://play.google.com/store/apps/details?id=xyz.blueskyweb.app&referrer=utm_source%3Dbluesky%26utm_medium%3Dstarterpack%26utm_content%3Dstarterpack-${name}-${rkey}`
+  return `https://play.google.com/store/apps/details?id=xyz.blueskyweb.app&referrer=utm_source%3Dbluesky%26utm_medium%3Dstarterpack%26utm_content%3Dstarterpack_${name}_${rkey}`
 }
 
 export function httpStarterPackUriToAtUri(httpUri?: string): string | null {

src/routes.ts

@@ -1,7 +1,7 @@
 import {Router} from 'lib/routes/router'
 
 export const router = new Router({
-  Home: ['/', '/start/:name/:rkey'],
+  Home: '/',
   Search: '/search',
   Feeds: '/feeds',
   Notifications: '/notifications',
@@ -41,7 +41,8 @@ export const router = new Router({
   Messages: '/messages',
   MessagesSettings: '/messages/settings',
   MessagesConversation: '/messages/:conversation',
+  Start: '/start/:name/:rkey',
+  StarterPackEdit: '/starter-pack/edit/:rkey',
   StarterPack: '/starter-pack/:name/:rkey',
   StarterPackWizard: '/starter-pack/create',
-  StarterPackEdit: '/starter-pack/edit/:rkey',
 })

src/screens/Onboarding/StepFinished.tsx

@@ -55,11 +55,12 @@ export function StepFinished() {
 
   const finishOnboarding = React.useCallback(async () => {
     setSaving(true)
-    try {
+
     let starterPack: AppBskyGraphDefs.StarterPackView | undefined
     let listItems: AppBskyGraphDefs.ListItemView[] | undefined
 
     if (activeStarterPack?.uri) {
+      try {
         const spRes = await agent.app.bsky.graph.getStarterPack({
           starterPack: activeStarterPack.uri,
         })
@@ -72,8 +73,13 @@ export function StepFinished() {
           })
           listItems = listRes.data.items
         }
+      } catch (e) {
+        logger.error('Failed to fetch starter pack', {safeMessage: e})
+        // don't tell the user, just get them through onboarding.
+      }
     }
 
+    try {
       const {interestsStepResults, profileStepResults} = state
       const {selectedInterests} = interestsStepResults
 
@@ -144,9 +150,6 @@ export function StepFinished() {
     } catch (e: any) {
       logger.info(`onboarding: bulk save failed`)
       logger.error(e)
-      // If there was an error encountered, we need to just clear the starter pack so we don't break things for subsequent
-      // app restarts
-      setActiveStarterPack(undefined)
       // don't alert the user, just let them into their account
     }
 

src/screens/Signup/index.tsx

@@ -1,6 +1,11 @@
 import React from 'react'
 import {View} from 'react-native'
-import {LayoutAnimationConfig} from 'react-native-reanimated'
+import Animated, {
+  FadeIn,
+  FadeOut,
+  LayoutAnimationConfig,
+} from 'react-native-reanimated'
+import {AppBskyGraphStarterpack} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -11,6 +16,8 @@ import {createFullHandle} from '#/lib/strings/handles'
 import {logger} from '#/logger'
 import {useServiceQuery} from '#/state/queries/service'
 import {useAgent} from '#/state/session'
+import {useStarterPackQuery} from 'state/queries/useStarterPackQuery'
+import {useActiveStarterPack} from 'state/shell/starter-pack'
 import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout'
 import {
   initialState,
@@ -26,6 +33,7 @@ import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
 import {Button, ButtonText} from '#/components/Button'
 import {Divider} from '#/components/Divider'
+import {LinearGradientBackground} from '#/components/LinearGradientBackground'
 import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
@@ -38,6 +46,11 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
   const {gtMobile} = useBreakpoints()
   const agent = useAgent()
 
+  const activeStarterPack = useActiveStarterPack()
+  const {data: starterPack} = useStarterPackQuery({
+    uri: activeStarterPack?.uri,
+  })
+
   const {
     data: serviceInfo,
     isFetching,
@@ -142,6 +155,31 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
         description={_(msg`We're so excited to have you join us!`)}
         scrollable>
         <View testID="createAccount" style={a.flex_1}>
+          {state.activeStep === SignupStep.INFO &&
+          starterPack &&
+          AppBskyGraphStarterpack.isRecord(starterPack.record) ? (
+            <Animated.View entering={FadeIn} exiting={FadeOut}>
+              <LinearGradientBackground
+                style={[a.mx_lg, a.p_lg, a.gap_sm, a.rounded_sm]}>
+                <Text style={[a.font_bold, a.text_xl, {color: 'white'}]}>
+                  {starterPack.record.name}
+                </Text>
+                <Text style={[{color: 'white'}]}>
+                  {starterPack.feeds?.length ? (
+                    <Trans>
+                      You'll follow the suggested users and feeds once you
+                      finish creating your account!
+                    </Trans>
+                  ) : (
+                    <Trans>
+                      You'll follow the suggested users once you finish creating
+                      your account!
+                    </Trans>
+                  )}
+                </Text>
+              </LinearGradientBackground>
+            </Animated.View>
+          ) : null}
           <View
             style={[
               a.flex_1,

src/screens/StarterPack/StarterPackLandingScreen.tsx

@@ -7,6 +7,7 @@ import {
   AtUri,
   ModerationOpts,
 } from '@atproto/api'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -139,12 +140,12 @@ function LandingScreenLoaded({
   return (
     <CenteredView style={a.flex_1}>
       <ScrollView
-        style={[a.flex_1]}
+        style={[a.flex_1, t.atoms.bg]}
         contentContainerStyle={{paddingBottom: 100}}>
         <LinearGradientBackground
           style={[
             a.align_center,
-            a.gap_lg,
+            a.gap_sm,
             a.px_lg,
             a.py_2xl,
             isTabletOrDesktop && {
@@ -159,60 +160,102 @@ function LandingScreenLoaded({
             <Logo width={76} fill="white" />
           </View>
           <Text
-            style={[a.font_bold, a.text_5xl, a.text_center, {color: 'white'}]}>
+            style={[
+              a.font_bold,
+              a.text_4xl,
+              a.text_center,
+              a.leading_tight,
+              {color: 'white'},
+            ]}>
             {record.name}
           </Text>
           <Text
-            style={[a.text_center, a.font_bold, a.text_md, {color: 'white'}]}>
+            style={[
+              a.text_center,
+              a.font_semibold,
+              a.text_md,
+              {color: 'white'},
+            ]}>
             Starter pack by {creator.displayName || `@${creator.handle}`}
           </Text>
         </LinearGradientBackground>
-        <View style={[a.gap_2xl, a.mx_lg, {marginTop: 50}]}>
+        <View style={[a.gap_2xl, a.mx_lg, a.my_2xl]}>
           {record.description ? (
             <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
               {record.description}
             </Text>
           ) : null}
+          <View style={[a.gap_sm]}>
             <Button
-            label={_(msg`Join the conversation now!`)}
+              label={_(msg`Join Bluesky`)}
               onPress={onJoinPress}
               variant="solid"
               color="primary"
               size="large">
               <ButtonText style={[a.text_lg]}>
-              <Trans>Join the conversation now!</Trans>
+                <Trans>Join Bluesky</Trans>
               </ButtonText>
             </Button>
             {joinedWeekCount && joinedWeekCount >= 25 ? (
+              <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+                <FontAwesomeIcon
+                  icon="arrow-trend-up"
+                  size={12}
+                  color={t.atoms.text_contrast_medium.color}
+                />
                 <Text
                   style={[
-                a.font_bold,
+                    a.font_semibold,
-                a.text_md,
+                    a.text_sm,
-                a.text_center,
                     t.atoms.text_contrast_medium,
-              ]}>
+                  ]}
-              {joinedWeekCount} joined this week!
+                  numberOfLines={1}>
+                  123,659 joined this week
                 </Text>
+              </View>
             ) : null}
-          <View style={{height: 4}} />
+          </View>
           <View style={[a.gap_3xl]}>
-            {starterPack.feeds?.length ? (
+            {Boolean(listItemsSample?.length) && (
               <View style={[a.gap_md]}>
-                <Text style={[a.font_bold, a.text_lg]}>
+                <Text style={[a.font_heavy, a.text_lg]}>
-                  These great feeds will be available after signing up!
+                  {listItemsCount <= 8 ? (
+                    <Trans>You'll follow these people right away</Trans>
+                  ) : (
+                    <Trans>
+                      You'll follow these people and {listItemsCount - 8} others
+                    </Trans>
+                  )}
+                </Text>
+                <View>
+                  {starterPack.listItemsSample?.slice(0, 8).map(item => (
+                    <View
+                      key={item.subject.did}
+                      style={[
+                        a.py_lg,
+                        a.px_md,
+                        a.border_t,
+                        t.atoms.border_contrast_low,
+                      ]}>
+                      <ProfileCard profile={item.subject} />
+                    </View>
+                  ))}
+                </View>
+              </View>
+            )}
+            {feeds?.length ? (
+              <View style={[a.gap_md]}>
+                <Text style={[a.font_heavy, a.text_lg]}>
+                  <Trans>You'll stay updated with these feeds</Trans>
                 </Text>
 
+                <View style={[{pointerEvents: 'none'}]}>
+                  {feeds?.map(feed => (
                     <View
                       style={[
-                    t.atoms.bg_contrast_25,
+                        a.py_lg,
-                    a.rounded_sm,
+                        a.px_md,
-                    {pointerEvents: 'none'},
+                        a.border_t,
-                  ]}>
-                  {starterPack.feeds?.map((feed, index) => (
-                    <View
-                      style={[
-                        a.p_lg,
-                        index !== 0 && a.border_t,
                         t.atoms.border_contrast_low,
                       ]}
                       key={feed.uri}>
@@ -222,61 +265,13 @@ function LandingScreenLoaded({
                 </View>
               </View>
             ) : null}
-
-            {Boolean(listItemsSample?.length) && (
-              <View style={[a.gap_md]}>
-                <Text style={[a.font_bold, a.text_lg]}>
-                  {feeds?.length ? (
-                    <>
-                      {listItemsCount <= 8 ? (
-                        <Trans>
-                          You'll also follow these people right away!
-                        </Trans>
-                      ) : (
-                        <Trans>
-                          You'll also follow these people and{' '}
-                          {listItemsCount - 8} others!
-                        </Trans>
-                      )}
-                    </>
-                  ) : (
-                    <>
-                      {listItemsCount <= 8 ? (
-                        <Trans>You'll follow these people right away!</Trans>
-                      ) : (
-                        <Trans>
-                          You'll follow these people and {listItemsCount - 8}{' '}
-                          others!
-                        </Trans>
-                      )}
-                    </>
-                  )}
-                </Text>
-                <View style={[t.atoms.bg_contrast_25, a.rounded_sm]}>
-                  {starterPack.listItemsSample
-                    ?.slice(0, 8)
-                    .map((item, index) => (
-                      <View
-                        key={item.subject.did}
-                        style={[
-                          a.p_lg,
-                          index !== 0 && a.border_t,
-                          t.atoms.border_contrast_low,
-                        ]}>
-                        <ProfileCard profile={item.subject} />
-                      </View>
-                    ))}
-                </View>
-              </View>
-            )}
-          </View>
           </View>
           <Button
             label={_(msg`Signup without a starter pack`)}
-          variant="ghost"
+            variant="solid"
             color="secondary"
             size="medium"
-          style={[a.mt_2xl]}
+            style={[a.py_lg]}
             onPress={() => {
               setActiveStarterPack(undefined)
               setScreenState(LoggedOutScreenState.S_CreateAccount)
@@ -285,6 +280,7 @@ function LandingScreenLoaded({
               <Trans>Signup without a starter pack</Trans>
             </ButtonText>
           </Button>
+        </View>
       </ScrollView>
       <AppClipOverlay
         visible={appClipOverlayVisible}

src/screens/StarterPack/StarterPackScreen.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {Pressable, View} from 'react-native'
 import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
@@ -136,6 +137,7 @@ function Header({
 
   const {record, creator} = starterPack
   const isOwn = creator?.did === currentAccount?.did
+  const joinedAllTimeCount = starterPack.joinedAllTimeCount ?? 0
 
   const onFollowAll = async () => {
     if (!starterPack.list) return
@@ -182,7 +184,7 @@ function Header({
         avatar={undefined}
         creator={creator}
         avatarType="starter-pack">
-        <View style={[a.gap_sm, isOwn ? a.flex_row_reverse : a.flex_row]}>
+        <View style={[a.flex_row, a.gap_sm]}>
           {isOwn ? (
             <Button
               label={_(msg`Edit`)}
@@ -217,17 +219,29 @@ function Header({
           />
         </View>
       </ProfileSubpageHeader>
-      <View style={[a.px_md, a.py_lg, a.gap_md]}>
+      {record.description || joinedAllTimeCount >= 25 ? (
+        <View style={[a.px_lg, a.pt_md, a.pb_sm, a.gap_md]}>
+          {record.description ? (
             <Text style={[a.text_md]}>{record.description}</Text>
-        {starterPack.joinedWeekCount && starterPack.joinedWeekCount >= 25 ? (
+          ) : null}
-          <Text style={[a.font_bold, a.text_md, t.atoms.text_contrast_medium]}>
+          {joinedAllTimeCount >= 25 ? (
+            <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+              <FontAwesomeIcon
+                icon="arrow-trend-up"
+                size={12}
+                color={t.atoms.text_contrast_medium.color}
+              />
+              <Text
+                style={[a.font_bold, a.text_sm, t.atoms.text_contrast_medium]}>
                 <Trans>
                   {starterPack.joinedAllTimeCount || 0} people have used this
                   starter pack!
                 </Trans>
               </Text>
+            </View>
           ) : null}
         </View>
+      ) : null}
       <QrCodeDialog control={qrCodeDialogControl} starterPack={starterPack} />
       <ReportDialog
         control={reportDialogControl}

src/screens/StarterPack/Wizard/State.tsx

@@ -7,6 +7,7 @@ import {
 import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
 import {msg} from '@lingui/macro'
 
+import {useSession} from 'state/session'
 import * as Toast from '#/view/com/util/Toast'
 
 const steps = ['Details', 'Profiles', 'Feeds'] as const
@@ -119,6 +120,8 @@ export function Provider({
   listItems?: AppBskyGraphDefs.ListItemView[]
   children: React.ReactNode
 }) {
+  const {currentAccount} = useSession()
+
   const createInitialState = (): State => {
     if (starterPack && AppBskyGraphStarterpack.isRecord(starterPack.record)) {
       return {
@@ -126,7 +129,10 @@ export function Provider({
         currentStep: 'Details',
         name: starterPack.record.name,
         description: starterPack.record.description,
-        profiles: listItems?.map(i => i.subject) ?? [],
+        profiles:
+          listItems
+            ?.map(i => i.subject)
+            .filter(p => p.did !== currentAccount?.did) ?? [],
         feeds: starterPack.feeds ?? [],
         processing: false,
         transitionDirection: 'Forward',

src/screens/StarterPack/Wizard/StepDetails.tsx

@@ -8,7 +8,7 @@ import {useSession} from 'state/session'
 import {useWizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, useTheme} from '#/alf'
 import * as TextField from '#/components/forms/TextField'
-import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
+import {StarterPack} from '#/components/icons/StarterPack'
 import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
 import {Text} from '#/components/Typography'
 
@@ -26,10 +26,8 @@ export function StepDetails() {
   return (
     <ScreenTransition direction={state.transitionDirection}>
       <View style={[a.px_xl, a.gap_xl, a.mt_4xl]}>
-        <View style={[{height: 90}]}>
-          <StarterPackIcon />
-        </View>
         <View style={[a.gap_md, a.align_center, a.px_md, a.mb_md]}>
+          <StarterPack width={90} gradient="sky" />
           <Text style={[a.font_bold, a.text_3xl]}>
             <Trans>Invites, but personal</Trans>
           </Text>

src/screens/StarterPack/Wizard/StepProfiles.tsx

@@ -70,8 +70,9 @@ export function StepProfiles({
         sideBorders={false}
         style={[a.flex_1]}
         onEndReached={() => {
-          console.log('test')
+          if (!query) {
             fetchNextPage()
+          }
         }}
         onEndReachedThreshold={isNative ? 2 : 0.25}
         ListEmptyComponent={

src/screens/StarterPack/Wizard/index.tsx

@@ -104,7 +104,7 @@ export function Wizard({
           isLoadingStarterPack || isLoadingProfiles || isLoadingProfile
         }
         isError={isErrorStarterPack || isErrorProfiles || isErrorProfile}
-        errorMessage={_(msg`Could not find that starter pack`)}
+        errorMessage={_(msg`That starter pack could not be found.`)}
       />
     )
   } else if (isEdit && starterPack?.creator.did !== currentAccount?.did) {
@@ -112,7 +112,7 @@ export function Wizard({
       <ListMaybePlaceholder
         isLoading={false}
         isError={true}
-        errorMessage={_(msg`Could not find that starter pack`)}
+        errorMessage={_(msg`That starter pack could not be found.`)}
       />
     )
   }
@@ -182,11 +182,18 @@ function WizardInner({
     }, [setMinimalShellMode, setEnabled]),
   )
 
-  const defaultName = _(
+  const getDefaultName = () => {
-    msg`${
+    let displayName
-      currentProfile?.displayName || `@${currentProfile?.handle}`
+    if (
-    }'s Starter Pack`,
+      currentProfile?.displayName != null &&
-  ).slice(0, 50)
+      currentProfile?.displayName !== ''
+    ) {
+      displayName = sanitizeDisplayName(currentProfile.displayName)
+    } else {
+      displayName = sanitizeHandle(currentProfile!.handle)
+    }
+    return _(msg`${displayName}'s Starter Pack`).slice(0, 50)
+  }
 
   const wizardUiStrings: Record<
     WizardStep,
@@ -273,7 +280,7 @@ function WizardInner({
           }
         } else {
           list = await createStarterPackList({
-            name: state.name ?? defaultName,
+            name: state.name ?? getDefaultName(),
             description: state.description,
             descriptionFacets: [],
             profiles: state.profiles,
@@ -286,7 +293,7 @@ function WizardInner({
           collection: 'app.bsky.graph.starterpack',
           rkey,
           record: {
-            name: state.name ?? defaultName,
+            name: state.name ?? getDefaultName(),
             description: state.description,
             descriptionFacets: [],
             list: list?.uri,
@@ -299,9 +306,8 @@ function WizardInner({
           validate: false, // TODO remove!
         })
 
+        setTimeout(async () => {
           await invalidateQueries()
-
-        setTimeout(() => {
           if (navigation.canGoBack()) {
             navigation.goBack()
           } else {
@@ -311,11 +317,11 @@ function WizardInner({
             })
           }
           dispatch({type: 'SetProcessing', processing: false})
-        }, 1000)
+        }, 2000)
       } else {
         // Creating a new starter pack
         const list = await createStarterPackList({
-          name: state.name ?? defaultName,
+          name: state.name ?? getDefaultName(),
           description: state.description,
           descriptionFacets: [],
           profiles: state.profiles,
@@ -327,7 +333,7 @@ function WizardInner({
             validate: false,
           },
           {
-            name: state.name ?? defaultName,
+            name: state.name ?? getDefaultName(),
             description: state.description,
             descriptionFacets: [],
             list: list.uri,
@@ -346,16 +352,18 @@ function WizardInner({
         })
 
         const newRkey = new AtUri(res.uri).rkey
-        setTimeout(() => {
+
+        setTimeout(async () => {
+          await invalidateQueries()
           navigation.replace('StarterPack', {
             name: currentAccount!.handle,
             rkey: newRkey,
           })
           dispatch({type: 'SetProcessing', processing: false})
-        }, 1000)
+        }, 2000)
       }
     } catch (e: unknown) {
-      logger.error('Failed to create starter pack', {error: e})
+      logger.error('Failed to create starter pack', {safeMessage: e})
       Toast.show(_(msg`Failed to create starter pack`))
       dispatch({type: 'SetProcessing', processing: false})
       return
@@ -376,9 +384,12 @@ function WizardInner({
         repo: currentAccount!.did,
         rkey,
       })
+
+      setTimeout(async () => {
         await invalidateQueries()
         logEvent('starterPack:delete', {})
         navigation.popToTop()
+      }, 2000)
     } catch (e) {
       Toast.show(_(msg`Failed to delete starter pack`))
     } finally {
@@ -426,7 +437,7 @@ function WizardInner({
             accessibilityHint={_(msg`Go back to the previous step`)}
             onPress={() => {
               if (state.currentStep === 'Details') {
-                navigation.goBack()
+                navigation.pop()
               } else {
                 dispatch({type: 'Back'})
               }
@@ -715,6 +726,7 @@ function Footer({
         state={state}
         dispatch={dispatch}
         moderationOpts={moderationOpts}
+        profile={profile}
       />
     </View>
   )

src/state/queries/useStarterPackQuery.ts

@@ -1,11 +1,21 @@
 import {StarterPackView} from '@atproto/api/dist/client/types/app/bsky/graph/defs'
 import {QueryClient, useQuery} from '@tanstack/react-query'
 
-import {httpStarterPackUriToAtUri} from 'lib/strings/starter-pack'
+import {
+  httpStarterPackUriToAtUri,
+  parseStarterPackUri,
+} from 'lib/strings/starter-pack'
 import {useAgent} from 'state/session'
 
 const RQKEY_ROOT = 'starter-pack'
-const RQKEY = (did?: string, rkey?: string) => [RQKEY_ROOT, did, rkey]
+const RQKEY = (did?: string, rkey?: string) => {
+  if (did?.startsWith('https://') || did?.startsWith('at://')) {
+    const parsed = parseStarterPackUri(did)
+    return [RQKEY_ROOT, parsed?.name, parsed?.rkey]
+  } else {
+    return [RQKEY_ROOT, did, rkey]
+  }
+}
 
 export function useStarterPackQuery({
   uri,

src/state/shell/logged-out.tsx

@@ -1,5 +1,8 @@
 import React from 'react'
 
+import {useSession} from 'state/session'
+import {useActiveStarterPack} from 'state/shell/starter-pack'
+
 type State = {
   showLoggedOut: boolean
   /**
@@ -22,7 +25,7 @@ type Controls = {
     /**
      * The did of the account to populate the login form with.
      */
-    requestedAccount?: string | 'none' | 'new'
+    requestedAccount?: string | 'none' | 'new' | 'starterpack'
   }) => void
   /**
    * Clears the requested account so that next time the logged out view is
@@ -43,9 +46,12 @@ const ControlsContext = React.createContext<Controls>({
 })
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
+  const activeStarterPack = useActiveStarterPack()
+  const {hasSession} = useSession()
+  const shouldShowStarterPack = Boolean(activeStarterPack?.uri) && !hasSession
   const [state, setState] = React.useState<State>({
-    showLoggedOut: false,
+    showLoggedOut: shouldShowStarterPack,
-    requestedAccountSwitchTo: undefined,
+    requestedAccountSwitchTo: shouldShowStarterPack ? 'starterpack' : undefined,
   })
 
   const controls = React.useMemo<Controls>(

src/view/com/auth/LoggedOut.tsx

@@ -7,7 +7,6 @@ import {useNavigation} from '@react-navigation/native'
 
 import {useAnalytics} from '#/lib/analytics/analytics'
 import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {logEvent} from '#/lib/statsig/statsig'
 import {s} from '#/lib/styles'
 import {isIOS, isNative} from '#/platform/detection'
@@ -51,7 +50,6 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
       return ScreenState.S_LoginOrCreateAccount
     }
   })
-  const {isMobile} = useWebMediaQueries()
   const {clearRequestedAccount} = useLoggedOutViewControls()
   const navigation = useNavigation<NavigationProp>()
 
@@ -73,21 +71,9 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
   }, [navigation])
 
   return (
-    <View
+    <View testID="noSessionView" style={[s.hContentRegion, pal.view]}>
-      testID="noSessionView"
-      style={[
-        s.hContentRegion,
-        pal.view,
-        {
-          // only needed if dismiss button is present
-          paddingTop:
-            onDismiss && isMobile && screenState !== ScreenState.S_StarterPack
-              ? 40
-              : 0,
-        },
-      ]}>
       <ErrorBoundary>
-        {onDismiss && screenState !== ScreenState.S_StarterPack ? (
+        {onDismiss && screenState === ScreenState.S_LoginOrCreateAccount ? (
           <Pressable
             accessibilityHint={_(msg`Go back`)}
             accessibilityLabel={_(msg`Go back`)}

src/view/com/notifications/FeedItem.tsx

@@ -53,7 +53,7 @@ import {PreviewableUserAvatar, UserAvatar} from '../util/UserAvatar'
 
 import hairlineWidth = StyleSheet.hairlineWidth
 import {parseTenorGif} from '#/lib/strings/embed-player'
-import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
+import {StarterPack} from '#/components/icons/StarterPack'
 
 const MAX_AUTHORS = 5
 
@@ -189,7 +189,7 @@ let FeedItem = ({
   } else if (item.type === 'starter-pack-signup') {
     icon = (
       <View style={{height: 30, width: 30}}>
-        <StarterPackIcon />
+        <StarterPack width={30} gradient="sky" />
       </View>
     )
     action = _(msg`signed up with your starter pack`)

src/view/com/profile/ProfileSubpageHeader.tsx

@@ -23,7 +23,7 @@ import {CenteredView} from '../util/Views'
 import hairlineWidth = StyleSheet.hairlineWidth
 
 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
-import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
+import {StarterPack} from '#/components/icons/StarterPack'
 
 export function ProfileSubpageHeader({
   isLoading,
@@ -130,7 +130,7 @@ export function ProfileSubpageHeader({
           accessibilityHint=""
           style={{width: 58}}>
           {avatarType === 'starter-pack' ? (
-            <StarterPackIcon width={58} height={58} />
+            <StarterPack width={58} gradient="sky" />
           ) : (
             <UserAvatar type={avatarType} size={58} avatar={avatar} />
           )}

src/view/screens/Home.tsx

@@ -22,13 +22,6 @@ import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed'
 import {useOTAUpdates} from 'lib/hooks/useOTAUpdates'
 import {useRequestNotificationsPermission} from 'lib/notifications/notifications'
 import {HomeTabNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
-import {parseStarterPackUri} from 'lib/strings/starter-pack'
-import {isWeb} from 'platform/detection'
-import {useLoggedOutViewControls} from 'state/shell/logged-out'
-import {
-  useActiveStarterPack,
-  useSetActiveStarterPack,
-} from 'state/shell/starter-pack'
 import {FeedPage} from 'view/com/feeds/FeedPage'
 import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState'
@@ -37,40 +30,11 @@ import {FollowingEndOfFeed} from 'view/com/posts/FollowingEndOfFeed'
 import {NoFeedsPinned} from '#/screens/Home/NoFeedsPinned'
 import {HomeHeader} from '../com/home/HomeHeader'
 
-type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
+type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home' | 'Start'>
 export function HomeScreen(props: Props) {
-  const {navigation} = props
-  const {hasSession} = useSession()
   const {data: preferences} = usePreferencesQuery()
   const {data: pinnedFeedInfos, isLoading: isPinnedFeedsLoading} =
     usePinnedFeedsInfos()
-  const activeStarterPack = useActiveStarterPack()
-  const setActiveStarterPack = useSetActiveStarterPack()
-  const {setShowLoggedOut, requestSwitchToAccount} = useLoggedOutViewControls()
-
-  React.useEffect(() => {
-    // This will be true if the app was launched with a starter pack referral.
-    if (activeStarterPack?.uri) {
-      if (hasSession) {
-        const parsed = parseStarterPackUri(activeStarterPack.uri)
-        if (!parsed) return
-        setActiveStarterPack(undefined)
-        navigation.navigate('StarterPack', parsed)
-      } else {
-        setShowLoggedOut(true)
-        requestSwitchToAccount({
-          requestedAccount: isWeb ? 'starterpack' : 'new',
-        })
-      }
-    }
-  }, [
-    hasSession,
-    setShowLoggedOut,
-    requestSwitchToAccount,
-    activeStarterPack,
-    setActiveStarterPack,
-    navigation,
-  ])
 
   if (preferences && pinnedFeedInfos && !isPinnedFeedsLoading) {
     return (

src/view/screens/Profile.tsx

@@ -447,6 +447,7 @@ function ProfileScreenLoaded({
           ? ({headerHeight, isFocused, scrollElRef}) => (
               <ProfileStarterPacks
                 ref={starterPacksSectionRef}
+                isMe={isMe}
                 starterPacksQuery={starterPacksQuery}
                 scrollElRef={scrollElRef as ListRef}
                 headerOffset={headerHeight}

src/view/screens/Storybook/Icons.tsx

@@ -45,6 +45,14 @@ export function Icons() {
         <Loader size="lg" fill={t.atoms.text.color} />
         <Loader size="xl" fill={t.atoms.text.color} />
       </View>
+
+      <View style={[a.flex_row, a.gap_xl]}>
+        <Globe size="xs" gradient="sky" />
+        <Globe size="sm" gradient="sky" />
+        <Globe size="md" gradient="sky" />
+        <Globe size="lg" gradient="sky" />
+        <Globe size="xl" gradient="sky" />
+      </View>
     </View>
   )
 }

src/view/shell/desktop/LeftNav.tsx

@@ -100,12 +100,18 @@ function ProfileCard() {
   )
 }
 
+const HIDDEN_BACK_BNT_ROUTES = ['StarterPackWizard', 'StarterPackEdit']
+
 function BackBtn() {
   const {isTablet} = useWebMediaQueries()
   const pal = usePalette('default')
   const navigation = useNavigation<NavigationProp>()
   const {_} = useLingui()
-  const shouldShow = useNavigationState(state => !isStateAtTabRoot(state))
+  const shouldShow = useNavigationState(
+    state =>
+      !isStateAtTabRoot(state) &&
+      !HIDDEN_BACK_BNT_ROUTES.includes(getCurrentRoute(state).name),
+  )
 
   const onPressBack = React.useCallback(() => {
     if (navigation.canGoBack()) {