From af24d776c010df00e2fcc2426483d8f4e75e8ce7 Mon Sep 17 00:00:00 2001
From: Yana <yanok87@users.noreply.github.com>
Date: Tue, 17 Dec 2024 21:02:34 +0700
Subject: [PATCH] Add USD price to tokenomics card

---
 explorer-nextjs/src/app/api/types.ts          |  8 +++++++
 explorer-nextjs/src/app/api/urls.ts           |  1 -
 .../landingPageComponents/TokenomicsCard.tsx  | 24 +++++++++++++++----
 .../src/components/price/TitlePrice.tsx       |  4 ++--
 4 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/explorer-nextjs/src/app/api/types.ts b/explorer-nextjs/src/app/api/types.ts
index d860a5bc81..f6ac573c5e 100644
--- a/explorer-nextjs/src/app/api/types.ts
+++ b/explorer-nextjs/src/app/api/types.ts
@@ -106,3 +106,11 @@ type NodeData = {
 };
 
 export default NodeData;
+
+export interface CurrencyRates {
+  btc: number;
+  chf: number;
+  eur: number;
+  timestamp: number;
+  usd: number;
+}
diff --git a/explorer-nextjs/src/app/api/urls.ts b/explorer-nextjs/src/app/api/urls.ts
index a10204aee2..d2ec69f27a 100644
--- a/explorer-nextjs/src/app/api/urls.ts
+++ b/explorer-nextjs/src/app/api/urls.ts
@@ -29,6 +29,5 @@ export const NYM_NODE_BONDED =
 
 export const NYM_ACCOUNT_ADDRESS =
   "https://explorer.nymtech.net/api/v1/tmp/unstable/account/";
-
 export const NYM_PRICES_API =
   "https://canary-nym-vpn-chain-payment-watcher.nymte.ch/v1/price/average";
diff --git a/explorer-nextjs/src/components/landingPageComponents/TokenomicsCard.tsx b/explorer-nextjs/src/components/landingPageComponents/TokenomicsCard.tsx
index 75edb19049..7dec2c6423 100644
--- a/explorer-nextjs/src/components/landingPageComponents/TokenomicsCard.tsx
+++ b/explorer-nextjs/src/components/landingPageComponents/TokenomicsCard.tsx
@@ -1,15 +1,29 @@
+import type { CurrencyRates } from "@/app/api/types";
+import { NYM_PRICES_API } from "@/app/api/urls";
 import { Box, Stack } from "@mui/material";
 import ExplorerCard from "../cards/ExplorerCard";
 import ExplorerListItem from "../list/ListItem";
 import { TitlePrice } from "../price/TitlePrice";
 
 export const TokenomicsCard = async () => {
-  const titlePrice = {
-    price: 1.15,
-    upDownLine: {
-      percentage: 10,
-      numberWentUp: true,
+  const nymPrice = await fetch(NYM_PRICES_API, {
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json; charset=utf-8",
     },
+    next: { revalidate: 60 },
+    // refresh event list cache at given interval
+  });
+
+  const nymPriceData: CurrencyRates = await nymPrice.json();
+  const nymPriceDataFormated = Number(nymPriceData.usd.toFixed(2));
+
+  const titlePrice = {
+    price: nymPriceDataFormated,
+    // upDownLine: {
+    //   percentage: 10,
+    //   numberWentUp: true,
+    // },
   };
   const dataRows = [
     { key: "Market cap", value: "$ 1000000" },
diff --git a/explorer-nextjs/src/components/price/TitlePrice.tsx b/explorer-nextjs/src/components/price/TitlePrice.tsx
index 5f0684ea5d..1fbaeafa29 100644
--- a/explorer-nextjs/src/components/price/TitlePrice.tsx
+++ b/explorer-nextjs/src/components/price/TitlePrice.tsx
@@ -8,7 +8,7 @@ import {
 
 interface ITitlePriceProps {
   price: number;
-  upDownLine: IUpDownPriceIndicatorProps;
+  upDownLine?: IUpDownPriceIndicatorProps;
 }
 export const TitlePrice = (props: ITitlePriceProps): React.ReactNode => {
   const { price, upDownLine } = props;
@@ -25,7 +25,7 @@ export const TitlePrice = (props: ITitlePriceProps): React.ReactNode => {
           ${price}
         </Typography>
       </Box>
-      <UpDownPriceIndicator {...upDownLine} />
+      {upDownLine && <UpDownPriceIndicator {...upDownLine} />}
     </Box>
   );
 };