Merge branch 'main' into feat/batch_1129_segment_17

MetaMask · Feb 28, 2024 · a51667b · a51667b
2 parents 262a099 + 70eff9c
commit a51667b
Show file tree

Hide file tree

Showing 55 changed files with 423 additions and 164 deletions.
diff --git a/...mponent-library/components-temp/CustomSpendCap/__snapshots__/CustomSpendCap.test.tsx.snap b/...mponent-library/components-temp/CustomSpendCap/__snapshots__/CustomSpendCap.test.tsx.snap
@@ -89,7 +89,8 @@ exports[`CustomSpendCap should match snapshot 1`] = `
       </View>
     </View>
     <Text
-      accessibilityRole="text"
+      accessibilityRole="link"
+      accessible={true}
       onPress={[Function]}
       onPressIn={[Function]}
       onPressOut={[Function]}
@@ -220,7 +221,8 @@ exports[`CustomSpendCap should match snapshot 1`] = `
       This allows the third party to spend all your token balance until it reaches the cap or you revoke the spending cap. If this is not intended, consider setting a lower spending cap.
        
       <Text
-        accessibilityRole="text"
+        accessibilityRole="link"
+        accessible={true}
         onPress={[Function]}
         onPressIn={[Function]}
         onPressOut={[Function]}

diff --git a/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap b/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap
@@ -151,6 +151,8 @@ exports[`Banner should render correctly with a close button 1`] = `
       Sample Banner Description
     </Text>
     <TouchableOpacity
+      accessibilityRole="button"
+      accessible={true}
       activeOpacity={1}
       onPress={[Function]}
       onPressIn={[Function]}
@@ -385,6 +387,8 @@ exports[`Banner should render correctly with an action button 1`] = `
       Sample Banner Description
     </Text>
     <TouchableOpacity
+      accessibilityRole="button"
+      accessible={true}
       activeOpacity={1}
       onPress={[Function]}
       onPressIn={[Function]}

diff --git a/...ry/components/Banners/Banner/variants/BannerAlert/__snapshots__/BannerAlert.test.tsx.snap b/...ry/components/Banners/Banner/variants/BannerAlert/__snapshots__/BannerAlert.test.tsx.snap
@@ -73,7 +73,8 @@ exports[`BannerAlert should render BannerAlert 1`] = `
       Sample Banner Alert Description
     </Text>
     <Text
-      accessibilityRole="text"
+      accessibilityRole="link"
+      accessible={true}
       onPress={[Function]}
       onPressIn={[Function]}
       onPressOut={[Function]}

diff --git a/...ibrary/components/Banners/Banner/variants/BannerTip/__snapshots__/BannerTip.test.tsx.snap b/...ibrary/components/Banners/Banner/variants/BannerTip/__snapshots__/BannerTip.test.tsx.snap
@@ -83,7 +83,8 @@ exports[`BannerTip should render default settings correctly 1`] = `
       Sample Banner Tip Description
     </Text>
     <Text
-      accessibilityRole="text"
+      accessibilityRole="link"
+      accessible={true}
       onPress={[Function]}
       onPressIn={[Function]}
       onPressOut={[Function]}

diff --git a/...y/components/BottomSheets/BottomSheetFooter/__snapshots__/BottomSheetFooter.test.tsx.snap b/...y/components/BottomSheets/BottomSheetFooter/__snapshots__/BottomSheetFooter.test.tsx.snap
@@ -13,6 +13,8 @@ exports[`BottomSheetFooter should render snapshot correctly 1`] = `
   testID="bottomsheetfooter"
 >
   <TouchableOpacity
+    accessibilityRole="button"
+    accessible={true}
     activeOpacity={1}
     onPress={[Function]}
     onPressIn={[Function]}
@@ -52,6 +54,8 @@ exports[`BottomSheetFooter should render snapshot correctly 1`] = `
     </Text>
   </TouchableOpacity>
   <TouchableOpacity
