chore: polish (#552)

.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

src/internal/text/TextBody.tsx

@@ -1,12 +1,12 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 type TextBodyReact = {
   children: ReactNode;
 };
 
 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>
   );

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>
   );
 }

src/internal/text/TextHeadline.tsx

@@ -1,12 +1,12 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 type TextHeadlineReact = {
   children: ReactNode;
 };
 
 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>
   );

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>
   );

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>
   );

src/internal/text/TextLegal.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 type TextLegalReact = {
   children: ReactNode;

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';
 

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';
 

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}

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';
 

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);
+  });
+});

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
+  );
+}

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');
+  });
+});

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();
+}

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');
+  });
+});