Swaps: Create a new swap (#11124)

2024-12-23 09:52:26 +01:00 · 2021-05-21 17:14:56 +02:00 · 2021-05-21 17:14:56 +02:00 · df6cb42594
commit df6cb42594
parent 2dae62fbbc
14 changed files with 45 additions and 49 deletions
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@ -1042,6 +1042,9 @@
  "mainnet": {
    "message": "Ethereum Mainnet"
  },
+  "makeAnotherSwap": {
+    "message": "Create a new swap"
+  },
  "max": {
    "message": "Max"
  },
@ -2077,9 +2080,6 @@
    "message": "Multiple tokens can use the same name and symbol. Check $1 to verify this is the token you're looking for.",
    "description": "This appears in a tooltip next to the verifyThisTokenOn message. It gives the user more information about why they should check the token on a block explorer. $1 will be the name or url of the block explorer, which will be the translation of 'etherscan' or a block explorer url specified for a custom network."
  },
-  "swapViewToken": {
-    "message": "View $1"
-  },
  "swapYourTokenBalance": {
    "message": "$1 $2 available to swap",
    "description": "Tells the user how much of a token they have in their balance. $1 is a decimal number amount of tokens, and $2 is a token symbol"
--- a/app/_locales/es/messages.json
+++ b/app/_locales/es/messages.json
@ -1735,9 +1735,6 @@
    "message": "Varios tokens pueden usar el mismo nombre y símbolo. Verifique $1 para verificar que este es el token que está buscando.",
    "description": "This appears in a tooltip next to the verifyThisTokenOn message. It gives the user more information about why they should check the token on a block explorer. $1 will be the name or url of the block explorer, which will be the translation of 'etherscan' or a block explorer url specified for a custom network."
  },
-  "swapViewToken": {
-    "message": "Ver $1"
-  },
  "swapYourTokenBalance": {
    "message": "$1 $2 están disponibles para intercambiar",
    "description": "Tells the user how much of a token they have in their balance. $1 is a decimal number amount of tokens, and $2 is a token symbol"
--- a/app/_locales/es_419/messages.json
+++ b/app/_locales/es_419/messages.json
@ -1726,9 +1726,6 @@
    "message": "Varios tokens pueden usar el mismo nombre y símbolo. Verifique $1 para verificar que este es el token que está buscando.",
    "description": "This appears in a tooltip next to the verifyThisTokenOn message. It gives the user more information about why they should check the token on a block explorer. $1 will be the name or url of the block explorer, which will be the translation of 'etherscan' or a block explorer url specified for a custom network."
  },
-  "swapViewToken": {
-    "message": "Ver $1"
-  },
  "swapYourTokenBalance": {
    "message": "$1 $2 están disponibles para intercambiar",
    "description": "Tells the user how much of a token they have in their balance. $1 is a decimal number amount of tokens, and $2 is a token symbol"
--- a/app/_locales/hi/messages.json
+++ b/app/_locales/hi/messages.json
@ -1702,9 +1702,6 @@
    "message": "एकाधिक टोकन एक ही नाम और प्रतीक का उपयोग कर सकते हैं। यह सत्यापित करने के लिए $1 की जाँच करें कि यह वही टोकन है, जिसकी आप तलाश कर रहे हैं।",
    "description": "This appears in a tooltip next to the verifyThisTokenOn message. It gives the user more information about why they should check the token on a block explorer. $1 will be the name or url of the block explorer, which will be the translation of 'etherscan' or a block explorer url specified for a custom network."
  },
-  "swapViewToken": {
-    "message": "$1 देखें"
-  },
  "swapYourTokenBalance": {
    "message": "$1 $2 स्वैप के लिए उपलब्ध है",
    "description": "Tells the user how much of a token they have in their balance. $1 is a decimal number amount of tokens, and $2 is a token symbol"
--- a/app/_locales/id/messages.json
+++ b/app/_locales/id/messages.json
@ -1702,9 +1702,6 @@
    "message": "Beberapa token dapat menggunakan simbol dan nama yang sama. Periksa $1 untuk memverifikasi inilah token yang Anda cari.",
    "description": "This appears in a tooltip next to the verifyThisTokenOn message. It gives the user more information about why they should check the token on a block explorer. $1 will be the name or url of the block explorer, which will be the translation of 'etherscan' or a block explorer url specified for a custom network."
  },
-  "swapViewToken": {
-    "message": "Lihat $1"
-  },
  "swapYourTokenBalance": {
    "message": "$1 $2 tersedia untuk ditukar",
    "description": "Tells the user how much of a token they have in their balance. $1 is a decimal number amount of tokens, and $2 is a token symbol"
--- a/app/_locales/it/messages.json
+++ b/app/_locales/it/messages.json
@ -1749,9 +1749,6 @@
    "message": "Più token possono usare lo stesso nome e simbolo. Verifica su $1 che questo sia il token che stai cercando.",
    "description": "This appears in a tooltip next to the verifyThisTokenOn message. It gives the user more information about why they should check the token on a block explorer. $1 will be the name or url of the block explorer, which will be the translation of 'etherscan' or a block explorer url specified for a custom network."
  },
