Skip to content

Commit 58ac76f

Browse files
sujatagunalesujatagunale
committed
refactor: types and other
1 parent 6c0893a commit 58ac76f

13 files changed

Lines changed: 156 additions & 187 deletions

‎app/coins/[id]/page.tsx‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,9 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
5858
const exchangeColumns = [
5959
{
6060
header: 'Exchange',
61-
cellClassName: ' text-green-500 font-bold',
61+
cellClassName: 'text-green-500 font-bold',
6262
cell: (ticker: Ticker) => (
63-
<Link
64-
href={ticker.trade_url}
65-
target='_blank'
66-
className='exchange-link'
67-
>
63+
<Link href={ticker.trade_url} target='_blank' className='exchange-link'>
6864
{ticker.market.name}
6965
</Link>
7066
),
@@ -73,11 +69,8 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
7369
header: 'Pair',
7470
cell: (ticker: Ticker) => (
7571
<div className='exchange-pair'>
76-
<p className='truncate max-w-[100px] h-full'>{ticker.base}</p>
77-
/
78-
<p className='truncate max-w-[100px] h-full ml-2'>
79-
{ticker.target}
80-
</p>
72+
<p className='truncate max-w-[100px] h-full'>{ticker.base}</p>/
73+
<p className='truncate max-w-[100px] h-full ml-2'>{ticker.target}</p>
8174
</div>
8275
),
8376
},
@@ -88,6 +81,7 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
8881
},
8982
{
9083
header: 'Last Traded',
84+
headClassName: 'text-end',
9185
cellClassName: 'exchange-timestamp',
9286
cell: (ticker: Ticker) => timeAgo(ticker.timestamp),
9387
},
@@ -109,24 +103,19 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
109103
columns={exchangeColumns}
110104
data={coinData.tickers.slice(0, 7)}
111105
rowKey={(_, index) => index}
112-
headerClassName='text-purple-100'
113-
headerRowClassName='hover:bg-transparent'
114-
bodyRowClassName='overflow-hidden rounded-lg hover:bg-dark-400/30!'
115106
/>
116107
</div>
117108
</div>
118109
</LiveDataWrapper>
119110
</section>
120111

121112
<section className='size-full max-lg:mt-8 lg:col-span-1'>
122-
{/* Converter */}
123113
<Converter
124114
symbol={coinData.symbol}
125115
icon={coinData.image.small}
126116
priceList={coinData.market_data.current_price}
127117
/>
128118

129-
{/* Coin Details */}
130119
<div className='w-full mt-8 space-y-4'>
131120
<h4 className='section-title pb-3'>Coin Details</h4>
132121
<div className='coin-details-grid'>
@@ -148,7 +137,6 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
148137
</div>
149138
</div>
150139

151-
{/* Top Gainers / Losers */}
152140
<TopGainersLosers />
153141
</section>
154142
</main>

