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

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/asset-list/RecyclerAssetList2/profile-header/ProfileActionButtonsRow.tsx

@@ -7,8 +7,7 @@ import { ButtonPressAnimation } from '@/components/animations';
 import { CopyFloatingEmojis } from '@/components/floating-emojis';
 import { enableActionsOnReadOnlyWallet } from '@/config';
 import { AccentColorProvider, Box, Column, Columns, Inset, Stack, Text, useColorMode } from '@/design-system';
-import { CurrencySelectionTypes, ExchangeModalTypes } from '@/helpers';
-import { useAccountProfile, useAccountSettings, useSwapCurrencyHandlers, useWallets } from '@/hooks';
+import { useAccountProfile, useAccountSettings, useWallets } from '@/hooks';
 import { delayNext } from '@/hooks/useMagicAutofocus';
 import { useNavigation } from '@/navigation';
 import { ethereumUtils, watchingAlert } from '@/utils';

src/components/backup/AddWalletToCloudBackupStep.tsx

@@ -0,0 +1,110 @@
+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 { useNavigation } from '@/navigation';
+import { useWallets } from '@/hooks';
+import { WalletCountPerType, useVisibleWallets } from '@/screens/SettingsSheet/useVisibleWallets';
+import { format } from 'date-fns';
+import { useCreateBackup } from './useCreateBackup';
+
+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,
+  });
+
+  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={onSubmit}>
+        <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>
+  );
+}