Merge pull request #5139 from leather-wallet/release/fix-send-stx

Release/fix send stx

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]);

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()

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) {

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<HTMLSpanElement>(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 (
-    <Stack
-      alignItems="center"
-      px="space.06"
-      gap={['space.04', showError ? 'space.04' : '48px']}
-      width="100%"
-    >
-      <Flex alignItems="center" flexDirection="column" onClick={onClickFocusInput}>
+    <Stack alignItems="center" gap={['space.04', showError ? 'space.04' : '48px']} width="100%">
+      <Flex alignItems="center" flexDirection="column" onClick={onClickFocusInput} width="100%">
         {/* #4476 TODO check these fonts against design */}
         <Flex
           alignItems="center"

src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/sip10-token-send-form-container.tsx

@@ -33,7 +33,6 @@ export function Sip10TokenSendFormContainer({
       }
       tokenSymbol={symbol}
       autoComplete="off"
-      tokenMaxLength={Infinity}
     />
   );
   const selectedAssetField = (

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,

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();