Skip to content

Commit 7f828ff

Browse files
nikkyeyanikkyeya
committed
fix
1 parent 06854a7 commit 7f828ff

File tree

6 files changed

+114
-184
lines changed

6 files changed

+114
-184
lines changed

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

Lines changed: 42 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -27,30 +27,38 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
2727
const coinOHLCData = await getCoinOHLC(id, 1, 'usd', 'hourly', 'full');
2828
const pool = await fetchPools(id);
2929

30-
const coin = {
31-
id: coinData.id,
32-
name: coinData.name,
33-
symbol: coinData.symbol,
34-
image: coinData.image.large,
35-
icon: coinData.image.small,
36-
price: coinData.market_data.current_price.usd,
37-
priceList: coinData.market_data.current_price,
38-
priceChange24h: coinData.market_data.price_change_24h_in_currency.usd,
39-
priceChangePercentage24h:
40-
coinData.market_data.price_change_percentage_24h_in_currency.usd,
41-
priceChangePercentage30d:
42-
coinData.market_data.price_change_percentage_30d_in_currency.usd,
43-
marketCap: coinData.market_data.market_cap.usd,
44-
marketCapRank: coinData.market_cap_rank,
45-
description: coinData.description.en,
46-
totalVolume: coinData.market_data.total_volume.usd,
47-
website: coinData.links.homepage[0],
48-
explorer: coinData.links.blockchain_site[0],
49-
communityLink: coinData.links.subreddit_url,
50-
tickers: coinData.tickers,
51-
};
52-
53-
console.log('==== coinOHLCData:', coinOHLCData);
30+
const coinDetails = [
31+
{
32+
label: 'Market Cap',
33+
value: formatPrice(coinData.market_data.market_cap.usd),
34+
},
35+
{
36+
label: 'Market Cap Rank',
37+
value: `# ${coinData.market_cap_rank}`,
38+
},
39+
{
40+
label: 'Total Volume',
41+
value: formatPrice(coinData.market_data.total_volume.usd),
42+
},
43+
{
44+
label: 'Website',
45+
value: '-',
46+
link: coinData.links.homepage[0],
47+
linkText: 'Website',
48+
},
49+
{
50+
label: 'Explorer',
51+
value: '-',
52+
link: coinData.links.blockchain_site[0],
53+
linkText: 'Explorer',
54+
},
55+
{
56+
label: 'Community Link',
57+
value: '-',
58+
link: coinData.links.subreddit_url,
59+
linkText: 'Community',
60+
},
61+
];
5462

