spin

Author: bend-n

src/app/page.tsx

@@ -7,7 +7,7 @@
 // }
 
 "use client";
-
+import "./blocks/odo.css";
 import React, { useEffect, useState } from "react";
 import ExplorerNav from "@/components/ExplorerNav";
 import timeAgo from "@/lib/ConvertTime";
@@ -72,6 +72,7 @@ import {
 import { day } from "@/lib/millis";
 import { HashLoader } from "react-spinners";
 import { Block, Transfer } from "@/graphql/types";
+import ReactOdometer from "react-odometerjs";
 
 function frequency(d: Date[]): number[] {
   let map = Array<number>(30).fill(0);
@@ -94,7 +95,7 @@ const Explorer = () => {
     {
       id: 1,
       title: "Finalized Blocks",
-      value: totalBlock.toLocaleString(),
+      value: totalBlock,
       icon: <Blocks size={30} color="#00A4E5" />,
     },
     // {
@@ -112,7 +113,7 @@ const Explorer = () => {
     {
       id: 4,
       title: "Signed Extrinsics",
-      value: extrinsic,
+      value: parseInt(extrinsic.replaceAll(",", "")),
       icon: <History color="#00A4E5" size={30} />,
     },
   ];
@@ -126,7 +127,7 @@ const Explorer = () => {
         search={true}
         selIcon="/sel-logo-blue.png"
       />
-      <div className="px-4 sm:px-20 lg:px-80 mt-6">
+      <div className="px-4 sm:px-20 lg:px-40 mt-6">
         <section className="mt-6 grid grid-cols-2 md:grid-cols-3 gap-2">
           {data1.map((data) => {
             return (
@@ -135,7 +136,9 @@ const Explorer = () => {
                   {data.icon}
                   <div className="flex flex-col mt-6">
                     <p className="text-sm text-default-500">{data.title}</p>
-                    <p className="text-xl md:text-2xl ">{data.value}</p>
+                    <p className="text-xl md:text-2xl ">
+                      <ReactOdometer value={data.value} />{" "}
+                    </p>
                   </div>
                 </CardBody>
               </Card>