feat(navigation): Add Profile / Menu Screen (#5028)

### Description Adds new profile screen for navigation redesign, currently not hooked up to anything, ### Test plan Unit tests added **Manual Tests** Name + PN: ![Simulator Screenshot - iPhone 14 Pro - 2024-03-08 at 13 49 30](https://github.com/valora-inc/wallet/assets/140328381/41584177-72d0-4b62-a6ef-08fd5511ae8d) Name but no PN: ![no-pn](https://github.com/valora-inc/wallet/assets/140328381/5a87069e-4b6b-4c08-a000-06601bb41958) PN but no name: ![no-name](https://github.com/valora-inc/wallet/assets/140328381/fec1ea15-8782-4958-8aba-c76a27fa717a) No PN or name: ![no-pn-no-name](https://github.com/valora-inc/wallet/assets/140328381/98f536fb-7a4c-44f1-b514-e22de55ef9dd) ### Related issues - Fixes [ACT-1107](https://linear.app/valora/issue/ACT-1107/profile-menu-screen) ### Backwards compatibility Yes, just adding new screen ### Network scalability If a new NetworkId and/or Network are added in the future, the changes in this PR will: - [X] Continue to work without code changes, OR trigger a compilation error (guaranteeing we find it when a new network is added)
valora-inc · Mar 12, 2024 · 755eb68 · 755eb68
1 parent 4d484cf
commit 755eb68
Show file tree

Hide file tree

Showing 21 changed files with 399 additions and 58 deletions.
diff --git a/src/analytics/Events.tsx b/src/analytics/Events.tsx
@@ -36,6 +36,7 @@ export enum HomeEvents {
   hamburger_tapped = 'hamburger_tapped',
   drawer_navigation = 'drawer_navigation',
   drawer_address_copy = 'drawer_address_copy',
+  profile_address_copy = 'profile_address_copy',
   notification_scroll = 'notification_scroll',
   notification_impression = 'notification_impression',
   notification_select = 'notification_select',

diff --git a/src/analytics/Properties.tsx b/src/analytics/Properties.tsx
@@ -157,6 +157,7 @@ interface HomeEventsProperties {
     navigateTo: string
   }
   [HomeEvents.drawer_address_copy]: undefined
+  [HomeEvents.profile_address_copy]: undefined
 
   [HomeEvents.notification_scroll]: {
     // TODO: Pass in notificationType and make param required

diff --git a/src/analytics/docs.ts b/src/analytics/docs.ts
@@ -74,6 +74,7 @@ export const eventDocs: Record<AnalyticsEventType, string> = {
   [HomeEvents.hamburger_tapped]: ``,
   [HomeEvents.drawer_navigation]: ``,
   [HomeEvents.drawer_address_copy]: ``,
+  [HomeEvents.profile_address_copy]: `When a user copies their wallet address from the profile screen`,
   [HomeEvents.notification_scroll]: ``,
   [HomeEvents.notification_impression]: `When the notification appears on the user screen for the first time. Note that the format of the notificationId property for user generated notifications is $NotificationType/$Id, where the $Id can be filtered out with a fuzzy string match.`,
   [HomeEvents.notification_select]: `When user taps on notification CTA(s). Note that the format of the notificationId property for user generated notifications is $NotificationType/$Id, where the $Id can be filtered out with a fuzzy string match.`,

diff --git a/src/components/AccountNumber.tsx b/src/components/AccountNumber.tsx
@@ -38,6 +38,10 @@ export default function AccountNumber({ address, touchDisabled, location }: Prop
     if (location === Screens.ExternalExchanges) {
       ValoraAnalytics.track(FiatExchangeEvents.cico_cash_out_copy_address)
     }
+
+    if (location === Screens.ProfileMenu) {
+      ValoraAnalytics.track(HomeEvents.profile_address_copy)
+    }
   }
   // Turns '0xce10ce10ce10ce10ce10ce10ce10ce10ce10ce10'
   // into 'ce10 ce10 ce10 ce10 ce10 ce10 ce10 ce10 ce10 ce10'

diff --git a/src/components/PhoneNumberWithFlag.tsx b/src/components/PhoneNumberWithFlag.tsx
@@ -1,11 +1,13 @@
 import { getCountryEmoji, parsePhoneNumber } from '@celo/phone-utils'
 import * as React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
-import fontStyles from 'src/styles/fonts'
+import Colors from 'src/styles/colors'
+import fontStyles, { typeScale } from 'src/styles/fonts'
 
 interface Props {
   e164PhoneNumber: string
   defaultCountryCode?: string
+  textColor?: Colors
 }
 
 export class PhoneNumberWithFlag extends React.PureComponent<Props> {
@@ -22,7 +24,13 @@ export class PhoneNumberWithFlag extends React.PureComponent<Props> {
               )
             : getCountryEmoji(this.props.e164PhoneNumber)}
         </Text>
-        <Text style={fontStyles.small500}>
+        <Text
+          style={{
+            ...typeScale.labelSmall,
+            lineHeight: 18,
+            color: this.props.textColor ?? Colors.black,
+          }}
+        >
           {parsedNumber ? parsedNumber.displayNumberInternational : ''}
         </Text>
       </View>

diff --git a/src/components/Pill.tsx b/src/components/Pill.tsx
@@ -2,21 +2,30 @@ import React from 'react'
 import { StyleSheet, Text } from 'react-native'
 import Touchable from 'src/components/Touchable'
 import colors from 'src/styles/colors'
-import fontStyles from 'src/styles/fonts'
+import { typeScale } from 'src/styles/fonts'
 
 interface Props {
   text: string
   icon?: React.ReactNode
   onPress: () => void
   testID?: string
+  textColor?: string
 }
 
-function Pill({ text, icon, onPress, testID }: Props) {
+function Pill({ text, icon, onPress, testID, textColor }: Props) {
   return (
     <Touchable style={styles.container} onPress={onPress} testID={testID}>
       <>
         {icon}
-        <Text style={[styles.text, icon ? { marginLeft: 5 } : {}]}>{text}</Text>
+        <Text
+          style={[
+            styles.text,
+            { color: textColor ?? colors.primary },
+            icon ? { marginLeft: 5 } : {},
+          ]}
+        >
+          {text}
+        </Text>
       </>
     </Touchable>
   )
@@ -33,8 +42,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.successLight,
   },
   text: {
-    ...fontStyles.small600,
-    color: colors.primary,
+    ...typeScale.labelSemiBoldSmall,
   },
 })
 

diff --git a/src/icons/Rings.tsx b/src/icons/Rings.tsx
diff --git a/src/icons/navigator/Home.tsx → src/icons/ValoraV.tsx b/src/icons/navigator/Home.tsx → src/icons/ValoraV.tsx
@@ -6,12 +6,12 @@ interface Props {
   size?: number
 }
 
-const Home = ({ color, size }: Props) => (
+const ValoraV = ({ color, size }: Props) => (
   <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
     <Path
       fill={color}
       d="M11.844 15.809c.603-4.704 2.814-7.38 6.156-9.807L16.291 3.75c-2.186 1.676-4.572 4.053-5.678 7.33-.904-2.677-2.789-5.028-5.83-7.33L3 6.052c3.794 2.702 5.704 5.729 6.231 9.757h2.613Z"
     />
   </Svg>
 )
-export default Home
+export default ValoraV
diff --git a/src/icons/navigator/Help.tsx b/src/icons/navigator/Help.tsx
@@ -1,17 +1,26 @@
 import * as React from 'react'
 import Svg, { Circle, Path } from 'react-native-svg'
+import Colors from 'src/styles/colors'
 
-export function Help() {
+interface Props {
+  color?: string
+}
+
+export function Help({ color }: Props) {
   return (
     <Svg testID="Help" width={32} height={32} viewBox="0 0 32 32" fill="none">
-      <Circle cx={16} cy={16} r={11} stroke="#B4B9BD" strokeWidth={2} />
+      <Circle cx={16} cy={16} r={11} stroke={color} strokeWidth={2} />
       <Path
         d="M15.753 19.546a.845.845 0 01-.836-.807c-.02-.482-.023-.962.123-1.415.17-.53.412-.959.726-1.287a5.91 5.91 0 011.13-.907c.395-.248.726-.574.995-.977.27-.403.404-.883.404-1.441 0-.46-.103-.858-.31-1.195a2.113 2.113 0 00-.827-.78 2.42 2.42 0 00-1.15-.275c-.367 0-.721.08-1.062.24-.341.159-.626.41-.854.752a2.136 2.136 0 00-.26.555c-.134.43-.488.787-.938.787-.487 0-.886-.41-.777-.885a3.616 3.616 0 011.908-2.461c.596-.3 1.257-.45 1.983-.45.79 0 1.476.164 2.058.492a3.44 3.44 0 011.359 1.35c.323.572.484 1.223.484 1.954 0 .778-.166 1.444-.498 1.997a4.205 4.205 0 01-1.385 1.392c-.395.258-.71.53-.948.816-.238.28-.41.616-.518 1.005-.066.24-.069.486-.053.734a.746.746 0 01-.754.806z"
-        fill="#B4B9BD"
+        fill={color}
       />
-      <Circle cx={15.735} cy={22.099} r={1.098} fill="#B4B9BD" />
+      <Circle cx={15.735} cy={22.099} r={1.098} fill={color} />
     </Svg>
   )
 }
 
+Help.defaultProps = {
+  color: Colors.gray3,
+}
+
 export default React.memo(Help)
diff --git a/src/icons/navigator/Invite.tsx b/src/icons/navigator/Invite.tsx
@@ -1,30 +1,35 @@
 import * as React from 'react'
 import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg'
+import Colors from 'src/styles/colors'
 
-export function Invite() {
+interface Props {
+  color?: string
+}
+
+export function Invite({ color }: Props) {
   return (
     <Svg width={32} height={32} viewBox="0 0 32 32" fill="none">
       <G clipPath="url(#prefix__clip0)">
         <Path
           d="M22.564 12.903l2.775 2.501A2 2 0 0126 16.89V26a2 2 0 01-2 2H7a2 2 0 01-2-2v-9.047a2 2 0 01.74-1.553l3.078-2.497"
-          stroke="#B4B9BD"
+          stroke={color}
           strokeWidth={2}
           strokeLinecap="round"
         />
         <Path
           d="M26 17l-6.204 4m-8.878 0L5 17"
-          stroke="#B4B9BD"
+          stroke={color}
           strokeWidth={2}
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <Path
           d="M5.247 26.81c-.37.409-.343 1.05.058 1.43a.97.97 0 001.395-.05l-1.453-1.38zm19.533 1.378a.97.97 0 001.395.055 1.03 1.03 0 00.046-1.43l-1.441 1.375zM18.736 21l.006 1.013L18.736 21zm-6.038 0l-.006-1.013.006 1.013zm-2.166-.046l-5.285 5.855L6.7 28.19l5.285-5.855-1.453-1.381zm2.173 1.059h6.037l-.013-2.026h-6.037l.013 2.026zm6.764.325l5.31 5.85 1.442-1.376-5.311-5.85-1.441 1.376zm-.727-.325c.275 0 .539.117.727.325l1.44-1.376a2.947 2.947 0 00-2.18-.975l.013 2.026zm-6.757.322a.97.97 0 01.72-.322l-.013-2.026c-.822 0-1.604.35-2.16.967l1.453 1.38z"
-          fill="#B4B9BD"
+          fill={color}
         />
         <Path
           d="M13.103 9.348v-.002a8.487 8.487 0 011.739-3.656c.8-.966 1.73-1.533 2.528-1.672l.035-.006.024-.006a.773.773 0 01.071 0h.029l.028-.002a2.097 2.097 0 011.701.685c.665.743 1.005 2.004.715 3.591h0l-.001.006c-.245 1.384-.856 2.654-1.657 3.609-.807.961-1.751 1.543-2.642 1.687-.78.118-1.423-.1-1.885-.595h0l-.007-.007c-.687-.721-1.02-2.007-.678-3.632z"
-          stroke="#B4B9BD"
+          stroke={color}
           strokeWidth={2}
         />
       </G>
@@ -37,4 +42,8 @@ export function Invite() {
   )
 }
 
+Invite.defaultProps = {
+  color: Colors.gray3,
+}
+
 export default React.memo(Invite)
diff --git a/src/icons/navigator/Settings.tsx b/src/icons/navigator/Settings.tsx
@@ -1,27 +1,31 @@
 import * as React from 'react'
 import Svg, { Circle, Path } from 'react-native-svg'
+import Colors from 'src/styles/colors'
 
-export function Settings() {
+interface Props {
+  color?: string
+}
+
+export function Settings({ color }: Props) {
   return (
     <Svg testID="Settings" width={32} height={32} viewBox="0 0 32 32" fill="none">
-      <Path
-        d="M17 8.5H7.5a1.5 1.5 0 100 3H17v-3z"
-        fill="#B4B9BD"
-        stroke="#B4B9BD"
-        strokeWidth={2}
-      />
-      <Path d="M14 24.5h9a2 2 0 002-2v0a2 2 0 00-2-2h-9" stroke="#B4B9BD" strokeWidth={2} />
-      <Circle cx={21.5} cy={9.5} r={4.5} stroke="#B4B9BD" strokeWidth={2} />
+      <Path d="M17 8.5H7.5a1.5 1.5 0 100 3H17v-3z" fill={color} stroke={color} strokeWidth={2} />
+      <Path d="M14 24.5h9a2 2 0 002-2v0a2 2 0 00-2-2h-9" stroke={color} strokeWidth={2} />
+      <Circle cx={21.5} cy={9.5} r={4.5} stroke={color} strokeWidth={2} />
       <Circle
         cx={10.5}
         cy={22.5}
         r={4.5}
         transform="rotate(-180 10.5 22.5)"
-        stroke="#B4B9BD"
+        stroke={color}
         strokeWidth={2}
       />
     </Svg>
   )
 }
 
+Settings.defaultProps = {
+  color: Colors.gray3,
+}
+
 export default React.memo(Settings)
diff --git a/src/navigator/DrawerNavigator.tsx b/src/navigator/DrawerNavigator.tsx
@@ -320,17 +320,23 @@ export default function DrawerNavigator({ route }: Props) {
       <Drawer.Screen
         name={Screens.Invite}
         component={Invite}
-        options={{ title: t('invite') ?? undefined, drawerIcon: InviteIcon }}
+        options={{
+          title: t('invite') ?? undefined,
+          drawerIcon: () => <InviteIcon color="#B4B9BD" />,
+        }}
       />
       <Drawer.Screen
         name={Screens.Settings}
         component={SettingsScreen}
-        options={{ title: t('settings') ?? undefined, drawerIcon: Settings }}
+        options={{
+          title: t('settings') ?? undefined,
+          drawerIcon: () => <Settings color="#B4B9BD" />,
+        }}
       />
       <Drawer.Screen
         name={Screens.Support}
         component={Support}
-        options={{ title: t('help') ?? undefined, drawerIcon: Help }}
+        options={{ title: t('help') ?? undefined, drawerIcon: () => <Help color="#B4B9BD" /> }}
       />
     </Drawer.Navigator>
   )

diff --git a/src/navigator/Navigator.tsx b/src/navigator/Navigator.tsx
@@ -75,6 +75,7 @@ import {
   noHeader,
   nuxNavigationOptions,
 } from 'src/navigator/Headers'
+import ProfileMenu from 'src/navigator/ProfileMenu'
 import QRNavigator from 'src/navigator/QRNavigator'
 import { Screens } from 'src/navigator/Screens'
 import TabNavigator from 'src/navigator/TabNavigator'
@@ -509,6 +510,11 @@ const generalScreens = (Navigator: typeof Stack) => (
       component={MultichainBeta}
       options={MultichainBeta.navigationOptions}
     />
+    <Navigator.Screen
+      name={Screens.ProfileMenu}
+      component={ProfileMenu}
+      options={ProfileMenu.navigationOptions as NativeStackNavigationOptions}
+    />
   </>
 )