feat: add tab bar header navigation

locales/base/translation.json

@@ -2179,7 +2179,8 @@
       "title": "Welcome"
     },
     "discover": {
-      "tabName": "Discover"
+      "tabName": "Discover",
+      "title": "Discover"
     }
   }
 }

src/analytics/Events.tsx

@@ -34,6 +34,7 @@ export enum AppEvents {
 
 export enum HomeEvents {
   hamburger_tapped = 'hamburger_tapped',
+  account_circle_tapped = 'account_circle_tapped',
   drawer_navigation = 'drawer_navigation',
   drawer_address_copy = 'drawer_address_copy',
   profile_address_copy = 'profile_address_copy',

src/analytics/Properties.tsx

@@ -153,6 +153,7 @@ interface AppEventsProperties {
 
 interface HomeEventsProperties {
   [HomeEvents.hamburger_tapped]: undefined
+  [HomeEvents.account_circle_tapped]: undefined
   [HomeEvents.drawer_navigation]: {
     navigateTo: string
   }

src/analytics/docs.ts

@@ -72,6 +72,7 @@ export const eventDocs: Record<AnalyticsEventType, string> = {
   [AppEvents.multichain_beta_contact_support]: `When the user taps the Contact Support button on the multichain beta screen`,
   [AppEvents.handle_deeplink]: `When a deeplink that leads into the app is detected and handled`,
   [HomeEvents.hamburger_tapped]: ``,
+  [HomeEvents.account_circle_tapped]: `When the account circle used in the tab navigation is tapped`,
   [HomeEvents.drawer_navigation]: ``,
   [HomeEvents.drawer_address_copy]: ``,
   [HomeEvents.profile_address_copy]: `When a user copies their wallet address from the profile screen`,

src/components/AccountCircleButton.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import { HomeEvents } from 'src/analytics/Events'
+import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
+import Touchable from 'src/components/Touchable'
+import AccountCircle from 'src/icons/AccountCircle'
+import { navigate } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
+import { Spacing } from 'src/styles/styles'
+
+interface Props {
+  style?: StyleProp<ViewStyle>
+  size?: number
+  testID?: string
+}
+
+export default function AccountCircleButton({ style, size, testID }: Props) {
+  const onPress = () => {
+    ValoraAnalytics.track(HomeEvents.account_circle_tapped)
+    navigate(Screens.ProfileMenu)
+  }
+
+  return (
+    <View style={styles.container}>
+      <Touchable
+        testID={testID}
+        onPress={onPress}
+        style={[style, styles.button]}
+        borderRadius={Spacing.Thick24}
+      >
+        <AccountCircle size={size} />
+      </Touchable>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    padding: Spacing.Small12,
+  },
+})

src/components/QrScanButton.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
-import { StyleProp, ViewStyle } from 'react-native'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
 import { QrScreenEvents } from 'src/analytics/Events'
 import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
+import Touchable from 'src/components/Touchable'
 import ScanIcon from 'src/icons/ScanIcon'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
-import { TopBarIconButton } from 'src/navigator/TopBarButton'
+import { Spacing } from 'src/styles/styles'
 
 interface Props {
   style?: StyleProp<ViewStyle>
@@ -20,11 +21,25 @@ export default function QrScanButton({ style, size, testID }: Props) {
   }
 
   return (
-    <TopBarIconButton
-      testID={testID}
-      icon={<ScanIcon size={size} />}
-      onPress={onPress}
-      style={style}
-    />
+    <View style={styles.container}>
+      <Touchable
+        testID={testID}
+        onPress={onPress}
+        style={[style, styles.button]}
+        borderRadius={Spacing.Thick24}
+      >
+        <ScanIcon size={size} />
+      </Touchable>
+    </View>
   )
 }
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    padding: Spacing.Small12,
+  },
+})

src/dappsExplorer/DAppsExplorerScreenSearchFilter.tsx

@@ -1,9 +1,17 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RefreshControl, SectionList, SectionListProps, StyleSheet, Text, View } from 'react-native'
+import {
+  LayoutChangeEvent,
+  RefreshControl,
+  SectionList,
+  SectionListProps,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
-import Animated from 'react-native-reanimated'
+import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated'
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { DappExplorerEvents } from 'src/analytics/Events'
 import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
@@ -31,10 +39,11 @@
 import DrawerTopBar from 'src/navigator/DrawerTopBar'
 import { styles as headerStyles } from 'src/navigator/Headers'
 import { Screens } from 'src/navigator/Screens'
+import useScrollAwareHeader from 'src/navigator/ScrollAwareHeader'
 import { StackParamList } from 'src/navigator/types'
 import { useDispatch, useSelector } from 'src/redux/hooks'
-import colors from 'src/styles/colors'
-import fontStyles from 'src/styles/fonts'
+import { Colors } from 'src/styles/colors'
+import fontStyles, { typeScale } from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
 
 const AnimatedSectionList =
@@ -52,7 +61,7 @@
   Screens.DAppsExplorerScreen | Screens.TabDiscover
 >
 
-export function DAppsExplorerScreenSearchFilter({ route }: Props) {
+export function DAppsExplorerScreenSearchFilter({ navigation, route }: Props) {
   const { t } = useTranslation()
 
   // temporary parameter while we build the tab navigator, should be cleaned up
@@ -62,11 +71,11 @@
   const insets = useSafeAreaInsets()
 
   const sectionListRef = useRef<SectionList>(null)
-  const scrollPosition = useRef(new Animated.Value(0)).current
+  const scrollPositionValue = useRef(new Animated.Value(0)).current
   const horizontalScrollView = useRef<ScrollView>(null)
   const dappRankingsBottomSheetRef = useRef<BottomSheetRefType>(null)
 
-  const onScroll = Animated.event([{ nativeEvent: { contentOffset: { y: scrollPosition } } }])
+  const onScroll = Animated.event([{ nativeEvent: { contentOffset: { y: scrollPositionValue } } }])
   const dispatch = useDispatch()
   const loading = useSelector(dappsListLoadingSelector)
   const error = useSelector(dappsListErrorSelector)
@@ -136,6 +145,28 @@
     })
   }
 
