[Issue-175] Update UX for minting successfully

Koniverse · Nov 21, 2024 · 641ee75 · 641ee75
1 parent 493725c
commit 641ee75
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 13 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
@@ -18,6 +18,8 @@ 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 currentIAirdropNftMinting = useMemo(() => {
     return nftAirdropList[0];
@@ -42,6 +44,22 @@ const Component = ({ className }: Props): React.ReactElement => {
     };
   }, []);
 
+  useEffect(() => {
+    apiSDK.nftMintingGetLog().then((rs) => {
+      // todo: remove after debug
+      console.log('nftMintingGetLog rs', rs);
+
+      if (rs) {
+        setMintedAddress(rs.address);
+        setMintSuccess(true);
+      }
+    }).catch((e) => {
+      console.error('nftMintingGetLog Error', e);
+    }).finally(() => {
+      setIsFetchingNftMintingLog(false);
+    });
+  }, []);
+
   if (!currentIAirdropNftMinting) {
     return <></>;
   }
@@ -59,11 +77,15 @@ const Component = ({ className }: Props): React.ReactElement => {
       {
         mintSuccess
           ? (
-            <MintNftSuccess airdropNftInfo={currentIAirdropNftMinting} />
+            <MintNftSuccess
+              airdropNftInfo={currentIAirdropNftMinting}
+              mintedAddress={mintedAddress}
+            />
           )
           : (
             <MintNftDetail
               airdropNftInfo={currentIAirdropNftMinting}
+              isFetchingNftMintingLog={isFetchingNftMintingLog}
               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
@@ -28,6 +28,7 @@ import styled, { useTheme } from 'styled-components';
 type Props = ThemeProps & {
   airdropNftInfo: IAirdropNftMinting,
   onSuccess: VoidFunction;
+  isFetchingNftMintingLog: boolean;
 };
 
 const apiSDK = BookaSdk.instance;
@@ -47,7 +48,7 @@ const enum buttonTypeConst {
 const telegramConnector = TelegramConnector.instance;
 
 const Component: React.FC<Props> = (props: Props) => {
-  const { airdropNftInfo, className, onSuccess } = props;
+  const { airdropNftInfo, className, isFetchingNftMintingLog, onSuccess } = props;
   const notify = useNotification();
   const { goHome } = useDefaultNavigate();
   const { activeModal } = useContext(ModalContext);
@@ -453,9 +454,13 @@ const Component: React.FC<Props> = (props: Props) => {
           }
         </div>
 
-        <div className='footer-part'>
-          {renderButton()}
-        </div>
+        {
+          !isFetchingNftMintingLog && (
+            <div className='footer-part'>
+              {renderButton()}
+            </div>
+          )
+        }
       </div>
 
       <ConfirmYourAccountModal

diff --git a/packages/extension-koni-ui/src/components/Mint/MintNftSuccess/index.tsx b/packages/extension-koni-ui/src/components/Mint/MintNftSuccess/index.tsx
@@ -4,23 +4,25 @@
 import { detectTranslate } from '@subwallet/extension-base/utils';
 import { IAirdropNftMinting } from '@subwallet/extension-koni-ui/connector/booka/types';
 import { useTranslation } from '@subwallet/extension-koni-ui/hooks';
-import { RootState } from '@subwallet/extension-koni-ui/stores';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { toShort } from '@subwallet/extension-koni-ui/utils';
 import CN from 'classnames';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Trans } from 'react-i18next';
-import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
 interface Props extends ThemeProps {
-  airdropNftInfo: IAirdropNftMinting
+  airdropNftInfo: IAirdropNftMinting;
+  mintedAddress?: string;
 }
 
-const Component = ({ airdropNftInfo, className }: Props) => {
+const Component = ({ airdropNftInfo, className, mintedAddress = '' }: Props) => {
   const { t } = useTranslation();
   const { name, nft_url: nftUrl } = airdropNftInfo;
-  const wcAccount = useSelector((state: RootState) => state.accountState.wcAccount);
+
+  const explorerLink = useMemo(() => {
+    return `https://story.aurascan.io/address/${mintedAddress}`;
+  }, [mintedAddress]);
 
   return (
     <div className={CN(className)}>
@@ -40,12 +42,14 @@ const Component = ({ airdropNftInfo, className }: Props) => {
             highlight: (
               <a
                 className='__link'
-                href={'/'}
+                href={explorerLink}
+                rel='noreferrer'
+                target='_blank'
               />
             )
           }}
           i18nKey={detectTranslate('Congratulations! Your badge is minted with account {{address}}. Check out other badges <highlight>here</highlight>')}
-          values={{ address: toShort(wcAccount?.address || '', 10, 16) }}
+          values={{ address: toShort(mintedAddress, 10, 16) }}
         />
       </div>
     </div>