Skip to content

Commit b377066

Browse files
authored
feat: MUSD-128 conditionally render bridge-time-row based on transaction type (MetaMask#23552)
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** Add conditional rendering of `bridge-time-row` based on transaction type. For mUSD conversion we want the time estimate hidden. <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: add conditional rendering of bridge-time-row by tx type ## **Related issues** Fixes: [MUSD-128: Hide "estimated time" from quote screen](https://consensyssoftware.atlassian.net/browse/MUSD-128) ## **Manual testing steps** ```gherkin Feature: Bridge Time Row Visibility Scenario: user views confirmation for mUSD conversion transaction Given the user is on the confirmation screen for a mUSD conversion transaction When the user views the transaction details Then the bridge estimated time row is not displayed Scenario: user views loading state for mUSD conversion transaction Given the user is on the confirmation screen for a mUSD conversion transaction And the bridge quotes are loading When the user views the transaction details Then the bridge time skeleton loader is not displayed ``` ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> Time estimate is displayed https://github.com/user-attachments/assets/f910fd34-4f1f-4ca0-b831-159d3c8fa04a ### **After** <!-- [screenshots/recordings] --> Time estimate is hidden https://github.com/user-attachments/assets/3a6d593e-98e2-467f-996c-91421e39996c ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Conditionally hides the bridge estimated time row and skeleton for `musdConversion` transactions. > > - **Confirmations UI**: > - Add conditional rendering in `bridge-time-row.tsx` to hide time estimate and skeleton when transaction type matches `TransactionType.musdConversion` via `hasTransactionType` and `HIDE_TYPES`. > - Preserve existing behavior (show skeleton when loading, show estimate when quotes exist) for other transaction types; keep same-chain display as `< 10 sec`. > - **Tests**: > - Update `bridge-time-row.test.tsx` to support injecting transaction `type` and add cases asserting no skeleton/estimate for `musdConversion`. > - Retain and verify existing duration formatting and same-chain logic. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit ca077f9. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent aeb8a38 commit b377066

2 files changed

Lines changed: 38 additions & 4 deletions

File tree

app/components/Views/confirmations/components/rows/bridge-time-row/bridge-time-row.test.tsx

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,27 @@ import {
1313
TransactionPayQuote,
1414
TransactionPayTotals,
1515
} from '@metamask/transaction-pay-controller';
16+
import { TransactionType } from '@metamask/transaction-controller';
1617
import { Hex, Json } from '@metamask/utils';
1718
import { useTransactionPayToken } from '../../../hooks/pay/useTransactionPayToken';
1819

1920
jest.mock('../../../hooks/pay/useTransactionPayData');
2021
jest.mock('../../../hooks/pay/useTransactionPayToken');
2122

22-
function render() {
23+
function render(options: { type?: TransactionType } = {}) {
2324
const state = merge(
2425
{},
2526
simpleSendTransactionControllerMock,
2627
transactionApprovalControllerMock,
28+
options.type && {
29+
engine: {
30+
backgroundState: {
31+
TransactionController: {
32+
transactions: [{ type: options.type }],
33+
},
34+
},
35+
},
36+
},
2737
);
2838

2939
return renderWithProvider(<BridgeTimeRow />, { state });
@@ -76,7 +86,6 @@ describe('BridgeTimeRow', () => {
7686
useTransactionPayTotalsMock.mockReturnValue({
7787
estimatedDuration: 120,
7888
} as TransactionPayTotals);
79-
8089
useTransactionPayTokenMock.mockReturnValue({
8190
payToken: { chainId: '0x1' as Hex },
8291
} as ReturnType<typeof useTransactionPayToken>);
@@ -93,4 +102,22 @@ describe('BridgeTimeRow', () => {
93102

94103
expect(getByTestId(`bridge-time-row-skeleton`)).toBeDefined();
95104
});
105+
106+
it('does not render skeleton when transaction type is in HIDE_TYPES', () => {
107+
useIsTransactionPayLoadingMock.mockReturnValue(true);
108+
109+
const { queryByTestId } = render({ type: TransactionType.musdConversion });
110+
111+
expect(queryByTestId('bridge-time-row-skeleton')).toBeNull();
112+
});
113+
114+
it('does not render when transaction type is in HIDE_TYPES', () => {
115+
useTransactionPayTotalsMock.mockReturnValue({
116+
estimatedDuration: 60,
117+
} as TransactionPayTotals);
118+
119+
const { queryByText } = render({ type: TransactionType.musdConversion });
120+
121+
expect(queryByText('1 min')).toBeNull();
122+
});
96123
});

app/components/Views/confirmations/components/rows/bridge-time-row/bridge-time-row.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,24 @@ import {
1313
import { useTransactionPayToken } from '../../../hooks/pay/useTransactionPayToken';
1414
import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTransactionMetadataRequest';
1515
import { InfoRowSkeleton, InfoRowVariant } from '../../UI/info-row/info-row';
16+
import { TransactionType } from '@metamask/transaction-controller';
17+
import { hasTransactionType } from '../../../utils/transaction';
1618

1719
const SAME_CHAIN_DURATION_SECONDS = '< 10';
1820

21+
const HIDE_TYPES = [TransactionType.musdConversion];
22+
1923
export function BridgeTimeRow() {
2024
const isLoading = useIsTransactionPayLoading();
2125
const { estimatedDuration } = useTransactionPayTotals() ?? {};
2226
const quotes = useTransactionPayQuotes();
2327
const { payToken } = useTransactionPayToken();
24-
const { chainId } = useTransactionMetadataRequest() ?? {};
28+
const transactionMetadata = useTransactionMetadataRequest();
29+
const { chainId } = transactionMetadata ?? {};
2530

26-
const showEstimate = isLoading || Boolean(quotes?.length);
31+
const showEstimate =
32+
!hasTransactionType(transactionMetadata, HIDE_TYPES) &&
33+
(isLoading || Boolean(quotes?.length));
2734

2835
if (!showEstimate) {
2936
return null;

0 commit comments

Comments
 (0)