bbn state and wallet balance UI refine (#390)

babylonlabs-io · Nov 26, 2024 · d6947ad · d6947ad
1 parent 3493c47
commit d6947ad
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 111 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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">