Skip to content

Commit 0d831b0

Browse files
infiniteflowerinfiniteflower
committed
fix: show totals in selected currency
1 parent a82d00a commit 0d831b0

4 files changed

Lines changed: 55 additions & 84 deletions

File tree

‎app/components/UI/Bridge/Views/BatchSellReview/BatchSellReview.test.tsx‎

Lines changed: 19 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,20 @@ const defaultQuoteData = {
2020
tokenSymbol: 'ETH',
2121
slippage: '2%',
2222
receivedAmount: '3,456.78 USDC',
23+
receivedAmountFiat: '$3,456.78',
2324
isLoading: false,
2425
},
2526
{
2627
key: '0x1:0x2222222222222222222222222222222222222222',
2728
tokenSymbol: 'UNI',
2829
slippage: '2%',
2930
receivedAmount: '500 USDC',
31+
receivedAmountFiat: '$500.00',
3032
isLoading: false,
3133
},
3234
],
3335
totalReceived: '3,956.78 USDC',
36+
totalReceivedFiat: '$3,956.78',
3437
minimumReceived: '3,900 USDC',
3538
isLoading: false,
3639
hasCompleteQuoteSet: true,
@@ -158,56 +161,6 @@ jest.mock('../../hooks/useBatchSellQuoteData', () => ({
158161
useBatchSellQuoteData: () => mockBatchSellQuoteData,
159162
}));
160163

