feat: refactor system stats and personal balance sections (#226)

* fix: refactor system stats section

* feat: static UI for balance section

src/app/components/Delegations/Delegations.tsx

@@ -11,7 +11,7 @@ import { LoadingTableList } from "@/app/components/Loading/Loading";
 import { DelegationsPointsProvider } from "@/app/context/api/DelegationsPointsProvider";
 import { useError } from "@/app/context/Error/ErrorContext";
 import { useWallet } from "@/app/context/wallet/WalletProvider";
-import { useDelegations } from "@/app/hooks/useDelegations";
+import { useDelegations } from "@/app/hooks/api/useDelegations";
 import { useHealthCheck } from "@/app/hooks/useHealthCheck";
 import { useAppState } from "@/app/state";
 import { useDelegationState } from "@/app/state/DelegationState";

src/app/components/Modals/UnbondWithdrawModal.tsx

@@ -1,6 +1,6 @@
 import { IoMdClose } from "react-icons/io";
 
-import { useVersionByHeight } from "@/app/hooks/useVersions";
+import { useVersionByHeight } from "@/app/hooks/useVersionByHeight";
 import { Delegation as DelegationInterface } from "@/app/types/delegations";
 import { getNetworkConfig } from "@/config/network.config";
 import { blocksToDisplayTime } from "@/utils/blocksToDisplayTime";

src/app/components/PersonalBalance/BalanceItem.tsx

@@ -0,0 +1,53 @@
+import { useId } from "react";
+import { AiOutlineInfoCircle } from "react-icons/ai";
+import { Tooltip } from "react-tooltip";
+import { twMerge } from "tailwind-merge";
+
+interface BalanceItemProps {
+  className?: string;
+  label: string;
+  value: string | JSX.Element;
+  tooltip?: string;
+}
+
+export function BalanceItem({
+  className,
+  label,
+  value,
+  tooltip,
+}: BalanceItemProps) {
+  const tooltipId = useId();
+
+  return (
+    <div
+      className={twMerge(
+        "flex gap-2 text-sm justify-start sm:items-center",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-1 overflow-x-auto whitespace-nowrap">
+        <p className="dark:text-neutral-content">{label}:</p>
+        {tooltip && (
+          <>
+            <span
+              className="cursor-pointer text-xs"
+              data-tooltip-id={tooltipId}
+              data-tooltip-content={tooltip}
+              data-tooltip-place="bottom"
+            >
+              <AiOutlineInfoCircle />
+            </span>
+            <Tooltip id={tooltipId} className="tooltip-wrap" />
+          </>
+        )}
+      </div>
+      {typeof value === "string" ? (
+        <div className="flex items-center gap-1 overflow-x-auto whitespace-nowrap font-semibold">
+          {value}
+        </div>
+      ) : (
+        value
+      )}
+    </div>
+  );
+}

src/app/components/PersonalBalance/PersonalBalance.tsx

@@ -0,0 +1,45 @@
+import { BalanceItem } from "./BalanceItem";
+
+export function PersonalBalance() {
+  return (
+    <div className="card flex flex-col gap-2 items-stretch sm:justify-between sm:items-center bg-base-300 shadow-sm sm:flex-row">
+      <div className="flex flex-col gap-2 card p-4 bg-base-400">
+        <h3 className="mb-4 font-bold xl:mb-0">Bitcoin Balance</h3>
+
+        <div className="flex flex-col gap-2 md:flex-row md:items-center">
+          <BalanceItem label="Total" value="100.134 BTC" />
+
+          <div className="divider xl:divider-horizontal my-0" />
+
+          <BalanceItem label="Stakable" value="0.134 BTC" />
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-2 card p-4 bg-base-400">
+        <h3 className="mb-4 font-bold sm:text-right xl:mb-0">
+          Babylon Balance
+        </h3>
+
+        <div className="flex flex-col text-right gap-2 md:flex-row md:items-center">
+          <BalanceItem
+            className="sm:justify-end"
+            label="Total"
+            value="100.134 BBN"
+          />
+
+          <div className="divider xl:divider-horizontal my-0" />
+
+          <BalanceItem
+            className="sm:justify-end"
+            label="Claimable Reward"
+            value={
+              <button className="btn btn-primary h-auto min-h-fit w-fit p-0.5 rounded">
+                0.134 BBN
+              </button>
+            }
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/components/Stats/StatItem.tsx

@@ -0,0 +1,51 @@
+import { type JSX } from "react";
+import { AiOutlineInfoCircle } from "react-icons/ai";
+import { Tooltip } from "react-tooltip";
+
+interface StatItemProps {
+  loading?: boolean;
+  icon: JSX.Element;
+  title: string;
+  value: string | number;
+  tooltip?: string;
+}
+
+export const StatItem = ({
+  loading,
+  icon,
+  title,
+  value,
+  tooltip,
+}: StatItemProps) => (
+  <div className="flex items-center gap-2 md:flex-1 md:flex-col lg:flex-initial lg:flex-row flex-wrap justify-center">
+    <div className="flex items-center gap-2">
+      {icon}
+      <div className="flex items-center gap-1">
+        <p className="dark:text-neutral-content">{title}</p>
+        {tooltip && (
+          <>
+            <span
+              className="cursor-pointer text-xs"
+              data-tooltip-id={`tooltip-${title}`}
+              data-tooltip-content={tooltip}
+              data-tooltip-place="top"
+            >
+              <AiOutlineInfoCircle />
+            </span>
+            <Tooltip id={`tooltip-${title}`} className="tooltip-wrap" />
+          </>
+        )}
+      </div>
+    </div>
+
+    <div>
+      <p className="flex-1 text-right">
+        {loading ? (
+          <span className="loading loading-spinner text-primary" />
+        ) : (
+          <strong>{value}</strong>
+        )}
+      </p>
+    </div>
+  </div>
+);