Update UI for blocked tokens, use the latest dev gas api URL (#20625)

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."

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/';

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':

ui/pages/swaps/searchable-item-list/index.scss

@@ -77,7 +77,7 @@
 
     &--disabled {
       opacity: 0.4;
-      pointer-events: none;
+      cursor: auto;
     }
 
     &--add-token {

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,

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);
     });