[Issue-219-220][Story Odyssey] refactor code

Koniverse · Dec 6, 2024 · 2bfd3e6 · 2bfd3e6
1 parent ecb2b54
commit 2bfd3e6
Showing 1 changed file with 18 additions and 24 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Home/index.tsx b/packages/extension-koni-ui/src/Popup/Home/index.tsx
@@ -44,7 +44,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const [mintingLog, setMintingLog] = useState<NftMintingLog | undefined>();
-  const [isShowPopupMintFailed, setIsShowPopupMintFailed] = useLocalStorage<number[]>(CONFIRM_SHOW_MINTING_FAILED_MODAL, []);
+  const [mintFailedLogIds, setMintFailedLogIds] = useLocalStorage<number[]>(CONFIRM_SHOW_MINTING_FAILED_MODAL, []);
 
   const banners = useGetBannerByScreen('home');
 
@@ -92,6 +92,17 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   }, [closeAddRewardsModal]);
 
   const handleMintingFailedModal = useCallback(() => {
+    const handleConfirmOrCancel = () => {
+      setMintFailedLogIds((prevIds) => {
+        if (mintingLog?.id && !prevIds.includes(mintingLog.id)) {
+          return [...prevIds, mintingLog.id];
+        }
+
+        return prevIds;
+      });
+      alertModal.close();
+    };
+
     alertModal.open({
       className: 'general-confirmation-modal modal-revert-header',
       title: t('Badge minting failed'),
@@ -107,34 +118,17 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
         icon: CheckCircle,
         iconWeight: 'fill',
         text: t('I understand'),
-        onClick: () => {
-          setIsShowPopupMintFailed((prevIds) => {
-            if (!!mintingLog?.id && !prevIds.includes(mintingLog.id)) {
-              return [...prevIds, mintingLog.id];
-            }
-
-            return prevIds;
-          });
-          alertModal.close();
-        }
+        onClick: handleConfirmOrCancel
       },
-      onCancel: () => {
-        setIsShowPopupMintFailed((prevIds) => {
-          if (!!mintingLog?.id && !prevIds.includes(mintingLog.id)) {
-            return [...prevIds, mintingLog.id];
-          }
-
-          return prevIds;
-        });
-        alertModal.close();
-      }
+      onCancel: handleConfirmOrCancel
     });
-  }, [alertModal, mintingLog, setIsShowPopupMintFailed, t]);
+  }, [alertModal, mintingLog, setMintFailedLogIds, t]);
 
   useEffect(() => {
     const fetchMintingLog = async () => {
       try {
         const mintingLog = await apiSDK.getNftMintingLog();
+
         setMintingLog(mintingLog);
       } catch (error) {
         console.error('Error fetching minting log:', error);
@@ -145,10 +139,10 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   }, []);
 
   useEffect(() => {
-    if (mintingLog?.notify && !isShowPopupMintFailed.includes(mintingLog.id)) {
+    if (mintingLog?.notify && !mintFailedLogIds.includes(mintingLog.id)) {
       handleMintingFailedModal();
     }
-  }, [handleMintingFailedModal, isShowPopupMintFailed, mintingLog?.notify, navigate, setIsShowPopupMintFailed]);
+  }, [handleMintingFailedModal, mintFailedLogIds, mintingLog?.id, mintingLog?.notify, navigate]);
 
   useEffect(() => {
     const accountSub = apiSDK.subscribeAccount()