feat: new srp flow

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/Form/TextField/TextField.styles.ts

@@ -30,20 +30,18 @@ const styleSheet = (params: {
   }
 
   return StyleSheet.create({
-    base: Object.assign(
-      {
-        flexDirection: 'row',
-        alignItems: 'center',
-        borderRadius: 8,
-        height: Number(size),
-        borderWidth: 1,
-        borderColor,
-        opacity: isDisabled ? 0.5 : 1,
-        paddingHorizontal: 16,
-        backgroundColor: theme.colors.background.default,
-      } as ViewStyle,
-      style,
-    ) as ViewStyle,
+    base: Object.assign({
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderRadius: 8,
+      height: Number(size),
+      borderWidth: 1,
+      borderColor,
+      opacity: isDisabled ? 0.5 : 1,
+      paddingHorizontal: 16,
+      backgroundColor: theme.colors.background.default,
+      ...StyleSheet.flatten(style),
+    } as ViewStyle) as ViewStyle,
     startAccessory: {
       marginRight: 8,
     },

app/component-library/components/Modals/ModalMandatory/ModalMandatory.styles.ts

@@ -1,7 +1,9 @@
 // Third party dependencies.
-import { StyleSheet, TextStyle, Dimensions } from 'react-native';
+import { StyleSheet, Dimensions, TextStyle } from 'react-native';
 import { Theme } from '../../../../util/theme/models';
 import { getFontFamily, TextVariant } from '../../Texts/Text';
+import { typography } from '@metamask/design-tokens';
+import { colors as commonColors } from '../../../../styles/common';
 
 const screenHeight = Dimensions.get('window').height;
 /**
@@ -12,9 +14,10 @@ const screenHeight = Dimensions.get('window').height;
  * @param params.vars Inputs that the style sheet depends on.
  * @returns StyleSheet object.
  */
+
 const styleSheet = (params: { theme: Theme }) => {
   const { theme } = params;
-  const { colors, typography } = theme;
+  const { colors } = theme;
 
   return StyleSheet.create({
     screen: {
@@ -26,17 +29,29 @@ const styleSheet = (params: { theme: Theme }) => {
       padding: 16,
       marginHorizontal: 16,
     },
+    headerContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
     headerText: {
       color: colors.text.default,
       ...(typography.sHeadingMD as TextStyle),
       fontFamily: getFontFamily(TextVariant.HeadingMD),
       textAlign: 'center',
       marginBottom: 16,
     },
+    headerEmpty: {
+      width: 32,
+      height: 32,
+    },
     bodyContainer: { height: screenHeight / 2 },
     checkboxContainer: {
       flexDirection: 'row',
       marginTop: 16,
+      columnGap: 8,
+      marginRight: 16,
+      width: '90%',
     },
     checkboxText: {
       marginLeft: 8,
@@ -50,22 +65,20 @@ const styleSheet = (params: { theme: Theme }) => {
       width: '100%',
     },
     scrollToEndButton: {
-      width: 32,
-      height: 32,
-      borderRadius: 32 / 2,
-      backgroundColor: colors.background.default,
+      width: 40,
+      height: 40,
+      borderRadius: 40 / 2,
+      backgroundColor: commonColors.modalScrollButton,
       justifyContent: 'center',
       alignItems: 'center',
-      zIndex: 1,
+      zIndex: 10,
       position: 'absolute',
       bottom: 175,
       right: 32,
-      borderWidth: 1,
-      borderColor: colors.primary.default,
+      boxShadow: `0px 3px 8px ${commonColors.modalScrollButton}`,
     },
     footerHelpText: {
       marginTop: 16,
-      marginBottom: 4,
       textAlign: 'center',
       color: colors.text.alternative,
       ...(typography.sBodySM as TextStyle),

app/component-library/components/Modals/ModalMandatory/ModalMandatory.tsx

@@ -12,7 +12,7 @@ import { WebView } from '@metamask/react-native-webview';
 
 // External dependencies.
 import ButtonPrimary from '../../Buttons/Button/variants/ButtonPrimary';
-import Text from '../../Texts/Text';
+import Text, { TextVariant, TextColor } from '../../Texts/Text';
 import { useStyles } from '../../../hooks';
 import { useTheme } from '../../../../util/theme';
 import ReusableModal, {
@@ -21,7 +21,6 @@ import ReusableModal, {
 import Checkbox from '../../../../component-library/components/Checkbox';
 import { IconName } from '../../../../component-library/components/Icons/Icon';
 import ButtonIcon from '../../../../component-library/components/Buttons/ButtonIcon';
-
 // Internal dependencies
 import {
   WEBVIEW_SCROLL_END_EVENT,
@@ -122,14 +121,29 @@ const ModalMandatory = ({ route }: MandatoryModalProps) => {
     };
   }, []);
 
-  const renderHeader = () => (
-    <Text style={styles.headerText}>{headerTitle}</Text>
-  );
-
   const onPress = () => {
     modalRef.current?.dismissModal(onAccept);
   };
 
+  const onClose = () => {
+    modalRef.current?.dismissModal();
+  };
+
+  const renderHeader = () => (
+    <View style={styles.headerContainer}>
+      <View style={styles.headerEmpty} />
+      <Text variant={TextVariant.HeadingMD} color={TextColor.Default}>
+        {headerTitle}
+      </Text>
+      <ButtonIcon
+        testID={TermsOfUseModalSelectorsIDs.SCROLL_ARROW_BUTTON}
+        onPress={onClose}
+        iconName={IconName.Close}
+        hitSlop={12}
+      />
+    </View>
+  );
+
   const onMessage = (event: { nativeEvent: { data: string } }) => {
     if (event.nativeEvent.data === WEBVIEW_SCROLL_END_EVENT) {
       setIsScrollEnded(true);
@@ -152,6 +166,7 @@ const ModalMandatory = ({ route }: MandatoryModalProps) => {
         testID={TermsOfUseModalSelectorsIDs.SCROLL_ARROW_BUTTON}
         onPress={scrollToEnd}
         iconName={IconName.ArrowDown}
+        iconColor={colors.primary.default}
         hitSlop={12}
       />
     </View>
@@ -247,7 +262,9 @@ const ModalMandatory = ({ route }: MandatoryModalProps) => {
           testID={TermsOfUseModalSelectorsIDs.CHECKBOX}
         >
           <Checkbox onPress={handleSelect} isChecked={isCheckboxSelected} />
-          <Text style={styles.checkboxText}>{checkboxText}</Text>
+          <Text variant={TextVariant.BodySMMedium} color={TextColor.Default}>
+            {checkboxText}
+          </Text>
         </TouchableOpacity>
         <ButtonPrimary
           label={buttonText}
@@ -265,7 +282,13 @@ const ModalMandatory = ({ route }: MandatoryModalProps) => {
         />
         {isScrollToEndNeeded && renderScrollEndButton()}
         {footerHelpText ? (
-          <Text style={styles.footerHelpText}>{footerHelpText}</Text>
+          <Text
+            style={styles.footerHelpText}
+            variant={TextVariant.BodySM}
+            color={TextColor.Alternative}
+          >
+            {footerHelpText}
+          </Text>
         ) : null}
       </View>
     </ReusableModal>

app/component-library/components/Texts/Text/Text.types.ts

@@ -37,6 +37,7 @@ export enum TextColor {
   ErrorAlternative = 'ErrorAlternative',
   Warning = 'Warning',
   Info = 'Info',
+  Link = 'Link',
 }
 
 export type FontWeight =

app/components/Nav/App/App.tsx

@@ -134,6 +134,10 @@ import ImportNewSecretRecoveryPhrase from '../../Views/ImportNewSecretRecoveryPh
 import { SelectSRPBottomSheet } from '../../Views/SelectSRP/SelectSRPBottomSheet';
 ///: END:ONLY_INCLUDE_IF
 import NavigationService from '../../../core/NavigationService';
+import OnboardingSheet from '../../Views/OnboardingSheet';
+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 +338,22 @@ const RootModalFlow = (
       name={Routes.MODAL.MODAL_MANDATORY}
       component={ModalMandatory}
     />
+    <Stack.Screen
+      name={Routes.SHEET.ONBOARDING_SHEET}
+      component={OnboardingSheet}
+    />
+    <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}

app/components/Nav/Main/MainNavigator.js

@@ -94,6 +94,7 @@ import { StakeModalStack, StakeScreenStack } from '../../UI/Stake/routes';
 import { AssetLoader } from '../../Views/AssetLoader';
 import { BridgeTransactionDetails } from '../../UI/Bridge/components/TransactionDetails/TransactionDetails';
 import { BridgeModalStack, BridgeScreenStack } from '../../UI/Bridge/routes';
+import PasswordHint from '../../Views/PasswordHint';
 import TurnOnBackupAndSync from '../../Views/Identity/TurnOnBackupAndSync/TurnOnBackupAndSync';
 
 const Stack = createStackNavigator();
@@ -388,6 +389,11 @@ const SettingsFlow = () => (
       component={ResetPassword}
       options={ResetPassword.navigationOptions}
     />
+    <Stack.Screen
+      name="PasswordHint"
+      component={PasswordHint}
+      options={PasswordHint.navigationOptions}
+    />
     <Stack.Screen
       name="AccountBackupStep1B"
       component={AccountBackupStep1B}

app/components/Nav/Main/index.js

@@ -91,6 +91,7 @@ import { getGlobalEthQuery } from '../../../util/networks/global-network';
 import { selectIsEvmNetworkSelected } from '../../../selectors/multichainNetworkController';
 import { isPortfolioViewEnabled } from '../../../util/networks';
 import { useIdentityEffects } from '../../../util/identity/hooks/useIdentityEffects/useIdentityEffects';
+import Routes from '../../../constants/navigation/Routes';
 
 const Stack = createStackNavigator();
 
@@ -210,6 +211,20 @@ const Main = (props) => {
 
   const toggleRemindLater = () => {
     setShowRemindLaterModal(!showRemindLaterModal);
+    props.navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+      screen: Routes.SHEET.SKIP_ACCOUNT_SECURITY_MODAL,
+      params: {
+        onConfirm: () => {
+          props.navigation.navigate('SetPasswordFlow', {
+            screen: 'AccountBackupStep1B',
+            params: { ...props.route.params },
+          });
+        },
+        onCancel: () => {
+          toggleRemindLater();
+        },
+      },
+    });
   };
 
   const toggleSkipCheckbox = () => {
@@ -435,21 +450,10 @@ const Main = (props) => {
         <Notification navigation={props.navigation} />
         <RampOrders />
         <SwapsLiveness />
-        <BackupAlert
-          onDismiss={toggleRemindLater}
-          navigation={props.navigation}
-        />
         {renderDeprecatedNetworkAlert(
           props.chainId,
           props.backUpSeedphraseVisible,
         )}
-        <SkipAccountSecurityModal
-          modalVisible={showRemindLaterModal}
-          onCancel={skipAccountModalSecureNow}
-          onConfirm={skipAccountModalSkip}
-          skipCheckbox={skipCheckbox}
-          toggleSkipCheckbox={toggleSkipCheckbox}
-        />
         <ProtectYourWalletModal navigation={props.navigation} />
         <RootRPCMethodsUI navigation={props.navigation} />
       </View>