Merge branch 'develop' into lbudginas/#424_add_new_tab_on_account_page

components/LastBlocksWidget.tsx

@@ -36,6 +36,7 @@ type ChartBlockData = {
   virtual: number;
 };
 
+
 const CustomTooltip = ({
   active,
   payload,
@@ -48,28 +49,27 @@ const CustomTooltip = ({
   if (active && payload && payload.length) {
     const totalOperations = payload.reduce((acc, pld) => acc + pld.value, 0);
     return (
-      <div className="bg-theme dark:bg-theme p-2 rounded border border-explorer-light-gray">
-        <p className="font-bold">{`Block ${label}`}</p>
-        <div className="my-2">
+      <div className="data-box">
+        <p className="font-bold text-xl">{`Block ${label}`}</p>
+        <div className="my-3 flex items-center">
           <Image
-            className="rounded-full inline"
+            className="rounded-full"
             src={getHiveAvatarUrl(payload[0].payload.witness)}
             alt="avatar"
-            width={40}
-            height={40}
+            width={50}
+            height={50}
           />
-          <p className="inline ml-4">{payload[0].payload.witness}</p>
+          <p className="ml-4 font-semibold">{payload[0].payload.witness}</p>
         </div>
-        <div>operations: {totalOperations}</div>
-        <div>
+        <div className="text-sm opacity-80">Operations: {totalOperations}</div>
+        <div className="mt-2 space-y-2">
           {payload.map((pld, index) => (
-            <div
-              key={index}
-              style={{ color: pld.fill }}
-            >
-              <div>
-                {pld.dataKey} {pld.value}
-              </div>
+            <div key={index} className="flex items-center">
+              <div
+                className="w-4 h-4 rounded-full"
+                style={{ backgroundColor: pld.fill }}
+              />
+              <span className="ml-2 text-sm">{`${pld.dataKey}: ${pld.value}`}</span>
             </div>
           ))}
         </div>
@@ -80,6 +80,7 @@ const CustomTooltip = ({
   return null;
 };
 
+
 const getOpsCount = (lastBlocks: Hive.LastBlocksTypeResponse[]) => {
   const opsCount: ChartBlockData[] = lastBlocks.map((block) => ({
     name: block.block_num.toString(),
@@ -216,7 +217,7 @@ const LastBlocksWidget: React.FC<LastBlocksWidgetProps> = ({
             content={<CustomTooltip />}
           />
           <Legend
-            wrapperStyle={{ position: "relative" }}
+            wrapperStyle={{ position: "relative" , marginLeft: "35px"}}
             align="center"
           />
           <Bar

components/home/CurrentBlockCard.tsx

+import React from "react";
+import Hive from "@/types/Hive";
+
+
+import Image from "next/image";
+import Link from "next/link";
+import { getHiveAvatarUrl } from "@/utils/HiveBlogUtils";
+import {
+  faCube,
+  faBoxes,
+  faExchangeAlt,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+interface CurrentBlockCardProps {
+  blockDetails?: Hive.BlockDetails;
+  transactionCount?: number;
+  opcount?: number;
+  liveBlockNumber?: number | null;
+  timeDifferenceInSeconds ?:number | null;
+}
+
+const CurrentBlockCard: React.FC<CurrentBlockCardProps> = ({
+  blockDetails,
+  transactionCount,
+  opcount,
+  liveBlockNumber,
+  timeDifferenceInSeconds,
+}) => {
+
+  return (
+   
+    <div className="data-box relative flex flex-col w-full min-h-[160px]">
+    <div className="flex flex-col w-full">
+      <div className="text-lg border-b">Current Block</div>
+      <div className="flex justify-between items-center mt-1 min-h-[35px] flex-wrap">
+        {/* Block Number and Icon */}
+        <div className="flex items-center space-x-1">
+          <FontAwesomeIcon icon={faCube} size="sm" />
+          <Link
+            href={`/block/${blockDetails?.block_num}`}
+            data-testid="block-number-link"
+          >
+            <span className="text-link text-lg font-semibold">
+              {liveBlockNumber
+                ? liveBlockNumber?.toLocaleString()
+                : blockDetails?.block_num
+                ? blockDetails?.block_num.toLocaleString()
+                : ""}
+            </span>
+          </Link>
+        </div>
+
+        {/* Producer Info */}
+        <div className="flex flex-wrap items-center space-x-1 min-w-[140px] min-h-10 transition-opacity duration-500 ease-in-out opacity-100">
+          <p className="text-sm">By:</p>
+
+          {blockDetails?.producer_account && (
+            <Link
+              className="flex items-center space-x-1 text-link"
+              href={`/@${blockDetails?.producer_account}`}
+              data-testid="current-witness-link"
+            >
+              <Image
+                className="rounded-full border-2 border-link"
+                src={getHiveAvatarUrl(blockDetails?.producer_account)}
+                alt="avatar"
+                width={30}
+                height={30}
+              />
+              <p className="text-link text-sm font-semibold">
+                {blockDetails?.producer_account}
+              </p>
+            </Link>
+          )}
+        </div>
+      </div>
+      {/* Time Difference */}
+      <div className="flex text-xs font-semibold text-explorer-red w-[65px] min-w-[65px] justify-end">
+        {timeDifferenceInSeconds} secs ago
+      </div>
+      {/* Operations and Transactions Info  */}
+      <div className="flex flex-col justify-end space-y-2 pt-4 min-h-[40px]">
+        <div className="flex items-center justify-end">
+          <div className="min-w-[120px]">
+            <FontAwesomeIcon icon={faBoxes} size="xs" />
+            <span className="ml-1">Operations: </span>
+            <span className="font-semibold text-sm">
+              {opcount ? opcount : ""}
+            </span>
+          </div>
+        </div>
+        <div className="flex items-center justify-end">
+          <div className="min-w-[120px]">
+            <FontAwesomeIcon icon={faExchangeAlt} size="xs" />
+            <span className="ml-1">Trxs: </span>
+            <span className="font-semibold text-sm">
+              {transactionCount}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  );
+};
+
+export default CurrentBlockCard;

components/home/HeadBlockCard.tsx

-import { useState } from "react";
-import { Loader2 } from "lucide-react";
-import Image from "next/image";
-import Link from "next/link";
-
+import { useState, useEffect, useMemo } from "react";
 import { config } from "@/Config";
 import Explorer from "@/types/Explorer";
 import Hive from "@/types/Hive";
-import { getHiveAvatarUrl } from "@/utils/HiveBlogUtils";
 import { getVestsToHiveRatio } from "@/utils/Calculations";
 import { useUserSettingsContext } from "../../contexts/UserSettingsContext";
 import useBlockchainSyncInfo from "@/hooks/common/useBlockchainSyncInfo";
@@ -19,6 +14,12 @@ import {
 import { getBlockDifference } from "./SyncInfo";
 import { Toggle } from "../ui/toggle";
 import { Card, CardContent, CardHeader } from "../ui/card";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faClock,
+} from "@fortawesome/free-solid-svg-icons";
+
+import CurrentBlockCard from "./CurrentBlockCard";
 
 interface HeadBlockCardProps {
   headBlockCardData?: Explorer.HeadBlockCardData | any;
@@ -33,6 +34,9 @@ const HeadBlockCard: React.FC<HeadBlockCardProps> = ({
   blockDetails,
   opcount = 0,
 }) => {
+  const isBlockCardLoading =
+    !headBlockCardData || !headBlockCardData.headBlockDetails ? true : false;
+
   const [hiddenPropertiesByCard, setHiddenPropertiesByCard] = useState<any>({
     timeCard: true,
     supplyCard: true,
@@ -40,8 +44,6 @@ const HeadBlockCard: React.FC<HeadBlockCardProps> = ({
   });
   const { settings, setSettings } = useUserSettingsContext();
 
-  const vestsToHiveRatio = getVestsToHiveRatio(headBlockCardData);
-
   const handleHideBlockchainDates = () => {
     setHiddenPropertiesByCard({
       ...hiddenPropertiesByCard,
@@ -76,109 +78,213 @@ const HeadBlockCard: React.FC<HeadBlockCardProps> = ({
   const isLiveDataToggleDisabled =
     blockDifference > config.liveblockSecurityDifference || isLoading;
 
+  const blockchainTime = headBlockCardData?.headBlockDetails.blockchainTime;
+  const formattedBlockchainTime = blockchainTime
+    ?.replace(/\//g, "-")
+    .replace(" UTC", "");
+  const blockchainDate = formattedBlockchainTime
+    ? new Date(formattedBlockchainTime).getTime()
+    : null;
+
+  const [timeDifferenceInSeconds, setTimeDifferenceInSeconds] = useState<
+    number | null
+  >(null);
+
+  useEffect(() => {
+    const calculateTimeDifference = () => {
+      if (!blockDetails?.created_at || !blockchainDate) {
+        setTimeDifferenceInSeconds(null);
+        return;
+      }
+
+      const blockCreationDate = new Date(blockDetails.created_at).getTime();
+      const timeDifference = Math.abs(blockchainDate - blockCreationDate);
+
+      setTimeDifferenceInSeconds(Math.floor(timeDifference / 1000));
+    };
+
+    calculateTimeDifference();
+
+  }, [blockDetails?.created_at, blockchainDate]);
+
+  // refresh interval
+  const intervalTime = config.accountRefreshInterval;
+
+  /*States to handle seamless update of blockNumber , blockChainTime, feedprice, and vests/hive ratio when liveData is on*/
+  const [liveBlockchainTime, setLiveBlockchainTime] = useState<Date | null>(
+    null
+  );
+  const [liveBlockNumber, setLiveBlockNumber] = useState<number | null>(
+    blockDetails?.block_num ?? null
+  );
+  const [liveFeedPrice, setLiveFeedPrice] = useState<number | undefined>(
+    headBlockCardData?.headBlockDetails?.feedPrice
+  );
+  const [liveVestsToHiveRatio, setLiveVestsToHiveRatio] = useState<
+    string | undefined
+  >(getVestsToHiveRatio(headBlockCardData));
+
+  // Update liveFeedPrice when feedPrice changes
+  useEffect(() => {
+    if (headBlockCardData?.headBlockDetails?.feedPrice) {
+      setLiveFeedPrice(headBlockCardData.headBlockDetails.feedPrice);
+    }
+  }, [headBlockCardData?.headBlockDetails?.feedPrice]);
+
+  // Update liveVestsToHiveRatio
+  useEffect(() => {
+    const newVestsToHiveRatio = getVestsToHiveRatio(headBlockCardData);
+    if (newVestsToHiveRatio) {
+      setLiveVestsToHiveRatio(newVestsToHiveRatio);
+    }
+  }, [
+    headBlockCardData
+  ]);
+
+  /*Block Chain Time Update*/
+  useEffect(() => {
+    if (!blockchainDate || !settings.liveData) return;
+    const initialTimeDifference = Date.now() - blockchainDate;
+
+    setLiveBlockchainTime(new Date(blockchainDate + initialTimeDifference));
+
+    const intervalId = setInterval(() => {
+      setLiveBlockchainTime((prevTime) => {
+        if (!prevTime) return new Date(blockchainDate);
+        const currentTime = Date.now();
+        const updatedTime = new Date(
+          blockchainDate + (currentTime - blockchainDate)
+        );
+        return updatedTime;
+      });
+    }, intervalTime);
+
+    return () => clearInterval(intervalId);
+  }, [blockchainDate, settings.liveData , intervalTime]);
+
+  /*Block Number Update*/
+  useEffect(() => {
+    if (!blockDetails?.block_num || !settings.liveData) return;
+
+    setLiveBlockNumber(blockDetails.block_num);
+
+    const intervalId = setInterval(() => {
+      setLiveBlockNumber((prevBlockNum) => {
+        if (!prevBlockNum) return blockDetails.block_num;
+        return prevBlockNum;
+      });
+    }, intervalTime);
+
+    return () => clearInterval(intervalId);
+  }, [blockDetails?.block_num, settings.liveData,intervalTime]);
+
+  /*Feed Price and Vest/Hive Ratio Update*/
+  useEffect(() => {
+    if (!settings.liveData) return;
+    const intervalId = setInterval(() => {
+      // Update Feed Price only if it has changed
+      setLiveFeedPrice((prevFeedPrice) => {
+        const newFeedPrice =
+          headBlockCardData?.headBlockDetails?.feedPrice ?? 0;
+        if (prevFeedPrice !== newFeedPrice) {
+          return newFeedPrice;
+        }
+        return prevFeedPrice;
+      });
+
+      // Update Vests to Hive Ratio only if it has changed
+      setLiveVestsToHiveRatio((prevRatio) => {
+        const newRatio = getVestsToHiveRatio(headBlockCardData);
+        if (prevRatio !== newRatio) {
+          return newRatio;
+        }
+        return prevRatio;
+      });
+    }, intervalTime);
+
+    return () => clearInterval(intervalId);
+  }, [settings.liveData, headBlockCardData, intervalTime]);
+
   return (
-    <Card
-      className="col-span-4 md:col-span-1"
-      data-testid="head-block-card"
-    >
-      <CardHeader>
-        <Toggle
-          disabled={isLiveDataToggleDisabled}
-          checked={settings.liveData}
-          onClick={() =>
-            setSettings({
-              ...settings,
-              liveData: !settings.liveData,
-            })
-          }
-          className="text-base"
-          leftLabel="Live data"
-        />
-        <div className="text-explorer-turquoise text-2xl text-left">
-          <Link
-            className="text-link"
-            href={`/block/${blockDetails?.block_num}`}
-            data-testid="block-number-link"
-          >
-            Block: {blockDetails?.block_num?.toLocaleString()}
-          </Link>
+    <Card className="col-span-4 md:col-span-1" data-testid="head-block-card">
+      <CardHeader className="flex justify-between items-end py-2 border-b ">
+        {/* Blockchain Time and Live Data Toggle */}
+        <div className="flex flex-col items-end space-y-2">
+          <div className="flex items-end space-x-2 text-[12px]">
+            <FontAwesomeIcon icon={faClock} size="xl" />
+            <span className="font-semibold">Blockchain Time:</span>
+            <span className="font-semibold text-right">
+              {liveBlockchainTime
+                ? `${liveBlockchainTime
+                    .toISOString()
+                    .replace("T", " ")
+                    .slice(0, 19)} UTC`
+                : blockchainTime ?? ""}
+            </span>
+          </div>
+
+          <div className="mt-4">
+            <Toggle
+              disabled={isLiveDataToggleDisabled}
+              checked={settings.liveData}
+              onClick={() =>
+                setSettings({
+                  ...settings,
+                  liveData: !settings.liveData,
+                })
+              }
+              className="text-base"
+              leftLabel="Live data"
+            />
+          </div>
         </div>
       </CardHeader>
 
-      <CardContent className="p-2">
-        <div className="my-2">Operations per block : {opcount} </div>
-        {blockDetails?.producer_account && (
-          <div className="flex">
-            <p>Current witness : </p>
-            <Link
-              className="flex justify-between items-center min-h-[40px]"
-              href={`/@${blockDetails?.producer_account}`}
-              data-testid="current-witness-link"
-            >
-              <div className="flex">
-                <p
-                  className="text-link mx-2"
-                  data-testid="current-witness-name"
-                >
-                  {blockDetails?.producer_account}
-                </p>
-                <div className="min-w-[30px]">
-                  <Image
-                    className="rounded-full border-2 border-link"
-                    src={getHiveAvatarUrl(blockDetails?.producer_account)}
-                    alt="avatar"
-                    width={40}
-                    height={40}
-                  />
-                </div>
-              </div>
-            </Link>
+      <CardContent className="p-4 space-y-4">
+        {/* Other Information*/}
+        <div className="data-box">
+          <div>
+            <span>Feed Price:</span> {liveFeedPrice}
+          </div>
+          <div>
+            <span>Vests To Hive Ratio:</span> {liveVestsToHiveRatio} VESTS
           </div>
-        )}
-        <div className="my-2">
-          Feed Price : {headBlockCardData?.headBlockDetails.feedPrice ?? ""}
-        </div>
-        <div className="my-2">
-          Vests To Hive Ratio : {vestsToHiveRatio} VESTS
-        </div>
-        <div>
-          Blockchain Time :{" "}
-          {!!headBlockCardData?.headBlockDetails.blockchainTime &&
-            headBlockCardData?.headBlockDetails.blockchainTime}
         </div>
+        {/* Last Block Information */} 
+          <CurrentBlockCard
+          blockDetails={blockDetails}
+          transactionCount={transactionCount}
+          opcount={opcount}
+          timeDifferenceInSeconds={timeDifferenceInSeconds}
+          liveBlockNumber={liveBlockNumber}
+          />
+
         <div>
-          <div className="text-center my-4 text-xl">Properties</div>
-
-          {!headBlockCardData || !headBlockCardData.headBlockDetails ? (
-            <div className="flex justify-center m-2">
-              <Loader2 className="animate-spin mt-1 text-white h-12 w-12 ml-3 ..." />
-            </div>
-          ) : (
-            <>
-              <HeadBlockPropertyCard
-                parameters={fundAndSupplyParameters}
-                header="Fund and Supply"
-                isParamsHidden={hiddenPropertiesByCard.supplyCard}
-                handleHideParams={handleHideSupplyParams}
-              />
-              <HeadBlockPropertyCard
-                parameters={hiveParameters}
-                header="Hive Parameters"
-                isParamsHidden={hiddenPropertiesByCard.hiveParamsCard}
-                handleHideParams={handleHideHiveParams}
-              />
-              <HeadBlockPropertyCard
-                parameters={blockchainDates}
-                header="Blockchain Dates"
-                isParamsHidden={hiddenPropertiesByCard.timeCard}
-                handleHideParams={handleHideBlockchainDates}
-              />
-            </>
-          )}
+          <HeadBlockPropertyCard
+            parameters={fundAndSupplyParameters}
+            header="Fund and Supply"
+            isParamsHidden={hiddenPropertiesByCard.supplyCard}
+            handleHideParams={handleHideSupplyParams}
+            isLoading={isBlockCardLoading}
+          />
+          <HeadBlockPropertyCard
+            parameters={hiveParameters}
+            header="Hive Parameters"
+            isParamsHidden={hiddenPropertiesByCard.hiveParamsCard}
+            handleHideParams={handleHideHiveParams}
+            isLoading={isBlockCardLoading}
+          />
+          <HeadBlockPropertyCard
+            parameters={blockchainDates}
+            header="Blockchain Dates"
+            isParamsHidden={hiddenPropertiesByCard.timeCard}
+            handleHideParams={handleHideBlockchainDates}
+            isLoading={isBlockCardLoading}
+          />
         </div>
       </CardContent>
     </Card>
   );
 };
 
-export default HeadBlockCard;
\ No newline at end of file
+export default HeadBlockCard;

components/home/HeadBlockPropertyCard.tsx

-import { Fragment } from "react";
 import { ArrowDown, ArrowUp } from "lucide-react";
-
 import { convertUTCDateToLocalDate } from "@/utils/TimeUtils";
 import useDynamicGlobal from "@/hooks/api/homePage/useDynamicGlobal";
 import { Table, TableBody, TableRow, TableCell } from "../ui/table";
 import {
-  fundAndSupplyParameters,
-  hiveParameters,
-  blockchainDates,
+fundAndSupplyParameters,
+hiveParameters,
+blockchainDates,
 } from "./headBlockParameters";
 
+import { Loader2 } from "lucide-react";
+
 const cardNameMap = new Map([
   ["feedPrice", "Feed price"],
   ["blockchainTime", "Blockchain time"],
@@ -53,6 +53,7 @@ interface HeadBlockPropertyCardProps {
   header: string;
   isParamsHidden: boolean;
   handleHideParams: () => void;
+  isLoading: boolean;
 }
 
 const buildTableBody = (
@@ -61,18 +62,16 @@ const buildTableBody = (
   dynamicGlobalData: any
 ) => {
   return parameters.map((param: string, index: number) => (
-    <Fragment key={index}>
-      <TableRow className={"border-b border-gray-700  hover:bg-inherit"}>
-        <TableCell>{cardNameMap.get(param)}</TableCell>
-        <TableCell>
-          {header === "Blockchain Dates"
+    <TableRow key={index} className="border-b border-gray-700 hover:bg-inherit">
+      <TableCell>{cardNameMap.get(param)}</TableCell>
+      <TableCell>
+        {header === "Blockchain Dates"
             ? convertUTCDateToLocalDate(
                 dynamicGlobalData?.headBlockDetails[param]
               )
-            : dynamicGlobalData?.headBlockDetails[param]}
-        </TableCell>
-      </TableRow>
-    </Fragment>
+          : dynamicGlobalData?.headBlockDetails[param]}
+      </TableCell>
+    </TableRow>
   ));
 };
 
@@ -81,31 +80,32 @@ const HeadBlockPropertyCard: React.FC<HeadBlockPropertyCardProps> = ({
   header,
   isParamsHidden,
   handleHideParams,
+  isLoading,
 }) => {
   const { dynamicGlobalData } = useDynamicGlobal() as any;
 
   return (
-    <div
-      className="bg-theme py-1 rounded-[6px]"
-      data-testid="expandable-list"
-    >
-      <div
-        onClick={handleHideParams}
-        className="h-full flex justify-between align-center py-2 hover:bg-rowHover cursor-pointer px-2"
-      >
+    <div className="bg-theme py-1 rounded-[6px] data-box" data-testid="expandable-list" style={{ overflowX: "auto", width: "100%" }}>
+      <div onClick={handleHideParams} className="h-full w-full flex items-center justify-between py-1 cursor-pointer px-1">
         <div className="text-lg">{header}</div>
-        {isParamsHidden ? <ArrowDown /> : <ArrowUp />}
-      </div>
-      <div
-        hidden={isParamsHidden}
-        data-testid="conntent-expandable-list"
-      >
-        <Table>
-          <TableBody>
-            {buildTableBody(parameters, header, dynamicGlobalData)}
-          </TableBody>
-        </Table>
+        <div>{isParamsHidden ? <ArrowDown /> : <ArrowUp />}</div>
       </div>
+
+      {isLoading && !isParamsHidden ? (
+        <div className="flex justify-center w-full">
+          <Loader2 className="animate-spin mt-1 text-white h-8 w-8" />
+        </div>
+      ) : (
+        <div hidden={isParamsHidden} data-testid="content-expandable-list">
+          <div style={{ overflowX: "auto" }}>
+            <Table className="min-w-full">
+              <TableBody>
+                {dynamicGlobalData?.headBlockDetails && buildTableBody(parameters, header, dynamicGlobalData)}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

components/searchRanges/SearchRanges.tsx

-import React, { useEffect , useState } from "react";
+import React, { useEffect, useState } from "react";
 import moment from "moment";
 
 import { SearchRangesResult } from "../../hooks/common/useSearchRanges";
 import { Select, SelectContent, SelectTrigger, SelectItem } from "../ui/select";
 import { Input } from "../ui/input";
 import DateTimePicker from "../DateTimePicker";
-import ErrorMessage from "../ErrorMessage";// Import the ErrorMessage component
-
+import ErrorMessage from "../ErrorMessage"; // Import the ErrorMessage component
 interface SearchRangesProps {
   rangesProps: SearchRangesResult;
   safeTimeRangeDisplay?: boolean;
@@ -37,23 +36,77 @@ const SearchRanges: React.FC<SearchRangesProps> = ({
     setLastTimeUnitValue,
   } = rangesProps;
 
-  // Validate and update numeric values
+  
+  const [rangeError, setRangeError] = useState<string | null>(null); 
+
+  const handleOnBlur = (
+    e: React.FocusEvent<HTMLInputElement>,
+    fieldSetter: Function,
+    validateField: Function | null
+  ) => {
+    const value = e.target.value;
+    const numericValue = value ? Number(value) : undefined;
+
+    // Fetch the latest block number dynamically
+    let validated = true;
+    if (validateField) {
+      validated = validateField(e, numericValue); 
+    }
+
+    validated ? fieldSetter(numericValue) : fieldSetter(null);
+  };
+
+  const validateToBlock = (
+    e: React.FocusEvent<HTMLInputElement>,
+    value: number | undefined,
+  ) => {
+    if (value !== undefined && value <= 0) {
+      setRangeError("Block Number must be a positive number");
+      e.target.value = "";
+      return false;
+    }
+    if (value && fromBlock && !isNaN(value) && value < fromBlock) {
+      setRangeError("To block must be greater than From block");
+      e.target.value = "";
+      return false;
+    }
+    return true;
+  };
+
+  const validateFromBlock = (
+    e: React.FocusEvent<HTMLInputElement>,
+    value: number | undefined,
+  ) => {
+    if (value !== undefined && value <= 0) {
+      setRangeError("Block Number must be a positive number");
+      e.target.value = "";
+      return false;
+    }
+    if (value && toBlock && !isNaN(value) && value > toBlock) {
+      setRangeError("From block must be less than To block");
+      e.target.value = "";
+      return false;
+    }
+    return true;
+  };
+
   const handleNumericInput = (
     e: React.ChangeEvent<HTMLInputElement>,
     allowDecimal: boolean = false
   ) => {
     let cleanedValue = e.target.value;
-  
+
     // Clean the value based on the logic
     cleanedValue = allowDecimal
       ? cleanedValue.replace(/[^0-9.]/g, "") // Allow numbers and decimal point
       : cleanedValue.replace(/[^0-9]/g, ""); // Only allow numbers
-  
+
     if (allowDecimal && cleanedValue.split(".").length > 2) {
-      cleanedValue = cleanedValue.slice(0, cleanedValue.indexOf(".") + 1) + 
-      cleanedValue.split(".").slice(1).join(""); // Remove extra decimals
+      cleanedValue =
+        cleanedValue.slice(0, cleanedValue.indexOf(".") + 1) +
+        cleanedValue.split(".").slice(1).join(""); // Remove extra decimals
     }
-  
+
     if (cleanedValue.length > 15) {
       cleanedValue = cleanedValue.slice(0, 15); // Limit to 15 digits
     }
@@ -68,10 +121,9 @@ const SearchRanges: React.FC<SearchRangesProps> = ({
     ) {
       setStartDate(moment(startDate).subtract(1, "hours").toDate());
     }
-    //eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [startDate, endDate]);
 
-  const [blockRangeError, setBlockRangeError] = useState<string | null>(null); // Error state for block range validation
 
   return (
     <div className="py-2 flex flex-col gap-y-2">
@@ -109,11 +161,7 @@ const SearchRanges: React.FC<SearchRangesProps> = ({
               type="text" // Use type="text" to allow custom validation
               defaultValue={lastBlocksValue || ""}
               onChange={(e) => handleNumericInput(e)}
-              onBlur={(e) => {
-                const value = e.target.value;
-                const numericValue = value ? Number(value) : undefined; 
-                setLastBlocksValue(numericValue);
-              }}
+              onBlur={(e) => handleOnBlur(e,setLastBlocksValue,null)}
               placeholder={"Last"}
             />
           </div>
@@ -129,11 +177,7 @@ const SearchRanges: React.FC<SearchRangesProps> = ({
                 className="bg-theme border-0 border-b-2 text-text"
                 defaultValue={lastTimeUnitValue || ""}
                 onChange={(e) => handleNumericInput(e,true)}
-                onBlur={(e) => {
-                  const value = e.target.value;
-                  const numericValue = value ? Number(value) : undefined;
-                  setLastTimeUnitValue(numericValue);
-                }}
+                onBlur={(e) => handleOnBlur(e,setLastTimeUnitValue,null)}
                 placeholder={"Last"}
               />
             </div>
@@ -174,11 +218,7 @@ const SearchRanges: React.FC<SearchRangesProps> = ({
               data-testid="from-block-input"
               defaultValue={fromBlock || ""}
               onChange={(e) => handleNumericInput(e)}
-              onBlur={(e) => {
-                const value = e.target.value;
-                const numericValue = value ? Number(value) : undefined;
-                setFromBlock(numericValue);
-              }}
+              onBlur={(e) => handleOnBlur(e,setFromBlock,validateFromBlock)}
               placeholder="From"
             />
           </div>
@@ -190,35 +230,15 @@ const SearchRanges: React.FC<SearchRangesProps> = ({
               defaultValue={toBlock || ""}
               onChange={(e) => handleNumericInput(e)}
               placeholder={"To"}
-              onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
-                const value = e.target.value;
-                const numericValue = value ? Number(value) : undefined;
-                  if (
-                    numericValue &&
-                    fromBlock &&
-                    !isNaN(numericValue) &&
-                    !isNaN(Number(fromBlock)) &&
-                    numericValue < Number(fromBlock)
-                  ) {
-                    setBlockRangeError("To block must be greater than From block");
-                    e.target.value = "";
-                  } else if (numericValue !=undefined && numericValue <= 0 && fromBlock) {
-                    setBlockRangeError("To block must be greater than From block");
-                    e.target.value = "";
-                  } else {
-                    setToBlock(numericValue);
-                    setBlockRangeError(null);
-                  }
-                }
-              }
+              onBlur={(e) => handleOnBlur(e,setToBlock,validateToBlock)}
             />
           </div>
         </div>
       )}
-      {blockRangeError && (
+      {rangeError && (
         <ErrorMessage
-          message={blockRangeError}
-          onClose={() => setBlockRangeError(null)} // Close the error message
+          message={rangeError}
+          onClose={() => setRangeError(null)} // Close the error message
           timeout={3000}
         />
       )}

components/ui/toggle.tsx

@@ -26,13 +26,13 @@ const Toggle: React.FC<ToggleProps> = ({
       {leftLabel && <p>{leftLabel}</p>}
       <div
         className={cn(
-          "w-10 h-5 rounded-3xl border-2 invalid border-white relative",
+          "w-10 h-5 rounded-3xl border-2 invalid relative border-black dark:border-white",
           {
             "cursor-pointer": !disabled,
             "bg-green-600": checked,
             "bg-transparent": !checked,
             "border-gray-700": disabled && !checked,
-            "border-black dark:border-white": !disabled,
+//"border-black dark:border-white": !disabled,
           }
         )}
         onClick={!disabled ? onClick : undefined}

hooks/common/useSearchRanges.ts

@@ -142,6 +142,26 @@ const useSearchRanges = (defaultSelectKey: string = "lastTime") => {
         .milliseconds(0)
         .toDate();
     }
+    
+    //Validate that payloadStartDate is a valid
+    if (payloadStartDate && (isNaN(payloadStartDate?.getTime()) || payloadStartDate?.getTime() <= 0)) {
+      payloadStartDate = undefined; //fallback
+    }
+    //Validate that payloadToBlock does not exceed latest headblock number
+    if (payloadToBlock) {
+      const currentHeadBlockNumber = await checkTemporaryHeadBlockNumber();
+      if (payloadToBlock > currentHeadBlockNumber) {
+        payloadToBlock = currentHeadBlockNumber; //fallback
+      }
+    }
+    if(payloadFromBlock)
+    {
+      const currentHeadBlockNumber = await checkTemporaryHeadBlockNumber();
+      if (payloadFromBlock > currentHeadBlockNumber) {
+        payloadFromBlock = currentHeadBlockNumber; //fallback
+      }
+    }
+
     return {
       payloadFromBlock,
       payloadToBlock,

lib/utils.ts

@@ -84,7 +84,7 @@ export const formatPercent = (numberToFormat: number): string => {
 export const convertOperationResultsToTableOperations = (
   operations: Hive.OperationResponse[]
 ): Explorer.OperationForTable[] => {
-  return operations.map((operation) => ({
+  return operations?.map((operation) => ({
     operation: operation.op,
     blockNumber: operation.block,
     trxId: operation.trx_id,

pages/index.tsx

@@ -39,6 +39,11 @@ export default function Home() {
     useDynamicGlobal(headBlockNum).dynamicGlobalData;
   const headBlockData = useHeadBlock(headBlockNum).headBlockData;
   const { blockOperations } = useBlockOperations(headBlockNum || 0);
+
+
+  // Filter operations that have a trx_id
+  const trxOperations = blockOperations?.operations_result.filter((operation) => operation.trx_id);
+
   const opcount = blockOperations?.operations_result?.length || 0;
 
   const strokeColor = theme === "dark" ? "#FFF" : "#000";
@@ -51,7 +56,7 @@ export default function Home() {
       <div className="grid grid-cols-4 text-white px-2 w-full gap-3">
         <HeadBlockCard
           headBlockCardData={dynamicGlobalQueryData}
-          transactionCount={blockOperations?.operations_result?.length}
+          transactionCount={ trxOperations?.length}
           blockDetails={headBlockData}
           opcount={opcount}
         />

styles/theme.css

@@ -319,4 +319,32 @@ pre {
   font-size: 1rem;
 }
 
-/*End Sync Dialog Styles*/
\ No newline at end of file
+/*End Sync Dialog Styles*/
+
+/* Data Box Styling */
+.data-box {
+  background-color: var(--color-extra-light-gray);
+  border-radius: 12px;
+  padding: 10px;
+  margin: 6px 0;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  color: var(--color-text);
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  border: 1px solid var(--color-light-gray); /* Fine border */
+  transition: all 0.3s ease-in-out;
+  flex-direction: column; /* Stack elements vertically */
+}
+
+.data-box:hover {
+  background-color: var(--color-row-hover);
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15); /* Elevated shadow */
+  transform: translateY(-3px); /* Slight lift on hover */
+}
+
+.data-box span {
+  font-weight: bold;
+  font-size: 14px;
+}
\ No newline at end of file