Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: polish #552

Merged
merged 3 commits into from
Jun 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .changeset/fuzzy-eggs-cross.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
4 changes: 2 additions & 2 deletions src/internal/text/TextBody.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions src/internal/text/TextCaption.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ReactNode } from 'react';
import type { ReactNode } from 'react';

type TextCaptionReact = {
children: ReactNode;
Expand All @@ -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>
);
}
4 changes: 2 additions & 2 deletions src/internal/text/TextHeadline.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions src/internal/text/TextLabel1.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ReactNode } from 'react';
import type { ReactNode } from 'react';

type TextLabel1React = {
children: ReactNode;
Expand All @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions src/internal/text/TextLabel2.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ReactNode } from 'react';
import type { ReactNode } from 'react';

type TextLabel2React = {
children: ReactNode;
Expand All @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion src/internal/text/TextLegal.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ReactNode } from 'react';
import type { ReactNode } from 'react';

type TextLegalReact = {
children: ReactNode;
Expand Down
3 changes: 2 additions & 1 deletion src/swap/components/Swap.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion src/swap/components/SwapAmountInput.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
9 changes: 5 additions & 4 deletions src/swap/components/SwapAmountInput.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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">
Expand All @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/swap/components/SwapButton.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
33 changes: 33 additions & 0 deletions src/swap/core/isSwapError.test.ts
Original file line number Diff line number Diff line change
@@ -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);
});
});
7 changes: 7 additions & 0 deletions src/swap/core/isSwapError.ts
Original file line number Diff line number Diff line change
@@ -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
);
}
121 changes: 0 additions & 121 deletions src/swap/utils.test.ts

This file was deleted.

27 changes: 0 additions & 27 deletions src/swap/utils.ts

This file was deleted.

38 changes: 38 additions & 0 deletions src/utils/formatTokenAmount.test.ts
Original file line number Diff line number Diff line change
@@ -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');
});
});
5 changes: 5 additions & 0 deletions src/utils/formatTokenAmount.ts
Original file line number Diff line number Diff line change
@@ -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();
}
17 changes: 17 additions & 0 deletions src/utils/getRoundedAmount.test.ts
Original file line number Diff line number Diff line change
@@ -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');
});
});
Loading
Loading