Skip to content

Commit a568618

Browse files
abretonc7sabretonc7s
committed
Merge remote-tracking branch 'origin/main' into feat/perps/recipe-flows-0321-2009
2 parents 0f23f2b + 174afa0 commit a568618

17 files changed

Lines changed: 340 additions & 114 deletions

File tree

‎app/components/UI/MarketInsights/Views/MarketInsightsView/MarketInsightsViewHeader.tsx‎

Lines changed: 21 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
import React from 'react';
2-
import { Pressable } from 'react-native';
3-
import { useTailwind } from '@metamask/design-system-twrnc-preset';
42
import {
53
Box,
64
Text,
75
TextVariant,
8-
Icon,
96
IconName,
10-
IconSize,
11-
IconColor,
7+
ButtonIcon,
8+
ButtonIconSize,
129
BoxFlexDirection,
1310
BoxAlignItems,
1411
FontWeight,
@@ -22,31 +19,25 @@ interface MarketInsightsViewHeaderProps {
2219

2320
const MarketInsightsViewHeader: React.FC<MarketInsightsViewHeaderProps> = ({
2421
onBackPress,
25-
}) => {
26-
const tw = useTailwind();
27-
28-
return (
29-
<Box
30-
flexDirection={BoxFlexDirection.Row}
31-
alignItems={BoxAlignItems.Center}
32-
twClassName="px-1 py-2"
33-
testID={MarketInsightsSelectorsIDs.VIEW_HEADER}
34-
>
35-
<Pressable onPress={onBackPress} style={tw.style('p-2')} hitSlop={8}>
36-
<Icon
37-
name={IconName.ArrowLeft}
38-
size={IconSize.Md}
39-
color={IconColor.IconDefault}
40-
/>
41-
</Pressable>
42-
<Box twClassName="flex-1 items-center">
43-
<Text variant={TextVariant.HeadingSm} fontWeight={FontWeight.Bold}>
44-
{strings('market_insights.title')}
45-
</Text>
46-
</Box>
47-
<Box twClassName="w-10" />
22+
}) => (
23+
<Box
24+
flexDirection={BoxFlexDirection.Row}
25+
alignItems={BoxAlignItems.Center}
26+
twClassName="px-2 py-2"
27+
testID={MarketInsightsSelectorsIDs.VIEW_HEADER}
28+
>
29+
<ButtonIcon
30+
iconName={IconName.ArrowLeft}
31+
size={ButtonIconSize.Md}
32+
onPress={onBackPress}
33+
/>
34+
<Box twClassName="flex-1 items-center">
35+
<Text variant={TextVariant.HeadingSm} fontWeight={FontWeight.Bold}>
36+
{strings('market_insights.title')}
37+
</Text>
4838
</Box>
49-
);
50-
};
39+
<Box twClassName="w-10" />
40+
</Box>
41+
);
5142

5243
export default MarketInsightsViewHeader;

