From f01e1e5a626dffdefbf8e0ec8d195e22f64ebaf1 Mon Sep 17 00:00:00 2001 From: Prakhar Agarwal Date: Fri, 14 Jun 2024 14:06:15 +0530 Subject: [PATCH 1/2] feat: create profile screen, add switch button Signed-off-by: Prakhar Agarwal --- app/assets/icons/switch.svg | 11 +------- .../atomic/galoy-icon/galoy-icon.tsx | 2 ++ app/i18n/en/index.ts | 2 ++ app/i18n/i18n-types.ts | 16 ++++++++++++ app/i18n/raw-i18n/source/en.json | 4 ++- app/navigation/root-navigator.tsx | 9 ++++++- app/navigation/stack-param-lists.ts | 1 + .../settings-screen/account/banner.tsx | 26 ++++++++++++++++++- app/screens/settings-screen/account/index.ts | 1 + .../settings-screen/account/profile.tsx | 25 ++++++++++++++++++ 10 files changed, 84 insertions(+), 13 deletions(-) create mode 100644 app/screens/settings-screen/account/profile.tsx 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..11342f5afb 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", @@ -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", diff --git a/app/i18n/i18n-types.ts b/app/i18n/i18n-types.ts index 2581cddbe4..1dbddf0176 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 */ @@ -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 */ diff --git a/app/i18n/raw-i18n/source/en.json b/app/i18n/raw-i18n/source/en.json index 6bdd1785fa..25c88500a3 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", @@ -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.", 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 +38,10 @@ export const AccountBanner = () => { if (loading) return + const handleSwitchPress = () => { + navigation.navigate("profileScreen") + } + return ( @@ -46,6 +57,12 @@ export const AccountBanner = () => { {isUserLoggedIn ? usernameTitle : LL.SettingsScreen.logInOrCreateAccount()} + + + + {LL.AccountScreen.switch()} + + ) @@ -67,4 +84,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..b0d751023b --- /dev/null +++ b/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 ( + + + + ) +} + +const useStyles = makeStyles(() => ({ + outer: { + marginTop: 4, + paddingHorizontal: 12, + paddingBottom: 20, + display: "flex", + flexDirection: "column", + rowGap: 12, + }, +})) From 1fd97819a91aa81af6aa7489e23e7967f6e797d9 Mon Sep 17 00:00:00 2001 From: Prakhar Agarwal Date: Fri, 14 Jun 2024 23:03:35 +0530 Subject: [PATCH 2/2] feat: add profile item Signed-off-by: Prakhar Agarwal --- app/i18n/en/index.ts | 6 +- app/i18n/i18n-types.ts | 24 ++++- app/i18n/raw-i18n/source/en.json | 6 +- .../settings-screen/account/banner.tsx | 4 - .../settings-screen/account/profile.tsx | 102 +++++++++++++++++- 5 files changed, 129 insertions(+), 13 deletions(-) diff --git a/app/i18n/en/index.ts b/app/i18n/en/index.ts index 11342f5afb..bc2f1fcec7 100644 --- a/app/i18n/en/index.ts +++ b/app/i18n/en/index.ts @@ -2424,6 +2424,10 @@ const en: BaseTranslation = { accountId: "Account ID", copy: "Copy" }, + ProfileScreen: { + addNew : "Add new", + logout: "Logout", + }, TotpRegistrationInitiateScreen: { title: "Two-factor authentication", content: @@ -2682,7 +2686,7 @@ const en: BaseTranslation = { phone: "Phone", phoneNumber: "Phone Number", preimageProofOfPayment: "Preimage / Proof of Payment", - profile: "Profile", + 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 1dbddf0176..e50e55a8c1 100644 --- a/app/i18n/i18n-types.ts +++ b/app/i18n/i18n-types.ts @@ -7581,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 @@ -8400,7 +8410,7 @@ type RootTranslation = { */ preimageProofOfPayment: string /** - * P​r​o​f​i​l​e + * P​r​o​f​i​l​e​s */ profile: string /** @@ -16594,6 +16604,16 @@ export type TranslationFunctions = { */ copy: () => LocalizedString } + ProfileScreen: { + /** + * Add new + */ + addNew: () => LocalizedString + /** + * Logout + */ + logout: () => LocalizedString + } TotpRegistrationInitiateScreen: { /** * Two-factor authentication @@ -17398,7 +17418,7 @@ export type TranslationFunctions = { */ preimageProofOfPayment: () => LocalizedString /** - * Profile + * Profiles */ profile: () => LocalizedString /** diff --git a/app/i18n/raw-i18n/source/en.json b/app/i18n/raw-i18n/source/en.json index 25c88500a3..5eb591c153 100644 --- a/app/i18n/raw-i18n/source/en.json +++ b/app/i18n/raw-i18n/source/en.json @@ -2343,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." @@ -2579,7 +2583,7 @@ "phone": "Phone", "phoneNumber": "Phone Number", "preimageProofOfPayment": "Preimage / Proof of Payment", - "profile": "Profile", + "profile": "Profiles", "rate": "Rate", "reauth": "Your session has expired. Please log in again.", "restart": "Restart", diff --git a/app/screens/settings-screen/account/banner.tsx b/app/screens/settings-screen/account/banner.tsx index 57adb5e696..138dd28ed4 100644 --- a/app/screens/settings-screen/account/banner.tsx +++ b/app/screens/settings-screen/account/banner.tsx @@ -15,10 +15,6 @@ 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() diff --git a/app/screens/settings-screen/account/profile.tsx b/app/screens/settings-screen/account/profile.tsx index b0d751023b..8e1d2d05d0 100644 --- a/app/screens/settings-screen/account/profile.tsx +++ b/app/screens/settings-screen/account/profile.tsx @@ -1,25 +1,117 @@ import { ScrollView } from "react-native-gesture-handler" - import { Screen } from "@app/components/screen" -import { makeStyles } from "@rneui/themed" +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 useStyles = makeStyles(() => ({ +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, - paddingHorizontal: 12, 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", + }, }))