feature: Top Categories

app/coins/[id]/page.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { fetcher, getPools } from '@/lib/coingecko.actions';
+import Link from 'next/link';
+import { ArrowUpRight } from 'lucide-react';
+import { formatCurrency } from '@/lib/utils';
+import LiveDataWrapper from '@/components/LiveDataWrapper';
+import Converter from '@/components/Converter';
+import TopGainersLosers from '@/components/TopGainersLosers';
+// import Converter from '@/components/Converter';
+
+const Page = async ({ params }: NextPageProps) => {
+  const { id } = await params;
+
+  const [coinData, coinOHLCData] = await Promise.all([
+    fetcher<CoinDetailsData>(`/coins/${id}`, {
+      dex_pair_format: 'contract_address',
+    }),
+    fetcher<OHLCData>(`/coins/${id}/ohlc`, {
+      vs_currency: 'usd',
+      days: 1,
+      //   interval: 'hourly',
+      precision: 'full',
+    }),
+  ]);
+
+  const platform = coinData.asset_platform_id
+    ? coinData.detail_platforms?.[coinData.asset_platform_id]
+    : null;
+  const network = platform?.geckoterminal_url.split('/')[3] || null;
+  const contractAddress = platform?.contract_address || null;
+
+  const pool = await getPools(id, network, contractAddress);
+
+  const coinDetails = [
+    {
+      label: 'Market Cap',
+      value: formatCurrency(coinData.market_data.market_cap.usd),
+    },
+    {
+      label: 'Market Cap Rank',
+      value: `# ${coinData.market_cap_rank}`,
+    },
+    {
+      label: 'Total Volume',
+      value: formatCurrency(coinData.market_data.total_volume.usd),
+    },
+    {
+      label: 'Website',
+      value: '-',
+      link: coinData.links.homepage[0],
+      linkText: 'Homepage',
+    },
+    {
+      label: 'Explorer',
+      value: '-',
+      link: coinData.links.blockchain_site[0],
+      linkText: 'Explorer',
+    },
+    {
+      label: 'Community',
+      value: '-',
+      link: coinData.links.subreddit_url,
+      linkText: 'Community',
+    },
+  ];
+
+  return (
+    <main id="coin-details-page">
+      <section className="primary">
+        <LiveDataWrapper
+          coinId={id}
+          poolId={pool.id}
+          coin={coinData}
+          coinOHLCData={coinOHLCData}
+        >
+          <h4>Exchange Listings</h4>
+        </LiveDataWrapper>
+      </section>
+
+      <section className="secondary">
+        <Converter
+          symbol={coinData.symbol}
+          icon={coinData.image.small}
+          priceList={coinData.market_data.current_price}
+        />
+
+        <div className="details">
+          <h4>Coin Details</h4>
+
+          <ul className="details-grid">
+            {coinDetails.map(({ label, value, link, linkText }, index) => (
+              <li key={index}>
+                <p className={label}>{label}</p>
+
+                {link ? (
+                  <div className="link">
+                    <Link href={link} target="_blank">
+                      {linkText || label}
+                    </Link>
+                    <ArrowUpRight size={16} />
+                  </div>
+                ) : (
+                  <p className="text-base font-medium">{value}</p>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+        <TopGainersLosers />
+      </section>
+    </main>
+  );
+};
+export default Page;

app/coins/page.tsx

@@ -0,0 +1,98 @@
+import { fetcher } from '@/lib/coingecko.actions';
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { cn, formatPercentage, formatCurrency } from '@/lib/utils';
+import DataTable from '@/components/DataTable';
+import CoinsPagination from '@/components/CoinsPagination';
+
+const Coins = async ({ searchParams }: NextPageProps) => {
+  const { page } = await searchParams;
+
+  const currentPage = Number(page) || 1;
+  const perPage = 10;
+  const totalCoins = 1000;
+  const totalPages = totalCoins / perPage;
+
+  const coinsData = await fetcher<CoinMarketData[]>('/coins/markets', {
+    vs_currency: 'usd',
+    order: 'market_cap_desc',
+    per_page: perPage,
+    page: currentPage,
+    sparkline: 'false',
+    price_change_percentage: '24h',
+  });
+
+  const columns: DataTableColumn<CoinMarketData>[] = [
+    {
+      header: 'Rank',
+      cellClassName: 'rank-cell',
+      cell: (coin) => (
+        <>
+          #{coin.market_cap_rank}
+          <Link href={`/coins/${coin.id}`} aria-label="View coin" />
+        </>
+      ),
+    },
+    {
+      header: 'Token',
+      cellClassName: 'token-cell',
+      cell: (coin) => (
+        <div className="token-info">
+          <Image src={coin.image} alt={coin.name} width={36} height={36} />
+          <p>
+            {coin.name} ({coin.symbol.toUpperCase()})
+          </p>
+        </div>
+      ),
+    },
+    {
+      header: 'Price',
+      cellClassName: 'price-cell',
+      cell: (coin) => formatCurrency(coin.current_price),
+    },
+    {
+      header: '24h Change',
+      cellClassName: 'change-cell',
+      cell: (coin) => {
+        const isTrendingUp = coin.price_change_percentage_24h > 0;
+
+        return (
+          <span
+            className={cn('change-value', {
+              'text-green-600': isTrendingUp,
+              'text-red-500': !isTrendingUp,
+            })}
+          >
+            {isTrendingUp && '+'}
+            {formatPercentage(coin.price_change_percentage_24h)}
+          </span>
+        );
+      },
+    },
+    {
+      header: 'Market Cap',
+      cellClassName: 'market-cap-cell',
+      cell: (coin) => formatCurrency(coin.market_cap),
+    },
+  ];
+
+  return (
+    <main id="coins-page">
+      <div className="content">
+        <h4>All Coins</h4>
+
+        <DataTable
+          tableClassName="coins-table"
+          columns={columns}
+          data={coinsData}
+          rowKey={(coin) => coin.id}
+        />
+
+        <CoinsPagination currentPage={currentPage} totalPages={totalPages} />
+      </div>
+    </main>
+  );
+};
+
+export default Coins;