[APP-1049]: (feat): Backups V2 (#5310)

* [APP-1051]: (feat): add backups global config (#5306)

* (feat): add backups global config

* stash

* add migration for setting initial backup method

* add method to migrations array

* revert pbx change

* change backup status value

* [APP-1052]: Add icon to Settings depending on `preferredBackupMethod` and `backupStatus` (#5313)

* [APP-1052]: (feat): adjust settings page row

* fix migration and hook for useWallets

* simplify an if statement

* wallets and backups screen progress (#5315)

* wallets and backups screen progress

* manual backups progress

* progress

* feat(backups): more work on wallets and backups

* revert pbx

* rev init wallet change

* final touches on wallets and backup view

* cleanup unused stuff and progress on backups flow

* backups: warning + new secret phrase styles (#5322)

* save progress

* cleanup and finish secret phrase / private key viewiing screens

---------

Co-authored-by: Matthew Wall <[email protected]>

* chore: cleanup WalletsAndBackup settings screen and replace lang with i18n

* android settings fixes

* @matthew/app 1106 (#5359)

* progress on cloud backup flow

* cloud backup flow progress

* [APP-1105]: Progress on restore from cloud flow (#5358)

* progress on restore from cloud

* progress on choose backup flow

* f

* test signed commit

* backups v2 restore from icloud flow done

* progress on restore step

* restore from backup working

* fix UserData.json restoring from other backups

* some cloud backup type improvements

* fix menu item width bug

* bug fixes

* cleanup unused imports from manage cloud backups file

* typescript, lint and cleanup

* fix lint issues

* fix file name casing

* fix import secret phrase or private key image

* fix casing

* android style fixes

* wrap up work

* android stuff

* android bsstack fixes

* more touches

* fixes

* improve spacing on >1 line wallet rows

* fix lint

* @matthew/app 1135 (#5397)

* fix button legibility

* fix manual backup bug

* change log

* fix bug where create wallet sometimes uses the wrong wallet

* add ens avatars to wallets view

* cleanup size

* add more padding to image on settings page

* fix

* fix algo used to calculate account menu item height

* add change drivce accounts for android

* cleanup .android files

* cleanup .android files

* change dev settings sheet title on android

* fix create wallet modal on close opening the create profile sheet

* add menu item being the entire context menu boundary (#5405)

* few small changes

* @matthew/app 1157 (#5406)

* sort wallets

* fix numeric increment and sort wallets by type and backup status

* i18n stuff

* add icons

* ens fix + context menu button color change (#5414)

* skylar did all this (#5409)

* skylar did all this

* change backupProvider to be served from user data and not local wallet state

* fix stuff

* cleanup merge

* add explainer sheet from global backups

* rm console logs

* improve pin screen on android

* some i18n and cloud backup changes

* backups: show back up state (#5420)

* chore: rug portfolio websocket (#5371)

* rug portfolio websocket

* cleanup

* rug it all

---------

Co-authored-by: skylarbarrera <[email protected]>

* skylar did all this

* change backupProvider to be served from user data and not local wallet state

* fix stuff

* cleanup merge

* txSim: price clean up (#5411)

* save

* swaps: fix max native check (#5399)

* audit: undici (#5419)

* fin

* clean up

* only save local password if we dont have

* finish piping up title

---------

Co-authored-by: Derek Nelson <[email protected]>
Co-authored-by: Matthew Wall <[email protected]>

* impl. backing up all wallets at once (#5432)

* progress

* backup all wallets progress

* add some logging

* Update src/screens/Diagnostics/index.tsx

* .

* Fix Android google drive login quirks (#5461)

* fix android stuff

* fix lint

* rev pbx

* /

* Fix Android ShadowStack causing TextInputs to be funky... and not in a fun way (#5478)

* fix some i18n

* add cloudPlatform to description

* mother of god

* undo test changes

* added assets to xcode

* fix files (#5468)

* Add this wallet sheet doesn't dismiss after backing up to iCloud (#5467)

* fix goBack not being called on backup success

* return success

* fix view cloud backups not working (#5466)

* Android only - previous back up with pin code requires a new creation each time to view (#5482)

* temp change

* change validPin flag when biometrics fails to decrypt

* Fixes to Android Google Account Management (#5476)

* lots of android account changing fixes

* remove log

* remove remoteProvider

* i18n

* test signing key

* init (#5507)

* fix android pin flow

* restore to backup changes

* restore changes

* fix lint

* restoration changes

* getprivatekey call changes

* smol cleanup on keychain

* rm log

* fix current backup not being restored into keychain properly

* add keychain logging

* some backups issues solved

* fix some longstanding android old pin decryption and create wallet not prioritizing seed phrases

* remove unused lodash import and console logs

* final restoration changes

* fix backup prompt not working since it wasn't wrapped in the provider

* undo commit to nfts query

* add login if needed on android

* fix no provider modal

* rm xcode assets

* Update src/components/backup/BackupCloudStep.tsx

Co-authored-by: Bruno Barbieri <[email protected]>

* Apply suggestions from code review

Co-authored-by: Bruno Barbieri <[email protected]>

* remove keychain logging stuff

* fix lint

* fix i18n paths

---------

Co-authored-by: Skylar Barrera <[email protected]>
Co-authored-by: Derek Nelson <[email protected]>
Co-authored-by: Derek <[email protected]>
Co-authored-by: Bruno Barbieri <[email protected]>

src/components/PromoSheet.tsx

@@ -88,7 +88,6 @@ export function PromoSheet({
  const contentHeight = deviceHeight - (!isSmallPhone ? sharedCoolModalTopOffset : 0);
 
  return (
- // @ts-ignore
  <SlackSheet
  additionalTopPadding={IS_ANDROID ? StatusBar.currentHeight : false}
  contentHeight={contentHeight}

src/components/add-wallet/AddWalletList.tsx

@@ -10,8 +10,8 @@ type AddWalletListProps = {
 export const AddWalletList = ({ items, totalHorizontalInset }: AddWalletListProps) => {
  return (
  <Stack space="24px" separator={<Separator color="divider60 (Deprecated)" />}>
- {items.map((item: AddWalletItem) => (
- <AddWalletRow key={item.icon} content={item} totalHorizontalInset={totalHorizontalInset} />
+ {items.map((item: AddWalletItem, index: number) => (
+ <AddWalletRow key={typeof item.icon === 'string' ? item.icon : index} content={item} totalHorizontalInset={totalHorizontalInset} />
  ))}
  </Stack>
  );

src/components/add-wallet/AddWalletRow.tsx

@@ -1,28 +1,14 @@
+import React from 'react';
+import { ImageSourcePropType } from 'react-native';
+
 import { Box, Stack, Text, useForegroundColor } from '@/design-system';
-import { IS_ANDROID, IS_TEST } from '@/env';
 import styled from '@/styled-thing';
-import { useTheme } from '@/theme';
-import React from 'react';
-import { GradientText, Text as RNText } from '../text';
 import { Icon } from '../icons';
-import ConditionalWrap from 'conditional-wrap';
 import { deviceUtils } from '@/utils';
 import { ButtonPressAnimation } from '../animations';
-
-const RainbowText = styled(GradientText).attrs(({ theme: { colors } }: any) => ({
- angle: false,
- colors: colors.gradients.rainbow,
- end: { x: 0, y: 0.5 },
- start: { x: 1, y: 0.5 },
- steps: [0, 0.774321, 1],
-}))({});
-
-const TextIcon = styled(RNText).attrs({
- size: 29,
- weight: 'medium',
-})({
- marginVertical: IS_ANDROID ? -10 : 0,
-});
+import { ImgixImage } from '../images';
+import { Source } from 'react-native-fast-image';
+import { TextColor } from '@/design-system/color/palettes';
 
 const CaretIcon = styled(Icon).attrs(({ color }: { color: string }) => ({
  name: 'caret',
@@ -34,7 +20,8 @@ const CaretIcon = styled(Icon).attrs(({ color }: { color: string }) => ({
 export type AddWalletItem = {
  title: string;
  description: string;
- icon: string;
+ descriptionColor?: TextColor;
+ icon: string | ImageSourcePropType;
  iconColor?: string;
  testID?: string;
  onPress: () => void;
@@ -46,19 +33,17 @@ type AddWalletRowProps = {
 };
 
 export const AddWalletRow = ({ content, totalHorizontalInset }: AddWalletRowProps) => {
- const { colors } = useTheme();
  const labelQuaternary = useForegroundColor('labelQuaternary');
- const { title, description, icon, iconColor, testID, onPress } = content;
+ const { title, description, icon, descriptionColor, testID, onPress } = content;
 
  // device width - 2 * total horizontal inset from device boundaries - caret column width (30)
  const contentWidth = deviceUtils.dimensions.width - 2 * totalHorizontalInset - 30;
 
- const shouldUseRainbowText = !iconColor && !(IS_ANDROID && IS_TEST);
+ const size = 64;
 
  return (
  <Box
  as={ButtonPressAnimation}
- // @ts-ignore js component
  scaleTo={0.9}
  flexDirection="row"
  alignItems="center"
@@ -67,28 +52,23 @@ export const AddWalletRow = ({ content, totalHorizontalInset }: AddWalletRowProp
  testID={testID}
  >
  <Box width={{ custom: contentWidth }}>
- <Stack space="12px" alignHorizontal="left">
- <ConditionalWrap
- condition={shouldUseRainbowText}
- wrap={(children: React.ReactNode) => <RainbowText colors={colors}>{children}</RainbowText>}
- >
- <TextIcon color={iconColor}>{icon}</TextIcon>
- </ConditionalWrap>
- <ConditionalWrap
- condition={shouldUseRainbowText}
- wrap={(children: React.ReactNode) => (
- <Box marginBottom={{ custom: -4 }}>
- <RainbowText colors={colors}>
- <Box marginBottom={{ custom: 4 }}>{children}</Box>
- </RainbowText>
- </Box>
- )}
- >
- <Text size="20pt" weight="bold" color="label">
- {title}
- </Text>
- </ConditionalWrap>
- <Text size="13pt" weight="semibold" color="labelTertiary">
+ <Stack space="16px" alignHorizontal="left">
+ <Box
+ as={ImgixImage}
+ borderRadius={size / 2}
+ height={{ custom: size }}
+ marginLeft={{ custom: -12 }}
+ marginRight={{ custom: -12 }}
+ marginTop={{ custom: -12 }}
+ marginBottom={{ custom: -12 }}
+ source={icon as Source}
+ width={{ custom: size }}
+ size={size}
+ />
+ <Text size="20pt" weight="heavy" color="label">
+ {title}
+ </Text>
+ <Text size="15pt" weight="semibold" color={descriptionColor || 'labelTertiary'}>
  {description}
  </Text>
  </Stack>

src/components/asset-list/RecyclerAssetList2/index.tsx

@@ -193,23 +193,6 @@ function NavbarOverlay({ accentColor, position }: { accentColor?: string; positi
  [handlePressConnectedApps, handlePressQRCode, handlePressSettings]
  );
 
- const handlePressMenuItemAndroid = React.useCallback(
- (buttonIndex: number) => {
- switch (buttonIndex) {
- case 0:
- handlePressSettings();
- break;
- case 1:
- handlePressQRCode();
- break;
- case 2:
- handlePressConnectedApps();
- break;
- }
- },
- [handlePressConnectedApps, handlePressQRCode, handlePressSettings]
- );
-
  return (
  <Box
  as={RNAnimated.View}
@@ -262,11 +245,12 @@ function NavbarOverlay({ accentColor, position }: { accentColor?: string; positi
  rightComponent={
  IS_ANDROID ? (
  <AndroidContextMenu
- // no idea where dynamicOptions is defined as a required prop
  dynamicOptions={undefined}
  options={menuConfig.menuItems.map(item => item?.actionTitle)}
  cancelButtonIndex={menuConfig.menuItems.length - 1}
- onPressActionSheet={handlePressMenuItemAndroid}
+ onPressActionSheet={(buttonIndex: number) => {
+ handlePressMenuItem({ nativeEvent: { actionKey: menuConfig.menuItems[buttonIndex]?.actionKey } });
+ }}
  >
  <View>
  <Navbar.Item>

src/components/backup/AddWalletToCloudBackupStep.tsx

@@ -0,0 +1,123 @@
+import React, { useCallback } from 'react';
+import { Bleed, Box, Inline, Inset, Separator, Stack, Text } from '@/design-system';
+import * as lang from '@/languages';
+import { ImgixImage } from '../images';
+import WalletsAndBackupIcon from '@/assets/WalletsAndBackup.png';
+import { Source } from 'react-native-fast-image';
+import { cloudPlatform } from '@/utils/platform';
+import { ButtonPressAnimation } from '../animations';
+import Routes from '@/navigation/routesNames';
+import { useNavigation } from '@/navigation';
+import { useWallets } from '@/hooks';
+import { WalletCountPerType, useVisibleWallets } from '@/screens/SettingsSheet/useVisibleWallets';
+import { format } from 'date-fns';
+import { useCreateBackup } from './useCreateBackup';
+import { login } from '@/handlers/cloudBackup';
+
+const imageSize = 72;
+
+export default function AddWalletToCloudBackupStep() {
+ const { goBack } = useNavigation();
+ const { wallets, selectedWallet } = useWallets();
+
+ const walletTypeCount: WalletCountPerType = {
+ phrase: 0,
+ privateKey: 0,
+ };
+
+ const { lastBackupDate } = useVisibleWallets({ wallets, walletTypeCount });
+
+ const { onSubmit } = useCreateBackup({
+ walletId: selectedWallet.id,
+ navigateToRoute: {
+ route: Routes.SETTINGS_SHEET,
+ params: {
+ screen: Routes.SETTINGS_SECTION_BACKUP,
+ },
+ },
+ });
+
+ const potentiallyLoginAndSubmit = useCallback(async () => {
+ await login();
+ return onSubmit({});
+ }, [onSubmit]);
+
+ const onMaybeLater = useCallback(() => goBack(), [goBack]);
+
+ return (
+ <Inset horizontal={'24px'} vertical={'44px'}>
+ <Inset bottom={'44px'} horizontal={'24px'}>
+ <Stack alignHorizontal="center">
+ <Box
+ as={ImgixImage}
+ borderRadius={imageSize / 2}
+ height={{ custom: imageSize }}
+ marginLeft={{ custom: -12 }}
+ marginRight={{ custom: -12 }}
+ marginTop={{ custom: 0 }}
+ marginBottom={{ custom: 8 }}
+ source={WalletsAndBackupIcon as Source}
+ width={{ custom: imageSize }}
+ size={imageSize}
+ />
+ <Text align="center" size="26pt" weight="bold" color="label">
+ {lang.t(lang.l.back_up.cloud.add_wallet_to_cloud_backups)}
+ </Text>
+ </Stack>
+ </Inset>
+
+ <Bleed horizontal="24px">
+ <Separator color="separatorSecondary" thickness={1} />
+ </Bleed>
+
+ <ButtonPressAnimation scaleTo={0.95} onPress={() => potentiallyLoginAndSubmit().then(success => success && goBack())}>
+ <Box alignItems="center" justifyContent="center" paddingTop={'24px'} paddingBottom={'24px'}>
+ <Box alignItems="center" justifyContent="center" width="full">
+ <Inline alignHorizontal="justify" alignVertical="center" wrap={false}>
+ <Text color={'action (Deprecated)'} size="20pt" weight="bold">
+ 􀎽{' '}
+ {lang.t(lang.l.back_up.cloud.back_to_cloud_platform_now, {
+ cloudPlatform,
+ })}
+ </Text>
+ </Inline>
+ </Box>
+ </Box>
+ </ButtonPressAnimation>
+
+ <Bleed horizontal="24px">
+ <Separator color="separatorSecondary" thickness={1} />
+ </Bleed>
+
+ <ButtonPressAnimation scaleTo={0.95} onPress={onMaybeLater}>
+ <Box alignItems="center" justifyContent="center" paddingTop={'24px'} paddingBottom={'24px'}>
+ <Box alignItems="center" justifyContent="center" width="full">
+ <Inline alignHorizontal="justify" alignVertical="center" wrap={false}>
+ <Text color={'labelSecondary'} size="20pt" weight="bold">
+ {lang.t(lang.l.back_up.cloud.mayber_later)}
+ </Text>
+ </Inline>
+ </Box>
+ </Box>
+ </ButtonPressAnimation>
+
+ <Bleed horizontal="24px">
+ <Separator color="separatorSecondary" thickness={1} />
+ </Bleed>
+
+ {lastBackupDate && (
+ <Box alignItems="center" justifyContent="center" paddingTop={'24px'} paddingBottom={'24px'}>
+ <Box alignItems="center" justifyContent="center" width="full">
+ <Inline alignHorizontal="justify" alignVertical="center" wrap={false}>
+ <Text color={'labelTertiary'} size="15pt" weight="medium">
+ {lang.t(lang.l.back_up.cloud.latest_backup, {
+ date: format(lastBackupDate, "M/d/yy 'at' h:mm a"),
+ })}
+ </Text>
+ </Inline>
+ </Box>
+ </Box>
+ )}
+ </Inset>
+ );
+}