-
-
-
-
-
+
+
))}
diff --git a/src/app/components/CoinChart.tsx b/src/app/components/CoinChart.tsx
new file mode 100644
index 0000000..0283532
--- /dev/null
+++ b/src/app/components/CoinChart.tsx
@@ -0,0 +1,148 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import {
+ BarChart,
+ Bar,
+ XAxis,
+ Tooltip,
+ ResponsiveContainer,
+ AreaChart,
+ Area,
+} from "recharts";
+import { AppDispatch, useAppSelector } from "../../redux/store";
+import { getCoinDataGraph } from "../../redux/features/selectedCoinSlice";
+import formatNumber from "../utils/formatNumber";
+
+type Payload = {
+ date: string;
+ value?: number;
+ volume?: number;
+};
+
+type CoinChartProps = {
+ chartType: "price" | "volume";
+ currencyCode: string;
+ currencySymbol?: string;
+};
+
+export default function CoinChart({
+ chartType,
+ currencyCode,
+ currencySymbol,
+}: CoinChartProps) {
+ const dispatch: AppDispatch = useDispatch();
+ const { selectedCoins, loading, hasError } = useAppSelector(
+ (state) => state.selectedCoin
+ );
+ const [currentValue, setCurrentValue] = useState("");
+ const [currentDate, setCurrentDate] = useState("");
+
+ useEffect(() => {
+ dispatch(
+ getCoinDataGraph({ currency: currencyCode, days: "3", coinId: "bitcoin" })
+ );
+ }, [dispatch, currencyCode]);
+
+ useEffect(() => {
+ if (selectedCoins.length > 0) {
+ const lastDataPoint =
+ chartType === "price"
+ ? selectedCoins[0].prices[selectedCoins[0].prices.length - 1]
+ : selectedCoins[0].total_volumes[
+ selectedCoins[0].total_volumes.length - 1
+ ];
+ const lastValue = lastDataPoint[1];
+ const lastDate = new Date(lastDataPoint[0]).toLocaleDateString();
+
+ setCurrentValue(`${lastValue.toFixed(2)}`);
+ setCurrentDate(lastDate);
+ }
+ }, [selectedCoins, chartType, currencyCode]);
+
+ if (loading === "pending") {
+ return
Loading...
;
+ }
+
+ if (hasError) {
+ return
Error fetching data
;
+ }
+
+ const coin = selectedCoins.length > 0 ? selectedCoins[0] : null;
+
+ const formattedData = coin
+ ? chartType === "price"
+ ? coin.prices.map(([time, value]) => ({
+ date: new Date(time).toLocaleDateString(),
+ value,
+ }))
+ : coin.total_volumes.map(([time, volume]) => ({
+ date: new Date(time).toLocaleDateString(),
+ volume,
+ }))
+ : [];
+
+ const handleMouseMove = (e: { activePayload?: { payload: Payload }[] }) => {
+ if (e.activePayload && e.activePayload.length > 0) {
+ const { payload } = e.activePayload[0];
+ const dataKey = chartType === "price" ? "value" : "volume";
+ const value = payload[dataKey]?.toFixed(2) ?? "0";
+ setCurrentValue(value);
+ setCurrentDate(payload.date);
+ }
+ };
+
+ return (
+
+
+
+ {chartType === "volume"
+ ? "Volume 24h"
+ : `${coin?.id.charAt(0).toUpperCase()}${coin?.id.slice(1)}`}
+
+
+ {currentValue
+ ? `${currencySymbol}${formatNumber(parseFloat(currentValue))}`
+ : "Fetching..."}
+
+
+ {currentDate}
+
+
+
+ {chartType === "volume" ? (
+
+
+
+
+
+
+
+
+ } />
+
+
+ ) : (
+
+
+
+
+
+
+
+
+
+
+
+ } />
+
+ )}
+
+
+ );
+}
diff --git a/src/app/components/GraphCoins.tsx b/src/app/components/GraphCoins.tsx
new file mode 100644
index 0000000..ca63c25
--- /dev/null
+++ b/src/app/components/GraphCoins.tsx
@@ -0,0 +1,26 @@
+"use client";
+import CoinChart from "./CoinChart";
+import { useAppSelector } from "../../redux/store";
+
+export default function GraphCoins() {
+ const currencyCode = useAppSelector(
+ (state) => state.currency.currentCurrency.code
+ );
+ const currencySimbol = useAppSelector(
+ (state) => state.currency.currentCurrency.symbol
+ );
+ return (
+
+
+
+
+ );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 948e893..11fffb5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,6 @@
import NavHome from "./components/NavHome";
import CarouselCoins from "./components/CarouselCoins";
+import GraphCoins from "./components/GraphCoins";
export default function Home() {
return (
@@ -8,6 +9,9 @@ export default function Home() {
+
+
+
);
}
diff --git a/src/redux/features/selectedCoinSlice.ts b/src/redux/features/selectedCoinSlice.ts
new file mode 100644
index 0000000..6046455
--- /dev/null
+++ b/src/redux/features/selectedCoinSlice.ts
@@ -0,0 +1,78 @@
+"use client";
+
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+
+type GetCoinDataArgs = {
+ currency: string;
+ days: string;
+ coinId: string;
+};
+
+type CoinData = {
+ id: string;
+ prices: [number, number][];
+ total_volumes: [number, number][];
+};
+
+type selectedCoinState = {
+ selectedCoins: CoinData[];
+ loading: string;
+ hasError: boolean;
+};
+
+const initialState: selectedCoinState = {
+ selectedCoins: [],
+ loading: "idle",
+ hasError: false,
+};
+
+export const getCoinDataGraph = createAsyncThunk(
+ "coinData/getCoinData",
+ async ({ currency, days, coinId }: GetCoinDataArgs, { rejectWithValue }) => {
+ try {
+ const response = await fetch(
+ `https://api.coingecko.com/api/v3/coins/${coinId}/market_chart?vs_currency=${currency}&days=${days}?x_cg_demo_api_key=${process.env.NEXT_PUBLIC_API_KEY}`
+ );
+
+ if (!response.ok) {
+ throw new Error("Network response was not ok");
+ }
+
+ const data = await response.json();
+ const { prices, total_volumes } = data;
+ const item: CoinData = {
+ id: coinId,
+ prices,
+ total_volumes,
+ };
+ return item;
+ } catch (error: any) {
+ return rejectWithValue(error.message);
+ }
+ }
+);
+
+const selectedCoinsSlice = createSlice({
+ name: "selectedCoin",
+ initialState,
+ reducers: {},
+
+ extraReducers: (builder) => {
+ builder
+ .addCase(getCoinDataGraph.pending, (state) => {
+ state.loading = "pending";
+ state.hasError = false;
+ })
+ .addCase(getCoinDataGraph.fulfilled, (state, action) => {
+ state.selectedCoins = [action.payload];
+ state.loading = "fulfilled";
+ })
+ .addCase(getCoinDataGraph.rejected, (state, action) => {
+ state.loading = "rejected";
+ state.hasError = true;
+ console.error("API call failed with error:", action.payload);
+ });
+ },
+});
+
+export default selectedCoinsSlice.reducer;
diff --git a/src/redux/store.ts b/src/redux/store.ts
index bbe96ac..7dd3189 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -4,12 +4,14 @@ import { configureStore } from "@reduxjs/toolkit";
import globalReducer from "./features/globalSlice";
import currencyReducer from "./features/currencySlice";
import coinReducer from "./features/coinInfoSlice";
+import selectedCoinReducer from "./features/selectedCoinSlice";
export const store = configureStore({
reducer: {
globalData: globalReducer,
currency: currencyReducer,
coinData: coinReducer,
+ selectedCoin: selectedCoinReducer,
},
});