[UI] Update placeholder for leaderboard screen

Koniverse · Jun 4, 2024 · 1ab6fcc · 1ab6fcc
1 parent 02d3aec
commit 1ab6fcc
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 53 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Home/Leaderboard/TopAccountItem.tsx b/packages/extension-koni-ui/src/Popup/Home/Leaderboard/TopAccountItem.tsx
@@ -1,42 +1,63 @@
 // Copyright 2019-2022 @subwallet/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { GameAccountAvatar } from '@subwallet/extension-koni-ui/components';
+import { GameAccountAvatar, GamePoint } from '@subwallet/extension-koni-ui/components';
 import { LeaderboardPerson } from '@subwallet/extension-koni-ui/connector/booka/types';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { formatIntegerShort } from '@subwallet/extension-koni-ui/utils';
 import CN from 'classnames';
 import React from 'react';
 import styled from 'styled-components';
 
-type Props = ThemeProps & LeaderboardPerson & {
+type Props = ThemeProps & {
   isFirst?: boolean;
+  leaderboardInfo?: LeaderboardPerson;
+  isPlaceholder?: boolean;
+  rank?: number;
 };
 
-const Component = ({ accountInfo, className, isFirst, point, rank }: Props): React.ReactElement => {
+const Component = ({ className, isFirst, isPlaceholder, leaderboardInfo, rank }: Props): React.ReactElement => {
+  const accountName = (() => {
+    if (isPlaceholder) {
+      return '------';
+    }
+
+    return `${leaderboardInfo?.accountInfo.firstName || ''} ${leaderboardInfo?.accountInfo.lastName || ''}`;
+  })();
+
+  const point = (() => {
+    if (isPlaceholder) {
+      return '---';
+    }
+
+    return formatIntegerShort(leaderboardInfo?.point);
+  })();
+
   return (
     <div className={CN(
       className, {
         '-is-first': isFirst
       })}
     >
       <div className={'__rank'}>
-        {rank}
+        {rank || leaderboardInfo?.rank}
       </div>
 
       <GameAccountAvatar
-        avatarPath={accountInfo.avatar}
+        avatarPath={leaderboardInfo?.accountInfo.avatar}
         className={'__avatar'}
         hasBoxShadow
+        isPlaceholder={isPlaceholder}
         size={isFirst ? 7 : 5}
       />
 
       <div className={'__account-name'}>
-        {`${accountInfo.firstName || ''} ${accountInfo.lastName || ''}`}
-      </div>
-      <div className={'__point'}>
-        {formatIntegerShort(point)}
+        {accountName}
       </div>
+      <GamePoint
+        className={'__point'}
+        point={point}
+      />
     </div>
   );
 };
@@ -80,7 +101,7 @@ export const TopAccountItem = styled(Component)<ThemeProps>(({ theme: { extendTo
       fontSize: token.fontSizeSM,
       lineHeight: token.lineHeightSM,
       color: token.colorTextDark4,
-      textAlign: 'center'
+      justifyContent: 'center'
     }
   };
 });
diff --git a/packages/extension-koni-ui/src/Popup/Home/Leaderboard/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Leaderboard/index.tsx
@@ -24,6 +24,10 @@ enum TabType {
   KARURA_PLAYDROP = 'karura_playdrop'
 }
 
+type GameItemPlaceholderType = {
+  rank: number;
+};
+
 const Component = ({ className }: Props): React.ReactElement => {
   useSetCurrentPage('/home/leaderboard');
   const [leaderBoard, setLeaderBoard] = useState<LeaderboardPerson[]>(apiSDK.leaderBoard);
@@ -48,6 +52,28 @@ const Component = ({ className }: Props): React.ReactElement => {
     setSelectedTab(value);
   }, []);
 
+  const filteredLeaderBoard = leaderBoard.filter((item) => item.point > 0);
+
+  const placeholderItems = (() => {
+    if (filteredLeaderBoard.length >= 10) {
+      return [];
+    }
+
+    const items: GameItemPlaceholderType[] = [];
+
+    for (let i = filteredLeaderBoard.length; i < 10; i++) {
+      if (i < 3) {
+        continue;
+      }
+
+      items.push({
+        rank: i + 1
+      });
+    }
+
+    return items;
+  })();
+
   useEffect(() => {
     const { end, start } = calculateStartAndEnd(selectedTab);
     let weeklyBoardSub: { unsubscribe: () => void } | null = null;
@@ -74,8 +100,6 @@ const Component = ({ className }: Props): React.ReactElement => {
     };
   }, [selectedTab]);
 
-  const filteredLeaderBoard = leaderBoard.filter((item) => item.point > 0);
-
   useEffect(() => {
     setContainerClass('leaderboard-screen-wrapper');
 
@@ -96,33 +120,30 @@ const Component = ({ className }: Props): React.ReactElement => {
     <div className='top-three-area'>
       <div className='top-account-item-wrapper'>
         {
-          !!filteredLeaderBoard[1] && (
-            <TopAccountItem
-              {...filteredLeaderBoard[1]}
-              rank={2}
-            />
-          )
+          <TopAccountItem
+            isPlaceholder={!filteredLeaderBoard[1]}
+            leaderboardInfo={filteredLeaderBoard[1]}
+            rank={2}
+          />
         }
       </div>
       <div className='top-account-item-wrapper -is-first'>
         {
-          !!filteredLeaderBoard[0] && (
-            <TopAccountItem
-              {...filteredLeaderBoard[0]}
-              isFirst
-              rank={1}
-            />
-          )
+          <TopAccountItem
+            isFirst
+            isPlaceholder={!filteredLeaderBoard[0]}
+            leaderboardInfo={filteredLeaderBoard[0]}
+            rank={1}
+          />
         }
       </div>
       <div className='top-account-item-wrapper'>
         {
-          !!filteredLeaderBoard[2] && (
-            <TopAccountItem
-              {...filteredLeaderBoard[2]}
-              rank={3}
-            />
-          )
+          <TopAccountItem
+            isPlaceholder={!filteredLeaderBoard[2]}
+            leaderboardInfo={filteredLeaderBoard[2]}
+            rank={3}
+          />
         }
       </div>
     </div>
@@ -140,10 +161,25 @@ const Component = ({ className }: Props): React.ReactElement => {
             className={CN('leaderboard-item')}
             name={`${item.accountInfo.firstName || ''} ${item.accountInfo.lastName || ''}`}
             point={item.point}
-            prefix={`${item.rank}`}
+            prefix={`${item.rank}`.padStart(2, '0')}
           />
         </div>
       ))}
+
+      {
+        placeholderItems.map((item) => (
+          <div
+            className={CN('leaderboard-item-wrapper')}
+            key={item.rank}
+          >
+            <GameAccount
+              className={CN('leaderboard-item')}
+              isPlaceholder
+              prefix={`${item.rank}`.padStart(2, '0')}
+            />
+          </div>
+        ))
+      }
     </div>
   </div>;
 };

diff --git a/packages/extension-koni-ui/src/components/Games/GameAccount.tsx b/packages/extension-koni-ui/src/components/Games/GameAccount.tsx
@@ -10,23 +10,25 @@ import styled from 'styled-components';
 
 type GamePointProps = ThemeProps & {
   className?: string;
-  name: string;
+  name?: string;
   prefix?: string;
   point?: number;
-  avatar?: string
+  avatar?: string;
+  isPlaceholder?: boolean;
 };
 
-function Component ({ avatar, className, name, point, prefix }: GamePointProps) {
+function Component ({ avatar, className, isPlaceholder, name, point, prefix }: GamePointProps) {
   return (
     <div className={CN(className)}>
       {prefix && <span className={'__prefix'}>{prefix}</span>}
       <GameAccountAvatar
         avatarPath={avatar}
         className={'__avatar'}
+        isPlaceholder={isPlaceholder}
       />
-      <span className={'__name'}>{name}</span>
+      <span className={'__name'}>{isPlaceholder ? '------' : name}</span>
       <span className={'__point'}>
-        {formatIntegerShort(point)}
+        {isPlaceholder ? '---' : formatIntegerShort(point)}
       </span>
     </div>
   );