chore: dedupe utils (#1878)

coinbase · Jan 27, 2025 · 7789413 · 7789413
1 parent bf4cf8c
commit 7789413
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 143 deletions.
diff --git a/src/fund/components/FundCardAmountInput.tsx b/src/fund/components/FundCardAmountInput.tsx
@@ -1,8 +1,8 @@
 import { TextInput } from '@/internal/components/TextInput';
+import { useAmountInput } from '@/internal/hooks/useAmountInput';
 import { isValidAmount } from '@/internal/utils/isValidAmount';
 import { useCallback, useEffect, useRef } from 'react';
 import { cn, text } from '../../styles/theme';
-import { useAmountInput } from '../hooks/useAmountInput';
 import { useInputResize } from '../hooks/useInputResize';
 import type { FundCardAmountInputPropsReact } from '../types';
 import { FundCardCurrencyLabel } from './FundCardCurrencyLabel';
@@ -17,6 +17,9 @@ export const FundCardAmountInput = ({
     asset,
     selectedInputType,
     currency,
+    exchangeRate,
+    setFundAmountFiat,
+    setFundAmountCrypto,
   } = useFundContext();
 
   const currencyOrAsset = selectedInputType === 'fiat' ? currency : asset;
@@ -36,7 +39,12 @@ export const FundCardAmountInput = ({
     currencySpanRef,
   );
 
-  const { handleChange } = useAmountInput();
+  const { handleChange } = useAmountInput({
+    setFiatAmount: setFundAmountFiat,
+    setCryptoAmount: setFundAmountCrypto,
+    selectedInputType,
+    exchangeRate: String(exchangeRate),
+  });
 
   const handleAmountChange = useCallback(
     (value: string) => {
@@ -100,7 +108,7 @@ export const FundCardAmountInput = ({
         <FundCardCurrencyLabel ref={currencySpanRef} label={currencyOrAsset} />
       </div>
 
-      {/* Hidden span for measuring text width 
+      {/* Hidden span for measuring text width
           Without this span the input field would not adjust its width based on the text width and would look like this:
           [0.12--------Empty Space-------][ETH] - As you can see the currency symbol is far away from the inputed value
 

diff --git a/src/fund/components/FundCardAmountInputTypeSwitch.tsx b/src/fund/components/FundCardAmountInputTypeSwitch.tsx
@@ -1,10 +1,10 @@
 import { formatFiatAmount } from '@/internal/utils/formatFiatAmount';
+import { truncateDecimalPlaces } from '@/internal/utils/truncateDecimalPlaces';
 import { useCallback, useMemo } from 'react';
 import { Skeleton } from '../../internal/components/Skeleton';
 import { useIcon } from '../../internal/hooks/useIcon';
 import { cn, pressable, text } from '../../styles/theme';
 import type { FundCardAmountInputTypeSwitchPropsReact } from '../types';
-import { truncateDecimalPlaces } from '../utils/truncateDecimalPlaces';
 import { useFundContext } from './FundCardProvider';
 
 export const FundCardAmountInputTypeSwitch = ({

diff --git a/src/fund/components/FundCardPresetAmountInputList.tsx b/src/fund/components/FundCardPresetAmountInputList.tsx
@@ -1,10 +1,23 @@
-import { useAmountInput } from '../hooks/useAmountInput';
+import { useAmountInput } from '@/internal/hooks/useAmountInput';
 import { FundCardPresetAmountInputItem } from './FundCardPresetAmountInputItem';
 import { useFundContext } from './FundCardProvider';
 
 export function FundCardPresetAmountInputList() {
-  const { presetAmountInputs, currency } = useFundContext();
-  const { handleFiatChange } = useAmountInput();
+  const {
+    presetAmountInputs,
+    currency,
+    selectedInputType,
+    exchangeRate,
+    setFundAmountFiat,
+    setFundAmountCrypto,
+  } = useFundContext();
+
+  const { handleFiatChange } = useAmountInput({
+    setFiatAmount: setFundAmountFiat,
+    setCryptoAmount: setFundAmountCrypto,
+    selectedInputType,
+    exchangeRate: String(exchangeRate),
+  });
 
   if (!presetAmountInputs) {
     return null;

diff --git a/src/fund/components/FundCardProvider.tsx b/src/fund/components/FundCardProvider.tsx
@@ -24,7 +24,7 @@ type FundCardContextType = {
   currency: string;
   selectedPaymentMethod?: PaymentMethod;
   setSelectedPaymentMethod: (paymentMethod: PaymentMethod) => void;
-  selectedInputType?: AmountInputType;
+  selectedInputType: AmountInputType;
   setSelectedInputType: (inputType: AmountInputType) => void;
   fundAmountFiat: string;
   setFundAmountFiat: (amount: string) => void;

diff --git a/src/fund/hooks/useAmountInput.ts b/src/fund/hooks/useAmountInput.ts
diff --git a/src/fund/utils/truncateDecimalPlaces.test.ts b/src/fund/utils/truncateDecimalPlaces.test.ts
diff --git a/src/fund/utils/truncateDecimalPlaces.ts b/src/fund/utils/truncateDecimalPlaces.ts
diff --git a/src/internal/hooks/useAmountInput.test.tsx b/src/internal/hooks/useAmountInput.test.tsx
@@ -23,8 +23,8 @@ describe('useAmountInput', () => {
         result.current.handleFiatChange('100.456');
       });
 
-      expect(defaultProps.setFiatAmount).toHaveBeenCalledWith('100.46');
-      expect(defaultProps.setCryptoAmount).toHaveBeenCalledWith('200.92');
+      expect(defaultProps.setFiatAmount).toHaveBeenCalledWith('100.45');
+      expect(defaultProps.setCryptoAmount).toHaveBeenCalledWith('200.9');
     });
 
     it('should set empty crypto amount when fiat is zero', () => {

diff --git a/src/internal/utils/truncateDecimalPlaces.test.ts b/src/internal/utils/truncateDecimalPlaces.test.ts
@@ -3,31 +3,31 @@ import { truncateDecimalPlaces } from './truncateDecimalPlaces';
 
 describe('truncateDecimalPlaces', () => {
   it('handles string inputs', () => {
-    expect(truncateDecimalPlaces('123.456', 2)).toBe('123.46');
-    expect(truncateDecimalPlaces('0.123456', 4)).toBe('0.1235');
+    expect(truncateDecimalPlaces('123.456', 2)).toBe('123.45');
+    expect(truncateDecimalPlaces('0.123456', 4)).toBe('0.1234');
     expect(truncateDecimalPlaces('100', 2)).toBe('100');
   });
 
   it('handles number inputs', () => {
-    expect(truncateDecimalPlaces(123.456, 2)).toBe('123.46');
-    expect(truncateDecimalPlaces(0.123456, 4)).toBe('0.1235');
+    expect(truncateDecimalPlaces(123.456, 2)).toBe('123.45');
+    expect(truncateDecimalPlaces(0.123456, 4)).toBe('0.1234');
     expect(truncateDecimalPlaces(100, 2)).toBe('100');
   });
 
   it('handles edge cases', () => {
     expect(truncateDecimalPlaces('', 2)).toBe('');
-    expect(truncateDecimalPlaces('.123', 2)).toBe('0.12');
+    expect(truncateDecimalPlaces('.123', 2)).toBe('.12');
     expect(truncateDecimalPlaces(0, 2)).toBe('0');
     expect(truncateDecimalPlaces('.', 2)).toBe('.');
   });
 
   it('preserves trailing zeros if present in input string', () => {
     expect(truncateDecimalPlaces('123.450', 2)).toBe('123.45');
-    expect(truncateDecimalPlaces('0.120', 3)).toBe('0.12');
+    expect(truncateDecimalPlaces('0.120', 3)).toBe('0.120');
   });
 
   it('handles negative numbers', () => {
-    expect(truncateDecimalPlaces(-123.456, 2)).toBe('-123.46');
-    expect(truncateDecimalPlaces('-0.123456', 4)).toBe('-0.1235');
+    expect(truncateDecimalPlaces(-123.456, 2)).toBe('-123.45');
+    expect(truncateDecimalPlaces('-0.123456', 4)).toBe('-0.1234');
   });
 });
diff --git a/src/internal/utils/truncateDecimalPlaces.ts b/src/internal/utils/truncateDecimalPlaces.ts
@@ -5,13 +5,16 @@ export const truncateDecimalPlaces = (
   value: string | number,
   decimalPlaces: number,
 ) => {
-  if (value === '' || value === '.') {
-    return value;
+  const stringValue = String(value);
+  const decimalIndex = stringValue.indexOf('.');
+  let resultValue = stringValue;
+
+  if (
+    decimalIndex !== -1 &&
+    stringValue.length - decimalIndex - 1 > decimalPlaces
+  ) {
+    resultValue = stringValue.substring(0, decimalIndex + decimalPlaces + 1);
   }
 
-  return new Intl.NumberFormat('en-US', {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: decimalPlaces,
-    useGrouping: false,
-  }).format(Number(value));
+  return resultValue;
 };