Skip to content

Commit 1448df0

Browse files
pedronfigueiredopedronfigueiredo
committed
Display Unlimited for really large spending caps on Permit
1 parent 07d4265 commit 1448df0

File tree

7 files changed

+77
-30
lines changed

7 files changed

+77
-30
lines changed

‎test/integration/confirmations/signatures/permit-batch.test.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -88,9 +88,9 @@ describe('Permit Batch Signature Tests', () => {
8888
"You're giving the spender permission to spend this many tokens from your account.",
8989
'Spending cap',
9090
'0xA0b86...6eB48',
91-
'1,461,501,637,3...',
91+
'Unlimited',
9292
'0xb0B86...6EB48',
93-
'2,461,501,637,3...',
93+
'Unlimited',
9494
];
9595

9696
verifyDetails(simulationSection, simulationDetails);

‎test/integration/confirmations/signatures/permit-single.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ describe('Permit Single Signature Tests', () => {
8686
"You're giving the spender permission to spend this many tokens from your account.",
8787
'Spending cap',
8888
'0xA0b86...6eB48',
89-
'1,461,501,637,3...',
89+
'Unlimited',
9090
];
9191

9292
expect(simulationSection).toBeInTheDocument();

‎ui/pages/confirmations/components/confirm/info/approve/hooks/use-approve-token-simulation.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { formatAmount } from '../../../../simulation-details/formatAmount';
1010
import { useDecodedTransactionData } from '../../hooks/useDecodedTransactionData';
1111
import { useIsNFT } from './use-is-nft';
1212

13-
const UNLIMITED_THRESHOLD = 10 ** 15;
13+
export const UNLIMITED_THRESHOLD = 10 ** 15;
1414

1515
function isSpendingCapUnlimited(decodedSpendingCap: number) {
1616
return decodedSpendingCap >= UNLIMITED_THRESHOLD;

‎ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/decoded-simulation/decoded-simulation.test.tsx

+30-1
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,35 @@ const decodingDataBidding: DecodingDataStateChanges = [
7878

7979
describe('DecodedSimulation', () => {
8080
it('renders component correctly', async () => {
81+
const state = getMockTypedSignConfirmStateForRequest({
82+
...permitSignatureMsg,
83+
decodingLoading: false,
84+
decodingData: {
85+
...decodingData,
86+
stateChanges: decodingData.stateChanges
87+
? [
88+
{
89+
...decodingData.stateChanges[0],
90+
amount: '12345',
91+
},
92+
]
93+
: [],
94+
},
95+
});
96+
97+
const mockStore = configureMockStore([])(state);
98+
99+
const { findByText } = renderWithConfirmContextProvider(
100+
<PermitSimulation />,
101+
mockStore,
102+
);
103+
104+
expect(await findByText('Estimated changes')).toBeInTheDocument();
105+
expect(await findByText('Spending cap')).toBeInTheDocument();
106+
expect(await findByText('12,345')).toBeInTheDocument();
107+
});
108+
109+
it('renders component correctly for a very large amount', async () => {
81110
const state = getMockTypedSignConfirmStateForRequest({
82111
...permitSignatureMsg,
83112
decodingLoading: false,
@@ -92,7 +121,7 @@ describe('DecodedSimulation', () => {
92121

93122
expect(await findByText('Estimated changes')).toBeInTheDocument();
94123
expect(await findByText('Spending cap')).toBeInTheDocument();
95-
expect(await findByText('1,461,501,637,3...')).toBeInTheDocument();
124+
expect(await findByText('Unlimited')).toBeInTheDocument();
96125
});
97126

98127
it('render correctly for ERC712 token', async () => {

‎ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/value-display/value-display.tsx

+29-17
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ import {
3030
import Name from '../../../../../../../../components/app/name/name';
3131
import { TokenDetailsERC20 } from '../../../../../../utils/token';
3232
import { getAmountColors } from '../../../utils';
33+
import { useI18nContext } from '../../../../../../../../hooks/useI18nContext';
34+
import { UNLIMITED_THRESHOLD } from '../../../approve/hooks/use-approve-token-simulation';
3335

3436
type PermitSimulationValueDisplayParams = {
3537
/** ID of the associated chain. */
@@ -69,6 +71,8 @@ const PermitSimulationValueDisplay: React.FC<
6971
credit,
7072
debit,
7173
}) => {
74+
const t = useI18nContext();
75+
7276
const exchangeRate = useTokenExchangeRate(tokenContract);
7377

7478
const tokenDetails = useGetTokenStandardAndDetails(tokenContract);
@@ -88,18 +92,24 @@ const PermitSimulationValueDisplay: React.FC<
8892
return undefined;
8993
}, [exchangeRate, tokenDecimals, value]);
9094

91-
const { tokenValue, tokenValueMaxPrecision } = useMemo(() => {
92-
if (!value || tokenId) {
93-
return { tokenValue: null, tokenValueMaxPrecision: null };
94-
}
95+
const { tokenValue, tokenValueMaxPrecision, shouldShowUnlimitedValue } =
96+
useMemo(() => {
97+
if (!value || tokenId) {
98+
return {
99+
tokenValue: null,
100+
tokenValueMaxPrecision: null,
101+
shouldShowUnlimitedValue: false,
102+
};
103+
}
95104

96-
const tokenAmount = calcTokenAmount(value, tokenDecimals);
105+
const tokenAmount = calcTokenAmount(value, tokenDecimals);
97106

98-
return {
99-
tokenValue: formatAmount('en-US', tokenAmount),
100-
tokenValueMaxPrecision: formatAmountMaxPrecision('en-US', tokenAmount),
101-
};
102-
}, [tokenDecimals, value]);
107+
return {
108+
tokenValue: formatAmount('en-US', tokenAmount),
109+
tokenValueMaxPrecision: formatAmountMaxPrecision('en-US', tokenAmount),
110+
shouldShowUnlimitedValue: Number(value) > UNLIMITED_THRESHOLD,
111+
};
112+
}, [tokenDecimals, value]);
103113

104114
/** Temporary error capturing as we are building out Permit Simulations */
105115
if (!tokenContract) {
@@ -138,13 +148,15 @@ const PermitSimulationValueDisplay: React.FC<
138148
>
139149
{credit && '+ '}
140150
{debit && '- '}
141-
{tokenValue !== null &&
142-
shortenString(tokenValue || '', {
143-
truncatedCharLimit: 15,
144-
truncatedStartChars: 15,
145-
truncatedEndChars: 0,
146-
skipCharacterInEnd: true,
147-
})}
151+
{shouldShowUnlimitedValue
152+
? t('unlimited')
153+
: tokenValue !== null &&
154+
shortenString(tokenValue || '', {
155+
truncatedCharLimit: 15,
156+
truncatedStartChars: 15,
157+
truncatedEndChars: 0,
158+
skipCharacterInEnd: true,
159+
})}
148160
{tokenId && `#${tokenId}`}
149161
</Text>
150162
</Tooltip>

‎ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap

+3-3
Original file line numberDiff line numberDiff line change
@@ -486,7 +486,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
486486
data-testid="simulation-token-value"
487487
style="padding-top: 1px; padding-bottom: 1px;"
488488
>
489-
14,615,016,373,...
489+
Unlimited
490490
</p>
491491
</div>
492492
</div>
@@ -539,7 +539,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
539539
data-testid="simulation-token-value"
540540
style="padding-top: 1px; padding-bottom: 1px;"
541541
>
542-
24,615,016,373,...
542+
Unlimited
543543
</p>
544544
</div>
545545
</div>
@@ -1069,7 +1069,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
10691069
data-testid="simulation-token-value"
10701070
style="padding-top: 1px; padding-bottom: 1px;"
10711071
>
1072-
14,615,016,373,...
1072+
Unlimited
10731073
</p>
10741074
</div>
10751075
</div>

‎ui/pages/confirmations/confirm/confirm.test.tsx

+11-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { act } from '@testing-library/react';
1+
import { act, waitFor } from '@testing-library/react';
22
import React from 'react';
33
import configureMockStore from 'redux-mock-store';
44
import thunk from 'redux-thunk';
@@ -153,8 +153,11 @@ describe('Confirm', () => {
153153
const { container, findAllByText } =
154154
await renderWithConfirmContextProvider(<Confirm />, mockStore);
155155

156-
const valueElement = await findAllByText('14,615,016,373,...');
157-
expect(valueElement[0]).toBeInTheDocument();
156+
await waitFor(async () => {
157+
const element = await findAllByText('Unlimited');
158+
expect(element[0]).toBeInTheDocument();
159+
});
160+
158161
expect(container).toMatchSnapshot();
159162
});
160163
});
@@ -177,8 +180,11 @@ describe('Confirm', () => {
177180
const { container, findAllByText } =
178181
await renderWithConfirmContextProvider(<Confirm />, mockStore);
179182

180-
const valueElement = await findAllByText('14,615,016,373,...');
181-
expect(valueElement[0]).toBeInTheDocument();
183+
await waitFor(async () => {
184+
const element = await findAllByText('Unlimited');
185+
expect(element[0]).toBeInTheDocument();
186+
});
187+
182188
expect(container).toMatchSnapshot();
183189
});
184190
});

0 commit comments

Comments
 (0)