From 3024795c36a314cf0651c4a404b012b7abe8ddb1 Mon Sep 17 00:00:00 2001
From: Harsh <harshrathi.dev@gmail.com>
Date: Mon, 17 Jul 2023 10:58:44 +0530
Subject: [PATCH 01/11] feature:(ui-ux): added dashboard stats

---
 src/api/LatestDataApi.ts                 |  29 +++++-
 src/api/types.ts                         |  37 +++++++
 src/components/GroupStatisticCard.tsx    | 118 ++++++++++++++++++-----
 src/components/TokenStatsDisplay.tsx     | 106 +++++---------------
 src/components/TransactionsLineChart.tsx | 104 ++++++++++++++++++++
 src/components/commons/StatisticCard.tsx |  61 ++++++++----
 src/pages/index.tsx                      |   9 +-
 7 files changed, 336 insertions(+), 128 deletions(-)
 create mode 100644 src/components/TransactionsLineChart.tsx

diff --git a/src/api/LatestDataApi.ts b/src/api/LatestDataApi.ts
index 9e7e76d2..c9deafef 100644
--- a/src/api/LatestDataApi.ts
+++ b/src/api/LatestDataApi.ts
@@ -14,7 +14,13 @@ import {
   MAIN_LATEST_TRANSACTION_URL,
   wrapResponse,
 } from "./index";
-import { BlockProps, RawTransactionI } from "./types";
+import {
+  BlockProps,
+  ChartDataProps,
+  DashboardStatsProps,
+  RawTransactionI,
+  SmartContractStatsProps,
+} from "./types";
 
 const MAX_ROW = 5;
 
@@ -78,4 +84,25 @@ export default {
       };
     });
   },
+  getDashboardStats: async (
+    network: NetworkConnection
+  ): Promise<DashboardStatsProps> => {
+    const baseUrl = getBaseUrl(network);
+    const res = await fetch(`${baseUrl}/api/v2/stats`);
+    return wrapResponse<DashboardStatsProps>(res);
+  },
+  getSmartContractStats: async (
+    network: NetworkConnection
+  ): Promise<SmartContractStatsProps> => {
+    const baseUrl = getBaseUrl(network);
+    const res = await fetch(`${baseUrl}/api/v2/smart-contracts/counters`);
+    return wrapResponse<SmartContractStatsProps>(res);
+  },
+  getTxnChartsData: async (
+    network: NetworkConnection
+  ): Promise<ChartDataProps> => {
+    const baseUrl = getBaseUrl(network);
+    const res = await fetch(`${baseUrl}/api/v2/stats/charts/transactions`);
+    return wrapResponse<ChartDataProps>(res);
+  },
 };
diff --git a/src/api/types.ts b/src/api/types.ts
index 88d3da45..e63ca87b 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -239,3 +239,40 @@ export interface RawTransactionV1 {
   result: RawTransactionI | null;
   status: string;
 }
+
+export interface DashboardStatsProps {
+  average_block_time: number;
+  coin_price: string;
+  gas_prices: {
+    average: number;
+    fast: number;
+    slow: number;
+  };
+  average: number;
+  fast: number;
+  slow: number;
+  gas_used_today: string;
+  market_cap: string;
+  network_utilization_percentage: number;
+  static_gas_price: string | null;
+  total_addresses: string;
+  total_blocks: string;
+  total_gas_used: string;
+  total_transactions: string;
+  transactions_today: string;
+}
+
+export interface SmartContractStatsProps {
+  new_smart_contracts_24h: string;
+  new_verified_smart_contracts_24h: string;
+  smart_contracts: string;
+  verified_smart_contracts: string;
+}
+export interface ChartDataI {
+  date: string;
+  tx_count: number;
+}
+
+export interface ChartDataProps {
+  chart_data: ChartDataI[];
+}
diff --git a/src/components/GroupStatisticCard.tsx b/src/components/GroupStatisticCard.tsx
index 3104ccd1..f9b48f27 100644
--- a/src/components/GroupStatisticCard.tsx
+++ b/src/components/GroupStatisticCard.tsx
@@ -1,34 +1,108 @@
-import React from "react";
+import { useState, useEffect } from "react";
 import StatisticCard from "@components/commons/StatisticCard";
+import clsx from "clsx";
+import LatestDataApi from "@api/LatestDataApi";
+import { useNetwork } from "@contexts/NetworkContext";
+import BigNumber from "bignumber.js";
+import { DashboardStatsProps, SmartContractStatsProps } from "@api/types";
+
+export default function GroupStatisticCard() {
+  const { connection } = useNetwork();
+  const [isLoading, setIsLoading] = useState(false);
+  const [dashboardStats, setDashboardStats] = useState<DashboardStatsProps>();
+  const [smartContractStats, setSmartContractStats] =
+    useState<SmartContractStatsProps>();
+
+  const fetchStats = async () => {
+    setIsLoading(true);
+    const dashStats = await LatestDataApi.getDashboardStats(connection);
+    setDashboardStats(dashStats);
+    const scStats = await LatestDataApi.getSmartContractStats(connection);
+    setSmartContractStats(scStats);
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    fetchStats();
+  }, []);
 
