From 2c1d1e175b8485d18e8f1b5c8497235193eb3f8d Mon Sep 17 00:00:00 2001
From: Crypto Minion <154598612+jrwbabylonlab@users.noreply.github.com>
Date: Tue, 3 Dec 2024 16:48:39 +1100
Subject: [PATCH] Revert "staking form ui refinement (#421)"

This reverts commit 38ab9e1935e9d1900cbb86e63341cff8d00fb614.
---
 .../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, 109 insertions(+), 213 deletions(-)

diff --git a/src/app/components/PersonalBalance/PersonalBalance.tsx b/src/app/components/PersonalBalance/PersonalBalance.tsx
index 2db42087..333456bb 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="h4" className="text-primary-dark md:text-4xl">
+      <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">
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
index 81120a20..bbfcb0cc 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
@@ -1,4 +1,3 @@
-import { Heading, Text } from "@babylonlabs-io/bbn-core-ui";
 import { useEffect } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 
@@ -44,13 +43,10 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
   }
 
   return (
-    <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>
+    <>
+      <p>
+        <strong>Step-1:</strong> Select a finality provider
+      </p>
       <div className="flex gap-3">
         <FinalityProviderSearch
           searchValue={searchValue}
@@ -99,6 +95,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 eb91320a..55a53a12 100644
--- a/src/app/components/Staking/Form/StakingAmount.tsx
+++ b/src/app/components/Staking/Form/StakingAmount.tsx
@@ -1,7 +1,4 @@
-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";
@@ -121,61 +118,24 @@ export const StakingAmount: React.FC<StakingAmountProps> = ({
   return (
     <label className="form-control w-full flex-1">
       <div className="label pt-0">
-        <Heading variant="h6" className="text-xl text-primary-dark">
-          Amount
-        </Heading>
+        <span className="label-text-alt text-base">Amount</span>
+        <span className="label-text-alt opacity-50">
+          min/max: {minStakeAmount}/{maxStakeAmount} {coinName}
+        </span>
       </div>
-      <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="number"
-                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>
-          )}
+      <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>
-      </div>
+      )}
     </label>
   );
 };
diff --git a/src/app/components/Staking/Form/StakingFee.tsx b/src/app/components/Staking/Form/StakingFee.tsx
index 1739d1de..df994a27 100644
--- a/src/app/components/Staking/Form/StakingFee.tsx
+++ b/src/app/components/Staking/Form/StakingFee.tsx
@@ -1,6 +1,4 @@
-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";
@@ -50,58 +48,31 @@ export const StakingFee: React.FC<StakingFeeProps> = ({
 
   const defaultModeRender = () => {
     return (
-      <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">{defaultFeeRate} Sats/vB</Text>
-                <Button
-                  size="small"
-                  variant="outlined"
-                  className="pl-1 w-6 h-6"
-                >
-                  <FaPen size={16} />
-                </Button>
-              </div>
-            </div>
-            <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 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>
-          </>
-        ) : (
-          <LoadingSmall text="Loading recommended fee rate..." />
-        )}
+          ) : (
+            <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>
     );
   };
diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx
index a3b9ecfb..834cdc24 100644
--- a/src/app/components/Staking/Staking.tsx
+++ b/src/app/components/Staking/Staking.tsx
@@ -1,7 +1,5 @@
-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";
 
@@ -31,6 +29,7 @@ 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";
@@ -453,115 +452,85 @@ export const Staking = () => {
         signReady && feeRate && availableUTXOs && stakingAmountSat;
 
       return (
-        <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>
+        <>
+          <p>
+            <strong>Step-2:</strong> Set up staking terms
+          </p>
+          <div className="flex flex-1 flex-col">
             <div className="flex flex-1 flex-col">
-              <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}
+              <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}
-                  feeRate={feeRate}
-                  unbondingFeeSat={unbondingFeeSat}
-                  awaitingWalletResponse={awaitingWalletResponse}
+                  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
+                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 p-4 lg:flex-1">
-      <Heading variant="h4" className="text-primary-dark md:text-4xl">
-        Bitcoin Staking
-      </Heading>
+    <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="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 p-6 rounded border bg-secondary-contrast border-primary-light/20">
+        <div className="flex flex-1 flex-col gap-4 lg:basis-3/5 xl:basis-2/3">
           <FinalityProviders
             onFinalityProvidersLoad={setFinalityProviders}
             selectedFinalityProvider={finalityProvider}
             onFinalityProviderChange={handleChooseFinalityProvider}
           />
         </div>
-        <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">
+        <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">
           {renderStakingForm()}
         </div>
       </div>
diff --git a/src/app/components/Stats/Stats.tsx b/src/app/components/Stats/Stats.tsx
index 7ee763d4..fa77d464 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="h4" className="text-primary-contrast md:text-4xl">
+      <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">