From 2b133606993ce8289417d88510359479aebbc07d Mon Sep 17 00:00:00 2001
From: Leonardo Zizzamia <leonardo.zizzamia@gmail.com>
Date: Thu, 13 Jun 2024 16:19:32 -0700
Subject: [PATCH] chore: polish (#552)

---
 .changeset/fuzzy-eggs-cross.md               |   3 +-
 src/internal/text/TextBody.tsx               |   4 +-
 src/internal/text/TextCaption.tsx            |   4 +-
 src/internal/text/TextHeadline.tsx           |   4 +-
 src/internal/text/TextLabel1.tsx             |   4 +-
 src/internal/text/TextLabel2.tsx             |   4 +-
 src/internal/text/TextLegal.tsx              |   2 +-
 src/swap/components/Swap.tsx                 |   3 +-
 src/swap/components/SwapAmountInput.test.tsx |   2 +-
 src/swap/components/SwapAmountInput.tsx      |   9 +-
 src/swap/components/SwapButton.tsx           |   2 +-
 src/swap/core/isSwapError.test.ts            |  33 +++++
 src/swap/core/isSwapError.ts                 |   7 ++
 src/swap/utils.test.ts                       | 121 -------------------
 src/swap/utils.ts                            |  27 -----
 src/utils/formatTokenAmount.test.ts          |  38 ++++++
 src/utils/formatTokenAmount.ts               |   5 +
 src/utils/getRoundedAmount.test.ts           |  17 +++
 src/utils/getRoundedAmount.ts                |   4 +
 src/utils/isValidAmount.test.ts              |  31 +++++
 src/utils/isValidAmount.ts                   |   8 ++
 src/version.ts                               |   2 +-
 22 files changed, 166 insertions(+), 168 deletions(-)
 create mode 100644 src/swap/core/isSwapError.test.ts
 create mode 100644 src/swap/core/isSwapError.ts
 delete mode 100644 src/swap/utils.test.ts
 delete mode 100644 src/swap/utils.ts
 create mode 100644 src/utils/formatTokenAmount.test.ts
 create mode 100644 src/utils/formatTokenAmount.ts
 create mode 100644 src/utils/getRoundedAmount.test.ts
 create mode 100644 src/utils/getRoundedAmount.ts
 create mode 100644 src/utils/isValidAmount.test.ts
 create mode 100644 src/utils/isValidAmount.ts

diff --git a/.changeset/fuzzy-eggs-cross.md b/.changeset/fuzzy-eggs-cross.md
index ce72b3d156..121cfcbac4 100644
--- a/.changeset/fuzzy-eggs-cross.md
+++ b/.changeset/fuzzy-eggs-cross.md
@@ -2,4 +2,5 @@
 "@coinbase/onchainkit": patch
 ---
 
-- **feat**: introduce Inter font-family and internal text components. By @kyhyco #506
+- **feat**: refactored and clean up internals. By @zizzamia #552
+- **feat**: introduce `Inter` font-family and internal text components. By @kyhyco #506
diff --git a/src/internal/text/TextBody.tsx b/src/internal/text/TextBody.tsx
index 2339a3ddda..ed4869fb62 100644
--- a/src/internal/text/TextBody.tsx
+++ b/src/internal/text/TextBody.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 type TextBodyReact = {
   children: ReactNode;
@@ -6,7 +6,7 @@ type TextBodyReact = {
 
 export function TextBody({ children }: TextBodyReact) {
   return (
-    <span className="text-sans text-base leading-normal text-black">
+    <span className="text-base text-black text-sans leading-normal">
       {children}
     </span>
   );
diff --git a/src/internal/text/TextCaption.tsx b/src/internal/text/TextCaption.tsx
index ace89ad40c..a9186ecd6b 100644
--- a/src/internal/text/TextCaption.tsx
+++ b/src/internal/text/TextCaption.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 type TextCaptionReact = {
   children: ReactNode;
@@ -7,6 +7,6 @@ type TextCaptionReact = {
 /* istanbul ignore next */
 export function TextCaption({ children }: TextCaptionReact) {
   return (
-    <span className="text-sans text-bold text-xs leading-4">{children}</span>
+    <span className="text-bold text-sans text-xs leading-4">{children}</span>
   );
 }
diff --git a/src/internal/text/TextHeadline.tsx b/src/internal/text/TextHeadline.tsx
index c1a184578a..2d8191081c 100644
--- a/src/internal/text/TextHeadline.tsx
+++ b/src/internal/text/TextHeadline.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 type TextHeadlineReact = {
   children: ReactNode;
@@ -6,7 +6,7 @@ type TextHeadlineReact = {
 
 export function TextHeadline({ children }: TextHeadlineReact) {
   return (
-    <span className="text-sans text-base leading-normal text-bold text-[#0A0B0D]">
+    <span className="text-[#0A0B0D] text-base text-bold text-sans leading-normal">
       {children}
     </span>
   );
diff --git a/src/internal/text/TextLabel1.tsx b/src/internal/text/TextLabel1.tsx
index 1f6e292e81..b9cf67f4dd 100644
--- a/src/internal/text/TextLabel1.tsx
+++ b/src/internal/text/TextLabel1.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 type TextLabel1React = {
   children: ReactNode;
@@ -7,7 +7,7 @@ type TextLabel1React = {
 /* istanbul ignore next */
 export function TextLabel1({ children }: TextLabel1React) {
   return (
-    <span className="text-sans text-bold text-sm leading-5 text-[#0A0B0D]">
+    <span className="text-[#0A0B0D] text-bold text-sans text-sm leading-5">
       {children}
     </span>
   );
diff --git a/src/internal/text/TextLabel2.tsx b/src/internal/text/TextLabel2.tsx
index a52032edde..a3800a2d02 100644
--- a/src/internal/text/TextLabel2.tsx
+++ b/src/internal/text/TextLabel2.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 type TextLabel2React = {
   children: ReactNode;
@@ -7,7 +7,7 @@ type TextLabel2React = {
 /* istanbul ignore next */
 export function TextLabel2({ children }: TextLabel2React) {
   return (
-    <span className="text-sans text-sm leading-5 text-[#0A0B0D]">
+    <span className="text-[#0A0B0D] text-sans text-sm leading-5">
       {children}
     </span>
   );
diff --git a/src/internal/text/TextLegal.tsx b/src/internal/text/TextLegal.tsx
index ee8d1126a7..08381a9d3b 100644
--- a/src/internal/text/TextLegal.tsx
+++ b/src/internal/text/TextLegal.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 type TextLegalReact = {
   children: ReactNode;
diff --git a/src/swap/components/Swap.tsx b/src/swap/components/Swap.tsx
index dc33976b45..3a4119cc1d 100644
--- a/src/swap/components/Swap.tsx
+++ b/src/swap/components/Swap.tsx
@@ -2,7 +2,8 @@ import { useCallback, useMemo, useState } from 'react';
 import { cn } from '../../utils/cn';
 import { SwapContext } from '../context';
 import { getSwapQuote } from '../core/getSwapQuote';
-import { formatTokenAmount, isSwapError } from '../utils';
+import { formatTokenAmount } from '../../utils/formatTokenAmount';
+import { isSwapError } from '../core/isSwapError';
 import type { SwapError, SwapReact } from '../types';
 import type { Token } from '../../token';
 
diff --git a/src/swap/components/SwapAmountInput.test.tsx b/src/swap/components/SwapAmountInput.test.tsx
index 81975a66c1..72279cfd2e 100644
--- a/src/swap/components/SwapAmountInput.test.tsx
+++ b/src/swap/components/SwapAmountInput.test.tsx
@@ -6,7 +6,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { SwapAmountInput } from './SwapAmountInput';
 import { SwapContext } from '../context';
-import { type Token } from '../../token';
+import type { Token } from '../../token';
 import type { SwapContextType } from '../types';
 import type { Address } from 'viem';
 
diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx
index 02b032692f..88ebba2bc1 100644
--- a/src/swap/components/SwapAmountInput.tsx
+++ b/src/swap/components/SwapAmountInput.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useContext, useEffect, useMemo } from 'react';
 
-import { getRoundedAmount, isValidAmount } from '../utils';
+import { isValidAmount } from '../../utils/isValidAmount';
+import { getRoundedAmount } from '../../utils/getRoundedAmount';
 import { TokenChip } from '../../token';
 import { cn } from '../../utils/cn';
 import { SwapContext } from '../context';
@@ -83,7 +84,7 @@ export function SwapAmountInput({ label, token, type }: SwapAmountInputReact) {
       <div className="flex w-full items-center justify-between">
         <label className="font-semibold text-[#030712] text-sm">{label}</label>
         {roundedBalance && (
-          <label className="text-sm font-normal text-gray-400">{`Balance: ${roundedBalance}`}</label>
+          <label className="font-normal text-gray-400 text-sm">{`Balance: ${roundedBalance}`}</label>
         )}
       </div>
       <div className="flex w-full items-center justify-between">
@@ -92,8 +93,8 @@ export function SwapAmountInput({ label, token, type }: SwapAmountInputReact) {
           <button
             className={cn(
               'flex h-8 w-[58px] max-w-[200px] items-center rounded-[40px]',
-              'bg-gray-100 px-3 py-2 text-base font-medium',
-              'not-italic leading-6 text-gray-500',
+              'bg-gray-100 px-3 py-2 font-medium text-base',
+              'text-gray-500 not-italic leading-6',
             )}
             data-testid="ockSwapAmountInput_MaxButton"
             disabled={roundedBalance === undefined}
diff --git a/src/swap/components/SwapButton.tsx b/src/swap/components/SwapButton.tsx
index be73dbbbb2..e5b6ce3fd6 100644
--- a/src/swap/components/SwapButton.tsx
+++ b/src/swap/components/SwapButton.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useContext } from 'react';
 import { cn } from '../../utils/cn';
 import { buildSwapTransaction } from '../core/buildSwapTransaction';
-import { isSwapError } from '../utils';
+import { isSwapError } from '../core/isSwapError';
 import { SwapContext } from '../context';
 import type { SwapButtonReact, SwapError } from '../types';
 
diff --git a/src/swap/core/isSwapError.test.ts b/src/swap/core/isSwapError.test.ts
new file mode 100644
index 0000000000..ab1d6e4218
--- /dev/null
+++ b/src/swap/core/isSwapError.test.ts
@@ -0,0 +1,33 @@
+import { isSwapError } from './isSwapError';
+
+describe('isSwapError', () => {
+  it('returns true for a valid SwapError object', () => {
+    const response = {
+      error: 'Swap failed',
+      details: 'Insufficient balance',
+    };
+
+    expect(isSwapError(response)).toBe(true);
+  });
+
+  it('returns false for null or non-object inputs', () => {
+    expect(isSwapError(null)).toBe(false);
+    expect(isSwapError(undefined)).toBe(false);
+    expect(isSwapError('error')).toBe(false);
+    expect(isSwapError(123)).toBe(false);
+  });
+
+  it('returns false for objects without the "error" property', () => {
+    const response = {
+      message: 'An error occurred',
+    };
+
+    expect(isSwapError(response)).toBe(false);
+  });
+
+  it('returns false for empty objects', () => {
+    const response = {};
+
+    expect(isSwapError(response)).toBe(false);
+  });
+});
diff --git a/src/swap/core/isSwapError.ts b/src/swap/core/isSwapError.ts
new file mode 100644
index 0000000000..39bdb4d7b5
--- /dev/null
+++ b/src/swap/core/isSwapError.ts
@@ -0,0 +1,7 @@
+import type { SwapError } from '../types';
+
+export function isSwapError(response: unknown): response is SwapError {
+  return (
+    response !== null && typeof response === 'object' && 'error' in response
+  );
+}
diff --git a/src/swap/utils.test.ts b/src/swap/utils.test.ts
deleted file mode 100644
index aa254ed0f5..0000000000
--- a/src/swap/utils.test.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import {
-  formatTokenAmount,
-  getRoundedAmount,
-  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 a decimal point', () => {
-    expect(isValidAmount('123.45')).toBe(true);
-  });
-
-  it('should return false for a string with multiple decimal points', () => {
-    expect(isValidAmount('123.45.67')).toBe(false);
-  });
-
-  it('should return false for a string with non-numeric characters', () => {
-    expect(isValidAmount('123a45')).toBe(false);
-  });
-
-  it('should return true for a valid number string with no integer part but a decimal point', () => {
-    expect(isValidAmount('.12345')).toBe(true);
-  });
-
-  it('should return true for a valid number string with no decimal part', () => {
-    expect(isValidAmount('12345.')).toBe(true);
-  });
-
-  it('should return false for a string with spaces', () => {
-    expect(isValidAmount('123 45')).toBe(false);
-  });
-});
-
-describe('isSwapError function', () => {
-  it('returns true for a valid SwapError object', () => {
-    const response = {
-      error: 'Swap failed',
-      details: 'Insufficient balance',
-    };
-
-    expect(isSwapError(response)).toBe(true);
-  });
-
-  it('returns false for null or non-object inputs', () => {
-    expect(isSwapError(null)).toBe(false);
-    expect(isSwapError(undefined)).toBe(false);
-    expect(isSwapError('error')).toBe(false);
-    expect(isSwapError(123)).toBe(false);
-  });
-
-  it('returns false for objects without the "error" property', () => {
-    const response = {
-      message: 'An error occurred',
-    };
-
-    expect(isSwapError(response)).toBe(false);
-  });
-
-  it('returns false for empty objects', () => {
-    const response = {};
-
-    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');
-  });
-});
-
-describe('getRoundedAmount', () => {
-  it('returns a rounded number with specified decimal places', () => {
-    const balance = '0.0002851826238227';
-    const fractionDigits = 5;
-    const result = getRoundedAmount(balance, fractionDigits);
-    expect(result).toBe('0.00029');
-  });
-
-  it('returns a rounded number with more decimal places than available', () => {
-    const balance = '123.456';
-    const fractionDigits = 10;
-    const result = getRoundedAmount(balance, fractionDigits);
-    expect(result).toBe('123.456');
-  });
-});
diff --git a/src/swap/utils.ts b/src/swap/utils.ts
deleted file mode 100644
index 364be29f00..0000000000
--- a/src/swap/utils.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { SwapError } from './types';
-
-// checks that input is a number
-export function isValidAmount(value: string) {
-  if (value === '') {
-    return true;
-  }
-  const regex = /^[0-9]*\.?[0-9]*$/;
-  return regex.test(value);
-}
-
-export function isSwapError(response: unknown): response is SwapError {
-  return (
-    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();
-}
-
-export function getRoundedAmount(balance: string, fractionDigits: number) {
-  const parsedBalance = parseFloat(balance);
-  return Number(parsedBalance)?.toFixed(fractionDigits).replace(/0+$/, '');
-}
diff --git a/src/utils/formatTokenAmount.test.ts b/src/utils/formatTokenAmount.test.ts
new file mode 100644
index 0000000000..31a9462240
--- /dev/null
+++ b/src/utils/formatTokenAmount.test.ts
@@ -0,0 +1,38 @@
+import { formatTokenAmount } from './formatTokenAmount';
+
+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');
+  });
+});
diff --git a/src/utils/formatTokenAmount.ts b/src/utils/formatTokenAmount.ts
new file mode 100644
index 0000000000..d26ec22cac
--- /dev/null
+++ b/src/utils/formatTokenAmount.ts
@@ -0,0 +1,5 @@
+export function formatTokenAmount(amount: string, decimals: number) {
+  // Convert the string amount to a number using decimals value
+  const numberAmount = Number(amount) / 10 ** decimals;
+  return numberAmount.toString();
+}
diff --git a/src/utils/getRoundedAmount.test.ts b/src/utils/getRoundedAmount.test.ts
new file mode 100644
index 0000000000..9d99d32ca0
--- /dev/null
+++ b/src/utils/getRoundedAmount.test.ts
@@ -0,0 +1,17 @@
+import { getRoundedAmount } from './getRoundedAmount';
+
+describe('getRoundedAmount', () => {
+  it('returns a rounded number with specified decimal places', () => {
+    const balance = '0.0002851826238227';
+    const fractionDigits = 5;
+    const result = getRoundedAmount(balance, fractionDigits);
+    expect(result).toBe('0.00029');
+  });
+
+  it('returns a rounded number with more decimal places than available', () => {
+    const balance = '123.456';
+    const fractionDigits = 10;
+    const result = getRoundedAmount(balance, fractionDigits);
+    expect(result).toBe('123.456');
+  });
+});
diff --git a/src/utils/getRoundedAmount.ts b/src/utils/getRoundedAmount.ts
new file mode 100644
index 0000000000..ee2e3ea30b
--- /dev/null
+++ b/src/utils/getRoundedAmount.ts
@@ -0,0 +1,4 @@
+export function getRoundedAmount(balance: string, fractionDigits: number) {
+  const parsedBalance = Number.parseFloat(balance);
+  return Number(parsedBalance)?.toFixed(fractionDigits).replace(/0+$/, '');
+}
diff --git a/src/utils/isValidAmount.test.ts b/src/utils/isValidAmount.test.ts
new file mode 100644
index 0000000000..84991e7d51
--- /dev/null
+++ b/src/utils/isValidAmount.test.ts
@@ -0,0 +1,31 @@
+import { isValidAmount } from './isValidAmount';
+
+describe('isValidAmount', () => {
+  it('should return true for an empty string', () => {
+    expect(isValidAmount('')).toBe(true);
+  });
+
+  it('should return true for a valid number string with a decimal point', () => {
+    expect(isValidAmount('123.45')).toBe(true);
+  });
+
+  it('should return false for a string with multiple decimal points', () => {
+    expect(isValidAmount('123.45.67')).toBe(false);
+  });
+
+  it('should return false for a string with non-numeric characters', () => {
+    expect(isValidAmount('123a45')).toBe(false);
+  });
+
+  it('should return true for a valid number string with no integer part but a decimal point', () => {
+    expect(isValidAmount('.12345')).toBe(true);
+  });
+
+  it('should return true for a valid number string with no decimal part', () => {
+    expect(isValidAmount('12345.')).toBe(true);
+  });
+
+  it('should return false for a string with spaces', () => {
+    expect(isValidAmount('123 45')).toBe(false);
+  });
+});
diff --git a/src/utils/isValidAmount.ts b/src/utils/isValidAmount.ts
new file mode 100644
index 0000000000..c2229bdc11
--- /dev/null
+++ b/src/utils/isValidAmount.ts
@@ -0,0 +1,8 @@
+// checks that input is a number
+export function isValidAmount(value: string) {
+  if (value === '') {
+    return true;
+  }
+  const regex = /^[0-9]*\.?[0-9]*$/;
+  return regex.test(value);
+}
diff --git a/src/version.ts b/src/version.ts
index 1412837fc7..47f7fc50ef 100644
--- a/src/version.ts
+++ b/src/version.ts
@@ -1 +1 @@
-export const version = '0.20.6';
+export const version = '0.20.7';