-function GroupStatisticCard() {
   const groupStatsCardContent = [
     {
-      title: "24h total value locked",
-      body: "3232400000",
-      footer: "+2.34%",
-      testId: "24h-total-value-locked",
+      title: "Blocks",
+      value: new BigNumber(dashboardStats?.total_blocks ?? 0),
+      // convert milliseconds to seconds
+      footer: `Avg. speed: ${new BigNumber(
+        dashboardStats?.average_block_time ?? 0
+      )
+        .dividedBy(1000)
+        .toFixed(1)} sec`,
+      testId: "blocks",
+    },
+    {
+      title: "Transactions",
+      value: new BigNumber(dashboardStats?.total_transactions ?? 0),
+      footer: `Today: ${new BigNumber(
+        dashboardStats?.transactions_today ?? 0
+      )} transactions`,
+      testId: "transactions",
     },
     {
-      title: "24h transactions",
-      body: "32324000000",
-      footer: "-0.02%",
-      testId: "24h-total-transactions",
+      title: "Contracts",
+      value: new BigNumber(smartContractStats?.smart_contracts ?? 0),
+      footer: `${new BigNumber(
+        smartContractStats?.verified_smart_contracts ?? 0
+      )
+        .multipliedBy(smartContractStats?.smart_contracts ?? 0)
+        .dividedBy(1000)
+        .toFixed(2)}% verified`,
+      testId: "contracts",
+    },
+    {
+      title: "Tokens",
+      value: new BigNumber(smartContractStats?.smart_contracts ?? 0),
+      footer: "",
+      testId: "tokens",
     },
   ];
+
   return (
-    <div className="flex flex-col space-y-2 lg:space-y-0 md:space-y-0 lg:space-x-2 md:space-x-2 lg:flex-row md:flex-row">
-      {groupStatsCardContent.map((card) => (
-        <StatisticCard
-          key={card.title}
-          title={card.title}
-          body={card.body}
-          footer={card.footer}
-          testId={card.testId}
-        />
-      ))}
+    <div>
+      <div className="flex flex-col space-y-5 md:space-y-0 md:flex-row md:space-x-7 md:justify-end md:px-10 mb-11 md:mb-8 lg:mb-[72px]">
+        <div className="flex flex-row justify-between md:justify-start md:space-x-2 items-center">
+          <span className="text-white-700 text-sm -tracking-[0.14px]">
+            Gas Tracker:
+          </span>
+          <span className="text-white-50 text-base -tracking-[0.32px] font-semibold">
+            {dashboardStats?.gas_prices.average}
+          </span>
+        </div>
+        <div className="flex flex-row justify-between md:justify-start md:space-x-2 items-center">
+          <span className="text-white-700 text-sm -tracking-[0.14px]">
+            Daily transactions:
+          </span>
+          <span className="text-white-50 text-base -tracking-[0.32px] font-semibold">
+            {dashboardStats?.transactions_today}
+          </span>
+        </div>
+      </div>
+      <div
+        className={clsx(
+          "grid grid-cols-1 gap-4",
+          "grid md:grid-cols-2 gap-6",
+          "grid lg:grid-cols-4 gap-6"
+        )}
+      >
+        {groupStatsCardContent.map((card) => (
+          <StatisticCard
+            key={card.title}
+            title={card.title}
+            value={card.value}
+            footer={card.footer}
+            testId={card.testId}
+            isLoading={isLoading}
+          />
+        ))}
+      </div>
     </div>
   );
 }
