feat: new UI for choose password and importFromSeed

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

Author: ieow

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/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 dangerSolidSVG from './assets/danger-solid.svg';
+import successSolidSVG from './assets/success.svg';
 import xSVG from './assets/x.svg';
 
 /**
@@ -548,5 +550,7 @@ export const assetByIconName: AssetByIconName = {
   [IconName.Widgets]: widgetsSVG,
   [IconName.WifiOff]: wifioffSVG,
   [IconName.Wifi]: wifiSVG,
+  [IconName.DangerSolid]: dangerSolidSVG,
+  [IconName.SuccessSolid]: successSolidSVG,
   [IconName.X]: xSVG,
 };

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

@@ -343,5 +343,7 @@ export enum IconName {
   Widgets = 'Widgets',
   WifiOff = 'WifiOff',
   Wifi = 'Wifi',
+  DangerSolid = 'DangerSolid',
+  SuccessSolid = 'SuccessSolid',
   X = 'X',
 }

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

@@ -1,11 +1,9 @@
 import React, { useCallback, useState } from 'react';
-import { Switch, Text, View } from 'react-native';
 import { strings } from '../../../../locales/i18n';
 import { AUTHENTICATION_TYPE, BIOMETRY_TYPE } from 'react-native-keychain';
-import { createStyles } from './styles';
 import { LoginViewSelectors } from '../../../../e2e/selectors/wallet/LoginView.selectors';
 import { useSelector } from 'react-redux';
-import { useTheme } from '../../../util/theme';
+import SecurityOptionToggle from '../SecurityOptionToggle/SecurityOptionToggle';
 
 interface Props {
   shouldRenderBiometricOption:
@@ -30,9 +28,6 @@ const LoginOptionsSwitch = ({
   onUpdateBiometryChoice,
   onUpdateRememberMe,
 }: Props) => {
-  const theme = useTheme();
-  const { colors } = theme;
-  const styles = createStyles(colors);
   const allowLoginWithRememberMe = useSelector(
     // TODO: Replace "any" with type
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -56,44 +51,22 @@ const LoginOptionsSwitch = ({
   // if both are disabled then this component returns null
   if (shouldRenderBiometricOption !== null) {
     return (
-      <View style={styles.container}>
-        <Text style={styles.label}>
-          {strings(
-            `biometrics.enable_${shouldRenderBiometricOption.toLowerCase()}`,
-          )}
-        </Text>
-        <Switch
-          onValueChange={onBiometryValueChanged}
-          value={biometryChoiceState}
-          style={styles.switch}
-          trackColor={{
-            true: colors.primary.default,
-            false: colors.border.muted,
-          }}
-          thumbColor={theme.brandColors.white}
-          ios_backgroundColor={colors.border.muted}
-        />
-      </View>
+      <SecurityOptionToggle
+        title={strings(
+          `biometrics.enable_${shouldRenderBiometricOption.toLowerCase()}`,
+        )}
+        value={biometryChoiceState}
+        onOptionUpdated={onBiometryValueChanged}
+      />
     );
   } else if (shouldRenderBiometricOption === null && allowLoginWithRememberMe) {
     return (
-      <View style={styles.container}>
-        <Text style={styles.label}>
-          {strings(`choose_password.remember_me`)}
-        </Text>
-        <Switch
-          onValueChange={onRememberMeValueChanged}
-          value={rememberMeEnabled}
-          style={styles.switch}
-          trackColor={{
-            true: colors.primary.default,
-            false: colors.border.muted,
-          }}
-          thumbColor={theme.brandColors.white}
-          ios_backgroundColor={colors.border.muted}
-          testID={LoginViewSelectors.REMEMBER_ME_SWITCH}
-        />
-      </View>
+      <SecurityOptionToggle
+        title={strings('choose_password.remember_me')}
+        value={rememberMeEnabled}
+        onOptionUpdated={onRememberMeValueChanged}
+        testId={LoginViewSelectors.REMEMBER_ME_SWITCH}
+      />
     );
   }
   return null;

app/component-library/components/Icons/Icon/assets/success.svg

@@ -642,10 +642,14 @@ export function getModalNavbarOptions(title) {
  */
 export function getOnboardingNavbarOptions(
   route,
-  { headerLeft } = {},
+  { headerLeft, headerRight },
   themeColors,
+  showLogo = true,
 ) {
-  const headerLeftHide = headerLeft || route.params?.headerLeft;
+  const headerLeftHide =
+    headerLeft || route.params?.headerLeft || (() => <View />);
+  const headerRightHide =
+    headerRight || route.params?.headerRight || (() => <View />);
   const innerStyles = StyleSheet.create({
     headerStyle: {
       backgroundColor: themeColors.background.default,
@@ -661,17 +665,19 @@ export function getOnboardingNavbarOptions(
 
   return {
     headerStyle: innerStyles.headerStyle,
-    headerTitle: () => (
-      <View style={styles.metamaskNameTransparentWrapper}>
-        <Image
-          source={metamask_name}
-          style={innerStyles.metamaskName}
-          resizeMethod={'auto'}
-        />
-      </View>
-    ),
-    headerBackTitle: strings('navigation.back'),
-    headerRight: () => <View />,
+    headerTitle: showLogo
+      ? () => (
+          <View style={styles.metamaskNameTransparentWrapper}>
+            <Image
+              source={metamask_name}
+              style={innerStyles.metamaskName}
+              resizeMethod={'auto'}
+            />
+          </View>
+        )
+      : null,
+    // headerBackTitle: strings('navigation.back'),
+    headerRight: headerRightHide,
     headerLeft: headerLeftHide,
     headerTintColor: themeColors.primary.default,
   };
@@ -796,7 +802,7 @@ export function getTransparentBackOnboardingNavbarOptions(themeColors, color) {
  *
  * @returns {Object} - Corresponding navbar options containing headerLeft
  */
-export function getOptinMetricsNavbarOptions(themeColors) {
+export function getOptinMetricsNavbarOptions(themeColors, showLogo = true) {
   const innerStyles = StyleSheet.create({
     headerStyle: {
       backgroundColor: themeColors.background.default,
@@ -810,17 +816,19 @@ export function getOptinMetricsNavbarOptions(themeColors) {
     },
   });
   return {
-    headerTitle: () => (
-      <View style={styles.metamaskNameTransparentWrapper}>
-        <Image
-          source={metamask_name}
-          style={innerStyles.metamaskName}
-          resizeMethod={'auto'}
-        />
-      </View>
-    ),
+    headerTitle: () =>
+      showLogo ? (
+        <View style={styles.metamaskNameTransparentWrapper}>
+          <Image
+            source={metamask_name}
+            style={innerStyles.metamaskName}
+            resizeMethod={'auto'}
+          />
+        </View>
+      ) : null,
     headerBackTitle: strings('navigation.back'),
     headerRight: () => <View />,
+    headerLeft: () => <View />,
     headerStyle: innerStyles.headerStyle,
     headerTintColor: themeColors.primary.default,
   };