+  // Scroll Aware Header
+  const scrollPosition = useSharedValue(0)
+  const [titleHeight, setTitleHeight] = useState(0)
+
+  const handleMeasureTitleHeight = (event: LayoutChangeEvent) => {
+    setTitleHeight(event.nativeEvent.layout.height)
+  }
+
+  const handleScroll = useAnimatedScrollHandler((event) => {
+    onScroll
+    scrollPosition.value = event.contentOffset.y
+  })
+
+  useScrollAwareHeader({
+    navigation,
+    title: isTabNavigator ? t('bottomTabsNavigator.discover.title') : '',
+    titleStyle: isTabNavigator ? { ...typeScale.labelSemiBoldMedium } : null,
+    scrollPosition,
+    startFadeInPosition: titleHeight - titleHeight * 0.33,
+    animationDistance: titleHeight * 0.33,
+  })
+
   const sections: SectionData[] = useMemo(() => {
     const dappsMatchingFilter = selectedFilter
       ? nonFavoriteDappsWithCategoryNames.filter((dapp) => selectedFilter.filterFn(dapp))
@@ -193,7 +224,7 @@
         <DrawerTopBar
           rightElement={<QrScanButton testID={'DAppsExplorerScreen/QRScanButton'} />}
           middleElement={<Text style={headerStyles.headerTitle}>{t('dappsScreen.title')}</Text>}
-          scrollPosition={scrollPosition}
+          scrollPosition={scrollPositionValue}
         />
       )}
       <>
