[UPGRADE] - update dependencies

.iyarc

@@ -1 +1 @@
-# improved-yarn-audit advisory exclusions
+# improved-yarn-audit advisory exclusions

CHANGELOG.md

@@ -1,6 +1,33 @@
 # Changelog
 
 ## Current Main Branch
+- [#4506](https://github.com/MetaMask/metamask-mobile/pull/4506): [IMPROVEMENT] Add OnRamp aggregator translations
+- [#4389](https://github.com/MetaMask/metamask-mobile/pull/4389): [FEAT] Easy delete data
+- [#4510](https://github.com/MetaMask/metamask-mobile/pull/4510): [IMPROVEMENT] Update RPC URL for xDai
+- [#4269](https://github.com/MetaMask/metamask-mobile/pull/4269): [IMPROVEMENT] Show amount being approved by default on approval screens
+- [#4495](https://github.com/MetaMask/metamask-mobile/pull/4495): [FIX] WalletConnect Icon on connect screen
+- [#4505](https://github.com/MetaMask/metamask-mobile/pull/4505): [FIX] Updated new rpcUrl of gnosischain on test file
+- [#4442](https://github.com/MetaMask/metamask-mobile/pull/4442): [FIX] Skip to amount to buy when region is selected
+- [#4501](https://github.com/MetaMask/metamask-mobile/pull/4501): [FIX] Add accesible false to pressable group preventing VoiceOver interaction
+- [#4247](https://github.com/MetaMask/metamask-mobile/pull/4247): [IMPROVEMENT] Add rounded corners to svg NFTs
+- [#4470](https://github.com/MetaMask/metamask-mobile/pull/4470): [FIX] Add minimum required params to orders
+- [#4469](https://github.com/MetaMask/metamask-mobile/pull/4469): [FIX] Displaying notification when state changes
+- [#4443](https://github.com/MetaMask/metamask-mobile/pull/4443): [FIX] Wrong analytics property for region event
+- [#4468](https://github.com/MetaMask/metamask-mobile/pull/4468): [FIX] Wrong amount out for onramp analytics
+- [#4418](https://github.com/MetaMask/metamask-mobile/pull/4418): [IMPROVEMENT] Address Verification
+- [#3783](https://github.com/MetaMask/metamask-mobile/pull/3783): [FEAT] Add custom networks
+- [#4131](https://github.com/MetaMask/metamask-mobile/pull/4131): [FIX] Add method for crypto that are not in ISO4217
+- [#4187](https://github.com/MetaMask/metamask-mobile/pull/4187): [IMPROVEMENT] Update copy in Edit & Advance Screens
+- [#4060](https://github.com/MetaMask/metamask-mobile/pull/4060): [FIX] Avoid canceling transactions after submission
+- [#4478](https://github.com/MetaMask/metamask-mobile/pull/4478): [IMPROVEMENT] Video subtitles
+- [#4429](https://github.com/MetaMask/metamask-mobile/pull/4429): [FIX] Prompt camera permission
+- [#4440](https://github.com/MetaMask/metamask-mobile/pull/4440): [FIX] Updating instances of "Metamask" to "MetaMask"
+- [#4438](https://github.com/MetaMask/metamask-mobile/pull/4438): [FIX] Resolved spelling mistake
+- [#4445](https://github.com/MetaMask/metamask-mobile/pull/4445): [FIX] Adding resolutions for security critical packages
+- [#3943](https://github.com/MetaMask/metamask-mobile/pull/3943): [FIX] Remove old gas estimation
+- [#4070](https://github.com/MetaMask/metamask-mobile/pull/4070): [IMPROVEMENT] Update SelectQRAccounts UI
+- [#4178](https://github.com/MetaMask/metamask-mobile/pull/4178): [FIX] Prevent crash when funds warning is pressed
+- [#4367](https://github.com/MetaMask/metamask-mobile/pull/4367): [IMPROVEMENT] Make text hex data selectable
 
 ## 5.2.0 - May 17, 2022
 - [#4349](https://github.com/MetaMask/metamask-mobile/pull/4349): [FIX] Subtitle mapping

android/app/build.gradle

@@ -160,8 +160,8 @@ android {
 		applicationId "io.metamask"
 		minSdkVersion rootProject.ext.minSdkVersion
 		targetSdkVersion rootProject.ext.targetSdkVersion
-		versionCode 913
-		versionName "5.2.0"
+		versionCode 926
+		versionName "5.3.0"
 		multiDexEnabled true
 		testBuildType System.getProperty('testBuildType', 'debug')
 		missingDimensionStrategy "minReactNative", "minReactNative46"

app/components/UI/ApproveTransactionReview/EditPermission/index.js

@@ -10,6 +10,7 @@ import Device from '../../../../util/device';
 import ErrorMessage from '../../../Views/SendFlow/ErrorMessage';
 import { useAppThemeFromContext, mockTheme } from '../../../../util/theme';
 import formatNumber from '../../../../util/formatNumber';
+import { INTEGER_OR_FLOAT_REGEX } from '../../../../util/number';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -120,7 +121,8 @@ function EditPermission({
 
   const displayErrorMessage = useMemo(
     () =>
-      !spendLimitUnlimitedSelected &&
+      (!spendLimitUnlimitedSelected &&
+        !INTEGER_OR_FLOAT_REGEX.test(spendLimitCustomValue)) ||
       Number(minimumSpendLimit) > spendLimitCustomValue,
     [spendLimitUnlimitedSelected, spendLimitCustomValue, minimumSpendLimit],
   );

app/components/UI/DrawerView/index.js

@@ -1162,7 +1162,7 @@ class DrawerView extends PureComponent {
       currentRoute,
       networkOnboarding,
       networkOnboardedState,
-      switchedNetwork,
+      switchedNetwork: { networkUrl, networkStatus },
       networkModalVisible,
     } = this.props;
     const colors = this.context.colors || mockTheme.colors;
@@ -1196,9 +1196,19 @@ class DrawerView extends PureComponent {
     const fiatBalanceStr = renderFiat(this.currentBalance, currentCurrency);
     const accountName = isDefaultAccountName(name) && ens ? ens : name;
     const checkIfCustomNetworkExists = networkOnboardedState.filter(
-      (item) => item.network === sanitizeUrl(switchedNetwork.networkUrl),
+      (item) => item.network === sanitizeUrl(networkUrl),
     );
 
+    const networkSwitchedAndInWalletView =
+      currentRoute === 'WalletView' &&
+      networkStatus &&
+      checkIfCustomNetworkExists.length === 0;
+
+    const canShowNetworkInfoModal =
+      showModal ||
+      networkOnboarding.showNetworkOnboarding ||
+      networkSwitchedAndInWalletView;
+
     return (
       <View style={styles.wrapper} testID={'drawer-screen'}>
         <ScrollView>
@@ -1365,19 +1375,17 @@ class DrawerView extends PureComponent {
           isVisible={
             networkModalVisible || networkOnboarding.showNetworkOnboarding
           }
-          onBackdropPress={showModal ? null : this.toggleNetworksModal}
+          onBackdropPress={
+            canShowNetworkInfoModal ? null : this.toggleNetworksModal
+          }
           onBackButtonPress={showModal ? null : this.toggleNetworksModa}
           onSwipeComplete={showModal ? null : this.toggleNetworksModa}
           swipeDirection={'down'}
           propagateSwipe
           backdropColor={colors.overlay.default}
           backdropOpacity={1}
         >
-          {showModal ||
-          networkOnboarding.showNetworkOnboarding ||
-          (currentRoute === 'WalletView' &&
-            switchedNetwork.networkStatus &&
-            checkIfCustomNetworkExists.length === 0) ? (
+          {canShowNetworkInfoModal ? (
             <NetworkInfo
               onClose={this.onInfoNetworksModalClose}
               type={networkType || networkOnboarding.networkType}

app/components/UI/FiatOnRampAggregator/Views/AmountToBuy.tsx

@@ -722,24 +722,27 @@ const AmountToBuy = () => {
       <ScreenLayout>
         <ScreenLayout.Body>
           <ErrorView
+            icon="info"
+            title={strings('fiat_on_ramp_aggregator.no_tokens_available_title')}
             description={strings(
               'fiat_on_ramp_aggregator.no_tokens_available',
               {
                 network: NETWORKS_NAMES[selectedChainId],
                 region: selectedRegion?.name,
               },
             )}
-            ctaLabel={strings('fiat_on_ramp_aggregator.try_different_region')}
-            ctaOnPress={toggleRegionModal as () => void}
+            ctaLabel={strings('fiat_on_ramp_aggregator.change_payment_method')}
+            ctaOnPress={showPaymentMethodsModal as () => void}
           />
         </ScreenLayout.Body>
-        <RegionModal
-          isVisible={isRegionModalVisible}
-          title={strings('fiat_on_ramp_aggregator.region.title')}
-          description={strings('fiat_on_ramp_aggregator.region.description')}
-          data={countries}
-          dismiss={hideRegionModal as () => void}
-          onRegionPress={handleRegionPress}
+        <PaymentMethodModal
+          isVisible={isPaymentMethodModalVisible}
+          dismiss={hidePaymentMethodModal as () => void}
+          title={strings('fiat_on_ramp_aggregator.select_payment_method')}
+          paymentMethods={filteredPaymentMethods}
+          selectedPaymentMethodId={selectedPaymentMethodId}
+          onItemPress={handleChangePaymentMethod}
+          location={'Amount to Buy Screen'}
         />
       </ScreenLayout>
     );

app/components/UI/FiatOnRampAggregator/components/ErrorView.tsx

@@ -12,6 +12,8 @@ import { Colors } from '../../../../util/theme/models';
 const Text = BaseText as any;
 const Title = BaseTitle as any;
 
+type IconType = 'error' | 'info';
+
 const createStyles = (colors: Colors) =>
   StyleSheet.create({
     screen: {
@@ -31,22 +33,55 @@ const createStyles = (colors: Colors) =>
     row: {
       marginVertical: 1,
     },
-    errorIcon: {
-      color: colors.error.default,
+    icon: {
       fontSize: 38,
       marginVertical: 4,
       textAlign: 'center',
     },
+    errorIcon: {
+      color: colors.error.default,
+    },
+    infoIcon: {
+      color: colors.primary.default,
+    },
   });
 
 interface Props {
   description: string; // The error description (Required)
   title?: string; //  The error title, default will be "Error" if not provided (Optional)
   ctaLabel?: string; // The CTA button label, default will be "Try again" (Optional)
   ctaOnPress?: () => any; // The optional callback to be invoked when pressing the CTA button (Optional)
+  icon?: IconType;
+}
+
+function ErrorIcon({ icon }: { icon: IconType }) {
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+  let name, style;
+  switch (icon) {
+    case 'info': {
+      name = 'information-outline';
+      style = styles.infoIcon;
+      break;
+    }
+    case 'error':
+    default: {
+      name = 'close-circle-outline';
+      style = styles.errorIcon;
+      break;
+    }
+  }
+
+  return <MaterialCommunityIcons name={name} style={[styles.icon, style]} />;
 }
 
-function ErrorView({ description, title, ctaLabel, ctaOnPress }: Props) {
+function ErrorView({
+  description,
+  title,
+  ctaLabel,
+  ctaOnPress,
+  icon = 'error',
+}: Props) {
   const { colors } = useTheme();
   const styles = createStyles(colors);
 
@@ -58,10 +93,7 @@ function ErrorView({ description, title, ctaLabel, ctaOnPress }: Props) {
     <View style={styles.screen}>
       <View style={styles.content}>
         <View style={styles.row}>
-          <MaterialCommunityIcons
-            name="close-circle-outline"
-            style={styles.errorIcon}
-          />
+          <ErrorIcon icon={icon} />
         </View>
 
         <View style={styles.row}>

app/components/UI/NetworkModal/index.tsx

@@ -232,8 +232,6 @@ const NetworkModals = (props: NetworkProps) => {
                 isVisible
                 toggleModal={showToolTip}
                 message={strings('networks.provider')}
-                clickText={undefined}
-                clickPress={undefined}
               />
             )}
             <View style={styles.nameWrapper} testID={APPROVE_NETWORK_MODAL_ID}>

app/components/UI/Swaps/components/InfoModal.js

@@ -50,8 +50,12 @@ const createStyles = (colors) =>
       paddingHorizontal: 20,
     },
     messageLimit: {
-      width: '90%',
-      marginVertical: 10,
+      width: '80%',
+    },
+    infoContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      width: '100%',
     },
   });
 
@@ -62,12 +66,41 @@ function InfoModal({
   toggleModal,
   message,
   propagateSwipe,
-  clickText,
-  clickPress,
+  urlText,
+  url,
 }) {
   const { colors } = useAppThemeFromContext() || mockTheme;
   const styles = createStyles(colors);
 
+  const CloseButton = () => (
+    <TouchableOpacity
+      onPress={toggleModal}
+      hitSlop={{ top: 20, left: 20, right: 20, bottom: 20 }}
+    >
+      <IonicIcon name="ios-close" style={styles.closeIcon} size={30} />
+    </TouchableOpacity>
+  );
+
+  const InfoView = () => {
+    if (!message) {
+      return <CloseButton />;
+    }
+
+    return (
+      <View style={styles.infoContainer}>
+        <Text style={styles.messageLimit}>
+          <Text>{message} </Text>
+          {urlText && (
+            <Text link onPress={url}>
+              {urlText}
+            </Text>
+          )}
+        </Text>
+        <CloseButton />
+      </View>
+    );
+  };
+
   return (
     <Modal
       isVisible={isVisible}
@@ -78,29 +111,12 @@ function InfoModal({
       style={styles.modal}
       propagateSwipe={propagateSwipe}
       backdropColor={colors.overlay.default}
-      backdropOpacity={clickText ? 0.2 : 1}
+      backdropOpacity={1}
     >
       <SafeAreaView style={styles.modalView}>
         <View style={styles.title}>
           {title && <Title>{title}</Title>}
-          {message && (
-            <Text style={styles.messageLimit}>
-              <Text>{message} </Text>
-              {clickText && (
-                <Text link onPress={clickPress}>
-                  {clickText}
-                </Text>
-              )}
-            </Text>
-          )}
-          {!message && (
-            <TouchableOpacity
-              onPress={toggleModal}
-              hitSlop={{ top: 20, left: 20, right: 20, bottom: 20 }}
-            >
-              <IonicIcon name="ios-close" style={styles.closeIcon} size={30} />
-            </TouchableOpacity>
-          )}
+          <InfoView />
         </View>
         {body && <View style={styles.body}>{body}</View>}
       </SafeAreaView>
@@ -114,8 +130,8 @@ InfoModal.propTypes = {
   toggleModal: PropTypes.func,
   propagateSwipe: PropTypes.bool,
   message: PropTypes.string,
-  clickText: PropTypes.string,
-  clickPress: PropTypes.func,
+  urlText: PropTypes.string,
+  url: PropTypes.func,
 };
 
 export default InfoModal;