diff --git a/src/cryptometrics/components/cards/CryptoChartCard.js b/src/cryptometrics/components/cards/CryptoChartCard.js
index 27006411477eda7af43504547f4aeb8913374215..2323fed7503c96ad5e7b2747b7f1c19f98eed6e7 100644
--- a/src/cryptometrics/components/cards/CryptoChartCard.js
+++ b/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]">
diff --git a/src/cryptometrics/components/content/Container.js b/src/cryptometrics/components/content/Container.js
index cfc4ec292850f76489f064a5cd538840481287a1..70c4ed642c5f9e455608edd53a8e561f67045ba4 100644
--- a/src/cryptometrics/components/content/Container.js
+++ b/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>
);
diff --git a/src/cryptometrics/components/sidebar/Sidebar.js b/src/cryptometrics/components/sidebar/Sidebar.js
index 768072974bfd07b6c0fa6c695222318c9ba04864..a18fe1d5eea25bfdb82b1c816ccce2cfb0844af0 100644
--- a/src/cryptometrics/components/sidebar/Sidebar.js
+++ b/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"
diff --git a/src/cryptometrics/constants/constants.js b/src/cryptometrics/constants/constants.js
index 516758fb90f41df3d4d5bdac50d4cd6c5d218b46..69f6af6f648f6a4c9c827d6e15ab0997fb257216 100644
--- a/src/cryptometrics/constants/constants.js
+++ b/src/cryptometrics/constants/constants.js
@@ -1,4 +1,4 @@
-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",
+ },
+];
diff --git a/src/cryptometrics/pages/index.js b/src/cryptometrics/pages/index.js
index 957c3ba323367fcd3ca14c9ebc5f067c138ac383..64619d3b70b98976d293709e0e3ddaf98c201e67 100644
--- a/src/cryptometrics/pages/index.js
+++ b/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>