chore: display quote loading state

MetaMask · Oct 23, 2024 · 6dc9d16 · 6dc9d16
1 parent 374ea01
commit 6dc9d16
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 6 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/ui/pages/bridge/__snapshots__/index.test.tsx.snap b/ui/pages/bridge/__snapshots__/index.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`Bridge renders the component with initial props 1`] = `
           data-theme="light"
           disabled=""
         >
-          Select token
+          Select token and amount
         </button>
       </div>
     </div>

diff --git a/ui/pages/bridge/prepare/bridge-cta-button.test.tsx b/ui/pages/bridge/prepare/bridge-cta-button.test.tsx
@@ -3,6 +3,10 @@ import { renderWithProvider } from '../../../../test/jest';
 import configureStore from '../../../store/store';
 import { createBridgeMockStore } from '../../../../test/jest/mock-store';
 import { CHAIN_IDS } from '../../../../shared/constants/network';
+import { mockBridgeQuotesNativeErc20 } from '../../../../test/data/bridge/mock-quotes-native-erc20';
+// TODO: Remove restricted import
+// eslint-disable-next-line import/no-restricted-paths
+import { RequestStatus } from '../../../../app/scripts/controllers/bridge/constants';
 import { BridgeCTAButton } from './bridge-cta-button';
 
 describe('BridgeCTAButton', () => {
@@ -25,6 +29,52 @@ describe('BridgeCTAButton', () => {
     expect(getByRole('button')).toBeDisabled();
   });
 
+  it('should render the component when amount is missing', () => {
+    const mockStore = createBridgeMockStore(
+      {
+        srcNetworkAllowlist: [CHAIN_IDS.MAINNET, CHAIN_IDS.OPTIMISM],
+        destNetworkAllowlist: [CHAIN_IDS.LINEA_MAINNET],
+      },
+      {
+        fromTokenInputValue: null,
+        fromToken: 'ETH',
+        toToken: 'ETH',
+        toChainId: CHAIN_IDS.LINEA_MAINNET,
+      },
+      {},
+    );
+    const { getByText, getByRole } = renderWithProvider(
+      <BridgeCTAButton />,
+      configureStore(mockStore),
+    );
+
+    expect(getByText('Enter amount')).toBeInTheDocument();
+    expect(getByRole('button')).toBeDisabled();
+  });
+
+  it('should render the component when amount and dest token is missing', () => {
+    const mockStore = createBridgeMockStore(
+      {
+        srcNetworkAllowlist: [CHAIN_IDS.MAINNET, CHAIN_IDS.OPTIMISM],
+        destNetworkAllowlist: [CHAIN_IDS.LINEA_MAINNET],
+      },
+      {
+        fromTokenInputValue: null,
+        fromToken: 'ETH',
+        toToken: null,
+        toChainId: CHAIN_IDS.LINEA_MAINNET,
+      },
+      {},
+    );
+    const { getByText, getByRole } = renderWithProvider(
+      <BridgeCTAButton />,
+      configureStore(mockStore),
+    );
+
+    expect(getByText('Select token and amount')).toBeInTheDocument();
+    expect(getByRole('button')).toBeDisabled();
+  });
+
   it('should render the component when tx is submittable', () => {
     const mockStore = createBridgeMockStore(
       {
@@ -37,14 +87,72 @@ describe('BridgeCTAButton', () => {
         toToken: 'ETH',
         toChainId: CHAIN_IDS.LINEA_MAINNET,
       },
-      {},
+      {
+        quotes: mockBridgeQuotesNativeErc20,
+        quotesLastFetched: Date.now(),
+        quotesLoadingStatus: RequestStatus.FETCHED,
+      },
+    );
+    const { getByText, getByRole } = renderWithProvider(
+      <BridgeCTAButton />,
+      configureStore(mockStore),
+    );
+
+    expect(getByText('Confirm')).toBeInTheDocument();
+    expect(getByRole('button')).not.toBeDisabled();
+  });
+
+  it('should disable the component when quotes are loading and there are no existing quotes', () => {
+    const mockStore = createBridgeMockStore(
+      {
+        srcNetworkAllowlist: [CHAIN_IDS.MAINNET, CHAIN_IDS.OPTIMISM],
+        destNetworkAllowlist: [CHAIN_IDS.LINEA_MAINNET],
+      },
+      {
+        fromTokenInputValue: 1,
+        fromToken: 'ETH',
+        toToken: 'ETH',
+        toChainId: CHAIN_IDS.LINEA_MAINNET,
+      },
+      {
+        quotes: [],
+        quotesLastFetched: Date.now(),
+        quotesLoadingStatus: RequestStatus.LOADING,
+      },
+    );
+    const { getByText, getByRole } = renderWithProvider(
+      <BridgeCTAButton />,
+      configureStore(mockStore),
+    );
+
+    expect(getByText('Fetching quotes...')).toBeInTheDocument();
+    expect(getByRole('button')).toBeDisabled();
+  });
+
+  it('should enable the component when quotes are loading and there are existing quotes', () => {
+    const mockStore = createBridgeMockStore(
+      {
+        srcNetworkAllowlist: [CHAIN_IDS.MAINNET, CHAIN_IDS.OPTIMISM],
+        destNetworkAllowlist: [CHAIN_IDS.LINEA_MAINNET],
+      },
+      {
+        fromTokenInputValue: 1,
+        fromToken: 'ETH',
+        toToken: 'ETH',
+        toChainId: CHAIN_IDS.LINEA_MAINNET,
+      },
+      {
+        quotes: mockBridgeQuotesNativeErc20,
+        quotesLastFetched: Date.now(),
+        quotesLoadingStatus: RequestStatus.LOADING,
+      },
     );
     const { getByText, getByRole } = renderWithProvider(
       <BridgeCTAButton />,
       configureStore(mockStore),
     );
 
-    expect(getByText('Bridge')).toBeInTheDocument();
+    expect(getByText('Confirm')).toBeInTheDocument();
     expect(getByRole('button')).not.toBeDisabled();
   });
 });
diff --git a/ui/pages/bridge/prepare/bridge-cta-button.tsx b/ui/pages/bridge/prepare/bridge-cta-button.tsx
@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { Button } from '../../../components/component-library';
 import {
+  getBridgeQuotes,
   getFromAmount,
   getFromChain,
   getFromToken,
@@ -22,16 +23,29 @@ export const BridgeCTAButton = () => {
   const fromAmount = useSelector(getFromAmount);
   const toAmount = useSelector(getToAmount);
 
+  const { isLoading } = useSelector(getBridgeQuotes);
+
   const isTxSubmittable =
     fromToken && toToken && fromChain && toChain && fromAmount && toAmount;
 
   const label = useMemo(() => {
+    if (isLoading && !isTxSubmittable) {
+      return t('swapFetchingQuotes');
+    }
+
+    if (!fromAmount) {
+      if (!toToken) {
+        return t('bridgeSelectTokenAndAmount');
+      }
+      return t('bridgeEnterAmount');
+    }
+
     if (isTxSubmittable) {
-      return t('bridge');
+      return t('confirm');
     }
 
     return t('swapSelectToken');
-  }, [isTxSubmittable]);
+  }, [isLoading, fromAmount, toToken, isTxSubmittable]);
 
   return (
     <Button

diff --git a/ui/pages/bridge/prepare/bridge-input-group.tsx b/ui/pages/bridge/prepare/bridge-input-group.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Hex } from '@metamask/utils';
+import { useSelector } from 'react-redux';
 import { SwapsTokenObject } from '../../../../shared/constants/swaps';
 import {
   Box,
@@ -27,6 +28,10 @@ import {
   CHAIN_ID_TOKEN_IMAGE_MAP,
 } from '../../../../shared/constants/network';
 import useLatestBalance from '../../../hooks/bridge/useLatestBalance';
+import {
+  getBridgeQuotes,
+  getRecommendedQuote,
+} from '../../../ducks/bridge/selectors';
 
 const generateAssetFromToken = (
   chainId: Hex,
@@ -77,6 +82,9 @@ export const BridgeInputGroup = ({
 >) => {
   const t = useI18nContext();
 
+  const { isLoading } = useSelector(getBridgeQuotes);
+  const recommendedQuote = useSelector(getRecommendedQuote);
+
   const tokenFiatValue = useTokenFiatAmount(
     token?.address || undefined,
     amountFieldProps?.value?.toString() || '0x0',
@@ -125,7 +133,11 @@ export const BridgeInputGroup = ({
           <TextField
             type={TextFieldType.Number}
             className="amount-input"
-            placeholder="0"
+            placeholder={
+              isLoading && !recommendedQuote
+                ? t('bridgeCalculatingAmount')
+                : '0'
+            }
             onChange={(e) => {
               onAmountChange?.(e.target.value);
             }}