refactor: move fn to utils, use constant and provide more descriptive fn name

src/app/common/utils.ts

@@ -295,3 +295,14 @@ export function isFulfilled<T>(p: PromiseSettledResult<T>): p is PromiseFulfille
 export function isRejected<T>(p: PromiseSettledResult<T>): p is PromiseRejectedResult {
   return p.status === 'rejected';
 }
+
+interface LinearInterpolation {
+  start: number;
+  end: number;
+  t: number;
+}
+
+// Linear Interpolation
+export function linearInterpolation({ start, end, t }: LinearInterpolation) {
+  return (1 - t) * start + t * end;
+}

src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx

@@ -5,10 +5,11 @@ import { Box, Flex, Input, Stack, Text, color } from '@stacks/ui';
 import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
 import { useField } from 'formik';
 
-import { STX_DECIMALS } from '@shared/constants';
+import { STX_DECIMALS, TOKEN_NAME_LENGTH } from '@shared/constants';
 import { Money } from '@shared/models/money.model';
 
 import { useShowFieldError } from '@app/common/form-utils';
+import { linearInterpolation } from '@app/common/utils';
 import { figmaTheme } from '@app/common/utils/figma-theme';
 import { ErrorLabel } from '@app/components/error-label';
 
@@ -32,17 +33,6 @@ function getAmountModifiedFontSize(props: GetAmountModifiedFontSize) {
     : maxFontSize;
 }
 
-interface Lerp {
-  start: number;
-  end: number;
-  t: number;
-}
-
-// Linear Interpolation
-function lerp({ start, end, t }: Lerp) {
-  return (1 - t) * start + t * end;
-}
-
 interface AmountFieldProps {
   autoComplete?: 'on' | 'off';
   autofocus?: boolean;
@@ -76,12 +66,12 @@ export function AmountField({
   const subtractedLengthToPositionPrefix = 0.5;
 
   const onChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (symbol.length <= 4) {
+    if (symbol.length <= TOKEN_NAME_LENGTH) {
       const value = event.currentTarget.value;
 
       const t = value.length / (symbol.length + maxLength);
 
-      const newFontSize = lerp({ start: maxFontSize, end: minFontSize, t });
+      const newFontSize = linearInterpolation({ start: maxFontSize, end: minFontSize, t });
       setFontSize(newFontSize);
     }
 
@@ -90,7 +80,7 @@ export function AmountField({
 
   useEffect(() => {
     // case, when e.g token doesn't have symbol
-    if (symbol.length > 4) setFontSize(minFontSize);
+    if (symbol.length > TOKEN_NAME_LENGTH) setFontSize(minFontSize);
 
     // Copy/paste
     if (field.value.length > symbol.length && field.value.length > previousTextLength + 2) {

src/shared/constants.ts

@@ -166,3 +166,5 @@ export const defaultNetworksKeyedById: Record<
 };
 
 export const DEFAULT_LIST_LIMIT = 50;
+
+export const TOKEN_NAME_LENGTH = 4;