‎app/components/UI/MarketInsights/components/MarketInsightsEntryCard/MarketInsightsEntryCard.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect } from 'react';
2-
import { Pressable } from 'react-native';
2+
import { Pressable, View } from 'react-native';
33
import { useTailwind } from '@metamask/design-system-twrnc-preset';
44
import {
55
Box,
@@ -10,6 +10,8 @@ import {
1010
IconName,
1111
IconSize,
1212
IconColor,
13+
ButtonIcon,
14+
ButtonIconSize,
1315
BoxFlexDirection,
1416
BoxAlignItems,
1517
} from '@metamask/design-system-react-native';
@@ -63,11 +65,13 @@ const MarketInsightsEntryCard: React.FC<MarketInsightsEntryCardProps> = ({
6365
<Text variant={TextVariant.HeadingMd} color={TextColor.TextDefault}>
6466
{strings('market_insights.title')}
6567
</Text>
66-
<Icon
67-
name={IconName.ArrowRight}
68-
size={IconSize.Sm}
69-
color={IconColor.IconDefault}
70-
/>
68+
<View pointerEvents="none" style={tw.style('ml-1')}>
69+
<ButtonIcon
70+
iconName={IconName.ArrowRight}
71+
size={ButtonIconSize.Sm}
72+
iconProps={{ color: IconColor.IconAlternative }}
73+
/>
74+
</View>
7175
</Box>
7276

7377
<Box gap={3}>

‎app/components/UI/Ramp/Aggregator/Views/OrdersList/__snapshots__/OrdersList.test.tsx.snap‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ exports[`OrdersList renders buy only correctly when pressing buy filter 1`] = `
127127
{
128128
"account": "0xe64dD0AB5ad7e8C5F2bf6Ce75C34e187af8b920A",
129129
"createdAt": 0,
130-
"cryptoAmount": 0,
130+
"cryptoAmount": "...",
131131
"cryptoCurrencySymbol": "ETH",
132132
"fiatAmount": undefined,
133133
"fiatCurrencyCode": "USD",
@@ -1336,7 +1336,7 @@ exports[`OrdersList renders buy only correctly when pressing buy filter 1`] = `
13361336
}
13371337
testID="orders-list-crypto-amount-buy-6"
13381338
>
1339-
0
1339+
...
13401340
13411341
ETH
13421342
</Text>
@@ -1505,7 +1505,7 @@ exports[`OrdersList renders correctly 1`] = `
15051505
{
15061506
"account": "0xe64dD0AB5ad7e8C5F2bf6Ce75C34e187af8b920A",
15071507
"createdAt": 0,
1508-
"cryptoAmount": 0,
1508+
"cryptoAmount": "...",
15091509
"cryptoCurrencySymbol": "ETH",
15101510
"fiatAmount": undefined,
15111511
"fiatCurrencyCode": "USD",
@@ -2864,7 +2864,7 @@ exports[`OrdersList renders correctly 1`] = `
28642864
}
28652865
testID="orders-list-crypto-amount-buy-7"
28662866
>
2867-
0
2867+
...
28682868
28692869
ETH
28702870
</Text>
@@ -4979,7 +4979,7 @@ exports[`OrdersList resets filter to all after other filter was set 2`] = `
49794979
{
49804980
"account": "0xe64dD0AB5ad7e8C5F2bf6Ce75C34e187af8b920A",
49814981
"createdAt": 0,
4982-
"cryptoAmount": 0,
4982+
"cryptoAmount": "...",
49834983
"cryptoCurrencySymbol": "ETH",
49844984
"fiatAmount": undefined,
49854985
"fiatCurrencyCode": "USD",
@@ -6338,7 +6338,7 @@ exports[`OrdersList resets filter to all after other filter was set 2`] = `
63386338
}
63396339
testID="orders-list-crypto-amount-buy-7"
63406340
>
6341-
0
6341+
...
63426342
63436343
ETH
63446344
</Text>

‎app/components/UI/Ramp/Views/OrderDetails/OrderContent.test.tsx‎

Lines changed: 110 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ import { type RampsOrder, RampsOrderStatus } from '@metamask/ramps-controller';
77
import Clipboard from '@react-native-clipboard/clipboard';
88
import InAppBrowser from 'react-native-inappbrowser-reborn';
99

