From f9a1c8dabb638c4881fc44d1150ec695addf1399 Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Sat, 5 Oct 2024 16:00:55 +0700
Subject: [PATCH] remove throw error in render method

---
 .../components/Delegations/Delegations.tsx    | 28 ++++++++++++++++---
 .../components/Modals/UnbondWithdrawModal.tsx | 15 ++--------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/app/components/Delegations/Delegations.tsx b/src/app/components/Delegations/Delegations.tsx
index d7bbecf3..44650e69 100644
--- a/src/app/components/Delegations/Delegations.tsx
+++ b/src/app/components/Delegations/Delegations.tsx
@@ -1,5 +1,5 @@
 import { 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";
 
@@ -101,6 +101,12 @@ const DelegationsContent: React.FC<DelegationsProps> = ({
   const { isApiNormal, isGeoBlocked } = useHealthCheck();
   const [awaitingWalletResponse, setAwaitingWalletResponse] = useState(false);
 
+  const delegation = useMemo(
+    () =>
+      delegationsAPI.find((delegation) => delegation.stakingTxHashHex === txID),
+    [delegationsAPI, txID],
+  );
+
   const shouldShowPoints =
     isApiNormal && !isGeoBlocked && shouldDisplayPoints();
   // Local storage state for intermediate delegations (withdrawing, unbonding)
@@ -267,6 +273,21 @@ const DelegationsContent: React.FC<DelegationsProps> = ({
     });
   }, [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
     ? [...delegationsLocalStorage, ...delegationsAPI]
@@ -339,7 +360,7 @@ const DelegationsContent: React.FC<DelegationsProps> = ({
           </div>
         </>
       )}
-      {modalMode && txID && (
+      {modalMode && txID && delegation && (
         <UnbondWithdrawModal
           open={modalOpen}
           onClose={() => setModalOpen(false)}
@@ -350,8 +371,7 @@ const DelegationsContent: React.FC<DelegationsProps> = ({
           }}
           mode={modalMode}
           awaitingWalletResponse={awaitingWalletResponse}
-          delegationsAPI={delegationsAPI}
-          txID={txID}
+          delegation={delegation}
         />
       )}
     </div>
diff --git a/src/app/components/Modals/UnbondWithdrawModal.tsx b/src/app/components/Modals/UnbondWithdrawModal.tsx
index 34e1ff07..ebbf73de 100644
--- a/src/app/components/Modals/UnbondWithdrawModal.tsx
+++ b/src/app/components/Modals/UnbondWithdrawModal.tsx
@@ -22,8 +22,7 @@ interface PreviewModalProps {
   onProceed: () => void;
   mode: MODE;
   awaitingWalletResponse: boolean;
-  delegationsAPI: DelegationInterface[];
-  txID: string;
+  delegation: DelegationInterface;
 }
 
 export const UnbondWithdrawModal: React.FC<PreviewModalProps> = ({
@@ -32,8 +31,7 @@ export const UnbondWithdrawModal: React.FC<PreviewModalProps> = ({
   onProceed,
   mode,
   awaitingWalletResponse,
-  delegationsAPI,
-  txID,
+  delegation,
 }) => {
   const { coinName, networkName } = getNetworkConfig();
   const { data: allGlobalParamsVersions } = useGlobalParams();
@@ -46,15 +44,8 @@ export const UnbondWithdrawModal: React.FC<PreviewModalProps> = ({
     return currentVersion;
   };
 
-  const delegation = delegationsAPI.find(
-    (delegation) => delegation.stakingTxHashHex === txID,
-  );
-  if (!delegation) {
-    throw new Error("Delegation not found");
-  }
-
   const globalParams = getGlobalParamsForDelegation(
-    delegation.stakingTx.startHeight,
+    delegation.stakingTx.startHeight ?? 0,
   );
   const unbondingFeeSat = globalParams?.unbondingFeeSat || 0;
   const unbondingTimeBlocks = globalParams?.unbondingTime || 0;