chore 📱 : cleanup

apps/mobile/package.json

@@ -11,7 +11,7 @@
     "web": "expo start --web",
     "devtools": "react-devtools",
     "lint": "eslint . --ext .js,.ts,.tsx",
-    "eas:build": "eas build  --platform ios"
+    "eas:build": "eas build  --platform ios --local"
   },
   "dependencies": {
     "@apollo/client": "^3.8.1",

apps/mobile/src/components/common/Header.tsx

@@ -103,15 +103,19 @@ const AuthenticatedUser = () => {
                   navigate('NotificationsModal')
                 }}
               />
-              <MenuItem icon="pie-chart-outline" title="Creator Studio" />
               <MenuItem icon="bookmark-outline" title="Bookmarks" />
+            </Menu>
+            <Menu>
+              <MenuItem icon="pie-chart-outline" title="Creator Studio" />
+              <MenuItem icon="people-outline" title="Manager" />
               <MenuItem icon="cog-outline" title="Settings" />
             </Menu>
             <Menu>
               <MenuItem
                 icon="log-out-outline"
                 title="Sign out"
                 onPress={() => logout()}
+                showArrow={false}
               />
             </Menu>
           </View>

apps/mobile/src/components/common/modals/FeedFlexModal.tsx

@@ -12,7 +12,6 @@ import {
   useWindowDimensions,
   View
 } from 'react-native'
