[Issue-219-220][Story Odyssey] refactor code

Koniverse · Dec 4, 2024 · 50c6a01 · 50c6a01
1 parent 0230b0c
commit 50c6a01
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 100 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Home/index.tsx b/packages/extension-koni-ui/src/Popup/Home/index.tsx
@@ -8,17 +8,21 @@ import { LayoutBaseProps } from '@subwallet/extension-koni-ui/components/Layout/
 import { GlobalSearchTokenModal } from '@subwallet/extension-koni-ui/components/Modal/GlobalSearchTokenModal';
 import { MaintenanceInfo, MetadataHandler } from '@subwallet/extension-koni-ui/connector/booka/metadata';
 import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk';
-import { BookaAccount } from '@subwallet/extension-koni-ui/connector/booka/types';
-import { ACCOUNT_ADD_POINT_MODAL, ACCOUNT_INIT_POINT_MODAL, homeScreensLayoutBackgroundImages } from '@subwallet/extension-koni-ui/constants';
+import { BookaAccount, NftMintingLog } from '@subwallet/extension-koni-ui/connector/booka/types';
+import { ACCOUNT_ADD_POINT_MODAL, ACCOUNT_INIT_POINT_MODAL, CONFIRM_SHOW_MINTING_FAILED_MODAL, homeScreensLayoutBackgroundImages } from '@subwallet/extension-koni-ui/constants';
 import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
+import { WalletModalContext } from '@subwallet/extension-koni-ui/contexts/WalletModalContextProvider';
 import { useAccountBalance, useGetBannerByScreen, useGetChainSlugsByAccountType, useTokenGroup } from '@subwallet/extension-koni-ui/hooks';
+import useTranslation from '@subwallet/extension-koni-ui/hooks/common/useTranslation';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { ModalContext } from '@subwallet/react-ui';
 import CN from 'classnames';
+import { CheckCircle, Gift } from 'phosphor-react';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Outlet } from 'react-router';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
+import { useLocalStorage } from 'usehooks-ts';
 
 type Props = ThemeProps;
 
@@ -36,6 +40,11 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   const [addRewardModalProps, setAddRewardModalProps] = useState<AddRewardsModalProps | undefined>();
   const [initRewardModalProps, setInitRewardModalProps] = useState<InitRewardsModalProps | undefined>();
   const [account, setAccount] = useState<BookaAccount | undefined>(apiSDK.account);
+  const { alertModal } = useContext(WalletModalContext);
+  const { t } = useTranslation();
+
+  const [mintingLog, setMintingLog] = useState<NftMintingLog | undefined>();
+  const [isShowPopupMintFailed, setIsShowPopupMintFailed] = useLocalStorage(CONFIRM_SHOW_MINTING_FAILED_MODAL, 'nonConfirmed');
 
   const banners = useGetBannerByScreen('home');
 
@@ -82,6 +91,54 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
     closeAddRewardsModal();
   }, [closeAddRewardsModal]);
 
