fix: change logic to upscale amount in input field

leather-io · Aug 7, 2023 · 086c329 · 086c329
1 parent da7b51b
commit 086c329
Showing 1 changed file with 23 additions and 9 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
@@ -1,3 +1,4 @@
+import type { ChangeEvent } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 
 import { Box, Flex, Input, Stack, Text, color } from '@stacks/ui';
@@ -52,6 +53,7 @@ export function AmountField({
   tokenSymbol,
 }: AmountFieldProps) {
   const [field, meta, helpers] = useField('amount');
+
   const showError = useShowFieldError('amount');
   const [fontSize, setFontSize] = useState(maxFontSize);
   const [previousTextLength, setPreviousTextLength] = useState(1);
@@ -62,19 +64,30 @@ export function AmountField({
   const fontSizeModifier = (maxFontSize - minFontSize) / maxLength;
   const subtractedLengthToPositionPrefix = 0.5;
 
-  useEffect(() => {
-    // case, when e.g token doesn't have symbol
-    if (symbol.length > 4) setFontSize(minFontSize);
+  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.value;
 
-    // Typing
-    if (field.value.length === symbol.length) setFontSize(maxFontSize);
-    if (field.value.length > symbol.length && previousTextLength > field.value.length) {
+    if (value.length <= symbol.length) {
+      setFontSize(maxFontSize);
+    } else if (previousTextLength > value.length) {
       const textSize = Math.ceil(fontSize + fontSizeModifier);
-      fontSize < maxFontSize && setFontSize(textSize);
-    } else if (field.value.length > symbol.length && previousTextLength < field.value.length) {
+      if (fontSize < maxFontSize) {
+        setFontSize(textSize);
+      }
+    } else if (previousTextLength < value.length) {
       const textSize = Math.ceil(fontSize - fontSizeModifier);
-      fontSize > minFontSize && setFontSize(textSize);
+      if (fontSize > minFontSize) {
+        setFontSize(textSize);
+      }
     }
+
+    field.onChange(event);
+  };
+
+  useEffect(() => {
+    // case, when e.g token doesn't have symbol
+    if (symbol.length > 4) setFontSize(minFontSize);
+
     // Copy/paste
     if (field.value.length > symbol.length && field.value.length > previousTextLength + 2) {
       const modifiedFontSize = getAmountModifiedFontSize({
@@ -139,6 +152,7 @@ export function AmountField({
             fontWeight={500}
             autoComplete={autoComplete}
             {...field}
+            onChange={onChange}
           />
           <Text fontSize={fontSize + 'px'} pl="tight">
             {symbol.toUpperCase()}