Swaps: Create a new swap (#11124)

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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: {
+    sensitiveProperties,
-      token_from: sourceTokenInfo?.symbol,
+    category: 'swaps',
-      token_from_amount: fetchParams?.value,
+  });
-      token_to: destinationTokenInfo?.symbol,
+  const makeAnotherSwapEvent = useNewMetricEvent({
-      request_type: fetchParams?.balanceError ? 'Quote' : 'Order',
+    event: 'Make Another Swap',
-      slippage: fetchParams?.slippage,
+    sensitiveProperties,
-      custom_slippage: fetchParams?.slippage === 2,
-      gas_fees: feeinUnformattedFiat,
-      is_hardware_wallet: hardwareWalletUsed,
-      hardware_wallet_type: hardwareWalletType,
-    },
     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 {

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;