Refactor/codebase v2

.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.addMissingImports": "explicit"
+  },
+  "prettier.tabWidth": 2,
+  "prettier.useTabs": false,
+  "prettier.semi": true,
+  "prettier.singleQuote": true,
+  "prettier.jsxSingleQuote": true,
+  "prettier.trailingComma": "es5",
+  "prettier.arrowParens": "always",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

app/coins/[id]/page.tsx

@@ -4,20 +4,89 @@ import {
   fetchPools,
   fetchTopPool,
 } from '@/lib/coingecko.actions';
-import { Converter } from '@/components/Converter';
+import { Converter } from '@/components/coin-details/Converter';
 import LiveDataWrapper from '@/components/LiveDataWrapper';
-import { ExchangeListings } from '@/components/ExchangeListings';
-import { CoinDetailsSection } from '@/components/CoinDetailsSection';
-import { TopGainersLosers } from '@/components/TopGainersLosers';
+import { TopGainersLosers } from '@/components/coin-details/TopGainersLosers';
+import { DataTable } from '@/components/DataTable';
+import { formatPrice, timeAgo } from '@/lib/utils';
+import Link from 'next/link';
+import { ArrowUpRight } from 'lucide-react';
 
 const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
   const { id } = await params;
   const coinData = await getCoinDetails(id);
+
   const pool = coinData.asset_platform_id
     ? await fetchTopPool(coinData.asset_platform_id, coinData.contract_address)
     : await fetchPools(id);
+
   const coinOHLCData = await getCoinOHLC(id, 1, 'usd', 'hourly', 'full');
 
