Merge remote-tracking branch 'origin/main' into ADN-586-enhance-token…

…s-management
onbloc · Nov 6, 2024 · b655995 · b655995
2 parents 06fa67e + 32b39ab
commit b655995
Show file tree

Hide file tree

Showing 17 changed files with 186 additions and 67 deletions.
diff --git a/packages/adena-extension/src/assets/web/lottie/account-added.json b/packages/adena-extension/src/assets/web/lottie/account-added.json
diff --git a/packages/adena-extension/src/assets/web/lottie/welcome.json b/packages/adena-extension/src/assets/web/lottie/welcome.json
diff --git a/packages/adena-extension/src/assets/web/lottie/you-are-all-set.json b/packages/adena-extension/src/assets/web/lottie/you-are-all-set.json
diff --git a/packages/adena-extension/src/components/atoms/copy-icon-button/index.tsx b/packages/adena-extension/src/components/atoms/copy-icon-button/index.tsx
@@ -1,20 +1,22 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { CopyButtonWrapper } from './copy-icon-button.styles';
 import IconCopy from '@assets/icon-copy';
 import IconCopyCheck from '@assets/icon-copy-check';
+import React, { useCallback, useEffect, useState } from 'react';
+import { CopyButtonWrapper } from './copy-icon-button.styles';
 
 export interface CopyIconButtonProps {
   className?: string;
   copyText: string;
   style?: React.CSSProperties;
-  size?: number
+  size?: number;
+  onClick?: () => void;
 }
 
 export const CopyIconButton: React.FC<CopyIconButtonProps> = ({
   className = '',
   copyText,
   style = {},
   size = 16,
+  onClick,
 }) => {
   const [checked, setChecked] = useState<boolean>(false);
 
@@ -31,12 +33,20 @@ export const CopyIconButton: React.FC<CopyIconButtonProps> = ({
       event.stopPropagation();
       setChecked(true);
       navigator.clipboard.writeText(copyText);
+
+      !!onClick && onClick();
     },
-    [copyText, checked],
+    [copyText, checked, onClick],
   );
 
   return (
-    <CopyButtonWrapper className={className} style={style} size={size} checked={checked} onClick={onClickCopyButton}>
+    <CopyButtonWrapper
+      className={className}
+      style={style}
+      size={size}
+      checked={checked}
+      onClick={onClickCopyButton}
+    >
       {checked ? <IconCopyCheck /> : <IconCopy />}
     </CopyButtonWrapper>
   );

diff --git a/packages/adena-extension/src/components/atoms/highlight-number/index.tsx b/packages/adena-extension/src/components/atoms/highlight-number/index.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
 import { FontsType } from '@styles/theme';
+import BigNumber from 'bignumber.js';
+import React, { useMemo } from 'react';
 import { HighlightNumberWrapper } from './highlight-number.styles';
 
 export interface HighlightNumberProps {
@@ -20,14 +21,18 @@ export const HighlightNumber: React.FC<HighlightNumberProps> = ({
   const hasDecimal = value.includes('.');
   const [integer, decimal] = hasDecimal ? value.split('.') : [value, ''];
 
+  const integerStr = useMemo(() => {
+    return BigNumber(integer.replace(/,/g, '')).toFormat(0);
+  }, [integer]);
+
   return (
     <HighlightNumberWrapper
       fontColor={fontColor}
       fontStyleKey={fontStyleKey}
       minimumFontSize={minimumFontSize}
       lineHeight={lineHeight}
     >
-      <span className='value integer'>{integer}</span>
+      <span className='value integer'>{integerStr}</span>
       <span className='value decimal'>
         {hasDecimal ? '.' : ''}
         {decimal}

diff --git a/packages/adena-extension/src/components/molecules/token-balance/token-balance.styles.ts b/packages/adena-extension/src/components/molecules/token-balance/token-balance.styles.ts
@@ -1,4 +1,4 @@
-import { FontsType, fonts } from '@styles/theme';
+import { fonts, FontsType } from '@styles/theme';
 import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
 
 interface TokenBalanceWrapperProps {
@@ -20,19 +20,19 @@ export const TokenBalanceWrapper = styled.div<TokenBalanceWrapperProps>`
           flex-direction: row;
         `
       : maxWidth
-      ? css`
-          flex-flow: row wrap;
-          max-width: ${maxWidth}px;
-        `
-      : css`
-          flex-direction: column;
-        `}
+        ? css`
+            flex-flow: row wrap;
+            max-width: ${maxWidth}px;
+          `
+        : css`
+            flex-direction: column;
+          `}
   align-items: center;
   width: fit-content;
   height: auto;
   text-align: center;
   justify-content: center;
-  column-gap: 9px;
+  column-gap: 4px;
 
   .denom-wrapper {
     display: inline-flex;

diff --git a/...a-extension/src/components/pages/account-details/account-details/account-details.spec.tsx b/...a-extension/src/components/pages/account-details/account-details/account-details.spec.tsx
@@ -10,12 +10,16 @@ describe('AccountDetails Component', () => {
   it('AccountDetails render', () => {
     const args: AccountDetailsProps = {
       hasPrivateKey: true,
+      hasSeedPhrase: true,
       originName: '',
       name: '',
       address: '',
       moveGnoscan: () => {
         return;
       },
+      moveRevealSeedPhrase: () => {
+        return;
+      },
       moveExportPrivateKey: () => {
         return;
       },

diff --git a/packages/adena-extension/src/components/pages/account-details/account-details/index.tsx b/packages/adena-extension/src/components/pages/account-details/account-details/index.tsx
@@ -1,28 +1,32 @@
+import { CopyIconButton, FullButtonRightIcon } from '@components/atoms';
+import { QRCodeSVG } from 'qrcode.react';
 import React, { useCallback } from 'react';
-import { AccountDetailsWrapper } from './account-details.styles';
 import AccountNameInput from '../account-name-input';
-import { QRCodeSVG } from 'qrcode.react';
-import { CopyIconButton, FullButtonRightIcon } from '@components/atoms';
+import { AccountDetailsWrapper } from './account-details.styles';
 
 export interface AccountDetailsProps {
   hasPrivateKey: boolean;
+  hasSeedPhrase: boolean;
   originName: string;
   name: string;
   address: string;
   moveGnoscan: () => void;
+  moveRevealSeedPhrase: () => void;
   moveExportPrivateKey: () => void;
   setName: (name: string) => void;
   reset: () => void;
 }
 
 const AccountDetails: React.FC<AccountDetailsProps> = ({
   hasPrivateKey,
+  hasSeedPhrase,
   originName,
   name,
   address,
   setName,
   reset,
   moveGnoscan,
+  moveRevealSeedPhrase,
   moveExportPrivateKey,
 }) => {
   const onClickViewOnGnoscan = useCallback(() => {
@@ -36,6 +40,13 @@ const AccountDetails: React.FC<AccountDetailsProps> = ({
     moveExportPrivateKey();
   }, [hasPrivateKey, moveExportPrivateKey]);
 
+  const onClickRevealSeedPhrase = useCallback(() => {
+    if (!hasSeedPhrase) {
+      return;
+    }
+    moveRevealSeedPhrase();
+  }, [hasSeedPhrase, moveRevealSeedPhrase]);
+
   return (
     <AccountDetailsWrapper>
       <div className='name-input-wrapper'>
@@ -63,6 +74,11 @@ const AccountDetails: React.FC<AccountDetailsProps> = ({
           title={'Export Private Key'}
           onClick={onClickExportPrivateKey}
         />
+        <FullButtonRightIcon
+          disabled={!hasSeedPhrase}
+          title={'Reveal Seed Phrase'}
+          onClick={onClickRevealSeedPhrase}
+        />
       </div>
     </AccountDetailsWrapper>
   );

diff --git a/...ension/src/components/pages/router/side-menu-account-item/side-menu-account-item.spec.tsx b/...ension/src/components/pages/router/side-menu-account-item/side-menu-account-item.spec.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
+import { GlobalPopupStyle } from '@styles/global-style';
+import theme from '@styles/theme';
+import { render } from '@testing-library/react';
+import { SideMenuAccountItemProps } from '@types';
 import { RecoilRoot } from 'recoil';
 import { ThemeProvider } from 'styled-components';
-import { render } from '@testing-library/react';
-import theme from '@styles/theme';
-import { GlobalPopupStyle } from '@styles/global-style';
 import SideMenuAccountItem from './side-menu-account-item';
-import { SideMenuAccountItemProps } from '@types';
 
 describe('SideMenuAccountItem Component', () => {
   it('SideMenuAccountItem render', () => {
@@ -18,6 +18,10 @@ describe('SideMenuAccountItem Component', () => {
         balance: '',
         type: 'HD_WALLET',
       },
+      focusedAccountId: '',
+      focusAccountId: () => {
+        return;
+      },
       changeAccount: () => {
         return;
       },

diff --git a/...a-extension/src/components/pages/router/side-menu-account-item/side-menu-account-item.tsx b/...a-extension/src/components/pages/router/side-menu-account-item/side-menu-account-item.tsx
@@ -1,23 +1,29 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { Portal, CopyIconButton } from '@components/atoms';
-import { SideMenuAccountItemProps } from '@types';
 import IconEtc from '@assets/icon-etc';
-import IconQRCode from '@assets/icon-qrcode';
 import IconLink from '@assets/icon-link';
+import IconQRCode from '@assets/icon-qrcode';
+import { CopyIconButton, Portal } from '@components/atoms';
+import { SideMenuAccountItemProps } from '@types';
 
+import { GNOT_TOKEN } from '@common/constants/token.constant';
+import { TokenBalance } from '@components/molecules';
+import { useTheme } from 'styled-components';
 import {
-  SideMenuAccountItemWrapper,
   SideMenuAccountItemMoreInfoWrapper,
+  SideMenuAccountItemWrapper,
 } from './side-menu-account-item.styles';
 
 const SideMenuAccountItem: React.FC<SideMenuAccountItemProps> = ({
   selected,
   account,
+  focusedAccountId,
   changeAccount,
+  focusAccountId,
   moveGnoscan,
   moveAccountDetail,
 }) => {
+  const theme = useTheme();
   const { accountId, name, address, balance, type } = account;
   const [openedMoreInfo, setOpenedMoreInfo] = useState(false);
   const [positionX, setPositionX] = useState(0);
@@ -42,16 +48,12 @@ const SideMenuAccountItem: React.FC<SideMenuAccountItemProps> = ({
     }
   }, [type]);
 
-  const onMouseOut = useCallback(() => {
-    setOpenedMoreInfo(false);
-  }, [setOpenedMoreInfo]);
-
   const onClickItem = useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
       event.preventDefault();
       event.stopPropagation();
       changeAccount(accountId);
-      setOpenedMoreInfo(false);
+      focusAccountId(null);
     },
     [changeAccount, account],
   );
@@ -63,25 +65,58 @@ const SideMenuAccountItem: React.FC<SideMenuAccountItemProps> = ({
       const { x, y } = event.currentTarget.getBoundingClientRect();
       setPositionX(x);
       setPositionY(y);
-      setOpenedMoreInfo(!openedMoreInfo);
+      focusAccountId(accountId);
     },
     [openedMoreInfo],
   );
 
+  useEffect(() => {
+    if (!accountId) {
+      return;
+    }
+
+    const opened = accountId === focusedAccountId;
+    setOpenedMoreInfo(opened);
+  }, [accountId, focusedAccountId]);
+
+  useEffect(() => {
+    if (accountId !== focusedAccountId) {
+      return;
+    }
+
+    const closeModal = (): void => {
+      focusAccountId(null);
+    };
+
+    window.addEventListener('click', closeModal);
+    return () => window.removeEventListener('click', closeModal);
+  }, [accountId, focusedAccountId, focusAccountId]);
+
   return (
-    <SideMenuAccountItemWrapper
-      className={selected ? 'selected' : ''}
-      onClick={onClickItem}
-      onMouseLeave={onMouseOut}
-    >
+    <SideMenuAccountItemWrapper className={selected ? 'selected' : ''} onClick={onClickItem}>
       <div className='info-wrapper'>
         <div className='address-wrapper'>
           <span className='name'>{displayName}</span>
-          <CopyIconButton className='copy-button' copyText={address} />
+          <CopyIconButton
+            className='copy-button'
+            copyText={address}
+            onClick={(): void => focusAccountId(null)}
+          />
           {label !== null && <span className='label'>{label}</span>}
         </div>
         <div className='balance-wrapper'>
-          <span className='balance'>{balance}</span>
+          {balance === '-' ? (
+            <span className='balance'>{balance}</span>
+          ) : (
+            <TokenBalance
+              value={balance}
+              denom={GNOT_TOKEN.symbol}
+              fontColor={theme.neutral.a}
+              orientation='HORIZONTAL'
+              minimumFontSize='11px'
+              fontStyleKey='body3Reg'
+            />
+          )}
         </div>
       </div>
 

diff --git a/...ension/src/components/pages/router/side-menu-account-list/side-menu-account-list.spec.tsx b/...ension/src/components/pages/router/side-menu-account-list/side-menu-account-list.spec.tsx
@@ -12,6 +12,10 @@ describe('SideMenuAccountList Component', () => {
     const args: SideMenuAccountListProps = {
       currentAccountId: '',
       accounts: [],
+      focusedAccountId: '',
+      focusAccountId: () => {
+        return; 
+      },
       changeAccount: () => {
         return;
       },

diff --git a/...a-extension/src/components/pages/router/side-menu-account-list/side-menu-account-list.tsx b/...a-extension/src/components/pages/router/side-menu-account-list/side-menu-account-list.tsx
@@ -1,14 +1,16 @@
 import React from 'react';
 
-import { SideMenuAccountListWrapper } from './side-menu-account-list.styles';
-import SideMenuAccountItem from '../side-menu-account-item/side-menu-account-item';
 import { SideMenuAccountListProps } from '@types';
+import SideMenuAccountItem from '../side-menu-account-item/side-menu-account-item';
+import { SideMenuAccountListWrapper } from './side-menu-account-list.styles';
 
 const SideMenuAccountList: React.FC<SideMenuAccountListProps> = ({
   currentAccountId,
   accounts,
+  focusedAccountId,
   changeAccount,
   moveGnoscan,
+  focusAccountId,
   moveAccountDetail,
 }) => {
   return (
@@ -18,7 +20,9 @@ const SideMenuAccountList: React.FC<SideMenuAccountListProps> = ({
           key={index}
           selected={account.accountId === currentAccountId}
           account={account}
+          focusedAccountId={focusedAccountId}
           changeAccount={changeAccount}
+          focusAccountId={focusAccountId}
           moveGnoscan={moveGnoscan}
           moveAccountDetail={moveAccountDetail}
         />