-  "swapViewToken": {
-    "message": "Vedi $1"
-  },
  "swapYourTokenBalance": {
    "message": "$1 $2 disponibili allo scambio",
    "description": "Tells the user how much of a token they have in their balance. $1 is a decimal number amount of tokens, and $2 is a token symbol"
--- a/app/_locales/ja/messages.json
+++ b/app/_locales/ja/messages.json
@ -1735,9 +1735,6 @@
    "message": "複数のトークンが同じ名前とシンボルであることがあります。$1で実際のトークンでを確認してください。",
    "description": "This appears in a tooltip next to the verifyThisTokenOn message. It gives the user more information about why they should check the token on a block explorer. $1 will be the name or url of the block explorer, which will be the translation of 'etherscan' or a block explorer url specified for a custom network."
  },
-  "swapViewToken": {
-    "message": "$1 を表示"
-  },
  "swapYourTokenBalance": {
    "message": "$1 $2 はスワップに使用できます",
    "description": "Tells the user how much of a token they have in their balance. $1 is a decimal number amount of tokens, and $2 is a token symbol"
--- a/app/_locales/ko/messages.json
+++ b/app/_locales/ko/messages.json
@ -1702,9 +1702,6 @@
    "message": "여러 토큰이 같은 이름과 기호를 사용할 수 있습니다. $1을 확인하여 이것이 원하는 토큰인지 확인하세요.",
    "description": "This appears in a tooltip next to the verifyThisTokenOn message. It gives the user more information about why they should check the token on a block explorer. $1 will be the name or url of the block explorer, which will be the translation of 'etherscan' or a block explorer url specified for a custom network."
  },
-  "swapViewToken": {
-    "message": "$1 보기"
-  },
  "swapYourTokenBalance": {
    "message": "$1 $2 스왑 가능",
    "description": "Tells the user how much of a token they have in their balance. $1 is a decimal number amount of tokens, and $2 is a token symbol"
--- a/app/_locales/ru/messages.json
+++ b/app/_locales/ru/messages.json
@ -1702,9 +1702,6 @@
    "message": "Несколько токенов могут использовать одно и то же имя и символ. Проверьте $1, чтобы убедиться, что это именно тот токен, который вы ищете.",
    "description": "This appears in a tooltip next to the verifyThisTokenOn message. It gives the user more information about why they should check the token on a block explorer. $1 will be the name or url of the block explorer, which will be the translation of 'etherscan' or a block explorer url specified for a custom network."
  },
-  "swapViewToken": {
-    "message": "Просмотреть $1"
-  },
  "swapYourTokenBalance": {
    "message": "$1 $2 доступны для свопа",
    "description": "Tells the user how much of a token they have in their balance. $1 is a decimal number amount of tokens, and $2 is a token symbol"
--- a/app/_locales/tl/messages.json
+++ b/app/_locales/tl/messages.json
@ -1699,9 +1699,6 @@
    "message": "Maaaring gamitin ng maraming token ang iisang pangalan at simbolo. Suriin ang $1 para ma-verify na ito ang token na hinahanap mo.",
    "description": "This appears in a tooltip next to the verifyThisTokenOn message. It gives the user more information about why they should check the token on a block explorer. $1 will be the name or url of the block explorer, which will be the translation of 'etherscan' or a block explorer url specified for a custom network."
  },
-  "swapViewToken": {
-    "message": "Tingnan ang $1"
-  },
  "swapYourTokenBalance": {
    "message": "Available ang $1 $2 na i-swap",
    "description": "Tells the user how much of a token they have in their balance. $1 is a decimal number amount of tokens, and $2 is a token symbol"
--- a/app/_locales/vi/messages.json
+++ b/app/_locales/vi/messages.json
@ -1702,9 +1702,6 @@
    "message": "Nhiều token có thể dùng cùng một tên và ký hiệu. Hãy kiểm tra trên $1 để xác minh xem đây có phải là token bạn đang tìm kiếm không.",
    "description": "This appears in a tooltip next to the verifyThisTokenOn message. It gives the user more information about why they should check the token on a block explorer. $1 will be the name or url of the block explorer, which will be the translation of 'etherscan' or a block explorer url specified for a custom network."
  },
-  "swapViewToken": {
-    "message": "Xem $1"
-  },
  "swapYourTokenBalance": {
    "message": "Có sẵn $1 $2 để hoán đổi",
    "description": "Tells the user how much of a token they have in their balance. $1 is a decimal number amount of tokens, and $2 is a token symbol"
--- a/app/_locales/zh_CN/messages.json
+++ b/app/_locales/zh_CN/messages.json
@ -1726,9 +1726,6 @@
    "message": "多个代币可以使用相同的名称和符号。检查 $1（以太坊浏览器）以确认这是您正在寻找的代币。",
    "description": "This appears in a tooltip next to the verifyThisTokenOn message. It gives the user more information about why they should check the token on a block explorer. $1 will be the name or url of the block explorer, which will be the translation of 'etherscan' or a block explorer url specified for a custom network."
  },
