From d6947ad65e48a1df30413c8299b53fd02c33b251 Mon Sep 17 00:00:00 2001
From: Tong Li <supertong@users.noreply.github.com>
Date: Wed, 27 Nov 2024 01:08:19 +1100
Subject: [PATCH] bbn state and wallet balance UI refine (#390)

---
 src/app/components/Header/Header.tsx          |  2 +-
 .../PersonalBalance/BalanceItem.tsx           | 53 -------------------
 .../PersonalBalance/PersonalBalance.tsx       | 51 ++++++------------
 src/app/components/Stats/StatItem.tsx         |  8 +--
 src/app/components/Stats/Stats.tsx            | 28 ++++------
 .../components/TestingInfo/TestingInfo.tsx    |  1 +
 6 files changed, 32 insertions(+), 111 deletions(-)
 delete mode 100644 src/app/components/PersonalBalance/BalanceItem.tsx

diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx
index 0b734e05..0c95d5f7 100644
--- a/src/app/components/Header/Header.tsx
+++ b/src/app/components/Header/Header.tsx
@@ -18,7 +18,7 @@ export const Header = () => {
 
   return (
     <nav>
-      <section className="bg-primary-main h-[300px] -mb-[188px]">
+      <section className="bg-primary-main h-[300px] -mb-[250px] md:-mb-[188px]">
         <div className="container h-20 py-6 px-6 mx-auto flex items-center justify-between">
           <Logo />
           <div className="flex flex-1">
diff --git a/src/app/components/PersonalBalance/BalanceItem.tsx b/src/app/components/PersonalBalance/BalanceItem.tsx
deleted file mode 100644
index 67e872b7..00000000
--- a/src/app/components/PersonalBalance/BalanceItem.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-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>
-  );
-}
diff --git a/src/app/components/PersonalBalance/PersonalBalance.tsx b/src/app/components/PersonalBalance/PersonalBalance.tsx
index 0193abcf..128a3f19 100644
--- a/src/app/components/PersonalBalance/PersonalBalance.tsx
+++ b/src/app/components/PersonalBalance/PersonalBalance.tsx
@@ -1,44 +1,27 @@
-import { BalanceItem } from "./BalanceItem";
+import { Heading } from "@babylonlabs-io/bbn-core-ui";
+
+import { StatItem } from "../Stats/StatItem";
 
 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-4 p-1 xl:justify-between mb-12">
+      <Heading variant="h5" className="text-primary-dark md:text-4xl">
+        Wallet Balance
+      </Heading>
+      <div className="flex flex-col justify-between bg-secondary-contrast rounded p-6 text-base md:flex-row">
+        <StatItem loading={false} title="Bitcoin Balance" value="100.134 BTC" />
 
-        <div className="flex flex-col gap-2 md:flex-row md:items-center">
-          <BalanceItem label="Total" value="100.134 BTC" />
+        <div className="divider mx-0 my-2 md:divider-horizontal" />
 
-          <div className="divider xl:divider-horizontal my-0" />
+        <StatItem loading={false} title="Stakable Bitcoin" value="0.134 BTC" />
 
-          <BalanceItem label="Stakable" value="0.134 BTC" />
-        </div>
-      </div>
+        <div className="divider mx-0 my-2 md:divider-horizontal" />
+
+        <StatItem loading={false} title="Babylon Balance" value="100.134 BBN" />
+
+        <div className="divider mx-0 my-2 md:divider-horizontal" />
 
-      <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>
+        <StatItem loading={false} title="BBN Rewards" value="0.134 BBN" />
       </div>
     </div>
   );
