use correct height for unbonding model

package.json

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

src/app/components/Delegations/Delegations.tsx

@@ -34,7 +34,8 @@ import { Delegation } from "./Delegation";
 interface DelegationsProps {
   delegationsAPI: DelegationInterface[];
   delegationsLocalStorage: DelegationInterface[];
-  globalParamsVersion: GlobalParamsVersion;
+  currentGlobalParamsVersion: GlobalParamsVersion;
+  allGlobalParamsVersions: GlobalParamsVersion[];
   publicKeyNoCoord: string;
   btcWalletNetwork: networks.Network;
   address: string;
@@ -48,7 +49,8 @@ interface DelegationsProps {
 export const Delegations: React.FC<DelegationsProps> = ({
   delegationsAPI,
   delegationsLocalStorage,
-  globalParamsVersion,
+  currentGlobalParamsVersion,
+  allGlobalParamsVersions,
   signPsbtTx,
   pushTx,
   queryMeta,
@@ -68,7 +70,8 @@ export const Delegations: React.FC<DelegationsProps> = ({
       <DelegationsContent
         delegationsAPI={delegationsAPI}
         delegationsLocalStorage={delegationsLocalStorage}
-        globalParamsVersion={globalParamsVersion}
+        currentGlobalParamsVersion={currentGlobalParamsVersion}
+        allGlobalParamsVersions={allGlobalParamsVersions}
         signPsbtTx={signPsbtTx}
         pushTx={pushTx}
         queryMeta={queryMeta}
@@ -85,7 +88,8 @@ export const Delegations: React.FC<DelegationsProps> = ({
 const DelegationsContent: React.FC<DelegationsProps> = ({
   delegationsAPI,
   delegationsLocalStorage,
-  globalParamsVersion,
+  currentGlobalParamsVersion,
+  allGlobalParamsVersions,
   signPsbtTx,
   pushTx,
   queryMeta,
@@ -100,6 +104,9 @@ const DelegationsContent: React.FC<DelegationsProps> = ({
   const { showError } = useError();
   const { isApiNormal, isGeoBlocked } = useHealthCheck();
   const [awaitingWalletResponse, setAwaitingWalletResponse] = useState(false);
+  const [selectedDelegationHeight, setSelectedDelegationHeight] = useState<
+    number | undefined
+  >();
 
   const shouldShowPoints =
     isApiNormal && !isGeoBlocked && shouldDisplayPoints();
@@ -171,13 +178,15 @@ const DelegationsContent: React.FC<DelegationsProps> = ({
           message: error.message,
           errorState: ErrorState.UNBONDING,
         },
-        retryAction: () => handleModal(id, MODE_UNBOND),
+        retryAction: () =>
+          handleModal(id, MODE_UNBOND, selectedDelegationHeight!),
       });
     } finally {
       setModalOpen(false);
       setTxID("");
       setModalMode(undefined);
       setAwaitingWalletResponse(false);
+      setSelectedDelegationHeight(undefined);
     }
   };
 
@@ -206,20 +215,23 @@ const DelegationsContent: React.FC<DelegationsProps> = ({
           message: error.message,
           errorState: ErrorState.WITHDRAW,
         },
-        retryAction: () => handleModal(id, MODE_WITHDRAW),
+        retryAction: () =>
+          handleModal(id, MODE_WITHDRAW, selectedDelegationHeight!),
       });
     } finally {
       setModalOpen(false);
       setTxID("");
       setModalMode(undefined);
       setAwaitingWalletResponse(false);
+      setSelectedDelegationHeight(undefined);
     }
   };
 
-  const handleModal = (txID: string, mode: MODE) => {
+  const handleModal = (txID: string, mode: MODE, delegationHeight: number) => {
     setModalOpen(true);
     setTxID(txID);
     setModalMode(mode);
+    setSelectedDelegationHeight(delegationHeight);
   };
 
   useEffect(() => {
@@ -325,25 +337,34 @@ const DelegationsContent: React.FC<DelegationsProps> = ({
                     stakingValueSat={stakingValueSat}
                     stakingTxHash={stakingTxHashHex}
                     state={state}
-                    onUnbond={() => handleModal(stakingTxHashHex, MODE_UNBOND)}
+                    onUnbond={() =>
+                      handleModal(
+                        stakingTxHashHex,
+                        MODE_UNBOND,
+                        stakingTx.startHeight,
+                      )
+                    }
                     onWithdraw={() =>
-                      handleModal(stakingTxHashHex, MODE_WITHDRAW)
+                      handleModal(
+                        stakingTxHashHex,
+                        MODE_WITHDRAW,
+                        stakingTx.startHeight,
+                      )
                     }
                     intermediateState={intermediateDelegation?.state}
                     isOverflow={isOverflow}
-                    globalParamsVersion={globalParamsVersion}
+                    globalParamsVersion={currentGlobalParamsVersion}
                   />
                 );
               })}
             </InfiniteScroll>
           </div>
         </>
       )}
-
-      {modalMode && txID && (
+      {modalMode && txID && selectedDelegationHeight !== undefined && (
         <UnbondWithdrawModal
-          unbondingTimeBlocks={globalParamsVersion.unbondingTime}
-          unbondingFeeSat={globalParamsVersion.unbondingFeeSat}
+          delegationHeight={selectedDelegationHeight}
+          allGlobalParamsVersions={allGlobalParamsVersions}
           open={modalOpen}
           onClose={() => setModalOpen(false)}
           onProceed={() => {

src/app/components/Modals/UnbondWithdrawModal.tsx

@@ -1,8 +1,10 @@
 import { IoMdClose } from "react-icons/io";
 
+import { GlobalParamsVersion } from "@/app/types/globalParams";
 import { getNetworkConfig } from "@/config/network.config";
 import { blocksToDisplayTime } from "@/utils/blocksToDisplayTime";
 import { satoshiToBtc } from "@/utils/btcConversions";
+import { getCurrentGlobalParamsVersion } from "@/utils/globalParams";
 import { maxDecimals } from "@/utils/maxDecimals";
 
 import { LoadingView } from "../Loading/Loading";
@@ -14,8 +16,8 @@ export const MODE_WITHDRAW = "withdraw";
 export type MODE = typeof MODE_UNBOND | typeof MODE_WITHDRAW;
 
 interface PreviewModalProps {
-  unbondingTimeBlocks: number;
-  unbondingFeeSat: number;
+  delegationHeight: number;
+  allGlobalParamsVersions: GlobalParamsVersion[];
   open: boolean;
   onClose: (value: boolean) => void;
   onProceed: () => void;
@@ -24,8 +26,8 @@ interface PreviewModalProps {
 }
 
 export const UnbondWithdrawModal: React.FC<PreviewModalProps> = ({
-  unbondingTimeBlocks,
-  unbondingFeeSat,
+  delegationHeight,
+  allGlobalParamsVersions,
   open,
   onClose,
   onProceed,
@@ -34,6 +36,18 @@ export const UnbondWithdrawModal: React.FC<PreviewModalProps> = ({
 }) => {
   const { coinName, networkName } = getNetworkConfig();
 
+  const getGlobalParamsForDelegation = (startHeight: number) => {
+    const { currentVersion } = getCurrentGlobalParamsVersion(
+      startHeight,
+      allGlobalParamsVersions,
+    );
+    return currentVersion;
+  };
+
+  const globalParams = getGlobalParamsForDelegation(delegationHeight);
+  const unbondingFeeSat = globalParams?.unbondingFeeSat || 0;
+  const unbondingTimeBlocks = globalParams?.unbondingTime || 0;
+
   const unbondTitle = "Unbond";
 
   const unbondContent = (

src/app/page.tsx

@@ -72,6 +72,7 @@ const Home: React.FC<HomeProps> = () => {
         // so this verification should take this into account.
         currentHeight: height,
         nextBlockParams: getCurrentGlobalParamsVersion(height + 1, versions),
+        globalParams: versions, // Include the full globalParams version list
       };
     },
     refetchInterval: 60000, // 1 minute
@@ -355,9 +356,10 @@ const Home: React.FC<HomeProps> = () => {
               <Delegations
                 delegationsAPI={delegations.delegations}
                 delegationsLocalStorage={delegationsLocalStorage}
-                globalParamsVersion={
+                currentGlobalParamsVersion={
                   paramWithContext.nextBlockParams.currentVersion
                 }
+                allGlobalParamsVersions={paramWithContext.globalParams}
                 publicKeyNoCoord={publicKeyNoCoord}
                 btcWalletNetwork={btcWalletNetwork}
                 address={address}