fix: Fix Ui issues (#473)

onbloc · Apr 9, 2024 · fe9f54e · fe9f54e
1 parent b14b190
commit fe9f54e
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 44 deletions.
diff --git a/packages/adena-extension/src/components/atoms/full-button-right-icon/index.tsx b/packages/adena-extension/src/components/atoms/full-button-right-icon/index.tsx
@@ -70,6 +70,7 @@ const ButtonWrapper = styled.button<ButtonStyleProps>`
   }
   ${defaultIconStyle};
   ${mixins.flex({ direction: 'row', justify: 'space-between' })};
+  flex-shrink: 0;
   width: 100%;
   height: 54px;
   padding: 0px 24px 0px 20px;

diff --git a/packages/adena-extension/src/components/atoms/icon/icon-assets/icon-question.tsx b/packages/adena-extension/src/components/atoms/icon/icon-assets/icon-question.tsx
@@ -0,0 +1,28 @@
+import React, { ReactElement } from 'react';
+
+const IconQuestion = ({ className }: { className?: string }): ReactElement => {
+  return (
+    <svg
+      className={className}
+      width='20'
+      height='20'
+      viewBox='0 0 20 20'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <g clipPath='url(#clip0_7878_1569)'>
+        <path
+          d='M9.99935 1.66699C5.39935 1.66699 1.66602 5.40033 1.66602 10.0003C1.66602 14.6003 5.39935 18.3337 9.99935 18.3337C14.5993 18.3337 18.3327 14.6003 18.3327 10.0003C18.3327 5.40033 14.5993 1.66699 9.99935 1.66699ZM10.8327 15.8337H9.16602V14.167H10.8327V15.8337ZM12.5577 9.37533L11.8077 10.142C11.2077 10.7503 10.8327 11.2503 10.8327 12.5003H9.16602V12.0837C9.16602 11.167 9.54102 10.3337 10.141 9.72533L11.1743 8.67533C11.4827 8.37533 11.666 7.95866 11.666 7.50033C11.666 6.58366 10.916 5.83366 9.99935 5.83366C9.08268 5.83366 8.33268 6.58366 8.33268 7.50033H6.66602C6.66602 5.65866 8.15768 4.16699 9.99935 4.16699C11.841 4.16699 13.3327 5.65866 13.3327 7.50033C13.3327 8.23366 13.0327 8.90033 12.5577 9.37533Z'
+          fill='#6C717A'
+        />
+      </g>
+      <defs>
+        <clipPath id='clip0_7878_1569'>
+          <rect width='20' height='20' fill='white' />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default IconQuestion;
diff --git a/...xtension/src/components/molecules/approve-ledger-loading/approve-ledger-loading.styles.ts b/...xtension/src/components/molecules/approve-ledger-loading/approve-ledger-loading.styles.ts
@@ -4,11 +4,14 @@ import mixins from '@styles/mixins';
 
 export const ApproveLedgerLoadingWrapper = styled.div`
   ${mixins.flex({ justify: 'flex-start' })};
+  width: 100%;
   height: auto;
   padding: 50px 20px 120px;
   align-self: center;
 
   .icon {
+    display: flex;
+    flex-shrink:
     margin: 0 auto 20px auto;
   }
 

diff --git a/...omponents/molecules/transaction-history/transaction-history/transaction-history.styles.ts b/...omponents/molecules/transaction-history/transaction-history/transaction-history.styles.ts
@@ -4,18 +4,17 @@ import styled from 'styled-components';
 export const TransactionHistoryWrapper = styled.div`
   ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
-  height: 100%;
+  height: auto;
 
   & > div + div {
     margin-top: 24px;
   }
-  overflow-y: auto;
 `;
 
 export const TransactionHistoryDescriptionWrapper = styled.div`
   ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
-  height: 100%;
+  height: auto;
   padding-top: 140px;
 
   text-align: center;

diff --git a/...-extension/src/components/pages/transfer-ledger-loading/transfer-ledger-loading.styles.ts b/...-extension/src/components/pages/transfer-ledger-loading/transfer-ledger-loading.styles.ts
@@ -5,8 +5,8 @@ export const TransferLedgerLoadingWrapper = styled.div`
   ${mixins.flex({ align: 'normal', justify: 'flex-start' })};
   position: relative;
   width: 100%;
-  height: 100%;
-  min-height: 444px;
+  height: auto;
+  padding-bottom: 120px;
 
   @keyframes rotate {
     from {
@@ -22,6 +22,8 @@ export const TransferLedgerLoadingWrapper = styled.div`
   }
 
   .icon {
+    display: flex;
+    flex-shrink: 0;
     width: 100px;
     height: 100px;
     margin: 20px auto;

diff --git a/packages/adena-extension/src/hooks/use-token-metainfo.tsx b/packages/adena-extension/src/hooks/use-token-metainfo.tsx
@@ -37,14 +37,33 @@ export type UseTokenMetainfoReturn = {
     denom: string,
     convertType?: 'COMMON' | 'MINIMAL',
   ) => { value: string; denom: string };
-  getTokenImage: (token: TokenModel) => string | null | undefined;
-  getTokenImageByDenom: (denom: string) => string | undefined;
-  getTokenImageByPkgPath: (pkgPath: string) => string | undefined;
+  getTokenImage: (token: TokenModel) => string | null;
+  getTokenImageByDenom: (denom: string) => string | null;
+  getTokenImageByPkgPath: (pkgPath: string) => string | null;
 };
 
+function makeTokenKeyByDenom(denom: string): string {
+  return `native-${denom.toLowerCase()}`;
+}
+
+function makeTokenKeyByPackagePath(packagePath: string): string {
+  return `grc20-${packagePath.toLowerCase()}`;
+}
+
+function makeTokenKey(token: TokenModel): string {
+  if (isNativeTokenModel(token)) {
+    return makeTokenKeyByDenom(token.denom);
+  }
+  if (isGRC20TokenModel(token)) {
+    return makeTokenKeyByPackagePath(token.pkgPath);
+  }
+  return `${token.symbol}`;
+}
+
 export const useTokenMetainfo = (): UseTokenMetainfoReturn => {
   const { balanceService, tokenService } = useAdenaContext();
   const [tokenMetainfos, setTokenMetainfo] = useRecoilState(TokenState.tokenMetainfos);
+  const [tokenLogoMap, setTokenLogoMap] = useRecoilState(TokenState.tokenLogoMap);
   const { currentAccount } = useCurrentAccount();
   const { currentNetwork } = useNetwork();
 
@@ -59,6 +78,16 @@ export const useTokenMetainfo = (): UseTokenMetainfoReturn => {
       await tokenService.initAccountTokenMetainfos(currentAccount.id);
       const tokenMetainfos = await tokenService.getTokenMetainfosByAccountId(currentAccount.id);
       setTokenMetainfo([...tokenMetainfos]);
+
+      const tokenLogoMap = tokenMetainfos.reduce<Record<string, string | null>>(
+        (accum, current) => {
+          const key = makeTokenKey(current);
+          accum[key] = current.image || null;
+          return accum;
+        },
+        {},
+      );
+      setTokenLogoMap(tokenLogoMap);
     }
   };
 
@@ -95,33 +124,19 @@ export const useTokenMetainfo = (): UseTokenMetainfoReturn => {
     };
   };
 
-  const getTokenImage = (token: TokenModel): string | null | undefined => {
-    if (isNativeTokenModel(token)) {
-      return getTokenImageByDenom(token.symbol);
-    }
-    if (isGRC20TokenModel(token)) {
-      return getTokenImageByPkgPath(token.pkgPath);
-    }
-    return null;
+  const getTokenImage = (token: TokenModel): string | null => {
+    const key = makeTokenKey(token);
+    return tokenLogoMap[key] || null;
   };
 
-  const getTokenImageByDenom = (denom: string): string | undefined => {
-    const image = tokenService
-      .getTokenMetainfos()
-      .find((info) => info.symbol.toUpperCase() === denom.toUpperCase())?.image;
-    if (image) {
-      return image;
-    }
-    return tokenService
-      .getTokenMetainfos()
-      .find((info) => isNativeTokenModel(info) && info.denom.toUpperCase() === denom.toUpperCase())
-      ?.image;
+  const getTokenImageByDenom = (denom: string): string | null => {
+    const key = makeTokenKeyByDenom(denom);
+    return tokenLogoMap[key] || null;
   };
 
-  const getTokenImageByPkgPath = (pkgPath: string): string | undefined => {
-    return tokenService
-      .getTokenMetainfos()
-      .find((info) => isGRC20TokenModel(info) && info.pkgPath === pkgPath)?.image;
+  const getTokenImageByPkgPath = (denom: string): string | null => {
+    const key = makeTokenKeyByPackagePath(denom);
+    return tokenLogoMap[key] || null;
   };
 
   const addTokenMetainfo = async (tokenMetainfo: GRC20TokenModel): Promise<boolean> => {

diff --git a/packages/adena-extension/src/pages/popup/wallet/history/index.tsx b/packages/adena-extension/src/pages/popup/wallet/history/index.tsx
@@ -19,9 +19,9 @@ import useAppNavigate from '@hooks/use-app-navigate';
 const StyledHistoryLayout = styled.div`
   ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
-  height: 100%;
+  height: calc(100vh - 48px - 60px);
   padding: 24px 20px;
-  margin-bottom: 60px;
+  overflow: auto;
 `;
 
 const StyledTitleWrapper = styled.div`
@@ -36,7 +36,7 @@ const HistoryContainer: React.FC = () => {
   const { navigate } = useAppNavigate();
   const { currentAddress } = useCurrentAccount();
   const { transactionHistoryService } = useAdenaContext();
-  const { convertDenom, getTokenImageByDenom } = useTokenMetainfo();
+  const { tokenMetainfos, convertDenom, getTokenImageByDenom } = useTokenMetainfo();
   const [bodyElement, setBodyElement] = useState<HTMLBodyElement | undefined>();
   const [loadingNextFetch, setLoadingNextFetch] = useState(false);
   const { saveScrollPosition } = useScrollHistory();
@@ -49,6 +49,7 @@ const HistoryContainer: React.FC = () => {
         const from = allPosts.reduce((sum, { txs }) => sum + txs.length, 0);
         return lastPage.next ? from : undefined;
       },
+      enabled: tokenMetainfos.length > 0,
     },
   );
 

diff --git a/packages/adena-extension/src/pages/popup/wallet/token-details/index.tsx b/packages/adena-extension/src/pages/popup/wallet/token-details/index.tsx
@@ -116,7 +116,7 @@ export const TokenDetails = (): JSX.Element => {
   const { currentAccount, currentAddress } = useCurrentAccount();
   useNetwork();
   const tokenBalance = params?.tokenBalance;
-  const { convertDenom, getTokenImageByDenom } = useTokenMetainfo();
+  const { tokenMetainfos, convertDenom, getTokenImageByDenom } = useTokenMetainfo();
   const { transactionHistoryService } = useAdenaContext();
   const [bodyElement, setBodyElement] = useState<HTMLBodyElement | undefined>();
   const [loadingNextFetch, setLoadingNextFetch] = useState(false);
@@ -136,6 +136,7 @@ export const TokenDetails = (): JSX.Element => {
         const from = allPosts.reduce((sum, { txs }) => sum + txs.length, 0);
         return lastPage.next ? from : undefined;
       },
+      enabled: tokenMetainfos.length > 0,
     },
   );
 

diff --git a/packages/adena-extension/src/pages/popup/wallet/transaction-detail/index.tsx b/packages/adena-extension/src/pages/popup/wallet/transaction-detail/index.tsx
@@ -197,6 +197,7 @@ const TokenBox = styled.div<{ color: string }>`
   border-radius: 18px;
   padding: 0px 15px;
   margin: 18px 0px 8px;
+
   .tx-symbol {
     width: 30px;
     height: 30px;

diff --git a/packages/adena-extension/src/router/web/Header.tsx b/packages/adena-extension/src/router/web/Header.tsx
@@ -1,39 +1,57 @@
 import { ReactElement } from 'react';
-import styled, { useTheme } from 'styled-components';
+import styled from 'styled-components';
 
 import logo from '@assets/web/brand.svg';
-import questionCircle from '@assets/web/question-circle.svg';
 
 import mixins from '@styles/mixins';
 import { Pressable, Row, WebText, WebImg } from '@components/atoms';
 import useLink from '@hooks/use-link';
 import { ADENA_HELP_PAGE } from '@common/constants/resource.constant';
+import IconQuestion from '@components/atoms/icon/icon-assets/icon-question';
 
 const StyledContainer = styled.header`
   ${mixins.flex({ direction: 'row', justify: 'space-between' })}
   padding: 0 74px;
   height: 80px;
 `;
 
+const StyedHelpButton = styled(Pressable)`
+  color: ${({ theme }): string => theme.webNeutral._600};
+  transition: 0.2s;
+
+  .icon-help path {
+    transition: 0.2s;
+  }
+
+  &:hover {
+    color: ${({ theme }): string => theme.webNeutral._100};
+
+    .icon-help path {
+      fill: ${({ theme }): string => theme.webNeutral._100};
+    }
+  }
+`;
+
+const StyedHoverText = styled(WebText)`
+  color: inherit;
+`;
+
 const Header = (): ReactElement => {
-  const theme = useTheme();
   const { openLink } = useLink();
 
   return (
     <StyledContainer>
       <WebImg src={logo} />
-      <Pressable
+      <StyedHelpButton
         onClick={(): void => {
           openLink(ADENA_HELP_PAGE);
         }}
       >
         <Row style={{ columnGap: 6 }}>
-          <WebImg src={questionCircle} />
-          <WebText type='title4' color={theme.webNeutral._600}>
-            Help
-          </WebText>
+          <IconQuestion className='icon-help' />
+          <StyedHoverText type='title4'>Help</StyedHoverText>
         </Row>
-      </Pressable>
+      </StyedHelpButton>
     </StyledContainer>
   );
 };

diff --git a/packages/adena-extension/src/states/token.ts b/packages/adena-extension/src/states/token.ts
@@ -11,3 +11,8 @@ export const accountTokenMetainfos = atom<TokenModel[]>({
   key: 'token/accountTokenMetainfos',
   default: [],
 });
+
+export const tokenLogoMap = atom<Record<string, string | null>>({
+  key: 'token/tokenLogoMap',
+  default: {},
+});