From 60f738f72243af124a75992999c278c0b521102e Mon Sep 17 00:00:00 2001 From: Jacob Waterman Date: Thu, 7 Mar 2024 10:11:33 -0800 Subject: [PATCH] fix(keylessBackup): update icon for homecard and primer screen (#5052) ### Description Updating after discussion with Nitya ![Screenshot_20240306_154649](https://github.com/valora-inc/wallet/assets/8432644/20b46484-1d2b-4646-8253-5f4f65874d3d) --- __mocks__/src/icons/KeylessBackup.tsx | 3 + locales/base/translation.json | 2 +- src/home/NotificationBox.tsx | 3 +- src/icons/Chain.tsx | 195 --------------------- src/icons/KeylessBackup.tsx | 38 ++++ src/keylessBackup/WalletSecurityPrimer.tsx | 6 +- 6 files changed, 47 insertions(+), 200 deletions(-) create mode 100644 __mocks__/src/icons/KeylessBackup.tsx delete mode 100644 src/icons/Chain.tsx create mode 100644 src/icons/KeylessBackup.tsx diff --git a/__mocks__/src/icons/KeylessBackup.tsx b/__mocks__/src/icons/KeylessBackup.tsx new file mode 100644 index 00000000000..a705923e85e --- /dev/null +++ b/__mocks__/src/icons/KeylessBackup.tsx @@ -0,0 +1,3 @@ +export default function () { + return null +} diff --git a/locales/base/translation.json b/locales/base/translation.json index 199ae362405..2bf76bb017a 100644 --- a/locales/base/translation.json +++ b/locales/base/translation.json @@ -29,7 +29,7 @@ "dataSaver": "Data Saver", "enableDataSaver": "Enable Data Saver", "dataSaverDetail": "Data Saver mode allows you to communicate with the the network through a trusted node. You can always change this mode in app settings.", - "keylessBackupSettingsTitle": "Email & Phone Recovery", + "keylessBackupSettingsTitle": "Email & Phone Backup", "keylessBackupSettingsDeleteError": "Your backup was not able to be deleted, please wait & try again later.", "setup": "Set Up", "restartModalSwitchOff": { diff --git a/src/home/NotificationBox.tsx b/src/home/NotificationBox.tsx index c94399d2192..0558d811dbf 100644 --- a/src/home/NotificationBox.tsx +++ b/src/home/NotificationBox.tsx @@ -32,6 +32,7 @@ import { DEFAULT_PRIORITY } from 'src/home/reducers' import { getExtraNotifications } from 'src/home/selectors' import { Notification, NotificationBannerCTATypes, NotificationType } from 'src/home/types' import GuideKeyIcon from 'src/icons/GuideKeyHomeCardIcon' +import KeylessBackup from 'src/icons/KeylessBackup' import { boostRewards, getVerified, learnCelo, lightningPhone } from 'src/images/Images' import { ensurePincode, navigate } from 'src/navigator/NavigationService' import { Screens } from 'src/navigator/Screens' @@ -107,7 +108,7 @@ export function useSimpleActions() { id: NotificationType.keyless_backup_prompt, type: NotificationType.keyless_backup_prompt, text: t('keylessBackupNotification'), - icon: , + icon: , priority: BACKUP_PRIORITY, testID: 'KeylessBackupNotification', callToActions: [ diff --git a/src/icons/Chain.tsx b/src/icons/Chain.tsx deleted file mode 100644 index 2d813ce9ba9..00000000000 --- a/src/icons/Chain.tsx +++ /dev/null @@ -1,195 +0,0 @@ -import * as React from 'react' -import { ViewStyle } from 'react-native' -import Svg, { Path } from 'react-native-svg' - -interface Props { - style?: ViewStyle -} - -export default function Chain({ style }: Props) { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} diff --git a/src/icons/KeylessBackup.tsx b/src/icons/KeylessBackup.tsx new file mode 100644 index 00000000000..c8351e33090 --- /dev/null +++ b/src/icons/KeylessBackup.tsx @@ -0,0 +1,38 @@ +import * as React from 'react' +import { ViewStyle } from 'react-native' +import Svg, { Mask, Path, Rect } from 'react-native-svg' + +interface Props { + style?: ViewStyle +} + +export default function KeylessBackup({ style }: Props) { + return ( + + + + + + + + + + ) +} diff --git a/src/keylessBackup/WalletSecurityPrimer.tsx b/src/keylessBackup/WalletSecurityPrimer.tsx index edd5c08bda5..64e1b8ed8c2 100644 --- a/src/keylessBackup/WalletSecurityPrimer.tsx +++ b/src/keylessBackup/WalletSecurityPrimer.tsx @@ -6,7 +6,7 @@ import { SafeAreaView } from 'react-native-safe-area-context' import { KeylessBackupEvents } from 'src/analytics/Events' import ValoraAnalytics from 'src/analytics/ValoraAnalytics' import Button, { BtnSizes, BtnTypes } from 'src/components/Button' -import Chain from 'src/icons/Chain' +import KeylessBackup from 'src/icons/KeylessBackup' import { KeylessBackupFlow } from 'src/keylessBackup/types' import DrawerTopBar from 'src/navigator/DrawerTopBar' import { navigate } from 'src/navigator/NavigationService' @@ -27,7 +27,7 @@ function WalletSecurityPrimer({ route }: Props) { {showDrawerTopBar && } - + {t('walletSecurityPrimer.title')} {t('walletSecurityPrimer.description')} @@ -58,7 +58,7 @@ const styles = StyleSheet.create({ scrollContainer: { padding: Spacing.Thick24, }, - chainIcon: { + icon: { alignSelf: 'center', }, title: {