From d4110ccf79d0df4cef97722c7e409f1d9bc0c3fd Mon Sep 17 00:00:00 2001
From: Tong Li <tongli0809@gmail.com>
Date: Sun, 1 Dec 2024 16:37:29 +1100
Subject: [PATCH] staking form ui refinement

---
 .../PersonalBalance/PersonalBalance.tsx       |   2 +-
 .../FinalityProviders/FinalityProviders.tsx   |  14 +-
 .../components/Staking/Form/StakingAmount.tsx |  72 ++++++--
 .../components/Staking/Form/StakingFee.tsx    |  77 ++++++---
 src/app/components/Staking/Staking.tsx        | 155 +++++++++++-------
 src/app/components/Stats/Stats.tsx            |   2 +-
 6 files changed, 213 insertions(+), 109 deletions(-)

diff --git a/src/app/components/PersonalBalance/PersonalBalance.tsx b/src/app/components/PersonalBalance/PersonalBalance.tsx
index 333456bb..2db42087 100644
--- a/src/app/components/PersonalBalance/PersonalBalance.tsx
+++ b/src/app/components/PersonalBalance/PersonalBalance.tsx
@@ -5,7 +5,7 @@ import { StatItem } from "../Stats/StatItem";
 export function PersonalBalance() {
   return (
     <div className="flex flex-col gap-4 p-1 xl:justify-between mb-12">
-      <Heading variant="h5" className="text-primary-dark md:text-4xl">
+      <Heading variant="h4" 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">
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
index bbfcb0cc..81120a20 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
@@ -1,3 +1,4 @@
+import { Heading, Text } from "@babylonlabs-io/bbn-core-ui";
 import { useEffect } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 
@@ -43,10 +44,13 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
   }
 
   return (
-    <>
-      <p>
-        <strong>Step-1:</strong> Select a finality provider
-      </p>
+    <div className="flex flex-col">
+      <Heading variant="h5" className="text-primary-dark">
+        Step 1
+      </Heading>
+      <Text variant="body1" className="text-primary-light">
+        Select a Finality Provider
+      </Text>
       <div className="flex gap-3">
         <FinalityProviderSearch
           searchValue={searchValue}
@@ -95,6 +99,6 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
           ))}
         </InfiniteScroll>
       </div>
-    </>
+    </div>
   );
 };
diff --git a/src/app/components/Staking/Form/StakingAmount.tsx b/src/app/components/Staking/Form/StakingAmount.tsx
index 55a53a12..e53b0658 100644
--- a/src/app/components/Staking/Form/StakingAmount.tsx
+++ b/src/app/components/Staking/Form/StakingAmount.tsx
@@ -1,4 +1,7 @@
+import { Button, Heading, Text } from "@babylonlabs-io/bbn-core-ui";
 import { ChangeEvent, FocusEvent, useEffect, useState } from "react";
+import { FaBitcoin } from "react-icons/fa6";
+import { twJoin } from "tailwind-merge";
 
 import { getNetworkConfig } from "@/config/network.config";
 import { btcToSatoshi, satoshiToBtc } from "@/utils/btc";
