use correct height for unbonding model (#196)

package.json

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

src/app/components/Delegations/Delegations.tsx

@@ -1,5 +1,5 @@
 import type { networks } from "bitcoinjs-lib";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { useLocalStorage } from "usehooks-ts";
 
@@ -104,16 +104,19 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
   const { showError } = useError();
   const { isApiNormal, isGeoBlocked } = useHealthCheck();
   const [awaitingWalletResponse, setAwaitingWalletResponse] = useState(false);
-  const [selectedDelegationHeight, setSelectedDelegationHeight] = useState<
-    number | undefined
-  >();
   const {
     delegations = [],
     fetchMoreDelegations,
     hasMoreDelegations,
     isLoading,
   } = useDelegationState();
 
+  const delegation = useMemo(
+    () =>
+      delegationsAPI.find((delegation) => delegation.stakingTxHashHex === txID),
+    [delegationsAPI, txID],
+  );
+
   const shouldShowPoints =
     isApiNormal && !isGeoBlocked && shouldDisplayPoints();
   // Local storage state for intermediate delegations (withdrawing, unbonding)
@@ -184,15 +187,13 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
           message: error.message,
           errorState: ErrorState.UNBONDING,
         },
-        retryAction: () =>
-          handleModal(id, MODE_UNBOND, selectedDelegationHeight!),
+        retryAction: () => handleModal(id, MODE_UNBOND),
       });
     } finally {
       setModalOpen(false);
       setTxID("");
       setModalMode(undefined);
       setAwaitingWalletResponse(false);
-      setSelectedDelegationHeight(undefined);
     }
   };
 
@@ -221,23 +222,20 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
           message: error.message,
           errorState: ErrorState.WITHDRAW,
         },
-        retryAction: () =>
-          handleModal(id, MODE_WITHDRAW, selectedDelegationHeight!),
+        retryAction: () => handleModal(id, MODE_WITHDRAW),
       });
     } finally {
       setModalOpen(false);
       setTxID("");
       setModalMode(undefined);
       setAwaitingWalletResponse(false);
-      setSelectedDelegationHeight(undefined);
     }
   };
 
-  const handleModal = (txID: string, mode: MODE, delegationHeight: number) => {
+  const handleModal = (txID: string, mode: MODE) => {
     setModalOpen(true);
     setTxID(txID);
     setModalMode(mode);
-    setSelectedDelegationHeight(delegationHeight);
   };
 
   useEffect(() => {
@@ -285,6 +283,21 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
     });
   }, [delegationsAPI, setIntermediateDelegationsLocalStorage]);
 
+  useEffect(() => {
+    if (modalOpen && !delegation) {
+      showError({
+        error: {
+          message: "Delegation not found",
+          errorState: ErrorState.SERVER_ERROR,
+        },
+        noCancel: false,
+      });
+      setModalOpen(false);
+      setTxID("");
+      setModalMode(undefined);
+    }
+  }, [modalOpen, delegation, showError]);
+
   // combine delegations from the API and local storage, prioritizing API data
   const combinedDelegationsData = delegationsAPI
     ? [...delegations, ...delegationsAPI]
@@ -343,19 +356,9 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
                     stakingValueSat={stakingValueSat}
                     stakingTxHash={stakingTxHashHex}
                     state={state}
-                    onUnbond={() =>
-                      handleModal(
-                        stakingTxHashHex,
-                        MODE_UNBOND,
-                        stakingTx.startHeight,
-                      )
-                    }
+                    onUnbond={() => handleModal(stakingTxHashHex, MODE_UNBOND)}
                     onWithdraw={() =>
-                      handleModal(
-                        stakingTxHashHex,
-                        MODE_WITHDRAW,
-                        stakingTx.startHeight,
-                      )
+                      handleModal(stakingTxHashHex, MODE_WITHDRAW)
                     }
                     intermediateState={intermediateDelegation?.state}
                     isOverflow={isOverflow}
@@ -367,7 +370,7 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
           </div>
         </>
       )}
-      {modalMode && txID && (
+      {modalMode && txID && delegation && (
         <UnbondWithdrawModal
           open={modalOpen}
           onClose={() => setModalOpen(false)}
@@ -378,6 +381,7 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
           }}
           mode={modalMode}
           awaitingWalletResponse={awaitingWalletResponse}
+          delegation={delegation}
         />
       )}
     </div>

src/app/components/Modals/UnbondWithdrawModal.tsx

@@ -1,6 +1,7 @@
 import { IoMdClose } from "react-icons/io";
 
-import { useAppState } from "@/app/state";
+import { useVersionByHeight } from "@/app/hooks/useVersions";
+import { Delegation as DelegationInterface } from "@/app/types/delegations";
 import { getNetworkConfig } from "@/config/network.config";
 import { blocksToDisplayTime } from "@/utils/blocksToDisplayTime";
 import { satoshiToBtc } from "@/utils/btcConversions";
@@ -20,6 +21,7 @@ interface PreviewModalProps {
   onProceed: () => void;
   mode: MODE;
   awaitingWalletResponse: boolean;
+  delegation: DelegationInterface;
 }
 
 export const UnbondWithdrawModal: React.FC<PreviewModalProps> = ({
@@ -28,12 +30,16 @@ export const UnbondWithdrawModal: React.FC<PreviewModalProps> = ({
   onProceed,
   mode,
   awaitingWalletResponse,
+  delegation,
 }) => {
   const { coinName, networkName } = getNetworkConfig();
-  const { currentVersion: globalParams } = useAppState();
 
-  const unbondingFeeSat = globalParams?.unbondingFeeSat || 0;
-  const unbondingTimeBlocks = globalParams?.unbondingTime || 0;
+  const { currentVersion: delegationGlobalParams } = useVersionByHeight(
+    delegation.stakingTx.startHeight ?? 0,
+  );
+
+  const unbondingFeeSat = delegationGlobalParams?.unbondingFeeSat ?? 0;
+  const unbondingTimeBlocks = delegationGlobalParams?.unbondingTime ?? 0;
 
   const unbondTitle = "Unbond";
 

src/app/hooks/useVersions.ts

@@ -1,5 +1,8 @@
+import { useMemo } from "react";
+
 import { getGlobalParams } from "@/app/api/getGlobalParams";
 import { useAPIQuery } from "@/app/hooks/useApi";
+import { getCurrentGlobalParamsVersion } from "@/utils/globalParams";
 
 export const VERSIONS_KEY = "VERSIONS";
 
@@ -12,3 +15,11 @@ export function useVersions({ enabled = true }: { enabled?: boolean } = {}) {
 
   return data;
 }
+
+export function useVersionByHeight(height: number) {
+  const { data: versions } = useVersions();
+  return useMemo(
+    () => getCurrentGlobalParamsVersion(height, versions ?? []),
+    [versions, height],
+  );
+}