diff --git a/app/assets/icons/switch.svg b/app/assets/icons/switch.svg index 02e63f98c6..00fb3654d0 100644 --- a/app/assets/icons/switch.svg +++ b/app/assets/icons/switch.svg @@ -1,10 +1 @@ - - - - - - - - - - + \ No newline at end of file diff --git a/app/components/atomic/galoy-icon/galoy-icon.tsx b/app/components/atomic/galoy-icon/galoy-icon.tsx index 679baec772..61295c8efc 100644 --- a/app/components/atomic/galoy-icon/galoy-icon.tsx +++ b/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 diff --git a/app/i18n/en/index.ts b/app/i18n/en/index.ts index eaeda791c5..bc2f1fcec7 100644 --- a/app/i18n/en/index.ts +++ b/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", diff --git a/app/i18n/i18n-types.ts b/app/i18n/i18n-types.ts index 2581cddbe4..e50e55a8c1 100644 --- a/app/i18n/i18n-types.ts +++ b/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 */ diff --git a/app/i18n/raw-i18n/source/en.json b/app/i18n/raw-i18n/source/en.json index 6bdd1785fa..5eb591c153 100644 --- a/app/i18n/raw-i18n/source/en.json +++ b/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.", diff --git a/app/navigation/root-navigator.tsx b/app/navigation/root-navigator.tsx index 7b111c951c..936bff3832 100644 --- a/app/navigation/root-navigator.tsx +++ b/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(), }} /> + { const styles = useStyles() const { LL } = useI18nContext() + const { + theme: { colors }, + } = useTheme() const navigation = useNavigation>() @@ -31,6 +34,10 @@ export const AccountBanner = () => { if (loading) return + const handleSwitchPress = () => { + navigation.navigate("profileScreen") + } + return ( @@ -46,6 +53,12 @@ export const AccountBanner = () => { {isUserLoggedIn ? usernameTitle : LL.SettingsScreen.logInOrCreateAccount()} + + + + {LL.AccountScreen.switch()} + + ) @@ -67,4 +80,11 @@ const useStyles = makeStyles(() => ({ alignItems: "center", columnGap: 12, }, + switch: { + display: "flex", + flexDirection: "row", + alignItems: "center", + columnGap: 4, + marginLeft: "auto", + }, })) diff --git a/app/screens/settings-screen/account/index.ts b/app/screens/settings-screen/account/index.ts index e0a5266ce9..33e1230ff5 100644 --- a/app/screens/settings-screen/account/index.ts +++ b/app/screens/settings-screen/account/index.ts @@ -1 +1,2 @@ export * from "./account-screen" +export * from "./profile" diff --git a/app/screens/settings-screen/account/profile.tsx b/app/screens/settings-screen/account/profile.tsx new file mode 100644 index 0000000000..8e1d2d05d0 --- /dev/null +++ b/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 ( + + + {data.map((profile, index) => { + return + })} + {}} containerStyle={styles.addNewButton}> + + {LL.ProfileScreen.addNew()} + + + + ) +} + +const Profile: React.FC<{ username: string; selected?: boolean }> = ({ + username, + selected, +}) => { + const styles = useStyles() + const { LL } = useI18nContext() + + return ( + + + + {selected && ( + + )} + + {username} + {!selected && ( + {}}> + {LL.ProfileScreen.logout()} + + )} + + + + ) +} + +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", + }, +}))