[REFACTOR] Reveal Private Key section (MetaMask#6134)

app/components/Views/Settings/SecuritySettings/Sections/RevealPrivateKey/RevealPrivateKey.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useSelector } from 'react-redux';
+import Button, {
+  ButtonVariants,
+} from '../../../../../../component-library/components/Buttons/Button';
+import Text from '../../../../../../component-library/components/Texts/Text';
+import { MetaMetricsEvents } from '../../../../../../core/Analytics';
+import AnalyticsV2 from '../../../../../../util/analyticsV2';
+import { useTheme } from '../../../../../../util/theme';
+import { strings } from '../../../../../../../locales/i18n';
+import { createStyles } from './styles';
+import Routes from '../../../../../../constants/navigation/Routes';
+
+const testIds = {
+  section: 'reveal-private-key-section',
+};
+
+const RevealPrivateKey = () => {
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+  const navigation = useNavigation();
+
+  const accounts = useSelector(
+    (state: any) =>
+      state.engine.backgroundState.AccountTrackerController.accounts,
+  );
+  const identities = useSelector(
+    (state: any) =>
+      state.engine.backgroundState.PreferencesController.identities,
+  );
+  const selectedAddress = useSelector(
+    (state: any) =>
+      state.engine.backgroundState.PreferencesController.selectedAddress,
+  );
+
+  const account = {
+    address: selectedAddress,
+    ...identities[selectedAddress],
+    ...accounts[selectedAddress],
+  };
+
+  const goToExportPrivateKey = () => {
+    AnalyticsV2.trackEvent(MetaMetricsEvents.REVEAL_PRIVATE_KEY_INITIATED, {});
+    navigation.navigate(Routes.SETTINGS.REVEAL_PRIVATE_CREDENTIAL, {
+      credentialName: 'private_key',
+      shouldUpdateNav: true,
+    });
+  };
+
+  return (
+    <View style={styles.setting} testID={testIds.section}>
+      <Text style={styles.title}>
+        {strings('reveal_credential.private_key_title_for_account', {
+          accountName: account.name,
+        })}
+      </Text>
+      <Text style={styles.desc}>
+        {strings('reveal_credential.private_key_warning', {
+          accountName: account.name,
+        })}
+      </Text>
+      <Button
+        label={strings('reveal_credential.show_private_key')}
+        variant={ButtonVariants.Primary}
+        onPress={goToExportPrivateKey}
+        style={styles.confirm}
+      />
+    </View>
+  );
+};
+
+export default RevealPrivateKey;

app/components/Views/Settings/SecuritySettings/Sections/RevealPrivateKey/styles.ts

@@ -0,0 +1,29 @@
+/* eslint-disable import/prefer-default-export */
+import { fontStyles } from '../../../../../../styles/common';
+import { StyleSheet } from 'react-native';
+
+export const createStyles = (colors: any) =>
+  StyleSheet.create({
+    setting: {
+      marginTop: 50,
+    },
+    title: {
+      ...fontStyles.normal,
+      color: colors.text.default,
+      fontSize: 20,
+      lineHeight: 20,
+      paddingTop: 4,
+      marginTop: -4,
+    },
+    desc: {
+      ...fontStyles.normal,
+      color: colors.text.alternative,
+      fontSize: 14,
+      lineHeight: 20,
+      marginTop: 12,
+    },
+    confirm: {
+      marginTop: 18,
+      width: '100%',
+    },
+  });

app/components/Views/Settings/SecuritySettings/Sections/index.ts

@@ -5,6 +5,7 @@ import DeleteWalletData from './DeleteWalletData';
 import RememberMeOptionSection from './RememberMeOptionSection';
 import ProtectYourWallet from './ProtectYourWallet/ProtectYourWallet';
 import LoginOptionsSettings from './LoginOptionsSettings';
+import RevealPrivateKey from './RevealPrivateKey/RevealPrivateKey';
 
 export {
   AutomaticSecurityChecks,
@@ -14,4 +15,5 @@ export {
   RememberMeOptionSection,
   ProtectYourWallet,
   LoginOptionsSettings,
+  RevealPrivateKey,
 };

app/components/Views/Settings/SecuritySettings/index.js

@@ -59,6 +59,7 @@ import {
   AutomaticSecurityChecks,
   ProtectYourWallet,
   LoginOptionsSettings,
+  RevealPrivateKey,
 } from './Sections';
 import Routes from '../../../../constants/navigation/Routes';
 import { selectProviderType } from '../../../../selectors/networkController';
@@ -486,14 +487,6 @@ class Settings extends PureComponent {
     }
   };
 
-  goToExportPrivateKey = () => {
-    AnalyticsV2.trackEvent(MetaMetricsEvents.REVEAL_PRIVATE_KEY_INITIATED);
-    this.props.navigation.navigate(Routes.SETTINGS.REVEAL_PRIVATE_CREDENTIAL, {
-      credentialName: 'private_key',
-      shouldUpdateNav: true,
-    });
-  };
-
   selectLockTime = (lockTime) => {
     this.props.setLockTime(parseInt(lockTime, 10));
   };
@@ -585,38 +578,6 @@ class Settings extends PureComponent {
     );
   };
 
-  renderPrivateKeySection = () => {
-    const { accounts, identities, selectedAddress } = this.props;
-    const account = {
-      address: selectedAddress,
-      ...identities[selectedAddress],
-      ...accounts[selectedAddress],
-    };
-    const { styles } = this.getStyles();
-
-    return (
-      <View style={styles.setting} testID={'reveal-private-key-section'}>
-        <Text style={styles.title}>
-          {strings('reveal_credential.private_key_title_for_account', {
-            accountName: account.name,
-          })}
-        </Text>
-        <Text style={styles.desc}>
-          {strings('reveal_credential.private_key_warning', {
-            accountName: account.name,
-          })}
-        </Text>
-        <StyledButton
-          type="normal"
-          onPress={this.goToExportPrivateKey}
-          containerStyle={styles.confirm}
-        >
-          {strings('reveal_credential.show_private_key')}
-        </StyledButton>
-      </View>
-    );
-  };
-
   renderClearPrivacySection = () => {
     const { styles } = this.getStyles();
 
@@ -899,7 +860,7 @@ class Settings extends PureComponent {
             onSignWithPasscodeOptionUpdated={this.onSignInWithPasscode}
           />
           <RememberMeOptionSection />
-          {this.renderPrivateKeySection()}
+          <RevealPrivateKey />
           <Heading>{strings('app_settings.privacy_heading')}</Heading>
           {this.renderSDKSettings()}
           {this.renderClearPrivacySection()}