Merge branch 'refs/heads/telegram-dev' into telegram-dev-03

# Conflicts: # packages/webapp/public/index.html
Koniverse · Aug 26, 2024 · ee9354f · ee9354f
2 parents 899df78 + aa0f867
commit ee9354f
Show file tree

Hide file tree

Showing 11 changed files with 476 additions and 45 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/Mission/TaskItem.tsx b/packages/extension-koni-ui/src/Popup/Home/Mission/TaskItem.tsx
@@ -39,8 +39,8 @@ const _TaskItem = ({ actionReloadPoint, className, openWidget, reloadTask, task
   useEffect(() => {
     if (checking && reloadTask > 0) {
       apiSDK.completeTask(task.id)
-        .then((data: boolean) => {
-          if (data) {
+        .then((data: { completed: boolean, isSubmitting: boolean }) => {
+          if (data.completed) {
             setCompleted(true);
             setChecking(false);
             actionReloadPoint();
@@ -83,6 +83,29 @@ const _TaskItem = ({ actionReloadPoint, className, openWidget, reloadTask, task
         const date = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
         const data = JSON.stringify({ address, type: onChainType, date });
 
+        const checkCompleted = await apiSDK.completeTask(taskId);
+
+        if (checkCompleted) {
+          if (checkCompleted.completed) {
+            setCompleted(checkCompleted.completed);
+            setTaskLoading(false);
+
+            return;
+          }
+
+          if (checkCompleted.isSubmitting) {
+            setCompleted(false);
+            setTaskLoading(false);
+
+            notify({
+              message: t('Mission in progress on another device. Use one device to complete it.'),
+              type: 'warning'
+            });
+
+            return;
+          }
+        }
+
         res = await actionTaskOnChain(onChainType, networkKey, address, data);
 
         if ((res && res.errors.length > 0) || !res) {

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`)
     ]
   }

diff --git a/packages/extension-koni-ui/src/components/Games/GameAccount.tsx b/packages/extension-koni-ui/src/components/Games/GameAccount.tsx
@@ -15,7 +15,7 @@ type GamePointProps = ThemeProps & {
   point?: number;
   avatar?: string;
   isPlaceholder?: boolean;
-  actionNode?: React.ReactNode
+  actionNode?: React.ReactNode,
 };
 
 function Component ({ actionNode, avatar, className, isPlaceholder, name, point, prefix }: GamePointProps) {
@@ -49,6 +49,13 @@ export const GameAccount = styled(Component)<GamePointProps>(({ theme: { token }
     height: 52,
     color: token.colorTextDark2,
 
+    '&.__loading': {
+
+      '.__name': {
+        animation: 'fadeInOut 2s ease-in-out infinite'
+      }
+    },
+
     '.__prefix': {
       marginRight: token.marginXXS,
       minWidth: 24,
@@ -68,7 +75,7 @@ export const GameAccount = styled(Component)<GamePointProps>(({ theme: { token }
       'white-space': 'nowrap',
       fontSize: token.fontSizeLG,
       lineHeight: token.lineHeightLG,
-      fontWeight: token.headingFontWeight
+      fontWeight: token.headingFontWeight,
     },
 
     '.__point': {