fix: swap+send bugs in Version v12.0.0 release (#25307)

MetaMask · Jun 15, 2024 · 71358da · 71358da
1 parent aba68fd
commit 71358da
Show file tree

Hide file tree

Showing 10 changed files with 1,470 additions and 25 deletions.
diff --git a/test/data/transaction-data.json b/test/data/transaction-data.json
diff --git a/test/e2e/tests/swap-send/swap-send-erc20.spec.ts b/test/e2e/tests/swap-send/swap-send-erc20.spec.ts
@@ -21,6 +21,7 @@ describe('Swap-Send ERC20', function () {
         getSwapSendFixtures(
           this.test?.fullTitle(),
           SWAP_SEND_QUOTES_RESPONSE_TST_ETH,
+          '?sourceAmount=100000&sourceToken=0x581c3C1A2A4EBDE2A0Df29B5cf4c116E42945947&destinationToken=0x0000000000000000000000000000000000000000&sender=0x5cfe73b6021e818b776b421b1c4db2474086a7e1&recipient=0xc427D562164062a23a5cFf596A4a3208e72Acd28&slippage=2',
         ),
         async ({
           driver,
@@ -104,7 +105,7 @@ describe('Swap-Send ERC20', function () {
             'Send TST as ETH',
             'Confirmed',
             '-10 TST',
-            '-$0.00',
+            '',
           );
 
           driver.summarizeErrorsAndExceptions();

diff --git a/test/e2e/tests/swap-send/swap-send-eth.spec.ts b/test/e2e/tests/swap-send/swap-send-eth.spec.ts
@@ -71,18 +71,20 @@ describe('Swap-Send ETH', function () {
             '≈ $4,515,000,000.00',
           );
 
+          // TODO assert swap api request payload
+
           await swapSendPage.submitSwap();
           await swapSendPage.verifyHistoryEntry(
             'Send ETH as TST',
             'Pending',
             '-1 ETH',
-            '-$3,010.00',
+            '',
           );
           await swapSendPage.verifyHistoryEntry(
             'Send ETH as TST',
             'Confirmed',
             '-1 ETH',
-            '-$3,010.00',
+            '',
           );
 
           driver.summarizeErrorsAndExceptions();

diff --git a/test/e2e/tests/swap-send/swap-send-test-utils.ts b/test/e2e/tests/swap-send/swap-send-test-utils.ts
@@ -2,7 +2,7 @@ import { strict as assert } from 'assert';
 import { Mockttp } from 'mockttp';
 import FixtureBuilder from '../../fixture-builder';
 import { SWAPS_API_V2_BASE_URL } from '../../../../shared/constants/swaps';
-import { defaultGanacheOptions } from '../../helpers';
+import { generateGanacheOptions } from '../../helpers';
 import { SMART_CONTRACTS } from '../../seeder/smart-contracts';
 import { SWAP_SEND_QUOTES_RESPONSE_ETH_TST } from './mocks/eth-data';
 
@@ -245,10 +245,11 @@ export class SwapSendPage {
 }
 
 export const mockSwapsApi =
-  (quotes = SWAP_SEND_QUOTES_RESPONSE_ETH_TST) =>
+  (quotes: typeof SWAP_SEND_QUOTES_RESPONSE_ETH_TST, query: string) =>
   async (mockServer: Mockttp) => {
-    return await mockServer
+    await mockServer
       .forGet(`${SWAPS_API_V2_BASE_URL}/v2/networks/1337/quotes`)
+      .withExactQuery(query)
       .always()
       .thenCallback(() => {
         return {
@@ -261,6 +262,7 @@ export const mockSwapsApi =
 export const getSwapSendFixtures = (
   title?: string,
   swapsQuotes = SWAP_SEND_QUOTES_RESPONSE_ETH_TST,
+  swapsQuery = '?sourceAmount=1000000000000000000&sourceToken=0x0000000000000000000000000000000000000000&destinationToken=0x581c3C1A2A4EBDE2A0Df29B5cf4c116E42945947&sender=0x5cfe73b6021e818b776b421b1c4db2474086a7e1&recipient=0xc427D562164062a23a5cFf596A4a3208e72Acd28&slippage=2',
 ) => {
   const ETH_CONVERSION_RATE_USD = 3010;
   return {
@@ -296,8 +298,8 @@ export const getSwapSendFixtures = (
       .build(),
     smartContract: SMART_CONTRACTS.HST,
     ethConversionInUsd: ETH_CONVERSION_RATE_USD,
-    testSpecificMock: mockSwapsApi(swapsQuotes),
-    ganacheOptions: defaultGanacheOptions,
+    testSpecificMock: mockSwapsApi(swapsQuotes, swapsQuery),
+    ganacheOptions: generateGanacheOptions({ hardfork: 'london' }),
     title,
   };
 };
diff --git a/ui/components/multichain/asset-picker-amount/index.scss b/ui/components/multichain/asset-picker-amount/index.scss
@@ -36,7 +36,7 @@
     .unit-input__inputs {
       // primary (i.e., input) and secondary (i.e., subtext) input sections
       & > div {
-        max-width: 125px;
+        max-width: 138px;
         white-space: nowrap;
         text-overflow: ellipsis;
       }
@@ -51,7 +51,15 @@
 
         text-overflow: ellipsis;
         overflow: hidden;
-        display: inline;
+        flex-wrap: nowrap;
+
+        & > span.currency-display-component__text {
+          width: max-content;
+        }
+
+        & > span.currency-display-component__suffix {
+          width: max-content;
+        }
       }
 
       // secondary field elements (e.g., value, symbols)

diff --git a/ui/components/multichain/pages/send/components/recipient-content.tsx b/ui/components/multichain/pages/send/components/recipient-content.tsx
@@ -25,6 +25,7 @@ import {
   getUseExternalServices,
 } from '../../../../../selectors';
 import type { Quote } from '../../../../../ducks/send/swap-and-send-utils';
+import { isEqualCaseInsensitive } from '../../../../../../shared/modules/string-utils';
 import { SendHexData, SendPageRow, QuoteCard } from '.';
 
 export const SendPageRecipientContent = ({
@@ -59,8 +60,10 @@ export const SendPageRecipientContent = ({
 
   const isLoadingInitialQuotes = !bestQuote && isSwapQuoteLoading;
 
-  const isBasicSend =
-    receiveAsset.details?.address === sendAsset.details?.address;
+  const isBasicSend = isEqualCaseInsensitive(
+    receiveAsset.details?.address ?? '',
+    sendAsset.details?.address ?? '',
+  );
 
   const amount = isBasicSend
     ? sendAmount

diff --git a/ui/components/ui/unit-input/unit-input.component.js b/ui/components/ui/unit-input/unit-input.component.js
@@ -95,6 +95,7 @@ export default class UnitInput extends PureComponent {
     }
 
     this.props.onBlur && this.props.onBlur(value);
+    this.unitInput.scrollTo && this.unitInput.scrollTo(0, 0);
   };
 
   handleChange = (event) => {

diff --git a/ui/hooks/useSwappedTokenValue.js b/ui/hooks/useSwappedTokenValue.js
@@ -37,16 +37,16 @@ export function useSwappedTokenValue(transactionGroup, currentAsset) {
   const chainId = useSelector(getCurrentChainId);
 
   const isViewingReceivedTokenFromSwap =
-    currentAsset?.symbol === primaryTransaction.destinationTokenSymbol ||
-    (isSwapsDefaultTokenAddress(currentAsset.address, chainId) &&
-      isSwapsDefaultTokenSymbol(
-        primaryTransaction.destinationTokenSymbol,
-        chainId,
-      ));
+    type === TransactionType.swap &&
+    (currentAsset?.symbol === primaryTransaction.destinationTokenSymbol ||
+      (isSwapsDefaultTokenAddress(currentAsset.address, chainId) &&
+        isSwapsDefaultTokenSymbol(
+          primaryTransaction.destinationTokenSymbol,
+          chainId,
+        )));
 
   const swapTokenValue =
-    [TransactionType.swap, TransactionType.swapAndSend].includes(type) &&
-    isViewingReceivedTokenFromSwap
+    [TransactionType.swap].includes(type) && isViewingReceivedTokenFromSwap
       ? getSwapsTokensReceivedFromTxMeta(
           primaryTransaction.destinationTokenSymbol,
           initialTransaction,
@@ -69,8 +69,21 @@ export function useSwappedTokenValue(transactionGroup, currentAsset) {
     swapTokenValue || '',
     symbol,
   );
-  const swapTokenFiatAmount =
-    swapTokenValue && isViewingReceivedTokenFromSwap && _swapTokenFiatAmount;
+  const _swapAndSendTokenFiatAmount = useTokenFiatAmount(
+    primaryTransaction.sourceTokenAddress,
+    swapTokenValue,
+    primaryTransaction.sourceTokenSymbol,
+  );
+
+  let swapTokenFiatAmount;
+  if (swapTokenValue) {
+    if (isViewingReceivedTokenFromSwap) {
+      swapTokenFiatAmount = _swapTokenFiatAmount;
+    } else if (type === TransactionType.swapAndSend) {
+      swapTokenFiatAmount = _swapAndSendTokenFiatAmount;
+    }
+  }
+
   return {
     swapTokenValue,
     swapTokenFiatAmount,

diff --git a/ui/hooks/useTransactionDisplayData.js b/ui/hooks/useTransactionDisplayData.js
@@ -394,7 +394,8 @@ export function useTransactionDisplayData(transactionGroup) {
     recipientAddress,
     secondaryCurrency:
       (isTokenCategory && !tokenFiatAmount) ||
-      (type === TransactionType.swap && !swapTokenFiatAmount)
+      ([TransactionType.swap, TransactionType.swapAndSend].includes(type) &&
+        !swapTokenFiatAmount)
         ? undefined
         : secondaryCurrency,
     displayedStatusKey,

diff --git a/ui/hooks/useTransactionDisplayData.test.js b/ui/hooks/useTransactionDisplayData.test.js
@@ -165,10 +165,36 @@ const expectedResults = [
     subtitle: 'metamask',
     subtitleContainsOrigin: true,
     date: formatDateWithYearContext(1585088013000),
-    primaryCurrency: '-0 BAT',
+    primaryCurrency: '-33.425656732428330864 BAT',
     senderAddress: '0x0a985a957b490f4d05bef05bc7ec556dd8535946',
     recipientAddress: '0xc6f6ca03d790168758285264bcbf7fb30d27322b',
-    secondaryCurrency: '-0 ETH',
+    secondaryCurrency: undefined,
+    isPending: false,
+    displayedStatusKey: TransactionStatus.confirmed,
+  },
+  {
+    title: 'Send USDC as DAI',
+    category: TransactionType.swapAndSend,
+    subtitle: 'metamask',
+    subtitleContainsOrigin: true,
+    date: formatDateWithYearContext(1585088013000),
+    primaryCurrency: '-5 USDC',
+    senderAddress: '0x141d32a89a1e0a5ef360034a2f60a4b917c18838',
+    recipientAddress: '0x141d32a89a1e0a5ef360034a2f60a4b917c18838',
+    secondaryCurrency: undefined,
+    isPending: false,
+    displayedStatusKey: TransactionStatus.confirmed,
+  },
+  {
+    title: 'Send BNB as USDC',
+    category: TransactionType.swapAndSend,
+    subtitle: 'metamask',
+    subtitleContainsOrigin: true,
+    date: formatDateWithYearContext(1585088013000),
+    primaryCurrency: '-0.05 BNB',
+    senderAddress: '0x141d32a89a1e0a5ef360034a2f60a4b917c18838',
+    recipientAddress: '0x141d32a89a1e0a5ef360034a2f60a4b917c18838',
+    secondaryCurrency: undefined,
     isPending: false,
     displayedStatusKey: TransactionStatus.confirmed,
   },