Merge remote-tracking branch 'refs/remotes/origin/koni/issue-219v2' i…

…nto story-protocol-od-dev
Koniverse · Dec 4, 2024 · 2610e39 · 2610e39
2 parents 5eaeef4 + 2bfd3e6
commit 2610e39
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 26 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(CONFIRM_SHOW_MINTING_FAILED_MODAL, 'nonConfirmed');
+  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,17 +118,11 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
         icon: CheckCircle,
         iconWeight: 'fill',
         text: t('I understand'),
-        onClick: () => {
-          setIsShowPopupMintFailed('confirmed');
-          alertModal.close();
-        }
+        onClick: handleConfirmOrCancel
       },
-      onCancel: () => {
-        setIsShowPopupMintFailed('confirmed');
-        alertModal.close();
-      }
+      onCancel: handleConfirmOrCancel
     });
-  }, [alertModal, setIsShowPopupMintFailed, t]);
+  }, [alertModal, mintingLog, setMintFailedLogIds, t]);
 
   useEffect(() => {
     const fetchMintingLog = async () => {
@@ -134,10 +139,10 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   }, []);
 
   useEffect(() => {
-    if (mintingLog?.notify && isShowPopupMintFailed.includes('nonConfirmed')) {
+    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()

diff --git a/packages/extension-koni-ui/src/components/Mint/MintNftDetail/index.tsx b/packages/extension-koni-ui/src/components/Mint/MintNftDetail/index.tsx
@@ -25,6 +25,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from 're
 import { Trans } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import styled, { useTheme } from 'styled-components';
+import {isHex} from "@polkadot/util";
 
 type Props = ThemeProps & {
   airdropNftInfo: IAirdropNftMinting,
@@ -67,6 +68,15 @@ const Component: React.FC<Props> = (props: Props) => {
     apiSDK.getNftMintingLog().catch(console.error);
   }, []);
 
+  useEffect(() => {
+    if (mintingLog?.status === 'success') {
+      onSuccess(mintingLog.address);
+      setIsLoading(false);
+    } else if (mintingLog?.status === 'submitted') {
+      setIsLoading(true);
+    }
+  }, [mintingLog, onSuccess]);
+
   const tabGroupItems = useMemo<TabGroupItemType[]>(() => {
     return [
       {
@@ -245,19 +255,6 @@ const Component: React.FC<Props> = (props: Props) => {
   const { handleSimpleConfirmModal: handleInSufficientBalanceModal } = useConfirmModal(inSufficientBalanceProps);
   const { handleSimpleConfirmModal: handleBadgeAlreadyMintedModal } = useConfirmModal(badgeAlreadyMintedProps);
 
-  useEffect(() => {
-    if (mintingLog?.status === 'success') {
-      onSuccess(mintingLog.address);
-      setIsLoading(false);
-    } else if (mintingLog?.status === 'submitted') {
-      setIsLoading(true);
-    } else if (mintingLog?.status === 'failed') {
-      if (mintingLog.notify) {
-        handleFailedToMintModal().then(goHome).catch(console.error);
-      }
-    }
-  }, [goHome, handleFailedToMintModal, mintingLog, onSuccess]);
-
   const handleExistedLinkedAddressModal = useCallback((address: string) => {
     alertModal.open({
       className: 'general-confirmation-modal modal-revert-header',
@@ -355,7 +352,7 @@ const Component: React.FC<Props> = (props: Props) => {
         handleInSufficientBalanceModal().then(noop).catch(console.error);
       } else if (transaction.errors.some((e) => e.message.toLowerCase().includes('Rejected by user'.toLowerCase()))) {
         // do nothing
-      } else if (transaction.errors.length) {
+      } else if (transaction.errors.length || !isHex(transaction?.extrinsicHash)) {
         handleFailedToMintModal().then(goHome).catch(console.error);
       } else {
         await apiSDK.nftMintingStart(transaction?.extrinsicHash);