Merge branch 'main' into feat/NFT-details-new-design

app/actions/transaction/index.js

@@ -144,42 +144,6 @@ export function setEtherTransaction(transaction) {
   };
 }
 
-/**
- * Enable individual ERC20 asset only to send in a transaction
- *
- * @param {object} token - Token object to be sent
- */
-export function setIndividualTokenTransaction(token) {
-  return {
-    type: 'SET_INDIVIDUAL_TOKEN_TRANSACTION',
-    token,
-  };
-}
-
-/**
- * Enable individual ERC721 asset only to send in a transaction
- *
- * @param {object} collectible - Collectible object to be sent
- */
-export function setIndividualCollectibleTransaction(collectible) {
-  return {
-    type: 'SET_INDIVIDUAL_COLLECTIBLE_TRANSACTION',
-    collectible,
-  };
-}
-
-/**
- * Enable selectable ERC721 assets who's current account is owner of a specific contract to be sent in a transaction
- *
- * @param {object} collectible - Collectible of the type contract collectible that the user wants to send
- */
-export function setCollectibleContractTransaction(collectible) {
-  return {
-    type: 'SET_COLLECTIBLE_CONTRACT_TRANSACTION',
-    collectible,
-  };
-}
-
 export function setNonce(nonce) {
   return {
     type: 'SET_NONCE',

app/component-library/components/HeaderBase/HeaderBase.types.ts

@@ -8,7 +8,7 @@ export interface HeaderBaseProps extends ViewProps {
   /**
    * Title of the HeaderBase.
    */
-  children: React.ReactNode;
+  children?: React.ReactNode | string;
   /**
    * Optional prop to include content to be displayed before the title.
    */

app/components/Nav/App/index.js

@@ -98,7 +98,7 @@ import { DevLogger } from '../../../../app/core/SDKConnect/utils/DevLogger';
 import { PPOMView } from '../../../lib/ppom/PPOMView';
 import NavigationService from '../../../core/NavigationService';
 import LockScreen from '../../Views/LockScreen';
-import AsyncStorage from '../../../store/async-storage-wrapper';
+import StorageWrapper from '../../../store/storage-wrapper';
 import ShowIpfsGatewaySheet from '../../Views/ShowIpfsGatewaySheet/ShowIpfsGatewaySheet';
 import ShowDisplayNftMediaSheet from '../../Views/ShowDisplayMediaNFTSheet/ShowDisplayNFTMediaSheet';
 import AmbiguousAddressSheet from '../../../../app/components/Views/Settings/Contacts/AmbiguousAddressSheet/AmbiguousAddressSheet';
@@ -328,7 +328,7 @@ const App = ({ userLoggedIn }) => {
   useEffect(() => {
     if (prevNavigator.current || !navigator) return;
     const appTriggeredAuth = async () => {
-      const existingUser = await AsyncStorage.getItem(EXISTING_USER);
+      const existingUser = await StorageWrapper.getItem(EXISTING_USER);
       try {
         if (existingUser) {
           await Authentication.appTriggeredAuth();
@@ -501,7 +501,7 @@ const App = ({ userLoggedIn }) => {
 
   useEffect(() => {
     async function checkExisting() {
-      const existingUser = await AsyncStorage.getItem(EXISTING_USER);
+      const existingUser = await StorageWrapper.getItem(EXISTING_USER);
       setOnboarded(!!existingUser);
       const route = !existingUser
         ? Routes.ONBOARDING.ROOT_NAV
@@ -517,24 +517,24 @@ const App = ({ userLoggedIn }) => {
 
   useEffect(() => {
     async function startApp() {
-      const existingUser = await AsyncStorage.getItem(EXISTING_USER);
+      const existingUser = await StorageWrapper.getItem(EXISTING_USER);
       try {
         const currentVersion = getVersion();
-        const savedVersion = await AsyncStorage.getItem(CURRENT_APP_VERSION);
+        const savedVersion = await StorageWrapper.getItem(CURRENT_APP_VERSION);
         if (currentVersion !== savedVersion) {
           if (savedVersion)
-            await AsyncStorage.setItem(LAST_APP_VERSION, savedVersion);
-          await AsyncStorage.setItem(CURRENT_APP_VERSION, currentVersion);
+            await StorageWrapper.setItem(LAST_APP_VERSION, savedVersion);
+          await StorageWrapper.setItem(CURRENT_APP_VERSION, currentVersion);
         }
 
-        const lastVersion = await AsyncStorage.getItem(LAST_APP_VERSION);
+        const lastVersion = await StorageWrapper.getItem(LAST_APP_VERSION);
         if (!lastVersion) {
           if (existingUser) {
             // Setting last version to first version if user exists and lastVersion does not, to simulate update
-            await AsyncStorage.setItem(LAST_APP_VERSION, '0.0.1');
+            await StorageWrapper.setItem(LAST_APP_VERSION, '0.0.1');
           } else {
             // Setting last version to current version so that it's not treated as an update
-            await AsyncStorage.setItem(LAST_APP_VERSION, currentVersion);
+            await StorageWrapper.setItem(LAST_APP_VERSION, currentVersion);
           }
         }
       } catch (error) {

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 
 import { Alert } from 'react-native';
 import PropTypes from 'prop-types';
@@ -66,35 +66,48 @@ import { useMetrics } from '../../../components/hooks/useMetrics';
 import { selectShouldUseSmartTransaction } from '../../../selectors/smartTransactionsController';
 import { STX_NO_HASH_ERROR } from '../../../util/smart-transactions/smart-publish-hook';
 import { getSmartTransactionMetricsProperties } from '../../../util/smart-transactions';
+import { cloneDeep, isEqual } from 'lodash';
 
 ///: BEGIN:ONLY_INCLUDE_IF(preinstalled-snaps,external-snaps)
 import InstallSnapApproval from '../../Approvals/InstallSnapApproval';
 ///: END:ONLY_INCLUDE_IF
 
 const hstInterface = new ethers.utils.Interface(abi);
 
-export const useSwapConfirmedEvent = ({
-  TransactionController,
-  swapsTransactions,
-  trackSwaps,
-}) => {
+function useSwapsTransactions() {
+  const swapTransactions = useSelector(
+    (state) =>
+      state.engine.backgroundState.TransactionController.swapsTransactions,
+    isEqual,
+  );
+
+  // Memo prevents fresh fallback empty object on every render.
+  return useMemo(() => swapTransactions ?? {}, [swapTransactions]);
+}
+
+export const useSwapConfirmedEvent = ({ trackSwaps }) => {
   const [transactionMetaIdsForListening, setTransactionMetaIdsForListening] =
     useState([]);
 
-  const addTransactionMetaIdForListening = (txMetaId) => {
-    setTransactionMetaIdsForListening([
-      ...transactionMetaIdsForListening,
-      txMetaId,
-    ]);
-  };
+  const addTransactionMetaIdForListening = useCallback(
+    (txMetaId) => {
+      setTransactionMetaIdsForListening([
+        ...transactionMetaIdsForListening,
+        txMetaId,
+      ]);
+    },
+    [transactionMetaIdsForListening],
+  );
+
+  const swapsTransactions = useSwapsTransactions();
 
   useEffect(() => {
     // Cannot directly call trackSwaps from the event listener in autoSign due to stale closure of swapsTransactions
     const [txMetaId, ...restTxMetaIds] = transactionMetaIdsForListening;
 
     if (txMetaId && swapsTransactions[txMetaId]) {
-      TransactionController.hub.once(
-        `${txMetaId}:confirmed`,
+      Engine.controllerMessenger.subscribeOnceIf(
+        'TransactionController:transactionConfirmed',
         (transactionMeta) => {
           if (
             swapsTransactions[transactionMeta.id]?.analytics &&
@@ -107,15 +120,11 @@ export const useSwapConfirmedEvent = ({
             );
           }
         },
+        (transactionMeta) => transactionMeta.id === txMetaId,
       );
       setTransactionMetaIdsForListening(restTxMetaIds);
     }
-  }, [
-    trackSwaps,
-    transactionMetaIdsForListening,
-    swapsTransactions,
-    TransactionController,
-  ]);
+  }, [trackSwaps, transactionMetaIdsForListening, swapsTransactions]);
 
   return {
     addTransactionMetaIdForListening,
@@ -152,29 +161,25 @@ const RootRPCMethodsUI = (props) => {
           TransactionController.state.transactions.find(
             ({ id }) => id === approvalTransactionMetaId,
           );
-        const ethBalance = await query(
-          TransactionController.ethQuery,
-          'getBalance',
-          [props.selectedAddress],
-        );
-        const receipt = await query(
-          TransactionController.ethQuery,
-          'getTransactionReceipt',
-          [transactionMeta.hash],
-        );
 
-        const currentBlock = await query(
-          TransactionController.ethQuery,
-          'getBlockByHash',
-          [receipt.blockHash, false],
-        );
+        const ethQuery = Engine.getGlobalEthQuery();
+
+        const ethBalance = await query(ethQuery, 'getBalance', [
+          props.selectedAddress,
+        ]);
+        const receipt = await query(ethQuery, 'getTransactionReceipt', [
+          transactionMeta.hash,
+        ]);
+
+        const currentBlock = await query(ethQuery, 'getBlockByHash', [
+          receipt.blockHash,
+          false,
+        ]);
         let approvalReceipt;
         if (approvalTransaction?.hash) {
-          approvalReceipt = await query(
-            TransactionController.ethQuery,
-            'getTransactionReceipt',
-            [approvalTransaction.hash],
-          );
+          approvalReceipt = await query(ethQuery, 'getTransactionReceipt', [
+            approvalTransaction.hash,
+          ]);
         }
         const tokensReceived = swapsUtils.getSwapsTokensReceived(
           receipt,
@@ -191,8 +196,8 @@ const RootRPCMethodsUI = (props) => {
           newSwapsTransactions[transactionMeta.id].receivedDestinationAmount =
             new BigNumber(tokensReceived, 16).toString(10);
         }
-        TransactionController.update({
-          swapsTransactions: newSwapsTransactions,
+        TransactionController.update((state) => {
+          state.swapsTransactions = newSwapsTransactions;
         });
 
         const timeToMine = currentBlock.timestamp - sentAt;
@@ -253,19 +258,19 @@ const RootRPCMethodsUI = (props) => {
   );
 
   const { addTransactionMetaIdForListening } = useSwapConfirmedEvent({
-    TransactionController: Engine.context.TransactionController,
-    swapsTransactions: props.swapsTransactions,
     trackSwaps,
   });
 
+  const swapsTransactions = useSwapsTransactions();
+
   const autoSign = useCallback(
     async (transactionMeta) => {
-      const { TransactionController, KeyringController } = Engine.context;
-      const swapsTransactions = props.swapsTransactions;
+      const { KeyringController } = Engine.context;
+      const { id: transactionId } = transactionMeta;
 
       try {
-        TransactionController.hub.once(
-          `${transactionMeta.id}:finished`,
+        Engine.controllerMessenger.subscribeOnceIf(
+          'TransactionController:transactionFinished',
           (transactionMeta) => {
             if (transactionMeta.status === 'submitted') {
               NotificationManager.watchSubmittedTransaction({
@@ -283,6 +288,7 @@ const RootRPCMethodsUI = (props) => {
               throw transactionMeta.error;
             }
           },
+          (transactionMeta) => transactionMeta.id === transactionId,
         );
 
         // Queue txMetaId to listen for confirmation event
@@ -331,13 +337,15 @@ const RootRPCMethodsUI = (props) => {
       props.navigation,
       trackSwaps,
       trackEvent,
-      props.swapsTransactions,
+      swapsTransactions,
       addTransactionMetaIdForListening,
     ],
   );
 
   const onUnapprovedTransaction = useCallback(
-    async (transactionMeta) => {
+    async (transactionMetaOriginal) => {
+      const transactionMeta = cloneDeep(transactionMetaOriginal);
+
       if (transactionMeta.origin === TransactionTypes.MMM) return;
 
       const to = transactionMeta.txParams.to?.toLowerCase();
@@ -404,7 +412,6 @@ const RootRPCMethodsUI = (props) => {
           transactionMeta.txParams.to = toAddress;
 
           setTransactionObject({
-            type: 'INDIVIDUAL_TOKEN_TRANSACTION',
             selectedAsset: asset,
             id: transactionMeta.id,
             origin: transactionMeta.origin,
@@ -448,13 +455,13 @@ const RootRPCMethodsUI = (props) => {
 
   // unapprovedTransaction effect
   useEffect(() => {
-    Engine.context.TransactionController.hub.on(
-      'unapprovedTransaction',
+    Engine.controllerMessenger.subscribe(
+      'TransactionController:unapprovedTransactionAdded',
       onUnapprovedTransaction,
     );
     return () => {
-      Engine.context.TransactionController.hub.removeListener(
-        'unapprovedTransaction',
+      Engine.controllerMessenger.unsubscribe(
+        'TransactionController:unapprovedTransactionAdded',
         onUnapprovedTransaction,
       );
     };
@@ -498,7 +505,6 @@ const RootRPCMethodsUI = (props) => {
 };
 
 RootRPCMethodsUI.propTypes = {
-  swapsTransactions: PropTypes.object,
   /**
    * Object that represents the navigator
    */
@@ -533,8 +539,6 @@ const mapStateToProps = (state) => ({
   selectedAddress: selectSelectedInternalAccountChecksummedAddress(state),
   chainId: selectChainId(state),
   tokens: selectTokens(state),
-  swapsTransactions:
-    state.engine.backgroundState.TransactionController.swapsTransactions || {},
   providerType: selectProviderType(state),
   shouldUseSmartTransaction: selectShouldUseSmartTransaction(state),
 });

app/components/Nav/Main/index.js

@@ -151,8 +151,8 @@ const Main = (props) => {
   const checkInfuraAvailability = useCallback(async () => {
     if (props.providerType !== 'rpc') {
       try {
-        const { TransactionController } = Engine.context;
-        await query(TransactionController.ethQuery, 'blockNumber', []);
+        const ethQuery = Engine.getGlobalEthQuery();
+        await query(ethQuery, 'blockNumber', []);
         props.setInfuraAvailabilityNotBlocked();
       } catch (e) {
         if (e.message === AppConstants.ERRORS.INFURA_BLOCKED_MESSAGE) {