+    accessibilityRole="button"
+    accessible={true}
     activeOpacity={1}
     onPress={[Function]}
     onPressIn={[Function]}

diff --git a/app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.tsx b/app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.tsx
@@ -45,6 +45,8 @@ const ButtonBase = ({
       activeOpacity={1}
       onPress={onPress}
       style={styles.base}
+      accessibilityRole="button"
+      accessible
       {...props}
     >
       {startIconName && (
@@ -59,6 +61,7 @@ const ButtonBase = ({
         <Text
           variant={DEFAULT_BUTTONBASE_LABEL_TEXTVARIANT}
           style={styles.label}
+          accessibilityRole="none"
         >
           {label}
         </Text>

diff --git a/...ry/components/Buttons/Button/foundation/ButtonBase/__snapshots__/ButtonBase.test.tsx.snap b/...ry/components/Buttons/Button/foundation/ButtonBase/__snapshots__/ButtonBase.test.tsx.snap
@@ -2,6 +2,8 @@
 
 exports[`ButtonBase should render correctly 1`] = `
 <TouchableOpacity
+  accessibilityRole="button"
+  accessible={true}
   activeOpacity={1}
   onPress={[Function]}
   style={
@@ -28,6 +30,7 @@ exports[`ButtonBase should render correctly 1`] = `
     }
   />
   <Text
+    accessibilityRole="none"
     style={
       Object {
         "color": "#24272A",
@@ -42,6 +45,8 @@ exports[`ButtonBase should render correctly 1`] = `
 
 exports[`ButtonBase should render correctly when disabled 1`] = `
 <TouchableOpacity
+  accessibilityRole="button"
+  accessible={true}
   activeOpacity={1}
   disabled={true}
   onPress={[Function]}
@@ -70,6 +75,7 @@ exports[`ButtonBase should render correctly when disabled 1`] = `
     }
   />
   <Text
+    accessibilityRole="none"
     style={
       Object {
         "color": "#24272A",

diff --git a/app/component-library/components/Buttons/Button/variants/ButtonLink/ButtonLink.styles.ts b/app/component-library/components/Buttons/Button/variants/ButtonLink/ButtonLink.styles.ts
@@ -1,5 +1,5 @@
 // Third party dependencies.
-import { StyleSheet, TextStyle, ViewStyle } from 'react-native';
+import { StyleSheet, ViewStyle } from 'react-native';
 
 // External dependencies.
 import { colors } from '../../../../../../styles/common';
@@ -24,10 +24,7 @@ const styleSheet = (params: { vars: ButtonLinkStyleSheetVars }) => {
       { backgroundColor: colors.transparent },
       style,
     ) as ViewStyle,
-    pressedText: Object.assign(
-      { textDecorationLine: 'underline' } as TextStyle,
-      style,
-    ) as TextStyle,
+    pressedText: { textDecorationLine: 'underline' },
   });
 };
 

diff --git a/app/component-library/components/Buttons/Button/variants/ButtonLink/ButtonLink.tsx b/app/component-library/components/Buttons/Button/variants/ButtonLink/ButtonLink.tsx
@@ -80,6 +80,7 @@ const ButtonLink: React.FC<ButtonLinkProps> = ({
           onPressIn={triggerOnPressedIn}
           onPressOut={triggerOnPressedOut}
           accessibilityRole="link"
+          accessible
           {...props}
         >
           {renderLabel()}

diff --git a/...rary/components/Buttons/Button/variants/ButtonLink/__snapshots__/ButtonLink.test.tsx.snap b/...rary/components/Buttons/Button/variants/ButtonLink/__snapshots__/ButtonLink.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Link should render correctly 1`] = `
 <Fragment>
   <Text
     accessibilityRole="link"
+    accessible={true}
     onPress={[Function]}
     onPressIn={[Function]}
     onPressOut={[Function]}

diff --git a/app/component-library/components/Texts/Text/Text.tsx b/app/component-library/components/Texts/Text/Text.tsx
@@ -21,7 +21,7 @@ const Text: React.FC<TextProps> = ({
 }) => {
   const { styles } = useStyles(styleSheet, { variant, style, color });
   return (
-    <RNText {...props} style={styles.base} accessibilityRole="text">
+    <RNText accessibilityRole="text" {...props} style={styles.base}>
       {children}
     </RNText>
   );

diff --git a/app/components/UI/CollectibleModal/__snapshots__/CollectibleModal.test.tsx.snap b/app/components/UI/CollectibleModal/__snapshots__/CollectibleModal.test.tsx.snap
@@ -192,6 +192,8 @@ exports[`CollectibleModal should render correctly 1`] = `
             }
           >
             <TouchableOpacity
+              accessibilityRole="button"
+              accessible={true}
               activeOpacity={1}
               onPress={[Function]}
               onPressIn={[Function]}

diff --git a/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap b/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap
@@ -234,27 +234,32 @@ exports[`NetworkDetails renders correctly 1`] = `
                   <View
                     style={
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "alignItems": "center",
+                        "backgroundColor": "#F2F4F6",
                         "borderRadius": 8,
+                        "borderWidth": 1,
                         "height": 16,
+                        "justifyContent": "center",
                         "overflow": "hidden",
                         "width": 16,
                       }
                     }
                   >
-                    <Image
-                      onError={[Function]}
-                      resizeMode="contain"
-                      source="image"
+                    <Text
+                      accessibilityRole="text"
                       style={
                         Object {
-                          "flex": 1,
-                          "height": undefined,
-                          "width": undefined,
+                          "color": "#24272A",
+                          "fontFamily": "Euclid Circular B",
+                          "fontSize": 10,
+                          "fontWeight": "400",
+                          "letterSpacing": 0,
+                          "lineHeight": undefined,
                         }
                       }
-                      testID="network-avatar-image"
-                    />
+                    >
+                      T
+                    </Text>
                   </View>
                   <Text
                     accessibilityRole="text"
@@ -420,7 +425,7 @@ exports[`NetworkDetails renders correctly 1`] = `
                         }
                       }
                     >
-                      https://localhost:8545
+                      https:/
                     </Text>
                     <TouchableOpacity
                       activeOpacity={0.5}
@@ -499,6 +504,8 @@ exports[`NetworkDetails renders correctly 1`] = `
               testID="bottomsheetfooter"
             >
               <TouchableOpacity
+                accessibilityRole="button"
+                accessible={true}
                 activeOpacity={1}
                 onPress={[Function]}
                 onPressIn={[Function]}
@@ -538,6 +545,8 @@ exports[`NetworkDetails renders correctly 1`] = `
                 </Text>
               </TouchableOpacity>
               <TouchableOpacity
+                accessibilityRole="button"
+                accessible={true}
                 activeOpacity={1}
                 onPress={[Function]}
                 onPressIn={[Function]}

diff --git a/app/components/UI/NetworkVerificationInfo/NetworkVerificationInfo.tsx b/app/components/UI/NetworkVerificationInfo/NetworkVerificationInfo.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { View, Linking } from 'react-native';
 import { strings } from '../../../../locales/i18n';
 import { CommonSelectorsIDs } from '../../../../e2e/selectors/Common.selectors';
@@ -28,8 +28,12 @@ import BottomSheetFooter, {
   ButtonsAlignment,
 } from '../../../component-library/components/BottomSheets/BottomSheetFooter';
 import BottomSheetHeader from '../../../component-library/components/BottomSheets/BottomSheetHeader';
-import { toggleUseSafeChainsListValidation } from '../../../util/networks';
+import {
+  getNetworkImageSource,
+  toggleUseSafeChainsListValidation,
+} from '../../../util/networks';
 import { NetworkApprovalModalSelectorsIDs } from '../../../../e2e/selectors/Modals/NetworkApprovalModal.selectors';
+import hideKeyFromUrl from '../../../util/hideKeyFromUrl';
 
 interface Alert {
   alertError: string;
@@ -67,6 +71,15 @@ const NetworkVerificationInfo = ({
 
   useEffect(() => setAlerts(alertsFromProps), [alertsFromProps]);
 
+  const networkImageSource = useMemo(
+    () =>
+      //@ts-expect-error - The utils/network file is still JS and this function expects a networkType, and should be optional
+      getNetworkImageSource({
+        chainId: customNetworkInformation.chainId,
+      }),
+    [customNetworkInformation],
+  );
+
   const renderNetworkInfo = () => (
     <ScrollView
       nestedScrollEnabled
@@ -98,7 +111,9 @@ const NetworkVerificationInfo = ({
       <Text variant={TextVariant.BodyMDBold}>
         {strings('add_custom_network.network_url')}
       </Text>
-      <Text style={styles.textSection}>{customNetworkInformation.rpcUrl}</Text>
+      <Text style={styles.textSection}>
+        {hideKeyFromUrl(customNetworkInformation.rpcUrl)}
+      </Text>
 
       <Accordion
         title={strings('spend_limit_edition.view_details')}
@@ -149,6 +164,7 @@ const NetworkVerificationInfo = ({
   const renderAlerts = useCallback(() => {
     if (!safeChainsListValidationEnabled) return null;
     if (!alerts.length) return null;
+
     return alerts.map(
       (
         networkAlert: {
@@ -229,7 +245,7 @@ const NetworkVerificationInfo = ({
       </BottomSheetHeader>
       <ScrollView style={styles.root}>
         <PickerNetwork
-          imageSource={customNetworkInformation.icon}
+          imageSource={networkImageSource}
           label={customNetworkInformation.chainName}
           style={styles.networkSection}
           disabled

diff --git a/...components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap b/...components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap
@@ -93,27 +93,32 @@ exports[`NetworkVerificationInfo renders correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#FFFFFF",
+              "alignItems": "center",
+              "backgroundColor": "#F2F4F6",
               "borderRadius": 8,
+              "borderWidth": 1,
               "height": 16,
+              "justifyContent": "center",
               "overflow": "hidden",
               "width": 16,
             }
           }
         >
-          <Image
-            onError={[Function]}
-            resizeMode="contain"
-            source="test-icon"
+          <Text
+            accessibilityRole="text"
             style={
               Object {
-                "flex": 1,
-                "height": undefined,
-                "width": undefined,
+                "color": "#24272A",
+                "fontFamily": "Euclid Circular B",
+                "fontSize": 10,
+                "fontWeight": "400",
+                "letterSpacing": 0,
+                "lineHeight": undefined,
               }
             }
-            testID="network-avatar-image"
-          />
+          >
+            T
+          </Text>
         </View>
         <Text
           accessibilityRole="text"
@@ -379,7 +384,7 @@ exports[`NetworkVerificationInfo renders correctly 1`] = `
               }
             }
           >
-            http://test.com
+            http:/
           </Text>
           <TouchableOpacity
             activeOpacity={0.5}
@@ -458,6 +463,8 @@ exports[`NetworkVerificationInfo renders correctly 1`] = `
     testID="bottomsheetfooter"
   >
     <TouchableOpacity
+      accessibilityRole="button"
+      accessible={true}
       activeOpacity={1}
       onPressIn={[Function]}
       onPressOut={[Function]}
@@ -496,6 +503,8 @@ exports[`NetworkVerificationInfo renders correctly 1`] = `
       </Text>
     </TouchableOpacity>
     <TouchableOpacity
+      accessibilityRole="button"
+      accessible={true}
       activeOpacity={1}
       onPressIn={[Function]}
       onPressOut={[Function]}