From 5db63de747f05af8f5e42bb0ba199a706e79c70f Mon Sep 17 00:00:00 2001 From: kyranjamie Date: Tue, 26 Mar 2024 12:52:09 +0100 Subject: [PATCH 1/3] fix: removes decimals from balances > $1,000 --- src/app/common/hooks/balance/use-total-balance.tsx | 5 ++++- src/app/common/money/format-money.ts | 8 ++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/app/common/hooks/balance/use-total-balance.tsx b/src/app/common/hooks/balance/use-total-balance.tsx index e1c07fbdc86..4f84a9eebbf 100644 --- a/src/app/common/hooks/balance/use-total-balance.tsx +++ b/src/app/common/hooks/balance/use-total-balance.tsx @@ -37,7 +37,10 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs) const totalBalance = { ...stxUsdAmount, amount: stxUsdAmount.amount.plus(btcUsdAmount.amount) }; return { totalBalance, - totalUsdBalance: i18nFormatCurrency(totalBalance), + totalUsdBalance: i18nFormatCurrency( + totalBalance, + totalBalance.amount.isGreaterThanOrEqualTo(100_000) ? 0 : 2 + ), isLoading, }; }, [btcBalance, btcMarketData, stxMarketData, isLoading, stxBalance]); diff --git a/src/app/common/money/format-money.ts b/src/app/common/money/format-money.ts index bddb08c2b0c..0620bfbe4d1 100644 --- a/src/app/common/money/format-money.ts +++ b/src/app/common/money/format-money.ts @@ -14,9 +14,13 @@ export function formatMoneyPadded({ amount, symbol, decimals }: Money) { return `${amount.shiftedBy(-decimals).toFormat(decimals)} ${symbol}`; } -export function i18nFormatCurrency(quantity: Money, locale = 'en-US') { +export function i18nFormatCurrency(quantity: Money, decimals: number = 2) { if (quantity.symbol !== 'USD') throw new Error('Cannot format non-USD amounts'); - const currencyFormatter = new Intl.NumberFormat(locale, { style: 'currency', currency: 'USD' }); + const currencyFormatter = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + maximumFractionDigits: decimals, + }); const formatted = currencyFormatter.format( quantity.amount.shiftedBy(-quantity.decimals).toNumber() From caae144892a3d3691b41caca0f33d25f8171013a Mon Sep 17 00:00:00 2001 From: Fara Woolf Date: Wed, 27 Mar 2024 10:12:01 -0500 Subject: [PATCH 2/3] fix: send form max amount --- .../components/amount-field.tsx | 20 ++++++------------- .../sip10-token-send-form-container.tsx | 1 - 2 files changed, 6 insertions(+), 15 deletions(-) diff --git a/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx b/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx index 56e6e168bd7..0a8c1dd4e2b 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx @@ -14,7 +14,9 @@ import { ErrorLabel } from '@app/components/error-label'; const amountInputId = 'amount-input'; const maxFontSize = 48; const minFontSize = 22; -const maxLengthDefault = STX_DECIMALS + 2; // + 1 for decimal char +// This is set so the font resizing works. We can revisit the design, +// but this cannot be completely removed or the UI breaks. +const maxLength = STX_DECIMALS + 12; interface GetAmountModifiedFontSize { amount: string; @@ -40,7 +42,6 @@ interface AmountFieldProps { switchableAmount?: React.JSX.Element; tokenSymbol?: string; onSetIsSendingMax?(value: boolean): void; - tokenMaxLength?: number; } export function AmountField({ autoComplete = 'on', @@ -51,7 +52,6 @@ export function AmountField({ onSetIsSendingMax, switchableAmount, tokenSymbol, - tokenMaxLength, }: AmountFieldProps) { const [field, meta, helpers] = useField('amount'); @@ -61,11 +61,8 @@ export function AmountField({ const [previousTextLength, setPreviousTextLength] = useState(1); const fieldRef = useRef(null); - const { decimals } = balance; const symbol = tokenSymbol || balance.symbol; - const maxLength = tokenMaxLength || (decimals === 0 ? maxLengthDefault : decimals + 2); - const fontSizeModifier = (maxFontSize - minFontSize) / maxLength; const subtractedLengthToPositionPrefix = 0.5; @@ -130,7 +127,7 @@ export function AmountField({ // TODO: could be implemented with html using padded label element const onClickFocusInput = useCallback(() => { if (isSendingMax) { - helpers.setValue(''); + void helpers.setValue(''); onSetIsSendingMax?.(false); } @@ -141,13 +138,8 @@ export function AmountField({ }, [isSendingMax, helpers, onSetIsSendingMax]); return ( - - + + {/* #4476 TODO check these fonts against design */} ); const selectedAssetField = ( From 926a90bac3507d0851068eaca816e0fe538e4b00 Mon Sep 17 00:00:00 2001 From: Fara Woolf Date: Wed, 27 Mar 2024 12:47:33 -0500 Subject: [PATCH 3/3] fix: wrong send stx validation msg --- src/app/common/validation/forms/amount-validators.ts | 4 ++-- .../send-crypto-asset-form/form/stx/use-stx-send-form.tsx | 4 +++- tests/specs/send/send-stx.spec.ts | 8 ++++++-- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/app/common/validation/forms/amount-validators.ts b/src/app/common/validation/forms/amount-validators.ts index fc1c46e3e95..7b5007f94e5 100644 --- a/src/app/common/validation/forms/amount-validators.ts +++ b/src/app/common/validation/forms/amount-validators.ts @@ -73,12 +73,12 @@ export function btcMinimumSpendValidator() { }); } -export function stxAmountValidator() { +export function stxAmountValidator(availableStxBalance: Money) { return yup .number() .typeError(FormErrorMessages.MustBeNumber) .concat(currencyAmountValidator()) - .concat(stxAmountPrecisionValidator(formatPrecisionError())); + .concat(stxAmountPrecisionValidator(formatPrecisionError(availableStxBalance))); } export function stxAvailableBalanceValidator(availableBalance: Money) { diff --git a/src/app/pages/send/send-crypto-asset-form/form/stx/use-stx-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/stx/use-stx-send-form.tsx index 61aee92f800..78ad2f2b77d 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/stx/use-stx-send-form.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/stx/use-stx-send-form.tsx @@ -58,7 +58,9 @@ export function useStxSendForm() { stxFees, validationSchema: yup.object({ - amount: stxAmountValidator().concat(stxAvailableBalanceValidator(availableStxBalance)), + amount: stxAmountValidator(availableStxBalance).concat( + stxAvailableBalanceValidator(availableStxBalance) + ), fee: stxFeeValidator(availableStxBalance), recipient, memo, diff --git a/tests/specs/send/send-stx.spec.ts b/tests/specs/send/send-stx.spec.ts index d4a6d104040..c0e3a3982b7 100644 --- a/tests/specs/send/send-stx.spec.ts +++ b/tests/specs/send/send-stx.spec.ts @@ -8,6 +8,8 @@ import { SendPage } from '@tests/page-object-models/send.page'; import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors'; import { getDisplayerAddress } from '@tests/utils'; +import { STX_DECIMALS } from '@shared/constants'; + import { FormErrorMessages } from '@app/common/error-messages'; import { test } from '../../fixtures/fixtures'; @@ -106,7 +108,8 @@ test.describe('send stx', () => { await sPage.amountInput.fill('0.0000001'); await sPage.amountInput.blur(); const errorMsg = await sPage.amountInputErrorLabel.innerText(); - test.expect(errorMsg).toEqual(FormErrorMessages.MustBePositive); + const error = FormErrorMessages.TooMuchPrecision; + test.expect(errorMsg).toEqual(error.replace('{decimals}', String(STX_DECIMALS))); }); test('that the amount is greater than the available balance', async () => { @@ -160,7 +163,8 @@ test.describe('send stx', () => { await sPage.previewSendTxButton.click(); const errorMsg = await sPage.amountInputErrorLabel.innerText(); - test.expect(errorMsg).toEqual(FormErrorMessages.MustBePositive); + const error = FormErrorMessages.TooMuchPrecision; + test.expect(errorMsg).toEqual(error.replace('{decimals}', String(STX_DECIMALS))); await sPage.amountInput.fill('0.000001'); await sPage.previewSendTxButton.click(); const details = await sPage.confirmationDetails.allInnerTexts();