feat: new UI flow for manual account backup for srp

Co-authored-by: smgv <gpatra1996@gmail.com>

Author: ieow

android/settings.gradle

@@ -39,8 +39,6 @@ dependencyResolutionManagement {
 include ':app'
 includeBuild(new File(["node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile())
 includeBuild('../node_modules/@react-native') {}
-include ':@react-native-community_blur'
-project(':@react-native-community_blur').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/blur/android')
 include ':lottie-react-native'
 project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')
 include ':react-native-gesture-handler'

app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.styles.ts

@@ -1,6 +1,6 @@
 // Third party dependencies.
 // eslint-disable-next-line @typescript-eslint/no-shadow
-import { StyleSheet, ViewStyle } from 'react-native';
+import { Platform, StyleSheet, ViewStyle } from 'react-native';
 
 // External dependencies.
 import { Theme } from '../../../../../../util/theme/models';
@@ -38,7 +38,10 @@ const styleSheet = (params: {
         borderTopRightRadius: 8,
         maxHeight: maxSheetHeight,
         overflow: 'hidden',
-        paddingBottom: screenBottomPadding,
+        paddingBottom:
+          Platform.OS === 'ios'
+            ? screenBottomPadding
+            : screenBottomPadding + 16,
         borderWidth: 1,
         borderColor: colors.border.muted,
         ...(isFullscreen && { height: maxSheetHeight }),

app/component-library/components/Buttons/Button/variants/ButtonSecondary/ButtonSecondary.styles.ts

@@ -20,13 +20,17 @@ const styleSheet = (params: {
 }) => {
   const { vars, theme } = params;
   const { colors } = theme;
-  const { style, isDanger, pressed } = vars;
+  const { style, isDanger, pressed, overridePressedColor } = vars;
   const colorObj = isDanger ? colors.error : colors.primary;
 
+  const pressedColor = pressed
+    ? overridePressedColor || colorObj.alternative
+    : 'transparent';
+
   return StyleSheet.create({
     base: Object.assign(
       {
-        backgroundColor: pressed ? colorObj.alternative : 'transparent',
+        backgroundColor: pressedColor,
         borderWidth: 1,
         borderColor: colorObj.default,
       } as ViewStyle,

app/component-library/components/Buttons/Button/variants/ButtonSecondary/ButtonSecondary.tsx

@@ -26,13 +26,15 @@ const ButtonSecondary = ({
   onPressOut,
   isDanger = false,
   label,
+  overridePressedColor,
   ...props
 }: ButtonSecondaryProps) => {
   const [pressed, setPressed] = useState(false);
   const { styles } = useStyles(styleSheet, {
     style,
     isDanger,
     pressed,
+    overridePressedColor,
   });
 
   const triggerOnPressedIn = useCallback(
@@ -72,9 +74,12 @@ const ButtonSecondary = ({
       label
     );
 
-    const renderLoading = () => (
-      <ActivityIndicator size="small" color={DEFAULT_BUTTONSECONDARY_LABEL_TEXTVARIANT} />
-    );
+  const renderLoading = () => (
+    <ActivityIndicator
+      size="small"
+      color={DEFAULT_BUTTONSECONDARY_LABEL_TEXTVARIANT}
+    />
+  );
 
   return (
     <Button

app/component-library/components/Buttons/Button/variants/ButtonSecondary/ButtonSecondary.types.ts

@@ -4,7 +4,9 @@ import { ButtonBaseProps } from '../../foundation/ButtonBase';
 /**
  * ButtonSecondary component props.
  */
-export type ButtonSecondaryProps = Omit<ButtonBaseProps, 'labelColor'>;
+export type ButtonSecondaryProps = Omit<ButtonBaseProps, 'labelColor'> & {
+  overridePressedColor?: string;
+};
 
 /**
  * Style sheet input parameters.
@@ -15,4 +17,5 @@ export type ButtonSecondaryStyleSheetVars = Pick<
 > & {
   isDanger: boolean;
   pressed: boolean;
+  overridePressedColor?: string;
 };

app/component-library/components/Icons/Icon/Icon.assets.ts

@@ -273,6 +273,8 @@ import webtrafficSVG from './assets/web-traffic.svg';
 import widgetsSVG from './assets/widgets.svg';
 import wifioffSVG from './assets/wifi-off.svg';
 import wifiSVG from './assets/wifi.svg';
+import eyeSlashSolidSVG from './assets/eye-slash-solid.svg';
+import eyeSolidSVG from './assets/eye-solid.svg';
 import dangerSolidSVG from './assets/danger-solid.svg';
 import successSolidSVG from './assets/success.svg';
 import xSVG from './assets/x.svg';
@@ -550,6 +552,8 @@ export const assetByIconName: AssetByIconName = {
   [IconName.Widgets]: widgetsSVG,
   [IconName.WifiOff]: wifioffSVG,
   [IconName.Wifi]: wifiSVG,
+  [IconName.EyeSlashSolid]: eyeSlashSolidSVG,
+  [IconName.EyeSolid]: eyeSolidSVG,
   [IconName.DangerSolid]: dangerSolidSVG,
   [IconName.SuccessSolid]: successSolidSVG,
   [IconName.X]: xSVG,

app/component-library/components/Icons/Icon/Icon.types.ts

@@ -343,6 +343,8 @@ export enum IconName {
   Widgets = 'Widgets',
   WifiOff = 'WifiOff',
   Wifi = 'Wifi',
+  EyeSlashSolid = 'EyeSlashSolid',
+  EyeSolid = 'EyeSolid',
   DangerSolid = 'DangerSolid',
   SuccessSolid = 'SuccessSolid',
   X = 'X',

app/component-library/components/Icons/Icon/assets/eye-slash-solid.svg

@@ -134,6 +134,9 @@ import ImportNewSecretRecoveryPhrase from '../../Views/ImportNewSecretRecoveryPh
 import { SelectSRPBottomSheet } from '../../Views/SelectSRP/SelectSRPBottomSheet';
 ///: END:ONLY_INCLUDE_IF
 import NavigationService from '../../../core/NavigationService';
+import SeedphraseModal from '../../UI/SeedphraseModal';
+import SkipAccountSecurityModal from '../../UI/SkipAccountSecurityModal';
+import SuccessErrorSheet from '../../Views/SuccessErrorSheet';
 import ConfirmTurnOnBackupAndSyncModal from '../../UI/Identity/ConfirmTurnOnBackupAndSyncModal/ConfirmTurnOnBackupAndSyncModal';
 import AddNewAccount from '../../Views/AddNewAccount';
 import SwitchAccountTypeModal from '../../Views/confirmations/components/modals/switch-account-type-modal';
@@ -334,6 +337,18 @@ const RootModalFlow = (
       name={Routes.MODAL.MODAL_MANDATORY}
       component={ModalMandatory}
     />
+    <Stack.Screen
+      name={Routes.SHEET.SEEDPHRASE_MODAL}
+      component={SeedphraseModal}
+    />
+    <Stack.Screen
+      name={Routes.SHEET.SKIP_ACCOUNT_SECURITY_MODAL}
+      component={SkipAccountSecurityModal}
+    />
+    <Stack.Screen
+      name={Routes.SHEET.SUCCESS_ERROR_SHEET}
+      component={SuccessErrorSheet}
+    />
     <Stack.Screen
       name={Routes.SHEET.ACCOUNT_SELECTOR}
       component={AccountSelector}