Add token verification message to swaps build quote screen (#9891)

* Add token verification message to swaps build quote screen * Adds description for locale * Use <a> tag for etherscan link * Remove unnecessary span * Update ui/app/pages/swaps/build-quote/build-quote.js Co-authored-by: Mark Stacey <[email protected]> Co-authored-by: Mark Stacey <[email protected]>
MetaMask · Nov 17, 2020 · e4de763 · e4de763
1 parent 31a3541
commit e4de763
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 0 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
@@ -629,6 +629,9 @@
   "ethereumPublicAddress": {
     "message": "Ethereum Public Address"
   },
+  "etherscan": {
+    "message": "Etherscan"
+  },
   "etherscanView": {
     "message": "View account on Etherscan"
   },
@@ -1848,6 +1851,9 @@
   "swapUsingBestQuote": {
     "message": "Using the best quote"
   },
+  "swapVerifyTokenExplanation": {
+    "message": "Multiple tokens can use the same name and symbol. Check Etherscan to verify this is the token you're looking for."
+  },
   "swapViewToken": {
     "message": "View $1"
   },
@@ -2079,6 +2085,10 @@
   "userName": {
     "message": "Username"
   },
+  "verifyThisTokenOn": {
+    "message": "Verify this token on $1",
+    "description": "Points the user to etherscan as a place they can verify information about a token. $1 is replaced with the translation for \"etherscan\""
+  },
   "viewAccount": {
     "message": "View Account"
   },

diff --git a/ui/app/pages/swaps/build-quote/build-quote.js b/ui/app/pages/swaps/build-quote/build-quote.js
@@ -13,6 +13,7 @@ import DropdownInputPair from '../dropdown-input-pair'
 import DropdownSearchList from '../dropdown-search-list'
 import SlippageButtons from '../slippage-buttons'
 import { getTokens } from '../../../ducks/metamask/metamask'
+import InfoTooltip from '../../../components/ui/info-tooltip'
 
 import {
   fetchQuotesAndSetQuoteState,
@@ -366,6 +367,27 @@ export default function BuildQuote({
             defaultToAll
           />
         </div>
+        {selectedToToken?.address &&
+          selectedToToken?.address !== ETH_SWAPS_TOKEN_OBJECT.address && (
+            <div className="build-quote__token-message">
+              {t('verifyThisTokenOn', [
+                <a
+                  className="build-quote__token-etherscan-link"
+                  key="build-quote-etherscan-link"
+                  href={`https://etherscan.io/token/${selectedToToken.address}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {t('etherscan')}
+                </a>,
+              ])}
+              <InfoTooltip
+                position="top"
+                contentText={t('swapVerifyTokenExplanation')}
+                containerClassName="build-quote__token-tooltip-container"
+              />
+            </div>
+          )}
         <div className="build-quote__slippage-buttons-container">
           <SlippageButtons
             onSelect={(newSlippage) => {

diff --git a/ui/app/pages/swaps/build-quote/index.scss b/ui/app/pages/swaps/build-quote/index.scss
@@ -116,6 +116,27 @@
     }
   }
 
+  &__token-message {
+    @include H7;
+
+    width: 100%;
+    color: $Grey-500;
+    margin-top: 4px;
+    display: flex;
+    align-items: center;
+  }
+
+  &__token-etherscan-link {
+    color: $Blue-500;
+    cursor: pointer;
+    margin-right: 4px;
+  }
+
+  &__token-tooltip-container {
+    // Needed to override the style property added by the react-tippy library
+    display: flex !important;
+  }
+
   /* Prevents the swaps "Swap to" field from overflowing */
   .dropdown-input-pair__to .dropdown-search-list {
     width: 100%;