[Issue-191] Update minting flow

Koniverse · Dec 3, 2024 · 448e2c1 · 448e2c1
1 parent 7ab15c9
commit 448e2c1
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 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
@@ -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<IAirdropNftMinting[]>(apiSDK.airdropNftMintList);
   const [mintSuccess, setMintSuccess] = useState(false);
   const [mintedAddress, setMintedAddress] = useState<string | undefined>(undefined);
-  const [isFetchingNftMintingLog, setIsFetchingNftMintingLog] = useState<boolean>(true);
+  const [mintingLog, setMintingLog] = useState<NftMintingLog | undefined>(mintingLogSubscription.value.data);
+  const [isFetchingNftMintingLog, setIsFetchingNftMintingLog] = useState<boolean>(!mintingLogSubscription.value.isFetched);
 
   // @ts-ignore
   const [alwaysShowMint, setAlwaysShowMint] = useState<boolean>(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
@@ -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: 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: Props) => {
   const [isLoading, setIsLoading] = useState<boolean>(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<TabGroupItemType[]>(() => {
     return [
       {
@@ -339,7 +358,6 @@ const Component: React.FC<Props> = (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
@@ -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<APIResponse<NftMintingLog>>(`${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<APIResponse<NftMintingLog>>(`${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<APIResponse<NftMintingLog>>(`${GAME_API_HOST}/api/mint-nft/start-mint`, { campaign, extrinsicHash });
 
+    this.mintingLogSubject.next({ isFetched: true, data: data.data });
+
     return data.data;
   }