[pull] main from MetaMask:main

.eslintignore

@@ -3,6 +3,7 @@
 /app/util/blockies.js
 __snapshots__
 android
+build
 coverage
 ios
 jest.preprocessor.js

.eslintrc.js

@@ -34,15 +34,11 @@ module.exports = {
         'react/no-unused-prop-types': 'off',
         'react/prop-types': 'off',
         'react/self-closing-comp': 'off',
-        // This change is included in `@metamask/eslint-config-typescript@10.0.0
-        '@typescript-eslint/no-unused-vars': [
+        // Temporarily overriding this rule to postpone this breaking change: https://github.com/MetaMask/eslint-config/pull/216
+        // TODO: Remove this override and align on prefering type over interface.
+        '@typescript-eslint/consistent-type-definitions': [
           'error',
-          {
-            vars: 'all',
-            args: 'all',
-            argsIgnorePattern: '[_]+',
-            ignoreRestSiblings: true, // this line is what has changed
-          },
+          'interface',
         ],
         '@typescript-eslint/no-explicit-any': 'error',
         // Under discussion
@@ -229,7 +225,7 @@ module.exports = {
     'import/prefer-default-export': 'off',
     'no-alert': 'error',
     'no-constant-condition': [
-      2,
+      'error',
       {
         checkLoops: false,
       },
@@ -253,14 +249,14 @@ module.exports = {
     'no-throw-literal': 'error',
     'no-unmodified-loop-condition': 'error',
     'no-unneeded-ternary': [
-      2,
+      'error',
       {
         defaultAssignment: false,
       },
     ],
     'no-unsafe-negation': 'error',
     'no-unused-expressions': 'off',
-    'no-use-before-define': [2, 'nofunc'],
+    'no-use-before-define': ['error', 'nofunc'],
     'no-useless-call': 'error',
     'no-useless-computed-key': 'error',
     'no-useless-concat': 'error',
@@ -290,7 +286,7 @@ module.exports = {
     'react/no-did-update-set-state': 'error',
     'react/no-find-dom-node': 'error',
     'react/no-multi-comp': [
-      2,
+      'error',
       {
         ignoreStateless: true,
       },

.yarn/patches/@metamask-bridge-controller-npm-61.0.0-8c413c463f.patch

@@ -0,0 +1,24 @@
+diff --git a/dist/utils/quote-fees.cjs b/dist/utils/quote-fees.cjs
+index accd7751a6e94db0c0a43b16787ad8252ee5a20a..4e093c7b93731c7dc389eb339db5f4b633a86c39 100644
+--- a/dist/utils/quote-fees.cjs
++++ b/dist/utils/quote-fees.cjs
+@@ -91,6 +91,7 @@ const appendNonEvmFees = async (quotes, messenger, selectedAccount) => {
+                 ? {
+                     visible: trade.visible,
+                     type: trade.raw_data?.contract?.[0]?.type,
++                    feeLimit: trade.raw_data?.fee_limit,
+                 }
+                 : undefined;
+             const response = (await messenger.call('SnapController:handleRequest', (0, snaps_1.computeFeeRequest)(selectedAccount.metadata.snap?.id, transaction, selectedAccount.id, scope, options)));
+diff --git a/dist/utils/quote-fees.mjs b/dist/utils/quote-fees.mjs
+index 9dd2aa0b29ef32c710fd5aea067512a3104be764..23fa279da0f6e35740940d67bb707494bf59b30a 100644
+--- a/dist/utils/quote-fees.mjs
++++ b/dist/utils/quote-fees.mjs
+@@ -88,6 +88,7 @@ const appendNonEvmFees = async (quotes, messenger, selectedAccount) => {
+                 ? {
+                     visible: trade.visible,
+                     type: trade.raw_data?.contract?.[0]?.type,
++                    feeLimit: trade.raw_data?.fee_limit,
+                 }
+                 : undefined;
+             const response = (await messenger.call('SnapController:handleRequest', computeFeeRequest(selectedAccount.metadata.snap?.id, transaction, selectedAccount.id, scope, options)));

app/components/UI/AddCustomToken/__snapshots__/index.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`AddCustomToken renders correctly with required props 1`] = `
     {
       "backgroundColor": "#ffffff",
       "flex": 1,
+      "paddingHorizontal": 16,
     }
   }
 >
@@ -186,50 +187,54 @@ exports[`AddCustomToken renders correctly with required props 1`] = `
       </View>
     </View>
   </RCTScrollView>
-  <TouchableOpacity
-    accessibilityRole="button"
-    accessible={true}
-    activeOpacity={1}
-    disabled={true}
-    onPress={[Function]}
-    onPressIn={[Function]}
-    onPressOut={[Function]}
+  <View
     style={
       {
-        "alignItems": "center",
-        "alignSelf": "center",
-        "backgroundColor": "#121314",
-        "borderRadius": 12,
-        "color": "#4459ff",
-        "flexDirection": "row",
-        "fontFamily": "Geist Regular",
-        "fontSize": 18,
-        "height": 48,
-        "justifyContent": "center",
-        "marginBottom": 16,
-        "opacity": 0.5,
-        "overflow": "hidden",
-        "paddingHorizontal": 16,
-        "position": "relative",
-        "width": "100%",
+        "margin": 16,
+        "paddingBottom": 0,
+        "paddingVertical": 16,
       }
     }
-    testID="token-import-next-button"
   >
-    <Text
-      accessibilityRole="text"
+    <TouchableOpacity
+      accessibilityRole="button"
+      accessible={true}
+      activeOpacity={1}
+      disabled={true}
+      onPress={[Function]}
+      onPressIn={[Function]}
+      onPressOut={[Function]}
       style={
         {
-          "color": "#ffffff",
-          "fontFamily": "Geist Medium",
-          "fontSize": 16,
-          "letterSpacing": 0,
-          "lineHeight": 24,
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "#121314",
+          "borderRadius": 12,
+          "flexDirection": "row",
+          "height": 48,
+          "justifyContent": "center",
+          "opacity": 0.5,
+          "overflow": "hidden",
+          "paddingHorizontal": 16,
         }
       }
+      testID="token-import-next-button"
     >
-      Next
-    </Text>
-  </TouchableOpacity>
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "Geist Medium",
+            "fontSize": 16,
+            "letterSpacing": 0,
+            "lineHeight": 24,
+          }
+        }
+      >
+        Next
+      </Text>
+    </TouchableOpacity>
+  </View>
 </View>
 `;

app/components/UI/AddCustomToken/index.js

@@ -1,5 +1,13 @@
 import React, { PureComponent } from 'react';
-import { Text, TextInput, View, StyleSheet, ScrollView } from 'react-native';
+import {
+  Text,
+  TextInput,
+  View,
+  StyleSheet,
+  ScrollView,
+  Platform,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { fontStyles } from '../../../styles/common';
 import Engine from '../../../core/Engine';
 import PropTypes from 'prop-types';
@@ -24,6 +32,7 @@ import { formatIconUrlWithProxy } from '@metamask/assets-controllers';
 import Button, {
   ButtonSize,
   ButtonVariants,
+  ButtonWidthTypes,
 } from '../../../component-library/components/Buttons/Button';
 import Icon, {
   IconName,
@@ -37,11 +46,12 @@ import CLText from '../../../component-library/components/Texts/Text/Text';
 import Logger from '../../../util/Logger';
 import { endTrace, trace, TraceName } from '../../../util/trace';
 
-const createStyles = (colors) =>
+const createStyles = (colors, bottomInset = 0) =>
   StyleSheet.create({
     wrapper: {
       backgroundColor: colors.background.default,
       flex: 1,
+      paddingHorizontal: 16,
     },
     overlappingAvatarsContainer: {
       flexDirection: 'row',
@@ -56,7 +66,11 @@ const createStyles = (colors) =>
     rowWrapper: {
       paddingHorizontal: 16,
     },
-    buttonWrapper: {},
+    buttonWrapper: {
+      paddingVertical: 16,
+      margin: 16,
+      paddingBottom: bottomInset,
+    },
     textInput: {
       borderWidth: 1,
       borderRadius: 8,
@@ -102,15 +116,6 @@ const createStyles = (colors) =>
       paddingTop: 4,
       paddingRight: 8,
     },
-    import: {
-      fontSize: 18,
-      color: colors.primary.default,
-      ...fontStyles.normal,
-      position: 'relative',
-      width: '100%',
-      alignSelf: 'center',
-      marginBottom: 16,
-    },
     textWrapper: {
       padding: 0,
     },
@@ -172,6 +177,11 @@ class AddCustomToken extends PureComponent {
      * The network client ID
      */
     networkClientId: PropTypes.string,
+
+    /**
+     * Safe area insets from react-native-safe-area-context
+     */
+    safeAreaInsets: PropTypes.object,
   };
 
   getTokenAddedAnalyticsParams = () => {
@@ -527,7 +537,9 @@ class AddCustomToken extends PureComponent {
     } = this.state;
     const colors = this.context.colors || mockTheme.colors;
     const themeAppearance = this.context.themeAppearance || 'light';
-    const styles = createStyles(colors);
+    const bottomInset =
+      Platform.OS === 'ios' ? 0 : this.props.safeAreaInsets?.bottom || 0;
+    const styles = createStyles(colors, bottomInset);
     const isDisabled = !symbol || !decimals || !this.props.selectedNetwork;
 
     const addressInputStyle = onFocusAddress
@@ -659,20 +671,28 @@ class AddCustomToken extends PureComponent {
             </View>
           ) : null}
         </ScrollView>
-        <Button
-          variant={ButtonVariants.Primary}
-          size={ButtonSize.Lg}
-          label={strings('transaction.next')}
-          style={styles.import}
-          onPress={this.goToConfirmAddToken}
-          isDisabled={isDisabled}
-          testID={ImportTokenViewSelectorsIDs.NEXT_BUTTON}
-        />
+        <View style={styles.buttonWrapper}>
+          <Button
+            variant={ButtonVariants.Primary}
+            size={ButtonSize.Lg}
+            width={ButtonWidthTypes.Full}
+            label={strings('transaction.next')}
+            onPress={this.goToConfirmAddToken}
+            isDisabled={isDisabled}
+            testID={ImportTokenViewSelectorsIDs.NEXT_BUTTON}
+          />
+        </View>
       </View>
     );
   };
 }
 
 AddCustomToken.contextType = ThemeContext;
 
-export default withMetricsAwareness(AddCustomToken);
+// Wrapper component to inject safe area insets into the class component
+const AddCustomTokenWithInsets = (props) => {
+  const safeAreaInsets = useSafeAreaInsets();
+  return <AddCustomToken {...props} safeAreaInsets={safeAreaInsets} />;
+};
+
+export default withMetricsAwareness(AddCustomTokenWithInsets);

app/components/UI/AssetSearch/__snapshots__/index.test.tsx.snap

@@ -21,7 +21,8 @@ exports[`AssetSearch renders correctly with allTokens 1`] = `
     style={
       {
         "color": "#686e7d",
-        "paddingLeft": 20,
+        "left": 16,
+        "position": "absolute",
       }
     }
   >
@@ -44,9 +45,9 @@ exports[`AssetSearch renders correctly with allTokens 1`] = `
       {
         "borderColor": "#2c3dc5",
         "color": "#686e7d",
-        "paddingHorizontal": 12,
+        "paddingHorizontal": 42,
         "paddingVertical": 12,
-        "width": "80%",
+        "width": "100%",
       }
     }
   >
@@ -67,47 +68,5 @@ exports[`AssetSearch renders correctly with allTokens 1`] = `
       value=""
     />
   </View>
-  <View
-    style={
-      {
-        "color": "#686e7d",
-        "paddingRight": 20,
-      }
-    }
-  >
-    <TouchableOpacity
-      accessible={true}
-      activeOpacity={1}
-      disabled={false}
-      onPress={[Function]}
-      onPressIn={[Function]}
-      onPressOut={[Function]}
-      style={
-        {
-          "alignItems": "center",
-          "borderRadius": 8,
-          "height": 24,
-          "justifyContent": "center",
-          "opacity": 1,
-          "width": 24,
-        }
-      }
-      testID="clear-search-bar"
-    >
-      <SvgMock
-        color="#121314"
-        fill="currentColor"
-        height={16}
-        name="Close"
-        style={
-          {
-            "height": 16,
-            "width": 16,
-          }
-        }
-        width={16}
-      />
-    </TouchableOpacity>
-  </View>
 </View>
 `;