feat(ui-ux): add statistics display to explore/dfi page

public/locales/en-US/page-explore-dfi.json

@@ -3,6 +3,16 @@
     "title": "EXPLORE THE POWER OF DFI",
     "subtitle": "Experience DeFi with DFI",
     "desc": "Our native token unlocks the power of decentralized finance, giving you access to a growing ecosystem of cutting-edge DeFi tools and innovative blockchain applications."
+  },
+  "statisticsDisplay" : {
+    "circulatingSupply": {
+      "title": "CIRCULATING SUPPLY",
+      "desc": "{{perc}} of max supply"
+    },
+    "dfiMinted": {
+      "title": "TOTAL DFI MINTED",
+      "desc": "out of {{value}}{{suffix}} fixed supply"
+    }
   }
 }
 

src/hooks/useUnitSuffix.tsx

@@ -12,7 +12,7 @@ interface UnitSuffix {
   value: string;
 }
 
-export function useUnitSuffix(value: string): UnitSuffix {
+export function useUnitSuffix(value, decimalPlace = 0): UnitSuffix {
   const updatedValue = BigNumber(value);
   const places = updatedValue.e !== null ? Math.floor(updatedValue.e / 3) : 0;
   const suffix = `${units[places * 3] ?? ""}`;
@@ -24,7 +24,7 @@ export function useUnitSuffix(value: string): UnitSuffix {
   if (suffix) {
     unitValueWithSuffix.value = updatedValue
       .dividedBy(1000 ** places)
-      .toFormat(0);
+      .toFormat(decimalPlace);
   }
 
   return unitValueWithSuffix;

src/pages/explore/dfi/_components/DFIStatisticsDisplay.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import { SupplyData } from "@defichain/whale-api-client/dist/api/stats";
+import { StatisticPanel } from "@components/commons/StatisticPanel";
+import { Container } from "@components/commons/Container";
+import { useUnitSuffix } from "@hooks/useUnitSuffix";
+import { useTranslation } from "next-i18next";
+import { useWhaleApiClient } from "../../../../layouts/context/WhaleContext";
+import { calculatePercentage } from "../../../../shared/calculatePercentage";
+
+export function DFIStatisticsDisplay() {
+  const api = useWhaleApiClient();
+  const [supply, setSupply] = useState<SupplyData>();
+  const { t } = useTranslation("page-explore-dfi");
+
+  const { value: dfiMintedValue, suffix: dfiMintedSuffix } = useUnitSuffix(
+    supply?.max,
+    1
+  );
+
+  useEffect(() => {
+    api.stats.getSupply().then((supplyItem) => {
+      setSupply(supplyItem);
+    });
+  }, [api.stats]);
+
+  const supplyItems = [
+    {
+      title: t("statisticsDisplay.circulatingSupply.title"),
+      stats: supply?.circulating,
+      desc:
+        supply === undefined
+          ? supply
+          : t("statisticsDisplay.circulatingSupply.desc", {
+              perc: calculatePercentage(supply?.circulating, supply?.total),
+            }),
+    },
+    {
+      title: t("statisticsDisplay.dfiMinted.title"),
+      stats: supply?.total,
+      desc:
+        supply === undefined
+          ? supply
+          : t("statisticsDisplay.dfiMinted.desc", {
+              value: dfiMintedValue,
+              suffix: dfiMintedSuffix,
+            }),
+    },
+  ];
+
+  return (
+    <Container className="lg:mt-[69px] md:mt-[33px] mt-0 lg:mb-[180px] mb-[72px]">
+      <StatisticPanel
+        displayItem={supplyItems}
+        displayStripCustomStyle="scroll-mt-[200px]"
+        displayId="statistics_display_dfi"
+      />
+    </Container>
+  );
+}

src/pages/explore/dfi/index.page.tsx

@@ -1,18 +1,22 @@
 import { HeroBanner, HeroBannerBg } from "@components/commons/HeroBanner";
 import { SSRConfig, useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { DFIStatisticsDisplay } from "./_components/DFIStatisticsDisplay";
 
 export default function ExploreDFI() {
   const { t } = useTranslation("page-explore-dfi");
   return (
-    <HeroBanner
-      title={t("heroBanner.title")}
-      subtitle={t("heroBanner.subtitle")}
-      desc={t("heroBanner.desc")}
-      heroBg={HeroBannerBg.DFI_COIN}
-      hasStartExploringButton
-      startExploringJumpLink="/"
-    />
+    <>
+      <HeroBanner
+        title={t("heroBanner.title")}
+        subtitle={t("heroBanner.subtitle")}
+        desc={t("heroBanner.desc")}
+        heroBg={HeroBannerBg.DFI_COIN}
+        hasStartExploringButton
+        startExploringJumpLink="#statistics_display_dfi"
+      />
+      <DFIStatisticsDisplay />
+    </>
   );
 }