From 4e14e179c86a1e2c9e6f26a0689e0561689f1406 Mon Sep 17 00:00:00 2001
From: Daniel <80175477+dan437@users.noreply.github.com>
Date: Tue, 29 Aug 2023 14:38:46 +0200
Subject: [PATCH] Update UI for blocked tokens, use the latest dev gas api URL
 (#20625)

---
 app/_locales/en/messages.json                      |  3 +++
 shared/constants/swaps.ts                          |  3 +--
 shared/lib/swaps-utils.js                          |  2 +-
 ui/pages/swaps/searchable-item-list/index.scss     |  2 +-
 .../item-list/item-list.component.js               | 14 +++++++++++---
 ui/pages/swaps/swaps.util.test.js                  |  2 +-
 6 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 6eb7d941b..7de8d265f 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -4694,6 +4694,9 @@
     "message": "We were unable to retrieve your $1 balance",
     "description": "This message communicates to the user that their balance of a given token is currently unavailable. $1 will be replaced by a token symbol"
   },
+  "swapTokenNotAvailable": {
+    "message": "Token is not available to swap in this region"
+  },
   "swapTokenToToken": {
     "message": "Swap $1 to $2",
     "description": "Used in the transaction display list to describe a swap. $1 and $2 are the symbols of tokens in involved in a swap."
diff --git a/shared/constants/swaps.ts b/shared/constants/swaps.ts
index db79529e4..a253e8e78 100644
--- a/shared/constants/swaps.ts
+++ b/shared/constants/swaps.ts
@@ -140,8 +140,7 @@ export const MMI_SWAPS_URL = 'https://metamask-institutional.io/swap';
 export const SWAPS_API_V2_BASE_URL = 'https://swap.metaswap.codefi.network';
 export const SWAPS_DEV_API_V2_BASE_URL = 'https://swap.dev-api.cx.metamask.io';
 export const GAS_API_BASE_URL = 'https://gas-api.metaswap.codefi.network';
-export const GAS_DEV_API_BASE_URL =
-  'https://gas-api.metaswap-dev.codefi.network';
+export const GAS_DEV_API_BASE_URL = 'https://gas.dev-api.cx.metamask.io';
 
 const BSC_DEFAULT_BLOCK_EXPLORER_URL = 'https://bscscan.com/';
 const MAINNET_DEFAULT_BLOCK_EXPLORER_URL = 'https://etherscan.io/';
diff --git a/shared/lib/swaps-utils.js b/shared/lib/swaps-utils.js
index f6dab1631..c58557bca 100644
--- a/shared/lib/swaps-utils.js
+++ b/shared/lib/swaps-utils.js
@@ -155,7 +155,7 @@ export const getBaseApi = function (type, chainId) {
     case 'trade':
       return `${baseUrl}/trades?`;
     case 'tokens':
-      return `${baseUrl}/tokens`;
+      return `${baseUrl}/tokens?includeBlockedTokens=true`;
     case 'token':
       return `${baseUrl}/token`;
     case 'topAssets':
diff --git a/ui/pages/swaps/searchable-item-list/index.scss b/ui/pages/swaps/searchable-item-list/index.scss
index 7ddf1ed7f..971a14a65 100644
--- a/ui/pages/swaps/searchable-item-list/index.scss
+++ b/ui/pages/swaps/searchable-item-list/index.scss
@@ -77,7 +77,7 @@
 
     &--disabled {
       opacity: 0.4;
-      pointer-events: none;
+      cursor: auto;
     }
 
     &--add-token {
diff --git a/ui/pages/swaps/searchable-item-list/item-list/item-list.component.js b/ui/pages/swaps/searchable-item-list/item-list/item-list.component.js
index 8fd987693..b955a727d 100644
--- a/ui/pages/swaps/searchable-item-list/item-list/item-list.component.js
+++ b/ui/pages/swaps/searchable-item-list/item-list/item-list.component.js
@@ -65,8 +65,15 @@ export default function ItemList({
           if (hideItemIf?.(result)) {
             return null;
           }
+          const hasBalance = result.balance > 0;
+          if (result.blocked && !hasBalance && !searchQuery) {
+            return null;
+          }
 
           const onClick = () => {
+            if (result.blocked) {
+              return;
+            }
             if (result.notImported) {
               onOpenImportTokenModalClick(result);
             } else {
@@ -77,7 +84,7 @@ export default function ItemList({
             iconUrl,
             identiconAddress,
             selected,
-            disabled,
+            blocked,
             primaryLabel,
             secondaryLabel,
             rightPrimaryLabel,
@@ -89,12 +96,13 @@ export default function ItemList({
               tabIndex="0"
               className={classnames('searchable-item-list__item', {
                 'searchable-item-list__item--selected': selected,
-                'searchable-item-list__item--disabled': disabled,
+                'searchable-item-list__item--disabled': blocked,
               })}
               data-testid="searchable-item-list__item"
               onClick={onClick}
               onKeyUp={(e) => e.key === 'Enter' && onClick()}
               key={`searchable-item-list-item-${i}`}
+              title={blocked && t('swapTokenNotAvailable')}
             >
               {iconUrl || primaryLabel ? (
                 <UrlIcon url={iconUrl} name={primaryLabel} />
@@ -193,7 +201,7 @@ ItemList.propTypes = {
     PropTypes.shape({
       iconUrl: PropTypes.string,
       selected: PropTypes.bool,
-      disabled: PropTypes.bool,
+      blocked: PropTypes.bool,
       primaryLabel: PropTypes.string,
       secondaryLabel: PropTypes.string,
       rightPrimaryLabel: PropTypes.string,
diff --git a/ui/pages/swaps/swaps.util.test.js b/ui/pages/swaps/swaps.util.test.js
index 642879484..d734fdbda 100644
--- a/ui/pages/swaps/swaps.util.test.js
+++ b/ui/pages/swaps/swaps.util.test.js
@@ -48,7 +48,7 @@ describe('Swaps Util', () => {
     beforeEach(() => {
       nock('https://swap.metaswap.codefi.network')
         .persist()
-        .get('/networks/1/tokens')
+        .get('/networks/1/tokens?includeBlockedTokens=true')
         .reply(200, TOKENS);
     });