10+
type RampsOrderWithPaymentDetails = RampsOrder & {
11+
paymentDetails: {
12+
fiatCurrency: string;
13+
paymentMethod: string;
14+
fields: { name: string; id: string; value: string }[];
15+
}[];
16+
};
17+
1018
const mockNavigate = jest.fn();
1119
jest.mock('@react-navigation/native', () => ({
1220
...jest.requireActual('@react-navigation/native'),
@@ -82,13 +90,14 @@ describe('OrderContent', () => {
8290
const pendingOrder: RampsOrder = {
8391
...mockOrder,
8492
fiatAmount: 0,
93+
cryptoAmount: 0,
8594
status: RampsOrderStatus.Pending,
8695
};
8796
renderOrder(pendingOrder);
8897
expect(screen.toJSON()).toMatchSnapshot();
8998
});
9099

91-
it('shows ellipsis for token amount when cryptoAmount is 0 or missing', () => {
100+
it('shows placeholder for token amount when cryptoAmount is 0 or missing', () => {
92101
const orderWithZeroCrypto: RampsOrder = {
93102
...mockOrder,
94103
cryptoAmount: 0,
@@ -177,6 +186,84 @@ describe('OrderContent', () => {
177186
).toBeOnTheScreen();
178187
});
179188

189+
it('does not render bank details section when paymentDetails is absent', () => {
190+
renderOrder(mockOrder);
191+
192+
expect(screen.queryByText('To complete your order')).toBeNull();
193+
});
194+
195+
it('does not render bank details section when paymentDetails has no matching fields', () => {
196+
const orderWithPaymentDetails: RampsOrderWithPaymentDetails = {
197+
...mockOrder,
198+
paymentDetails: [
199+
{
200+
fiatCurrency: 'USD',
201+
paymentMethod: 'credit_debit_card',
202+
fields: [],
203+
},
204+
],
205+
};
206+
207+
renderOrder(orderWithPaymentDetails);
208+
209+
expect(screen.queryByText('To complete your order')).toBeNull();
210+
});
211+
212+
it('renders bank details section when paymentDetails has bank transfer fields', () => {
213+
const orderWithPaymentDetails: RampsOrderWithPaymentDetails = {
214+
...mockOrder,
215+
paymentDetails: [
216+
{
217+
fiatCurrency: 'USD',
218+
paymentMethod: 'manual_bank_transfer',
219+
fields: [
220+
{ name: 'Amount', id: 'amount', value: '$100.00' },
221+
{
222+
name: 'Routing Number',
223+
id: 'routingNumber',
224+
value: '021000021',
225+
},
226+
{
227+
name: 'Account Number',
228+
id: 'accountNumber',
229+
value: '1234567890',
230+
},
231+
],
232+
},
233+
],
234+
};
235+
236+
renderOrder(orderWithPaymentDetails);
237+
238+
expect(screen.getByText('To complete your order')).toBeOnTheScreen();
239+
expect(screen.getByText(/Routing number/i)).toBeOnTheScreen();
240+
expect(screen.getByText('021000021')).toBeOnTheScreen();
241+
});
242+
243+
it('renders bank details section when paymentDetails only includes SEPA fields', () => {
244+
const orderWithPaymentDetails: RampsOrderWithPaymentDetails = {
245+
...mockOrder,
246+
paymentDetails: [
247+
{
248+
fiatCurrency: 'EUR',
249+
paymentMethod: 'sepa_bank_transfer',
250+
fields: [
251+
{ name: 'IBAN', id: 'iban', value: 'DE89370400440532013000' },
252+
{ name: 'BIC', id: 'bic', value: 'COBADEFFXXX' },
253+
],
254+
},
255+
],
256+
};
257+
258+
renderOrder(orderWithPaymentDetails);
259+
260+
expect(screen.getByText('To complete your order')).toBeOnTheScreen();
261+
expect(screen.getByText(/^IBAN$/i)).toBeOnTheScreen();
262+
expect(screen.getByText('DE89370400440532013000')).toBeOnTheScreen();
263+
expect(screen.getByText(/^BIC$/i)).toBeOnTheScreen();
264+
expect(screen.getByText('COBADEFFXXX')).toBeOnTheScreen();
265+
});
266+
180267
it('truncates long crypto amounts to 5 decimal places', () => {
181268
const longDecimalOrder: RampsOrder = {
182269
...mockOrder,
@@ -195,11 +282,11 @@ describe('OrderContent', () => {
195282
};
196283
renderOrder(tinyAmountOrder);
197284
const tokenAmount = screen.getByTestId('ramps-order-details-token-amount');
198-
// 0.00000614 has 5 leading zeros → "0.0₅614"
285+
// 0.00000614 has 5 leading zeros -> "0.0₅614"
199286
expect(tokenAmount).toHaveTextContent('0.0₅614 ETH');
200287
});
201288

202-
it('shows "..." when cryptoAmount is missing', () => {
289+
it('shows placeholder when cryptoAmount is missing', () => {
203290
const noAmountOrder: RampsOrder = {
204291
...mockOrder,
205292
cryptoAmount: undefined as unknown as number,
@@ -209,14 +296,32 @@ describe('OrderContent', () => {
209296
expect(tokenAmount).toHaveTextContent('... ETH');
210297
});
211298

212-
it('renders "0" when cryptoAmount is zero', () => {
299+
it('shows placeholder when cryptoAmount is zero', () => {
213300
const zeroAmountOrder: RampsOrder = {
214301
...mockOrder,
215302
cryptoAmount: 0,
216303
};
217304
renderOrder(zeroAmountOrder);
218305
const tokenAmount = screen.getByTestId('ramps-order-details-token-amount');
219-
expect(tokenAmount).toHaveTextContent('0 ETH');
306+
expect(tokenAmount).toHaveTextContent('... ETH');
307+
});
308+
309+
it('shows placeholder amounts for terminal orders with no amounts', () => {
310+
const failedOrder: RampsOrder = {
311+
...mockOrder,
312+
cryptoAmount: 0,
313+
fiatAmount: 0,
314+
totalFeesFiat: 0,
315+
status: RampsOrderStatus.Failed,
316+
};
317+
318+
renderOrder(failedOrder);
319+
320+
expect(screen.getByText('Failed')).toBeOnTheScreen();
321+
expect(
322+
screen.getByTestId('ramps-order-details-token-amount'),
323+
).toHaveTextContent('... ETH');
324+
expect(screen.getAllByText('...')).toHaveLength(2);
220325
});
221326

222327
it('does not render info row when statusDescription is absent', () => {

0 commit comments

Comments
 (0)