-
-export default GroupStatisticCard;
diff --git a/src/components/TokenStatsDisplay.tsx b/src/components/TokenStatsDisplay.tsx
index 6fc6daa1..1f617e74 100644
--- a/src/components/TokenStatsDisplay.tsx
+++ b/src/components/TokenStatsDisplay.tsx
@@ -1,9 +1,8 @@
-import clsx from "clsx";
-import TokenStatsApi from "@api/TokenStatsApi";
-import { useUnitSuffix } from "hooks/useUnitSuffix";
-import { DMX_TOKEN_SYMBOL } from "shared/constants";
-import TrendLineChart, { LineData } from "./TrendLineChart";
-import GradientCardContainer from "./commons/GradientCardContainer";
+import { useState, useEffect } from "react";
+import LatestDataApi from "@api/LatestDataApi";
+import { useNetwork } from "@contexts/NetworkContext";
+import { ChartDataI } from "@api/types";
+import TransactionsLineChart from "./TransactionsLineChart";
 
 export interface TokenStats {
   tokenPrice: number;
@@ -14,87 +13,32 @@ export interface TokenStats {
 }
 
 export default function TokenStatsDisplay(): JSX.Element {
-  const stats: TokenStats = TokenStatsApi.useTokenStats();
-  const priceHistory = TokenStatsApi.useTokenPriceHistory();
+  const { connection } = useNetwork();
+  const [chartData, setChartData] = useState<ChartDataI[]>([]);
 
-  const trendLineData: LineData[] = priceHistory.map((data) => ({
-    value: data.price,
-  }));
+  const fetchStats = async () => {
+    const data = await LatestDataApi.getTxnChartsData(connection);
+    setChartData(data.chart_data);
+  };
 
-  return (
-    <div className="pb-2 pt-6 lg:pb-6">
-      <GradientCardContainer>
-        <section className="flex flex-col md:flex-row md:flex-wrap xl:flex-nowrap xl:items-center xl:justify-between p-5 pb-10 md:p-10 xl:py-7 rounded-[15px]">
-          <section className="flex flex-1 items-center md:items-start xl:flex-1 xl:order-first xl:items-center">
-            <TokenPriceSection data={stats} />
-          </section>
-          <section className="xl:order-last xl:ml-16">
-            <DetailsSection data={stats} />
-          </section>
-          <section className="mt-8 md:mt-12 xl:mt-0 h-[88px] md:basis-full xl:order-2 xl:basis-auto xl:w-[304px]">
-            <TrendLineChart data={trendLineData} />
-          </section>
-        </section>
-      </GradientCardContainer>
-    </div>
-  );
-}
+  useEffect(() => {
+    fetchStats();
+  }, []);
 
-function TokenPriceSection({ data }: { data: TokenStats }) {
   return (
-    <>
-      <div className="h-10 w-10 mb-1 md:mb-0 md:mt-1 xl:mt-0 md:h-[39px] md:w-[39px] xl:h-[46px] xl:w-[46px] rounded-full bg-gradient-to-r from-green-800 to-blue-800" />
-      <div className="flex flex-1 md:flex-col xl:flex-row justify-between md:justify-start xl:items-end ml-2 md:ml-3">
-        <div>
-          <div className="text-white-700 text-xs md:text-sm">
-            DefiMetaChain Token
-          </div>
-          <div className="text-white-50 font-bold text-2xl xl:text-[32px] xl:leading-10 pt-1 md:pt-0">
-            {DMX_TOKEN_SYMBOL}
-          </div>
-        </div>
-        <div className="flex-wrap md:flex md:items-baseline md:pt-2 xl:pt-0 xl:pl-3">
-          <div className="text-white-50 text-right text-lg md:text-2xl xl:text-[28px] leading-5 md:leading-10">
-            ${data.tokenPrice}
-          </div>
-          <div
-            className={clsx(
-              "text-right text-sm pt-2 md:pt-0 md:pl-2",
-              data.percentChange < 0 ? "text-red-800" : "text-green-800"
-            )}
-          >
-            {data.percentChange >= 0 ? "+" : ""}
-            {data.percentChange}%
-          </div>
+    <div className="mb-4 mt-8 md:mt-2 lg:mt-12">
+      <div>
+        <div className="space-x-2 mb-6">
+          <span className="text-2xl text-white-50 font-semibold">
+            {" "}
+            Transaction history
+          </span>
+          <span className="text-sm text-white-50">in 30 days</span>
         </div>
+        <section className="h-[200px]">
+          <TransactionsLineChart data={chartData} />
+        </section>
       </div>
-    </>
-  );
-}
-
-function DetailsSection({ data }: { data: TokenStats }) {
-  const circulation = useUnitSuffix(data.circulation);
-  const last24hVolume = useUnitSuffix(data.last24hVolume);
-  const marketCap = useUnitSuffix(data.marketCap);
-  return (
-    <div className="pt-10 md:pt-0">
-      <DetailRow
-        label="Circulation"
-        value={`${circulation} ${DMX_TOKEN_SYMBOL}`}
-      />
-      <DetailRow label="24h Volume" value={last24hVolume} />
-      <DetailRow label="Market Cap" value={`$${marketCap}`} />
-    </div>
-  );
-}
-
-function DetailRow({ label, value }: { label: string; value: string }) {
-  const labelStyle = "text-white-700 md:pr-2";
-  const valueStyle = "text-right text-white-50";
-  return (
-    <div className="flex justify-between md:justify-end pt-2 md:pt-3 xl:pt-2 first:pt-0">
-      <div className={labelStyle}>{label}</div>
-      <div className={valueStyle}>{value}</div>
     </div>
   );
 }
diff --git a/src/components/TransactionsLineChart.tsx b/src/components/TransactionsLineChart.tsx
new file mode 100644
index 00000000..30cb76f3
--- /dev/null
+++ b/src/components/TransactionsLineChart.tsx
@@ -0,0 +1,104 @@
+import { ChartDataI } from "@api/types";
+import {
+  LineChart,
+  Line,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+} from "recharts";
+import dayjs from "dayjs";
+import NumericFormat from "./commons/NumericFormat";
+
+function CustomizedTickX(props) {
+  const { x, y, payload } = props;
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <text x={0} y={0} dy={8} fill="#666">
+        <tspan
+          textAnchor="middle"
+          className="text-dark-700 text-xs -tracking-[0.12px]"
+        >
+          {dayjs(payload.value).format("MMM d")}
+        </tspan>
+      </text>
+    </g>
+  );
+}
+
+function CustomizedTickY(props) {
+  const { x, y, payload } = props;
+  const formatter = Intl.NumberFormat("en", { notation: "compact" });
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <text x={0} y={0} dy={4} dx={12} fill="#666">
+        <tspan
+          textAnchor="middle"
+          className="text-dark-700 text-xs -tracking-[0.12px]"
+        >
+          {formatter.format(payload.value)}
+        </tspan>
+      </text>
+    </g>
+  );
+}
+
+function CustomTooltip({ active, payload, label }) {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-white-50 p-3 rounded-[10px]">
+        <div className="text-xs text-light-700 -tracking-[0.12px]">
+          {dayjs(label).format("MMM d, YYYY")}
+        </div>
+        {payload.map((pld) => (
+          <div className="text-base text-light-1000 -tracking-[0.32px]">
+            <span>Transactions:</span>
+            <NumericFormat
+              value={pld.value}
+              thousandSeparator
+              decimalScale={0}
+              className="text-light-1000 font-semibold -tracking-[0.32px] ml-1"
+            />
+          </div>
+        ))}
+      </div>
+    );
+  }
+  return null;
+}
+
+export default function TransactionsLineChart({
+  data,
+}: {
+  data: ChartDataI[];
+}) {
+  return (
+    <ResponsiveContainer>
+      <LineChart data={data}>
+        <XAxis
+          dataKey="date"
+          tickMargin={8}
+          axisLine={false}
+          tick={<CustomizedTickX />}
+        />
+        <YAxis
+          orientation="right"
+          tickMargin={12}
+          axisLine={false}
+          tickCount={4}
+          tick={<CustomizedTickY />}
+        />
+        <Tooltip content={CustomTooltip} cursor={{ strokeDasharray: 8 }} />
+        <CartesianGrid stroke="#8C8C8C" strokeWidth={0.5} vertical={false} />
+        <Line
+          type="monotone"
+          dataKey="tx_count"
+          stroke="#0964F4"
+          strokeWidth={2}
+          dot={false}
+        />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}
diff --git a/src/components/commons/StatisticCard.tsx b/src/components/commons/StatisticCard.tsx
index 18ff82c7..1547c3e5 100644
--- a/src/components/commons/StatisticCard.tsx
+++ b/src/components/commons/StatisticCard.tsx
@@ -1,38 +1,61 @@
 import React from "react";
-import clsx from "clsx";
-import { useUnitSuffix } from "hooks/useUnitSuffix";
+import { IconType } from "react-icons";
+import BigNumber from "bignumber.js";
 import GradientCardContainer from "./GradientCardContainer";
+import NumericFormat from "./NumericFormat";
 
 interface StatsCardProps {
   title: string;
-  body: string;
   footer: string;
+  value: BigNumber;
+  icon?: IconType;
+  iconClass?: string;
   testId: string;
+  isLoading: boolean;
 }
 
-function StatisticCard({ title, body, footer, testId }: StatsCardProps) {
-  const valueToUnitSuffix = useUnitSuffix(body);
-
+export default function StatisticCard({
+  title,
+  value,
+  footer,
+  testId,
+  icon: Icon,
+  iconClass,
+  isLoading,
+}: StatsCardProps) {
   return (
-    <GradientCardContainer data-testid={testId}>
-      <div className="rounded-[15px] flex flex-col justify-center px-5 lg:px-10 md:px-10 py-8">
-        <div className="text-white-700 font-medium text-xs tracking-wider uppercase ">
+    <GradientCardContainer data-testid={testId} fullBorder>
+      <div className="rounded-[15px] flex flex-col justify-center p-5 md:p-6">
+        <div className="text-white-700 font-medium text-base -tracking-[0.32px]">
           {title}
         </div>
-        <div className="text-white-50 text-2xl font-light tracking-wider py-2">
-          {valueToUnitSuffix}
+        <div className="py-1">
+          {isLoading ? (
+            <div className="py-1">
+              <div className="bg-dark-200 rounded-[5px] mr-1 w-2/4 h-[24px]" />
+            </div>
+          ) : (
+            <NumericFormat
+              value={value}
+              thousandSeparator
+              decimalScale={0}
+              className="text-white-50 text-2xl font-semibold"
+            />
+          )}
         </div>
-        <div
-          className={clsx(
-            "text-transparent bg-clip-text font-medium text-xs tracking-wider uppercase max-w-[60px]",
-            footer.includes("-") ? "brand-gradient-1" : "brand-gradient-2"
+        <div className="text-white-50 -tracking-[0.14px]">
+          {isLoading ? (
+            <div className="py-1">
+              <div className="bg-dark-200 rounded-[5px] mr-1 w-4/6 h-[16px]" />
+            </div>
+          ) : (
+            <>
+              {footer}
+              {Icon && <Icon size="20" className={iconClass} />}
+            </>
           )}
-        >
-          {footer}
         </div>
       </div>
     </GradientCardContainer>
   );
 }
-
-export default StatisticCard;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2971bba1..b6410e6a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,11 +1,11 @@
-// import GroupStatisticCard from "@components/GroupStatisticCard";
-// import TokenStatsDisplay from "@components/TokenStatsDisplay";
 import HomeTitle from "@components/HomeTitle";
 import { SearchBar } from "layouts/components/searchbar/SearchBar";
 import { GetServerSidePropsResult, InferGetServerSidePropsType } from "next";
 import { RowData } from "@components/types";
 import LatestDataTable from "@components/LatestDataTable";
 import LatestDataApi from "@api/LatestDataApi";
+import GroupStatisticCard from "@components/GroupStatisticCard";
+import TokenStatsDisplay from "@components/TokenStatsDisplay";
 
 export default function Home({
   latestTransactions,
@@ -17,9 +17,8 @@ export default function Home({
       <HomeTitle />
       <div className="px-1 md:px-0">
         <SearchBar containerClass="2.5xl:px-[196px] mb-0" />
-        {/* <TokenStatsDisplay /> */}
-        {/* <GroupStatisticCard /> */}
-        {/* TODO: Add blocks and txs summary card */}
+        <TokenStatsDisplay />
+        <GroupStatisticCard />
         <LatestDataTable
           type="transactions"
           title="Latest transactions"

From 465a746ec49b1a8bde1c19216d725360590327c4 Mon Sep 17 00:00:00 2001
From: Harsh <harshrathi.dev@gmail.com>
Date: Mon, 17 Jul 2023 11:26:25 +0530
Subject: [PATCH 02/11] added fullBorder in GradientCardContainer

---
 src/components/commons/GradientCardContainer.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/commons/GradientCardContainer.tsx b/src/components/commons/GradientCardContainer.tsx
index b40ec8a6..5c25536d 100644
--- a/src/components/commons/GradientCardContainer.tsx
+++ b/src/components/commons/GradientCardContainer.tsx
@@ -4,9 +4,14 @@ import React from "react";
 interface GradientCardProps {
   children?: JSX.Element;
   className?: string;
+  fullBorder?: boolean;
 }
 
-function GradientCardContainer({ children, className }: GradientCardProps) {
+function GradientCardContainer({
+  children,
+  className,
+  fullBorder,
+}: GradientCardProps) {
   return (
     <div
       className={clsx(
@@ -14,7 +19,12 @@ function GradientCardContainer({ children, className }: GradientCardProps) {
         className
       )}
     >
-      <div className="bg-black-900 black-gradient-1 rounded-lg w-full h-full">
+      <div
+        className={clsx(
+          "bg-black-900 black-gradient-1 rounded-lg w-full h-full",
+          { "border-[0.5px] border-white-50 border-opacity-[0.15]": fullBorder }
+        )}
+      >
         {children}
       </div>
     </div>

From 4c38b8af933a8ee448689e8c9360fd5a481a0f8f Mon Sep 17 00:00:00 2001
From: Harsh <harshrathi.dev@gmail.com>
Date: Mon, 17 Jul 2023 17:27:22 +0530
Subject: [PATCH 03/11] minor fixes and ui pudate

---
 src/components/GroupStatisticCard.tsx    | 126 ++++++++++++++---------
 src/components/commons/StatisticCard.tsx |  26 ++---
 2 files changed, 88 insertions(+), 64 deletions(-)

diff --git a/src/components/GroupStatisticCard.tsx b/src/components/GroupStatisticCard.tsx
index f9b48f27..38d2fd9d 100644
--- a/src/components/GroupStatisticCard.tsx
+++ b/src/components/GroupStatisticCard.tsx
@@ -1,10 +1,12 @@
 import { useState, useEffect } from "react";
 import StatisticCard from "@components/commons/StatisticCard";
 import clsx from "clsx";
+import { MdCheckCircle } from "react-icons/md";
 import LatestDataApi from "@api/LatestDataApi";
 import { useNetwork } from "@contexts/NetworkContext";
 import BigNumber from "bignumber.js";
 import { DashboardStatsProps, SmartContractStatsProps } from "@api/types";
+import NumericFormat from "./commons/NumericFormat";
 
 export default function GroupStatisticCard() {
   const { connection } = useNetwork();
@@ -12,7 +14,7 @@ export default function GroupStatisticCard() {
   const [dashboardStats, setDashboardStats] = useState<DashboardStatsProps>();
   const [smartContractStats, setSmartContractStats] =
     useState<SmartContractStatsProps>();
-
+  const unit = "fi";
   const fetchStats = async () => {
     setIsLoading(true);
     const dashStats = await LatestDataApi.getDashboardStats(connection);
@@ -26,45 +28,6 @@ export default function GroupStatisticCard() {
     fetchStats();
   }, []);
 
-  const groupStatsCardContent = [
-    {
-      title: "Blocks",
-      value: new BigNumber(dashboardStats?.total_blocks ?? 0),
-      // convert milliseconds to seconds
-      footer: `Avg. speed: ${new BigNumber(
-        dashboardStats?.average_block_time ?? 0
-      )
-        .dividedBy(1000)
-        .toFixed(1)} sec`,
-      testId: "blocks",
-    },
-    {
-      title: "Transactions",
-      value: new BigNumber(dashboardStats?.total_transactions ?? 0),
-      footer: `Today: ${new BigNumber(
-        dashboardStats?.transactions_today ?? 0
-      )} transactions`,
-      testId: "transactions",
-    },
-    {
-      title: "Contracts",
-      value: new BigNumber(smartContractStats?.smart_contracts ?? 0),
-      footer: `${new BigNumber(
-        smartContractStats?.verified_smart_contracts ?? 0
-      )
-        .multipliedBy(smartContractStats?.smart_contracts ?? 0)
-        .dividedBy(1000)
-        .toFixed(2)}% verified`,
-      testId: "contracts",
-    },
-    {
-      title: "Tokens",
-      value: new BigNumber(smartContractStats?.smart_contracts ?? 0),
-      footer: "",
-      testId: "tokens",
-    },
-  ];
-
   return (
     <div>
       <div className="flex flex-col space-y-5 md:space-y-0 md:flex-row md:space-x-7 md:justify-end md:px-10 mb-11 md:mb-8 lg:mb-[72px]">
@@ -92,16 +55,81 @@ export default function GroupStatisticCard() {
           "grid lg:grid-cols-4 gap-6"
         )}
       >
-        {groupStatsCardContent.map((card) => (
-          <StatisticCard
-            key={card.title}
-            title={card.title}
-            value={card.value}
-            footer={card.footer}
-            testId={card.testId}
-            isLoading={isLoading}
+        <StatisticCard
+          title="Blocks"
+          value={new BigNumber(dashboardStats?.total_blocks ?? 0)}
+          testId="blocks"
+          isLoading={isLoading}
+        >
+          <span>
+            {`Avg. speed: ${new BigNumber(
+              dashboardStats?.average_block_time ?? 0
+            )
+              .dividedBy(1000)
+              .toFixed(1)} sec`}
+          </span>
+        </StatisticCard>
+
+        <StatisticCard
+          title="Transactions"
+          value={new BigNumber(dashboardStats?.total_transactions ?? 0)}
+          testId="transactions"
+          isLoading={isLoading}
+        >
+          <NumericFormat
+            value={new BigNumber(dashboardStats?.transactions_today ?? 0)}
+            thousandSeparator
+            prefix={`Today: `}
+            suffix={` transactions`}
+            decimalScale={0}
+          />
+        </StatisticCard>
+
+        <StatisticCard
+          title="Contracts"
+          value={new BigNumber(dashboardStats?.total_transactions ?? 0)}
+          testId="contracts"
+          isLoading={isLoading}
+        >
+          <span className="flex flex-row items-center">
+            <NumericFormat
+              value={new BigNumber(
+                smartContractStats?.verified_smart_contracts ?? 0
+              )
+                .multipliedBy(smartContractStats?.smart_contracts ?? 0)
+                .dividedBy(1000)
+                .toFixed(2)}
+              thousandSeparator
+              suffix="% verified"
+              decimalScale={2}
+            />
+            <MdCheckCircle className="h-5 w-5 ml-1 text-green-800" />
+          </span>
+        </StatisticCard>
+
+        <StatisticCard
+          title="Gas price"
+          value={new BigNumber(dashboardStats?.gas_prices.average ?? 0)}
+          testId="gas-price"
+          suffix={` ${unit}`}
+          isLoading={isLoading}
+        >
+          <NumericFormat
+            value={new BigNumber(dashboardStats?.gas_prices.fast ?? 0)}
+            thousandSeparator
+            prefix={`High: `}
+            suffix={` ${unit}`}
+            decimalScale={0}
+          />
+          <NumericFormat
+            value={new BigNumber(dashboardStats?.gas_prices.slow ?? 0)}
+            thousandSeparator
+            prefix={`Low: `}
+            suffix={` ${unit}`}
+            decimalScale={0}
+            className="ml-2"
           />
-        ))}
+        </StatisticCard>
       </div>
     </div>
   );
diff --git a/src/components/commons/StatisticCard.tsx b/src/components/commons/StatisticCard.tsx
index 1547c3e5..75a1817a 100644
--- a/src/components/commons/StatisticCard.tsx
+++ b/src/components/commons/StatisticCard.tsx
@@ -1,28 +1,24 @@
-import React from "react";
-import { IconType } from "react-icons";
+import React, { PropsWithChildren } from "react";
 import BigNumber from "bignumber.js";
 import GradientCardContainer from "./GradientCardContainer";
 import NumericFormat from "./NumericFormat";
 
 interface StatsCardProps {
   title: string;
-  footer: string;
   value: BigNumber;
-  icon?: IconType;
-  iconClass?: string;
   testId: string;
   isLoading: boolean;
+  suffix?: string;
 }
 
 export default function StatisticCard({
   title,
   value,
-  footer,
+  children,
+  suffix,
   testId,
-  icon: Icon,
-  iconClass,
   isLoading,
-}: StatsCardProps) {
+}: PropsWithChildren<StatsCardProps>) {
   return (
     <GradientCardContainer data-testid={testId} fullBorder>
       <div className="rounded-[15px] flex flex-col justify-center p-5 md:p-6">
@@ -39,20 +35,20 @@ export default function StatisticCard({
               value={value}
               thousandSeparator
               decimalScale={0}
+              suffix={suffix}
               className="text-white-50 text-2xl font-semibold"
             />
           )}
         </div>
-        <div className="text-white-50 -tracking-[0.14px]">
+        <div>
           {isLoading ? (
-            <div className="py-1">
+            <div className="py-0.5">
               <div className="bg-dark-200 rounded-[5px] mr-1 w-4/6 h-[16px]" />
             </div>
           ) : (
-            <>
-              {footer}
-              {Icon && <Icon size="20" className={iconClass} />}
-            </>
+            <div className="text-white-50 -tracking-[0.14px] text-sm">
+              {children}
+            </div>
           )}
         </div>
       </div>

From 498954fe22db16a14202ca4789b0996badce0a5f Mon Sep 17 00:00:00 2001
From: Harsh R <53080940+fullstackninja864@users.noreply.github.com>
Date: Tue, 18 Jul 2023 08:42:51 +0530
Subject: [PATCH 04/11] Update src/components/GroupStatisticCard.tsx

Co-authored-by: Lyka Labrada <lykalabrada@gmail.com>
---
 src/components/GroupStatisticCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/GroupStatisticCard.tsx b/src/components/GroupStatisticCard.tsx
index 38d2fd9d..326680bf 100644
--- a/src/components/GroupStatisticCard.tsx
+++ b/src/components/GroupStatisticCard.tsx
@@ -87,7 +87,7 @@ export default function GroupStatisticCard() {
 
         <StatisticCard
           title="Contracts"
-          value={new BigNumber(dashboardStats?.total_transactions ?? 0)}
+          value={new BigNumber(smartContractStats?.verified_smart_contracts ?? 0)}
           testId="contracts"
           isLoading={isLoading}
         >

From d711dabdbb6a155984a0939bc4208810d32f9312 Mon Sep 17 00:00:00 2001
From: Harsh R <53080940+fullstackninja864@users.noreply.github.com>
Date: Tue, 18 Jul 2023 08:43:14 +0530
Subject: [PATCH 05/11] Update src/components/GroupStatisticCard.tsx

Co-authored-by: Lyka Labrada <lykalabrada@gmail.com>
---
 src/components/GroupStatisticCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/GroupStatisticCard.tsx b/src/components/GroupStatisticCard.tsx
index 326680bf..399347a2 100644
--- a/src/components/GroupStatisticCard.tsx
+++ b/src/components/GroupStatisticCard.tsx
@@ -97,7 +97,7 @@ export default function GroupStatisticCard() {
                 smartContractStats?.verified_smart_contracts ?? 0
               )
                 .multipliedBy(smartContractStats?.smart_contracts ?? 0)
-                .dividedBy(1000)
+                .dividedBy(100)
                 .toFixed(2)}
               thousandSeparator
               suffix="% verified"

From 7ffb33faf80f8569f8e7716ecb286352e1ea4adc Mon Sep 17 00:00:00 2001
From: Harsh <harshrathi.dev@gmail.com>
Date: Tue, 18 Jul 2023 08:50:53 +0530
Subject: [PATCH 06/11] lint issue fixed

---
 src/components/GroupStatisticCard.tsx | 4 +++-
 tailwind.config.js                    | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/GroupStatisticCard.tsx b/src/components/GroupStatisticCard.tsx
index 399347a2..88a5fcff 100644
--- a/src/components/GroupStatisticCard.tsx
+++ b/src/components/GroupStatisticCard.tsx
@@ -87,7 +87,9 @@ export default function GroupStatisticCard() {
 
         <StatisticCard
           title="Contracts"
-          value={new BigNumber(smartContractStats?.verified_smart_contracts ?? 0)}
+          value={
+            new BigNumber(smartContractStats?.verified_smart_contracts ?? 0)
+          }
           testId="contracts"
           isLoading={isLoading}
         >
diff --git a/tailwind.config.js b/tailwind.config.js
index a987e5b7..03b280f3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -159,5 +159,5 @@ module.exports = {
         xxs: ["10px", "12px"],
       },
     },
-  }
+  },
 };

From 954cf9afd53917e8b2be0312f063caadb3299354 Mon Sep 17 00:00:00 2001
From: Harsh R <53080940+fullstackninja864@users.noreply.github.com>
Date: Wed, 19 Jul 2023 14:35:11 +0530
Subject: [PATCH 07/11] Update src/components/GroupStatisticCard.tsx

---
 src/components/GroupStatisticCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/GroupStatisticCard.tsx b/src/components/GroupStatisticCard.tsx
index 88a5fcff..b2471b40 100644
--- a/src/components/GroupStatisticCard.tsx
+++ b/src/components/GroupStatisticCard.tsx
@@ -14,7 +14,7 @@ export default function GroupStatisticCard() {
   const [dashboardStats, setDashboardStats] = useState<DashboardStatsProps>();
   const [smartContractStats, setSmartContractStats] =
     useState<SmartContractStatsProps>();
-  const unit = "fi";
+  const unit = "gwei";
   const fetchStats = async () => {
     setIsLoading(true);
     const dashStats = await LatestDataApi.getDashboardStats(connection);

From ed445962aeb726f5433a2f29d1b9422e5964c952 Mon Sep 17 00:00:00 2001
From: Harsh <harshrathi.dev@gmail.com>
Date: Thu, 20 Jul 2023 08:56:14 +0530
Subject: [PATCH 08/11] used global constant for unit constant

---
 src/components/GroupStatisticCard.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/GroupStatisticCard.tsx b/src/components/GroupStatisticCard.tsx
index b2471b40..1432dbfa 100644
--- a/src/components/GroupStatisticCard.tsx
+++ b/src/components/GroupStatisticCard.tsx
@@ -6,6 +6,7 @@ import LatestDataApi from "@api/LatestDataApi";
 import { useNetwork } from "@contexts/NetworkContext";
 import BigNumber from "bignumber.js";
 import { DashboardStatsProps, SmartContractStatsProps } from "@api/types";
+import { GWEI_SYMBOL } from "shared/constants";
 import NumericFormat from "./commons/NumericFormat";
 
 export default function GroupStatisticCard() {
@@ -14,7 +15,6 @@ export default function GroupStatisticCard() {
   const [dashboardStats, setDashboardStats] = useState<DashboardStatsProps>();
   const [smartContractStats, setSmartContractStats] =
     useState<SmartContractStatsProps>();
-  const unit = "gwei";
   const fetchStats = async () => {
     setIsLoading(true);
     const dashStats = await LatestDataApi.getDashboardStats(connection);
@@ -113,21 +113,21 @@ export default function GroupStatisticCard() {
           title="Gas price"
           value={new BigNumber(dashboardStats?.gas_prices.average ?? 0)}
           testId="gas-price"
-          suffix={` ${unit}`}
+          suffix={` ${GWEI_SYMBOL}`}
           isLoading={isLoading}
         >
           <NumericFormat
             value={new BigNumber(dashboardStats?.gas_prices.fast ?? 0)}
             thousandSeparator
             prefix={`High: `}
-            suffix={` ${unit}`}
+            suffix={` ${GWEI_SYMBOL}`}
             decimalScale={0}
           />
           <NumericFormat
             value={new BigNumber(dashboardStats?.gas_prices.slow ?? 0)}
             thousandSeparator
             prefix={`Low: `}
-            suffix={` ${unit}`}
+            suffix={` ${GWEI_SYMBOL}`}
             decimalScale={0}
             className="ml-2"
           />

From 42a4069f5966f95cc482cda7abed40c1ff750a43 Mon Sep 17 00:00:00 2001
From: Harsh <harshrathi.dev@gmail.com>
Date: Thu, 20 Jul 2023 14:28:05 +0530
Subject: [PATCH 09/11] fixed dates issue

---
 src/components/TransactionsLineChart.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TransactionsLineChart.tsx b/src/components/TransactionsLineChart.tsx
index 30cb76f3..1499c288 100644
--- a/src/components/TransactionsLineChart.tsx
+++ b/src/components/TransactionsLineChart.tsx
@@ -20,7 +20,7 @@ function CustomizedTickX(props) {
           textAnchor="middle"
           className="text-dark-700 text-xs -tracking-[0.12px]"
         >
-          {dayjs(payload.value).format("MMM d")}
+          {dayjs(payload.value).format("MMM D")}
         </tspan>
       </text>
     </g>
@@ -49,7 +49,7 @@ function CustomTooltip({ active, payload, label }) {
     return (
       <div className="bg-white-50 p-3 rounded-[10px]">
         <div className="text-xs text-light-700 -tracking-[0.12px]">
-          {dayjs(label).format("MMM d, YYYY")}
+          {dayjs(label).format("MMM D, YYYY")}
         </div>
         {payload.map((pld) => (
           <div className="text-base text-light-1000 -tracking-[0.32px]">

From 1f084a9662da1497215b473add92b411df66efef Mon Sep 17 00:00:00 2001
From: Harsh <harshrathi.dev@gmail.com>
Date: Thu, 20 Jul 2023 14:36:33 +0530
Subject: [PATCH 10/11] reverse the txn data for proper chart formation

---
 src/components/TokenStatsDisplay.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TokenStatsDisplay.tsx b/src/components/TokenStatsDisplay.tsx
index 1f617e74..6f40b888 100644
--- a/src/components/TokenStatsDisplay.tsx
+++ b/src/components/TokenStatsDisplay.tsx
@@ -18,7 +18,7 @@ export default function TokenStatsDisplay(): JSX.Element {
 
   const fetchStats = async () => {
     const data = await LatestDataApi.getTxnChartsData(connection);
-    setChartData(data.chart_data);
+    setChartData(data.chart_data?.reverse());
   };
 
   useEffect(() => {

From a5ec49146583a07a0938927945415a4e366e9728 Mon Sep 17 00:00:00 2001
From: Harsh <harshrathi.dev@gmail.com>
Date: Mon, 24 Jul 2023 10:44:36 +0530
Subject: [PATCH 11/11] removed txn count and gas price from graph footer

---
 src/components/GroupStatisticCard.tsx | 20 +-------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/src/components/GroupStatisticCard.tsx b/src/components/GroupStatisticCard.tsx
index 1432dbfa..172b3b83 100644
--- a/src/components/GroupStatisticCard.tsx
+++ b/src/components/GroupStatisticCard.tsx
@@ -29,25 +29,7 @@ export default function GroupStatisticCard() {
   }, []);
 
   return (
-    <div>
-      <div className="flex flex-col space-y-5 md:space-y-0 md:flex-row md:space-x-7 md:justify-end md:px-10 mb-11 md:mb-8 lg:mb-[72px]">
-        <div className="flex flex-row justify-between md:justify-start md:space-x-2 items-center">
-          <span className="text-white-700 text-sm -tracking-[0.14px]">
-            Gas Tracker:
-          </span>
-          <span className="text-white-50 text-base -tracking-[0.32px] font-semibold">
-            {dashboardStats?.gas_prices.average}
-          </span>
-        </div>
-        <div className="flex flex-row justify-between md:justify-start md:space-x-2 items-center">
-          <span className="text-white-700 text-sm -tracking-[0.14px]">
-            Daily transactions:
-          </span>
-          <span className="text-white-50 text-base -tracking-[0.32px] font-semibold">
-            {dashboardStats?.transactions_today}
-          </span>
-        </div>
-      </div>
+    <div className="mt-11 md:mt-8 lg:mt-[72px]">
       <div
         className={clsx(
           "grid grid-cols-1 gap-4",