[WC] Update home screen UI

Koniverse · Nov 15, 2024 · 77d8773 · 77d8773
1 parent bea3790
commit 77d8773
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 38 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Home/Account/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Account/index.tsx
@@ -1,12 +1,10 @@
 // Copyright 2019-2022 @subwallet/extension-koni-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { ALL_ACCOUNT_KEY } from '@subwallet/extension-base/constants';
 import { GameAccountAvatar } from '@subwallet/extension-koni-ui/components';
 import InviteCTA from '@subwallet/extension-koni-ui/components/Invite/InviteCTA';
 import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk';
 import { BookaAccount } from '@subwallet/extension-koni-ui/connector/booka/types';
-import { showAccountAddress } from '@subwallet/extension-koni-ui/constants';
 import { useNotification, useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks';
 import { RootState } from '@subwallet/extension-koni-ui/stores';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
@@ -23,20 +21,19 @@ const apiSDK = BookaSdk.instance;
 
 const Component: React.FC<Props> = (props: Props) => {
   const { className } = props;
-  const accounts = useSelector((state: RootState) => state.accountState.accounts);
-  const accountJson = accounts.find((account) => account.address !== ALL_ACCOUNT_KEY);
+  const { wcAccount } = useSelector((state: RootState) => state.accountState);
   const [account, setAccount] = useState<BookaAccount | undefined>(apiSDK.account);
   const notify = useNotification();
   const { t } = useTranslation();
 
   useSetCurrentPage('/home/account');
 
   const onCopyAddress = useCallback(() => {
-    copyToClipboard(accountJson?.address || '');
+    copyToClipboard(wcAccount?.address || '');
     notify({
       message: t('Copied to clipboard')
     });
-  }, [accountJson?.address, notify, t]);
+  }, [wcAccount?.address, notify, t]);
 
   const currentPoint = account?.attributes.accumulatePoint || 0;
 
@@ -61,10 +58,10 @@ const Component: React.FC<Props> = (props: Props) => {
           size={7}
         />
 
-        <div className='account-name'>{accountJson?.name}</div>
-        {showAccountAddress && <div className='account-address-wrapper'>
+        <div className='account-name'>{account?.info.telegramUsername}</div>
+        {wcAccount && <div className='account-address-wrapper'>
           <div className='account-address'>
-            ({accountJson?.address ? toShort(accountJson?.address, 12, 5) : ''})
+            ({toShort(wcAccount.address, 12, 5)})
           </div>
 
           <div className='account-address-copy-button-wrapper'>

diff --git a/packages/extension-koni-ui/src/Popup/Home/index.tsx b/packages/extension-koni-ui/src/Popup/Home/index.tsx
@@ -190,7 +190,6 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
           className={CN('home', 'home-container', className, containerClass)}
           onClickSearchIcon={onOpenGlobalSearchToken}
           onTabSelected={onTabSelected}
-          showGiftIcon
         >
           <Outlet />
         </Layout.Home>

diff --git a/packages/extension-koni-ui/src/components/Layout/parts/SelectAccount/index.tsx b/packages/extension-koni-ui/src/components/Layout/parts/SelectAccount/index.tsx
@@ -8,16 +8,14 @@ import { RootState } from '@subwallet/extension-koni-ui/stores';
 import { Theme } from '@subwallet/extension-koni-ui/themes';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { copyToClipboard } from '@subwallet/extension-koni-ui/utils';
-import { Button, Icon, Image } from '@subwallet/react-ui';
+import { Button, Icon, Image, Typography } from '@subwallet/react-ui';
 import CN from 'classnames';
 import { Copy } from 'phosphor-react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { AccountBriefInfo } from '../../../Account';
-
 type Props = ThemeProps;
 const apiSDK = BookaSdk.instance;
 
@@ -26,7 +24,7 @@ function Component ({ className }: Props): React.ReactElement<Props> {
   const notify = useNotification();
   const navigate = useNavigate();
   const [gameAccount, setGameAccount] = useState(apiSDK.account);
-  const { currentAccount } = useSelector((state: RootState) => state.accountState);
+  const { wcAccount } = useSelector((state: RootState) => state.accountState);
 
   const onClickAccount = useCallback(() => {
     // navigate(`/accounts/detail/${currentAccount?.address || ''}`);
@@ -44,11 +42,11 @@ function Component ({ className }: Props): React.ReactElement<Props> {
   }, []);
 
   const onCopyCurrent = useCallback(() => {
-    copyToClipboard(currentAccount?.address || '');
+    copyToClipboard(wcAccount?.address || '');
     notify({
       message: t('Copied to clipboard')
     });
-  }, [currentAccount?.address, notify, t]);
+  }, [wcAccount?.address, notify, t]);
 
   return (
     <div className={CN(className, 'global-account-info')}>
@@ -63,32 +61,47 @@ function Component ({ className }: Props): React.ReactElement<Props> {
         type={'ghost'}
       />}
 
+      {/* { */}
+      {/*  !!currentAccount && ( */}
+      {/*    <div onClick={onClickAccount}> */}
+      {/*      <AccountBriefInfo */}
+      {/*        account={currentAccount} */}
+      {/*        className='selected-account' */}
+      {/*      /> */}
+      {/*    </div> */}
+      {/*  ) */}
+      {/* } */}
+
       {
-        !!currentAccount && (
-          <div onClick={onClickAccount}>
-            <AccountBriefInfo
-              account={currentAccount}
-              className='selected-account'
-            />
+        gameAccount && (
+          <div className={CN('account-info')}>
+            <Typography.Text
+              className='account-name'
+              ellipsis={true}
+            >
+              {gameAccount.info.telegramUsername}
+            </Typography.Text>
+            {wcAccount && (
+              <>
+                <div className='account-address'>(...{wcAccount.address.slice(-3)})</div>
+                <Button
+                  className={'__copy-button'}
+                  icon={(
+                    <Icon
+                      phosphorIcon={Copy}
+                      size='xs'
+                      weight='fill'
+                    />
+                  )}
+                  onClick={onCopyCurrent}
+                  size='xs'
+                  type='ghost'
+                />
+              </>
+            )}
           </div>
         )
       }
-
-      {
-        showAccountAddress && <Button
-          className={'__copy-button'}
-          icon={(
-            <Icon
-              phosphorIcon={Copy}
-              size={'xs'}
-              weight={'fill'}
-            />
-          )}
-          onClick={onCopyCurrent}
-          size={'xs'}
-          type={'ghost'}
-        />
-      }
     </div>
   );
 }
@@ -105,6 +118,31 @@ const SelectAccount = styled(Component)<Props>(({ theme }) => {
       marginRight: 'auto',
       alignItems: 'center',
 
+      '.account-info': {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: token.sizeXS,
+        alignItems: 'center',
+        overflow: 'hidden',
+
+        '.account-name': {
+          fontSize: token.fontSize,
+          lineHeight: token.lineHeight,
+          fontWeight: token.fontWeightStrong
+        },
+
+        '.account-address': {
+          fontSize: token.fontSizeHeading6,
+          lineHeight: token.lineHeightHeading6,
+          fontWeight: token.bodyFontWeight,
+          color: token.colorTextTertiary
+        },
+
+        '.__copy-button': {
+          minWidth: 0
+        }
+      },
+
       '.account-name.account-name': {
         fontSize: token.fontSize,
         lineHeight: token.lineHeight