Show how much a cancellation of a smart transaction will cost (#15011)

app/_locales/de/messages.json

@@ -466,9 +466,6 @@
     "message": "Für eine Transaktion im Wert von $1 muss die Gasgebühr um mindestens 10 % erhöht werden, damit sie vom Netz erkannt wird.",
     "description": "$1 is string 'cancel' or 'speed up'"
   },
-  "cancelSwap": {
-    "message": "Swap abbrechen"
-  },
   "cancellationGasFee": {
     "message": "Stornierungs-Gasgebühr"
   },

app/_locales/el/messages.json

@@ -466,9 +466,6 @@
     "message": "Για να $1 τη συναλλαγή, τα τέλη συναλλαγής πρέπει να αυξηθούν κατά τουλάχιστον 10% ώστε να αναγνωριστούν από το δίκτυο.",
     "description": "$1 is string 'cancel' or 'speed up'"
   },
-  "cancelSwap": {
-    "message": "Ακύρωση ανταλλαγής"
-  },
   "cancellationGasFee": {
     "message": "Ακύρωση Χρέωσης Αερίου"
   },

app/_locales/en/messages.json

@@ -466,8 +466,12 @@
     "message": "To $1 a transaction the gas fee must be increased by at least 10% for it to be recognized by the network.",
     "description": "$1 is string 'cancel' or 'speed up'"
   },
-  "cancelSwap": {
-    "message": "Cancel swap"
+  "cancelSwapForFee": {
+    "message": "Cancel swap for ~$1",
+    "description": "$1 could be e.g. $2.98, it is a cost for cancelling a Smart Transaction"
+  },
+  "cancelSwapForFree": {
+    "message": "Cancel swap for free"
   },
   "cancellationGasFee": {
     "message": "Cancellation Gas Fee"

app/_locales/es/messages.json

@@ -466,9 +466,6 @@
     "message": "Para $1 una transacción, la tarifa de gas debe aumentar al menos un 10% para que sea reconocida por la red.",
     "description": "$1 is string 'cancel' or 'speed up'"
   },
-  "cancelSwap": {
-    "message": "Cancelar swap"
-  },
   "cancellationGasFee": {
     "message": "Cuota de gas por cancelación"
   },

app/_locales/fr/messages.json

@@ -466,9 +466,6 @@
     "message": "Pour $1 la transaction, les gas fees doivent être augmentés d’au moins 10 % pour être reconnus par le réseau.",
     "description": "$1 is string 'cancel' or 'speed up'"
   },
-  "cancelSwap": {
-    "message": "Annuler le swap"
-  },
   "cancellationGasFee": {
     "message": "Frais d’annulation de carburant"
   },

app/_locales/hi/messages.json

@@ -466,9 +466,6 @@
     "message": "किसी लेनदेन को $1 करने के लिए गैस शुल्क में कम से कम 10% की वृद्धि की जानी चाहिए ताकि उसे नेटवर्क द्वारा मान्यता मिल सके।",
     "description": "$1 is string 'cancel' or 'speed up'"
   },
-  "cancelSwap": {
-    "message": "स्वैप रद्द करें"
-  },
   "cancellationGasFee": {
     "message": "रद्दीकरण गैस शुल्क"
   },

app/_locales/id/messages.json

@@ -466,9 +466,6 @@
     "message": "Untuk $1 suatu transaksi, biaya gas harus dinaikkan minimal 10% agar dapat dikenali oleh jaringan.",
     "description": "$1 is string 'cancel' or 'speed up'"
   },
-  "cancelSwap": {
-    "message": "Batalkan pertukaran"
-  },
   "cancellationGasFee": {
     "message": "Biaya Pembatalan Gas"
   },

app/_locales/ja/messages.json

@@ -466,9 +466,6 @@
     "message": "トランザクションを$1するには、ネットワークに認識されるようにガス代を 10% 以上増額する必要があります。",
     "description": "$1 is string 'cancel' or 'speed up'"
   },
-  "cancelSwap": {
-    "message": "スワップをキャンセル"
-  },
   "cancellationGasFee": {
     "message": "キャンセルのガス代"
   },

app/_locales/ko/messages.json

@@ -466,9 +466,6 @@
     "message": "거래를 $1하려면 가스비를 최소 10%를 인상해야 네트워크에서 인식될 수 있습니다.",
     "description": "$1 is string 'cancel' or 'speed up'"
   },
-  "cancelSwap": {
-    "message": "스왑 취소"
-  },
   "cancellationGasFee": {
     "message": "가스 수수료 취소"
   },

app/_locales/pt/messages.json

@@ -466,9 +466,6 @@
     "message": "Para $1 uma transação, a taxa de gás deve ser aumentada em pelo menos 10% para que seja reconhecida pela rede.",
     "description": "$1 is string 'cancel' or 'speed up'"
   },
-  "cancelSwap": {
-    "message": "Cancelar swap"
-  },
   "cancellationGasFee": {
     "message": "Taxa de gás por cancelamento"
   },

app/_locales/ru/messages.json

@@ -466,9 +466,6 @@
     "message": "Чтобы $1 транзакции плата за газ должна быть увеличена как минимум на 10%. Это позволит обеспечить прием транзакции сетью.",
     "description": "$1 is string 'cancel' or 'speed up'"
   },
-  "cancelSwap": {
-    "message": "Отменить обмен"
-  },
   "cancellationGasFee": {
     "message": "Плата за газ при отмене"
   },

app/_locales/tl/messages.json

