fix(1702): update onboarding settings UI (#11723)

## **Description** This is a follow up to this [pull request](#11127). Updating the UI according to feedback as well as copy @yanrong-chen @hesterbruikman ![Screenshot 2024-10-09 at 11 16 10 AM](https://github.com/user-attachments/assets/8602d32f-72a0-4542-8aed-169f75914f70) ![Screenshot 2024-10-09 at 11 16 25 AM](https://github.com/user-attachments/assets/bc431893-f850-41b1-aaf6-242faded5f8c) ![Screenshot 2024-10-09 at 11 16 41 AM](https://github.com/user-attachments/assets/46bd14d8-d9d6-45c2-bd2b-f9fc1d269b6b) ## **Related issues** Fixes: Feature: [#1702](MetaMask/mobile-planning#1702) ## **Manual testing steps** 1. Fresh install application 2. Create/import new wallet 3. Success screen will appear with the title "Your Wallet is ready" and below the title and description, click on the text that says "Manage default settings" 4. View the changes in within the Default Settings Screen 5. Click on Assets and scroll down to view no copy for Batch Transactions ## **Screenshots/Recordings** ### Default Settings Screen | Before | After | |:---:|:---:| |![Simulator Screenshot - iPhone 16 Pro Max - 2024-10-09 at 15 57 48](https://github.com/user-attachments/assets/c4e9ec67-ff10-4f19-949f-1a44b1c01db4)|![Simulator Screenshot - iPhone 16 Pro Max - 2024-10-09 at 15 58 07](https://github.com/user-attachments/assets/afe1b076-958c-4a03-b35a-8496a5bb0919)| ### Manage Default Settings | Before | After | |:---:|:---:| |![Simulator Screenshot - iPhone 16 Pro Max - 2024-10-09 at 15 58 18](https://github.com/user-attachments/assets/d26c8684-90da-43e2-94ad-f819592072e8)|![Simulator Screenshot - iPhone 16 Pro Max - 2024-10-09 at 15 58 29](https://github.com/user-attachments/assets/a7a8354f-29e3-490d-a638-3a439a12568b)| ### **Before** NA ### **After** NA ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] 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. ## **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.
MetaMask · Oct 23, 2024 · 54525f1 · 54525f1
1 parent 40f5bef
commit 54525f1
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 27 deletions.
diff --git a/app/components/Views/OnboardingSuccess/DefaultSettings/__snapshots__/index.test.tsx.snap b/app/components/Views/OnboardingSuccess/DefaultSettings/__snapshots__/index.test.tsx.snap
@@ -5,32 +5,23 @@ exports[`DefaultSettings should render correctly 1`] = `
   style={
     {
       "flex": 1,
-      "paddingHorizontal": 16,
       "paddingTop": 16,
     }
   }
 >
   <View>
-    <Text
-      accessibilityRole="text"
+    <View
       style={
         {
-          "color": "#141618",
-          "fontFamily": "EuclidCircularB-Regular",
-          "fontSize": 14,
-          "fontWeight": "400",
-          "letterSpacing": 0,
-          "lineHeight": 22,
+          "paddingHorizontal": 16,
         }
       }
     >
-      MetaMask uses default settings to best balance safety and ease of use. Change these settings to further increase your privacy.
       <Text
         accessibilityRole="text"
-        onPress={[Function]}
         style={
           {
-            "color": "#0376c9",
+            "color": "#141618",
             "fontFamily": "EuclidCircularB-Regular",
             "fontSize": 14,
             "fontWeight": "400",
@@ -39,10 +30,26 @@ exports[`DefaultSettings should render correctly 1`] = `
           }
         }
       >
-         
-        Learn more about privacy best practices.
+        MetaMask uses default settings to best balance safety and ease of use. Change these settings to further increase your privacy.
+        <Text
+          accessibilityRole="text"
+          onPress={[Function]}
+          style={
+            {
+              "color": "#0376c9",
+              "fontFamily": "EuclidCircularB-Regular",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "letterSpacing": 0,
+              "lineHeight": 22,
+            }
+          }
+        >
+           
+          Learn more about privacy best practices.
+        </Text>
       </Text>
-    </Text>
+    </View>
     <TouchableOpacity
       onPress={[Function]}
     >

diff --git a/app/components/Views/OnboardingSuccess/DefaultSettings/index.styles.ts b/app/components/Views/OnboardingSuccess/DefaultSettings/index.styles.ts
@@ -7,6 +7,13 @@ const styleSheet = () =>
       paddingHorizontal: 16,
       paddingTop: 16,
     },
+    scrollRoot: {
+      flex: 1,
+      paddingTop: 16,
+    },
+    textContainer: {
+      paddingHorizontal: 16,
+    },
   });
 
 export default styleSheet;
diff --git a/app/components/Views/OnboardingSuccess/DefaultSettings/index.tsx b/app/components/Views/OnboardingSuccess/DefaultSettings/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScrollView, Linking } from 'react-native';
+import { ScrollView, Linking, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useOnboardingHeader } from '../../../hooks/useOnboardingHeader';
 import { useStyles } from '../../../../component-library/hooks';
