feat: smart tx small views

app/components/Nav/App/index.js

@@ -106,6 +106,7 @@ import generateUserSettingsAnalyticsMetaData from '../../../util/metrics/UserSet
 import OnboardingSuccess from '../../Views/OnboardingSuccess';
 import DefaultSettings from '../../Views/OnboardingSuccess/DefaultSettings';
 import BasicFunctionalityModal from '../../UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal';
+import SmartTransactionsOptInModal from '../../Views/SmartTransactionsOptInModal/SmartTranactionsOptInModal';
 
 const clearStackNavigatorOptions = {
   headerShown: false,
@@ -590,6 +591,10 @@ const App = ({ userLoggedIn }) => {
         component={ModalMandatory}
       />
       <Stack.Screen name={Routes.MODAL.WHATS_NEW} component={WhatsNewModal} />
+      <Stack.Screen
+        name={Routes.MODAL.SMART_TRANSACTIONS_OPT_IN}
+        component={SmartTransactionsOptInModal}
+      />
       <Stack.Screen
         name={Routes.SHEET.ACCOUNT_SELECTOR}
         component={AccountSelector}

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -23,7 +23,7 @@ import {
   getTokenAddressParam,
   calcTokenAmount,
   getTokenValueParamAsHex,
-  getIsSwapApproveOrSwapTransaction as isSwapTransaction,
+  getIsSwapApproveOrSwapTransaction,
 } from '../../../util/transactions';
 import { BN } from 'ethereumjs-util';
 import Logger from '../../../util/Logger';
@@ -63,6 +63,9 @@ import { getLedgerKeyring } from '../../../core/Ledger/Ledger';
 import { createLedgerTransactionModalNavDetails } from '../../UI/LedgerModals/LedgerTransactionModal';
 import ExtendedKeyringTypes from '../../../constants/keyringTypes';
 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';
 
 ///: BEGIN:ONLY_INCLUDE_IF(snaps)
 import InstallSnapApproval from '../../Approvals/InstallSnapApproval';
@@ -82,10 +85,11 @@ const RootRPCMethodsUI = (props) => {
   };
 
   const trackSwaps = useCallback(
-    async (event, transactionMeta) => {
+    async (event, transactionMeta, swapsTransactions) => {
       try {
-        const { TransactionController } = Engine.context;
-        const newSwapsTransactions = props.swapsTransactions;
+        const { TransactionController, SmartTransactionsController } =
+          Engine.context;
+        const newSwapsTransactions = swapsTransactions;
         const swapTransaction = newSwapsTransactions[transactionMeta.id];
         const {
           sentAt,
@@ -166,12 +170,20 @@ const RootRPCMethodsUI = (props) => {
         delete newSwapsTransactions[transactionMeta.id].analytics;
         delete newSwapsTransactions[transactionMeta.id].paramsForAnalytics;
 
+        const smartTransactionMetricsProperties =
+          getSmartTransactionMetricsProperties(
+            SmartTransactionsController,
+            transactionMeta,
+          );
+
         const parameters = {
           ...analyticsParams,
           time_to_mine: timeToMine,
           estimated_vs_used_gasRatio: estimatedVsUsedGasRatio,
           quote_vs_executionRatio: quoteVsExecutionRatio,
           token_to_amount_received: tokenToAmountReceived.toString(),
+          is_smart_transaction: props.shouldUseSmartTransaction,
+          ...smartTransactionMetricsProperties,
         };
 
         trackAnonymousEvent(event, parameters);
@@ -184,7 +196,7 @@ const RootRPCMethodsUI = (props) => {
     },
     [
       props.selectedAddress,
-      props.swapsTransactions,
+      props.shouldUseSmartTransaction,
       trackEvent,
       trackAnonymousEvent,
     ],
@@ -193,6 +205,7 @@ const RootRPCMethodsUI = (props) => {
   const autoSign = useCallback(
     async (transactionMeta) => {
       const { TransactionController, KeyringController } = Engine.context;
+      const swapsTransactions = props.swapsTransactions;
       try {
         TransactionController.hub.once(
           `${transactionMeta.id}:finished`,
@@ -203,8 +216,12 @@ const RootRPCMethodsUI = (props) => {
                 assetType: transactionMeta.txParams.assetType,
               });
             } else {
-              if (props.swapsTransactions[transactionMeta.id]?.analytics) {
-                trackSwaps(MetaMetricsEvents.SWAP_FAILED, transactionMeta);
+              if (swapsTransactions[transactionMeta.id]?.analytics) {
+                trackSwaps(
+                  MetaMetricsEvents.SWAP_FAILED,
+                  transactionMeta,
+                  swapsTransactions,
+                );
               }
               throw transactionMeta.error;
             }
@@ -213,8 +230,15 @@ const RootRPCMethodsUI = (props) => {
         TransactionController.hub.once(
           `${transactionMeta.id}:confirmed`,
           (transactionMeta) => {
-            if (props.swapsTransactions[transactionMeta.id]?.analytics) {
-              trackSwaps(MetaMetricsEvents.SWAP_COMPLETED, transactionMeta);
+            if (
+              swapsTransactions[transactionMeta.id]?.analytics &&
+              swapsTransactions[transactionMeta.id]?.paramsForAnalytics
+            ) {
+              trackSwaps(
+                MetaMetricsEvents.SWAP_COMPLETED,
+                transactionMeta,
+                swapsTransactions,
+              );
             }
           },
         );
@@ -242,7 +266,10 @@ const RootRPCMethodsUI = (props) => {
           Engine.acceptPendingApproval(transactionMeta.id);
         }
       } catch (error) {
-        if (!error?.message.startsWith(KEYSTONE_TX_CANCELED)) {
+        if (
+          !error?.message.startsWith(KEYSTONE_TX_CANCELED) &&
+          !error?.message.startsWith(STX_NO_HASH_ERROR)
+        ) {
           Alert.alert(
             strings('transactions.transaction_error'),
             error && error.message,
@@ -264,7 +291,14 @@ const RootRPCMethodsUI = (props) => {
       const to = transactionMeta.txParams.to?.toLowerCase();
       const { data } = transactionMeta.txParams;
 
-      if (isSwapTransaction(data, transactionMeta.origin, to, props.chainId)) {
+      if (
+        getIsSwapApproveOrSwapTransaction(
+          data,
+          transactionMeta.origin,
+          to,
+          props.chainId,
+        )
+      ) {
         autoSign(transactionMeta);
       } else {
         const {
@@ -441,6 +475,10 @@ RootRPCMethodsUI.propTypes = {
    * Chain id
    */
   chainId: PropTypes.string,
+  /**
+   * If smart transactions should be used
+   */
+  shouldUseSmartTransaction: PropTypes.bool,
 };
 
 const mapStateToProps = (state) => ({
@@ -450,6 +488,7 @@ const mapStateToProps = (state) => ({
   swapsTransactions:
     state.engine.backgroundState.TransactionController.swapsTransactions || {},
   providerType: selectProviderType(state),
+  shouldUseSmartTransaction: selectShouldUseSmartTransaction(state),
 });
 
 const mapDispatchToProps = (dispatch) => ({

app/components/UI/Notification/TransactionNotification/index.js

@@ -110,6 +110,7 @@ function TransactionNotification(props) {
     onClose,
     transactions,
     animatedTimingStart,
+    smartTransactions,
   } = props;
 
   const [transactionDetails, setTransactionDetails] = useState(undefined);
@@ -265,13 +266,23 @@ function TransactionNotification(props) {
     getTransactionInfo();
   }, [
     transactions,
+    smartTransactions,
     currentNotification.transaction.id,
     transactionAction,
     props,
   ]);
 
   useEffect(() => onCloseNotification(), [onCloseNotification]);
 
+  // Don't show submitted notification for STX b/c we only know when it's confirmed,
+  // o/w a submitted notification will show up after it's confirmed, then a confirmed notification will show up immediately after
+  if (tx.status === 'submitted') {
+    const smartTx = smartTransactions.find((stx) => stx.txHash === tx.hash);
+    if (smartTx) {
+      return null;
+    }
+  }
+
   return (
     <>
       <Animated.View
@@ -372,6 +383,10 @@ TransactionNotification.propTypes = {
    * An array that represents the user transactions on chain
    */
   transactions: PropTypes.array,
+  /**
+   * An array that represents the user smart transactions on chain
+   */
+  smartTransactions: PropTypes.array,
 
   /**
    * String of selected address
@@ -416,21 +431,36 @@ TransactionNotification.propTypes = {
   primaryCurrency: PropTypes.string,
 };
 
-const mapStateToProps = (state) => ({
-  accounts: selectAccounts(state),
-  selectedAddress: selectSelectedAddress(state),
-  transactions: state.engine.backgroundState.TransactionController.transactions,
-  ticker: selectTicker(state),
-  chainId: selectChainId(state),
-  tokens: selectTokensByAddress(state),
-  collectibleContracts: collectibleContractsSelector(state),
-  contractExchangeRates: selectContractExchangeRates(state),
-  conversionRate: selectConversionRate(state),
-  currentCurrency: selectCurrentCurrency(state),
-  primaryCurrency: state.settings.primaryCurrency,
-  swapsTransactions:
-    state.engine.backgroundState.TransactionController.swapsTransactions || {},
-  swapsTokens: state.engine.backgroundState.SwapsController.tokens,
-});
+const mapStateToProps = (state) => {
+  const chainId = selectChainId(state);
+
+  const {
+    SmartTransactionsController,
+    TransactionController,
+    SwapsController,
+  } = state.engine.backgroundState;
+
+  const smartTransactions =
+    SmartTransactionsController?.smartTransactionsState?.smartTransactions?.[
+      chainId
+    ] || [];
+
+  return {
+    accounts: selectAccounts(state),
+    selectedAddress: selectSelectedAddress(state),
+    transactions: TransactionController.transactions,
+    ticker: selectTicker(state),
+    chainId,
+    tokens: selectTokensByAddress(state),
+    collectibleContracts: collectibleContractsSelector(state),
+    contractExchangeRates: selectContractExchangeRates(state),
+    conversionRate: selectConversionRate(state),
+    currentCurrency: selectCurrentCurrency(state),
+    primaryCurrency: state.settings.primaryCurrency,
+    swapsTransactions: TransactionController.swapsTransactions || {},
+    swapsTokens: SwapsController.tokens,
+    smartTransactions,
+  };
+};
 
 export default connect(mapStateToProps)(TransactionNotification);

app/components/UI/Swaps/QuotesView.js

@@ -100,6 +100,7 @@ import { useMetrics } from '../../../components/hooks/useMetrics';
 import { addTransaction } from '../../../util/transaction-controller';
 import trackErrorAsAnalytics from '../../../util/metrics/TrackError/trackErrorAsAnalytics';
 import { selectGasFeeEstimates } from '../../../selectors/confirmTransaction';
+import { selectShouldUseSmartTransaction } from '../../../selectors/smartTransactionsController';
 
 const POLLING_INTERVAL = 30000;
 const SLIPPAGE_BUCKETS = {
@@ -388,6 +389,7 @@ function SwapsQuotesView({
   usedCustomGas,
   setRecipient,
   resetTransaction,
+  shouldUseSmartTransaction,
 }) {
   const navigation = useNavigation();
   /* Get params from navigation */
@@ -926,11 +928,13 @@ function SwapsQuotesView({
             origin: process.env.MM_FOX_CODE,
           },
         );
+
         updateSwapsTransactions(
           transactionMeta,
           approvalTransactionMetaId,
           newSwapsTransactions,
         );
+
         setRecipient(selectedAddress);
         await addTokenToAssetsController(destinationToken);
         await addTokenToAssetsController(sourceToken);
@@ -990,7 +994,7 @@ function SwapsQuotesView({
             16,
           ).toString(10),
         };
-        if (isHardwareAddress) {
+        if (isHardwareAddress || shouldUseSmartTransaction) {
           TransactionController.hub.once(
             `${transactionMeta.id}:confirmed`,
             (transactionMeta) => {
@@ -1019,6 +1023,7 @@ function SwapsQuotesView({
       selectedAddress,
       setRecipient,
       resetTransaction,
+      shouldUseSmartTransaction,
     ],
   );
 
@@ -1032,6 +1037,7 @@ function SwapsQuotesView({
     startSwapAnalytics(selectedQuote, selectedAddress);
 
     const { TransactionController } = Engine.context;
+
     const newSwapsTransactions =
       TransactionController.state.swapsTransactions || {};
     let approvalTransactionMetaId;
@@ -1050,12 +1056,17 @@ function SwapsQuotesView({
       }
     }
 
-    handleSwapTransaction(
-      TransactionController,
-      newSwapsTransactions,
-      approvalTransactionMetaId,
-      isHardwareAddress,
-    );
+    if (
+      !shouldUseSmartTransaction ||
+      (shouldUseSmartTransaction && !approvalTransaction)
+    ) {
+      handleSwapTransaction(
+        TransactionController,
+        newSwapsTransactions,
+        approvalTransactionMetaId,
+        isHardwareAddress,
+      );
+    }
 
     navigation.dangerouslyGetParent()?.pop();
   }, [
@@ -1066,6 +1077,7 @@ function SwapsQuotesView({
     handleApprovaltransaction,
     handleSwapTransaction,
     navigation,
+    shouldUseSmartTransaction,
   ]);
 
   const onEditQuoteTransactionsGas = useCallback(() => {
@@ -2299,6 +2311,7 @@ SwapsQuotesView.propTypes = {
   usedCustomGas: PropTypes.object,
   setRecipient: PropTypes.func,
   resetTransaction: PropTypes.func,
+  shouldUseSmartTransaction: PropTypes.bool,
 };
 
 const mapStateToProps = (state) => ({
@@ -2331,6 +2344,7 @@ const mapStateToProps = (state) => ({
   usedCustomGas: state.engine.backgroundState.SwapsController.usedCustomGas,
   primaryCurrency: state.settings.primaryCurrency,
   swapsTokens: swapsTokensSelector(state),
+  shouldUseSmartTransaction: selectShouldUseSmartTransaction(state),
 });
 
 const mapDispatchToProps = (dispatch) => ({