5.2.0

CHANGELOG.md

@@ -2,13 +2,24 @@
 
 ## Current Main Branch
 
-## 5.1.1 - May 12, 2022
-- [#4254](https://github.com/MetaMask/metamask-mobile/pull/4254): [FIX] Crashes on Android devices when using the app in split screen
-- [#4052](https://github.com/MetaMask/metamask-mobile/pull/4052): [FEAT] Download attachments in browser on iOS
-- [4174](https://github.com/MetaMask/metamask-mobile/pull/4174):  [IMPROVEMENT] Use checksum standard format
-- [#4318](https://github.com/MetaMask/metamask-mobile/pull/4318): [FIX] Send flow confusables bug
-- [#4315](https://github.com/MetaMask/metamask-mobile/pull/4315): [IMPROVEMENT] Make reveal SRP blur view dynamic
+## 5.2.0 - May 17, 2022
 - [#4349](https://github.com/MetaMask/metamask-mobile/pull/4349): [FIX] Subtitle mapping
+- [#4344](https://github.com/MetaMask/metamask-mobile/pull/4344): [FIX] Fix homepage scripts and env import
+- [#4345](https://github.com/MetaMask/metamask-mobile/pull/4345): [FIX] Fix check for empty tokens list
+- [#3696](https://github.com/MetaMask/metamask-mobile/pull/3696): [FEATURE] Fiat on Ramp Aggregator
+- [#4303](https://github.com/MetaMask/metamask-mobile/pull/4303): [IMPROVEMENT] Add support for env variable for MM_HOMEPAGE
+- [#4331](https://github.com/MetaMask/metamask-mobile/pull/4331): [IMPROVEMENT] Fix addressbook and browser test
+- [#4170](https://github.com/MetaMask/metamask-mobile/pull/4170): [FIX] Copy to clipboard for Android version 9 and below
+- [#4328](https://github.com/MetaMask/metamask-mobile/pull/4328): [FIX] Fix generate-static-assets
+- [#4318](https://github.com/MetaMask/metamask-mobile/pull/4318): [FIX] Fix confusables bug
+- [#4316](https://github.com/MetaMask/metamask-mobile/pull/4316): [IMPROVEMENT] GIVEN, WHEN, THEN - Template Update
+- [#4167](https://github.com/MetaMask/metamask-mobile/pull/4167): [IMPROVEMENT] Adds support for 'dapp/' urls support on 'metamask://' and fixes DL opening to Apple Store
+- [#4175](https://github.com/MetaMask/metamask-mobile/pull/4175): [Fix] Favourites not showing when home button is pressed in browser tab menu
+- [#4278](https://github.com/MetaMask/metamask-mobile/pull/4278): [IMPROVEMENT] Convert back to spaces
+- [#4249](https://github.com/MetaMask/metamask-mobile/pull/4249): [IMPROVEMENT] patch cross-fetch instead of skipping
+- [#4174](https://github.com/MetaMask/metamask-mobile/pull/4174): [IMPROVEMENT] Address now is in the checksum standard format
+- [#4182](https://github.com/MetaMask/metamask-mobile/pull/4182): [IMPROVEMENT] Standardize prettier configuration
+- [#4183](https://github.com/MetaMask/metamask-mobile/pull/4183): [FIX] excluded audit because no available patch
 
 ## 5.1.0 - May 5, 2022
 - [#3929](https://github.com/MetaMask/metamask-mobile/pull/3929): [IMPROVEMENT] Defaults to current network if chain id not specified in QR codes

android/app/build.gradle

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

app/components/UI/AccountOverview/index.js

@@ -45,6 +45,7 @@ import { allowedToBuy } from '../FiatOrders';
 import AssetSwapButton from '../Swaps/components/AssetSwapButton';
 import ClipboardManager from '../../../core/ClipboardManager';
 import { ThemeContext, mockTheme } from '../../../util/theme';
+import Routes from '../../../constants/navigation/Routes';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -308,13 +309,16 @@ class AccountOverview extends PureComponent {
   };
 
   onBuy = () => {
-    this.props.navigation.navigate('FiatOnRampAggregator');
+    this.props.navigation.navigate(Routes.FIAT_ON_RAMP_AGGREGATOR.ID);
     InteractionManager.runAfterInteractions(() => {
-      Analytics.trackEvent(ANALYTICS_EVENT_OPTS.WALLET_BUY_ETH);
-      AnalyticsV2.trackEvent(AnalyticsV2.ANALYTICS_EVENTS.ONRAMP_OPENED, {
-        button_location: 'Home Screen',
-        button_copy: 'Buy',
-      });
+      Analytics.trackEventWithParameters(
+        AnalyticsV2.ANALYTICS_EVENTS.BUY_BUTTON_CLICKED,
+        {
+          text: 'Buy',
+          location: 'Wallet',
+          chain_id_destination: this.props.chainId,
+        },
+      );
     });
   };
 

app/components/UI/AssetOverview/index.js

@@ -35,7 +35,6 @@ import Engine from '../../../core/Engine';
 import Logger from '../../../util/Logger';
 import Analytics from '../../../core/Analytics';
 import AnalyticsV2 from '../../../util/analyticsV2';
-import { ANALYTICS_EVENT_OPTS } from '../../../util/analytics';
 import { allowedToBuy } from '../FiatOrders';
 import AssetSwapButton from '../Swaps/components/AssetSwapButton';
 import NetworkMainAssetLogo from '../NetworkMainAssetLogo';
@@ -182,13 +181,16 @@ class AssetOverview extends PureComponent {
   };
 
   onBuy = () => {
-    this.props.navigation.navigate('FiatOnRampAggregator');
+    this.props.navigation.navigate(Routes.FIAT_ON_RAMP_AGGREGATOR.ID);
     InteractionManager.runAfterInteractions(() => {
-      Analytics.trackEvent(ANALYTICS_EVENT_OPTS.WALLET_BUY_ETH);
-      AnalyticsV2.trackEvent(AnalyticsV2.ANALYTICS_EVENTS.ONRAMP_OPENED, {
-        button_location: 'Token Screen',
-        button_copy: 'Buy',
-      });
+      Analytics.trackEventWithParameters(
+        AnalyticsV2.ANALYTICS_EVENTS.BUY_BUTTON_CLICKED,
+        {
+          text: 'Buy',
+          location: 'Token Screen',
+          chain_id_destination: this.props.chainId,
+        },
+      );
     });
   };
 

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

@@ -48,6 +48,7 @@ import ErrorViewWithReporting from '../components/ErrorViewWithReporting';
 import { Colors } from '../../../../util/theme/models';
 import { CryptoCurrency } from '@consensys/on-ramp-sdk';
 import Routes from '../../../../constants/navigation/Routes';
+import useAnalytics from '../hooks/useAnalytics';
 
 // TODO: Convert into typescript and correctly type
 const Text = BaseText as any;
@@ -94,10 +95,11 @@ const AmountToBuy = () => {
   const navigation = useNavigation();
   const { colors } = useTheme();
   const styles = createStyles(colors);
+  const trackEvent = useAnalytics();
   const [amountFocused, setAmountFocused] = useState(false);
   const [amount, setAmount] = useState('0');
   const [amountNumber, setAmountNumber] = useState(0);
-  const [tokens, setTokens] = useState<CryptoCurrency[]>([]);
+  const [tokens, setTokens] = useState<CryptoCurrency[] | null>(null);
   const [error, setError] = useState<string | null>(null);
   const keyboardHeight = useRef(1000);
   const keypadOffset = useSharedValue(1000);
@@ -122,16 +124,6 @@ const AmountToBuy = () => {
   const [isRegionModalVisible, toggleRegionModal, , hideRegionModal] =
     useModalHandler(false);
 
-  useEffect(() => {
-    navigation.setOptions(
-      getFiatOnRampAggNavbar(
-        navigation,
-        { title: strings('fiat_on_ramp_aggregator.amount_to_buy') },
-        colors,
-      ),
-    );
-  }, [navigation, colors]);
-
   /**
    * Grab the current state of the SDK via the context.
    */
@@ -341,6 +333,80 @@ const AmountToBuy = () => {
     setSelectedPaymentMethodId,
   ]);
 
+  /**
+   * * Derived values
+   */
+
+  const isFetching =
+    isFetchingSdkCryptoCurrencies ||
+    isFetchingPaymentMethods ||
+    isFetchingFiatCurrencies ||
+    isFetchingDefaultFiatCurrency ||
+    isFetchingCountries;
+
+  /**
+   * Get the fiat currency object by id
+   */
+  const currentFiatCurrency = useMemo(() => {
+    const currency =
+      fiatCurrencies?.find?.((curr) => curr.id === selectedFiatCurrencyId) ||
+      defaultFiatCurrency;
+    return currency;
+  }, [fiatCurrencies, defaultFiatCurrency, selectedFiatCurrencyId]);
+
+  const currentPaymentMethod = useMemo(
+    () =>
+      filteredPaymentMethods?.find?.(
+        (method) => method.id === selectedPaymentMethodId,
+      ),
+    [filteredPaymentMethods, selectedPaymentMethodId],
+  );
+
+  /**
+   * Format the amount for display (iOS only)
+   */
+  const displayAmount = useMemo(() => {
+    if (Device.isIos() && Intl && Intl?.NumberFormat) {
+      return amountFocused
+        ? amount
+        : new Intl.NumberFormat().format(amountNumber);
+    }
+    return amount;
+  }, [amount, amountFocused, amountNumber]);
+
+  const amountIsBelowMinimum = useMemo(
+    () => amountNumber !== 0 && limits && amountNumber < limits.minAmount,
+    [amountNumber, limits],
+  );
+
+  const amountIsAboveMaximum = useMemo(
+    () => amountNumber !== 0 && limits && amountNumber > limits.maxAmount,
+    [amountNumber, limits],
+  );
+
+  const amountIsValid = useMemo(
+    () => !amountIsBelowMinimum && !amountIsAboveMaximum,
+    [amountIsBelowMinimum, amountIsAboveMaximum],
+  );
+
+  const handleCancelPress = useCallback(() => {
+    trackEvent('ONRAMP_CANCELED', {
+      location: 'Amount to Buy Screen',
+      chain_id_destination: selectedChainId,
+    });
+  }, [selectedChainId, trackEvent]);
+
+  useEffect(() => {
+    navigation.setOptions(
+      getFiatOnRampAggNavbar(
+        navigation,
+        { title: strings('fiat_on_ramp_aggregator.amount_to_buy') },
+        colors,
+        handleCancelPress,
+      ),
+    );
+  }, [navigation, colors, handleCancelPress]);
+
   /**
    * * Keypad style, handlers and effects
    */
@@ -353,7 +419,7 @@ const AmountToBuy = () => {
   }));
 
   useEffect(() => {
-    keypadOffset.value = amountFocused ? 40 : keyboardHeight.current + 40;
+    keypadOffset.value = amountFocused ? 40 : keyboardHeight.current + 80;
   }, [amountFocused, keyboardHeight, keypadOffset]);
 
   /**
@@ -488,64 +554,26 @@ const AmountToBuy = () => {
     navigation.navigate(Routes.FIAT_ON_RAMP_AGGREGATOR.GET_QUOTES, {
       amount: amountNumber,
       asset: selectedAsset,
+      fiatCurrency: currentFiatCurrency,
     });
-  }, [amountNumber, navigation, selectedAsset]);
-
-  /**
-   * * Derived values
-   */
-
-  const isFetching =
-    isFetchingSdkCryptoCurrencies ||
-    isFetchingPaymentMethods ||
-    isFetchingFiatCurrencies ||
-    isFetchingDefaultFiatCurrency ||
-    isFetchingCountries;
-
-  /**
-   * Get the fiat currency object by id
-   */
-  const currentFiatCurrency = useMemo(() => {
-    const currency =
-      fiatCurrencies?.find?.((curr) => curr.id === selectedFiatCurrencyId) ||
-      defaultFiatCurrency;
-    return currency;
-  }, [fiatCurrencies, defaultFiatCurrency, selectedFiatCurrencyId]);
-
-  const currentPaymentMethod = useMemo(
-    () =>
-      filteredPaymentMethods?.find?.(
-        (method) => method.id === selectedPaymentMethodId,
-      ),
-    [filteredPaymentMethods, selectedPaymentMethodId],
-  );
-
-  /**
-   * Format the amount for display (iOS only)
-   */
-  const displayAmount = useMemo(() => {
-    if (Device.isIos() && Intl && Intl?.NumberFormat) {
-      return amountFocused
-        ? amount
-        : new Intl.NumberFormat().format(amountNumber);
-    }
-    return amount;
-  }, [amount, amountFocused, amountNumber]);
-
-  const amountIsBelowMinimum = useMemo(
-    () => amountNumber !== 0 && limits && amountNumber < limits.minAmount,
-    [amountNumber, limits],
-  );
-
-  const amountIsAboveMaximum = useMemo(
-    () => amountNumber !== 0 && limits && amountNumber > limits.maxAmount,
-    [amountNumber, limits],
-  );
+    trackEvent('ONRAMP_QUOTES_REQUESTED', {
+      currency_source: currentFiatCurrency?.symbol as string,
+      currency_destination: selectedAsset?.symbol as string,
+      payment_method_id: selectedPaymentMethodId as string,
+      chain_id_destination: selectedChainId,
+      amount: amountNumber,
+      location: 'Amount to Buy Screen',
+    });
+  }, [
+    amountNumber,
+    currentFiatCurrency,
+    navigation,
+    selectedAsset,
+    selectedChainId,
+    selectedPaymentMethodId,
+    trackEvent,
+  ]);
 
-  const amountIsValid = useMemo(
-    () => !amountIsBelowMinimum && !amountIsAboveMaximum,
-    [amountIsBelowMinimum, amountIsAboveMaximum],
-  );
   const retryMethod = useCallback(() => {
     if (!error) {
       return null;
@@ -650,7 +678,7 @@ const AmountToBuy = () => {
     );
   }
 
-  if (!isFetching && (!tokens || tokens.length === 0)) {
+  if (!isFetching && tokens && tokens.length === 0) {
     return (
       <ScreenLayout>
         <ScreenLayout.Body>
@@ -659,11 +687,21 @@ const AmountToBuy = () => {
               'fiat_on_ramp_aggregator.no_tokens_available',
               {
                 network: NETWORKS_NAMES[selectedChainId],
+                region: selectedRegion?.name,
               },
             )}
-            ctaOnPress={() => navigation.goBack()}
+            ctaLabel={strings('fiat_on_ramp_aggregator.try_different_region')}
+            ctaOnPress={toggleRegionModal 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}
+        />
       </ScreenLayout>
     );
   }
@@ -784,7 +822,7 @@ const AmountToBuy = () => {
           'fiat_on_ramp_aggregator.select_a_cryptocurrency_description',
           { network: NETWORKS_NAMES[selectedChainId] },
         )}
-        tokens={tokens}
+        tokens={tokens ?? []}
         onItemPress={handleAssetPress}
       />
       <FiatSelectModal
@@ -801,6 +839,7 @@ const AmountToBuy = () => {
         paymentMethods={filteredPaymentMethods}
         selectedPaymentMethodId={selectedPaymentMethodId}
         onItemPress={handleChangePaymentMethod}
+        location={'Amount to Buy Screen'}
       />
       <RegionModal
         isVisible={isRegionModalVisible}
@@ -809,6 +848,7 @@ const AmountToBuy = () => {
         data={countries}
         dismiss={hideRegionModal as () => void}
         onRegionPress={handleRegionPress}
+        location={'Amount to Buy Screen'}
       />
     </ScreenLayout>
   );