+  const coinDetails = [
+    {
+      label: 'Market Cap',
+      value: formatPrice(coinData.market_data.market_cap.usd),
+    },
+    {
+      label: 'Market Cap Rank',
+      value: `# ${coinData.market_cap_rank}`,
+    },
+    {
+      label: 'Total Volume',
+      value: formatPrice(coinData.market_data.total_volume.usd),
+    },
+    {
+      label: 'Website',
+      value: '-',
+      link: coinData.links.homepage[0],
+      linkText: 'Website',
+    },
+    {
+      label: 'Explorer',
+      value: '-',
+      link: coinData.links.blockchain_site[0],
+      linkText: 'Explorer',
+    },
+    {
+      label: 'Community Link',
+      value: '-',
+      link: coinData.links.subreddit_url,
+      linkText: 'Community',
+    },
+  ];
+
+  const exchangeColumns = [
+    {
+      header: 'Exchange',
+      cellClassName: 'text-green-500 font-bold',
+      cell: (ticker: Ticker) => (
+        <Link href={ticker.trade_url} target='_blank' className='exchange-link'>
+          {ticker.market.name}
+        </Link>
+      ),
+    },
+    {
+      header: 'Pair',
+      cell: (ticker: Ticker) => (
+        <div className='exchange-pair'>
+          <p className='truncate max-w-[100px] h-full'>{ticker.base}</p>/
+          <p className='truncate max-w-[100px] h-full ml-2'>{ticker.target}</p>
+        </div>
+      ),
+    },
+    {
+      header: 'Price',
+      cellClassName: 'font-medium',
+      cell: (ticker: Ticker) => formatPrice(ticker.converted_last.usd),
+    },
+    {
+      header: 'Last Traded',
+      headClassName: 'text-end',
+      cellClassName: 'exchange-timestamp',
+      cell: (ticker: Ticker) => timeAgo(ticker.timestamp),
+    },
+  ];
+
   return (
     <main className='coin-details-main'>
       <section className='size-full xl:col-span-2'>
@@ -27,23 +96,47 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
           coin={coinData}
           coinOHLCData={coinOHLCData}
         >
-          {/* Exchange Listings - pass it as a child of a client component so it will be render server side */}
-          <ExchangeListings coinData={coinData} />
+          <div className='w-full mt-8 space-y-4'>
+            <h4 className='section-title'>Exchange Listings</h4>
+            <div className='custom-scrollbar mt-5 exchange-container'>
+              <DataTable
+                columns={exchangeColumns}
+                data={coinData.tickers.slice(0, 7)}
+                rowKey={(_, index) => index}
+              />
+            </div>
+          </div>
         </LiveDataWrapper>
       </section>
 
       <section className='size-full max-lg:mt-8 lg:col-span-1'>
-        {/* Converter */}
         <Converter
           symbol={coinData.symbol}
           icon={coinData.image.small}
           priceList={coinData.market_data.current_price}
         />
 
-        {/* Coin Details */}
-        <CoinDetailsSection coinData={coinData} />
+        <div className='w-full mt-8 space-y-4'>
+          <h4 className='section-title pb-3'>Coin Details</h4>
+          <div className='coin-details-grid'>
+            {coinDetails.map(({ label, value, link, linkText }, index) => (
+              <div key={index} className='detail-card'>
+                <p className='text-purple-100'>{label}</p>
+                {link ? (
+                  <div className='detail-link'>
+                    <Link href={link} target='_blank'>
+                      {linkText || label}
+                    </Link>
+                    <ArrowUpRight size={16} />
+                  </div>
+                ) : (
+                  <p className='text-base font-medium'>{value}</p>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
 
-        {/* Top Gainers / Losers */}
         <TopGainersLosers />
       </section>
     </main>

app/coins/page.tsx

@@ -1,16 +1,10 @@
 import { getCoinList } from '@/lib/coingecko.actions';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
+import { DataTable } from '@/components/DataTable';
 import Image from 'next/image';
-import { cn, formatPercentage, formatPrice } from '@/lib/utils';
+import Link from 'next/link';
+
 import CoinsPagination from '@/components/CoinsPagination';
-import { ClickableTableRow } from '@/components/ClickableTableRow';
+import { cn, formatPercentage, formatPrice } from '@/lib/utils';
 
 const Coins = async ({
   searchParams,
@@ -32,68 +26,75 @@ const Coins = async ({
   const estimatedTotalPages =
     currentPage >= 100 ? Math.ceil(currentPage / 100) * 100 + 100 : 100;
 
+  const columns = [
+    {
+      header: 'Rank',
+      cellClassName: 'coins-rank',
+      cell: (coin: CoinMarketData) => (
+        <>
+          #{coin.market_cap_rank}
+          <Link
+            href={`/coins/${coin.id}`}
+            className='absolute inset-0 z-10'
+            aria-label='View coin'
+          />
+        </>
+      ),
+    },
+    {
+      header: 'Token',
+      cellClassName: 'coins-token',
+      cell: (coin: CoinMarketData) => (
+        <div className='coins-token-info'>
+          <Image src={coin.image} alt={coin.name} width={36} height={36} />
+          <p className='max-w-full truncate'>
+            {coin.name} ({coin.symbol.toUpperCase()})
+          </p>
+        </div>
+      ),
+    },
+    {
+      header: 'Price',
+      cellClassName: 'coins-price',
+      cell: (coin: CoinMarketData) => formatPrice(coin.current_price),
+    },
+    {
+      header: '24h Change',
+      cellClassName: 'font-medium',
+      cell: (coin: CoinMarketData) => {
+        const isTrendingUp = coin.price_change_percentage_24h > 0;
+
+        return (
+          <span
+            className={cn('coins-change', {
+              'text-green-600': isTrendingUp,
+              'text-red-500': !isTrendingUp,
+            })}
+          >
+            {isTrendingUp && '+'}
+            {formatPercentage(coin.price_change_percentage_24h)}
+          </span>
+        );
+      },
+    },
+    {
+      header: 'Market Cap',
+      cellClassName: 'coins-market-cap',
+      cell: (coin: CoinMarketData) => formatPrice(coin.market_cap),
+    },
+  ];
+
   return (
     <main className='coins-main'>
       <div className='flex flex-col w-full space-y-5'>
         <h4 className='text-2xl'>All Coins</h4>
         <div className='custom-scrollbar coins-container'>
-          <Table>
-            <TableHeader className='coins-header'>
-              <TableRow className='coins-header-row'>
-                <TableHead className='coins-header-left'>Rank</TableHead>
-                <TableHead className='text-purple-100'>Token</TableHead>
-                <TableHead className='text-purple-100'>Price</TableHead>
-                <TableHead className='coins-header-right'>24h Change</TableHead>
-                <TableHead className='coins-header-right'>Market Cap</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {coinsData.map((coin: CoinMarketData) => {
-                const isTrendingUp = coin.price_change_percentage_24h > 0;
-                return (
-                  <ClickableTableRow
-                    key={coin.id}
-                    href={`/coins/${coin.id}`}
-                    className='coins-row'
-                  >
-                    <TableCell className='coins-rank'>
-                      #{coin.market_cap_rank}
-                    </TableCell>
-                    <TableCell className='coins-token'>
-                      <div className='coins-token-info'>
-                        <Image
-                          src={coin.image}
-                          alt={coin.name}
-                          width={36}
-                          height={36}
-                        />
-                        <p className='max-w-[100%] truncate'>
-                          {coin.name} ({coin.symbol.toUpperCase()})
-                        </p>
-                      </div>
-                    </TableCell>
-                    <TableCell className='coins-price'>
-                      {formatPrice(coin.current_price)}
-                    </TableCell>
-                    <TableCell className='font-medium'>
-                      <span
-                        className={cn('coins-change', {
-                          'text-green-600': isTrendingUp,
-                          'text-red-500': !isTrendingUp,
-                        })}
-                      >
-                        {isTrendingUp && '+'}
-                        {formatPercentage(coin.price_change_percentage_24h)}
-                      </span>
-                    </TableCell>
-                    <TableCell className='coins-market-cap'>
-                      {formatPrice(coin.market_cap)}
-                    </TableCell>
-                  </ClickableTableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
+          <DataTable
+            columns={columns}
+            data={coinsData}
+            rowKey={(coin) => coin.id}
+            headerClassName='coins-header'
+          />
         </div>
 
         <CoinsPagination