From bd226057c664e98d7e3cffc7735bcd71074d5835 Mon Sep 17 00:00:00 2001
From: David Totraev <totraev@gmail.com>
Date: Thu, 24 Oct 2024 19:29:38 +0500
Subject: [PATCH] feat(phase-2): update preview modal

---
 src/app/components/Modals/PreviewModal.tsx | 28 +++++++++-------------
 src/app/components/Staking/Staking.tsx     |  1 -
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/app/components/Modals/PreviewModal.tsx b/src/app/components/Modals/PreviewModal.tsx
index 6823452d..f8446150 100644
--- 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
index 3d546434..d3db7d79 100644
--- 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}
               />