@@ -118,24 +121,61 @@ export const StakingAmount: React.FC<StakingAmountProps> = ({
   return (
     <label className="form-control w-full flex-1">
       <div className="label pt-0">
-        <span className="label-text-alt text-base">Amount</span>
-        <span className="label-text-alt opacity-50">
-          min/max: {minStakeAmount}/{maxStakeAmount} {coinName}
-        </span>
+        <Heading variant="h6" className="text-xl text-primary-dark">
+          Amount
+        </Heading>
       </div>
-      <input
-        type="string"
-        className={`no-focus input input-bordered w-full ${error ? "input-error" : ""}`}
-        value={value}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        placeholder={coinName}
-      />
-      {error && (
-        <div className="my-2 min-h-[20px]">
-          <p className="text-center text-sm text-error">{error}</p>
+      <div className={"flex flex-col gap-6"}>
+        <div className="flex flex-col">
+          <div
+            className={twJoin(
+              "flex flex-col gap-2 border rounded border-primary-light p-3",
+              error ? "border-error-main" : "",
+            )}
+          >
+            <div className="flex flex-row items-center">
+              <input
+                type="string"
+                className={twJoin(
+                  "no-focus w-full bg-transparent",
+                  error ? "text-error-main" : "",
+                )}
+                value={value}
+                onChange={handleChange}
+                onBlur={handleBlur}
+              />
+              <div className="flex flex-row items-center p-1 border rounded-[100px] border-primary-light/20">
+                <FaBitcoin size={24} className="text-secondary-main" />
+                <Text variant="body1" className="text-sm px-2 py-1">
+                  BTC
+                </Text>
+              </div>
+            </div>
+            <div className="flex flex-row items-center justify-between text-primary-light">
+              <Text variant="body1" className="text-xs">
+                $90,000.42
+              </Text>
+              <div className="flex flex-row items-center gap-2">
+                <Text variant="body1" className="text-xs">
+                  10.0000 BTC
+                </Text>
+                <Button
+                  size="small"
+                  color="secondary"
+                  className="bg-primary-contrast text-xs h-5"
+                >
+                  Max
+                </Button>
+              </div>
+            </div>
+          </div>
+          {error && (
+            <div className="my-2 min-h-[20px]">
+              <p className="text-center text-sm text-error-main">{error}</p>
+            </div>
+          )}
         </div>
-      )}
+      </div>
     </label>
   );
 };
diff --git a/src/app/components/Staking/Form/StakingFee.tsx b/src/app/components/Staking/Form/StakingFee.tsx
index df994a27..e567b307 100644
--- a/src/app/components/Staking/Form/StakingFee.tsx
+++ b/src/app/components/Staking/Form/StakingFee.tsx
@@ -1,4 +1,6 @@
+import { Button, Text } from "@babylonlabs-io/bbn-core-ui";
 import { useEffect, useState } from "react";
+import { FaPen } from "react-icons/fa6";
 
 import { getNetworkConfig } from "@/config/network.config";
 import { satoshiToBtc } from "@/utils/btc";
@@ -48,31 +50,58 @@ export const StakingFee: React.FC<StakingFeeProps> = ({
 
   const defaultModeRender = () => {
     return (
-      <div className="flex flex-col justify-center gap-1 items-center">
-        <div className="min-h-8 flex justify-center flex-col items-center">
-          {mempoolFeeRates ? (
-            <div>
-              <p>
-                Recommended fee rate: <strong>{defaultFeeRate} sats/vB</strong>
-              </p>
-              <p>
-                Transaction fee amount:{" "}
-                <strong>
-                  {satoshiToBtc(stakingFeeSat)} {coinName}
-                </strong>
-              </p>
+      <div className="flex flex-col gap-6">
+        {mempoolFeeRates ? (
+          <>
+            <div className="flex flex-row items-center justify-between text-primary-dark">
+              <Text variant="body1">Network Fee Rate</Text>
+              <div className="flex flex-row gap-2 items-center">
+                <Text variant="body1">25 Sats/vB</Text>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  className="pl-1 w-6 h-6"
+                >
+                  <FaPen size={16} />
+                </Button>
+              </div>
             </div>
-          ) : (
-            <LoadingSmall text="Loading recommended fee rate..." />
-          )}
-        </div>
-        <button
-          className="btn btn-sm btn-link no-underline"
-          onClick={() => setCustomMode(true)}
-          disabled={!mempoolFeeRates || !stakingFeeSat}
-        >
-          Use Custom
-        </button>
+            <div className="flex flex-row items-start justify-between text-primary-dark">
+              <Text variant="body1">Bitcoin Network Fee</Text>
+              <div className="flex flex-col items-end justify-center">
+                <Text variant="body1">0.00000025</Text>
+                <Text variant="body1" className="text-primary-light text-sm">
+                  $0.02
+                </Text>
+              </div>
+            </div>
+            <div className="flex flex-row items-start justify-between text-primary-dark">
+              <Text variant="body1">Babylon Network Fee</Text>
+              <div className="flex flex-col items-end justify-center">
+                <Text variant="body1">2.0000</Text>
+                <Text variant="body1" className="text-primary-light text-sm">
+                  $0.02
+                </Text>
+              </div>
+            </div>
+            <div className="divider mx-0 my-0" />
+            <div className="flex flex-row items-start justify-between text-primary-dark">
+              <Text variant="body1" className="font-bold">
+                Total
+              </Text>
+              <div className="flex flex-col items-end justify-center">
+                <Text variant="body1" className="font-bold">
+                  0.004
+                </Text>
+                <Text variant="body1" className="text-primary-light text-sm">
+                  $370.03
+                </Text>
+              </div>
+            </div>
+          </>
+        ) : (
+          <LoadingSmall text="Loading recommended fee rate..." />
+        )}
       </div>
     );
   };
diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx
index 834cdc24..a3b9ecfb 100644
--- a/src/app/components/Staking/Staking.tsx
+++ b/src/app/components/Staking/Staking.tsx
@@ -1,5 +1,7 @@
+import { Button, Heading, Text } from "@babylonlabs-io/bbn-core-ui";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useMemo, useState } from "react";
+import { MdErrorOutline } from "react-icons/md";
 import { Tooltip } from "react-tooltip";
 import { useLocalStorage } from "usehooks-ts";
 
@@ -29,7 +31,6 @@ import { PreviewModal } from "../Modals/PreviewModal";
 import { FinalityProviders } from "./FinalityProviders/FinalityProviders";
 import { StakingAmount } from "./Form/StakingAmount";
 import { StakingFee } from "./Form/StakingFee";
-import { StakingTime } from "./Form/StakingTime";
 import { Message } from "./Form/States/Message";
 import { WalletNotConnected } from "./Form/States/WalletNotConnected";
 import apiNotAvailable from "./Form/States/api-not-available.svg";
@@ -452,85 +453,115 @@ export const Staking = () => {
         signReady && feeRate && availableUTXOs && stakingAmountSat;
 
       return (
-        <>
-          <p>
-            <strong>Step-2:</strong> Set up staking terms
-          </p>
-          <div className="flex flex-1 flex-col">
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-4">
+            <Heading variant="h5" className="text-primary-dark">
+              Step 2
+            </Heading>
+            <Text variant="body1" className="text-primary-light">
+              Set Staking Amount
+            </Text>
+            <div className="rounded bg-[#F9F9F9] flex flex-row items-start justify-between py-2 px-4 text-primary-light">
+              <div className="py-2 pr-3">
+                <MdErrorOutline size={22} />
+              </div>
+              <div className="flex flex-col gap-1 grow">
+                <Text
+                  variant="subtitle1"
+                  className="font-medium text-primary-dark"
+                >
+                  Info
+                </Text>
+                <Text variant="body1">
+                  You can unbond and withdraw your stake anytime with an
+                  unbonding time of 7 days.
+                </Text>
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-secondary-main hover:text-primary-main"
+                >
+                  Learn More
+                </a>
+              </div>
+            </div>
             <div className="flex flex-1 flex-col">
-              <StakingTime
-                minStakingTimeBlocks={minStakingTimeBlocks}
-                maxStakingTimeBlocks={maxStakingTimeBlocks}
-                unbondingTimeBlocks={unbondingTime}
-                onStakingTimeBlocksChange={handleStakingTimeBlocksChange}
-                reset={resetFormInputs}
-              />
-              <StakingAmount
-                minStakingAmountSat={minStakingAmountSat}
-                maxStakingAmountSat={maxStakingAmountSat}
-                btcWalletBalanceSat={btcWalletBalanceSat}
-                onStakingAmountSatChange={handleStakingAmountSatChange}
-                reset={resetFormInputs}
-              />
-              {signReady && (
-                <StakingFee
-                  mempoolFeeRates={mempoolFeeRates}
-                  stakingFeeSat={stakingFeeSat}
-                  selectedFeeRate={selectedFeeRate}
-                  onSelectedFeeRateChange={setSelectedFeeRate}
+              <div className="flex flex-1 flex-col">
+                <StakingAmount
+                  minStakingAmountSat={minStakingAmountSat}
+                  maxStakingAmountSat={maxStakingAmountSat}
+                  btcWalletBalanceSat={btcWalletBalanceSat}
+                  onStakingAmountSatChange={handleStakingAmountSatChange}
                   reset={resetFormInputs}
                 />
+                {signReady && (
+                  <StakingFee
+                    mempoolFeeRates={mempoolFeeRates}
+                    stakingFeeSat={stakingFeeSat}
+                    selectedFeeRate={selectedFeeRate}
+                    onSelectedFeeRateChange={setSelectedFeeRate}
+                    reset={resetFormInputs}
+                  />
+                )}
+              </div>
+              <span
+                className="cursor-pointer text-xs"
+                data-tooltip-id="tooltip-staking-preview"
+                data-tooltip-content={signNotReadyReason}
+                data-tooltip-place="top"
+              >
+                <Button
+                  size="large"
+                  fluid={true}
+                  disabled={!previewReady}
+                  onClick={() => setPreviewModalOpen(true)}
+                >
+                  Preview
+                </Button>
+                <Tooltip
+                  id="tooltip-staking-preview"
+                  className="tooltip-wrap"
+                />
+              </span>
+              {previewReady && (
+                <PreviewModal
+                  isOpen={previewModalOpen}
+                  onClose={handlePreviewModalClose}
+                  onSign={handleDelegationEoiCreation}
+                  finalityProvider={finalityProvider?.description.moniker}
+                  finalityProviderAvatar={
+                    finalityProvider?.description.identity
+                  }
+                  stakingAmountSat={stakingAmountSat}
+                  stakingTimeBlocks={stakingTimeBlocksWithFixed}
+                  stakingFeeSat={stakingFeeSat}
+                  feeRate={feeRate}
+                  unbondingFeeSat={unbondingFeeSat}
+                  awaitingWalletResponse={awaitingWalletResponse}
+                />
               )}
             </div>
-            <span
-              className="cursor-pointer text-xs"
-              data-tooltip-id="tooltip-staking-preview"
-              data-tooltip-content={signNotReadyReason}
-              data-tooltip-place="top"
-            >
-              <button
-                className="btn-primary btn mt-2 w-full"
-                disabled={!previewReady}
-                onClick={() => setPreviewModalOpen(true)}
-              >
-                Preview
-              </button>
-              <Tooltip id="tooltip-staking-preview" className="tooltip-wrap" />
-            </span>
-            {previewReady && (
-              <PreviewModal
-                isOpen={previewModalOpen}
-                onClose={handlePreviewModalClose}
-                onSign={handleDelegationEoiCreation}
-                finalityProvider={finalityProvider?.description.moniker}
-                finalityProviderAvatar={finalityProvider?.description.identity}
-                stakingAmountSat={stakingAmountSat}
-                stakingTimeBlocks={stakingTimeBlocksWithFixed}
-                stakingFeeSat={stakingFeeSat}
-                feeRate={feeRate}
-                unbondingFeeSat={unbondingFeeSat}
-                awaitingWalletResponse={awaitingWalletResponse}
-              />
-            )}
           </div>
-        </>
+        </div>
       );
     }
   };
 
   return (
-    <div className="card flex flex-col gap-2 bg-base-300 p-4 shadow-sm lg:flex-1">
-      <h3 className="mb-4 font-bold">Staking</h3>
+    <div className="card flex flex-col gap-2 p-4 lg:flex-1">
+      <Heading variant="h4" className="text-primary-dark md:text-4xl">
+        Bitcoin Staking
+      </Heading>
       <div className="flex flex-col gap-4 lg:flex-row">
-        <div className="flex flex-1 flex-col gap-4 lg:basis-3/5 xl:basis-2/3">
+        <div className="flex flex-1 flex-col gap-4 lg:basis-3/5 xl:basis-2/3 p-6 rounded border bg-secondary-contrast border-primary-light/20">
           <FinalityProviders
             onFinalityProvidersLoad={setFinalityProviders}
             selectedFinalityProvider={finalityProvider}
             onFinalityProviderChange={handleChooseFinalityProvider}
           />
         </div>
-        <div className="divider m-0 lg:divider-horizontal lg:m-0" />
-        <div className="flex flex-1 flex-col gap-4 lg:basis-2/5 xl:basis-1/3">
+        <div className="flex flex-1 flex-col gap-4 lg:basis-2/5 xl:basis-1/3 p-6 rounded border bg-secondary-contrast border-primary-light/20">
           {renderStakingForm()}
         </div>
       </div>
diff --git a/src/app/components/Stats/Stats.tsx b/src/app/components/Stats/Stats.tsx
index fa77d464..7ee763d4 100644
--- a/src/app/components/Stats/Stats.tsx
+++ b/src/app/components/Stats/Stats.tsx
@@ -26,7 +26,7 @@ export const Stats = memo(() => {
 
   return (
     <div className="flex flex-col gap-4 p-1 xl:justify-between mb-12">
-      <Heading variant="h5" className="text-primary-contrast md:text-4xl">
+      <Heading variant="h4" 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">