diff --git a/src/app/components/Stats/StatItem.tsx b/src/app/components/Stats/StatItem.tsx
index 62a7d001..12e8a97e 100644
--- a/src/app/components/Stats/StatItem.tsx
+++ b/src/app/components/Stats/StatItem.tsx
@@ -4,7 +4,7 @@ import { Tooltip } from "react-tooltip";
 
 interface StatItemProps {
   loading?: boolean;
-  icon: JSX.Element;
+  icon?: JSX.Element;
   title: string;
   value: string | number;
   tooltip?: string;
@@ -17,7 +17,7 @@ export const StatItem = ({
   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 md:flex-1 md:flex-col lg:flex-initial lg:flex-row flex-wrap justify-between text-primary-light text-base">
     <div className="flex items-center gap-2">
       {icon}
       <div className="flex items-center gap-1">
@@ -41,9 +41,9 @@ export const StatItem = ({
     <div>
       <p className="flex-1 text-right">
         {loading ? (
-          <span className="loading loading-spinner text-primary" />
+          <span className="loading loading-spinner text-primary-dark" />
         ) : (
-          <strong>{value}</strong>
+          <span className="text-primary-dark">{value}</span>
         )}
       </p>
     </div>
diff --git a/src/app/components/Stats/Stats.tsx b/src/app/components/Stats/Stats.tsx
index 87a4885d..96672b3f 100644
--- a/src/app/components/Stats/Stats.tsx
+++ b/src/app/components/Stats/Stats.tsx
@@ -1,3 +1,4 @@
+import { Heading } from "@babylonlabs-io/bbn-core-ui";
 import { memo } from "react";
 
 import { useSystemStats } from "@/app/hooks/api/useSystemStats";
@@ -6,14 +7,6 @@ import { satoshiToBtc } from "@/utils/btcConversions";
 import { maxDecimals } from "@/utils/maxDecimals";
 
 import { StatItem } from "./StatItem";
-import {
-  delegationIcon,
-  finalityProviderIcon,
-  rewardHistoryIcon,
-  rewardRateIcon,
-  stakerIcon,
-  tvlIcon,
-} from "./icons";
 
 const { coinName } = getNetworkConfig();
 
@@ -32,12 +25,14 @@ export const Stats = memo(() => {
   const activeFinalityProviders = data?.active_finality_providers ?? 0;
 
   return (
-    <div className="card flex flex-col gap-4 bg-base-300 p-1 shadow-sm xl:flex-row xl:justify-between">
-      <div className="card flex justify-between bg-base-400 p-4 text-sm md:flex-row">
+    <div className="flex flex-col gap-4 p-1 xl:justify-between mb-12">
+      <Heading variant="h5" className="text-primary-contrast md:text-4xl">
+        Babylon Stats
+      </Heading>
+      <div className="flex flex-col justify-between bg-secondary-contrast rounded p-6 text-base md:flex-row">
         <StatItem
           loading={isLoading}
-          icon={tvlIcon}
-          title="TVL"
+          title="Confirmed TVL"
           value={`${maxDecimals(satoshiToBtc(activeTvl), 8)} ${coinName}`}
           tooltip="Total number of active bitcoins staked"
         />
@@ -46,7 +41,6 @@ export const Stats = memo(() => {
 
         <StatItem
           loading={isLoading}
-          icon={stakerIcon}
           title="Stakers"
           value={formatter.format(activeStakers)}
           tooltip="Total number of active bitcoin stakers"
@@ -56,17 +50,15 @@ export const Stats = memo(() => {
 
         <StatItem
           loading={isLoading}
-          icon={finalityProviderIcon}
           title="Finality Providers"
           value={`${activeFinalityProviders}/${totalFinalityProviders}`}
           tooltip="Active and total number of finality providers"
         />
-      </div>
 
-      <div className="card flex justify-between bg-base-400 p-4 text-sm md:flex-row">
+        <div className="divider mx-0 my-2 md:divider-horizontal" />
+
         <StatItem
           loading={isLoading}
-          icon={delegationIcon}
           title="Delegations"
           value={formatter.format(activeDelegations)}
           tooltip="Total number of active bitcoin staking delegations"
@@ -76,7 +68,6 @@ export const Stats = memo(() => {
 
         <StatItem
           loading={isLoading}
-          icon={rewardRateIcon}
           title="Reward Rate"
           value="0 BBN"
           tooltip="Current number of BBN token reward per 24 hrs per one bitcoin staked"
@@ -86,7 +77,6 @@ export const Stats = memo(() => {
 
         <StatItem
           loading={isLoading}
-          icon={rewardHistoryIcon}
           title="Reward History"
           value="O BBN"
           tooltip="Total number of BBN tokens rewarded to bitcoin stakers"
diff --git a/src/app/components/TestingInfo/TestingInfo.tsx b/src/app/components/TestingInfo/TestingInfo.tsx
index 41a04f55..621a77d2 100644
--- a/src/app/components/TestingInfo/TestingInfo.tsx
+++ b/src/app/components/TestingInfo/TestingInfo.tsx
@@ -5,6 +5,7 @@ import { shouldDisplayTestingMsg } from "@/config";
 interface TestingInfoProps {}
 
 export const TestingInfo: React.FC<TestingInfoProps> = () => {
+  return null;
   if (!shouldDisplayTestingMsg()) return null;
   return (
     <div className="flex w-full justify-center">