[IMPROVEMENT] Screenshot deterrent alert (MetaMask#5474)

bumblebizzy · Jan 13, 2023 · 3bf90fc · 3bf90fc
1 parent eb32c54
commit 3bf90fc
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 24 deletions.
diff --git a/app/components/UI/ScreenshotDeterrent/ScreenshotDeterrent.tsx b/app/components/UI/ScreenshotDeterrent/ScreenshotDeterrent.tsx
@@ -1,11 +1,14 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { View, Alert, Linking, InteractionManager } from 'react-native';
+import { View, Linking, InteractionManager } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 import PreventScreenshot from '../../../core/PreventScreenshot';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import AnalyticsV2 from '../../../util/analyticsV2';
 import useScreenshotDeterrent from '../../hooks/useScreenshotDeterrent';
 import { SRP_GUIDE_URL } from '../../../constants/urls';
+import Routes from '../../../constants/navigation/Routes';
 import { strings } from '../../../../locales/i18n';
+import { ModalConfirmationVariants } from '../../../component-library/components/Modals/ModalConfirmation';
 
 const ScreenshotDeterrent = ({
   enabled,
@@ -15,6 +18,7 @@ const ScreenshotDeterrent = ({
   isSRP: boolean;
 }) => {
   const [alertPresent, setAlertPresent] = useState<boolean>(false);
+  const navigation = useNavigation();
 
   const openSRPGuide = () => {
     setAlertPresent(false);
@@ -26,29 +30,26 @@ const ScreenshotDeterrent = ({
     AnalyticsV2.trackEvent(MetaMetricsEvents.SCREENSHOT_WARNING, {});
     setAlertPresent(true);
 
-    Alert.alert(
-      strings('screenshot_deterrent.title'),
-      strings('screenshot_deterrent.description', {
-        credentialName: isSRP
-          ? strings('screenshot_deterrent.srp_text')
-          : strings('screenshot_deterrent.priv_key_text'),
-      }),
-      [
-        {
-          text: strings('reveal_credential.learn_more'),
-          onPress: openSRPGuide,
-          style: 'cancel',
+    navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+      screen: Routes.MODAL.MODAL_CONFIRMATION,
+      params: {
+        variant: ModalConfirmationVariants.Normal,
+        title: strings('screenshot_deterrent.title'),
+        description: strings('screenshot_deterrent.description', {
+          credentialName: isSRP
+            ? strings('screenshot_deterrent.srp_text')
+            : strings('screenshot_deterrent.priv_key_text'),
+        }),
+        onCancel: () => {
+          setAlertPresent(false);
+          AnalyticsV2.trackEvent(MetaMetricsEvents.SCREENSHOT_OK, {});
         },
-        {
-          text: strings('reveal_credential.got_it'),
-          onPress: () => {
-            setAlertPresent(false);
-            AnalyticsV2.trackEvent(MetaMetricsEvents.SCREENSHOT_OK, {});
-          },
-        },
-      ],
-    );
-  }, [isSRP]);
+        onConfirm: openSRPGuide,
+        confirmLabel: strings('reveal_credential.learn_more'),
+        cancelLabel: strings('reveal_credential.got_it'),
+      },
+    });
+  }, [isSRP, navigation]);
 
   const [enableScreenshotWarning] = useScreenshotDeterrent(showScreenshotAlert);
 

diff --git a/locales/languages/en.json b/locales/languages/en.json
@@ -2282,7 +2282,7 @@
     "new_wallet_needed_create_new_wallet_action": "Create a new wallet",
     "new_wallet_needed_create_try_again_action": "Try recovering wallet",
     "new_wallet_needed_description_part_one": "Something's wrong with your wallet, and you'll need to create a new one. Because your accounts are on the blockchain, they're still safe. Only the preferences, saved networks, account names, and related data saved on your device are gone.",
-    "new_wallet_needed_description_part_two":"To import your accounts to a new wallet, you'll need your Secret Recovery Phrase. If you don't have your Secret Recovery Phrase, you won't be able to import your accounts.",
+    "new_wallet_needed_description_part_two": "To import your accounts to a new wallet, you'll need your Secret Recovery Phrase. If you don't have your Secret Recovery Phrase, you won't be able to import your accounts.",
     "new_wallet_needed_description_part_three": "To keep this from happening again, be sure to always keep your MetaMask app and OS updated to the latest version."
   }
 }