From 448e2c17310a4d77910f430d259c4e683b2efb1f Mon Sep 17 00:00:00 2001 From: AnhMTV Date: Tue, 3 Dec 2024 15:21:59 +0700 Subject: [PATCH] [Issue-191] Update minting flow --- .../src/Popup/Home/Mint/index.tsx | 23 ++++++++-------- .../components/Mint/MintNftDetail/index.tsx | 26 ++++++++++++++++--- .../src/connector/booka/sdk.ts | 17 +++++++++++- 3 files changed, 50 insertions(+), 16 deletions(-) diff --git a/packages/extension-koni-ui/src/Popup/Home/Mint/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Mint/index.tsx index 43f9fa7838..7bafd25acd 100644 --- a/packages/extension-koni-ui/src/Popup/Home/Mint/index.tsx +++ b/packages/extension-koni-ui/src/Popup/Home/Mint/index.tsx @@ -3,7 +3,7 @@ import { MintNftDetail, MintNftHeader, MintNftSuccess } from '@subwallet/extension-koni-ui/components/Mint'; import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk'; -import { IAirdropNftMinting } from '@subwallet/extension-koni-ui/connector/booka/types'; +import { IAirdropNftMinting, NftMintingLog } from '@subwallet/extension-koni-ui/connector/booka/types'; import { useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks'; import { ThemeProps } from '@subwallet/extension-koni-ui/types'; import CN from 'classnames'; @@ -13,13 +13,15 @@ import styled from 'styled-components'; type Props = ThemeProps; const apiSDK = BookaSdk.instance; +const mintingLogSubscription = apiSDK.subscribeNftMintingLog(); const Component = ({ className }: Props): React.ReactElement => { useSetCurrentPage('/home/leaderboard'); const [nftAirdropList, setNftAirdropList] = useState(apiSDK.airdropNftMintList); const [mintSuccess, setMintSuccess] = useState(false); const [mintedAddress, setMintedAddress] = useState(undefined); - const [isFetchingNftMintingLog, setIsFetchingNftMintingLog] = useState(true); + const [mintingLog, setMintingLog] = useState(mintingLogSubscription.value.data); + const [isFetchingNftMintingLog, setIsFetchingNftMintingLog] = useState(!mintingLogSubscription.value.isFetched); // @ts-ignore const [alwaysShowMint, setAlwaysShowMint] = useState(false); @@ -52,16 +54,14 @@ const Component = ({ className }: Props): React.ReactElement => { }, []); useEffect(() => { - apiSDK.nftMintingGetLog().then((rs) => { - if (rs && rs.status === 'success') { - setMintedAddress(rs.address); - setMintSuccess(true); - } - }).catch((e) => { - console.error('nftMintingGetLog Error', e); - }).finally(() => { - setIsFetchingNftMintingLog(false); + const sub = apiSDK.subscribeNftMintingLog().subscribe((data) => { + setMintingLog(data.data); + setIsFetchingNftMintingLog(!data.isFetched); }); + + return () => { + sub.unsubscribe(); + }; }, []); if (!currentIAirdropNftMinting) { @@ -92,6 +92,7 @@ const Component = ({ className }: Props): React.ReactElement => { airdropNftInfo={currentIAirdropNftMinting} alwaysShowMint={alwaysShowMint} isFetchingNftMintingLog={isFetchingNftMintingLog} + mintingLog={mintingLog} onSuccess={onMintSuccess} /> ) 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 f2172a94d7..ae07cf478a 100644 --- a/packages/extension-koni-ui/src/components/Mint/MintNftDetail/index.tsx +++ b/packages/extension-koni-ui/src/components/Mint/MintNftDetail/index.tsx @@ -6,7 +6,7 @@ import { ConfirmYourAccountModal, TabGroup } from '@subwallet/extension-koni-ui/ import { TabGroupItemType } from '@subwallet/extension-koni-ui/components/Common/TabGroup'; import { MintNftDetailAbout, MintNftDetailCondition } from '@subwallet/extension-koni-ui/components/Mint/MintNftDetail/variants'; import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk'; -import { IAirdropNftMinting } from '@subwallet/extension-koni-ui/connector/booka/types'; +import { IAirdropNftMinting, NftMintingLog } from '@subwallet/extension-koni-ui/connector/booka/types'; import { TelegramConnector } from '@subwallet/extension-koni-ui/connector/telegram'; import { CONFIRM_YOUR_ACCOUNT_MODAL } from '@subwallet/extension-koni-ui/constants'; import { WalletConnectContext } from '@subwallet/extension-koni-ui/contexts/WalletConnectContext'; @@ -21,7 +21,7 @@ import { noop, toShort } from '@subwallet/extension-koni-ui/utils'; import { Button, Icon, ModalContext, SwModalFuncProps } from '@subwallet/react-ui'; import CN from 'classnames'; import { ArrowCircleRight, CheckCircle, HouseLine, SmileySad } from 'phosphor-react'; -import React, { useCallback, useContext, useMemo, useState } from 'react'; +import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; import { Trans } from 'react-i18next'; import { useSelector } from 'react-redux'; import styled, { useTheme } from 'styled-components'; @@ -30,6 +30,7 @@ type Props = ThemeProps & { airdropNftInfo: IAirdropNftMinting, onSuccess: (mintedAddress: string) => void; isFetchingNftMintingLog: boolean; + mintingLog?: NftMintingLog; alwaysShowMint?: boolean; // for debug }; @@ -50,7 +51,7 @@ const enum buttonTypeConst { const telegramConnector = TelegramConnector.instance; const Component: React.FC = (props: Props) => { - const { airdropNftInfo, alwaysShowMint, className, isFetchingNftMintingLog, onSuccess } = props; + const { airdropNftInfo, alwaysShowMint, className, isFetchingNftMintingLog, mintingLog, onSuccess } = props; const notify = useNotification(); const { goHome } = useDefaultNavigate(); const { activeModal } = useContext(ModalContext); @@ -61,6 +62,24 @@ const Component: React.FC = (props: Props) => { const [isLoading, setIsLoading] = useState(false); const { connectWC, requireWC } = useContext(WalletConnectContext); const { alertModal } = useContext(WalletModalContext); + + useEffect(() => { + apiSDK.getNftMintingLog().catch(console.error); + }, []); + + 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) { + // Todo: Issue-219 Nofity the minting failed + } + } + }, [mintingLog, onSuccess]); + const tabGroupItems = useMemo(() => { return [ { @@ -339,7 +358,6 @@ const Component: React.FC = (props: Props) => { handleFailedToMintModal().then(goHome).catch(console.error); } else { await apiSDK.nftMintingStart(transaction?.extrinsicHash); - onSuccess(address); } setIsLoading(false); diff --git a/packages/extension-koni-ui/src/connector/booka/sdk.ts b/packages/extension-koni-ui/src/connector/booka/sdk.ts index f7f503d211..798a6eb25c 100644 --- a/packages/extension-koni-ui/src/connector/booka/sdk.ts +++ b/packages/extension-koni-ui/src/connector/booka/sdk.ts @@ -1066,21 +1066,36 @@ export class BookaSdk { return data.data; } - async nftMintingGetLog (campaign = 'default') { + private mintingLogSubject = new BehaviorSubject<{ + isFetched: boolean; + data?: NftMintingLog; + }>({ isFetched: false }); + + async getNftMintingLog (campaign = 'default') { const data = await this.postRequest>(`${GAME_API_HOST}/api/mint-nft/get-mint`, { campaign }); + this.mintingLogSubject.next({ isFetched: true, data: data.data }); + return data.data; } + subscribeNftMintingLog () { + return this.mintingLogSubject; + } + async nftMintingRequestSignature (address: string, campaign = 'default') { const data = await this.postRequest>(`${GAME_API_HOST}/api/mint-nft/request-signature`, { address, campaign }); + this.mintingLogSubject.next({ isFetched: true, data: data.data }); + return data.data; } async nftMintingStart (extrinsicHash?: string, campaign = 'default') { const data = await this.postRequest>(`${GAME_API_HOST}/api/mint-nft/start-mint`, { campaign, extrinsicHash }); + this.mintingLogSubject.next({ isFetched: true, data: data.data }); + return data.data; }