+
+ }
+ >
+ {displayedStatusKey === TRANSACTION_GROUP_STATUSES.PENDING &&
+ showCancelSwapLink && (
+
+ {
+ e?.preventDefault();
+ dispatch(cancelSwapsSmartTransaction(smartTransaction.uuid));
+ setCancelSwapLinkClicked(true);
+ }}
+ />
+
+ )}
+
+
+ );
+}
+
+SmartTransactionListItem.propTypes = {
+ smartTransaction: PropTypes.object.isRequired,
+ isEarliestNonce: PropTypes.bool,
+};
diff --git a/ui/components/app/transaction-list/transaction-list.component.js b/ui/components/app/transaction-list/transaction-list.component.js
index 2660be340..8a21da314 100644
--- a/ui/components/app/transaction-list/transaction-list.component.js
+++ b/ui/components/app/transaction-list/transaction-list.component.js
@@ -8,6 +8,7 @@ import {
import { getCurrentChainId } from '../../../selectors';
import { useI18nContext } from '../../../hooks/useI18nContext';
import TransactionListItem from '../transaction-list-item';
+import SmartTransactionListItem from '../transaction-list-item/smart-transaction-list-item.component';
import Button from '../../ui/button';
import { TOKEN_CATEGORY_HASH } from '../../../helpers/constants/transactions';
import { SWAPS_CHAINID_CONTRACT_ADDRESS_MAP } from '../../../../shared/constants/swaps';
@@ -114,38 +115,53 @@ export default function TransactionList({
[],
);
- const pendingLength = pendingTransactions.length;
-
return (
- {pendingLength > 0 && (
+ {pendingTransactions.length > 0 && (
{`${t('queue')} (${pendingTransactions.length})`}
- {pendingTransactions.map((transactionGroup, index) => (
-
- {pendingLength > 0 ? (
+ {pendingTransactions.length > 0 ? (
{t('history')}
) : null}
{completedTransactions.length > 0 ? (
completedTransactions
.slice(0, limit)
- .map((transactionGroup, index) => (
-
diff --git a/ui/ducks/app/app.js b/ui/ducks/app/app.js
index cc43bf999..228b3eb5b 100644
--- a/ui/ducks/app/app.js
+++ b/ui/ducks/app/app.js
@@ -52,6 +52,8 @@ export default function reduceApp(state = {}, action) {
testKey: null,
},
gasLoadingAnimationIsShowing: false,
+ smartTransactionsError: null,
+ smartTransactionsErrorMessageDismissed: false,
ledgerWebHidConnectedStatus: WEBHID_CONNECTED_STATUSES.UNKNOWN,
ledgerTransportStatus: TRANSPORT_STATES.NONE,
newNetworkAdded: '',
@@ -96,6 +98,19 @@ export default function reduceApp(state = {}, action) {
qrCodeData: action.value,
};
+ // Smart Transactions errors.
+ case actionConstants.SET_SMART_TRANSACTIONS_ERROR:
+ return {
+ ...appState,
+ smartTransactionsError: action.payload,
+ };
+
+ case actionConstants.DISMISS_SMART_TRANSACTIONS_ERROR_MESSAGE:
+ return {
+ ...appState,
+ smartTransactionsErrorMessageDismissed: true,
+ };
+
// modal methods:
case actionConstants.MODAL_OPEN: {
const { name, ...modalProps } = action.payload;
diff --git a/ui/ducks/app/app.test.js b/ui/ducks/app/app.test.js
index f920cb91b..e52aebf0f 100644
--- a/ui/ducks/app/app.test.js
+++ b/ui/ducks/app/app.test.js
@@ -329,4 +329,12 @@ describe('App State', () => {
expect(state.isMouseUser).toStrictEqual(true);
});
+
+ it('smart transactions - SET_SMART_TRANSACTIONS_ERROR', () => {
+ const state = reduceApp(metamaskState, {
+ type: actions.SET_SMART_TRANSACTIONS_ERROR,
+ payload: 'Server Side Error',
+ });
+ expect(state.smartTransactionsError).toStrictEqual('Server Side Error');
+ });
});
diff --git a/ui/ducks/swaps/swaps.js b/ui/ducks/swaps/swaps.js
index 7ad50192f..84d26b2a2 100644
--- a/ui/ducks/swaps/swaps.js
+++ b/ui/ducks/swaps/swaps.js
@@ -21,9 +21,17 @@ import {
updateTransaction,
resetBackgroundSwapsState,
setSwapsLiveness,
+ setSwapsFeatureFlags,
setSelectedQuoteAggId,
setSwapsTxGasLimit,
cancelTx,
+ fetchSmartTransactionsLiveness,
+ signAndSendSmartTransaction,
+ updateSmartTransaction,
+ setSmartTransactionsRefreshInterval,
+ fetchSmartTransactionFees,
+ estimateSmartTransactionsGas,
+ cancelSmartTransaction,
} from '../../store/actions';
import {
AWAITING_SIGNATURES_ROUTE,
@@ -32,12 +40,15 @@ import {
LOADING_QUOTES_ROUTE,
SWAPS_ERROR_ROUTE,
SWAPS_MAINTENANCE_ROUTE,
+ SMART_TRANSACTION_STATUS_ROUTE,
} from '../../helpers/constants/routes';
import {
fetchSwapsFeatureFlags,
fetchSwapsGasPrices,
isContractAddressValid,
getSwapsLivenessForNetwork,
+ parseSmartTransactionsError,
+ stxErrorTypes,
} from '../../pages/swaps/swaps.util';
import { calcGasTotal } from '../../pages/send/send.utils';
import {
@@ -65,8 +76,12 @@ import {
CONTRACT_DATA_DISABLED_ERROR,
SWAP_FAILED_ERROR,
SWAPS_FETCH_ORDER_CONFLICT,
+ ALLOWED_SMART_TRANSACTIONS_CHAIN_IDS,
} from '../../../shared/constants/swaps';
-import { TRANSACTION_TYPES } from '../../../shared/constants/transaction';
+import {
+ TRANSACTION_TYPES,
+ SMART_TRANSACTION_STATUSES,
+} from '../../../shared/constants/transaction';
import { getGasFeeEstimates } from '../metamask/metamask';
const GAS_PRICES_LOADING_STATES = {
@@ -100,6 +115,9 @@ const initialState = {
priceEstimates: {},
fallBackPrice: null,
},
+ currentSmartTransactionsError: '',
+ currentSmartTransactionsErrorMessageDismissed: false,
+ swapsSTXLoading: false,
};
const slice = createSlice({
@@ -179,6 +197,18 @@ const slice = createSlice({
retrievedFallbackSwapsGasPrice: (state, action) => {
state.customGas.fallBackPrice = action.payload;
},
+ setCurrentSmartTransactionsError: (state, action) => {
+ const errorType = stxErrorTypes.includes(action.payload)
+ ? action.payload
+ : stxErrorTypes[0];
+ state.currentSmartTransactionsError = errorType;
+ },
+ dismissCurrentSmartTransactionsErrorMessage: (state) => {
+ state.currentSmartTransactionsErrorMessageDismissed = true;
+ },
+ setSwapsSTXSubmitLoading: (state, action) => {
+ state.swapsSTXLoading = action.payload || false;
+ },
},
});
@@ -202,6 +232,8 @@ export const getFromTokenInputValue = (state) =>
export const getIsFeatureFlagLoaded = (state) =>
state.swaps.isFeatureFlagLoaded;
+export const getSwapsSTXLoading = (state) => state.swaps.swapsSTXLoading;
+
export const getMaxSlippage = (state) => state.swaps.maxSlippage;
export const getTopAssets = (state) => state.swaps.topAssets;
@@ -234,6 +266,12 @@ export const getSwapGasPriceEstimateData = (state) =>
export const getSwapsFallbackGasPrice = (state) =>
state.swaps.customGas.fallBackPrice;
+export const getCurrentSmartTransactionsError = (state) =>
+ state.swaps.currentSmartTransactionsError;
+
+export const getCurrentSmartTransactionsErrorMessageDismissed = (state) =>
+ state.swaps.currentSmartTransactionsErrorMessageDismissed;
+
export function shouldShowCustomPriceTooLowWarning(state) {
const { average } = getSwapGasPriceEstimateData(state);
@@ -263,6 +301,37 @@ const getSwapsState = (state) => state.metamask.swapsState;
export const getSwapsFeatureIsLive = (state) =>
state.metamask.swapsState.swapsFeatureIsLive;
+export const getSmartTransactionsError = (state) =>
+ state.appState.smartTransactionsError;
+
+export const getSmartTransactionsErrorMessageDismissed = (state) =>
+ state.appState.smartTransactionsErrorMessageDismissed;
+
+export const getSmartTransactionsEnabled = (state) => {
+ const hardwareWalletUsed = isHardwareWallet(state);
+ const chainId = getCurrentChainId(state);
+ const isAllowedNetwork = ALLOWED_SMART_TRANSACTIONS_CHAIN_IDS.includes(
+ chainId,
+ );
+ const smartTransactionsFeatureFlagEnabled =
+ state.metamask.swapsState?.swapsFeatureFlags?.smartTransactions
+ ?.extensionActive;
+ const smartTransactionsLiveness =
+ state.metamask.smartTransactionsState?.liveness;
+ return Boolean(
+ isAllowedNetwork &&
+ !hardwareWalletUsed &&
+ smartTransactionsFeatureFlagEnabled &&
+ smartTransactionsLiveness,
+ );
+};
+
+export const getCurrentSmartTransactionsEnabled = (state) => {
+ const smartTransactionsEnabled = getSmartTransactionsEnabled(state);
+ const currentSmartTransactionsError = getCurrentSmartTransactionsError(state);
+ return smartTransactionsEnabled && !currentSmartTransactionsError;
+};
+
export const getSwapsQuoteRefreshTime = (state) =>
state.metamask.swapsState.swapsQuoteRefreshTime;
@@ -342,6 +411,51 @@ export const getApproveTxParams = (state) => {
return { ...approvalNeeded, gasPrice, data };
};
+export const getSmartTransactionsOptInStatus = (state) => {
+ return state.metamask.smartTransactionsState?.userOptIn;
+};
+
+export const getCurrentSmartTransactions = (state) => {
+ return state.metamask.smartTransactionsState?.smartTransactions?.[
+ getCurrentChainId(state)
+ ];
+};
+
+export const getPendingSmartTransactions = (state) => {
+ const currentSmartTransactions = getCurrentSmartTransactions(state);
+ if (!currentSmartTransactions || currentSmartTransactions.length === 0) {
+ return [];
+ }
+ return currentSmartTransactions.filter(
+ (stx) => stx.status === SMART_TRANSACTION_STATUSES.PENDING,
+ );
+};
+
+export const getSmartTransactionFees = (state) => {
+ return state.metamask.smartTransactionsState?.fees;
+};
+
+export const getSmartTransactionEstimatedGas = (state) => {
+ return state.metamask.smartTransactionsState?.estimatedGas;
+};
+
+export const getSwapsRefreshStates = (state) => {
+ const {
+ swapsQuoteRefreshTime,
+ swapsQuotePrefetchingRefreshTime,
+ swapsStxGetTransactionsRefreshTime,
+ swapsStxBatchStatusRefreshTime,
+ swapsStxStatusDeadline,
+ } = state.metamask.swapsState;
+ return {
+ quoteRefreshTime: swapsQuoteRefreshTime,
+ quotePrefetchingRefreshTime: swapsQuotePrefetchingRefreshTime,
+ stxGetTransactionsRefreshTime: swapsStxGetTransactionsRefreshTime,
+ stxBatchStatusRefreshTime: swapsStxBatchStatusRefreshTime,
+ stxStatusDeadline: swapsStxStatusDeadline,
+ };
+};
+
// Actions / action-creators
const {
@@ -367,10 +481,14 @@ const {
swapCustomGasModalLimitEdited,
retrievedFallbackSwapsGasPrice,
swapCustomGasModalClosed,
+ setCurrentSmartTransactionsError,
+ dismissCurrentSmartTransactionsErrorMessage,
+ setSwapsSTXSubmitLoading,
} = actions;
export {
clearSwapsState,
+ dismissCurrentSmartTransactionsErrorMessage,
setAggregatorMetadata,
setBalanceError,
setFetchingQuotes,
@@ -430,19 +548,27 @@ export const fetchAndSetSwapsGasPriceInfo = () => {
};
};
-export const fetchSwapsLiveness = () => {
+export const fetchSwapsLivenessAndFeatureFlags = () => {
return async (dispatch, getState) => {
let swapsLivenessForNetwork = {
swapsFeatureIsLive: false,
};
+ const chainId = getCurrentChainId(getState());
try {
const swapsFeatureFlags = await fetchSwapsFeatureFlags();
+ await dispatch(setSwapsFeatureFlags(swapsFeatureFlags));
+ if (ALLOWED_SMART_TRANSACTIONS_CHAIN_IDS.includes(chainId)) {
+ await dispatch(fetchSmartTransactionsLiveness());
+ }
swapsLivenessForNetwork = getSwapsLivenessForNetwork(
swapsFeatureFlags,
- getCurrentChainId(getState()),
+ chainId,
);
} catch (error) {
- log.error('Failed to fetch Swaps liveness, defaulting to false.', error);
+ log.error(
+ 'Failed to fetch Swaps feature flags and Swaps liveness, defaulting to false.',
+ error,
+ );
}
await dispatch(setSwapsLiveness(swapsLivenessForNetwork));
dispatch(setIsFeatureFlagLoaded(true));
@@ -565,6 +691,11 @@ export const fetchQuotesAndSetQuoteState = (
const networkAndAccountSupports1559 = checkNetworkAndAccountSupports1559(
state,
);
+ const smartTransactionsOptInStatus = getSmartTransactionsOptInStatus(state);
+ const smartTransactionsEnabled = getSmartTransactionsEnabled(state);
+ const currentSmartTransactionsEnabled = getCurrentSmartTransactionsEnabled(
+ state,
+ );
metaMetricsEvent({
event: 'Quotes Requested',
category: 'swaps',
@@ -577,6 +708,9 @@ export const fetchQuotesAndSetQuoteState = (
custom_slippage: maxSlippage !== 2,
is_hardware_wallet: hardwareWalletUsed,
hardware_wallet_type: hardwareWalletType,
+ stx_enabled: smartTransactionsEnabled,
+ current_stx_enabled: currentSmartTransactionsEnabled,
+ stx_user_opt_in: smartTransactionsOptInStatus,
anonymizedData: true,
},
});
@@ -628,6 +762,9 @@ export const fetchQuotesAndSetQuoteState = (
custom_slippage: maxSlippage !== 2,
is_hardware_wallet: hardwareWalletUsed,
hardware_wallet_type: hardwareWalletType,
+ stx_enabled: smartTransactionsEnabled,
+ current_stx_enabled: currentSmartTransactionsEnabled,
+ stx_user_opt_in: smartTransactionsOptInStatus,
},
});
dispatch(setSwapsErrorKey(QUOTES_NOT_AVAILABLE_ERROR));
@@ -653,6 +790,9 @@ export const fetchQuotesAndSetQuoteState = (
available_quotes: Object.values(fetchedQuotes)?.length,
is_hardware_wallet: hardwareWalletUsed,
hardware_wallet_type: hardwareWalletType,
+ stx_enabled: smartTransactionsEnabled,
+ current_stx_enabled: currentSmartTransactionsEnabled,
+ stx_user_opt_in: smartTransactionsOptInStatus,
anonymizedData: true,
},
});
@@ -675,6 +815,153 @@ export const fetchQuotesAndSetQuoteState = (
};
};
+export const signAndSendSwapsSmartTransaction = ({
+ unsignedTransaction,
+ metaMetricsEvent,
+ history,
+}) => {
+ return async (dispatch, getState) => {
+ dispatch(setSwapsSTXSubmitLoading(true));
+ const state = getState();
+ const fetchParams = getFetchParams(state);
+ const { metaData, value: swapTokenValue, slippage } = fetchParams;
+ const { sourceTokenInfo = {}, destinationTokenInfo = {} } = metaData;
+ const usedQuote = getUsedQuote(state);
+ const swapsRefreshStates = getSwapsRefreshStates(state);
+ const chainId = getCurrentChainId(state);
+
+ dispatch(
+ setSmartTransactionsRefreshInterval(
+ swapsRefreshStates?.stxBatchStatusRefreshTime,
+ ),
+ );
+
+ const usedTradeTxParams = usedQuote.trade;
+
+ // update stx with data
+ const destinationValue = calcTokenAmount(
+ usedQuote.destinationAmount,
+ destinationTokenInfo.decimals || 18,
+ ).toPrecision(8);
+ const smartTransactionsOptInStatus = getSmartTransactionsOptInStatus(state);
+ const smartTransactionsEnabled = getSmartTransactionsEnabled(state);
+ const currentSmartTransactionsEnabled = getCurrentSmartTransactionsEnabled(
+ state,
+ );
+ const swapMetaData = {
+ token_from: sourceTokenInfo.symbol,
+ token_from_amount: String(swapTokenValue),
+ token_to: destinationTokenInfo.symbol,
+ token_to_amount: destinationValue,
+ slippage,
+ custom_slippage: slippage !== 2,
+ best_quote_source: getTopQuote(state)?.aggregator,
+ available_quotes: getQuotes(state)?.length,
+ other_quote_selected:
+ usedQuote.aggregator !== getTopQuote(state)?.aggregator,
+ other_quote_selected_source:
+ usedQuote.aggregator === getTopQuote(state)?.aggregator
+ ? ''
+ : usedQuote.aggregator,
+ average_savings: usedQuote.savings?.total,
+ performance_savings: usedQuote.savings?.performance,
+ fee_savings: usedQuote.savings?.fee,
+ median_metamask_fee: usedQuote.savings?.medianMetaMaskFee,
+ stx_enabled: smartTransactionsEnabled,
+ current_stx_enabled: currentSmartTransactionsEnabled,
+ stx_user_opt_in: smartTransactionsOptInStatus,
+ };
+ metaMetricsEvent({
+ event: 'STX Swap Started',
+ category: 'swaps',
+ sensitiveProperties: swapMetaData,
+ });
+
+ if (!isContractAddressValid(usedTradeTxParams.to, chainId)) {
+ captureMessage('Invalid contract address', {
+ extra: {
+ token_from: swapMetaData.token_from,
+ token_to: swapMetaData.token_to,
+ contract_address: usedTradeTxParams.to,
+ },
+ });
+ await dispatch(setSwapsErrorKey(SWAP_FAILED_ERROR));
+ history.push(SWAPS_ERROR_ROUTE);
+ return;
+ }
+
+ const approveTxParams = getApproveTxParams(state);
+ let approvalTxUuid;
+ try {
+ if (approveTxParams) {
+ const updatedApproveTxParams = {
+ ...approveTxParams,
+ value: '0x0',
+ };
+ const smartTransactionApprovalFees = await dispatch(
+ fetchSwapsSmartTransactionFees(updatedApproveTxParams),
+ );
+ updatedApproveTxParams.gas = `0x${decimalToHex(
+ smartTransactionApprovalFees?.gasLimit || 0,
+ )}`;
+ approvalTxUuid = await dispatch(
+ signAndSendSmartTransaction({
+ unsignedTransaction: updatedApproveTxParams,
+ smartTransactionFees: smartTransactionApprovalFees,
+ }),
+ );
+ }
+
+ const smartTransactionFees = await dispatch(
+ fetchSwapsSmartTransactionFees(unsignedTransaction),
+ );
+ const uuid = await dispatch(
+ signAndSendSmartTransaction({
+ unsignedTransaction,
+ smartTransactionFees,
+ }),
+ );
+
+ const destinationTokenAddress = destinationTokenInfo.address;
+ const destinationTokenDecimals = destinationTokenInfo.decimals;
+ const destinationTokenSymbol = destinationTokenInfo.symbol;
+ const sourceTokenSymbol = sourceTokenInfo.symbol;
+ await dispatch(
+ updateSmartTransaction(uuid, {
+ origin: 'metamask',
+ destinationTokenAddress,
+ destinationTokenDecimals,
+ destinationTokenSymbol,
+ sourceTokenSymbol,
+ swapMetaData,
+ swapTokenValue,
+ type: TRANSACTION_TYPES.SWAP,
+ }),
+ );
+ if (approvalTxUuid) {
+ await dispatch(
+ updateSmartTransaction(approvalTxUuid, {
+ origin: 'metamask',
+ type: TRANSACTION_TYPES.SWAP_APPROVAL,
+ sourceTokenSymbol,
+ }),
+ );
+ }
+ history.push(SMART_TRANSACTION_STATUS_ROUTE);
+ dispatch(setSwapsSTXSubmitLoading(false));
+ } catch (e) {
+ console.log('signAndSendSwapsSmartTransaction error', e);
+ const {
+ swaps: { isFeatureFlagLoaded },
+ } = getState();
+ if (e.message.startsWith('Fetch error:') && isFeatureFlagLoaded) {
+ const errorObj = parseSmartTransactionsError(e.message);
+ dispatch(setCurrentSmartTransactionsError(errorObj?.type));
+ }
+ }
+ };
+};
+
export const signAndSendTransactions = (history, metaMetricsEvent) => {
return async (dispatch, getState) => {
const state = getState();
@@ -786,7 +1073,8 @@ export const signAndSendTransactions = (history, metaMetricsEvent) => {
conversionRate: usdConversionRate,
numberOfDecimals: 6,
});
-
+ const smartTransactionsOptInStatus = getSmartTransactionsOptInStatus(state);
+ const smartTransactionsEnabled = getSmartTransactionsEnabled(state);
const swapMetaData = {
token_from: sourceTokenInfo.symbol,
token_from_amount: String(swapTokenValue),
@@ -812,6 +1100,8 @@ export const signAndSendTransactions = (history, metaMetricsEvent) => {
median_metamask_fee: usedQuote.savings?.medianMetaMaskFee,
is_hardware_wallet: hardwareWalletUsed,
hardware_wallet_type: getHardwareWalletType(state),
+ stx_enabled: smartTransactionsEnabled,
+ stx_user_opt_in: smartTransactionsOptInStatus,
};
if (networkAndAccountSupports1559) {
swapMetaData.max_fee_per_gas = maxFeePerGas;
@@ -985,3 +1275,60 @@ export function fetchMetaSwapsGasPriceEstimates() {
return priceEstimates;
};
}
+
+export function fetchSwapsSmartTransactionFees(unsignedTransaction) {
+ return async (dispatch, getState) => {
+ const {
+ swaps: { isFeatureFlagLoaded },
+ } = getState();
+ try {
+ return await dispatch(fetchSmartTransactionFees(unsignedTransaction));
+ } catch (e) {
+ if (e.message.startsWith('Fetch error:') && isFeatureFlagLoaded) {
+ const errorObj = parseSmartTransactionsError(e.message);
+ dispatch(setCurrentSmartTransactionsError(errorObj?.type));
+ }
+ }
+ return null;
+ };
+}
+
+export function estimateSwapsSmartTransactionsGas(
+ unsignedTransaction,
+ approveTxParams,
+) {
+ return async (dispatch, getState) => {
+ const {
+ swaps: { isFeatureFlagLoaded, swapsSTXLoading },
+ } = getState();
+ if (swapsSTXLoading) {
+ return;
+ }
+ try {
+ await dispatch(
+ estimateSmartTransactionsGas(unsignedTransaction, approveTxParams),
+ );
+ } catch (e) {
+ if (e.message.startsWith('Fetch error:') && isFeatureFlagLoaded) {
+ const errorObj = parseSmartTransactionsError(e.message);
+ dispatch(setCurrentSmartTransactionsError(errorObj?.type));
+ }
+ }
+ };
+}
+
+export function cancelSwapsSmartTransaction(uuid) {
+ return async (dispatch, getState) => {
+ try {
+ await dispatch(cancelSmartTransaction(uuid));
+ } catch (e) {
+ const {
+ swaps: { isFeatureFlagLoaded },
+ } = getState();
+ if (e.message.startsWith('Fetch error:') && isFeatureFlagLoaded) {
+ const errorObj = parseSmartTransactionsError(e.message);
+ dispatch(setCurrentSmartTransactionsError(errorObj?.type));
+ }
+ }
+ };
+}
diff --git a/ui/ducks/swaps/swaps.test.js b/ui/ducks/swaps/swaps.test.js
index e766e484e..657ac1dab 100644
--- a/ui/ducks/swaps/swaps.test.js
+++ b/ui/ducks/swaps/swaps.test.js
@@ -1,12 +1,20 @@
import nock from 'nock';
import { MOCKS, createSwapsMockStore } from '../../../test/jest';
-import { setSwapsLiveness } from '../../store/actions';
+import { setSwapsLiveness, setSwapsFeatureFlags } from '../../store/actions';
import { setStorageItem } from '../../helpers/utils/storage-helpers';
+import {
+ MAINNET_CHAIN_ID,
+ RINKEBY_CHAIN_ID,
+ BSC_CHAIN_ID,
+ POLYGON_CHAIN_ID,
+} from '../../../shared/constants/network';
import * as swaps from './swaps';
jest.mock('../../store/actions.js', () => ({
setSwapsLiveness: jest.fn(),
+ setSwapsFeatureFlags: jest.fn(),
+ fetchSmartTransactionsLiveness: jest.fn(),
}));
const providerState = {
@@ -23,7 +31,7 @@ describe('Ducks - Swaps', () => {
nock.cleanAll();
});
- describe('fetchSwapsLiveness', () => {
+ describe('fetchSwapsLivenessAndFeatureFlags', () => {
const cleanFeatureFlagApiCache = () => {
setStorageItem(
'cachedFetch:https://api2.metaswap.codefi.network/featureFlags',
@@ -66,13 +74,14 @@ describe('Ducks - Swaps', () => {
const featureFlagApiNock = mockFeatureFlagsApiResponse({
featureFlagsResponse,
});
- const swapsLiveness = await swaps.fetchSwapsLiveness()(
+ const swapsLiveness = await swaps.fetchSwapsLivenessAndFeatureFlags()(
mockDispatch,
createGetState(),
);
expect(featureFlagApiNock.isDone()).toBe(true);
- expect(mockDispatch).toHaveBeenCalledTimes(2);
+ expect(mockDispatch).toHaveBeenCalledTimes(4);
expect(setSwapsLiveness).toHaveBeenCalledWith(expectedSwapsLiveness);
+ expect(setSwapsFeatureFlags).toHaveBeenCalledWith(featureFlagsResponse);
expect(swapsLiveness).toMatchObject(expectedSwapsLiveness);
});
@@ -86,13 +95,14 @@ describe('Ducks - Swaps', () => {
const featureFlagApiNock = mockFeatureFlagsApiResponse({
featureFlagsResponse,
});
- const swapsLiveness = await swaps.fetchSwapsLiveness()(
+ const swapsLiveness = await swaps.fetchSwapsLivenessAndFeatureFlags()(
mockDispatch,
createGetState(),
);
expect(featureFlagApiNock.isDone()).toBe(true);
- expect(mockDispatch).toHaveBeenCalledTimes(2);
+ expect(mockDispatch).toHaveBeenCalledTimes(4);
expect(setSwapsLiveness).toHaveBeenCalledWith(expectedSwapsLiveness);
+ expect(setSwapsFeatureFlags).toHaveBeenCalledWith(featureFlagsResponse);
expect(swapsLiveness).toMatchObject(expectedSwapsLiveness);
});
@@ -107,13 +117,14 @@ describe('Ducks - Swaps', () => {
const featureFlagApiNock = mockFeatureFlagsApiResponse({
featureFlagsResponse,
});
- const swapsLiveness = await swaps.fetchSwapsLiveness()(
+ const swapsLiveness = await swaps.fetchSwapsLivenessAndFeatureFlags()(
mockDispatch,
createGetState(),
);
expect(featureFlagApiNock.isDone()).toBe(true);
- expect(mockDispatch).toHaveBeenCalledTimes(2);
+ expect(mockDispatch).toHaveBeenCalledTimes(4);
expect(setSwapsLiveness).toHaveBeenCalledWith(expectedSwapsLiveness);
+ expect(setSwapsFeatureFlags).toHaveBeenCalledWith(featureFlagsResponse);
expect(swapsLiveness).toMatchObject(expectedSwapsLiveness);
});
@@ -125,7 +136,7 @@ describe('Ducks - Swaps', () => {
const featureFlagApiNock = mockFeatureFlagsApiResponse({
replyWithError: true,
});
- const swapsLiveness = await swaps.fetchSwapsLiveness()(
+ const swapsLiveness = await swaps.fetchSwapsLivenessAndFeatureFlags()(
mockDispatch,
createGetState(),
);
@@ -144,18 +155,22 @@ describe('Ducks - Swaps', () => {
const featureFlagApiNock = mockFeatureFlagsApiResponse({
featureFlagsResponse,
});
- await swaps.fetchSwapsLiveness()(mockDispatch, createGetState());
+ await swaps.fetchSwapsLivenessAndFeatureFlags()(
+ mockDispatch,
+ createGetState(),
+ );
expect(featureFlagApiNock.isDone()).toBe(true);
const featureFlagApiNock2 = mockFeatureFlagsApiResponse({
featureFlagsResponse,
});
- const swapsLiveness = await swaps.fetchSwapsLiveness()(
+ const swapsLiveness = await swaps.fetchSwapsLivenessAndFeatureFlags()(
mockDispatch,
createGetState(),
);
expect(featureFlagApiNock2.isDone()).toBe(false); // Second API call wasn't made, cache was used instead.
- expect(mockDispatch).toHaveBeenCalledTimes(4);
+ expect(mockDispatch).toHaveBeenCalledTimes(8);
expect(setSwapsLiveness).toHaveBeenCalledWith(expectedSwapsLiveness);
+ expect(setSwapsFeatureFlags).toHaveBeenCalledWith(featureFlagsResponse);
expect(swapsLiveness).toMatchObject(expectedSwapsLiveness);
});
});
@@ -221,4 +236,91 @@ describe('Ducks - Swaps', () => {
);
});
});
+
+ describe('getSmartTransactionsEnabled', () => {
+ it('returns true if feature flag is enabled, not a HW and is Ethereum network', () => {
+ const state = createSwapsMockStore();
+ expect(swaps.getSmartTransactionsEnabled(state)).toBe(true);
+ });
+
+ it('returns false if feature flag is disabled, not a HW and is Ethereum network', () => {
+ const state = createSwapsMockStore();
+ state.metamask.swapsState.swapsFeatureFlags.smartTransactions.extensionActive = false;
+ expect(swaps.getSmartTransactionsEnabled(state)).toBe(false);
+ });
+
+ it('returns false if feature flag is enabled, not a HW, STX liveness is false and is Ethereum network', () => {
+ const state = createSwapsMockStore();
+ state.metamask.smartTransactionsState.liveness = false;
+ expect(swaps.getSmartTransactionsEnabled(state)).toBe(false);
+ });
+
+ it('returns false if feature flag is enabled, is a HW and is Ethereum network', () => {
+ const state = createSwapsMockStore();
+ state.metamask.keyrings[0].type = 'Trezor Hardware';
+ expect(swaps.getSmartTransactionsEnabled(state)).toBe(false);
+ });
+
+ it('returns false if feature flag is enabled, not a HW and is Polygon network', () => {
+ const state = createSwapsMockStore();
+ state.metamask.provider.chainId = POLYGON_CHAIN_ID;
+ expect(swaps.getSmartTransactionsEnabled(state)).toBe(false);
+ });
+
+ it('returns false if feature flag is enabled, not a HW and is BSC network', () => {
+ const state = createSwapsMockStore();
+ state.metamask.provider.chainId = BSC_CHAIN_ID;
+ expect(swaps.getSmartTransactionsEnabled(state)).toBe(false);
+ });
+
+ it('returns true if feature flag is enabled, not a HW and is Rinkeby network', () => {
+ const state = createSwapsMockStore();
+ state.metamask.provider.chainId = RINKEBY_CHAIN_ID;
+ expect(swaps.getSmartTransactionsEnabled(state)).toBe(true);
+ });
+
+ it('returns false if feature flag is missing', () => {
+ const state = createSwapsMockStore();
+ state.metamask.swapsState.swapsFeatureFlags = {};
+ expect(swaps.getSmartTransactionsEnabled(state)).toBe(false);
+ });
+ });
+
+ describe('getSmartTransactionsOptInStatus', () => {
+ it('returns STX opt in status', () => {
+ const state = createSwapsMockStore();
+ expect(swaps.getSmartTransactionsOptInStatus(state)).toBe(true);
+ });
+ });
+
+ describe('getCurrentSmartTransactions', () => {
+ it('returns current smart transactions', () => {
+ const state = createSwapsMockStore();
+ expect(swaps.getCurrentSmartTransactions(state)).toMatchObject(
+ state.metamask.smartTransactionsState.smartTransactions[
+ MAINNET_CHAIN_ID
+ ],
+ );
+ });
+ });
+
+ describe('getPendingSmartTransactions', () => {
+ it('returns pending smart transactions', () => {
+ const state = createSwapsMockStore();
+ const pendingSmartTransactions = swaps.getPendingSmartTransactions(state);
+ expect(pendingSmartTransactions).toHaveLength(1);
+ expect(pendingSmartTransactions[0].uuid).toBe('uuid2');
+ expect(pendingSmartTransactions[0].status).toBe('pending');
+ });
+ });
+
+ describe('getSmartTransactionFees', () => {
+ it('returns unsigned transactions and estimates', () => {
+ const state = createSwapsMockStore();
+ const smartTransactionFees = swaps.getSmartTransactionFees(state);
+ expect(smartTransactionFees).toMatchObject(
+ state.metamask.smartTransactionsState.fees,
+ );
+ });
+ });
});
diff --git a/ui/helpers/constants/routes.js b/ui/helpers/constants/routes.js
index 6ddc4ba26..7fe043e3f 100644
--- a/ui/helpers/constants/routes.js
+++ b/ui/helpers/constants/routes.js
@@ -41,6 +41,7 @@ const BUILD_QUOTE_ROUTE = '/swaps/build-quote';
const VIEW_QUOTE_ROUTE = '/swaps/view-quote';
const LOADING_QUOTES_ROUTE = '/swaps/loading-quotes';
const AWAITING_SIGNATURES_ROUTE = '/swaps/awaiting-signatures';
+const SMART_TRANSACTION_STATUS_ROUTE = '/swaps/smart-transaction-status';
const AWAITING_SWAP_ROUTE = '/swaps/awaiting-swap';
const SWAPS_ERROR_ROUTE = '/swaps/swaps-error';
const SWAPS_MAINTENANCE_ROUTE = '/swaps/maintenance';
@@ -237,6 +238,7 @@ export {
AWAITING_SIGNATURES_ROUTE,
SWAPS_ERROR_ROUTE,
SWAPS_MAINTENANCE_ROUTE,
+ SMART_TRANSACTION_STATUS_ROUTE,
ADD_COLLECTIBLE_ROUTE,
ONBOARDING_ROUTE,
ONBOARDING_HELP_US_IMPROVE_ROUTE,
diff --git a/ui/helpers/constants/transactions.js b/ui/helpers/constants/transactions.js
index aeeda8bdf..b7f932054 100644
--- a/ui/helpers/constants/transactions.js
+++ b/ui/helpers/constants/transactions.js
@@ -7,6 +7,7 @@ export const PENDING_STATUS_HASH = {
[TRANSACTION_STATUSES.UNAPPROVED]: true,
[TRANSACTION_STATUSES.APPROVED]: true,
[TRANSACTION_STATUSES.SUBMITTED]: true,
+ [TRANSACTION_STATUSES.PENDING]: true,
};
export const PRIORITY_STATUS_HASH = {
diff --git a/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js b/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js
index e55a0867a..24cc9ab32 100644
--- a/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js
+++ b/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js
@@ -9,6 +9,8 @@ import {
getFetchParams,
getApproveTxParams,
prepareToLeaveSwaps,
+ getSmartTransactionsOptInStatus,
+ getSmartTransactionsEnabled,
} from '../../../ducks/swaps/swaps';
import {
isHardwareWallet,
@@ -41,6 +43,10 @@ export default function AwaitingSignatures() {
const approveTxParams = useSelector(getApproveTxParams, shallowEqual);
const hardwareWalletUsed = useSelector(isHardwareWallet);
const hardwareWalletType = useSelector(getHardwareWalletType);
+ const smartTransactionsOptInStatus = useSelector(
+ getSmartTransactionsOptInStatus,
+ );
+ const smartTransactionsEnabled = useSelector(getSmartTransactionsEnabled);
const needsTwoConfirmations = Boolean(approveTxParams);
const awaitingSignaturesEvent = useNewMetricEvent({
@@ -55,6 +61,8 @@ export default function AwaitingSignatures() {
custom_slippage: fetchParams?.slippage === 2,
is_hardware_wallet: hardwareWalletUsed,
hardware_wallet_type: hardwareWalletType,
+ stx_enabled: smartTransactionsEnabled,
+ stx_user_opt_in: smartTransactionsOptInStatus,
},
category: 'swaps',
});
diff --git a/ui/pages/swaps/awaiting-swap/awaiting-swap.js b/ui/pages/swaps/awaiting-swap/awaiting-swap.js
index 658ed7175..7f1ca51eb 100644
--- a/ui/pages/swaps/awaiting-swap/awaiting-swap.js
+++ b/ui/pages/swaps/awaiting-swap/awaiting-swap.js
@@ -28,6 +28,8 @@ import {
navigateBackToBuildQuote,
prepareForRetryGetQuotes,
prepareToLeaveSwaps,
+ getSmartTransactionsOptInStatus,
+ getSmartTransactionsEnabled,
getFromTokenInputValue,
getMaxSlippage,
} from '../../../ducks/swaps/swaps';
@@ -104,6 +106,10 @@ export default function AwaitingSwap({
const hardwareWalletUsed = useSelector(isHardwareWallet);
const hardwareWalletType = useSelector(getHardwareWalletType);
+ const smartTransactionsOptInStatus = useSelector(
+ getSmartTransactionsOptInStatus,
+ );
+ const smartTransactionsEnabled = useSelector(getSmartTransactionsEnabled);
const sensitiveProperties = {
token_from: sourceTokenInfo?.symbol,
token_from_amount: fetchParams?.value,
@@ -114,6 +120,8 @@ export default function AwaitingSwap({
gas_fees: feeinUnformattedFiat,
is_hardware_wallet: hardwareWalletUsed,
hardware_wallet_type: hardwareWalletType,
+ stx_enabled: smartTransactionsEnabled,
+ stx_user_opt_in: smartTransactionsOptInStatus,
};
const quotesExpiredEvent = useNewMetricEvent({
event: 'Quotes Timed Out',
diff --git a/ui/pages/swaps/build-quote/build-quote.js b/ui/pages/swaps/build-quote/build-quote.js
index 04fb4553a..363edd5e7 100644
--- a/ui/pages/swaps/build-quote/build-quote.js
+++ b/ui/pages/swaps/build-quote/build-quote.js
@@ -19,7 +19,18 @@ import DropdownSearchList from '../dropdown-search-list';
import SlippageButtons from '../slippage-buttons';
import { getTokens, getConversionRate } from '../../../ducks/metamask/metamask';
import InfoTooltip from '../../../components/ui/info-tooltip';
+import Popover from '../../../components/ui/popover';
+import Button from '../../../components/ui/button';
import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
+import Box from '../../../components/ui/box';
+import Typography from '../../../components/ui/typography';
+import {
+ TYPOGRAPHY,
+ DISPLAY,
+ FLEX_DIRECTION,
+ FONT_WEIGHT,
+ COLORS,
+} from '../../../helpers/constants/design-system';
import {
VIEW_QUOTE_ROUTE,
LOADING_QUOTES_ROUTE,
@@ -40,10 +51,14 @@ import {
setFromTokenError,
setMaxSlippage,
setReviewSwapClickedTimestamp,
+ getSmartTransactionsOptInStatus,
+ getSmartTransactionsEnabled,
+ getCurrentSmartTransactionsEnabled,
getFromTokenInputValue,
getFromTokenError,
getMaxSlippage,
getIsFeatureFlagLoaded,
+ getCurrentSmartTransactionsError,
} from '../../../ducks/swaps/swaps';
import {
getSwapsDefaultToken,
@@ -53,6 +68,8 @@ import {
getRpcPrefsForCurrentProvider,
getUseTokenDetection,
getTokenList,
+ isHardwareWallet,
+ getHardwareWalletType,
} from '../../../selectors';
import {
@@ -84,6 +101,7 @@ import {
setBackgroundSwapRouteState,
clearSwapsQuotes,
stopPollingForQuotes,
+ setSmartTransactionsOptInStatus,
} from '../../../store/actions';
import {
countDecimals,
@@ -140,8 +158,33 @@ export default function BuildQuote({
const tokenConversionRates = useSelector(getTokenExchangeRates, isEqual);
const conversionRate = useSelector(getConversionRate);
+ const hardwareWalletUsed = useSelector(isHardwareWallet);
+ const hardwareWalletType = useSelector(getHardwareWalletType);
+ const smartTransactionsOptInStatus = useSelector(
+ getSmartTransactionsOptInStatus,
+ );
+ const smartTransactionsEnabled = useSelector(getSmartTransactionsEnabled);
+ const currentSmartTransactionsEnabled = useSelector(
+ getCurrentSmartTransactionsEnabled,
+ );
+ const smartTransactionsOptInPopoverDisplayed =
+ smartTransactionsOptInStatus !== undefined;
+ const currentSmartTransactionsError = useSelector(
+ getCurrentSmartTransactionsError,
+ );
const currentCurrency = useSelector(getCurrentCurrency);
+ const showSmartTransactionsOptInPopover =
+ smartTransactionsEnabled && !smartTransactionsOptInPopoverDisplayed;
+
+ const onCloseSmartTransactionsOptInPopover = (e) => {
+ e?.preventDefault();
+ setSmartTransactionsOptInStatus(false);
+ };
+
+ const onEnableSmartTransactionsClick = () =>
+ setSmartTransactionsOptInStatus(true);
+
const fetchParamsFromToken = isSwapsDefaultTokenSymbol(
sourceTokenInfo?.symbol,
chainId,
@@ -402,10 +445,23 @@ export default function BuildQuote({
fromTokenBalance,
]);
+ const buildQuotePageLoadedEvent = useNewMetricEvent({
+ event: 'Build Quote Page Loaded',
+ category: 'swaps',
+ sensitiveProperties: {
+ is_hardware_wallet: hardwareWalletUsed,
+ hardware_wallet_type: hardwareWalletType,
+ stx_enabled: smartTransactionsEnabled,
+ current_stx_enabled: currentSmartTransactionsEnabled,
+ stx_user_opt_in: smartTransactionsOptInStatus,
+ },
+ });
+
useEffect(() => {
dispatch(resetSwapsPostFetchState());
dispatch(setReviewSwapClickedTimestamp());
- }, [dispatch]);
+ buildQuotePageLoadedEvent();
+ }, [dispatch, buildQuotePageLoadedEvent]);
const BlockExplorerLink = () => {
return (
@@ -493,11 +549,87 @@ export default function BuildQuote({
fromTokenInputValue,
fromTokenAddress,
toTokenAddress,
+ smartTransactionsOptInStatus,
]);
return (
+ {showSmartTransactionsOptInPopover && (
+
+
+
+
+
+
+
+
+ }
+ footerClassName="smart-transactions-popover__footer"
+ className="smart-transactions-popover"
+ >
+
+
+ 
+
+
+ {t('stxDescription')}
+
+
+ {t('stxBenefit1')}
+ {t('stxBenefit2')}
+ {t('stxBenefit3')}
+ {t('stxBenefit4')}
+
+
+ {t('stxSubDescription')}
+
+ {t('stxYouCanOptOut')}
+
+
+
+
+ )}
)}
diff --git a/ui/pages/swaps/build-quote/index.scss b/ui/pages/swaps/build-quote/index.scss
index f8cb43258..b53754263 100644
--- a/ui/pages/swaps/build-quote/index.scss
+++ b/ui/pages/swaps/build-quote/index.scss
@@ -173,3 +173,41 @@
width: 100%;
}
}
+
+@keyframes slide-in {
+ 100% { transform: translateY(0%); }
+}
+
+.smart-transactions-popover {
+ transform: translateY(-100%);
+ animation: slide-in 0.5s forwards;
+
+ &__content {
+ flex-direction: column;
+
+ ul {
+ list-style: inside;
+ }
+
+ a {
+ color: var(--Blue-500);
+ cursor: pointer;
+ }
+ }
+
+ &__footer {
+ flex-direction: column;
+ flex: 1;
+ align-items: center;
+ border-top: 0;
+
+ button {
+ border-radius: 50px;
+ }
+
+ a {
+ font-size: inherit;
+ padding-bottom: 0;
+ }
+ }
+}
diff --git a/ui/pages/swaps/dropdown-search-list/dropdown-search-list.js b/ui/pages/swaps/dropdown-search-list/dropdown-search-list.js
index 110505551..c4759b578 100644
--- a/ui/pages/swaps/dropdown-search-list/dropdown-search-list.js
+++ b/ui/pages/swaps/dropdown-search-list/dropdown-search-list.js
@@ -24,6 +24,10 @@ import {
} from '../../../selectors/selectors';
import { SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP } from '../../../../shared/constants/swaps';
import { getURLHostName } from '../../../helpers/utils/util';
+import {
+ getSmartTransactionsOptInStatus,
+ getSmartTransactionsEnabled,
+} from '../../../ducks/swaps/swaps';
export default function DropdownSearchList({
searchListClassName,
@@ -55,6 +59,10 @@ export default function DropdownSearchList({
const hardwareWalletType = useSelector(getHardwareWalletType);
const chainId = useSelector(getCurrentChainId);
const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
+ const smartTransactionsOptInStatus = useSelector(
+ getSmartTransactionsOptInStatus,
+ );
+ const smartTransactionsEnabled = useSelector(getSmartTransactionsEnabled);
const tokenImportedEvent = useNewMetricEvent({
event: 'Token Imported',
@@ -64,6 +72,8 @@ export default function DropdownSearchList({
chain_id: chainId,
is_hardware_wallet: hardwareWalletUsed,
hardware_wallet_type: hardwareWalletType,
+ stx_enabled: smartTransactionsEnabled,
+ stx_user_opt_in: smartTransactionsOptInStatus,
},
category: 'swaps',
});
diff --git a/ui/pages/swaps/fee-card/fee-card.js b/ui/pages/swaps/fee-card/fee-card.js
index c7638893c..625ea6cbd 100644
--- a/ui/pages/swaps/fee-card/fee-card.js
+++ b/ui/pages/swaps/fee-card/fee-card.js
@@ -35,6 +35,8 @@ export default function FeeCard({
numberOfQuotes,
onQuotesClick,
chainId,
+ smartTransactionsOptInStatus,
+ smartTransactionsEnabled,
isBestQuote,
supportsEIP1559V2 = false,
}) {
@@ -74,11 +76,15 @@ export default function FeeCard({
{
+ if (
+ pendingSmartTransactions.length > 0 &&
+ routeState === 'smartTransactionStatus'
+ ) {
+ return (
+ {
+ return {
const t = useContext(I18nContext);
return (
@@ -55,19 +56,21 @@ const QuoteDetails = ({
{` ${destinationTokenSymbol}`}
-
+ {t('swapSwapFrom')}
{!isSwapsDefaultTokenSymbol(fromTokenSymbol, chainId) && (
@@ -683,6 +815,10 @@ export default function BuildQuote({
}}
maxAllowedSlippage={MAX_ALLOWED_SLIPPAGE}
currentSlippage={maxSlippage}
+ smartTransactionsEnabled={smartTransactionsEnabled}
+ smartTransactionsOptInStatus={smartTransactionsOptInStatus}
+ setSmartTransactionsOptInStatus={setSmartTransactionsOptInStatus}
+ currentSmartTransactionsError={currentSmartTransactionsError}
/>
@@ -286,10 +341,60 @@ export default function Swap() {
history.push(DEFAULT_ROUTE);
}}
>
- {!isAwaitingSwapRoute && !isAwaitingSignaturesRoute && t('cancel')}
+ {!isAwaitingSwapRoute &&
+ !isAwaitingSignaturesRoute &&
+ !isSmartTransactionStatusRoute &&
+ t('cancel')}
+ {showSmartTransactionsErrorMessage && (
+
+ {t('swapApproveNeedMoreTokensSmartTransactions', [
+ defaultSwapsToken.symbol,
+ ])}{' '}
+
+ dispatch(dismissCurrentSmartTransactionsErrorMessage())
+ }
+ style={{
+ textDecoration: 'underline',
+ cursor: 'pointer',
+ }}
+ >
+ {t('stxTryRegular')}
+
+
+ ) : (
+
+
+ )
+ }
+ className={
+ isStxNotEnoughFundsError
+ ? 'swaps__error-message'
+ : 'actionable-message--left-aligned actionable-message--warning swaps__error-message'
+ }
+ primaryAction={
+ isStxNotEnoughFundsError
+ ? null
+ : {
+ label: t('dismiss'),
+ onClick: () =>
+ dispatch(dismissCurrentSmartTransactionsErrorMessage()),
+ }
+ }
+ withRightButton
+ />
+ )}
+ {t('stxUnavailable')}
+
+ {t('stxFallbackToNormal')}
+
-
- {t('swapEstimatedNetworkFees')}
-
-
- {feeInEth}
- {` (${networkFees})`}
+ {!hideEstimatedGasFee && (
+
+ )}
+
-
+ {t('swapEstimatedNetworkFees')}
+
+
+ {feeInEth}
+ {` (${networkFees})`}
+
{t('swapSource')}
@@ -105,6 +108,7 @@ QuoteDetails.propTypes = {
feeInEth: PropTypes.string.isRequired,
networkFees: PropTypes.string.isRequired,
metaMaskFee: PropTypes.number.isRequired,
+ hideEstimatedGasFee: PropTypes.bool,
};
export default QuoteDetails;
diff --git a/ui/pages/swaps/select-quote-popover/select-quote-popover.js b/ui/pages/swaps/select-quote-popover/select-quote-popover.js
index c4f9e8977..1b19bfecb 100644
--- a/ui/pages/swaps/select-quote-popover/select-quote-popover.js
+++ b/ui/pages/swaps/select-quote-popover/select-quote-popover.js
@@ -14,6 +14,7 @@ const SelectQuotePopover = ({
swapToSymbol,
initialAggId,
onQuoteDetailsIsOpened,
+ hideEstimatedGasFee,
}) => {
const t = useContext(I18nContext);
@@ -105,10 +106,14 @@ const SelectQuotePopover = ({
setSortDirection={setSortDirection}
sortColumn={sortColumn}
setSortColumn={setSortColumn}
+ hideEstimatedGasFee={hideEstimatedGasFee}
/>
)}
{contentView === 'quoteDetails' && viewingAgg && (
-
@@ -123,6 +128,7 @@ SelectQuotePopover.propTypes = {
quoteDataRows: PropTypes.arrayOf(QUOTE_DATA_ROWS_PROPTYPES_SHAPE),
initialAggId: PropTypes.string,
onQuoteDetailsIsOpened: PropTypes.func,
+ hideEstimatedGasFee: PropTypes.bool.isRequired,
};
export default SelectQuotePopover;
diff --git a/ui/pages/swaps/select-quote-popover/sort-list/sort-list.js b/ui/pages/swaps/select-quote-popover/sort-list/sort-list.js
index df952cad0..58064e365 100644
--- a/ui/pages/swaps/select-quote-popover/sort-list/sort-list.js
+++ b/ui/pages/swaps/select-quote-popover/sort-list/sort-list.js
@@ -32,6 +32,7 @@ export default function SortList({
setSortDirection,
sortColumn = null,
setSortColumn,
+ hideEstimatedGasFee,
}) {
const t = useContext(I18nContext);
const [noRowHover, setRowNowHover] = useState(false);
@@ -97,12 +98,16 @@ export default function SortList({
className="select-quote-popover__column-header select-quote-popover__network-fees select-quote-popover__network-fees-header"
onClick={() => onColumnHeaderClick('rawNetworkFees')}
>
- {t('swapEstimatedNetworkFees')}
-
- {networkFees}
+ {!hideEstimatedGasFee && networkFees}
+
+
`;
exports[`SlippageButtons renders the component with initial props 2`] = `
@@ -18,16 +21,63 @@ exports[`SlippageButtons renders the component with initial props 2`] = `
role="radiogroup"
>
+
+
+
+`;
+
+exports[`SlippageButtons renders the component with the Smart Transaction opt-in button available 1`] = `
+
+`;
+
+exports[`SlippageButtons renders the component with the Smart Transaction opt-in button available 2`] = `
+