add indicator on how many more items can be added

src/components/StarterPack/Wizard/WizardFeedCard.tsx

@@ -60,6 +60,7 @@ export function WizardFeedCard({
         color={includesFeed ? 'secondary' : 'primary'}
         size="small"
         style={{paddingVertical: 6}}
+        disabled={!includesFeed && state.feeds.length >= 3}
         onPress={onAdd}>
         <ButtonText>
           {includesFeed ? <Trans>Remove</Trans> : <Trans>Add</Trans>}

src/components/StarterPack/Wizard/WizardProfileCard.tsx

@@ -66,6 +66,7 @@ export function WizardProfileCard({
           color={includesProfile ? 'secondary' : 'primary'}
           size="small"
           style={{paddingVertical: 6}}
+          disabled={!includesProfile && state.profiles.length >= 50}
           onPress={onPressAddRemove}>
           <ButtonText>
             {includesProfile ? <Trans>Remove</Trans> : <Trans>Add</Trans>}

src/screens/StarterPack/Wizard/index.tsx

@@ -511,15 +511,23 @@ function Footer({
           },
         ],
       ]}>
+      <View style={[a.absolute, {right: 14, top: 23}]}>
+        <Text style={[a.font_bold]}>
+          {items.length}/{state.currentStep === 'Profiles' ? 50 : 3}
+        </Text>
+      </View>
+
       <View style={[a.flex_row, a.gap_xs]}>
-        {items.slice(0, 6).map((p, index) => (
-          <UserAvatar
-            key={index}
-            avatar={p.avatar}
-            size={28}
-            type={state.currentStep === 'Profiles' ? 'user' : 'algo'}
-          />
-        ))}
+        <View style={[a.flex_row]}>
+          {items.slice(0, 6).map((p, index) => (
+            <UserAvatar
+              key={index}
+              avatar={p.avatar}
+              size={28}
+              type={state.currentStep === 'Profiles' ? 'user' : 'algo'}
+            />
+          ))}
+        </View>
       </View>
 
       {items.length === 0 ? (