+  const handleMintingFailedModal = useCallback(() => {
+    alertModal.open({
+      className: 'general-confirmation-modal modal-revert-header',
+      title: t('Badge minting failed'),
+      iconProps: {
+        phosphorIcon: Gift,
+        weight: 'fill'
+      },
+      contentTitle: t('Mint your badge again'),
+      content: (
+        t('Due to technical issues, your badge wasn’t minted in Phase 1. Click the Mint tab to mint your badge again on December 6')
+      ),
+      okButton: {
+        icon: CheckCircle,
+        iconWeight: 'fill',
+        text: t('I understand'),
+        onClick: () => {
+          setIsShowPopupMintFailed('confirmed');
+          alertModal.close();
+        }
+      },
+      onCancel: () => {
+        setIsShowPopupMintFailed('confirmed');
+        alertModal.close();
+      }
+    });
+  }, [alertModal, setIsShowPopupMintFailed, t]);
+
+  useEffect(() => {
+    const fetchMintingLog = async () => {
+      try {
+        const mintingLog = await apiSDK.getNftMintingLog();
+
+        setMintingLog(mintingLog);
+      } catch (error) {
+        console.error('Error fetching minting log:', error);
+      }
+    };
+
+    fetchMintingLog().catch(console.error);
+  }, []);
+
+  useEffect(() => {
+    if (mintingLog?.notify && isShowPopupMintFailed.includes('nonConfirmed')) {
+      handleMintingFailedModal();
+    }
+  }, [handleMintingFailedModal, isShowPopupMintFailed, mintingLog?.notify, navigate, setIsShowPopupMintFailed]);
+
   useEffect(() => {
     const accountSub = apiSDK.subscribeAccount()
       .subscribe((data) => {

diff --git a/packages/extension-koni-ui/src/components/Layout/base/Home.tsx b/packages/extension-koni-ui/src/components/Layout/base/Home.tsx
@@ -2,19 +2,17 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { AccountJson } from '@subwallet/extension-base/background/types';
-import { AlertModal, Layout, WalletConnect } from '@subwallet/extension-koni-ui/components';
+import { Layout, WalletConnect } from '@subwallet/extension-koni-ui/components';
 import { LayoutBaseProps } from '@subwallet/extension-koni-ui/components/Layout/base/Base';
-import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk';
-import { NftMintingLog } from '@subwallet/extension-koni-ui/connector/booka/types';
 import { TelegramConnector } from '@subwallet/extension-koni-ui/connector/telegram';
-import { CONFIRM_SHOW_MINTING_FAILED_MODAL, VISIT_INVITATION_SCREEN_FLAG } from '@subwallet/extension-koni-ui/constants';
+import { VISIT_INVITATION_SCREEN_FLAG } from '@subwallet/extension-koni-ui/constants';
 import { CUSTOMIZE_MODAL } from '@subwallet/extension-koni-ui/constants/modal';
 import { WalletConnectContext } from '@subwallet/extension-koni-ui/contexts/WalletConnectContext';
-import { useAlert, useNotification, useSelector } from '@subwallet/extension-koni-ui/hooks';
+import { useNotification, useSelector } from '@subwallet/extension-koni-ui/hooks';
 import { noop } from '@subwallet/extension-koni-ui/utils';
 import { ButtonProps, Icon, ModalContext, Tooltip } from '@subwallet/react-ui';
-import { CheckCircle, Export, FadersHorizontal, Gift, MagnifyingGlass } from 'phosphor-react';
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { Export, FadersHorizontal, MagnifyingGlass } from 'phosphor-react';
+import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
@@ -36,9 +34,6 @@ type Props = {
 };
 
 const telegramConnector = TelegramConnector.instance;
-const apiSDK = BookaSdk.instance;
-
-const alertModalId = 'alert-minting-failed-modal';
 
 const Component = (props: Props) => {
   const { backgroundImages, backgroundStyle, children, className, onClickFilterIcon, onClickSearchIcon, onTabSelected, showConnectIcon = true, showFilterIcon, showGiftIcon, showSearchIcon, showTabBar } = props;
@@ -51,10 +46,6 @@ const Component = (props: Props) => {
   const { activeModal } = useContext(ModalContext);
   const { connectWC, disconnectWC } = useContext(WalletConnectContext);
 
-  const [mintingLog, setMintingLog] = useState<NftMintingLog | undefined>();
-  const [isShowPopupMintFailed, setIsShowPopupMintFailed] = useLocalStorage(CONFIRM_SHOW_MINTING_FAILED_MODAL, 'nonConfirmed');
-  const { alertProps, closeAlert, openAlert } = useAlert(alertModalId);
-
   const { wcAccount } = useSelector((state) => state.accountState);
 
   const notify = useNotification();
@@ -190,83 +181,23 @@ const Component = (props: Props) => {
     navigate('/settings/list');
   }, [navigate]);
 
-  const handleMintingFailedModal = useCallback(() => {
-    openAlert({
-      className: 'general-confirmation-modal modal-revert-header',
-      title: t('Badge minting failed'),
-      iconProps: {
-        phosphorIcon: Gift,
-        weight: 'fill'
-      },
-      contentTitle: t('Mint your badge again'),
-      content: (
-        t('Due to technical issues, your badge wasn’t minted in Phase 1. Click the Mint tab to mint your badge again on December 6')
-      ),
-      okButton: {
-        icon: CheckCircle,
-        iconWeight: 'fill',
-        text: t('I understand'),
-        onClick: () => {
-          setIsShowPopupMintFailed('confirmed');
-          closeAlert();
-        }
-      }
-    });
-  }, [closeAlert, openAlert, setIsShowPopupMintFailed, t]);
-
-  useEffect(() => {
-    const fetchMintingLog = async () => {
-      try {
-        const mintingLog = await apiSDK.getNftMintingLog();
-
-        setMintingLog(mintingLog);
-      } catch (error) {
-        console.error('Error fetching minting log:', error);
-      }
-    };
-
-    fetchMintingLog().catch(console.error);
-  }, []);
-
-  const onCancel = useCallback(() => {
-    setIsShowPopupMintFailed('confirmed');
-  }, [setIsShowPopupMintFailed]);
-
-  useEffect(() => {
-    if (mintingLog?.notify && isShowPopupMintFailed.includes('nonConfirmed')) {
-      handleMintingFailedModal();
-    }
-  }, [handleMintingFailedModal, isShowPopupMintFailed, mintingLog?.notify, navigate, setIsShowPopupMintFailed]);
-
   return (
-    <>
-      <Layout.Base
-        backgroundImages={backgroundImages}
-        backgroundStyle={backgroundStyle}
-        className={className}
-        headerCenter={false}
-        headerIcons={headerIcons}
-        headerLeft={'default'}
-        headerOnClickLeft={onClickListIcon}
-        headerPaddingVertical={true}
-        onTabSelected={onTabSelected}
-        showHeader={true}
-        showLeftButton={true}
-        showTabBar={showTabBar ?? true}
-      >
-        {children}
-      </Layout.Base>
-
-      {
-        !!alertProps && (
-          <AlertModal
-            _onCancel={onCancel}
-            modalId={alertModalId}
-            {...alertProps}
-          />
-        )
-      }
-    </>
+    <Layout.Base
+      backgroundImages={backgroundImages}
+      backgroundStyle={backgroundStyle}
+      className={className}
+      headerCenter={false}
+      headerIcons={headerIcons}
+      headerLeft={'default'}
+      headerOnClickLeft={onClickListIcon}
+      headerPaddingVertical={true}
+      onTabSelected={onTabSelected}
+      showHeader={true}
+      showLeftButton={true}
+      showTabBar={showTabBar ?? true}
+    >
+      {children}
+    </Layout.Base>
   );
 };
 

diff --git a/packages/extension-koni-ui/src/components/Modal/Common/AlertModal.tsx b/packages/extension-koni-ui/src/components/Modal/Common/AlertModal.tsx
@@ -11,8 +11,7 @@ import React, { useCallback, useContext } from 'react';
 import styled from 'styled-components';
 
 type Props = ThemeProps & AlertDialogProps & {
-  modalId: string,
-  _onCancel?: () => void,
+  modalId: string
 }
 
 const alertTypeAndIconMap = {
@@ -42,18 +41,20 @@ const Component: React.FC<Props> = (props: Props) => {
     modalId,
     okButton,
     title,
-    _onCancel,
+    onCancel,
     type = NotificationType.INFO, iconProps, contentTitle } = props;
 
   const { inactiveModal } = useContext(ModalContext);
 
-  const onCancel = useCallback(() => {
-    if (_onCancel) {
-      _onCancel();
+  const _onCancel = useCallback(() => {
+    if (onCancel) {
+      onCancel();
+
+      return;
     }
 
     inactiveModal(modalId);
-  }, [_onCancel, inactiveModal, modalId]);
+  }, [onCancel, inactiveModal, modalId]);
 
   return (
     <>
@@ -100,7 +101,7 @@ const Component: React.FC<Props> = (props: Props) => {
           </>
         }
         id={modalId}
-        onCancel={onCancel}
+        onCancel={_onCancel}
         title={title}
       >
         <div className='__modal-content'>

diff --git a/packages/extension-koni-ui/src/types/index.ts b/packages/extension-koni-ui/src/types/index.ts
@@ -32,6 +32,7 @@ export type AlertDialogProps = {
   contentTitle?: React.ReactNode,
   cancelButton?: AlertDialogButtonProps,
   okButton: AlertDialogButtonProps,
+  onCancel?: () => void,
 };
 
 export type AccountType = 'ALL' | 'ETHEREUM' | 'SUBSTRATE';