5563
return (
5664
<main className='coin-details-main'>
@@ -59,9 +67,10 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
5967
coinOHLCData={coinOHLCData}
6068
coinId={id}
6169
pool={pool}
62-
coin={coin}
70+
coin={coinData}
6371
>
64-
{/* Exchange Listings */}
72+
{/* Exchange Listings - pass it as a child of a client component
73+
// so it will be render server side */}
6574
<div className='w-full mt-8 space-y-4'>
6675
<h4 className='section-title'>Exchange Listings</h4>
6776
<div className='custom-scrollbar mt-5 exchange-container'>
@@ -79,7 +88,7 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
7988
</TableRow>
8089
</TableHeader>
8190
<TableBody>
82-
{coin.tickers
91+
{coinData.tickers
8392
.slice(0, 7)
8493
.map((ticker: Ticker, index: number) => (
8594
<TableRow
@@ -125,51 +134,20 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
125134
{/* Converter */}
126135
<div className='w-full space-y-5'>
127136
<h4 className='converter-title'>
128-
{coin.symbol.toUpperCase()} Converter
137+
{coinData.symbol.toUpperCase()} Converter
129138
</h4>
130139
<Converter
131-
symbol={coin.symbol}
132-
icon={coin.icon}
133-
priceList={coin.priceList}
140+
symbol={coinData.symbol}
141+
icon={coinData.image.small}
142+
priceList={coinData.market_data.current_price}
134143
/>
135144
</div>
136145

137146
{/* Coin Details */}
138147
<div className='w-full mt-8 space-y-4'>
139148
<h4 className='section-title pb-3'>Coin Details</h4>
140149
<div className='coin-details-grid'>
141-
{[
142-
{
143-
label: 'Market Cap',
144-
value: formatPrice(coin.marketCap),
145-
},
146-
{
147-
label: 'Market Cap Rank',
148-
value: `# ${coin.marketCapRank}`,
149-
},
150-
{
151-
label: 'Total Volume',
152-
value: formatPrice(coin.totalVolume),
153-
},
154-
{
155-
label: 'Website',
156-
value: '-',
157-
link: coin.website,
158-
linkText: 'Website',
159-
},
160-
{
161-
label: 'Explorer',
162-
value: '-',
163-
link: coin.explorer,
164-
linkText: 'Explorer',
165-
},
166-
{
167-
label: 'Community Link',
168-
value: '-',
169-
link: coin.communityLink,
170-
linkText: 'Community',
171-
},
172-
].map((detail, index) => (
150+
{coinDetails.map((detail, index) => (
173151
<CoinDetailCard
174152
key={index}
175153
label={detail.label}
@@ -181,6 +159,7 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
181159
</div>
182160
</div>
183161

162+
{/* Top Gainers / Losers */}
184163
<Tabs defaultValue='top-gainers' className='mt-8 w-full'>
185164
<TabsList className='size-full p-1 bg-transparent border-b border-dark-500 rounded-none '>
186165
<TabsTrigger

‎app/page.tsx‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ import {
1717
TableRow,
1818
} from '@/components/ui/table';
1919

20-
import ChartSection from '@/components/ChartSection';
2120
import { TrendingDown, TrendingUp } from 'lucide-react';
21+
import CandlestickChart from '@/components/CandlestickChart';
2222

2323
const Home = async () => {
2424
const coinData = await getCoinDetails('bitcoin');
@@ -29,12 +29,28 @@ const Home = async () => {
2929
return (
3030
<main className='main-container'>
3131
<section className='home-grid'>
32-
{/* Coin Overview */}
33-
<ChartSection
34-
coinData={coinData}
35-
coinOHLCData={coinOHLCData}
36-
coinId='bitcoin'
37-
/>
32+
{/* Bitcoin Overview */}
33+
<div className='chart-section-container'>
34+
<CandlestickChart data={coinOHLCData} coinId='bitcoin'>
35+
<div className='chart-section-header'>
36+
<Image
37+
src={coinData.image.large}
38+
alt={coinData.name}
39+
width={56}
40+
height={56}
41+
className='chart-section-image'
42+
/>
43+
<div className='chart-section-info'>
44+
<p className='chart-section-coin-name'>
45+
{coinData.name} / {coinData.symbol.toUpperCase()}
46+
</p>
47+
<h1 className='chart-section-price'>
48+
{formatPrice(coinData.market_data.current_price.usd)}
49+
</h1>
50+
</div>
51+
</div>
52+
</CandlestickChart>
53+
</div>
3854

3955
{/* Trending Coins */}
4056
<div className='top-movers-container'>

‎components/ChartSection.tsx‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎components/LiveDataWrapper.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,13 @@ export default function LiveDataWrapper({
3434
<section className='size-full xl:col-span-2'>
3535
<CoinHeader
3636
name={coin.name}
37-
image={coin.image}
38-
livePrice={price?.usd ?? coin.price}
37+
image={coin.image.large}
38+
livePrice={price?.usd ?? coin.market_data.current_price.usd}
3939
livePriceChangePercentage24h={
40-
price?.change24h ?? coin.priceChangePercentage24h
40+
price?.change24h ?? coin.market_data.price_change_percentage_24h_in_currency.usd
4141
}
42-
priceChangePercentage30d={coin.priceChangePercentage30d}
43-
priceChange24h={coin.priceChange24h}
42+
priceChangePercentage30d={coin.market_data.price_change_percentage_30d_in_currency.usd}
43+
priceChange24h={coin.market_data.price_change_24h_in_currency.usd}
4444
/>
4545

4646
<Separator className='my-8 bg-purple-600' />

‎lib/utils.ts‎

Lines changed: 1 addition & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { clsx, type ClassValue } from 'clsx';
2-
import { CandlestickData, Time } from 'lightweight-charts';
2+
import { Time } from 'lightweight-charts';
33
import { twMerge } from 'tailwind-merge';
44

55
export function cn(...inputs: ClassValue[]) {
@@ -78,42 +78,7 @@ export function convertOHLCData(data: OHLCData[]) {
7878
low: d[3],
7979
close: d[4],
8080
}))
81-
// .sort((a, b) => a.time - b.time)
8281
.filter((item, index, arr) =>
8382
index === 0 || item.time !== arr[index - 1].time
8483
);
85-
86-
}
87-
88-
89-
export function convertOHLCToCandlestickData(
90-
data: OHLCData[]
91-
): CandlestickData<Time>[] {
92-
// Convert OHLC tuples to candlestick objects
93-
const mapped = data.map(([timestamp, open, high, low, close]) => ({
94-
time: timestamp as Time, // use timestamp as-is
95-
open,
96-
high,
97-
low,
98-
close,
99-
}));
100-
101-
// Sort ascending by time
102-
// mapped.sort((a, b) => (a.time as number) - (b.time as number));
103-
104-
// Deduplicate any entries with the same timestamp (keep the last one)
105-
const deduped: CandlestickData<Time>[] = [];
106-
for (const item of mapped) {
107-
if (
108-
deduped.length === 0 ||
109-
(deduped[deduped.length - 1].time as number) < (item.time as number)
110-
) {
111-
deduped.push(item);
112-
} else {
113-
// Replace the last item if timestamp is the same
114-
deduped[deduped.length - 1] = item;
115-
}
116-
}
117-
118-
return deduped;
11984
}

0 commit comments

Comments
 (0)