[FIX] ENS Resolves to Wrong Address when DeepLink

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

@@ -40,6 +40,9 @@ const ModalConfirmation = ({ route }: ModalConfirmationProps) => {
     modalRef.current?.dismissModal(onConfirm);
   };
 
+  const handleModalDismiss = (hasPendingAction: boolean) =>
+    !hasPendingAction && onCancel?.();
+
   const renderHeader = () => (
     <Text style={styles.headerLabel} variant={TextVariants.sHeadingMD}>
       {title}
@@ -74,7 +77,11 @@ const ModalConfirmation = ({ route }: ModalConfirmationProps) => {
   );
 
   return (
-    <ReusableModal ref={modalRef} style={styles.screen} onDismiss={onCancel}>
+    <ReusableModal
+      ref={modalRef}
+      style={styles.screen}
+      onDismiss={handleModalDismiss}
+    >
       <View style={styles.modal}>
         <View style={styles.bodyContainer}>
           {renderHeader()}

app/component-library/components/Modals/ModalConfirmation/__snapshots__/ModalConfirmation.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`ModalConfirmation should render correctly 1`] = `
 <ForwardRef
+  onDismiss={[Function]}
   style={
     Object {
       "justifyContent": "center",

app/components/Nav/App/index.js

@@ -181,6 +181,10 @@ const App = ({ userLoggedIn }) => {
       state?.engine?.backgroundState?.PreferencesController?.frequentRpcList,
   );
 
+  const network = useSelector(
+    (state) => state.engine.backgroundState.NetworkController.network,
+  );
+
   const handleDeeplink = useCallback(({ error, params, uri }) => {
     if (error) {
       trackErrorAsAnalytics(error, 'Branch:');
@@ -226,6 +230,7 @@ const App = ({ userLoggedIn }) => {
           },
         },
         frequentRpcList,
+        network,
         dispatch,
       });
       if (!prevNavigator.current) {
@@ -246,7 +251,7 @@ const App = ({ userLoggedIn }) => {
       }
       prevNavigator.current = navigator;
     }
-  }, [dispatch, handleDeeplink, frequentRpcList, navigator]);
+  }, [dispatch, handleDeeplink, frequentRpcList, navigator, network]);
 
   useEffect(() => {
     const initAnalytics = async () => {

app/components/Views/Send/index.js

@@ -37,7 +37,7 @@ import {
   generateTransferData,
 } from '../../../util/transactions';
 import Logger from '../../../util/Logger';
-import { isENS, isValidHexAddress } from '../../../util/address';
+import { getAddress } from '../../../util/address';
 import TransactionTypes from '../../../core/TransactionTypes';
 import { MAINNET } from '../../../constants/network';
 import BigNumber from 'bignumber.js';
@@ -47,7 +47,6 @@ import AnalyticsV2 from '../../../util/analyticsV2';
 
 import { KEYSTONE_TX_CANCELED } from '../../../constants/error';
 import { ThemeContext, mockTheme } from '../../../util/theme';
-import { doENSLookup } from '../../../util/ENSUtils';
 
 const REVIEW = 'review';
 const EDIT = 'edit';
@@ -269,17 +268,10 @@ class Send extends PureComponent {
    * Handle deeplink txMeta recipient
    */
   handleNewTxMetaRecipient = async (recipient) => {
-    let ensRecipient, to;
-    if (isENS(recipient)) {
-      ensRecipient = recipient;
-      to = await doENSLookup(ensRecipient, this.props.network);
-    }
-    if (
-      recipient &&
-      isValidHexAddress(recipient, { mixedCaseUseChecksum: true })
-    ) {
-      to = recipient;
-    }
+    let ensRecipient;
+
+    const to = await getAddress(recipient, this.props.network);
+
     if (!to) {
       NotificationManager.showSimpleNotification({
         status: 'simple_notification_rejected',

app/core/DeeplinkManager.js

@@ -12,6 +12,7 @@ import { NETWORK_ERROR_MISSING_NETWORK_ID } from '../constants/error';
 import { strings } from '../../locales/i18n';
 import { getNetworkTypeById, handleNetworkSwitch } from '../util/networks';
 import { WalletDevice } from '@metamask/transaction-controller';
+import NotificationManager from '../core/NotificationManager';
 import {
   ACTIONS,
   ETH_ACTIONS,
@@ -22,12 +23,14 @@ import { showAlert } from '../actions/alert';
 import SDKConnect from '../core/SDKConnect';
 import Routes from '../constants/navigation/Routes';
 import Minimizer from 'react-native-minimizer';
+import { getAddress } from '../util/address';
 class DeeplinkManager {
-  constructor({ navigation, frequentRpcList, dispatch }) {
+  constructor({ navigation, frequentRpcList, dispatch, network }) {
     this.navigation = navigation;
     this.pendingDeeplink = null;
     this.frequentRpcList = frequentRpcList;
     this.dispatch = dispatch;
+    this.network = network;
   }
 
   setDeeplink = (url) => (this.pendingDeeplink = url);
@@ -60,7 +63,7 @@ class DeeplinkManager {
     );
   };
 
-  _approveTransaction = (ethUrl, origin) => {
+  _approveTransaction = async (ethUrl, origin) => {
     const {
       parameters: { address, uint256 },
       target_address,
@@ -83,11 +86,22 @@ class DeeplinkManager {
 
     const value = uint256Number.toString(16);
 
+    const spenderAddress = await getAddress(address, this.network);
+    if (!spenderAddress) {
+      NotificationManager.showSimpleNotification({
+        status: 'simple_notification_rejected',
+        duration: 5000,
+        title: strings('transaction.invalid_recipient'),
+        description: strings('transaction.invalid_recipient_description'),
+      });
+      this.navigation.navigate('WalletView');
+    }
+
     const txParams = {
       to: target_address.toString(),
       from: PreferencesController.state.selectedAddress.toString(),
       value: '0x0',
-      data: generateApproveData({ spender: address, value }),
+      data: generateApproveData({ spender: spenderAddress, value }),
     };
 
     TransactionController.addTransaction(
@@ -340,8 +354,13 @@ class DeeplinkManager {
 let instance = null;
 
 const SharedDeeplinkManager = {
-  init: ({ navigation, frequentRpcList, dispatch }) => {
-    instance = new DeeplinkManager({ navigation, frequentRpcList, dispatch });
+  init: ({ navigation, frequentRpcList, dispatch, network }) => {
+    instance = new DeeplinkManager({
+      navigation,
+      frequentRpcList,
+      dispatch,
+      network,
+    });
   },
   parse: (url, args) => instance.parse(url, args),
   setDeeplink: (url) => instance.setDeeplink(url),

app/util/address/index.js

@@ -437,3 +437,19 @@ export const stripHexPrefix = (str) => {
   }
   return isHexPrefixed(str) ? str.slice(2) : str;
 };
+
+/**
+ * Method to check if address is ENS and return the address
+ * @param {String} toAccount - Address or ENS
+ * @param {String} network - Network id
+ * @returns {String} - Address or null
+ */
+export async function getAddress(toAccount, network) {
+  if (isENS(toAccount)) {
+    return await doENSLookup(toAccount, network);
+  }
+  if (isValidHexAddress(toAccount, { mixedCaseUseChecksum: true })) {
+    return toAccount;
+  }
+  return null;
+}

app/util/address/index.test.ts

@@ -5,6 +5,7 @@ import {
   isValidHexAddress,
   isValidAddressInputViaQRCode,
   stripHexPrefix,
+  getAddress,
 } from '.';
 
 describe('isENS', () => {
@@ -138,3 +139,26 @@ describe('stripHexPrefix', () => {
     expect(stripHexPrefix(stripped)).toBe(stripped);
   });
 });
+
+describe('getAddress', () => {
+  const validAddress = '0x87187657B35F461D0CEEC338D9B8E944A193AFE2';
+  const inValidAddress = '0x87187657B35F461D0CEEC338D9B8E944A193AFE';
+  const validENSAddress = 'test.eth';
+
+  it('should resolve ENS if ENS is valid', async () => {
+    const network = '1';
+    const doENSLookup = jest.fn();
+    await doENSLookup(validENSAddress, network);
+    expect(doENSLookup).toHaveBeenCalledWith(validENSAddress, network);
+  });
+
+  it('should return address if address is valid', async () => {
+    const response = await getAddress(validAddress, '1');
+    expect(response).toBe(validAddress);
+  });
+
+  it('should return null if address is invalid', async () => {
+    const response = await getAddress(inValidAddress, '1');
+    expect(response).toBe(null);
+  });
+});