@@ -466,9 +466,6 @@
     "message": "Sa $1 na transaksyon ang singil sa gas ay dapat tumaas nang hindi bababa sa 10% para ito ay makilala ng network.",
     "description": "$1 is string 'cancel' or 'speed up'"
   },
-  "cancelSwap": {
-    "message": "Kanselahin ang pagpapalit"
-  },
   "cancellationGasFee": {
     "message": "Bayarin sa Gasolina para sa Pagkansela"
   },

app/_locales/tr/messages.json

@@ -466,9 +466,6 @@
     "message": "İşlemi $1 için, gaz ücretinin ağ tarafından tanınması amacıyla en az %10 oranında artırılması gerekir.",
     "description": "$1 is string 'cancel' or 'speed up'"
   },
-  "cancelSwap": {
-    "message": "Takası iptal et"
-  },
   "cancellationGasFee": {
     "message": "İptal İşlemi Gaz Ücreti"
   },

app/_locales/vi/messages.json

@@ -466,9 +466,6 @@
     "message": "Để $1 một giao dịch, phí gas phải tăng tối thiểu 10% để mạng nhận ra giao dịch này.",
     "description": "$1 is string 'cancel' or 'speed up'"
   },
-  "cancelSwap": {
-    "message": "Hủy hoán đổi"
-  },
   "cancellationGasFee": {
     "message": "Phí gas hủy"
   },

app/_locales/zh/messages.json

@@ -466,9 +466,6 @@
     "message": "若要$1交易，燃料费用必须增加至少10%才能被网络认可。",
     "description": "$1 is string 'cancel' or 'speed up'"
   },
-  "cancelSwap": {
-    "message": "取消交换"
-  },
   "cancellationGasFee": {
     "message": "取消燃料费用"
   },

ui/pages/swaps/smart-transaction-status/smart-transaction-status.js

@@ -18,7 +18,12 @@ import {
 import {
   isHardwareWallet,
   getHardwareWalletType,
-} from '../../../selectors/selectors';
+  getCurrentChainId,
+  getUSDConversionRate,
+  conversionRateSelector,
+  getCurrentCurrency,
+} from '../../../selectors';
+import { getNativeCurrency } from '../../../ducks/metamask/metamask';
 import {
   DEFAULT_ROUTE,
   BUILD_QUOTE_ROUTE,
@@ -44,7 +49,10 @@ import { SMART_TRANSACTION_STATUSES } from '../../../../shared/constants/transac
 
 import SwapsFooter from '../swaps-footer';
 import { calcTokenAmount } from '../../../helpers/utils/token-util';
-import { showRemainingTimeInMinAndSec } from '../swaps.util';
+import {
+  showRemainingTimeInMinAndSec,
+  getFeeForSmartTransaction,
+} from '../swaps.util';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import SuccessIcon from './success-icon';
 import RevertedIcon from './reverted-icon';
@@ -76,9 +84,16 @@ export default function SmartTransactionStatus() {
   const currentSmartTransactionsEnabled = useSelector(
     getCurrentSmartTransactionsEnabled,
   );
+  const chainId = useSelector(getCurrentChainId);
+  const nativeCurrencySymbol = useSelector(getNativeCurrency);
+  const conversionRate = useSelector(conversionRateSelector);
+  const USDConversionRate = useSelector(getUSDConversionRate);
+  const currentCurrency = useSelector(getCurrentCurrency);
+
   let smartTransactionStatus = SMART_TRANSACTION_STATUSES.PENDING;
   let latestSmartTransaction = {};
   let latestSmartTransactionUuid;
+  let cancellationFeeWei;
 
   if (currentSmartTransactions && currentSmartTransactions.length > 0) {
     latestSmartTransaction =
@@ -86,6 +101,8 @@ export default function SmartTransactionStatus() {
     latestSmartTransactionUuid = latestSmartTransaction?.uuid;
     smartTransactionStatus =
       latestSmartTransaction?.status || SMART_TRANSACTION_STATUSES.PENDING;
+    cancellationFeeWei =
+      latestSmartTransaction?.statusMetadata?.cancellationFeeWei;
   }
 
   const [timeLeftForPendingStxInSec, setTimeLeftForPendingStxInSec] = useState(
@@ -176,7 +193,7 @@ export default function SmartTransactionStatus() {
   if (isSmartTransactionPending) {
     if (cancelSwapLinkClicked) {
       headerText = t('stxTryingToCancel');
-    } else if (latestSmartTransaction?.statusMetadata?.cancellationFeeWei > 0) {
+    } else if (cancellationFeeWei > 0) {
       headerText = t('stxPendingPubliclySubmittingSwap');
     }
   }
@@ -226,6 +243,17 @@ export default function SmartTransactionStatus() {
     latestSmartTransaction.cancellable && !cancelSwapLinkClicked;
 
   const CancelSwap = () => {
+    let feeInFiat;
+    if (cancellationFeeWei > 0) {
+      ({ feeInFiat } = getFeeForSmartTransaction({
+        chainId,
+        currentCurrency,
+        conversionRate,
+        USDConversionRate,
+        nativeCurrencySymbol,
+        feeInWeiDec: cancellationFeeWei,
+      }));
+    }
     return (
       <Box marginBottom={0}>
         <a
@@ -242,7 +270,9 @@ export default function SmartTransactionStatus() {
             dispatch(cancelSwapsSmartTransaction(latestSmartTransactionUuid));
           }}
         >
-          {t('cancelSwap')}
+          {feeInFiat
+            ? t('cancelSwapForFee', [feeInFiat])
+            : t('cancelSwapForFree')}
         </a>
       </Box>
     );