-  "swapViewToken": {
-    "message": "查看 $1"
-  },
  "swapYourTokenBalance": {
    "message": "$1 $2 可用",
    "description": "Tells the user how much of a token they have in their balance. $1 is a decimal number amount of tokens, and $2 is a token symbol"
--- a/ui/pages/swaps/awaiting-swap/awaiting-swap.js
+++ b/ui/pages/swaps/awaiting-swap/awaiting-swap.js
@ -28,6 +28,7 @@ import {
  prepareToLeaveSwaps,
 } from '../../../ducks/swaps/swaps';
 import Mascot from '../../../components/ui/mascot';
+import Box from '../../../components/ui/box';
 import {
  QUOTES_EXPIRED_ERROR,
  SWAP_FAILED_ERROR,
@ -98,19 +99,25 @@ export default function AwaitingSwap({

  const hardwareWalletUsed = useSelector(isHardwareWallet);
  const hardwareWalletType = useSelector(getHardwareWalletType);
+  const sensitiveProperties = {
+    token_from: sourceTokenInfo?.symbol,
+    token_from_amount: fetchParams?.value,
+    token_to: destinationTokenInfo?.symbol,
+    request_type: fetchParams?.balanceError ? 'Quote' : 'Order',
+    slippage: fetchParams?.slippage,
+    custom_slippage: fetchParams?.slippage === 2,
+    gas_fees: feeinUnformattedFiat,
+    is_hardware_wallet: hardwareWalletUsed,
+    hardware_wallet_type: hardwareWalletType,
+  };
  const quotesExpiredEvent = useNewMetricEvent({
    event: 'Quotes Timed Out',
-    sensitiveProperties: {
-      token_from: sourceTokenInfo?.symbol,
-      token_from_amount: fetchParams?.value,
-      token_to: destinationTokenInfo?.symbol,
-      request_type: fetchParams?.balanceError ? 'Quote' : 'Order',
-      slippage: fetchParams?.slippage,
-      custom_slippage: fetchParams?.slippage === 2,
-      gas_fees: feeinUnformattedFiat,
-      is_hardware_wallet: hardwareWalletUsed,
-      hardware_wallet_type: hardwareWalletType,
-    },
+    sensitiveProperties,
+    category: 'swaps',
+  });
+  const makeAnotherSwapEvent = useNewMetricEvent({
+    event: 'Make Another Swap',
+    sensitiveProperties,
    category: 'swaps',
  });

@ -207,7 +214,7 @@ export default function AwaitingSwap({
  } else if (!errorKey && swapComplete) {
    headerText = t('swapTransactionComplete');
    statusImage = <SwapSuccessIcon />;
-    submitText = t('swapViewToken', [destinationTokenInfo.symbol]);
+    submitText = t('close');
    descriptionText = t('swapTokenAvailable', [
      <span
        key="swapTokenAvailable-2"
@ -225,6 +232,22 @@ export default function AwaitingSwap({
    );
  }

+  const MakeAnotherSwap = () => {
+    return (
+      <Box marginBottom={3}>
+        <a
+          href="#"
+          onClick={() => {
+            makeAnotherSwapEvent();
+            dispatch(navigateBackToBuildQuote(history));
+          }}
+        >
+          {t('makeAnotherSwap')}
+        </a>
+      </Box>
+    );
+  };
+
  return (
    <div className="awaiting-swap">
      <div className="awaiting-swap__content">
@ -240,6 +263,7 @@ export default function AwaitingSwap({
        <div className="awaiting-swap__main-descrption">{descriptionText}</div>
        {content}
      </div>
+      {!errorKey && swapComplete && <MakeAnotherSwap />}
      <SwapsFooter
        onSubmit={async () => {
          if (errorKey === OFFLINE_FOR_MAINTENANCE) {
@ -258,7 +282,8 @@ export default function AwaitingSwap({
          } else if (errorKey) {
            await dispatch(navigateBackToBuildQuote(history));
          } else if (
-            isSwapsDefaultTokenSymbol(destinationTokenInfo?.symbol, chainId)
+            isSwapsDefaultTokenSymbol(destinationTokenInfo?.symbol, chainId) ||
+            swapComplete
          ) {
            history.push(DEFAULT_ROUTE);
          } else {
--- a/ui/pages/swaps/awaiting-swap/index.scss
+++ b/ui/pages/swaps/awaiting-swap/index.scss
@ -20,6 +20,10 @@
    justify-content: center;
  }

+  a {
+    color: $Blue-500;
+  }
+
  &__status-image {
    margin-top: 12px;
    margin-bottom: 16px;