feature: Preview Unbonding fee

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.2.35",
+  "version": "0.2.36",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/components/Modals/PreviewModal.tsx

@@ -18,6 +18,7 @@ interface PreviewModalProps {
   feeRate: number;
   unbondingTimeBlocks: number;
   confirmationDepth: number;
+  unbondingFeeSat: number;
 }
 
 export const PreviewModal: React.FC<PreviewModalProps> = ({
@@ -31,6 +32,7 @@ export const PreviewModal: React.FC<PreviewModalProps> = ({
   stakingFeeSat,
   feeRate,
   confirmationDepth,
+  unbondingFeeSat,
 }) => {
   const cardStyles =
     "card border bg-base-300 p-4 text-sm dark:border-0 dark:bg-base-200";
@@ -76,7 +78,7 @@ export const PreviewModal: React.FC<PreviewModalProps> = ({
             <p className="text-xs dark:text-neutral-content">Term</p>
             <p>{blocksToDisplayTime(stakingTimeBlocks)}</p>
           </div>
-          <div className={`${cardStyles} basis-4/5`}>
+          <div className={`${cardStyles} basis-3/5`}>
             <p className="text-xs dark:text-neutral-content">
               On-demand unbonding
             </p>
@@ -85,12 +87,20 @@ export const PreviewModal: React.FC<PreviewModalProps> = ({
               time)
             </p>
           </div>
+          <div className={`${cardStyles} basis-1/5`}>
+            <p className="text-xs dark:text-neutral-content">Unbonding fee</p>
+            <p>{`${maxDecimals(satoshiToBtc(unbondingFeeSat), 8)} ${coinName}`}</p>
+          </div>
         </div>
         <h4 className="text-center text-base">Attention!</h4>
         <p className="dark:text-neutral-content">
           1. Your stake may &quot;overflow&quot; the staking TVL cap and need to
-          be unbonded and withdrawn, which will cost you extra transaction fees.
-          So please stake wisely.
+          be unbonded and withdrawn, which will cost you {coinName} transaction
+          fees. So please stake wisely. Unbonding will cost you a static
+          transaction fee of{" "}
+          <strong>{`${maxDecimals(satoshiToBtc(unbondingFeeSat), 8)} ${coinName}`}</strong>
+          , while the withdrawal fee depends on network conditions. All fees go
+          to the {coinName} miners.
         </p>
         <p className="dark:text-neutral-content">
           2. No third party possesses your staked {coinName}. You are the only

src/app/components/Staking/Staking.tsx

@@ -579,6 +579,7 @@ export const Staking: React.FC<StakingProps> = ({
         maxStakingTimeBlocks,
         unbondingTime,
         confirmationDepth,
+        unbondingFeeSat,
       } = stakingParams;
 
       // Staking time is fixed
@@ -664,6 +665,7 @@ export const Staking: React.FC<StakingProps> = ({
                 confirmationDepth={confirmationDepth}
                 feeRate={feeRate}
                 unbondingTimeBlocks={unbondingTime}
+                unbondingFeeSat={unbondingFeeSat}
               />
             )}
           </div>