[Issue-126] Update reload & maintain logic

Koniverse · Aug 17, 2024 · aa0f867 · aa0f867
1 parent e452517
commit aa0f867
Show file tree

Hide file tree

Showing 6 changed files with 396 additions and 16 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Home/Games/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Games/index.tsx
@@ -4,6 +4,7 @@
 import { GameAccountBlock, GameCardItem, ShopModal } from '@subwallet/extension-koni-ui/components';
 import { LeaderboardTabGroupItemType } from '@subwallet/extension-koni-ui/components/Leaderboard/LeaderboardContent';
 import { ShopModalId } from '@subwallet/extension-koni-ui/components/Modal/Shop/ShopModal';
+import { MetadataHandler, UpdateRecordPayload } from '@subwallet/extension-koni-ui/connector/booka/metadata';
 import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk';
 import { EnergyConfig, Game, GameInventoryItem, GameItem, LeaderboardGroups, LeaderboardItem, LeaderboardPerson } from '@subwallet/extension-koni-ui/connector/booka/types';
 import { TelegramConnector } from '@subwallet/extension-koni-ui/connector/telegram';
@@ -22,6 +23,7 @@ type Props = ThemeProps;
 const apiSDK = BookaSdk.instance;
 const shopModalId = ShopModalId;
 const telegramConnector = TelegramConnector.instance;
+const metadataHandler = MetadataHandler.instance;
 
 const orderGameList = (data: Game[]): Game[] => {
   const now = Date.now();
@@ -123,6 +125,53 @@ const Component = ({ className }: Props): React.ReactElement => {
     };
   }, [checkAccess, exitGame]);
 
