Alissa.crane/swap tokens

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,18 +1,10 @@
-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', () => {
     expect(isValidAmount('')).toBe(true);
   });
 
-  it('should return true for a valid number string with less than 11 characters', () => {
-    expect(isValidAmount('12345')).toBe(true);
-  });
-
-  it('should return false for a number string with more than 11 characters', () => {
-    expect(isValidAmount('123456789012')).toBe(false);
-  });
-
   it('should return true for a valid number string with a decimal point', () => {
     expect(isValidAmount('123.45')).toBe(true);
   });
@@ -69,3 +61,40 @@ 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('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

@@ -2,9 +2,6 @@ import type { SwapError } from './types';
 
 // checks that input is a number
 export function isValidAmount(value: string) {
-  if (value.length > 11) {
-    return false;
-  }
   if (value === '') {
     return true;
   }
@@ -17,3 +14,9 @@ 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);
+  return numberAmount.toString();
+}