feat: add formatting for scientific notation for Swap amounts (#1423)

Author: 0xAlec

.changeset/grumpy-weeks-smile.md

@@ -0,0 +1,5 @@
+---
+'@coinbase/onchainkit': patch
+---
+
+**feat**: add formatting for scientific notation for Swap amounts. by @0xAlec #1423

src/swap/components/SwapAmountInput.tsx

@@ -14,6 +14,7 @@ import {
 import { TokenChip, TokenSelectDropdown } from '../../token';
 import type { Token } from '../../token';
 import type { SwapAmountInputReact } from '../types';
+import { formatAmount } from '../utils/formatAmount';
 import { useSwapContext } from './SwapProvider';
 
 export function SwapAmountInput({
@@ -100,7 +101,7 @@ export function SwapAmountInput({
           )}
           placeholder="0.0"
           delayMs={delayMs}
-          value={source.amount}
+          value={formatAmount(source.amount)}
           setValue={source.setAmount}
           disabled={source.loading}
           onChange={handleChange}

src/swap/utils/formatAmount.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, test } from 'vitest';
+import { formatAmount } from './formatAmount'; // Adjust the import path as necessary
+
+describe('formatAmount', () => {
+  test('should return non-scientific notation numbers as-is', () => {
+    expect(formatAmount('123.45')).toBe('123.45');
+    expect(formatAmount('0.0001')).toBe('0.0001');
+    expect(formatAmount('-789')).toBe('-789');
+  });
+
+  test('should format positive numbers in scientific notation', () => {
+    expect(formatAmount('1e3')).toBe('1000');
+    expect(formatAmount('1.23e4')).toBe('12300');
+    expect(formatAmount('1.23e-4')).toBe('0.000123');
+    expect(formatAmount('1.23e-6')).toBe('0.00000123');
+  });
+
+  test('should handle large exponents', () => {
+    expect(formatAmount('1e20')).toBe('100000000000000000000');
+    expect(formatAmount('1e-20')).toBe('0.00000000000000000001');
+  });
+
+  test('should handle numbers with decimal parts', () => {
+    expect(formatAmount('1.23456e3')).toBe('1234.56');
+    expect(formatAmount('1.23456e-3')).toBe('0.00123456');
+  });
+
+  test('should handle numbers where exponent affects decimal placement', () => {
+    expect(formatAmount('1.23e2')).toBe('123');
+    expect(formatAmount('1.23e1')).toBe('12.3');
+    expect(formatAmount('1.23e-1')).toBe('0.123');
+    expect(formatAmount('1.23e-2')).toBe('0.0123');
+  });
+});

src/swap/utils/formatAmount.ts

@@ -0,0 +1,32 @@
+export function formatAmount(num: string): string {
+  // If the number is not in scientific notation return it as it is
+  if (!/\d+\.?\d*e[+-]*\d+/i.test(num)) {
+    return num;
+  }
+
+  // Parse into coefficient and exponent
+  const [coefficient, exponent] = num.toLowerCase().split('e');
+  const exp = Number.parseInt(exponent);
+
+  // Split coefficient into integer and decimal parts
+  const [intPart, decPart = ''] = coefficient.split('.');
+
+  // Combine integer and decimal parts
+  const fullNumber = intPart + decPart;
+
+  // Calculate the new decimal point position
+  const newPosition = intPart.length + exp;
+
+  if (newPosition <= 0) {
+    // If the new position is less than or equal to 0, we need to add leading zeros
+    return `0.${'0'.repeat(Math.abs(newPosition))}${fullNumber}`;
+  }
+
+  if (newPosition >= fullNumber.length) {
+    // If the new position is greater than the number length, we need to add trailing zeros
+    return fullNumber + '0'.repeat(newPosition - fullNumber.length);
+  }
+
+  // Otherwise, we insert the decimal point at the new position
+  return `${fullNumber.slice(0, newPosition)}.${fullNumber.slice(newPosition)}`;
+}