@@ -23,14 +23,16 @@ const DefaultSettings = () => {
   };
 
   return (
-    <ScrollView style={styles.root}>
-      <Text variant={TextVariant.BodyMD}>
-        {strings('default_settings.description')}
-        <Text color={TextColor.Info} onPress={handleLink}>
-          {' '}
-          {strings('default_settings.learn_more_about_privacy')}
+    <ScrollView style={styles.scrollRoot}>
+      <View style={styles.textContainer}>
+        <Text variant={TextVariant.BodyMD}>
+          {strings('default_settings.description')}
+          <Text color={TextColor.Info} onPress={handleLink}>
+            {' '}
+            {strings('default_settings.learn_more_about_privacy')}
+          </Text>
         </Text>
-      </Text>
+      </View>
       <SettingsDrawer
         title={strings('default_settings.drawer_general_title')}
         description={strings('default_settings.drawer_general_title_desc')}

diff --git a/...onents/Views/OnboardingSuccess/OnboardingAssetsSettings/__snapshots__/index.test.tsx.snap b/...onents/Views/OnboardingSuccess/OnboardingAssetsSettings/__snapshots__/index.test.tsx.snap
@@ -1674,7 +1674,7 @@ exports[`OnboardingAssetSettings should render correctly 1`] = `
           }
         }
       >
-        We batch accounts and query Infura to responsively show your balances. If you turn this off, only active accounts will be queried. Some dApps won’t work unless you connect your wallet.
+        Get balance updates for all your accounts at once. Turning off this feature means others are less likely to associate one account with another.
       </Text>
     </View>
   </View>

diff --git a/app/components/Views/OnboardingSuccess/__snapshots__/index.test.js.snap b/app/components/Views/OnboardingSuccess/__snapshots__/index.test.js.snap
@@ -120,6 +120,7 @@ exports[`OnboardingSuccess should render correctly 1`] = `
               {
                 "alignItems": "center",
                 "flexDirection": "row",
+                "marginTop": 16,
               },
               {
                 "paddingTop": 10,

diff --git a/app/components/Views/OnboardingSuccess/index.styles.ts b/app/components/Views/OnboardingSuccess/index.styles.ts
@@ -54,6 +54,7 @@ const styles = StyleSheet.create({
   linkWrapper: {
     flexDirection: 'row',
     alignItems: 'center',
+    marginTop: 16,
   },
   footerText: {
     fontSize: 12,

diff --git a/app/components/Views/Settings/BatchAccountBalanceSettings/__snapshots__/index.test.tsx.snap b/app/components/Views/Settings/BatchAccountBalanceSettings/__snapshots__/index.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`BatchAccountBalanceSettings should render correctly 1`] = `
       }
     }
   >
-    We batch accounts and query Infura to responsively show your balances. If you turn this off, only active accounts will be queried. Some dApps won’t work unless you connect your wallet.
+    Get balance updates for all your accounts at once. Turning off this feature means others are less likely to associate one account with another.
   </Text>
 </View>
 `;
diff --git a/app/components/Views/Settings/SecuritySettings/__snapshots__/SecuritySettings.test.tsx.snap b/app/components/Views/Settings/SecuritySettings/__snapshots__/SecuritySettings.test.tsx.snap
@@ -1501,7 +1501,7 @@ exports[`SecuritySettings should render correctly 1`] = `
             }
           }
         >
-          We batch accounts and query Infura to responsively show your balances. If you turn this off, only active accounts will be queried. Some dApps won’t work unless you connect your wallet.
+          Get balance updates for all your accounts at once. Turning off this feature means others are less likely to associate one account with another.
         </Text>
       </View>
       <View

diff --git a/locales/languages/en.json b/locales/languages/en.json
@@ -951,7 +951,7 @@
     "data_collection_title": "Data collection for marketing",
     "data_collection_description": "We’ll use MetaMetrics to learn how you interact with our marketing communications. We may share relevant news (like product features and other materials).",
     "batch_balance_requests_title": "Batch account balance requests",
-    "batch_balance_requests_description": "We batch accounts and query Infura to responsively show your balances. If you turn this off, only active accounts will be queried. Some dApps won’t work unless you connect your wallet.",
+    "batch_balance_requests_description": "Get balance updates for all your accounts at once. Turning off this feature means others are less likely to associate one account with another.",
     "third_party_title": "Get incoming transactions",
     "third_party_description": "Third party APIs (Etherscan) are used to show your incoming transactions in the history. Turn off if you don’t want us to pull data from those services.",
     "metametrics_opt_out": "MetaMetrics Opt-out",
-Original file line number
+Diff line change
@@ Expand Up @@
               }
             }
           >
-            We batch accounts and query Infura to responsively show your balances. If you turn this off, only active accounts will be queried. Some dApps won’t work unless you connect your wallet.
+            Get balance updates for all your accounts at once. Turning off this feature means others are less likely to associate one account with another.
           </Text>
         </View>
       </View>
@@ Expand Down @@