diff --git a/packages/extension-koni-ui/src/Popup/Home/index.tsx b/packages/extension-koni-ui/src/Popup/Home/index.tsx index 5dbb0bb34f..5410362b1d 100644 --- 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 { const { t } = useTranslation(); const [mintingLog, setMintingLog] = useState(); - const [isShowPopupMintFailed, setIsShowPopupMintFailed] = useLocalStorage(CONFIRM_SHOW_MINTING_FAILED_MODAL, 'nonConfirmed'); + const [mintFailedLogIds, setMintFailedLogIds] = useLocalStorage(CONFIRM_SHOW_MINTING_FAILED_MODAL, []); const banners = useGetBannerByScreen('home'); @@ -92,6 +92,17 @@ function Component ({ className = '' }: Props): React.ReactElement { }, [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 { 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 { }, []); 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 index 3553c7a62b..e9bfade027 100644 --- 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) => { 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(() => { return [ { @@ -245,19 +255,6 @@ const Component: React.FC = (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) => { 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);