feat: add switch account functionality (#3308)

* feat: create profile screen, add switch button Signed-off-by: Prakhar Agarwal <[email protected]> * feat: add profile item Signed-off-by: Prakhar Agarwal <[email protected]> * feat: loads data from persistant state, displays it, switch b/w accounts, log out, and add new user Signed-off-by: Prakhar Agarwal <[email protected]> * feat: fetch usernames from backend Signed-off-by: Prakhar Agarwal <[email protected]> * feat: display profiles(fix #fb24fb) and enable switching Signed-off-by: Prakhar Agarwal <[email protected]> * fix: show switch option only when user is authenticated Signed-off-by: Prakhar Agarwal <[email protected]> * fix: call logout mutation Signed-off-by: Prakhar Agarwal <[email protected]> * fix: navigate to home screen on switching profile Signed-off-by: Prakhar Agarwal <[email protected]> * fix: switch icon color Signed-off-by: Prakhar Agarwal <[email protected]> * fix: disable back when loading data Signed-off-by: Prakhar Agarwal <[email protected]> * fix: go back 1 screen on profile switch Signed-off-by: Prakhar Agarwal <[email protected]> --------- Signed-off-by: Prakhar Agarwal <[email protected]>
GaloyMoney · Nov 5, 2024 · 495f0da · 495f0da
1 parent 979ebef
commit 495f0da
Show file tree

Hide file tree

Showing 9 changed files with 274 additions and 34 deletions.
diff --git a/app/assets/icons/switch.svg b/app/assets/icons/switch.svg
diff --git a/app/graphql/client.tsx b/app/graphql/client.tsx
@@ -199,15 +199,15 @@ const GaloyClient: React.FC<PropsWithChildren> = ({ children }) => {
       if (token) {
         authLink = setContext((request, { headers }) => ({
           headers: {
-            ...headers,
             authorization: getAuthorizationHeader(token),
+            ...headers,
           },
         }))
       } else {
         authLink = setContext((request, { headers }) => ({
           headers: {
-            ...headers,
             authorization: "",
+            ...headers,
           },
         }))
       }

diff --git a/app/graphql/generated.gql b/app/graphql/generated.gql
@@ -1644,6 +1644,13 @@ query transactionListForDefaultAccount($first: Int, $after: String, $last: Int,
   }
 }
 
+query username {
+  me {
+    username
+    __typename
+  }
+}
+
 query walletOverviewScreen {
   me {
     id

diff --git a/app/graphql/generated.ts b/app/graphql/generated.ts
@@ -2990,6 +2990,11 @@ export type OnChainUsdPaymentSendAsBtcDenominatedMutationVariables = Exact<{
 
 export type OnChainUsdPaymentSendAsBtcDenominatedMutation = { readonly __typename: 'Mutation', readonly onChainUsdPaymentSendAsBtcDenominated: { readonly __typename: 'PaymentSendPayload', readonly status?: PaymentSendResult | null, readonly errors: ReadonlyArray<{ readonly __typename: 'GraphQLApplicationError', readonly message: string }> } };
 
+export type UsernameQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type UsernameQuery = { readonly __typename: 'Query', readonly me?: { readonly __typename: 'User', readonly username?: string | null } | null };
+
 export type AccountDeleteMutationVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -6748,6 +6753,45 @@ export function useOnChainUsdPaymentSendAsBtcDenominatedMutation(baseOptions?: A
 export type OnChainUsdPaymentSendAsBtcDenominatedMutationHookResult = ReturnType<typeof useOnChainUsdPaymentSendAsBtcDenominatedMutation>;
 export type OnChainUsdPaymentSendAsBtcDenominatedMutationResult = Apollo.MutationResult<OnChainUsdPaymentSendAsBtcDenominatedMutation>;
 export type OnChainUsdPaymentSendAsBtcDenominatedMutationOptions = Apollo.BaseMutationOptions<OnChainUsdPaymentSendAsBtcDenominatedMutation, OnChainUsdPaymentSendAsBtcDenominatedMutationVariables>;
+export const UsernameDocument = gql`
+    query username {
+  me {
+    username
+  }
+}
+    `;
+
+/**
+ * __useUsernameQuery__
+ *
+ * To run a query within a React component, call `useUsernameQuery` and pass it any options that fit your needs.
+ * When your component renders, `useUsernameQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useUsernameQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useUsernameQuery(baseOptions?: Apollo.QueryHookOptions<UsernameQuery, UsernameQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<UsernameQuery, UsernameQueryVariables>(UsernameDocument, options);
+      }
+export function useUsernameLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<UsernameQuery, UsernameQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<UsernameQuery, UsernameQueryVariables>(UsernameDocument, options);
+        }
+export function useUsernameSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<UsernameQuery, UsernameQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<UsernameQuery, UsernameQueryVariables>(UsernameDocument, options);
+        }
+export type UsernameQueryHookResult = ReturnType<typeof useUsernameQuery>;
+export type UsernameLazyQueryHookResult = ReturnType<typeof useUsernameLazyQuery>;
+export type UsernameSuspenseQueryHookResult = ReturnType<typeof useUsernameSuspenseQuery>;
+export type UsernameQueryResult = Apollo.QueryResult<UsernameQuery, UsernameQueryVariables>;
 export const AccountDeleteDocument = gql`
     mutation accountDelete {
   accountDelete {

diff --git a/app/i18n/en/index.ts b/app/i18n/en/index.ts
@@ -2427,6 +2427,7 @@ const en: BaseTranslation = {
   ProfileScreen: {
     addNew : "Add new",
     logout: "Logout",
+    error: "Unable to fetch profiles at this time",
   },
   TotpRegistrationInitiateScreen: {
     title: "Two-factor authentication",

diff --git a/app/i18n/i18n-types.ts b/app/i18n/i18n-types.ts
@@ -7591,6 +7591,10 @@ type RootTranslation = {
 		 * Logout
 		 */
 		logout: string
+		/**
+		 * Unable to fetch profiles at this time
+		 */
+		error: string
 	}
 	TotpRegistrationInitiateScreen: {
 		/**
@@ -16614,6 +16618,10 @@ export type TranslationFunctions = {
 		 * Logout
 		 */
 		logout: () => LocalizedString
+		/**
+		 * Unable to fetch profiles at this time
+		 */
+		error: () => LocalizedString
 	}
 	TotpRegistrationInitiateScreen: {
 		/**

diff --git a/app/i18n/raw-i18n/source/en.json b/app/i18n/raw-i18n/source/en.json
@@ -2345,7 +2345,8 @@
     },
     "ProfileScreen": {
         "addNew": "Add new",
-        "logout": "Logout"
+        "logout": "Logout",
+        "error": "Unable to fetch profiles at this time"
     },
     "TotpRegistrationInitiateScreen": {
         "title": "Two-factor authentication",

diff --git a/app/screens/settings-screen/account/banner.tsx b/app/screens/settings-screen/account/banner.tsx
@@ -53,12 +53,14 @@ 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>
+        {isUserLoggedIn && (
+          <TouchableOpacity style={styles.switch} onPress={handleSwitchPress}>
+            <GaloyIcon name="switch" size={20} color={colors.primary} />
+            <Text type="p2" style={{ color: colors.primary }}>
+              {LL.AccountScreen.switch()}
+            </Text>
+          </TouchableOpacity>
+        )}
       </View>
     </TouchableWithoutFeedback>
   )