Merge branch 'refs/heads/koni/dev/issue-81-86-87' into telegram-dev-02

Koniverse · Jul 26, 2024 · c7a3a26 · c7a3a26
2 parents 1b25512 + b39e241
commit c7a3a26
Show file tree

Hide file tree

Showing 8 changed files with 414 additions and 215 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Home/Invite/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Invite/index.tsx
diff --git a/packages/extension-koni-ui/src/Popup/router.tsx b/packages/extension-koni-ui/src/Popup/router.tsx
@@ -177,7 +177,6 @@ export const router = createBrowserRouter([
           Games.generateRouterObject('games'),
           Mission.generateRouterObject('mission'),
           Leaderboard.generateRouterObject('leaderboard'),
-          Invite.generateRouterObject('invite'),
           Tokens.generateRouterObject('tokens'),
           TokenDetailList.generateRouterObject('tokens/detail/:slug'),
           AirDrop.generateRouterObject('airdrop'),
@@ -222,6 +221,9 @@ export const router = createBrowserRouter([
           }
         ]
       },
+      {
+        ...Invite.generateRouterObject('invite')
+      },
       {
         ...AirDropDetail.generateRouterObject('airdrop/detail/:id')
       },

diff --git a/packages/extension-koni-ui/src/components/Games/GameAccount.tsx b/packages/extension-koni-ui/src/components/Games/GameAccount.tsx
@@ -15,9 +15,10 @@ type GamePointProps = ThemeProps & {
   point?: number;
   avatar?: string;
   isPlaceholder?: boolean;
+  actionNode?: React.ReactNode
 };
 
-function Component ({ avatar, className, isPlaceholder, name, point, prefix }: GamePointProps) {
+function Component ({ actionNode, avatar, className, isPlaceholder, name, point, prefix }: GamePointProps) {
   return (
     <div className={CN(className)}>
       {prefix && <span className={'__prefix'}>{prefix}</span>}
@@ -30,6 +31,8 @@ function Component ({ avatar, className, isPlaceholder, name, point, prefix }: G
       <span className={'__point'}>
         {isPlaceholder ? '---' : formatIntegerShort(point)}
       </span>
+
+      {actionNode}
     </div>
   );
 }

diff --git a/packages/extension-koni-ui/src/components/Games/GameAccountAvatar.tsx b/packages/extension-koni-ui/src/components/Games/GameAccountAvatar.tsx
@@ -9,7 +9,7 @@ import styled from 'styled-components';
 
 type Props = ThemeProps & {
   avatarPath?: string;
-  size?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+  size?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 'custom';
   hasBoxShadow?: boolean;
   isPlaceholder?: boolean;
 };

diff --git a/packages/extension-koni-ui/src/components/Layout/base/Home.tsx b/packages/extension-koni-ui/src/components/Layout/base/Home.tsx
@@ -5,11 +5,12 @@ import { Layout } from '@subwallet/extension-koni-ui/components';
 import { LayoutBaseProps } from '@subwallet/extension-koni-ui/components/Layout/base/Base';
 import { CUSTOMIZE_MODAL } from '@subwallet/extension-koni-ui/constants/modal';
 import { useNotification } from '@subwallet/extension-koni-ui/hooks';
-import { ButtonProps, Icon, ModalContext } from '@subwallet/react-ui';
+import { ButtonProps, Icon, ModalContext, Tooltip } from '@subwallet/react-ui';
 import { FadersHorizontal, MagnifyingGlass, UserCirclePlus } from 'phosphor-react';
 import React, { useCallback, useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
 
 type Props = {
   children?: React.ReactNode;
@@ -25,7 +26,7 @@ type Props = {
   className?: string;
 };
 
-const Home = ({ backgroundImages, backgroundStyle, children, className, onClickFilterIcon, onClickSearchIcon, onTabSelected, showFilterIcon, showGiftIcon, showSearchIcon, showTabBar }: Props) => {
+const Component = ({ backgroundImages, backgroundStyle, children, className, onClickFilterIcon, onClickSearchIcon, onTabSelected, showFilterIcon, showGiftIcon, showSearchIcon, showTabBar }: Props) => {
   const navigate = useNavigate();
   // @ts-ignore
   const { t } = useTranslation();
@@ -38,7 +39,7 @@ const Home = ({ backgroundImages, backgroundStyle, children, className, onClickF
   }, [activeModal]);
 
   const onOpenInvite = useCallback(() => {
-    navigate('/home/invite');
+    navigate('/invite');
   }, [navigate]);
 
   const headerIcons = useMemo<ButtonProps[]>(() => {
@@ -71,17 +72,31 @@ const Home = ({ backgroundImages, backgroundStyle, children, className, onClickF
     if (showGiftIcon) {
       icons.push({
         icon: (
-          <Icon
-            phosphorIcon={UserCirclePlus}
-            size='md'
-          />
+          <>
+            <Icon
+              customSize={'20px'}
+              phosphorIcon={UserCirclePlus}
+              weight={'fill'}
+            />
+
+            <Tooltip
+              className={'invite-tooltip'}
+              open={true}
+              overlayClassName={'tooltip-overlay'}
+              placement={'bottomRight'}
+              title={t('Invite your friend')}
+            >
+              <div>
+              </div>
+            </Tooltip>
+          </>
         ),
         onClick: onOpenInvite
       });
     }
 
     return icons;
-  }, [onClickFilterIcon, onOpenInvite, onClickSearchIcon, onOpenCustomizeModal, showFilterIcon, showGiftIcon, showSearchIcon]);
+  }, [showFilterIcon, showSearchIcon, showGiftIcon, onClickFilterIcon, onOpenCustomizeModal, onClickSearchIcon, t, onOpenInvite]);
 
   const onClickListIcon = useCallback(() => {
     navigate('/settings/list');
@@ -107,4 +122,6 @@ const Home = ({ backgroundImages, backgroundStyle, children, className, onClickF
   );
 };
 
-export { Home };
+export const Home = styled(Component)<LayoutBaseProps>(({ theme: { extendToken, token } }: LayoutBaseProps) => ({
+
+}));
diff --git a/packages/extension-koni-ui/src/components/Leaderboard/LeaderboardContent.tsx b/packages/extension-koni-ui/src/components/Leaderboard/LeaderboardContent.tsx
@@ -110,20 +110,6 @@ const Component = ({ className, defaultSelectedTab, gameId, tabGroupItems }: Pro
       )
     }
     <div className='top-three-area'>
-      {!!currentTabInfo?.leaderboardInfo.onClickShare && (
-        <Button
-          className={'__share-button -primary-3'}
-          icon={(
-            <Icon
-              phosphorIcon={ShareNetwork}
-              size={'md'}
-            />
-          )}
-          onClick={_onClickShare}
-          shape={'round'}
-          size={'xs'}
-        />
-      )}
       <div className='top-account-item-wrapper'>
         {
           <TopAccountItem
@@ -154,7 +140,9 @@ const Component = ({ className, defaultSelectedTab, gameId, tabGroupItems }: Pro
       </div>
     </div>
 
-    <div className={'leaderboard-item-list-container'}>
+    <div
+      className={'leaderboard-item-list-container'}
+    >
       {filteredLeaderboardItems.length >= 3 && filteredLeaderboardItems.slice(3).map((item) => (
         <div
           className={CN('leaderboard-item-wrapper', {
@@ -163,6 +151,24 @@ const Component = ({ className, defaultSelectedTab, gameId, tabGroupItems }: Pro
           key={item.rank}
         >
           <GameAccount
+            actionNode={!!currentTabInfo?.leaderboardInfo.onClickShare && item.mine
+              ? (
+                <Button
+                  className={'__share-button'}
+                  icon={(
+                    <Icon
+                      customSize={'20px'}
+                      phosphorIcon={ShareNetwork}
+                      weight={'fill'}
+                    />
+                  )}
+                  onClick={_onClickShare}
+                  shape={'round'}
+                  size={'xs'}
+                  type={'ghost'}
+                />
+              )
+              : undefined}
             avatar={item.accountInfo.avatar}
             className={CN('leaderboard-item')}
             name={`${item.accountInfo.firstName || ''} ${item.accountInfo.lastName || ''}`}
@@ -198,8 +204,10 @@ const LeaderboardContent = styled(Component)<ThemeProps>(({ theme: { extendToken
 
     '.tab-group-wrapper': {
       paddingLeft: token.padding,
-      paddingRight: token.padding
+      paddingRight: token.padding,
+      marginBottom: token.margin
     },
+
     '.top-button-share': {
       paddingLeft: token.padding,
       paddingRight: token.padding
@@ -218,20 +226,13 @@ const LeaderboardContent = styled(Component)<ThemeProps>(({ theme: { extendToken
     },
 
     '.top-three-area': {
-      minHeight: 252,
       display: 'flex',
       alignItems: 'flex-end',
-      paddingTop: token.size,
       paddingBottom: token.size,
       justifyContent: 'center',
       paddingLeft: token.paddingXS,
       paddingRight: token.paddingXS,
-      position: 'relative',
-      '.__share-button': {
-        position: 'absolute',
-        right: token.padding,
-        top: 0
-      }
+      position: 'relative'
     },
 
     '.leaderboard-item-wrapper': {
@@ -241,6 +242,7 @@ const LeaderboardContent = styled(Component)<ThemeProps>(({ theme: { extendToken
     '.leaderboard-item-wrapper.-is-sticky': {
       position: 'sticky',
       bottom: token.size,
+      top: 0,
       zIndex: 100,
 
       '.leaderboard-item': {
@@ -258,6 +260,10 @@ const LeaderboardContent = styled(Component)<ThemeProps>(({ theme: { extendToken
       }
     },
 
+    '.__share-button': {
+      marginRight: -10
+    },
+
     '.leaderboard-item-list-container': {
       overflow: 'auto',
       flex: 1,

diff --git a/packages/extension-koni-ui/src/components/Leaderboard/TopAccountItem.tsx b/packages/extension-koni-ui/src/components/Leaderboard/TopAccountItem.tsx
@@ -39,17 +39,21 @@ const Component = ({ className, isFirst, isPlaceholder, leaderboardInfo, rank }:
         '-is-first': isFirst
       })}
     >
-      <div className={'__rank'}>
-        {rank || leaderboardInfo?.rank}
-      </div>
+      <div className='__avatar-wrapper'>
+        <GameAccountAvatar
+          avatarPath={leaderboardInfo?.accountInfo.avatar}
+          className={'__avatar'}
+          hasBoxShadow
+          isPlaceholder={isPlaceholder}
+          size={'custom'}
+        />
 
-      <GameAccountAvatar
-        avatarPath={leaderboardInfo?.accountInfo.avatar}
-        className={'__avatar'}
-        hasBoxShadow
-        isPlaceholder={isPlaceholder}
-        size={isFirst ? 7 : 5}
-      />
+        <div className={'__rank-wrapper'}>
+          <div className={'__rank'}>
+            {rank || leaderboardInfo?.rank}
+          </div>
+        </div>
+      </div>
 
       <div className={'__account-name'}>
         {accountName}
@@ -64,31 +68,37 @@ const Component = ({ className, isFirst, isPlaceholder, leaderboardInfo, rank }:
 
 const TopAccountItem = styled(Component)<ThemeProps>(({ theme: { extendToken, token } }: ThemeProps) => {
   return {
-    '.__rank': {
-      fontWeight: token.headingFontWeight,
-      fontSize: token.fontSizeLG,
-      lineHeight: token.lineHeightLG,
-      color: token.colorTextDark2,
+    '.__avatar-wrapper': {
+      marginLeft: 'auto',
+      marginRight: 'auto',
       marginBottom: token.marginXS,
-      textAlign: 'center'
+      position: 'relative',
+      width: 'fit-content'
     },
 
-    '.__avatar': {
-      marginLeft: 'auto',
-      marginRight: 'auto',
-      marginBottom: token.marginXS
+    '.__rank-wrapper': {
+      position: 'absolute',
+      right: 0,
+      bottom: 0,
+      borderRadius: '100%',
+      backgroundColor: extendToken.colorBgSecondary2
     },
 
-    '&.-is-first ': {
-      '.__rank': {
-        fontSize: token.fontSizeHeading4,
-        lineHeight: token.lineHeightHeading4
-      }
+    '.__rank': {
+      position: 'absolute',
+      color: token.colorPrimary,
+      fontWeight: token.headingFontWeight,
+      top: 0,
+      bottom: 0,
+      display: 'flex',
+      alignItems: 'center',
+      left: '50%',
+      transform: 'translateX(-50%)'
     },
 
     '.__account-name': {
-      fontSize: token.fontSizeLG,
-      lineHeight: token.lineHeightLG,
+      fontSize: token.fontSize,
+      lineHeight: token.lineHeight,
       color: token.colorTextDark2,
       marginBottom: token.marginXXS,
       overflow: 'hidden',
@@ -102,6 +112,60 @@ const TopAccountItem = styled(Component)<ThemeProps>(({ theme: { extendToken, to
       lineHeight: token.lineHeightSM,
       color: token.colorTextDark4,
       justifyContent: 'center'
+    },
+
+    '&:not(.-is-first)': {
+      '.__avatar': {
+        borderWidth: 2,
+        width: 64,
+        height: 64,
+        minWidth: 64,
+
+        '.__inner': {
+          borderWidth: 3
+        },
+
+        '.__avatar-image': {
+          borderWidth: 2
+        }
+      },
+
+      '.__rank-wrapper': {
+        width: 24,
+        height: 24
+      },
+
+      '.__rank': {
+        fontSize: token.fontSize,
+        lineHeight: token.lineHeight
+      }
+    },
+
+    '&.-is-first': {
+      '.__rank-wrapper': {
+        width: 28,
+        height: 28
+      },
+
+      '.__avatar': {
+        borderWidth: 2,
+        width: 92,
+        height: 92,
+        minWidth: 92,
+
+        '.__inner': {
+          borderWidth: 4
+        },
+
+        '.__avatar-image': {
+          borderWidth: 2
+        }
+      },
+
+      '.__rank': {
+        fontSize: token.fontSizeLG,
+        lineHeight: token.lineHeightLG
+      }
     }
   };
 });

diff --git a/packages/extension-koni-ui/src/contexts/ThemeContext.tsx b/packages/extension-koni-ui/src/contexts/ThemeContext.tsx
@@ -94,7 +94,7 @@ const GlobalStyle = createGlobalStyle<ThemeProps>(({ theme }) => {
       }
     },
 
-    '.__tooltip-overlay-remind': {
+    '.tooltip-overlay': {
       '.ant-tooltip-inner': {
         fontSize: token.fontSizeXS,
         lineHeight: token.lineHeightXS,