+  const reloadGame = useCallback((slug: string) => {
+    setCurrentGame(undefined);
+
+    apiSDK.fetchGameList().then(() => {
+      const game = apiSDK.gameList.find((g) => g.slug === slug);
+
+      if (game) {
+        playGame(game)();
+      }
+    }).catch(console.error);
+  }, [playGame]);
+
+  useEffect(() => {
+    const currentGameSlug = currentGame?.slug;
+
+    if (!currentGameSlug) {
+      return;
+    }
+
+    const listener = (data: UpdateRecordPayload) => {
+      const updateInfo = data.game?.find((g) => g.current?.slug === currentGameSlug);
+
+      if (updateInfo) {
+        const currentVersion = updateInfo.current?.version || 0;
+        const shouldUpdate = updateInfo.newVersion?.version && currentVersion < updateInfo.newVersion.version;
+        const forceUpdate = updateInfo.newVersion?.minVersion && currentVersion < updateInfo.newVersion.minVersion;
+        const updateMessage = updateInfo.updateMessage || 'New game version is available, update now!';
+
+        if (forceUpdate) {
+          telegramConnector.showAlert(updateMessage, () => {
+            reloadGame(currentGameSlug);
+          });
+        } else if (shouldUpdate) {
+          telegramConnector.showConfirmation(updateMessage, (confirm) => {
+            confirm && reloadGame(currentGameSlug);
+          });
+        }
+      }
+    };
+
+    metadataHandler.on('onUpdateRecordVersion', listener);
+
+    return () => {
+      metadataHandler.off('onUpdateRecordVersion', listener);
+    };
+  }, [currentGame, currentGame?.slug, reloadGame]);
+
   // @ts-ignore
   const onOpenShop = useCallback((gameId?: number) => {
     return () => {

diff --git a/packages/extension-koni-ui/src/Popup/Home/index.tsx b/packages/extension-koni-ui/src/Popup/Home/index.tsx
@@ -5,16 +5,15 @@ import { CampaignBanner } from '@subwallet/extension-base/background/KoniTypes';
 import { CampaignBannerModal, Layout } from '@subwallet/extension-koni-ui/components';
 import { LayoutBaseProps } from '@subwallet/extension-koni-ui/components/Layout/base/Base';
 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 { homeScreensLayoutBackgroundImages } from '@subwallet/extension-koni-ui/constants';
 import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
-import { useAccountBalance, useGetBannerByScreen, useGetChainSlugsByAccountType, useGetMantaPayConfig, useHandleMantaPaySync, useTokenGroup } from '@subwallet/extension-koni-ui/hooks';
-import { RootState } from '@subwallet/extension-koni-ui/stores';
+import { useAccountBalance, useGetBannerByScreen, useGetChainSlugsByAccountType, useTokenGroup } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { ModalContext } from '@subwallet/react-ui';
 import CN from 'classnames';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { Outlet } from 'react-router';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
@@ -23,19 +22,15 @@ type Props = ThemeProps;
 
 export const GlobalSearchTokenModalId = 'globalSearchToken';
 const apiSDK = BookaSdk.instance;
+const metadataHandler = MetadataHandler.instance;
 
 function Component ({ className = '' }: Props): React.ReactElement<Props> {
   const { activeModal, inactiveModal } = useContext(ModalContext);
   const chainsByAccountType = useGetChainSlugsByAccountType();
   const tokenGroupStructure = useTokenGroup(chainsByAccountType);
   const accountBalance = useAccountBalance(tokenGroupStructure.tokenGroupMap);
-  const currentAccount = useSelector((state: RootState) => state.accountState.currentAccount);
   const [containerClass, setContainerClass] = useState<string | undefined>();
 
-  const mantaPayConfig = useGetMantaPayConfig(currentAccount?.address);
-  const isZkModeSyncing = useSelector((state: RootState) => state.mantaPay.isSyncing);
-  const handleMantaPaySync = useHandleMantaPaySync();
-
   const banners = useGetBannerByScreen('home');
 
   // @ts-ignore
@@ -54,16 +49,27 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   }, [inactiveModal]);
 
   useEffect(() => {
-    if (mantaPayConfig && mantaPayConfig.enabled && !mantaPayConfig.isInitialSync && !isZkModeSyncing) {
-      handleMantaPaySync(mantaPayConfig.address);
-    }
+    const handleMaintenance = (info: MaintenanceInfo) => {
+      if (info.isMaintenance) {
+        navigate('/maintenance');
+      }
+    };
 
-    apiSDK.isEnabled.subscribe((isEnabled) => {
+    const unsub1 = metadataHandler.maintenanceSubject.subscribe(handleMaintenance);
+
+    const handleBanedAccount = (isEnabled: boolean) => {
       if (!isEnabled) {
         navigate('/account-banned');
       }
-    });
-  }, [handleMantaPaySync, isZkModeSyncing, mantaPayConfig, navigate]);
+    };
+
+    const unsub2 = apiSDK.isAccountEnable.subscribe(handleBanedAccount);
+
+    return () => {
+      unsub1.unsubscribe();
+      unsub2.unsubscribe();
+    };
+  }, [navigate]);
 
   const onTabSelected = useCallback(
     (key: string) => {

diff --git a/packages/extension-koni-ui/src/Popup/Maintenance.tsx b/packages/extension-koni-ui/src/Popup/Maintenance.tsx
@@ -0,0 +1,92 @@
+// Copyright 2019-2022 @polkadot/extension-ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { Layout } from '@subwallet/extension-koni-ui/components';
+import { MaintenanceInfo, MetadataHandler } from '@subwallet/extension-koni-ui/connector/booka/metadata';
+import { Theme } from '@subwallet/extension-koni-ui/themes';
+import CN from 'classnames';
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+interface Props {
+  className?: string;
+}
+
+const metaDataHandler = MetadataHandler.instance;
+
+function Component ({ className }: Props): React.ReactElement<Props> {
+  const [maintenance, setMaintenance] = React.useState<MaintenanceInfo|undefined>();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const unsub = metaDataHandler.maintenanceSubject.subscribe(setMaintenance);
+
+    return () => {
+      unsub.unsubscribe();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (maintenance && !maintenance.isMaintenance) {
+      navigate('/');
+    }
+  }, [maintenance, navigate]);
+
+  return (
+    <Layout.Base
+      className={CN(className)}
+      showBackButton={false}
+      subHeaderPaddingVertical={true}
+    >
+      <div className='sub-title h3-text'>{maintenance?.title}</div>
+      <div
+        className='h5-text description'
+        dangerouslySetInnerHTML={{ __html: maintenance?.message || '' }}
+      ></div>
+    </Layout.Base>
+  );
+}
+
+const Maintenance = styled(Component)<Props>(({ theme }) => {
+  const { token } = theme as Theme;
+
+  return ({
+    position: 'relative',
+    border: `1px solid ${token.colorBgInput}`,
+
+    '.ant-sw-screen-layout-body-inner': {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      paddingTop: 128
+    },
+
+    '.ant-sw-sub-header-title-content': {
+      zIndex: 1
+    },
+
+    '.title': {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+
+    '.sub-title': {
+      paddingTop: token.paddingXL,
+      paddingBottom: token.padding,
+      color: token.colorWarning
+    },
+
+    '.description': {
+      textAlign: 'center',
+      paddingLeft: token.paddingXL,
+      paddingRight: token.paddingXL,
+      wordBreak: 'break-all',
+      color: token.colorTextSecondary,
+      fontWeight: token.bodyFontWeight
+    }
+  });
+});
+
+export default Maintenance;
diff --git a/packages/extension-koni-ui/src/Popup/router.tsx b/packages/extension-koni-ui/src/Popup/router.tsx
@@ -138,6 +138,7 @@ const ConnectionDetail = new LazyLoader('ConnectionDetail', () => import('@subwa
 
 const NotFound = new LazyLoader('NotFound', () => import('@subwallet/extension-koni-ui/Popup/NotFound'));
 const AccountBanned = new LazyLoader('AccountBaned', () => import('@subwallet/extension-koni-ui/Popup/Account/AccountBanned'));
+const Maintenance = new LazyLoader('AccountBaned', () => import('@subwallet/extension-koni-ui/Popup/Maintenance'));
 
 // A Placeholder page
 export function Example () {
@@ -301,6 +302,7 @@ export const router = createBrowserRouter([
       },
       NotFound.generateRouterObject('*'),
       AccountBanned.generateRouterObject('account-banned'),
+      Maintenance.generateRouterObject('maintenance'),
       PhishingDetected.generateRouterObject(`${PHISHING_PAGE_REDIRECT}/:website`)
     ]
   }