161-
jest.mock('./BatchSellReviewTokenRow', () => {
162-
const ReactActual = jest.requireActual('react');
163-
const { Pressable, Text, View } = jest.requireActual('react-native');
164-
165-
return {
166-
BatchSellReviewTokenRow: ({
167-
isRemoveTokenDisabled,
168-
onRemovePress,
169-
onSlippagePress,
170-
percent,
171-
receivedAmount,
172-
isLoading,
173-
token,
174-
tokenKey,
175-
}: {
176-
isRemoveTokenDisabled?: boolean;
177-
onRemovePress: (token: BridgeToken) => void;
178-
onSlippagePress: (token: BridgeToken) => void;
179-
percent: number;
180-
receivedAmount: string;
181-
isLoading?: boolean;
182-
token: BridgeToken;
183-
tokenKey: string;
184-
}) =>
185-
ReactActual.createElement(
186-
View,
187-
{ testID: `batch-sell-review-token-row-${tokenKey}` },
188-
ReactActual.createElement(Text, null, token.symbol),
189-
isLoading
190-
? ReactActual.createElement(View, {
191-
testID: `batch-sell-review-token-amount-skeleton-${tokenKey}`,
192-
})
193-
: ReactActual.createElement(Text, null, receivedAmount),
194-
ReactActual.createElement(Text, null, `${percent}%`),
195-
ReactActual.createElement(Pressable, {
196-
onPress: () => onSlippagePress(token),
197-
testID: `batch-sell-review-customize-button-${tokenKey}`,
198-
}),
199-
ReactActual.createElement(Pressable, {
200-
accessibilityState: { disabled: Boolean(isRemoveTokenDisabled) },
201-
disabled: isRemoveTokenDisabled,
202-
onPress: isRemoveTokenDisabled
203-
? undefined
204-
: () => onRemovePress(token),
205-
testID: `batch-sell-review-remove-button-${tokenKey}`,
206-
}),
207-
),
208-
};
209-
});
210-
211164
describe('BatchSellReview', () => {
212165
beforeEach(() => {
213166
jest.clearAllMocks();
@@ -229,15 +182,15 @@ describe('BatchSellReview', () => {
229182
getByTestId(BatchSellReviewSelectorsIDs.CONTAINER),
230183
).toBeOnTheScreen();
231184
expect(getByText('Total received')).toBeOnTheScreen();
232-
expect(getByText('3,956.78 USDC')).toBeOnTheScreen();
185+
expect(getByText('$3,956.78')).toBeOnTheScreen();
233186
expect(
234187
getByTestId(BatchSellReviewSelectorsIDs.DESTINATION_TOKEN_PILL),
235188
).toBeOnTheScreen();
236189
expect(getByText('USDC')).toBeOnTheScreen();
237-
expect(getByText('ETH')).toBeOnTheScreen();
238-
expect(getByText('UNI')).toBeOnTheScreen();
239-
expect(getByText('3,456.78 USDC')).toBeOnTheScreen();
240-
expect(getByText('500 USDC')).toBeOnTheScreen();
190+
expect(getByText('1.498 ETH • 100%')).toBeOnTheScreen();
191+
expect(getByText('154.297 UNI • 100%')).toBeOnTheScreen();
192+
expect(getByText('$3,456.78')).toBeOnTheScreen();
193+
expect(getByText('$500.00')).toBeOnTheScreen();
241194
});
242195

243196
it('renders the quote loading screen', () => {
@@ -265,9 +218,10 @@ describe('BatchSellReview', () => {
265218
});
266219

267220
it('sets selected token percents to 100% on entry', () => {
268-
const { getAllByText } = render(<BatchSellReview />);
221+
const { getByText } = render(<BatchSellReview />);
269222

270-
expect(getAllByText('100%')).toHaveLength(mockSelectedTokens.length);
223+
expect(getByText('1.498 ETH • 100%')).toBeOnTheScreen();
224+
expect(getByText('154.297 UNI • 100%')).toBeOnTheScreen();
271225
});
272226

273227
it('enables the review button when quotes are available', () => {
@@ -317,12 +271,16 @@ describe('BatchSellReview', () => {
317271
tokenSymbol: 'ETH',
318272
slippage: '2%',
319273
receivedAmount: '3,456.78 USDC',
274+
receivedAmountFiat: '$3,456.78',
275+
isLoading: false,
320276
},
321277
{
322278
key: '0x1:0x2222222222222222222222222222222222222222',
323279
tokenSymbol: 'UNI',
324280
slippage: '2%',
325281
receivedAmount: '500 USDC',
282+
receivedAmountFiat: '$500.00',
283+
isLoading: false,
326284
},
327285
],
328286
totalReceived: '3,956.78 USDC',
@@ -346,12 +304,16 @@ describe('BatchSellReview', () => {
346304
tokenSymbol: 'ETH',
347305
slippage: '2%',
348306
receivedAmount: '3,456.78 USDC',
307+
receivedAmountFiat: '$3,456.78',
308+
isLoading: false,
349309
},
350310
{
351311
key: '0x1:0x2222222222222222222222222222222222222222',
352312
tokenSymbol: 'UNI',
353313
slippage: '2%',
354314
receivedAmount: '500 USDC',
315+
receivedAmountFiat: '$500.00',
316+
isLoading: false,
355317
},
356318
],
357319
totalReceived: '3,956.78 USDC',

‎app/components/UI/Bridge/Views/BatchSellReview/BatchSellReview.tsx‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -110,13 +110,6 @@ export function BatchSellReview() {
110110
>({});
111111
const updateBatchSellQuoteParams = useBatchSellQuoteRequest();
112112
const batchSellQuoteData = useBatchSellQuoteData();
113-
const quoteDetailsTokenData = useMemo(
114-
() =>
115-
batchSellQuoteData.tokenData.map(
116-
({ isLoading: _isLoading, ...data }) => data,
117-
),
118-
[batchSellQuoteData.tokenData],
119-
);
120113
const hasValidBatchSellInputs = useMemo(
121114
() =>
122115
Boolean(selectedDestinationToken) &&
@@ -250,16 +243,16 @@ export function BatchSellReview() {
250243

251244
const getQuoteDetailsParams = useCallback(
252245
() => ({
253-
tokenData: quoteDetailsTokenData,
246+
tokenData: batchSellQuoteData.tokenData,
254247
totalReceived: batchSellQuoteData.totalReceived,
255248
minimumReceived: batchSellQuoteData.minimumReceived,
256249
isLoading: batchSellQuoteData.isLoading,
257250
}),
258251
[
259252
batchSellQuoteData.isLoading,
260253
batchSellQuoteData.minimumReceived,
254+
batchSellQuoteData.tokenData,
261255
batchSellQuoteData.totalReceived,
262-
quoteDetailsTokenData,
263256
],
264257
);
265258

@@ -371,7 +364,7 @@ export function BatchSellReview() {
371364
fontWeight={FontWeight.Medium}
372365
color={TextColor.TextDefault}
373366
>
374-
{batchSellQuoteData.totalReceived}
367+
{batchSellQuoteData.totalReceivedFiat}
375368
</Text>
376369
)}
377370
<Button
@@ -424,7 +417,7 @@ export function BatchSellReview() {
424417
tokenKey={tokenKey}
425418
percent={percentsByTokenKey[tokenKey] ?? DEFAULT_PERCENT}
426419
receivedAmount={
427-
batchSellQuoteData.tokenData[index]?.receivedAmount ?? ''
420+
batchSellQuoteData.tokenData[index]?.receivedAmountFiat ?? ''
428421
}
429422
isLoading={
430423
batchSellQuoteData.tokenData[index]?.isLoading ??

‎app/components/UI/Bridge/hooks/useBatchSellQuoteData/index.ts‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
selectBatchSellDestToken,
77
selectBatchSellQuotes,
88
selectBatchSellSlippages,
9-
selectBatchSellSourceTokenAmounts,
109
selectBatchSellSourceTokens,
1110
} from '../../../../../core/redux/slices/bridge';
1211
import { selectCurrentCurrency } from '../../../../../selectors/currencyRateController';
@@ -27,6 +26,7 @@ interface BatchSellQuoteTokenData {
2726
tokenSymbol: string;
2827
slippage: string;
2928
receivedAmount: string;
29+
receivedAmountFiat: string;
3030
isLoading: boolean;
3131
}
3232

@@ -51,9 +51,6 @@ function formatFiatValue(
5151

5252
export function useBatchSellQuoteData() {
5353
const sourceTokens = useSelector(selectBatchSellSourceTokens);
54-
const batchSellSourceTokenAmounts = useSelector(
55-
selectBatchSellSourceTokenAmounts,
56-
);
5754
const selectedDestinationToken = useSelector(selectBatchSellDestToken);
5855
const batchSellSlippages = useSelector(selectBatchSellSlippages);
5956
const batchSellQuotes = useSelector(selectBatchSellQuotes);
@@ -82,12 +79,17 @@ export function useBatchSellQuoteData() {
8279
recommendedQuote?.toTokenAmount.amount,
8380
destinationTokenSymbol,
8481
),
82+
receivedAmountFiat: formatFiatValue(
83+
recommendedQuote?.toTokenAmount.valueInCurrency,
84+
currentCurrency,
85+
),
8586
isLoading: !recommendedQuote,
8687
};
8788
}),
8889
[
8990
batchSellSlippages,
9091
destinationTokenSymbol,
92+
currentCurrency,
9193
recommendedQuotes,
9294
sourceTokens,
9395
],
@@ -103,6 +105,12 @@ export function useBatchSellQuoteData() {
103105
hasCompleteQuoteSet ? batchSellQuotes.totalReceived.amount : undefined,
104106
destinationTokenSymbol,
105107
),
108+
totalReceivedFiat: hasCompleteQuoteSet
109+
? formatFiatValue(
110+
batchSellQuotes.totalReceived.valueInCurrency,
111+
currentCurrency,
112+
)
113+
: '-',
106114
minimumReceived: formatTokenAmountWithSymbol(
107115
hasCompleteQuoteSet ? batchSellQuotes.minimumReceived.amount : undefined,
108116
destinationTokenSymbol,

‎app/components/UI/Bridge/hooks/useBatchSellQuoteData/useBatchSellQuoteData.test.ts‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -47,18 +47,20 @@ let mockBatchSellSourceTokenAmounts: Partial<
4747
[uniAssetId]: '2',
4848
};
4949
let mockBatchSellQuotes: {
50-
recommendedQuotes: ({ toTokenAmount: { amount: string } } | null)[];
51-
totalReceived: { amount: string };
52-
minimumReceived: { amount: string };
50+
recommendedQuotes: ({
51+
toTokenAmount: { amount: string; valueInCurrency: string | null };
52+
} | null)[];
53+
totalReceived: { amount: string; valueInCurrency: string | null };
54+
minimumReceived: { amount: string; valueInCurrency: string | null };
5355
totalNetworkFee: { amount: string; valueInCurrency: string };
5456
isLoading: boolean;
5557
} = {
5658
recommendedQuotes: [
57-
{ toTokenAmount: { amount: '123' } },
58-
{ toTokenAmount: { amount: '77' } },
59+
{ toTokenAmount: { amount: '123', valueInCurrency: '123.45' } },
60+
{ toTokenAmount: { amount: '77', valueInCurrency: '77.89' } },
5961
],
60-
totalReceived: { amount: '200' },
61-
minimumReceived: { amount: '190' },
62+
totalReceived: { amount: '200', valueInCurrency: '201.34' },
63+
minimumReceived: { amount: '190', valueInCurrency: '191.23' },
6264
totalNetworkFee: { amount: '1.2', valueInCurrency: '1.25' },
6365
isLoading: false,
6466
};
@@ -90,11 +92,11 @@ describe('useBatchSellQuoteData', () => {
9092
};
9193
mockBatchSellQuotes = {
9294
recommendedQuotes: [
93-
{ toTokenAmount: { amount: '123' } },
94-
{ toTokenAmount: { amount: '77' } },
95+
{ toTokenAmount: { amount: '123', valueInCurrency: '123.45' } },
96+
{ toTokenAmount: { amount: '77', valueInCurrency: '77.89' } },
9597
],
96-
totalReceived: { amount: '200' },
97-
minimumReceived: { amount: '190' },
98+
totalReceived: { amount: '200', valueInCurrency: '201.34' },
99+
minimumReceived: { amount: '190', valueInCurrency: '191.23' },
98100
totalNetworkFee: { amount: '1.2', valueInCurrency: '1.25' },
99101
isLoading: false,
100102
};
@@ -106,6 +108,7 @@ describe('useBatchSellQuoteData', () => {
106108
expect(result.current.hasCompleteQuoteSet).toBe(true);
107109
expect(result.current.isLoading).toBe(false);
108110
expect(result.current.totalReceived).toBe('200 USDC');
111+
expect(result.current.totalReceivedFiat).toBe('$201.34');
109112
expect(result.current.minimumReceived).toBe('190 USDC');
110113
expect(result.current.networkFee).toBe('1.2 USDC');
111114
expect(result.current.networkFeeFiat).toBe('$1.25');
@@ -114,12 +117,14 @@ describe('useBatchSellQuoteData', () => {
114117
key: ethAssetId,
115118
tokenSymbol: 'ETH',
116119
receivedAmount: '123 USDC',
120+
receivedAmountFiat: '$123.45',
117121
isLoading: false,
118122
}),
119123
expect.objectContaining({
120124
key: uniAssetId,
121125
tokenSymbol: 'UNI',
122126
receivedAmount: '77 USDC',
127+
receivedAmountFiat: '$77.89',
123128
isLoading: false,
124129
}),
125130
]);
@@ -128,7 +133,10 @@ describe('useBatchSellQuoteData', () => {
128133
it('marks rows without recommended quotes as loading', () => {
129134
mockBatchSellQuotes = {
130135
...mockBatchSellQuotes,
131-
recommendedQuotes: [{ toTokenAmount: { amount: '123' } }, null],
136+
recommendedQuotes: [
137+
{ toTokenAmount: { amount: '123', valueInCurrency: '123.45' } },
138+
null,
139+
],
132140
};
133141

134142
const { result } = renderHook(() => useBatchSellQuoteData());

0 commit comments

Comments
 (0)