feat: create profile screen, add switch button

Signed-off-by: Prakhar Agarwal <[email protected]>

app/components/atomic/galoy-icon/galoy-icon.tsx

@@ -52,6 +52,7 @@ import Note from "@app/assets/icons/note.svg"
 import People from "@app/assets/icons/people.svg"
 import Rank from "@app/assets/icons/rank.svg"
 import Refresh from "@app/assets/icons/refresh.svg"
+import Switch from "@app/assets/icons/switch.svg"
 import { makeStyles, useTheme } from "@rneui/themed"
 
 export const icons = {
@@ -106,6 +107,7 @@ export const icons = {
   "payment-error": PaymentError,
   "bell": Bell,
   "refresh": Refresh,
+  "switch": Switch,
 } as const
 
 export type IconNamesType = keyof typeof icons

app/i18n/en/index.ts

@@ -2375,6 +2375,7 @@ const en: BaseTranslation = {
     tapToAddPhoneNumber: "Tap to add phone number",
     loginMethods: "Login Methods",
     level: "Level {level: string}",
+    switch: "switch",
     accountLevel: "Account Level",
     upgrade: "Upgrade your account",
     logOutAndDeleteLocalData: "Log out and clear all local data",
@@ -2681,6 +2682,7 @@ const en: BaseTranslation = {
     phone: "Phone",
     phoneNumber: "Phone Number",
     preimageProofOfPayment: "Preimage / Proof of Payment",
+    profile: "Profile",
     rate: "Rate",
     reauth: "Your session has expired. Please log in again.",
     restart: "Restart",

app/i18n/i18n-types.ts

@@ -7407,6 +7407,10 @@ type RootTranslation = {
 		 * @param {string} level
 		 */
 		level: RequiredParams<'level'>
+		/**
+		 * s​w​i​t​c​h
+		 */
+		'switch': string
 		/**
 		 * A​c​c​o​u​n​t​ ​L​e​v​e​l
 		 */
@@ -8395,6 +8399,10 @@ type RootTranslation = {
 		 * P​r​e​i​m​a​g​e​ ​/​ ​P​r​o​o​f​ ​o​f​ ​P​a​y​m​e​n​t
 		 */
 		preimageProofOfPayment: string
+		/**
+		 * P​r​o​f​i​l​e
+		 */
+		profile: string
 		/**
 		 * R​a​t​e
 		 */
@@ -16418,6 +16426,10 @@ export type TranslationFunctions = {
 		 * Level {level}
 		 */
 		level: (arg: { level: string }) => LocalizedString
+		/**
+		 * switch
+		 */
+		'switch': () => LocalizedString
 		/**
 		 * Account Level
 		 */
@@ -17385,6 +17397,10 @@ export type TranslationFunctions = {
 		 * Preimage / Proof of Payment
 		 */
 		preimageProofOfPayment: () => LocalizedString
+		/**
+		 * Profile
+		 */
+		profile: () => LocalizedString
 		/**
 		 * Rate
 		 */

app/i18n/raw-i18n/source/en.json

@@ -2301,6 +2301,7 @@
         "tapToAddPhoneNumber": "Tap to add phone number",
         "loginMethods": "Login Methods",
         "level": "Level {level: string}",
+        "switch": "switch",
         "accountLevel": "Account Level",
         "upgrade": "Upgrade your account",
         "logOutAndDeleteLocalData": "Log out and clear all local data",
@@ -2578,6 +2579,7 @@
         "phone": "Phone",
         "phoneNumber": "Phone Number",
         "preimageProofOfPayment": "Preimage / Proof of Payment",
+        "profile": "Profile",
         "rate": "Rate",
         "reauth": "Your session has expired. Please log in again.",
         "restart": "Restart",
@@ -2728,7 +2730,7 @@
         "drivingAdoption": "I'm driving Bitcoin adoption using Blink.",
         "connectOnSocial": "Connect on social: ",
         "fullDetails": "Full details at ",
-        "learnMore": "Learn more about Adopting Bitcoin at ",
+        "learnMore": "Learn more about Adopting Bitcoin at",
         "mayChallenge": {
             "title": "May Challenge!",
             "description": "Grow your inner circle by 6 for a chance to win a set of Pizzas on your next Bitcoin Meetup.",

app/navigation/root-navigator.tsx

@@ -38,7 +38,7 @@ import SendBitcoinCompletedScreen from "@app/screens/send-bitcoin-screen/send-bi
 import SendBitcoinConfirmationScreen from "@app/screens/send-bitcoin-screen/send-bitcoin-confirmation-screen"
 import SendBitcoinDestinationScreen from "@app/screens/send-bitcoin-screen/send-bitcoin-destination-screen"
 import SendBitcoinDetailsScreen from "@app/screens/send-bitcoin-screen/send-bitcoin-details-screen"
-import { AccountScreen } from "@app/screens/settings-screen/account"
+import { AccountScreen, ProfileScreen } from "@app/screens/settings-screen/account"
 import { DefaultWalletScreen } from "@app/screens/settings-screen/default-wallet"
 import { DisplayCurrencyScreen } from "@app/screens/settings-screen/display-currency-screen"
 import { NotificationSettingsScreen } from "@app/screens/settings-screen/notifications-screen"
@@ -335,6 +335,13 @@ export const RootStack = () => {
           title: LL.common.account(),
         }}
       />
+      <RootNavigator.Screen
+        name="profileScreen"
+        component={ProfileScreen}
+        options={{
+          title: LL.common.profile(),
+        }}
+      />
       <RootNavigator.Screen
         name="notificationSettingsScreen"
         component={NotificationSettingsScreen}

app/navigation/stack-param-lists.ts

@@ -85,6 +85,7 @@ export type RootStackParamList = {
   transactionHistory?: undefined
   Earn: undefined
   accountScreen: undefined
+  profileScreen: undefined
   notificationSettingsScreen: undefined
   transactionLimitsScreen: undefined
   acceptTermsAndConditions: NewAccountFlowParamsList

app/screens/settings-screen/account/banner.tsx

@@ -4,7 +4,7 @@
  * If the user isn't logged in, it shows Login or Create Account
  * Later on, this will support switching between accounts
  */
-import { View } from "react-native"
+import { TouchableOpacity, View } from "react-native"
 import { TouchableWithoutFeedback } from "react-native-gesture-handler"
 
 import { GaloyIcon } from "@app/components/atomic/galoy-icon"
@@ -15,10 +15,17 @@ import { RootStackParamList } from "@app/navigation/stack-param-lists"
 import { useNavigation } from "@react-navigation/native"
 import { StackNavigationProp } from "@react-navigation/stack"
 import { Text, makeStyles, useTheme, Skeleton } from "@rneui/themed"
+import {
+  GaloyIconButton,
+  GaloyIconButtonProps,
+} from "@app/components/atomic/galoy-icon-button"
 
 export const AccountBanner = () => {
   const styles = useStyles()
   const { LL } = useI18nContext()
+  const {
+    theme: { colors },
+  } = useTheme()
 
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
 
@@ -31,6 +38,10 @@ export const AccountBanner = () => {
 
   if (loading) return <Skeleton style={styles.outer} animation="pulse" />
 
+  const handleSwitchPress = () => {
+    navigation.navigate("profileScreen")
+  }
+
   return (
     <TouchableWithoutFeedback
       onPress={() =>
@@ -46,6 +57,12 @@ export const AccountBanner = () => {
         <Text type="p2">
           {isUserLoggedIn ? usernameTitle : LL.SettingsScreen.logInOrCreateAccount()}
         </Text>
+        <TouchableOpacity style={styles.switch} onPress={handleSwitchPress}>
+          <GaloyIcon name="switch" size={20} />
+          <Text type="p2" style={{ color: colors.primary }}>
+            {LL.AccountScreen.switch()}
+          </Text>
+        </TouchableOpacity>
       </View>
     </TouchableWithoutFeedback>
   )
@@ -67,4 +84,11 @@ const useStyles = makeStyles(() => ({
     alignItems: "center",
     columnGap: 12,
   },
+  switch: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: 4,
+    marginLeft: "auto",
+  },
 }))

app/screens/settings-screen/account/index.ts

@@ -1 +1,2 @@
 export * from "./account-screen"
+export * from "./profile"

app/screens/settings-screen/account/profile.tsx

@@ -0,0 +1,25 @@
+import { ScrollView } from "react-native-gesture-handler"
+
+import { Screen } from "@app/components/screen"
+import { makeStyles } from "@rneui/themed"
+
+export const ProfileScreen: React.FC = () => {
+  const styles = useStyles()
+
+  return (
+    <Screen keyboardShouldPersistTaps="handled">
+      <ScrollView contentContainerStyle={styles.outer}></ScrollView>
+    </Screen>
+  )
+}
+
+const useStyles = makeStyles(() => ({
+  outer: {
+    marginTop: 4,
+    paddingHorizontal: 12,
+    paddingBottom: 20,
+    display: "flex",
+    flexDirection: "column",
+    rowGap: 12,
+  },
+}))