From 8b3bca80a99f290c11e5b6ca57651ad27bca5af7 Mon Sep 17 00:00:00 2001 From: lw Date: Wed, 20 Nov 2024 16:38:10 +0700 Subject: [PATCH] [Issue-174] Update UX for mint screen --- .../components/Mint/MintNftDetail/index.tsx | 189 +++++++++++------- packages/webapp/public/assets/reset.css | 2 +- 2 files changed, 117 insertions(+), 74 deletions(-) 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 a292e2015a..d11a1b900b 100644 --- a/packages/extension-koni-ui/src/components/Mint/MintNftDetail/index.tsx +++ b/packages/extension-koni-ui/src/components/Mint/MintNftDetail/index.tsx @@ -148,6 +148,43 @@ const Component: React.FC = (props: Props) => { } }), [className, t, token.colorIconHover]); + const badgeAlreadyMintedProps = useMemo((): Partial => ({ + id: 'badge_already_minted', + className: CN('general-confirmation-modal', className), + title: t('Failed to mint'), + okText: t('Got it'), + okCancel: false, + content: ( +
+
{t('Oops, your badge is already minted')}
+
{t('Another Telegram ID has minted a Koni Story badge with this account. Connect to another account and try again')}
+
+ ), + icon: ( +
+ +
+ ), + closable: true, + maskClosable: true, + okButtonProps: { + icon: ( + + ), + shape: 'round' + } + }), [className, t, token.colorIconHover]); + const inSufficientBalanceProps = useMemo((): Partial => ({ id: 'in_sufficient_balance', className: CN('general-confirmation-modal', className), @@ -200,6 +237,7 @@ const Component: React.FC = (props: Props) => { const { handleSimpleConfirmModal: handleIneligibleModal } = useConfirmModal(notifyIneligibleProps); const { handleSimpleConfirmModal: handleFailedToMintModal } = useConfirmModal(failedToMintProps); const { handleSimpleConfirmModal: handleInSufficientBalanceModal } = useConfirmModal(inSufficientBalanceProps); + const { handleSimpleConfirmModal: handleBadgeAlreadyMintedModal } = useConfirmModal(badgeAlreadyMintedProps); const onSelectTab = useCallback((value: string) => { setSelectedTab(value); @@ -231,30 +269,34 @@ const Component: React.FC = (props: Props) => { try { setIsLoading(true); - const isEligible = await new Promise((resolve) => { - if (!address) { - resolve(false); + const handleIneligible = () => { + handleIneligibleModal().then(goHome).catch(console.error); + setIsLoading(false); + }; + + try { + const { inWhiteList, mintedNft } = await apiSDK.nftMintingCheckEligible(address); + + if (!inWhiteList) { + handleIneligible(); + + return; } - apiSDK - .nftMintingCheckEligible(address) - .then((rs) => { - resolve(!rs.mintedNft && rs.inWhiteList); - }) - .catch((error: Error) => { - console.error('Error fetching eligibility:', error); - resolve(false); - }); - }); + if (mintedNft) { + handleBadgeAlreadyMintedModal().catch(console.error); + setIsLoading(false); - if (!isEligible) { - handleIneligibleModal().then(goHome).catch(console.error); - setIsLoading(false); + return; + } + } catch (e) { + console.error('Error fetching eligibility:', e); + handleIneligible(); return; } - const { signature } = await apiSDK.getSignatureMintNft(address); + const { signature } = await apiSDK.nftMintingRequestSignature(address); const transaction = await odysseyMintNft({ address, chain: 'storyOdyssey_testnet', signature }); @@ -279,7 +321,7 @@ const Component: React.FC = (props: Props) => { } setIsLoading(false); - }, [handleIneligibleModal, goHome, handleInSufficientBalanceModal, handleFailedToMintModal, onSuccess, notify]); + }, [handleIneligibleModal, goHome, handleBadgeAlreadyMintedModal, handleInSufficientBalanceModal, handleFailedToMintModal, onSuccess, notify]); const onPreMint = useCallback(() => { const getAddress = new Promise((resolve, reject) => { @@ -377,7 +419,7 @@ const Component: React.FC = (props: Props) => { return ( <> -
+
= (props: Props) => {
{renderButton()} -
@@ -422,72 +463,74 @@ const Component: React.FC = (props: Props) => { const MintNftDetail = styled(Component)(({ theme: { extendToken, token } }: ThemeProps) => { return ({ - backgroundColor: extendToken.colorBgSecondary1, - borderRadius: 20, - display: 'flex', - flexDirection: 'column', - justifyContent: 'space-between', - flex: 1, - overflow: 'hidden', - - '.ant-sw-screen-layout-body-inner': { - paddingLeft: token.paddingXS, - paddingRight: token.paddingXS, + '&.-mint-nft-detail': { + backgroundColor: extendToken.colorBgSecondary1, + borderRadius: 20, display: 'flex', - flexDirection: 'column' - }, - - '.tab-group-wrapper': { - paddingLeft: 6, - paddingRight: 6, - paddingTop: token.paddingSM, - paddingBottom: token.paddingSM - }, + flexDirection: 'column', + justifyContent: 'space-between', + flex: 1, + overflow: 'hidden', - '.tab-group': { - backgroundColor: 'transparent', + '.ant-sw-screen-layout-body-inner': { + paddingLeft: token.paddingXS, + paddingRight: token.paddingXS, + display: 'flex', + flexDirection: 'column' + }, - '.__tab-item': { - borderColor: 'transparent' + '.tab-group-wrapper': { + paddingLeft: 6, + paddingRight: 6, + paddingTop: token.paddingSM, + paddingBottom: token.paddingSM }, - '.__tab-item.-disabled': { - opacity: 0.4 - } - }, + '.tab-group': { + backgroundColor: 'transparent', - '.__link': { - color: token.colorSuccess, - textDecoration: 'underline' - }, + '.__tab-item': { + borderColor: 'transparent' + }, - '.tab-content': { - flex: 1, - overflow: 'auto' - }, + '.__tab-item.-disabled': { + opacity: 0.4 + } + }, - '.header-part': { - marginBottom: token.margin - }, + '.__link': { + color: token.colorSuccess, + textDecoration: 'underline' + }, - '.body-part': { - flex: 1, - overflow: 'hidden', - display: 'flex', - flexDirection: 'column' - }, + '.tab-content': { + flex: 1, + overflow: 'auto' + }, - '.footer-part': { - padding: token.padding, + '.header-part': { + marginBottom: token.margin + }, - '.ant-btn': { - height: 48 + '.body-part': { + flex: 1, + overflow: 'hidden', + display: 'flex', + flexDirection: 'column' }, - '.ant-btn-content-wrapper': { - fontSize: token.fontSizeHeading6, - lineHeight: token.lineHeightHeading6, - weight: 500 + '.footer-part': { + padding: token.padding, + + '.ant-btn': { + height: 48 + }, + + '.ant-btn-content-wrapper': { + fontSize: token.fontSizeHeading6, + lineHeight: token.lineHeightHeading6, + weight: 500 + } } } }); diff --git a/packages/webapp/public/assets/reset.css b/packages/webapp/public/assets/reset.css index 80ec73a2a6..e15f5b4d31 100644 --- a/packages/webapp/public/assets/reset.css +++ b/packages/webapp/public/assets/reset.css @@ -695,7 +695,7 @@ div#popup-container { } .ant-sw-modal .ant-sw-modal-content.ant-sw-modal-content { - background-color: #f0f0f0; + background-color: #fff; } .ant-sw-modal.-light-theme .ant-sw-modal-content.ant-sw-modal-content {