diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index ff895898bf4d..b731ae3082f1 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -745,8 +745,7 @@ "message": "Beta" }, "betaHeaderText": { - "message": "This is a beta version. Please report bugs $1", - "description": "$1 represents the words 'here' in a hyperlink" + "message": "This is a beta version. Please report bugs $1" }, "betaMetamaskInstitutionalVersion": { "message": "MetaMask Institutional Beta Version" @@ -3910,7 +3909,8 @@ "description": "$1 represents the words 'how to cancel or speed up a transaction' in a hyperlink" }, "pendingTransactionAlertMessageHyperlink": { - "message": "how to cancel or speed up a transaction" + "message": "how to cancel or speed up a transaction", + "description": "The text for the hyperlink in the pending transaction alert message" }, "pendingTransactionInfo": { "message": "This transaction will not process until that one is complete." diff --git a/test/integration/confirmations/transactions/alerts.test.tsx b/test/integration/confirmations/transactions/alerts.test.tsx index 1bbf9d1fd2c5..ae033e66d887 100644 --- a/test/integration/confirmations/transactions/alerts.test.tsx +++ b/test/integration/confirmations/transactions/alerts.test.tsx @@ -362,7 +362,7 @@ describe('Contract Interaction Confirmation Alerts', () => { expect( await screen.findByTestId('alert-modal__selected-alert'), ).toHaveTextContent( - 'This transaction won’t go through until a previous transaction is complete. Learn how to cancel or speed up a transaction.', + "This transaction won't go through until a previous transaction is complete. Learn how to cancel or speed up a transaction.", ); }); diff --git a/ui/components/app/alert-system/general-alert/general-alert.tsx b/ui/components/app/alert-system/general-alert/general-alert.tsx index 5ac2b2a335fb..1f37d4babbf0 100644 --- a/ui/components/app/alert-system/general-alert/general-alert.tsx +++ b/ui/components/app/alert-system/general-alert/general-alert.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { ReactNode } from 'react'; import { BannerAlert, Box, @@ -21,7 +21,7 @@ import { AlertProvider } from '../alert-provider'; import { AlertSeverity } from '../../../../ducks/confirm-alerts/confirm-alerts'; export type GeneralAlertProps = { - description: string; + description: string | ReactNode; details?: React.ReactNode | string[]; onClickSupportLink?: () => void; provider?: SecurityProvider; diff --git a/ui/components/component-library/banner-base/banner-base.types.ts b/ui/components/component-library/banner-base/banner-base.types.ts index 61e7c6085e07..6f86c1d12901 100644 --- a/ui/components/component-library/banner-base/banner-base.types.ts +++ b/ui/components/component-library/banner-base/banner-base.types.ts @@ -31,7 +31,7 @@ export interface BannerBaseStyleUtilityProps extends StyleUtilityProps { /** * The description is the content area below BannerBase title */ - description?: string; + description?: string | React.ReactNode; /** * Additional props to pass to the `Text` component used for the `description` text */ diff --git a/ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.test.ts b/ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.test.ts index b9b3d12dc7d0..2bdf0524403d 100644 --- a/ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.test.ts +++ b/ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.test.ts @@ -4,14 +4,34 @@ import { TransactionStatus, TransactionType, } from '@metamask/transaction-controller'; - -import { getMockConfirmState } from '../../../../../../test/data/confirmations/helper'; +import { useSelector } from 'react-redux'; +import { useParams } from 'react-router-dom'; import { genUnapprovedContractInteractionConfirmation } from '../../../../../../test/data/confirmations/contract-interaction'; +import { getMockConfirmState } from '../../../../../../test/data/confirmations/helper'; import { renderHookWithConfirmContextProvider } from '../../../../../../test/lib/confirmations/render-helpers'; -import { Severity } from '../../../../../helpers/constants/design-system'; import { RowAlertKey } from '../../../../../components/app/confirm/info/row/constants'; +import { Severity } from '../../../../../helpers/constants/design-system'; +import { + getRedesignedTransactionsEnabled, + submittedPendingTransactionsSelector, +} from '../../../../../selectors'; +import { PendingTransactionAlertMessage } from './PendingTransactionAlertMessage'; import { usePendingTransactionAlerts } from './usePendingTransactionAlerts'; +jest.mock('react-redux', () => ({ + ...jest.requireActual('react-redux'), + useSelector: jest.fn(), +})); + +jest.mock('./PendingTransactionAlertMessage', () => ({ + PendingTransactionAlertMessage: () => 'PendingTransactionAlertMessage', +})); + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useParams: jest.fn().mockReturnValue({ id: 'mock-transaction-id' }), +})); + const ACCOUNT_ADDRESS = '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'; const TRANSACTION_ID_MOCK = '123-456'; @@ -63,8 +83,12 @@ function runHook({ } describe('usePendingTransactionAlerts', () => { + const useSelectorMock = useSelector as jest.Mock; + beforeEach(() => { jest.resetAllMocks(); + + (useParams as jest.Mock).mockReturnValue({ id: 'mock-transaction-id' }); }); it('returns no alerts if no confirmation', () => { @@ -121,6 +145,20 @@ describe('usePendingTransactionAlerts', () => { }); it('returns alert if submitted transaction', () => { + useSelectorMock.mockImplementation((selector) => { + if (selector === submittedPendingTransactionsSelector) { + return [ + { name: 'first transaction', id: '1' }, + { name: 'second transaction', id: '2' }, + ]; + } else if (selector === getRedesignedTransactionsEnabled) { + return true; + } else if (selector.toString().includes('getUnapprovedTransaction')) { + return { type: TransactionType.contractInteraction }; + } + return undefined; + }); + const alerts = runHook({ currentConfirmation: CONFIRMATION_MOCK, transactions: [TRANSACTION_META_MOCK], @@ -130,8 +168,7 @@ describe('usePendingTransactionAlerts', () => { { field: RowAlertKey.Speed, key: 'pendingTransactions', - message: - 'This transaction won’t go through until a previous transaction is complete. Learn how to cancel or speed up a transaction.', + message: PendingTransactionAlertMessage(), reason: 'Pending transaction', severity: Severity.Warning, }, diff --git a/ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.ts b/ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.ts index 7e148308a02e..5394dcfbcf09 100644 --- a/ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.ts +++ b/ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.ts @@ -18,10 +18,8 @@ export function usePendingTransactionAlerts(): Alert[] { const isValidType = isCorrectDeveloperTransactionType(type); - // const hasPendingTransactions = - // isValidType && Boolean(pendingTransactions.length); - - const hasPendingTransactions = true; + const hasPendingTransactions = + isValidType && Boolean(pendingTransactions.length); return useMemo(() => { if (!hasPendingTransactions) {