feat: add privacy toggle (#8234)

## **Description**

This task aims to add the ability to turn on and off the network
verification feature. To do that, we will be adding both a toggleable
section in the settings as well as a contextual banner and sheet for
quickly toggling it on.

## **Related issues**

Fixes: [#1269](MetaMask/mobile-planning#1269)

## **Manual testing steps**

1. Go to the setting page
2. Go to Security and Privacy
3. Enable/disable the network details check
4. Go to add network
5. if the toggle was disabled you should see a banner ( check the video
below )

## **Screenshots/Recordings**


### **Before**

### **After**


https://drive.google.com/drive/folders/1BeTFKHelGrzu5XPUfXLTa-om7inhtowU?usp=drive_link

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained what problem this PR is solving and how it
is solved.
- [x] I've linked related issues
- [x] I've included manual testing steps
- [x] I've included screenshots/recordings if applicable
- [x] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [x] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

app/components/Approvals/AddChainApproval/AddChainApproval.styles.ts

@@ -0,0 +1,17 @@
+// Third party dependencies.
+import { StyleSheet } from 'react-native';
+
+/**
+ * Style sheet function for WalletActions component.
+ *
+ * @returns StyleSheet object.
+ */
+const styleSheet = () =>
+  StyleSheet.create({
+    actionsContainer: {
+      alignItems: 'flex-start',
+      justifyContent: 'center',
+    },
+  });
+
+export default styleSheet;

app/components/Approvals/AddChainApproval/AddChainApproval.tsx

@@ -3,54 +3,27 @@ import useApprovalRequest from '../../hooks/useApprovalRequest';
 import { ApprovalTypes } from '../../../core/RPCMethods/RPCMethodMiddleware';
 import NetworkVerificationInfo from '../../UI/NetworkVerificationInfo';
 import BottomSheet from '../../../component-library/components/BottomSheets/BottomSheet';
-import BottomSheetHeader from '../../../component-library/components/BottomSheets/BottomSheetHeader';
-import Text, {
-  TextVariant,
-} from '../../../component-library/components/Texts/Text';
-import BottomSheetFooter, {
-  ButtonsAlignment,
-} from '../../../component-library/components/BottomSheets/BottomSheetFooter';
-import {
-  ButtonSize,
-  ButtonVariants,
-} from '../../../component-library/components/Buttons/Button';
-import { strings } from '../../../../locales/i18n';
-import { CommonSelectorsIDs } from '../../../../e2e/selectors/Common.selectors';
+import { useStyles } from '../../../component-library/hooks';
+import { View } from 'react-native';
+
+// Internal dependencies
+import styleSheet from './AddChainApproval.styles';
 
 const AddChainApproval = () => {
   const { approvalRequest, onConfirm, onReject } = useApprovalRequest();
+  const { styles } = useStyles(styleSheet, {});
 
   if (approvalRequest?.type !== ApprovalTypes.ADD_ETHEREUM_CHAIN) return null;
 
   return (
     <BottomSheet onClose={onReject} shouldNavigateBack={false}>
-      <BottomSheetHeader>
-        <Text variant={TextVariant.HeadingMD}>
-          {strings('add_custom_network.title')}
-        </Text>
-      </BottomSheetHeader>
-      <NetworkVerificationInfo
-        customNetworkInformation={approvalRequest?.requestData}
-      />
-      <BottomSheetFooter
-        buttonPropsArray={[
-          {
-            onPress: onReject,
-            label: strings('confirmation_modal.cancel_cta'),
-            variant: ButtonVariants.Secondary,
-            size: ButtonSize.Lg,
-            testID: CommonSelectorsIDs.CANCEL_BUTTON,
-          },
-          {
-            onPress: onConfirm,
-            label: strings('confirmation_modal.confirm_cta'),
-            variant: ButtonVariants.Primary,
-            size: ButtonSize.Lg,
-            testID: CommonSelectorsIDs.CONNECT_BUTTON,
-          },
-        ]}
-        buttonsAlignment={ButtonsAlignment.Horizontal}
-      />
+      <View style={styles.actionsContainer}>
+        <NetworkVerificationInfo
+          customNetworkInformation={approvalRequest?.requestData}
+          onReject={onReject}
+          onConfirm={onConfirm}
+        />
+      </View>
     </BottomSheet>
   );
 };

app/components/Approvals/AddChainApproval/__snapshots__/AddChainApproval.test.tsx.snap

@@ -4,35 +4,16 @@ exports[`AddChainApproval renders 1`] = `
 <ForwardRef
   shouldNavigateBack={false}
 >
-  <BottomSheetHeader>
-    <Text
-      variant="sHeadingMD"
-    >
-      Allow this site to add a network?
-    </Text>
-  </BottomSheetHeader>
-  <NetworkVerificationInfo />
-  <BottomSheetFooter
-    buttonPropsArray={
-      Array [
-        Object {
-          "label": "Cancel",
-          "onPress": undefined,
-          "size": "48",
-          "testID": "cancel-button",
-          "variant": "Secondary",
-        },
-        Object {
-          "label": "Confirm",
-          "onPress": undefined,
-          "size": "48",
-          "testID": "connect-button",
-          "variant": "Primary",
-        },
-      ]
+  <View
+    style={
+      Object {
+        "alignItems": "flex-start",
+        "justifyContent": "center",
+      }
     }
-    buttonsAlignment="Horizontal"
-  />
+  >
+    <NetworkVerificationInfo />
+  </View>
 </ForwardRef>
 `;