@@ -206,8 +237,8 @@
           <AnimatedSectionList
             refreshControl={
               <RefreshControl
-                tintColor={colors.primary}
-                colors={[colors.primary]}
+                tintColor={Colors.primary}
+                colors={[Colors.primary]}
                 style={styles.refreshControl}
                 refreshing={loading}
                 onRefresh={() => dispatch(fetchDappsList())}
@@ -221,14 +252,19 @@
             }
             ListHeaderComponent={
               <>
+                {isTabNavigator && (
+                  <Text onLayout={handleMeasureTitleHeight} style={styles.title}>
+                    {t('bottomTabsNavigator.discover.title')}
+                  </Text>
+                )}
                 <DappFeaturedActions onPressShowDappRankings={handleShowDappRankings} />
                 <SearchInput
                   onChangeText={(text) => {
                     setSearchTerm(text)
                   }}
                   value={searchTerm}
                   multiline={false}
-                  placeholderTextColor={colors.gray4}
+                  placeholderTextColor={Colors.gray4}
                   underlineColorAndroid="transparent"
                   placeholder={t('dappsScreen.searchPlaceHolder') ?? undefined}
                   showClearButton={true}
@@ -237,8 +273,8 @@
                 <FilterChipsCarousel
                   chips={filterChips}
                   onSelectChip={handleToggleFilterChip}
-                  primaryColor={colors.infoDark}
-                  secondaryColor={colors.infoLight}
+                  primaryColor={Colors.infoDark}
+                  secondaryColor={Colors.infoLight}
                   style={styles.dappFilterView}
                   forwardedRef={horizontalScrollView}
                 />
@@ -252,7 +288,7 @@
             // Workaround iOS setting an incorrect automatic inset at the top
             scrollIndicatorInsets={{ top: 0.01 }}
             scrollEventThrottle={16}
-            onScroll={onScroll}
+            onScroll={isTabNavigator ? handleScroll : onScroll}
             sections={sections}
             renderItem={({ item: dapp, index, section }) => {
               return (
@@ -322,19 +358,19 @@
     flexGrow: 1,
   },
   refreshControl: {
-    backgroundColor: colors.white,
+    backgroundColor: Colors.white,
   },
   sectionList: {
     flex: 1,
   },
   sectionTitle: {
     ...fontStyles.label,
-    color: colors.gray4,
+    color: Colors.gray4,
     marginTop: Spacing.Large32,
   },
   disclaimer: {
     ...fontStyles.xsmall,
-    color: colors.gray4,
+    color: Colors.gray4,
     textAlign: 'center',
     marginTop: Spacing.Large32,
     marginBottom: Spacing.Regular16,
@@ -343,6 +379,11 @@
     flex: 1,
     justifyContent: 'flex-end',
   },
+  title: {
+    ...typeScale.titleMedium,
+    color: Colors.black,
+    marginBottom: Spacing.Large32,
+  },
 })
 
 export default DAppsExplorerScreenSearchFilter

src/escrow/EscrowedPaymentListScreen.tsx

@@ -4,12 +4,11 @@
 import EscrowedPaymentListItem from 'src/escrow/EscrowedPaymentListItem'
 import { getReclaimableEscrowPayments } from 'src/escrow/reducer'
 import i18n from 'src/i18n'
-import {
-  NotificationList,
-  titleWithBalanceNavigationOptions,
-} from 'src/notifications/NotificationList'
+import { HeaderTitleWithBalance, headerWithBackButton } from 'src/navigator/Headers'
+import { NotificationList } from 'src/notifications/NotificationList'
 import { useSelector } from 'src/redux/hooks'
 import { Spacing } from 'src/styles/styles'
+import { Currency } from 'src/utils/currencies'
 
 export const listItemRenderer = (payment: EscrowedPayment, key: number | undefined = undefined) => {
   return (
@@ -24,9 +23,12 @@
   return <NotificationList items={sentEscrowedPayments} listItemRenderer={listItemRenderer} />
 }
 
-EscrowedPaymentListScreen.navigationOptions = titleWithBalanceNavigationOptions(
-  i18n.t('escrowedPaymentReminder')
-)
+EscrowedPaymentListScreen.navigationOptions = () => ({
+  ...headerWithBackButton,
+  headerTitle: () => (
+    <HeaderTitleWithBalance title={i18n.t('escrowedPaymentReminder')} token={Currency.Dollar} />
+  ),
+})
 
 const styles = StyleSheet.create({
   listItem: {

src/home/NotificationBell.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
-import { StyleProp, ViewStyle } from 'react-native'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
 import { HomeEvents } from 'src/analytics/Events'
 import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
+import Touchable from 'src/components/Touchable'
 import { useNotifications } from 'src/home/NotificationCenter'
 import NotificationBellIcon from 'src/icons/NotificationBellIcon'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
-import { TopBarIconButton } from 'src/navigator/TopBarButton'
 import colors from 'src/styles/colors'
+import { Spacing } from 'src/styles/styles'
 
 interface Props {
   style?: StyleProp<ViewStyle>
@@ -29,11 +30,25 @@ export default function NotificationBell({ style, size, testID }: Props) {
   }
 
   return (
-    <TopBarIconButton
-      testID={testID}
-      icon={<NotificationBellIcon size={size} notificationMark={notificationMark} />}
-      onPress={onPress}
-      style={style}
-    />
+    <View style={styles.container}>
+      <Touchable
+        testID={testID}
+        onPress={onPress}
+        style={[style, styles.button]}
+        borderRadius={Spacing.Thick24}
+      >
+        <NotificationBellIcon size={size} notificationMark={notificationMark} />
+      </Touchable>
+    </View>
   )
 }
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    padding: Spacing.Small12,
+  },
+})

src/home/WalletHome.test.tsx

@@ -182,7 +182,8 @@ describe('WalletHome', () => {
       jest.runOnlyPendingTimers()
     })
 
-    expect(tree.getByText('bottomTabsNavigator.home.title')).toBeTruthy()
+    // Multiple elements use this text with the scroll aware header
+    expect(tree.queryAllByText('bottomTabsNavigator.home.title')).toBeTruthy()
     expect(tree.queryByTestId('HomeActionsCarousel')).toBeTruthy()
     expect(tree.queryByText('notificationCenterSpotlight.message')).toBeFalsy()
     expect(tree.queryByTestId('HomeTokenBalance')).toBeFalsy()