feat: settings screen refactor

feat: account banner on settings screen feat: blink address feat: account section ported chore: stuff feat: preferences chore: security and privacy feat: export tx feat: login from banner chore: empty right feat: need help fix: color profile for contact modal feat: community fix: tsx issue chore: small stuff feat: acc screen, auth email feat: auth flow working feat: tx limits feat: perfected delete flow chore: some more quirks feat: upgrade trial acc chore: upgrade for l1 feat: port complete fix: check-code fix: email issue feat: ln addr chore: addressing comments feat: totp feat: refetch totp and dont use caching fix: check-code fix: totp stuff Update app/components/modal-tooltip/modal-tooltip.tsx Co-authored-by: nicolasburtey <nicolasburtey@users.noreply.github.com> Update app/i18n/en/index.ts Co-authored-by: nicolasburtey <nicolasburtey@users.noreply.github.com> Update app/i18n/en/index.ts Co-authored-by: nicolasburtey <nicolasburtey@users.noreply.github.com> Update app/screens/settings-screen/account/settings/phone.tsx Co-authored-by: nicolasburtey <nicolasburtey@users.noreply.github.com> Update app/screens/settings-screen/settings/account-ln-address.tsx Co-authored-by: nicolasburtey <nicolasburtey@users.noreply.github.com> fix: comments test test(e2e): updated settings screen (#2922) chore: adding storybook test chore: addressing comments fix: typo fix: typo fix: typo test: e2e test: e2e test: e2e test: e2e test: e2e fix: flickering issue save test: e2e chore: login method refresh in case test: group suffix removed
GaloyMoney · Feb 5, 2024 · df8feb6 · df8feb6
1 parent 4fb7351
commit df8feb6
Show file tree

Hide file tree

Showing 76 changed files with 2,546 additions and 1,374 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -188,8 +188,8 @@ jobs:
           path: ~/galoy-mobile
 
       - node/install:
-           install-yarn: true
-           node-version: '18.18.2'
+          install-yarn: true
+          node-version: '18.18.2'
 
       - run: git checkout << pipeline.parameters.git_ref >>
       - run: gpg --keyserver keyserver.ubuntu.com --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB

diff --git a/.storybook/storybook.requires.js b/.storybook/storybook.requires.js
@@ -101,6 +101,7 @@ const getStories = () => {
     "./app/screens/settings-screen/display-currency-screen.stories.tsx": require("../app/screens/settings-screen/display-currency-screen.stories.tsx"),
     "./app/screens/settings-screen/language-screen.stories.tsx": require("../app/screens/settings-screen/language-screen.stories.tsx"),
     "./app/screens/settings-screen/settings-screen.stories.tsx": require("../app/screens/settings-screen/settings-screen.stories.tsx"),
+    "./app/screens/settings-screen/settings.stories.tsx": require("../app/screens/settings-screen/settings.stories.tsx"),
     "./app/screens/settings-screen/theme-screen.stories.tsx": require("../app/screens/settings-screen/theme-screen.stories.tsx"),
     "./app/screens/transaction-detail-screen/transaction-detail-screen.stories.tsx": require("../app/screens/transaction-detail-screen/transaction-detail-screen.stories.tsx"),
   };

diff --git a/__tests__/hooks/use-show-warning-secure-account.spec.tsx b/__tests__/hooks/use-show-warning-secure-account.spec.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import { useShowWarningSecureAccount } from "@app/screens/settings-screen/show-warning-secure-account"
+import { useShowWarningSecureAccount } from "@app/screens/settings-screen/account/show-warning-secure-account-hook"
 import { renderHook } from "@testing-library/react-hooks"
 import {
   CurrencyListDocument,

diff --git a/android/fastlane/Fastfile b/android/fastlane/Fastfile
@@ -109,7 +109,7 @@ platform :android do
       file_path: ENV["GRADLE_APK_OUTPUT_PATH"]
     )
 
-    max_retries = 3
+    max_retries = 10
     retries = 0
 
     begin

diff --git a/android/fastlane/README.md b/android/fastlane/README.md
@@ -15,53 +15,53 @@ For _fastlane_ installation instructions, see [Installing _fastlane_](https://do
 
 ## Android
 
-### android test
+### android build
 
 ```sh
-[bundle exec] fastlane android test
+[bundle exec] fastlane android build
 ```
 
-Runs all the tests
+Build Releasable APK
 
-### android build
+### android play_store_upload
 
 ```sh
-[bundle exec] fastlane android build
+[bundle exec] fastlane android play_store_upload
 ```
 
-Build a new version of the app
+Deploy a new version to the Google Play
 
-### android beta
+### android huawei_store_upload
 
 ```sh
-[bundle exec] fastlane android beta
+[bundle exec] fastlane android huawei_store_upload
 ```
 
-Deploy a new version to both Play Store and Huawei Store
+Deploy the new version to Huawei App Gallery
 
-### android play_store_release
+### android promote_to_beta
 
 ```sh
-[bundle exec] fastlane android play_store_release
+[bundle exec] fastlane android promote_to_beta
 ```
 
-Deploy a new version to the Google Play
+Promote Internal Testing build to Beta
 
-### android huawei_release
+### android promote_to_public
 
 ```sh
-[bundle exec] fastlane android huawei_release
+[bundle exec] fastlane android promote_to_public
 ```
 
-Deploy a new version to Huawei App Gallery
+Promote Internal Testing build to Public
 
-### android browserstack
+### android public_phased_percent
 
 ```sh
-[bundle exec] fastlane android browserstack
+[bundle exec] fastlane android public_phased_percent
 ```
 
-End to end testing on browserstack
+Phased Public Rollout
 
 ### android build_e2e
 
@@ -71,6 +71,14 @@ End to end testing on browserstack
 
 Build for end to end testing
 
+### android browserstack
+
+```sh
+[bundle exec] fastlane android browserstack
+```
+
+End to end testing on browserstack
+
 ----
 
 This README.md is auto-generated and will be re-generated every time [_fastlane_](https://fastlane.tools) is run.

diff --git a/app/assets/icons/refresh.svg b/app/assets/icons/refresh.svg
diff --git a/app/components/atomic/galoy-icon-button/galoy-icon-button.tsx b/app/components/atomic/galoy-icon-button/galoy-icon-button.tsx
@@ -13,6 +13,8 @@ export type GaloyIconButtonProps = {
   size: "small" | "medium" | "large"
   text?: string
   iconOnly?: boolean
+  color?: string
+  backgroundColor?: string
 }
 
 const sizeMapping = {
@@ -27,6 +29,8 @@ export const GaloyIconButton = ({
   text,
   iconOnly,
   disabled,
+  color,
+  backgroundColor,
   ...remainingProps
 }: GaloyIconButtonProps & PressableProps) => {
   const {
@@ -53,36 +57,36 @@ export const GaloyIconButton = ({
       case iconOnly && disabled:
         return {
           opacity: 0.7,
-          color: colors.primary,
+          color: color || colors.primary,
           backgroundColor: colors.transparent,
         }
       case iconOnly && pressed:
         return {
           opacity: 0.7,
-          color: colors.primary,
-          backgroundColor: colors.grey4,
+          color: color || colors.primary,
+          backgroundColor: backgroundColor || colors.grey4,
         }
       case iconOnly && !pressed:
         return {
-          color: colors.primary,
+          color: color || colors.primary,
           backgroundColor: colors.transparent,
         }
       case !iconOnly && disabled:
         return {
           opacity: 0.7,
-          color: colors.primary,
-          backgroundColor: colors.grey4,
+          color: color || colors.primary,
+          backgroundColor: backgroundColor || colors.grey4,
         }
       case !iconOnly && pressed:
         return {
           opacity: 0.7,
-          color: colors.primary,
-          backgroundColor: colors.grey4,
+          color: color || colors.primary,
+          backgroundColor: backgroundColor || colors.grey4,
         }
       case !iconOnly && !pressed:
         return {
-          color: colors.primary,
-          backgroundColor: colors.grey4,
+          color: color || colors.primary,
+          backgroundColor: backgroundColor || colors.grey4,
         }
       default:
         return {}

diff --git a/app/components/atomic/galoy-icon/galoy-icon.tsx b/app/components/atomic/galoy-icon/galoy-icon.tsx
@@ -35,6 +35,7 @@ import Pencil from "@app/assets/icons-redesign/pencil.svg"
 import QrCode from "@app/assets/icons-redesign/qr-code.svg"
 import Question from "@app/assets/icons-redesign/question.svg"
 import Receive from "@app/assets/icons-redesign/receive.svg"
+import Refresh from "@app/assets/icons/refresh.svg"
 import Send from "@app/assets/icons-redesign/send.svg"
 import Settings from "@app/assets/icons-redesign/settings.svg"
 import Share from "@app/assets/icons-redesign/share.svg"
@@ -100,6 +101,7 @@ export const icons = {
   "payment-success": PaymentSuccess,
   "payment-pending": PaymentPending,
   "payment-error": PaymentError,
+  "refresh": Refresh,
 } as const
 
 export type IconNamesType = keyof typeof icons

diff --git a/app/components/contact-modal/contact-modal.tsx b/app/components/contact-modal/contact-modal.tsx
@@ -108,8 +108,8 @@ const ContactModal: React.FC<Props> = ({
   return (
     <ReactNativeModal
       isVisible={isVisible}
-      backdropOpacity={0.3}
-      backdropColor={colors.grey3}
+      backdropOpacity={0.8}
+      backdropColor={colors.white}
       onBackdropPress={toggleModal}
       style={styles.modal}
     >
@@ -148,7 +148,7 @@ const useStyles = makeStyles(({ colors }) => ({
     marginHorizontal: 0,
   },
   listItemContainer: {
-    backgroundColor: colors.white,
+    backgroundColor: colors.grey5,
   },
   listItemTitle: {
     color: colors.black,

diff --git a/app/components/custom-modal/custom-modal.tsx b/app/components/custom-modal/custom-modal.tsx
@@ -69,10 +69,11 @@ const CustomModal: React.FC<CustomModalProps> = ({
   return (
     <Modal
       isVisible={isVisible}
-      backdropOpacity={0.7}
-      backdropColor={colors.grey3}
+      backdropOpacity={0.8}
+      backdropColor={colors.white}
       backdropTransitionOutTiming={0}
       avoidKeyboard={true}
+      onBackdropPress={toggleModal}
     >
       <View style={styles.container}>
         {showCloseIconButton && (
@@ -133,7 +134,7 @@ type UseStylesProps = {
 
 const useStyles = makeStyles(({ colors }, props: UseStylesProps) => ({
   container: {
-    backgroundColor: colors.white,
+    backgroundColor: colors.grey5,
     maxHeight: "95%",
     minHeight: props.minHeight || "auto",
     borderRadius: 16,

diff --git a/app/components/set-default-account-modal/set-default-account-modal.tsx b/app/components/set-default-account-modal/set-default-account-modal.tsx
@@ -2,7 +2,6 @@ import React from "react"
 import { Platform, View, TouchableOpacity, ActivityIndicator } from "react-native"
 import Modal from "react-native-modal"
 import { makeStyles, Text, useTheme } from "@rneui/themed"
-import { GaloyIcon } from "../atomic/galoy-icon"
 import { GaloyCurrencyBubble } from "../atomic/galoy-currency-bubble"
 import {
   WalletCurrency,
@@ -18,6 +17,7 @@ import { useNavigation } from "@react-navigation/native"
 import { StackNavigationProp } from "@react-navigation/stack"
 import { RootStackParamList } from "@app/navigation/stack-param-lists"
 import { ScrollView } from "react-native-gesture-handler"
+import { GaloyIconButton } from "../atomic/galoy-icon-button"
 
 gql`
   query setDefaultAccountModal {
@@ -146,15 +146,21 @@ export const SetDefaultAccountModalUI: React.FC<SetDefaultAccountModalUIProps> =
   return (
     <Modal
       isVisible={isVisible}
-      backdropOpacity={0.7}
-      backdropColor={colors.grey3}
+      backdropOpacity={0.8}
+      backdropColor={colors.white}
       backdropTransitionOutTiming={0}
       avoidKeyboard={true}
+      onBackdropPress={toggleModal}
+      onBackButtonPress={toggleModal}
     >
       <View style={styles.container}>
-        <TouchableOpacity style={styles.closeIcon} onPress={toggleModal}>
-          <GaloyIcon name="close" size={30} color={colors.grey0} />
-        </TouchableOpacity>
+        <GaloyIconButton
+          style={styles.closeIcon}
+          name="close"
+          size="medium"
+          color={colors.grey0}
+          onPress={toggleModal}
+        />
         <ScrollView
           style={styles.modalCard}
           persistentScrollbar={true}
@@ -224,7 +230,7 @@ const useStyles = makeStyles(({ colors }) => ({
     flexDirection: "column",
   },
   container: {
-    backgroundColor: colors.white,
+    backgroundColor: colors.grey5,
     maxHeight: "80%",
     minHeight: "auto",
     borderRadius: 16,

diff --git a/app/components/set-lightning-address-modal/set-lightning-address-modal.tsx b/app/components/set-lightning-address-modal/set-lightning-address-modal.tsx
@@ -173,11 +173,11 @@ export const SetLightningAddressModalUI = ({
 
   return (
     <CustomModal
-      title={LL.SetAddressModal.title({ bankName })}
-      minHeight={"50%"}
+      title={LL.SetAddressModal.setLightningAddress()}
+      minHeight={380}
       toggleModal={toggleModal}
       isVisible={isVisible}
-      primaryButtonTitle={LL.SetAddressModal.title({ bankName })}
+      primaryButtonTitle={LL.SetAddressModal.setLightningAddress()}
       primaryButtonLoading={loading}
       primaryButtonOnPress={setLightningAddress}
       primaryButtonDisabled={!lnAddress}
@@ -272,7 +272,7 @@ const useStyles = makeStyles(({ colors }) => ({
     paddingHorizontal: 12,
     borderRadius: 8,
     minHeight: 60,
-    backgroundColor: colors.grey5,
+    backgroundColor: colors.grey4,
     alignItems: "center",
     justifyContent: "space-between",
   },

diff --git a/app/components/version/version.tsx b/app/components/version/version.tsx
@@ -11,7 +11,6 @@ import { Text, makeStyles } from "@rneui/themed"
 const useStyles = makeStyles(({ colors }) => ({
   version: {
     color: colors.grey0,
-    fontSize: 18,
     marginTop: 18,
     textAlign: "center",
   },