-import Animated, { SlideInDown } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import haptic from '~/helpers/haptic'
@@ -54,7 +53,6 @@ const styles = StyleSheet.create({
     paddingBottom: 20
   },
   groupItems: {
-    paddingLeft: 10,
     gap: 20
   },
   groupTitle: {
@@ -92,31 +90,14 @@ export const FeedFlexModal = (): JSX.Element => {
         ]}
         showsVerticalScrollIndicator={false}
       >
-        <Animated.View entering={SlideInDown.delay(10).duration(200)}>
-          <TouchableOpacity
-            activeOpacity={0.6}
-            onPress={() => {
-              goBack()
-            }}
-          >
-            <Text
-              style={[styles.text, { color: theme.colors.white, opacity: 0.7 }]}
-            >
-              See feed through
-            </Text>
-          </TouchableOpacity>
-        </Animated.View>
-        {FEED_ALGORITHMS.map(({ algorithms, provider }, index) => (
+        {FEED_ALGORITHMS.map(({ algorithms, provider }) => (
           <View key={provider}>
             <View style={styles.group}>
               <Text style={styles.groupTitle}>{provider}</Text>
             </View>
             <View style={styles.groupItems}>
               {algorithms.map(({ name }) => (
-                <Animated.View
-                  key={name}
-                  entering={SlideInDown.delay(index * 10).duration(200)}
-                >
+                <View key={name}>
                   <TouchableOpacity
                     activeOpacity={0.6}
                     onPress={() => {
@@ -132,7 +113,7 @@ export const FeedFlexModal = (): JSX.Element => {
                       {name}
                     </Text>
                   </TouchableOpacity>
-                </Animated.View>
+                </View>
               ))}
             </View>
           </View>

apps/mobile/src/components/home/PopularCreators.tsx

@@ -57,8 +57,7 @@ const PopularCreators = () => {
 
   const { data: recsData, isLoading: recsLoading } = useSWR(
     `${RECS_URL}/k3l-score/creator/49/0`,
-    (url: string) => fetch(url).then((res) => res.json()),
-    { revalidateIfStale: true }
+    (url: string) => fetch(url).then((res) => res.json())
   )
 
   const { data, loading: profilesLoading } = useAllProfilesQuery({

apps/mobile/src/components/home/Timeline.tsx

@@ -112,16 +112,12 @@ const Timeline = () => {
       skip: !selectedChannelId
     })
 
-  const publications = useMemo(
-    () =>
-      selectedFeedType === TimelineFeedType.HIGHLIGHTS
-        ? (feedHighlightsData?.feedHighlights.items as Publication[])
-        : selectedFeedType === TimelineFeedType.FOLLOWING
-        ? (feedData?.feed?.items as FeedItem[])
-        : (curatedData?.explorePublications?.items as Publication[]),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectedFeedType, loading]
-  )
+  const publications =
+    selectedFeedType === TimelineFeedType.HIGHLIGHTS
+      ? (feedHighlightsData?.feedHighlights.items as Publication[])
+      : selectedFeedType === TimelineFeedType.FOLLOWING
+      ? (feedData?.feed?.items as FeedItem[])
+      : (curatedData?.explorePublications?.items as Publication[])
 
   const pageInfo =
     selectedFeedType === TimelineFeedType.CURATED
@@ -217,9 +213,9 @@ const Timeline = () => {
         estimatedItemSize={publications?.length ?? []}
         renderItem={renderItem}
         keyExtractor={(item, i) => `${i + 1}_${i}`}
-        ListFooterComponent={() =>
-          loading && <ActivityIndicator style={{ paddingVertical: 20 }} />
-        }
+        ListFooterComponent={() => (
+          <ActivityIndicator style={{ paddingVertical: 20 }} />
+        )}
         onEndReached={fetchMorePublications}
         onEndReachedThreshold={0.8}
         showsVerticalScrollIndicator={false}

apps/mobile/src/components/profile/Info.tsx

@@ -35,7 +35,7 @@ import useMobileStore from '~/store'
 import UserProfile from '../common/UserProfile'
 import Button from '../ui/Button'
 import Ticker from '../ui/Ticker'
-import OnChainIdentities from './OnChainIdentities'
+import OnChainInfo from './OnChainInfo'
 import ShareSheet from './ShareSheet'
 
 type Props = {
@@ -84,7 +84,7 @@ const styles = StyleSheet.create({
   },
   bio: {
     fontFamily: 'font-medium',
-    fontSize: normalizeFont(12),
+    fontSize: normalizeFont(13),
     color: theme.colors.white,
     opacity: 0.6
   }
@@ -227,7 +227,7 @@ const Info: FC<Props> = (props) => {
             </Pressable>
           </View>
 
-          <OnChainIdentities identity={profile.onChainIdentity} />
+          <OnChainInfo identity={profile.onChainIdentity} />
 
           <View style={{ flexDirection: 'row', gap: 10 }}>
             <View style={{ flex: 1 }}>

apps/mobile/src/components/profile/MenuItem.tsx

@@ -32,9 +32,10 @@ type Props = {
   title: string
   icon: keyof typeof Ionicons.glyphMap
   onPress?: () => void
+  showArrow?: boolean
 }
 
-const MenuItem: FC<Props> = ({ icon, title, onPress }) => {
+const MenuItem: FC<Props> = ({ icon, title, showArrow = true, onPress }) => {
   return (
     <AnimatedPressable style={styles.item} onPress={onPress}>
       <View style={styles.left}>
@@ -46,12 +47,14 @@ const MenuItem: FC<Props> = ({ icon, title, onPress }) => {
         />
         <Text style={styles.title}>{title}</Text>
       </View>
-      <Ionicons
-        name="chevron-forward"
-        color={theme.colors.white}
-        style={{ opacity: 0.6 }}
-        size={20}
-      />
+      {showArrow && (
+        <Ionicons
+          name="chevron-forward"
+          color={theme.colors.white}
+          style={{ opacity: 0.6 }}
+          size={20}
+        />
+      )}
     </AnimatedPressable>
   )
 }

apps/mobile/src/components/profile/OnChainIdentities.tsx → apps/mobile/src/components/profile/OnChainInfo.tsx

@@ -21,6 +21,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 8,
     paddingRight: 10,
+    paddingVertical: 1,
     borderColor: theme.colors.grey,
     borderWidth: 1
   },
@@ -37,23 +38,16 @@ const styles = StyleSheet.create({
   }
 })
 
-const OnChainIdentities: FC<Props> = ({ identity }) => {
-  const hasOnChainId =
-    identity?.ens?.name ||
-    identity?.worldcoin.isHuman ||
-    identity?.proofOfHumanity ||
-    identity?.sybilDotOrg.verified
-
-  if (!hasOnChainId) {
-    return null
-  }
-
+const OnChainInfo: FC<Props> = ({ identity }) => {
   return (
     <ScrollView
       horizontal={true}
       showsHorizontalScrollIndicator={false}
       contentContainerStyle={{ gap: 10 }}
     >
+      <View style={[styles.badge, { paddingLeft: 10 }]}>
+        <Text style={styles.text}>Bloomer since July 2022</Text>
+      </View>
       {identity?.ens?.name && (
         <View style={styles.badge}>
           <ExpoImage
@@ -120,4 +114,4 @@ const OnChainIdentities: FC<Props> = ({ identity }) => {
   )
 }
 
-export default OnChainIdentities
+export default OnChainInfo

apps/mobile/src/components/profile/Switch.tsx

@@ -47,10 +47,10 @@ const styles = StyleSheet.create({
     fontFamily: 'font-medium',
     fontSize: normalizeFont(10),
     color: theme.colors.white,
-    opacity: 0.6
+    opacity: 0.8
   },
   handle: {
-    fontFamily: 'font-normal',
+    fontFamily: 'font-medium',
     fontSize: normalizeFont(12),
     color: theme.colors.white
   },

apps/mobile/src/components/profile/TabContent.tsx

@@ -1,4 +1,8 @@
 import type { Profile } from '@lenstube/lens'
+import {
+  MOBILE_PROFILE_ITEMS,
+  type MobileProfileTabItemType
+} from '@lenstube/lens/custom-types'
 import type { FC } from 'react'
 import React, { memo, useCallback, useRef, useState } from 'react'
 import type {
@@ -18,14 +22,11 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import TabList from './TabList'
 import Bytes from './tabs/Bytes'
-import Feed from './tabs/Feed'
+import Clan from './tabs/Clan'
 import Gallery from './tabs/Gallery'
 import Media from './tabs/Media'
 import Replies from './tabs/Replies'
 
-const tabs = ['Feed', 'Media', 'Bytes', 'Replies', 'Gallery']
-type TabItemType = (typeof tabs)[number]
-
 type Props = {
   profile: Profile
   infoHeaderHeight: number
@@ -39,7 +40,7 @@ const TabContent: FC<Props> = (props) => {
   const insets = useSafeAreaInsets()
 
   const [activeTabIndex, setActiveTabIndex] = useState(0)
-  const flatListRef = useRef<FlatList<string>>(null)
+  const flatListRef = useRef<FlatList<MobileProfileTabItemType>>(null)
 
   const onViewableItemsChanged = useCallback(
     ({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
@@ -74,26 +75,22 @@ const TabContent: FC<Props> = (props) => {
 
   return (
     <Animated.View style={animatedScrollStyles} entering={FadeInRight}>
-      <TabList
-        activeTab={activeTabIndex}
-        tabs={tabs}
-        scrollToTab={scrollToTab}
-      />
+      <TabList activeTab={activeTabIndex} scrollToTab={scrollToTab} />
       <FlatList
         ref={flatListRef}
         style={{ height }}
         scrollEnabled
         horizontal
         snapToAlignment="center"
         decelerationRate="fast"
-        data={tabs}
+        data={MOBILE_PROFILE_ITEMS}
         bounces={false}
         pagingEnabled
         bouncesZoom={false}
         showsHorizontalScrollIndicator={false}
-        renderItem={({ item }: { item: TabItemType }) => {
+        renderItem={({ item }: { item: MobileProfileTabItemType }) => {
           const component = {
-            Feed: <Feed profile={profile} scrollHandler={scrollHandler} />,
+            Clan: <Clan profile={profile} scrollHandler={scrollHandler} />,
             Media: <Media profile={profile} scrollHandler={scrollHandler} />,
             Bytes: <Bytes profile={profile} scrollHandler={scrollHandler} />,
             Replies: (

apps/mobile/src/components/profile/TabList.tsx

@@ -1,4 +1,5 @@
 import Ionicons from '@expo/vector-icons/Ionicons'
+import { MOBILE_PROFILE_ITEMS } from '@lenstube/lens/custom-types'
 import type { FC } from 'react'
 import React, { memo, useCallback, useEffect, useRef } from 'react'
 import {
@@ -41,19 +42,18 @@ const styles = StyleSheet.create({
 
 type Props = {
   activeTab: number
-  tabs: string[]
   scrollToTab: (index: number) => void
 }
 
 const icons = [
-  'planet-outline',
+  'bonfire-outline',
   'headset-outline',
   'videocam-outline',
   'chatbubble-outline',
   'shapes-outline'
 ] as (keyof typeof Ionicons.glyphMap)[]
 
-const TabList: FC<Props> = ({ activeTab, tabs, scrollToTab }) => {
+const TabList: FC<Props> = ({ activeTab, scrollToTab }) => {
   const scrollViewRef = useRef<ScrollView>(null)
   const { width } = useWindowDimensions()
 
@@ -80,7 +80,7 @@ const TabList: FC<Props> = ({ activeTab, tabs, scrollToTab }) => {
         horizontal={true}
         showsHorizontalScrollIndicator={false}
       >
-        {tabs.map((tab, index) => {
+        {MOBILE_PROFILE_ITEMS.map((tab, index) => {
           const isActive = activeTab === index
           const color = isActive ? theme.colors.black : theme.colors.white
           const backgroundColor = isActive ? theme.colors.white : 'transparent'