feat: add switch profile UI

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",
@@ -2423,6 +2424,10 @@ const en: BaseTranslation = {
     accountId: "Account ID",
     copy: "Copy"
   },
+  ProfileScreen: {
+    addNew : "Add new",
+    logout: "Logout",
+  },
   TotpRegistrationInitiateScreen: {
     title: "Two-factor authentication",
     content:
@@ -2681,6 +2686,7 @@ const en: BaseTranslation = {
     phone: "Phone",
     phoneNumber: "Phone Number",
     preimageProofOfPayment: "Preimage / Proof of Payment",
+    profile: "Profiles",
     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
 		 */
@@ -7577,6 +7581,16 @@ type RootTranslation = {
 		 */
 		copy: string
 	}
+	ProfileScreen: {
+		/**
+		 * A​d​d​ ​n​e​w
+		 */
+		addNew: string
+		/**
+		 * L​o​g​o​u​t
+		 */
+		logout: string
+	}
 	TotpRegistrationInitiateScreen: {
 		/**
 		 * T​w​o​-​f​a​c​t​o​r​ ​a​u​t​h​e​n​t​i​c​a​t​i​o​n
@@ -8395,6 +8409,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​s
+		 */
+		profile: string
 		/**
 		 * R​a​t​e
 		 */
@@ -16418,6 +16436,10 @@ export type TranslationFunctions = {
 		 * Level {level}
 		 */
 		level: (arg: { level: string }) => LocalizedString
+		/**
+		 * switch
+		 */
+		'switch': () => LocalizedString
 		/**
 		 * Account Level
 		 */
@@ -16582,6 +16604,16 @@ export type TranslationFunctions = {
 		 */
 		copy: () => LocalizedString
 	}
+	ProfileScreen: {
+		/**
+		 * Add new
+		 */
+		addNew: () => LocalizedString
+		/**
+		 * Logout
+		 */
+		logout: () => LocalizedString
+	}
 	TotpRegistrationInitiateScreen: {
 		/**
 		 * Two-factor authentication
@@ -17385,6 +17417,10 @@ export type TranslationFunctions = {
 		 * Preimage / Proof of Payment
 		 */
 		preimageProofOfPayment: () => LocalizedString
+		/**
+		 * Profiles
+		 */
+		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",
@@ -2342,6 +2343,10 @@
         "accountId": "Account ID",
         "copy": "Copy"
     },
+    "ProfileScreen": {
+        "addNew": "Add new",
+        "logout": "Logout"
+    },
     "TotpRegistrationInitiateScreen": {
         "title": "Two-factor authentication",
         "content": "Scan this QR code with your authenticator app. Alternatively, you can manually copy/paste the secret into your authenticator app."
@@ -2578,6 +2583,7 @@
         "phone": "Phone",
         "phoneNumber": "Phone Number",
         "preimageProofOfPayment": "Preimage / Proof of Payment",
+        "profile": "Profiles",
         "rate": "Rate",
         "reauth": "Your session has expired. Please log in again.",
         "restart": "Restart",
@@ -2728,7 +2734,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"
@@ -19,6 +19,9 @@ import { Text, makeStyles, useTheme, Skeleton } from "@rneui/themed"
 export const AccountBanner = () => {
   const styles = useStyles()
   const { LL } = useI18nContext()
+  const {
+    theme: { colors },
+  } = useTheme()
 
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
 
@@ -31,6 +34,10 @@ export const AccountBanner = () => {
 
   if (loading) return <Skeleton style={styles.outer} animation="pulse" />
 
+  const handleSwitchPress = () => {
+    navigation.navigate("profileScreen")
+  }
+
   return (
     <TouchableWithoutFeedback
       onPress={() =>
@@ -46,6 +53,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 +80,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,117 @@
+import { ScrollView } from "react-native-gesture-handler"
+import { Screen } from "@app/components/screen"
+import { GaloyPrimaryButton } from "@app/components/atomic/galoy-primary-button"
+import { useI18nContext } from "@app/i18n/i18n-react"
+import { TouchableOpacity, View } from "react-native"
+import { GaloyIcon } from "@app/components/atomic/galoy-icon"
+import { makeStyles, Text } from "@rneui/themed"
+
+export const ProfileScreen: React.FC = () => {
+  const styles = useStyles()
+  const { LL } = useI18nContext()
+
+  const data = [
+    {
+      username: "User 1",
+      selected: true,
+    },
+    {
+      username: "User 2",
+      selected: false,
+    },
+    {
+      username: "User 3",
+      selected: false,
+    },
+  ]
+
+  return (
+    <Screen keyboardShouldPersistTaps="handled">
+      <ScrollView contentContainerStyle={styles.outer}>
+        {data.map((profile, index) => {
+          return <Profile key={index} {...profile} />
+        })}
+        <GaloyPrimaryButton onPress={() => {}} containerStyle={styles.addNewButton}>
+          <GaloyIcon name="user" size={30} style={styles.icon} />
+          <Text>{LL.ProfileScreen.addNew()}</Text>
+        </GaloyPrimaryButton>
+      </ScrollView>
+    </Screen>
+  )
+}
+
+const Profile: React.FC<{ username: string; selected?: boolean }> = ({
+  username,
+  selected,
+}) => {
+  const styles = useStyles()
+  const { LL } = useI18nContext()
+
+  return (
+    <TouchableOpacity>
+      <View style={styles.profile}>
+        <View style={styles.iconContainer}>
+          {selected && (
+            <GaloyIcon name="check-circle" size={30} style={styles.checkIcon} />
+          )}
+        </View>
+        <Text>{username}</Text>
+        {!selected && (
+          <TouchableOpacity style={styles.logoutButton} onPress={() => {}}>
+            <Text style={styles.logoutButtonText}>{LL.ProfileScreen.logout()}</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+      <View style={styles.divider}></View>
+    </TouchableOpacity>
+  )
+}
+
+const useStyles = makeStyles(({ colors }) => ({
+  outer: {
+    marginTop: 4,
+    paddingBottom: 20,
+    display: "flex",
+    flexDirection: "column",
+    rowGap: 12,
+  },
+  iconContainer: {
+    height: 30,
+    width: 30,
+    marginRight: 10,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  icon: {
+    marginRight: 10,
+  },
+  addNewButton: {
+    marginVertical: 20,
+    marginHorizontal: "auto",
+    width: 150,
+  },
+  divider: {
+    borderWidth: 1,
+    borderColor: colors.grey4,
+  },
+  profile: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 10,
+    marginHorizontal: 10,
+  },
+  checkIcon: {
+    color: colors._green,
+    margin: 10,
+  },
+  logoutButton: {
+    marginLeft: "auto",
+    marginRight: 10,
+  },
+  logoutButtonText: {
+    color: colors.primary,
+    fontSize: 20,
+    fontWeight: "bold",
+  },
+}))