Merge branch 'main' into feat/783-trigger-modal-using-approval-contro…

…ller-on-qr-signing

CHANGELOG.md

@@ -2,6 +2,33 @@
 
 ## Current Main Branch
 
+## 6.5.0 - May 4, 2023
+- [#5743](https://github.com/MetaMask/metamask-mobile/pull/5743): [FEATURE] On-ramp: Add buy-crypto deeplink
+- [#6201](https://github.com/MetaMask/metamask-mobile/pull/6201): [FIX] [SDK] Missing redirect breaking backward compatibility
+- [#6232](https://github.com/MetaMask/metamask-mobile/pull/6232): [FIX] bottom margin for detecting end of the page
+- [#6166](https://github.com/MetaMask/metamask-mobile/pull/6166): [FEATURE] trigger walletconnect modal using approval controller
+- [#6223](https://github.com/MetaMask/metamask-mobile/pull/6223): [IMPROVEMENT] Update to Node.js v16
+- [#6051](https://github.com/MetaMask/metamask-mobile/pull/6051): [FEATURE] Total balance and portfolio button changed
+- [#6156](https://github.com/MetaMask/metamask-mobile/pull/6156): [IMPROVEMENT] On-ramp: Use dynamic list of networks
+- [#6145](https://github.com/MetaMask/metamask-mobile/pull/6145): [IMPROVEMENT] Synced and optimized icons
+- [#6138](https://github.com/MetaMask/metamask-mobile/pull/6138): [FEATURE] On-ramp: Add orderProcessor exponential backoff for orders
+- [#6139](https://github.com/MetaMask/metamask-mobile/pull/6139): [FEATURE] On-ramp: Add same amount rendering as the order details to the order list
+- [#6189](https://github.com/MetaMask/metamask-mobile/pull/6189): [FEATURE] On-ramp: Remove hiding the provider modal when quotes refresh
+- [#6216](https://github.com/MetaMask/metamask-mobile/pull/6216): [IMPROVEMENT] account icon matches user's preferred identicon
+- [#5956](https://github.com/MetaMask/metamask-mobile/pull/5956): [IMPROVEMENT] Show token symbol in verify contract details
+- [#5458](https://github.com/MetaMask/metamask-mobile/pull/5458): [IMPROVEMENT] Support sepolia network
+- [#6185](https://github.com/MetaMask/metamask-mobile/pull/6185): [FIX] remove pubnub package and associated sync with extension code
+- [#6181](https://github.com/MetaMask/metamask-mobile/pull/6181): [IMPROVEMENT] Componentize Header Component
+- [#6153](https://github.com/MetaMask/metamask-mobile/pull/6153): [IMPROVEMENT] On-ramp: Refactor order selector by id
+- [#6044](https://github.com/MetaMask/metamask-mobile/pull/6044): [IMPROVEMENT] Componentize Badge and Badge Wrapper
+- [#6180](https://github.com/MetaMask/metamask-mobile/pull/6180): [IMPROVEMENT] Componentized Overlay Component
+- [#6173](https://github.com/MetaMask/metamask-mobile/pull/6173): [REFACTOR] Auto Lock section
+- [#6174](https://github.com/MetaMask/metamask-mobile/pull/6174): [IMPROVEMENT] Update Tab bar styles
+- [#6056](https://github.com/MetaMask/metamask-mobile/pull/6056): [IMPROVEMENT] Show Identicon for unknown token and if token icon is unknown
+- [#6076](https://github.com/MetaMask/metamask-mobile/pull/6076): [BUGFIX] Fixes WalletConnect deep links (wc:// schema) not working properly
+- [#6157](https://github.com/MetaMask/metamask-mobile/pull/6157): [REFACTOR] Change Password setting
+- [#5718](https://github.com/MetaMask/metamask-mobile/pull/5718): [FIX] Nonce Too Low for Approve Transaction
+
 ## 6.4.0 - Apr 20, 2023
 - [#6144](https://github.com/MetaMask/metamask-mobile/pull/6144): [FEATURE] New Crowdin translations by Github Action
 - [#6143](https://github.com/MetaMask/metamask-mobile/pull/6143): [UPDATE] Crowdin token to use METAMASKBOT_CROWDIN_TOKEN

README.md

@@ -217,7 +217,7 @@ For local testing, the wallet is created using the secret recovery phrase from t
 ##### iOS
 All tests live within the e2e/specs folder.  
 
-Prequisites for running tests:
+Prerequisites for running tests:
 - Make sure to install `detox-cli` by referring to the instructions mentioned [here](https://wix.github.io/Detox/docs/introduction/getting-started/#detox-prerequisites). 
 - Additionally, install `applesimutils` by following the guidelines provided [here](https://github.com/wix/AppleSimulatorUtils). 
 - Before running any tests, it's recommended to refer to the `iOS section` above and check the latest simulator device specified under `Install the correct simulator`.
@@ -246,7 +246,12 @@ If you have already built the application for Detox and want to run a specific t
 ```bash
 yarn test:e2e:ios:debug:single e2e/specs/TEST_NAME.spec.js
 ```
+To run tests associated with a certain tag, you can do so using the `--testNamePattern` flag. For example: 
 
+```bash
+yarn test:e2e:ios:debug --testNamePattern="Smoke"
+```
+This runs all tests that are tagged "Smoke" 
 ##### Android
 All android tests live within the wdio/feature folder. 
 
@@ -286,7 +291,7 @@ To get a better understanding of the internal architecture of this app take a lo
 
 ### Storybook
 
-We have begun documenting our components using storybook please read the [Documentation Guidelines](./storybook/DOCUMENTATION_GUIDELINES.md) to get up and running.
+We have begun documenting our components using Storybook. Please read the [Documentation Guidelines](./storybook/DOCUMENTATION_GUIDELINES.md) to get up and running.
 
 ### Other Docs
 

android/app/build.gradle

@@ -159,8 +159,8 @@ android {
 		applicationId "io.metamask"
 		minSdkVersion rootProject.ext.minSdkVersion
 		targetSdkVersion rootProject.ext.targetSdkVersion
-		versionCode 1100
-		versionName "6.4.0"
+		versionCode 1104
+		versionName "6.5.0"
 		multiDexEnabled true
 		testBuildType System.getProperty('testBuildType', 'debug')
 		missingDimensionStrategy "minReactNative", "minReactNative46"

app/component-library/components/Modals/ModalMandatory/ModalMandatory.tsx

@@ -234,7 +234,7 @@ const ModalMandatory = ({ route }: MandatoryModalProps) => {
           activeOpacity={1}
           {...generateTestId(Platform, TERMS_OF_USE_CHECKBOX_ICON_ID)}
         >
-          <Checkbox isChecked={isCheckboxSelected} />
+          <Checkbox onPress={handleSelect} isChecked={isCheckboxSelected} />
           <Text style={styles.checkboxText}>{checkboxText}</Text>
         </TouchableOpacity>
         <ButtonPrimary

app/components/UI/CollectibleOverview/index.js

@@ -13,6 +13,7 @@ import {
   SafeAreaView,
   TouchableWithoutFeedback,
 } from 'react-native';
+
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { baseStyles } from '../../../styles/common';
@@ -28,6 +29,7 @@ import { toLocaleDate } from '../../../util/date';
 import { renderFromWei } from '../../../util/number';
 import { renderShortAddress } from '../../../util/address';
 import { isMainNet } from '../../../util/networks';
+import { isLinkSafe } from '../../../util/linkCheck';
 import etherscanLink from '@metamask/etherscan-link';
 import {
   addFavoriteCollectible,
@@ -131,6 +133,10 @@ const createStyles = (colors) =>
     },
   });
 
+const FieldType = {
+  Link: 'Link',
+  Text: 'Text',
+};
 /**
  * View that displays the information of a specific ERC-721 Token
  */
@@ -166,11 +172,10 @@ const CollectibleOverview = ({
   }, [collectible.description]);
 
   const renderCollectibleInfoRow = useCallback(
-    (key, value, onPress) => {
+    ({ key, value, onPress, type }) => {
       if (!value) return null;
-
-      if (value.toLowerCase().includes('javascript')) {
-        return null;
+      if (type === FieldType.Link) {
+        if (!isLinkSafe(value)) return null;
       }
       return (
         <View style={styles.collectibleInfoContainer} key={key}>
@@ -203,42 +208,50 @@ const CollectibleOverview = ({
   );
 
   const renderCollectibleInfo = () => [
-    renderCollectibleInfoRow(
-      strings('collectible.collectible_token_standard'),
-      collectible?.standard,
-    ),
-    renderCollectibleInfoRow(
-      strings('collectible.collectible_last_sold'),
-      collectible?.lastSale?.event_timestamp &&
+    renderCollectibleInfoRow({
+      key: strings('collectible.collectible_token_standard'),
+      value: collectible?.standard,
+      type: FieldType.Text,
+    }),
+    renderCollectibleInfoRow({
+      key: strings('collectible.collectible_last_sold'),
+      value:
+        collectible?.lastSale?.event_timestamp &&
         toLocaleDate(
           new Date(collectible?.lastSale?.event_timestamp),
         ).toString(),
-    ),
-    renderCollectibleInfoRow(
-      strings('collectible.collectible_last_price_sold'),
-      collectible?.lastSale?.total_price &&
+      type: FieldType.Text,
+    }),
+    renderCollectibleInfoRow({
+      key: strings('collectible.collectible_last_price_sold'),
+      value:
+        collectible?.lastSale?.total_price &&
         `${renderFromWei(collectible?.lastSale?.total_price)} ETH`,
-    ),
-    renderCollectibleInfoRow(
-      strings('collectible.collectible_source'),
-      collectible?.imageOriginal,
-      () => openLink(collectible?.imageOriginal),
-    ),
-    renderCollectibleInfoRow(
-      strings('collectible.collectible_link'),
-      collectible?.externalLink,
-      () => openLink(collectible?.externalLink),
-    ),
-    renderCollectibleInfoRow(
-      strings('collectible.collectible_asset_contract'),
-      renderShortAddress(collectible?.address),
-      () => {
+      type: FieldType.Text,
+    }),
+    renderCollectibleInfoRow({
+      key: strings('collectible.collectible_source'),
+      value: collectible?.imageOriginal,
+      onPress: () => openLink(collectible?.imageOriginal),
+      type: FieldType.Link,
+    }),
+    renderCollectibleInfoRow({
+      key: strings('collectible.collectible_link'),
+      value: collectible?.externalLink,
+      onPress: () => openLink(collectible?.externalLink),
+      type: FieldType.Link,
+    }),
+    renderCollectibleInfoRow({
+      key: strings('collectible.collectible_asset_contract'),
+      value: renderShortAddress(collectible?.address),
+      onPress: () => {
         if (isMainNet(chainId))
           openLink(
             etherscanLink.createTokenTrackerLink(collectible?.address, chainId),
           );
       },
-    ),
+      type: FieldType.Text,
+    }),
   ];
 
   const collectibleToFavorites = useCallback(() => {

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

@@ -663,7 +663,9 @@ const AmountToBuy = () => {
             description={strings(
               'fiat_on_ramp_aggregator.no_tokens_available',
               {
-                network: NETWORKS_NAMES[selectedChainId],
+                network:
+                  NETWORKS_NAMES[selectedChainId] ||
+                  strings('fiat_on_ramp_aggregator.this_network'),
                 region: selectedRegion?.name,
               },
             )}

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

@@ -1,40 +1,32 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { View } from 'react-native';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { parseUrl } from 'query-string';
 import { WebView, WebViewNavigation } from 'react-native-webview';
 import { useNavigation } from '@react-navigation/native';
-import { CryptoCurrency, Order, Provider } from '@consensys/on-ramp-sdk';
+import { Provider } from '@consensys/on-ramp-sdk';
 import { baseStyles } from '../../../../styles/common';
 import { useTheme } from '../../../../util/theme';
 import { getFiatOnRampAggNavbar } from '../../Navbar';
-import { NATIVE_ADDRESS } from '../../../../constants/on-ramp';
 import { useFiatOnRampSDK, SDK } from '../sdk';
 import {
   addFiatCustomIdData,
-  addFiatOrder,
-  FiatOrder,
   removeFiatCustomIdData,
 } from '../../../../reducers/fiatOrders';
 import { CustomIdData } from '../../../../reducers/fiatOrders/types';
-import Engine from '../../../../core/Engine';
-import { toLowerCaseEquals } from '../../../../util/general';
 import {
   createNavigationDetails,
   useParams,
 } from '../../../../util/navigation/navUtils';
-import { hexToBN } from '../../../../util/number';
-import { protectWalletModalVisible } from '../../../../actions/user';
 import { aggregatorOrderToFiatOrder } from '../orderProcessor/aggregator';
 import { createCustomOrderIdData } from '../orderProcessor/customOrderId';
-import { getNotificationDetails } from '..';
-import NotificationManager from '../../../../core/NotificationManager';
 import ScreenLayout from '../components/ScreenLayout';
 import ErrorView from '../components/ErrorView';
 import ErrorViewWithReporting from '../components/ErrorViewWithReporting';
 import useAnalytics from '../hooks/useAnalytics';
 import { strings } from '../../../../../locales/i18n';
 import Routes from '../../../../constants/navigation/Routes';
+import useHandleSuccessfulOrder from '../hooks/useHandleSuccessfulOrder';
 
 interface CheckoutParams {
   url: string;
@@ -58,10 +50,7 @@ const CheckoutWebView = () => {
   const navigation = useNavigation();
   const params = useParams<CheckoutParams>();
   const { colors } = useTheme();
-  const accounts = useSelector(
-    (state: any) =>
-      state.engine.backgroundState.AccountTrackerController.accounts,
-  );
+  const handleSuccessfulOrder = useHandleSuccessfulOrder();
 
   const { url: uri, customOrderId, provider } = params;
 
@@ -97,88 +86,6 @@ const CheckoutWebView = () => {
     dispatch(addFiatCustomIdData(customOrderIdData));
   }, [customOrderId, dispatch, selectedAddress, selectedChainId]);
 
-  const addTokenToTokensController = useCallback(
-    async (token: CryptoCurrency) => {
-      if (!token) return;
-
-      const { address, symbol, decimals, network, name } = token;
-      const chainId = network?.chainId;
-
-      if (
-        Number(chainId) !== Number(selectedChainId) ||
-        address === NATIVE_ADDRESS
-      ) {
-        return;
-      }
-
-      // @ts-expect-error Engine context typing
-      const { TokensController } = Engine.context;
-
-      if (
-        !TokensController.state.tokens.includes((t: any) =>
-          toLowerCaseEquals(t.address, address),
-        )
-      ) {
-        await TokensController.addToken(address, symbol, decimals, null, name);
-      }
-    },
-    [selectedChainId],
-  );
-
-  const handleAddFiatOrder = useCallback(
-    (order) => {
-      dispatch(addFiatOrder(order));
-    },
-    [dispatch],
-  );
-
-  const handleDispatchUserWalletProtection = useCallback(() => {
-    dispatch(protectWalletModalVisible());
-  }, [dispatch]);
-
-  const handleSuccessfulOrder = useCallback(
-    async (order) => {
-      // add the order to the redux global store
-      handleAddFiatOrder(order);
-      // register the token automatically
-      await addTokenToTokensController((order as any)?.data?.cryptoCurrency);
-
-      // prompt user to protect his/her wallet
-      handleDispatchUserWalletProtection();
-      // close the checkout webview
-      // @ts-expect-error navigation prop mismatch
-      navigation.dangerouslyGetParent()?.pop();
-      NotificationManager.showSimpleNotification(
-        getNotificationDetails(order as any),
-      );
-      trackEvent('ONRAMP_PURCHASE_SUBMITTED', {
-        provider_onramp: ((order as FiatOrder)?.data as Order)?.provider?.name,
-        payment_method_id: ((order as FiatOrder)?.data as Order)?.paymentMethod
-          ?.id,
-        currency_source: ((order as FiatOrder)?.data as Order)?.fiatCurrency
-          .symbol,
-        currency_destination: ((order as FiatOrder)?.data as Order)
-          ?.cryptoCurrency.symbol,
-        chain_id_destination: selectedChainId,
-        order_type: (order as FiatOrder)?.orderType,
-        is_apple_pay: false,
-        has_zero_native_balance: accounts[selectedAddress]?.balance
-          ? (hexToBN(accounts[selectedAddress].balance) as any)?.isZero?.()
-          : undefined,
-      });
-    },
-    [
-      accounts,
-      addTokenToTokensController,
-      handleAddFiatOrder,
-      handleDispatchUserWalletProtection,
-      navigation,
-      selectedAddress,
-      selectedChainId,
-      trackEvent,
-    ],
-  );
-
   const handleNavigationStateChange = async (navState: WebViewNavigation) => {
     if (
       !isRedirectionHandled &&