‎app/coins/page.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,6 @@ const Coins = async ({
9494
data={coinsData}
9595
rowKey={(coin) => coin.id}
9696
headerClassName='coins-header'
97-
headerRowClassName='coins-header-row'
98-
bodyRowClassName='coins-row relative'
9997
/>
10098
</div>
10199

‎app/page.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
import { Suspense } from 'react';
22

3+
import { Categories } from '@/components/home/Categories';
4+
import { CoinOverview } from '@/components/home/CoinOverview';
5+
import { TrendingCoins } from '@/components/home/TrendingCoins';
36
import {
4-
Categories,
57
CategoriesFallback,
6-
} from '@/components/home/Categories';
7-
import {
8-
CoinOverview,
98
CoinOverviewFallback,
10-
} from '@/components/home/CoinOverview';
11-
import {
12-
TrendingCoins,
139
TrendingCoinsFallback,
14-
} from '@/components/home/TrendingCoins';
10+
} from '@/components/home/Fallback';
1511

1612
const Home = () => {
1713
return (

‎components/CoinsPagination.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,7 @@ export default function CoinsPagination({
1515
currentPage,
1616
totalPages,
1717
hasMorePages,
18-
}: {
19-
currentPage: number;
20-
totalPages: number;
21-
hasMorePages: boolean;
22-
}) {
18+
}: Pagination) {
2319
const router = useRouter();
2420

2521
const handlePageChange = (page: number) => {

‎components/DataTable.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,15 @@ export const DataTable = <T,>({
2121
return (
2222
<Table className={tableClassName}>
2323
<TableHeader className={headerClassName}>
24-
<TableRow className={headerRowClassName}>
24+
<TableRow className={cn('hover:bg-transparent!', headerRowClassName)}>
2525
{columns.map((column, columnIndex) => (
2626
<TableHead
2727
key={columnIndex}
2828
className={cn(
2929
headerCellClassName,
3030
column.headClassName,
31-
columnIndex === 0 && 'pl-5'
31+
columnIndex === 0 && 'pl-5',
32+
columnIndex === columns.length - 1 && 'pr-5'
3233
)}
3334
>
3435
{column.header}
@@ -38,13 +39,19 @@ export const DataTable = <T,>({
3839
</TableHeader>
3940
<TableBody>
4041
{data.map((row, rowIndex) => (
41-
<TableRow key={rowKey(row, rowIndex)} className={bodyRowClassName}>
42+
<TableRow
43+
key={rowKey(row, rowIndex)}
44+
className={cn(
45+
'overflow-hidden rounded-lg hover:bg-dark-400/30!',
46+
bodyRowClassName
47+
)}
48+
>
4249
{columns.map((column, columnIndex) => (
4350
<TableCell
4451
key={columnIndex}
4552
className={cn(
46-
column.cellClassName,
47-
columnIndex === 0 && 'pl-5'
53+
column.cellClassName
54+
// columnIndex === 0 && 'pl-5'
4855
)}
4956
>
5057
{column.cell(row, rowIndex)}

‎components/Header.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,7 @@ import { cn } from '@/lib/utils';
77
import { navItems } from '@/lib/constants';
88
import { SearchModal } from './SearchModal';
99

10-
export const Header = ({
11-
trendingCoins = [],
12-
}: {
13-
trendingCoins: TrendingCoin[];
14-
}) => {
10+
export const Header = ({ trendingCoins = [] }: HeaderProps) => {
1511
const pathname = usePathname();
1612

1713
return (

‎components/LiveDataWrapper.tsx‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ export default function LiveDataWrapper({
1919
poolId,
2020
});
2121

22-
console.log('=========poolId', poolId);
2322
const tradeColumns = [
2423
{
2524
header: 'Price',
@@ -92,21 +91,11 @@ export default function LiveDataWrapper({
9291
<div className='w-full my-8 space-y-4'>
9392
<h4 className='section-title'>Recent Trades</h4>
9493
<div className='custom-scrollbar bg-dark-500 mt-5 rounded-xl overflow-hidden'>
95-
{trades.length > 0 ? (
96-
<DataTable
97-
columns={tradeColumns}
98-
data={trades}
99-
rowKey={(_, index) => index}
100-
tableClassName='bg-dark-500'
101-
headerClassName='text-purple-100'
102-
headerRowClassName='hover:bg-transparent text-sm'
103-
bodyRowClassName='hover:bg-transparent'
104-
/>
105-
) : (
106-
<div className='text-center p-10 text-purple-100/50'>
107-
No recent trades
108-
</div>
109-
)}
94+
<DataTable
95+
columns={tradeColumns}
96+
data={trades ?? []}
97+
rowKey={(_, index) => index}
98+
/>
11099
</div>
111100
</div>
112101

‎components/home/Categories.tsx‎

Lines changed: 0 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,4 @@
11
import { DataTable } from '@/components/DataTable';
2-
import {
3-
Table,
4-
TableBody,
5-
TableCell,
6-
TableHead,
7-
TableHeader,
8-
TableRow,
9-
} from '@/components/ui/table';
10-
import { Skeleton } from '@/components/ui/skeleton';
112
import { getCategories } from '@/lib/coingecko.actions';
123
import { cn, formatPercentage, formatPrice } from '@/lib/utils';
134
import { TrendingDown, TrendingUp } from 'lucide-react';
@@ -81,56 +72,7 @@ export const Categories = async () => {
8172
columns={columns}
8273
data={categories}
8374
rowKey={(_, index) => index}
84-
headerClassName='text-purple-100'
85-
headerRowClassName='hover:bg-transparent'
86-
bodyRowClassName='md:text-base rounded-lg hover:bg-dark-400/30!'
8775
/>
8876
</div>
8977
);
9078
};
91-
92-
export const CategoriesFallback = () => (
93-
<div className='custom-scrollbar categories-container'>
94-
<h4 className='section-title pl-5'>Top Categories</h4>
95-
<Table>
96-
<TableHeader className='text-purple-100'>
97-
<TableRow className='hover:bg-transparent'>
98-
<TableHead className='exchange-header-left'>Category</TableHead>
99-
<TableHead className='text-purple-100'>Top Gainers</TableHead>
100-
<TableHead className='text-purple-100 pl-7'>24h Change</TableHead>
101-
<TableHead className='text-purple-100'>Market Cap</TableHead>
102-
<TableHead className='text-purple-100'>24h Volume</TableHead>
103-
</TableRow>
104-
</TableHeader>
105-
<TableBody>
106-
{Array.from({ length: 6 }).map((_, index) => (
107-
<TableRow
108-
key={index}
109-
className='md:text-base rounded-lg hover:bg-dark-400/30!'
110-
>
111-
<TableCell className='pl-5 font-bold'>
112-
<Skeleton className='h-4 w-32 skeleton' />
113-
</TableCell>
114-
<TableCell className='flex gap-1 mr-5'>
115-
{Array.from({ length: 3 }).map((__, coinIndex) => (
116-
<Skeleton
117-
key={coinIndex}
118-
className='h-7 w-7 rounded-full skeleton'
119-
/>
120-
))}
121-
</TableCell>
122-
<TableCell className='font-medium'>
123-
<Skeleton className='h-4 w-16 skeleton' />
124-
</TableCell>
125-
<TableCell className='font-medium'>
126-
<Skeleton className='h-4 w-20 skeleton' />
127-
</TableCell>
128-
<TableCell className='font-medium'>
129-
<Skeleton className='h-4 w-24 skeleton' />
130-
</TableCell>
131-
</TableRow>
132-
))}
133-
</TableBody>
134-
</Table>
135-
</div>
136-
);

‎components/home/CoinOverview.tsx‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import Image from 'next/image';
22

33
import CandlestickChart from '../CandlestickChart';
4-
import { Skeleton } from '../ui/skeleton';
54
import { getCoinDetails, getCoinOHLC } from '@/lib/coingecko.actions';
65
import { formatPrice } from '@/lib/utils';
76

@@ -35,18 +34,3 @@ export const CoinOverview = async () => {
3534
</div>
3635
);
3736
};
38-
39-
export const CoinOverviewFallback = () => (
40-
<div className='chart-section-container'>
41-
<div className='w-full h-full min-h-[420px] rounded-2xl bg-dark-500/60 p-6'>
42-
<div className='flex items-center gap-4 mb-6'>
43-
<Skeleton className='h-14 w-14 rounded-full skeleton' />
44-
<div className='flex flex-col gap-2 flex-1'>
45-
<Skeleton className='h-4 w-1/3 skeleton' />
46-
<Skeleton className='h-8 w-1/2 skeleton' />
47-
</div>
48-
</div>
49-
<Skeleton className='h-[280px] w-full rounded-xl skeleton' />
50-
</div>
51-
</div>
52-
);

0 commit comments

Comments
 (0)