[Issue-68] Update leaderboard modal

packages/extension-koni-ui/src/Popup/Home/Games/index.tsx

@@ -1,22 +1,29 @@
 // Copyright 2019-2022 @subwallet/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { GameAccountBlock, GameCardItem, ShopModal } from '@subwallet/extension-koni-ui/components';
+import { GameAccountBlock, GameCardItem, LeaderboardModal, ShopModal } from '@subwallet/extension-koni-ui/components';
+import { LeaderboardModalProps } from '@subwallet/extension-koni-ui/components/Leaderboard/LeaderboardModal';
 import { ShopModalId } from '@subwallet/extension-koni-ui/components/Modal/Shop/ShopModal';
 import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk';
 import { EnergyConfig, Game, GameInventoryItem, GameItem } from '@subwallet/extension-koni-ui/connector/booka/types';
+import { LEADERBOARD_MODAL } from '@subwallet/extension-koni-ui/constants';
 import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
 import { useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks';
 import { GameApp } from '@subwallet/extension-koni-ui/Popup/Home/Games/gameSDK';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
+import { calculateStartAndEnd } from '@subwallet/extension-koni-ui/utils/date';
 import { ModalContext } from '@subwallet/react-ui';
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 type Props = ThemeProps;
+type _LeaderboardModalProps = LeaderboardModalProps & {
+  gameId: number;
+};
 
 const apiSDK = BookaSdk.instance;
 const shopModalId = ShopModalId;
+const leaderboardModalId = LEADERBOARD_MODAL;
 
 const orderGameList = (data: Game[]): Game[] => {
   const now = Date.now();
@@ -53,11 +60,12 @@ const Component = ({ className }: Props): React.ReactElement => {
   const [energyConfig, setEnergyConfig] = useState<EnergyConfig | undefined>(apiSDK.energyConfig);
   const [gameItemMap, setGameItemMap] = useState<Record<string, GameItem[]>>(apiSDK.gameItemMap);
   const [gameInventoryItemList, setGameInventoryItemList] = useState<GameInventoryItem[]>(apiSDK.gameInventoryItemList);
-  const [currentGameShopId, setCurrentGameShopId] = useState<number>();
-  const { activeModal } = useContext(ModalContext);
+  const [currentShopGameId, setCurrentShopGameId] = useState<number>();
+  const { activeModal, inactiveModal } = useContext(ModalContext);
   const [account, setAccount] = useState(apiSDK.account);
   const [currentGame, setCurrentGame] = useState<Game | undefined>(undefined);
   const { setContainerClass } = useContext(HomeContext);
+  const [leaderboardModalProps, setLeaderboardModalProps] = useState<_LeaderboardModalProps | undefined>();
 
   const exitGame = useCallback(() => {
     if (gameIframe.current) {
@@ -93,11 +101,25 @@ const Component = ({ className }: Props): React.ReactElement => {
   // @ts-ignore
   const onOpenShop = useCallback((gameId?: number) => {
     return () => {
-      setCurrentGameShopId(gameId);
+      setCurrentShopGameId(gameId);
       activeModal(shopModalId);
     };
   }, [activeModal]);
 
+  const onOpenLeaderboard = useCallback((game: Game) => {
+    setLeaderboardModalProps({
+      gameId: game.id,
+      modalTitle: game.name,
+      leaderboardItems: []
+    });
+    activeModal(leaderboardModalId);
+  }, [activeModal]);
+
+  const onCloseLeaderboard = useCallback(() => {
+    inactiveModal(leaderboardModalId);
+    setLeaderboardModalProps(undefined);
+  }, [inactiveModal]);
+
   useEffect(() => {
     const accountSub = apiSDK.subscribeAccount().subscribe((data) => {
       setAccount(data);
@@ -130,6 +152,33 @@ const Component = ({ className }: Props): React.ReactElement => {
 
   const showGame = !!currentGame;
 
+  useEffect(() => {
+    let leaderboardSub: { unsubscribe: () => void } | null = null;
+
+    if (leaderboardModalProps?.gameId !== undefined) {
+      const { end, start } = calculateStartAndEnd('weekly');
+
+      leaderboardSub = apiSDK.subscribeLeaderboard(start, end, leaderboardModalProps.gameId, 100, 'game').subscribe((data) => {
+        setLeaderboardModalProps((prev) => {
+          if (!prev) {
+            return undefined;
+          }
+
+          return ({
+            ...prev,
+            leaderboardItems: data
+          });
+        });
+      });
+    }
+
+    return () => {
+      if (leaderboardSub) {
+        leaderboardSub.unsubscribe();
+      }
+    };
+  }, [leaderboardModalProps?.gameId]);
+
   useEffect(() => {
     setContainerClass(showGame ? 'game-screen-wrapper -show-game' : 'game-screen-wrapper');
 
@@ -154,6 +203,7 @@ const Component = ({ className }: Props): React.ReactElement => {
               className={'game-card-item'}
               item={g}
               key={g.id}
+              onOpenLeaderboard={onOpenLeaderboard}
               onPlay={playGame(g)}
             />
           ))
@@ -171,10 +221,19 @@ const Component = ({ className }: Props): React.ReactElement => {
 
       <ShopModal
         energyConfig={energyConfig}
-        gameId={currentGameShopId}
+        gameId={currentShopGameId}
         gameInventoryItemList={gameInventoryItemList}
         gameItemMap={gameItemMap}
       />
+
+      {
+        !!leaderboardModalProps && (
+          <LeaderboardModal
+            {...leaderboardModalProps}
+            onCancel={onCloseLeaderboard}
+          />
+        )
+      }
     </div>
   );
 };