chore: Add token amount formatter

src/swap/components/Swap.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from 'react';
 import { cn } from '../../utils/cn';
 import { SwapContext } from '../context';
 import { getSwapQuote } from '../core/getSwapQuote';
-import { isSwapError } from '../utils';
+import { formatTokenAmount, isSwapError } from '../utils';
 import type { SwapError, SwapReact } from '../types';
 import type { Token } from '../../token';
 
@@ -12,9 +12,9 @@ export function Swap({ address, children, onError }: SwapReact) {
   const [toAmount, setToAmount] = useState('');
   const [toToken, setToToken] = useState<Token>();
 
-  const handleToAmountChange = useCallback(
+  const handleFromAmountChange = useCallback(
     async (amount: string) => {
-      setToAmount(amount);
+      setFromAmount(amount);
       const hasRequiredFields = fromToken && toToken && amount;
       if (!hasRequiredFields) {
         return;
@@ -24,23 +24,27 @@ export function Swap({ address, children, onError }: SwapReact) {
           from: fromToken,
           to: toToken,
           amount,
-          amountReference: 'to',
+          amountReference: 'from',
         });
         if (isSwapError(response)) {
           onError?.(response);
           return;
         }
-        setFromAmount(response?.fromAmount);
+        const formattedAmount = formatTokenAmount(
+          response?.toAmount,
+          response?.to?.decimals,
+        );
+        setToAmount(formattedAmount);
       } catch (error) {
         onError?.(error as SwapError);
       }
     },
     [fromToken, toToken, setFromAmount, setToAmount],
   );
 
-  const handleFromAmountChange = useCallback(
+  const handleToAmountChange = useCallback(
     async (amount: string) => {
-      setFromAmount(amount);
+      setToAmount(amount);
       const hasRequiredFields = fromToken && toToken && amount;
       if (!hasRequiredFields) {
         return;
@@ -50,13 +54,17 @@ export function Swap({ address, children, onError }: SwapReact) {
           from: fromToken,
           to: toToken,
           amount,
-          amountReference: 'from',
+          amountReference: 'to',
         });
         if (isSwapError(response)) {
           onError?.(response);
           return;
         }
-        setToAmount(response?.toAmount);
+        const formattedAmount = formatTokenAmount(
+          response.fromAmount,
+          response?.from?.decimals,
+        );
+        setFromAmount(formattedAmount);
       } catch (error) {
         onError?.(error as SwapError);
       }

src/swap/utils.test.ts

@@ -1,4 +1,4 @@
-import { isValidAmount, isSwapError } from './utils'; // Adjust the import path as needed
+import { formatTokenAmount, isSwapError, isValidAmount } from './utils'; // Adjust the import path as needed
 
 describe('isValidAmount', () => {
   it('should return true for an empty string', () => {
@@ -69,3 +69,47 @@ describe('isSwapError function', () => {
     expect(isSwapError(response)).toBe(false);
   });
 });
+
+describe('formatTokenAmount', () => {
+  test('formats amount correctly with 18 decimals', () => {
+    const amount = '100000000000000000';
+    const decimals = 18;
+    const formattedAmount = formatTokenAmount(amount, decimals);
+    expect(formattedAmount).toBe('0.1');
+  });
+
+  test('formats amount correctly with different decimals', () => {
+    const amount = '1000000000';
+    const decimals = 9;
+    const formattedAmount = formatTokenAmount(amount, decimals);
+    expect(formattedAmount).toBe('1');
+  });
+
+  test('rounds to a maximum of 11 significant digits', () => {
+    const amount = '16732157880511600003860';
+    const decimals = 18;
+    const formattedAmount = formatTokenAmount(amount, decimals);
+    expect(formattedAmount).toBe('16732.157881');
+  });
+
+  test('handles very small amounts correctly', () => {
+    const amount = '1';
+    const decimals = 18;
+    const formattedAmount = formatTokenAmount(amount, decimals);
+    expect(formattedAmount).toBe('1e-18');
+  });
+
+  test('handles zero amount correctly', () => {
+    const amount = '0';
+    const decimals = 18;
+    const formattedAmount = formatTokenAmount(amount, decimals);
+    expect(formattedAmount).toBe('0');
+  });
+
+  test('handles large amounts correctly', () => {
+    const amount = '1000000000000000000000000000';
+    const decimals = 18;
+    const formattedAmount = formatTokenAmount(amount, decimals);
+    expect(formattedAmount).toBe('1000000000');
+  });
+});

src/swap/utils.ts

@@ -17,3 +17,11 @@ export function isSwapError(response: unknown): response is SwapError {
     response !== null && typeof response === 'object' && 'error' in response
   );
 }
+
+export function formatTokenAmount(amount: string, decimals: number) {
+  // Convert the string amount to a number using decimals value
+  const numberAmount = Number(amount) / Math.pow(10, decimals);
+  // Round to a maximum of 11 significant digits
+  const roundedAmount = Number(numberAmount.toPrecision(11));
+  return roundedAmount.toString();
+}