Update chart card to query data directly

src/cryptometrics/components/cards/CryptoChartCard.js

@@ -4,6 +4,7 @@ import PlaceholderSkeleton from "../skeletons/PlaceholderSkeleton";
 import classNames from "classnames";
 import Image from "next/image";
 import Link from "next/link";
+import { useCryptoTimeSeriesData } from "../../queries";
 
 const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
@@ -16,19 +17,27 @@ function CryptoChartCard({
   detail,
   detailColor,
   options,
-  series,
   type,
 }) {
+  const cryptoQuery = useCryptoTimeSeriesData(currencyId, 1, "hourly");
   return (
     <Link href={`/coins/${currencyId}`} passHref>
-      <a className="w-full xl:w-1/3 hover:scale-[102%] cursor-pointer">
-        <div className="rounded-3xl shadow-[0_8px_25px_rgba(0,0,0,7%)] mx-4 mt-8 dark:bg-dark-700">
+      <a className="w-full xl:w-[31%] hover:scale-[102%] cursor-pointer">
+        <div className="rounded-3xl shadow-[0_8px_25px_rgba(0,0,0,7%)] dark:bg-dark-700">
           <div className="relative h-60">
             <div className="absolute top-0 right-0 left-0 bottom-0 z-10 rounded-3xl overflow-hidden">
-              {options && series && type && (
+              {options && type && (
                 <Chart
                   options={options}
-                  series={series}
+                  series={[
+                    {
+                      name: currencyId,
+                      data:
+                        cryptoQuery.data?.prices.filter((_, index) => {
+                          return index % 8 == 0;
+                        }) || [],
+                    },
+                  ]}
                   type={type}
                   width="100%"
                   height="100%"
@@ -46,7 +55,7 @@ function CryptoChartCard({
                     layout="fixed"
                   ></Image>
                 </div>
-                <div className="flex-item">
+                <div>
                   <p className="text-3xl font-poppins font-bold text-gray-700 dark:text-gray-100">
                     {currencyName || (
                       <PlaceholderSkeleton className="h-9 w-[60%]" />
@@ -56,6 +65,13 @@ function CryptoChartCard({
                     {symbol}
                   </p>
                 </div>
+                <div className="ml-auto">
+                  <div className="dark:bg-white w-16 rounded-2xl mt-2">
+                    <p className="text-center font-extrabold text-indigo-500">
+                      24H
+                    </p>
+                  </div>
+                </div>
               </div>
               {/* TODO: Find a way to change height below so it is auto-adjusted to fit content */}
               <div className="flex flex-col h-[9.5rem]">

src/cryptometrics/components/content/Container.js

@@ -2,7 +2,7 @@ import React from "react";
 
 function Container(props) {
   return (
-    <div className="container mx-auto pt-8 p-2 sm:p-8 md:py-16 md:pr-16 md:pl-4">
+    <div className="container mx-auto pt-8 p-2 sm:p-8 md:py-16 md:pr-12 md:pl-4">
       {props.children}
     </div>
   );

src/cryptometrics/components/sidebar/Sidebar.js

@@ -12,7 +12,7 @@ function Sidebar() {
         <Image
           className=""
           src="/crypto_logo.png"
-          width="230%"
+          width="190%"
           height="100%"
           objectFit="contain"
           alt="CryptoMetrics-logo-large"

src/cryptometrics/constants/constants.js

-export const cryptoChartOptions = (dark = false) => {
+export const cryptoChartOptions = (colors = [], dark = false) => {
   return {
     chart: {
       toolbar: {
@@ -61,7 +61,40 @@ export const cryptoChartOptions = (dark = false) => {
     tooltip: {
       enabled: false,
     },
+    colors: colors,
   };
 };
 
-export const cryptocurrencies = ["bitcoin"];
+export const cryptocurrencies = [
+  {
+    id: "bitcoin",
+    symbol: "btc",
+    name: "Bitcoin",
+  },
+  {
+    id: "ethereum",
+    symbol: "eth",
+    name: "Ethereum",
+  },
+  {
+    id: "tether",
+    symbol: "usdt",
+    name: "Tether",
+  },
+  { id: "binancecoin", symbol: "bnb", name: "BNB" },
+  {
+    id: "usd-coin",
+    symbol: "usdc",
+    name: "USD Coin",
+  },
+  {
+    id: "ripple",
+    symbol: "xrp",
+    name: "XRP",
+  },
+  {
+    id: "cardano",
+    symbol: "ada",
+    name: "Cardano",
+  },
+];

src/cryptometrics/pages/index.js

@@ -5,13 +5,12 @@ import SearchInput from "../components/inputs/SearchInput";
 import BoldGradientHeading from "../components/titles/BoldGradientHeading";
 import CryptoChartCard from "../components/cards/CryptoChartCard";
 import { cryptoChartOptions } from "../constants";
-import { useCryptoList, useCryptoTimeSeriesData } from "../queries";
+import { useCryptoList } from "../queries";
 import numeral from "numeral";
 import Wrapper from "../components/content/Wrapper";
 import Sidebar from "../components/sidebar/Sidebar";
 
 export default function Home() {
-  const bitcoin = useCryptoTimeSeriesData("bitcoin", 7);
   const listOfCoins = useCryptoList("usd", 5, false);
   const filteredCoins = listOfCoins.data?.map((coin) => {
     return (
@@ -30,13 +29,10 @@ export default function Home() {
             ? "text-green-500"
             : "text-red-500"
         }
-        options={cryptoChartOptions(true)}
-        series={[
-          {
-            name: "bitcoin",
-            data: bitcoin.data?.prices || [],
-          },
-        ]}
+        options={cryptoChartOptions(
+          coin.price_change_percentage_24h > 0 ? ["#3DBAA2"] : ["#FF7A68"],
+          true
+        )}
         type="area"
       />
     );
@@ -60,7 +56,7 @@ export default function Home() {
               <SearchInput />
             </div>
 
-            <div className="flex flex-row flex-wrap mb-16 p-2">
+            <div className="flex flex-wrap gap-x-10 gap-y-10 mt-10">
               {!listOfCoins.isLoading && filteredCoins}
             </div>
           </Container>