feat(phase-2): update preview modal

babylonlabs-io · Oct 24, 2024 · bd22605 · bd22605
1 parent aeb90ce
commit bd22605
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 18 deletions.
diff --git a/src/app/components/Modals/PreviewModal.tsx b/src/app/components/Modals/PreviewModal.tsx
@@ -1,4 +1,5 @@
 import { IoMdClose } from "react-icons/io";
+import { twJoin } from "tailwind-merge";
 
 import { getNetworkConfig } from "@/config/network.config";
 import { blocksToDisplayTime } from "@/utils/blocksToDisplayTime";
@@ -18,7 +19,6 @@ interface PreviewModalProps {
   stakingTimeBlocks: number;
   stakingFeeSat: number;
   feeRate: number;
-  unbondingTimeBlocks: number;
   confirmationDepth: number;
   unbondingFeeSat: number;
   awaitingWalletResponse: boolean;
@@ -30,7 +30,6 @@ export const PreviewModal: React.FC<PreviewModalProps> = ({
   finalityProvider,
   stakingAmountSat,
   stakingTimeBlocks,
-  unbondingTimeBlocks,
   onSign,
   stakingFeeSat,
   feeRate,
@@ -63,42 +62,37 @@ export const PreviewModal: React.FC<PreviewModalProps> = ({
       </div>
       <div className="flex flex-col gap-4 text-sm">
         <div className="flex flex-col gap-4 md:flex-row">
-          <div className={`${cardStyles} flex-1`}>
+          <div className={twJoin(cardStyles, "flex-1")}>
             <p className="text-xs dark:text-neutral-content">
               Finality Provider
             </p>
             <p>{finalityProvider || "-"}</p>
           </div>
-          <div className={`${cardStyles} flex-1`}>
+          <div className={twJoin(cardStyles, "flex-1")}>
             <p className="text-xs dark:text-neutral-content">Stake Amount</p>
             <p>{`${maxDecimals(satoshiToBtc(stakingAmountSat), 8)} ${coinName}`}</p>
           </div>
         </div>
         <div className="flex flex-col gap-4 md:flex-row">
-          <div className={`${cardStyles} flex-1`}>
+          <div className={twJoin(cardStyles, "flex-1")}>
             <p className="text-xs dark:text-neutral-content">Fee rate</p>
             <p>{feeRate} sat/vB</p>
           </div>
-          <div className={`${cardStyles} flex-1`}>
+          <div className={twJoin(cardStyles, "flex-1")}>
             <p className="text-xs dark:text-neutral-content">Transaction fee</p>
             <p>{`${maxDecimals(satoshiToBtc(stakingFeeSat), 8)} ${coinName}`}</p>
           </div>
         </div>
         <div className="flex flex-col gap-4 md:flex-row">
-          <div className={`${cardStyles} basis-1/5`}>
+          <div className={twJoin(cardStyles, "basis-1/5")}>
             <p className="text-xs dark:text-neutral-content">Term</p>
             <p>{blocksToDisplayTime(stakingTimeBlocks)}</p>
           </div>
-          <div className={`${cardStyles} basis-3/5`}>
-            <p className="text-xs dark:text-neutral-content">
-              On-demand unbonding
-            </p>
-            <p>
-              Enabled ({blocksToDisplayTime(unbondingTimeBlocks)} unbonding
-              time)
-            </p>
+          <div className={twJoin(cardStyles, "basis-2/5")}>
+            <p className="text-xs dark:text-neutral-content">Slashing ratio</p>
+            <p>12.3%</p>
           </div>
-          <div className={`${cardStyles} basis-1/5`}>
+          <div className={twJoin(cardStyles, "basis-2/5")}>
             <p className="text-xs dark:text-neutral-content">Unbonding fee</p>
             <p>{`${maxDecimals(satoshiToBtc(unbondingFeeSat), 8)} ${coinName}`}</p>
           </div>
@@ -139,7 +133,7 @@ export const PreviewModal: React.FC<PreviewModalProps> = ({
               Cancel
             </button>
             <button className="btn-primary btn flex-1" onClick={onSign}>
-              Stake
+              Proceed To Signing
             </button>
           </div>
         )}

diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx
@@ -622,7 +622,6 @@ export const Staking = () => {
                 stakingFeeSat={stakingFeeSat}
                 confirmationDepth={confirmationDepth}
                 feeRate={feeRate}
-                unbondingTimeBlocks={unbondingTime}
                 unbondingFeeSat={unbondingFeeSat}
                 awaitingWalletResponse={awaitingWalletResponse}
               />