Add USD price to tokenomics card

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;
+}

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";

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" },

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>
   );
 };