fix: resolve all known swap+send bugs

ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.test.tsx

@@ -6,7 +6,6 @@ import { getNativeCurrency } from '../../../../ducks/metamask/metamask';
 import { useUserPreferencedCurrency } from '../../../../hooks/useUserPreferencedCurrency';
 import { useCurrencyDisplay } from '../../../../hooks/useCurrencyDisplay';
 import { AssetType } from '../../../../../shared/constants/transaction';
-import { getSwapsBlockedTokens } from '../../../../ducks/send';
 import AssetList from './AssetList';
 
 jest.mock('react-redux', () => ({
@@ -21,10 +20,6 @@ jest.mock('../../../../ducks/metamask/metamask', () => ({
   getNativeCurrency: jest.fn(),
 }));
 
-jest.mock('../../../../ducks/send', () => ({
-  getSwapsBlockedTokens: jest.fn(),
-}));
-
 jest.mock('../../../../hooks/useUserPreferencedCurrency', () => ({
   useUserPreferencedCurrency: jest.fn(),
 }));
@@ -83,9 +78,6 @@ describe('AssetList', () => {
       if (selector === getSelectedAccountCachedBalance) {
         return balanceValue;
       }
-      if (selector === getSwapsBlockedTokens) {
-        return [];
-      }
       return undefined;
     });
 
@@ -112,6 +104,7 @@ describe('AssetList', () => {
         handleAssetChange={handleAssetChangeMock}
         asset={{ balance: '1', type: AssetType.native }}
         tokenList={tokenList}
+        memoizedSwapsBlockedTokens={new Set([])}
       />,
     );
 
@@ -125,6 +118,7 @@ describe('AssetList', () => {
         handleAssetChange={handleAssetChangeMock}
         asset={{ balance: '1', type: AssetType.native }}
         tokenList={tokenList}
+        memoizedSwapsBlockedTokens={new Set([])}
       />,
     );
 
@@ -142,9 +136,6 @@ describe('AssetList', () => {
         if (selector === getSelectedAccountCachedBalance) {
           return balanceValue;
         }
-        if (selector === getSwapsBlockedTokens) {
-          return ['0xtoken1'];
-        }
         return undefined;
       });
 
@@ -154,6 +145,7 @@ describe('AssetList', () => {
         asset={{ balance: '1', type: AssetType.native }}
         tokenList={tokenList}
         sendingAssetSymbol="IRRELEVANT"
+        memoizedSwapsBlockedTokens={new Set(['0xtoken1'])}
       />,
     );
 

ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useSelector } from 'react-redux';
 import classnames from 'classnames';
 import { getSelectedAccountCachedBalance } from '../../../../selectors';
@@ -16,7 +16,6 @@ import {
   FlexWrap,
 } from '../../../../helpers/constants/design-system';
 import { TokenListItem } from '../..';
-import { getSwapsBlockedTokens } from '../../../../ducks/send';
 import { isEqualCaseInsensitive } from '../../../../../shared/modules/string-utils';
 import { Asset, Token } from './types';
 import AssetComponent from './Asset';
@@ -26,13 +25,15 @@ type AssetListProps = {
   asset: Asset;
   tokenList: Token[];
   sendingAssetSymbol?: string;
+  memoizedSwapsBlockedTokens: Set<string>;
 };
 
 export default function AssetList({
   handleAssetChange,
   asset,
   tokenList,
   sendingAssetSymbol,
+  memoizedSwapsBlockedTokens,
 }: AssetListProps) {
   const selectedToken = asset.details?.address;
 
@@ -61,19 +62,14 @@ export default function AssetList({
       hideLabel: true,
     });
 
-  const swapsBlockedTokens = useSelector(getSwapsBlockedTokens);
-  const memoizedSwapsBlockedTokens = useMemo(() => {
-    return new Set(swapsBlockedTokens);
-  }, [swapsBlockedTokens]);
-
   return (
     <Box className="tokens-main-view-modal">
       {tokenList.map((token) => {
         const tokenAddress = token.address?.toLowerCase();
         const isSelected = tokenAddress === selectedToken?.toLowerCase();
         const isDisabled = sendingAssetSymbol
           ? !isEqualCaseInsensitive(sendingAssetSymbol, token.symbol) &&
-            memoizedSwapsBlockedTokens.has(tokenAddress)
+            memoizedSwapsBlockedTokens.has(tokenAddress as string)
           : false;
         return (
           <Box

ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx

@@ -37,19 +37,21 @@ import { AssetType } from '../../../../../shared/constants/transaction';
 import { useNftsCollections } from '../../../../hooks/useNftsCollections';
 import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
 import {
+  getAllTokens,
   getCurrentChainId,
   getCurrentCurrency,
+  getIsMainnet,
   getNativeCurrencyImage,
   getSelectedAccountCachedBalance,
   getSelectedInternalAccount,
   getShouldHideZeroBalanceTokens,
   getTokenExchangeRates,
   getTokenList,
+  getUseNftDetection,
 } from '../../../../selectors';
 import {
   getConversionRate,
   getNativeCurrency,
-  getTokens,
 } from '../../../../ducks/metamask/metamask';
 import { useTokenTracker } from '../../../../hooks/useTokenTracker';
 import { getTopAssets } from '../../../../ducks/swaps/swaps';
@@ -60,7 +62,12 @@ import {
   MetaMetricsEventCategory,
 } from '../../../../../shared/constants/metametrics';
 import { MetaMetricsContext } from '../../../../contexts/metametrics';
-import { getSendAnalyticProperties } from '../../../../ducks/send';
+import {
+  getSendAnalyticProperties,
+  getSwapsBlockedTokens,
+} from '../../../../ducks/send';
+import NFTsDetectionNoticeNFTsTab from '../../../app/nfts-detection-notice-nfts-tab/nfts-detection-notice-nfts-tab';
+import { isEqualCaseInsensitive } from '../../../../../shared/modules/string-utils';
 import { Asset, Collection, Token } from './types';
 import AssetList from './AssetList';
 
@@ -116,6 +123,11 @@ export function AssetPickerModal({
     (collection) => collection.nfts.length > 0,
   );
 
+  const swapsBlockedTokens = useSelector(getSwapsBlockedTokens);
+  const memoizedSwapsBlockedTokens = useMemo(() => {
+    return new Set<string>(swapsBlockedTokens);
+  }, [swapsBlockedTokens]);
+
   const isDest = sendingAssetImage && sendingAssetSymbol;
 
   const handleAssetChange = useCallback(
@@ -153,7 +165,13 @@ export function AssetPickerModal({
   const shouldHideZeroBalanceTokens = useSelector(
     getShouldHideZeroBalanceTokens,
   );
-  const tokens = useSelector(getTokens, isEqual);
+
+  const useNftDetection = useSelector(getUseNftDetection);
+  const isMainnet = useSelector(getIsMainnet);
+
+  const detectedTokens = useSelector(getAllTokens);
+  const tokens = detectedTokens?.[chainId]?.[selectedAddress] ?? [];
+
   const { tokensWithBalances } = useTokenTracker({
     tokens,
     address: selectedAddress,
@@ -182,9 +200,20 @@ export function AssetPickerModal({
     // undefined would be the native token address
     const filteredTokensAddresses = new Set<string | undefined>();
 
+    const getIsDisabled = ({ address, symbol }: Token) => {
+      const isDisabled = sendingAssetSymbol
+        ? !isEqualCaseInsensitive(sendingAssetSymbol, symbol) &&
+          memoizedSwapsBlockedTokens.has(address || '')
+        : false;
+
+      return isDisabled;
+    };
+
     function* tokenGenerator() {
       yield nativeToken;
 
+      const blockedTokens = [];
+
       for (const token of memoizedUsersTokens) {
         yield token;
       }
@@ -193,13 +222,22 @@ export function AssetPickerModal({
       for (const address of Object.keys(topTokens)) {
         const token = tokenList?.[address];
         if (token) {
-          yield token;
+          if (isDest && getIsDisabled(token)) {
+            blockedTokens.push(token);
+            continue;
+          } else {
+            yield token;
+          }
         }
       }
 
       for (const token of Object.values(tokenList)) {
         yield token;
       }
+
+      for (const token of blockedTokens) {
+        yield token;
+      }
     }
 
     let token: Token;
@@ -245,14 +283,15 @@ export function AssetPickerModal({
     currentCurrency,
     chainId,
     tokenList,
+    sendingAssetSymbol,
   ]);
 
   const Search = useCallback(
-    () => (
+    ({ isNFTSearch = false }: { isNFTSearch?: boolean }) => (
       <Box padding={1} paddingLeft={4} paddingRight={4}>
         <TextFieldSearch
           borderRadius={BorderRadius.LG}
-          placeholder={t('searchTokenOrNFT')}
+          placeholder={t(isNFTSearch ? 'searchNfts' : 'searchTokens')}
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
           error={false}
@@ -318,6 +357,7 @@ export function AssetPickerModal({
                 asset={asset}
                 tokenList={filteredTokenList}
                 sendingAssetSymbol={sendingAssetSymbol}
+                memoizedSwapsBlockedTokens={memoizedSwapsBlockedTokens}
               />
             </>
           ) : (
@@ -339,6 +379,7 @@ export function AssetPickerModal({
                     handleAssetChange={handleAssetChange}
                     asset={asset}
                     tokenList={filteredTokenList}
+                    memoizedSwapsBlockedTokens={memoizedSwapsBlockedTokens}
                   />
                 </Tab>
               }
@@ -354,7 +395,7 @@ export function AssetPickerModal({
                 >
                   {hasAnyNfts ? (
                     <Box className="modal-tab__main-view">
-                      <Search />
+                      <Search isNFTSearch />
                       <NftsItems
                         collections={collectionDataFiltered}
                         previouslyOwnedCollection={previouslyOwnedCollection}
@@ -365,40 +406,51 @@ export function AssetPickerModal({
                       />
                     </Box>
                   ) : (
-                    <Box
-                      padding={12}
-                      display={Display.Flex}
-                      flexDirection={FlexDirection.Column}
-                      alignItems={AlignItems.center}
-                      justifyContent={JustifyContent.center}
-                    >
-                      <Box justifyContent={JustifyContent.center}>
-                        <img src="./images/no-nfts.svg" />
-                      </Box>
+                    <>
+                      {isMainnet && !useNftDetection && (
+                        <Box
+                          paddingTop={4}
+                          paddingInlineStart={4}
+                          paddingInlineEnd={4}
+                        >
+                          <NFTsDetectionNoticeNFTsTab />
+                        </Box>
+                      )}
                       <Box
+                        padding={12}
                         display={Display.Flex}
-                        justifyContent={JustifyContent.center}
-                        alignItems={AlignItems.center}
                         flexDirection={FlexDirection.Column}
-                        className="nfts-tab__link"
+                        alignItems={AlignItems.center}
+                        justifyContent={JustifyContent.center}
                       >
-                        <Text
-                          color={TextColor.textMuted}
-                          variant={TextVariant.headingSm}
-                          textAlign={TextAlign.Center}
-                          as="h4"
+                        <Box justifyContent={JustifyContent.center}>
+                          <img src="./images/no-nfts.svg" />
+                        </Box>
+                        <Box
+                          display={Display.Flex}
+                          justifyContent={JustifyContent.center}
+                          alignItems={AlignItems.center}
+                          flexDirection={FlexDirection.Column}
+                          className="nfts-tab__link"
                         >
-                          {t('noNFTs')}
-                        </Text>
-                        <ButtonLink
-                          size={ButtonLinkSize.Sm}
-                          href={ZENDESK_URLS.NFT_TOKENS}
-                          externalLink
-                        >
-                          {t('learnMoreUpperCase')}
-                        </ButtonLink>
+                          <Text
+                            color={TextColor.textMuted}
+                            variant={TextVariant.headingSm}
+                            textAlign={TextAlign.Center}
+                            as="h4"
+                          >
+                            {t('noNFTs')}
+                          </Text>
+                          <ButtonLink
+                            size={ButtonLinkSize.Sm}
+                            href={ZENDESK_URLS.NFT_TOKENS}
+                            externalLink
+                          >
+                            {t('learnMoreUpperCase')}
+                          </ButtonLink>
+                        </Box>
                       </Box>
-                    </Box>
+                    </>
                   )}
                 </Tab>
               }

ui/components/multichain/pages/send/__snapshots__/send.test.js.snap

@@ -540,7 +540,7 @@ exports[`SendPage render and initialization should render correctly even when a
         <div
           class="multichain-send-page__nav-button"
           style="display: inline-flex;"
-          title="Clicking this button will immediately initiate your swap transaction. Please review your transaction details before proceeding."
+          title=""
         >
           <button
             class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"

ui/components/multichain/pages/send/send.js

@@ -281,6 +281,8 @@ export const SendPage = () => {
     [dispatch],
   );
 
+  const tooltipTitle = isSwapAndSend ? t('sendSwapSubmissionWarning') : '';
+
   return (
     <Page className="multichain-send-page">
       <Header
@@ -329,8 +331,10 @@ export const SendPage = () => {
           {sendStage === SEND_STAGES.EDIT ? t('reject') : t('cancel')}
         </ButtonSecondary>
         <Tooltip
+          // changing key forces remount on title change
+          key={tooltipTitle}
           className="multichain-send-page__nav-button"
-          title={t('sendSwapSubmissionWarning')}
+          title={tooltipTitle}
           disabled={!isSwapAndSend}
           arrow
           hideOnClick={false}

ui/components/ui/unit-input/index.scss

@@ -48,6 +48,10 @@
     text-overflow: ellipsis;
     height: 16px;
     outline: none;
+
+    &:not(:focus):not(:disabled) {
+      text-overflow: clip;
+    }
   }
 
   &__input-container {