fix: Fix UI Issues (#369)

onbloc · Feb 2, 2024 · b3fc5d2 · b3fc5d2
2 parents b841319 + 2040640
commit b3fc5d2
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 57 deletions.
diff --git a/packages/adena-extension/src/components/atoms/copy-button/index.tsx b/packages/adena-extension/src/components/atoms/copy-button/index.tsx
@@ -5,7 +5,7 @@ import { getTheme } from '@styles/theme';
 import { Text, Button } from '@components/atoms';
 import mixins from '@styles/mixins';
 
-const CopyButton = styled(Button)<{ isClicked: boolean }>`
+const CopyButton = styled(Button) <{ isClicked: boolean }>`
   ${mixins.flex({ direction: 'row' })};
   height: 25px;
   border-radius: 12.5px;
@@ -27,6 +27,9 @@ export const Copy = ({
 
   const theme = useTheme();
   const handleButtonClick = useCallback(() => {
+    if (isClicked) {
+      return;
+    }
     setIsClicked((prev: boolean) => !prev);
     navigator.clipboard.writeText(copyStr);
   }, [isClicked, copyStr]);
@@ -42,7 +45,6 @@ export const Copy = ({
     <CopyButton
       isClicked={isClicked}
       onClick={handleButtonClick}
-      disabled={isClicked}
       tabIndex={tabIndex && tabIndex}
       bgColor={theme.neutral._7}
     >

diff --git a/packages/adena-extension/src/components/molecules/web-title-with-description/index.tsx b/packages/adena-extension/src/components/molecules/web-title-with-description/index.tsx
@@ -0,0 +1,47 @@
+import { View, WebText } from '@components/atoms';
+import { WebFontType } from '@styles/theme';
+import React, { useMemo } from 'react';
+import styled, { useTheme } from 'styled-components';
+
+const StyledContainer = styled(View)`
+  width: 100%;
+  row-gap: 16px;
+`;
+
+interface TextOption {
+  text: string;
+  fontType?: WebFontType;
+}
+
+export interface WebTitleWithDescriptionProps {
+  title: TextOption;
+  description: TextOption;
+}
+
+const WebTitleWithDescription: React.FC<WebTitleWithDescriptionProps> = ({
+  title,
+  description,
+}) => {
+  const theme = useTheme();
+
+  const descriptionHeight = useMemo(() => {
+    return `${description.text.split('\n').length * 2 - 1}em`;
+  }, [description.text]);
+
+  return (
+    <StyledContainer>
+      <WebText type={title.fontType ?? 'headline2'}>{title.text}</WebText>
+      <View style={{ height: descriptionHeight }}>
+        <WebText
+          style={{ marginTop: '-0.2em' }}
+          type={description.fontType ?? 'body4'}
+          color={theme.webNeutral._500}
+        >
+          {description.text}
+        </WebText>
+      </View>
+    </StyledContainer>
+  );
+};
+
+export default WebTitleWithDescription;
diff --git a/packages/adena-extension/src/hooks/web/google-login/use-google-login-screen.ts b/packages/adena-extension/src/hooks/web/google-login/use-google-login-screen.ts
@@ -101,6 +101,7 @@ const useGoogleLoginScreen = (): UseGoogleLoginReturn => {
       const clone = wallet.clone();
       const web3AuthKeyring = await Web3AuthKeyring.fromPrivateKeyStr(privateKey);
       const account = await SingleAccount.createBy(web3AuthKeyring, clone.nextAccountName);
+      account.index = clone.lastAccountIndex + 1;
       clone.addAccount(account);
       clone.addKeyring(web3AuthKeyring);
       const storedAccount = clone.accounts.find((storedAccount) => storedAccount.id === account.id);

diff --git a/packages/adena-extension/src/pages/web/setup-airgap-screen/complete.tsx b/packages/adena-extension/src/pages/web/setup-airgap-screen/complete.tsx
@@ -1,21 +1,18 @@
 import React, { useCallback } from 'react';
-import styled, { useTheme } from 'styled-components';
+import styled from 'styled-components';
 
-import { Row, View, WebButton, WebImg, WebInput, WebText } from '@components/atoms';
+import { Row, View, WebButton, WebImg, WebInput } from '@components/atoms';
 
 import IconAirgap from '@assets/web/airgap-green.svg';
 import IconCheck from '@assets/web/web-check-circle.svg';
+import WebTitleWithDescription from '@components/molecules/web-title-with-description';
 
 const StyledContainer = styled(View)`
   width: 100%;
   row-gap: 24px;
   height: 350px;
 `;
 
-const StyledMessageBox = styled(View)`
-  row-gap: 16px;
-`;
-
 const StyledInputBox = styled(Row)`
   gap: 12px;
   width: calc(100% + 30px);
@@ -38,23 +35,22 @@ const SetupAirgapCompleteScreen: React.FC<SetupAirgapCompleteScreenProps> = ({
   address,
   addAccount,
 }) => {
-  const theme = useTheme();
-
   const onClickNext = useCallback(() => {
     addAccount();
   }, [addAccount]);
 
   return (
     <StyledContainer>
-      <WebImg src={IconAirgap} size={90} />
-      <StyledMessageBox>
-        <WebText type='headline3'>Account Synced!</WebText>
-        <WebText type='body4' color={theme.webNeutral._500} style={{ whiteSpace: 'pre-line' }}>
-          {
-            'Your account has been synced to Adena.\nConfirm your address below and click on Next to continue.'
-          }
-        </WebText>
-      </StyledMessageBox>
+      <WebImg src={IconAirgap} size={88} />
+
+      <WebTitleWithDescription
+        title={{
+          text: 'Account synced!',
+        }}
+        description={{
+          text: 'Your account has been synced to Adena.\nConfirm your address below and click on Next to continue.',
+        }}
+      />
 
       <StyledInputBox>
         <StyledInput

diff --git a/packages/adena-extension/src/pages/web/setup-airgap-screen/enter-address.tsx b/packages/adena-extension/src/pages/web/setup-airgap-screen/enter-address.tsx
@@ -1,20 +1,17 @@
 import React, { useCallback, useMemo } from 'react';
-import styled, { useTheme } from 'styled-components';
+import styled from 'styled-components';
 
-import { View, WebButton, WebErrorText, WebImg, WebInput, WebText } from '@components/atoms';
+import { View, WebButton, WebErrorText, WebImg, WebInput } from '@components/atoms';
 
 import IconAirgap from '@assets/web/airgap-green.svg';
+import WebTitleWithDescription from '@components/molecules/web-title-with-description';
 
 const StyledContainer = styled(View)`
   width: 100%;
   height: 350px;
   row-gap: 24px;
 `;
 
-const StyledMessageBox = styled(View)`
-  row-gap: 16px;
-`;
-
 const StyledInputBox = styled(View)`
   row-gap: 12px;
   width: 100%;
@@ -53,7 +50,6 @@ const SetupAirgapEnterAddress: React.FC<SetupAirgapEnterAddressProps> = ({
   changeAddress,
   confirmAddress,
 }) => {
-  const theme = useTheme();
 
   const disabledNextButton = useMemo(() => {
     return address === '' || errorMessage !== null;
@@ -66,13 +62,16 @@ const SetupAirgapEnterAddress: React.FC<SetupAirgapEnterAddressProps> = ({
 
   return (
     <StyledContainer>
-      <WebImg src={IconAirgap} size={90} />
-      <StyledMessageBox>
-        <WebText type='headline3'>Enter Your Address</WebText>
-        <WebText type='body4' color={theme.webNeutral._500} style={{ whiteSpace: 'pre-line' }}>
-          {'Enter the address that you will use to set up your airgapped account.'}
-        </WebText>
-      </StyledMessageBox>
+      <WebImg src={IconAirgap} size={88} />
+
+      <WebTitleWithDescription
+        title={{
+          text: 'Enter Your Address',
+        }}
+        description={{
+          text: 'Enter the address that you will use to set up your airgapped account.',
+        }}
+      />
 
       <StyledInputBox>
         <StyledInput

diff --git a/packages/adena-extension/src/pages/web/setup-airgap-screen/index.tsx b/packages/adena-extension/src/pages/web/setup-airgap-screen/index.tsx
@@ -46,7 +46,9 @@ const SetupAirgapScreen: React.FC = () => {
         <WebMainHeader stepLength={4} onClickGoBack={onClickBack} currentStep={stopNo} />
       )}
 
-      {setupAirgapState === 'INIT' && <SetupAirgapInit initSetup={initSetup} />}
+      {setupAirgapState === 'INIT' && (
+        <SetupAirgapInit initSetup={initSetup} />
+      )}
       {setupAirgapState === 'ENTER_ADDRESS' && (
         <SetupAirgapEnterAddress
           address={address}

diff --git a/packages/adena-extension/src/pages/web/setup-airgap-screen/init.tsx b/packages/adena-extension/src/pages/web/setup-airgap-screen/init.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import styled, { useTheme } from 'styled-components';
+import styled from 'styled-components';
 
 import { Pressable, Row, View, WebButton, WebImg, WebText } from '@components/atoms';
 import WebWarningDescriptionBox from '@components/molecules/web-warning-description-box/web-warning-description-box';
@@ -8,16 +8,13 @@ import IconLink from '@assets/web/link.svg';
 import IconAirgap from '@assets/web/airgap-green.svg';
 import useLink from '@hooks/use-link';
 import { ADENA_DOCS_PAGE, GNO_CLI_HELP_PAGE } from '@common/constants/resource.constant';
+import WebTitleWithDescription from '@components/molecules/web-title-with-description';
 
 const StyledContainer = styled(View)`
   width: 100%;
   row-gap: 24px;
 `;
 
-const StyledMessageBox = styled(View)`
-  row-gap: 16px;
-`;
-
 const StyledButtonWrapper = styled(View)`
   align-items: flex-start;
 `;
@@ -40,7 +37,6 @@ interface SetupAirgapInitProps {
 }
 
 const SetupAirgapInit: React.FC<SetupAirgapInitProps> = ({ initSetup }) => {
-  const theme = useTheme();
   const { openLink } = useLink();
 
   const moveGnoCliHelp = useCallback(() => {
@@ -53,16 +49,16 @@ const SetupAirgapInit: React.FC<SetupAirgapInitProps> = ({ initSetup }) => {
 
   return (
     <StyledContainer>
-      <WebImg src={IconAirgap} size={90} />
+      <WebImg src={IconAirgap} size={88} />
 
-      <StyledMessageBox>
-        <WebText type='headline3'>Set Up Airgap Account</WebText>
-        <WebText type='body4' color={theme.webNeutral._500} style={{ whiteSpace: 'pre-line' }}>
-          {
-            'You can import an account from your custom airgap setup. To sign\ntransactions, use the Gnoland CLI.'
-          }
-        </WebText>
-      </StyledMessageBox>
+      <WebTitleWithDescription
+        title={{
+          text: 'Set Up Airgap Account',
+        }}
+        description={{
+          text: 'You can import an account from your custom airgap setup. To sign\ntransactions, use the Gnoland CLI.',
+        }}
+      />
 
       <WebWarningDescriptionBox description={description} />
 
@@ -78,7 +74,7 @@ const SetupAirgapInit: React.FC<SetupAirgapInitProps> = ({ initSetup }) => {
 
       <View style={{ gap: 8 }}>
         <Pressable onClick={moveGnoCliHelp}>
-          <StyledLinkWrapper onClick={moveGnoCliHelp}>
+          <StyledLinkWrapper>
             <WebText type='title6' color='#6C717A'>
               How to use the Gno CLI
             </WebText>

diff --git a/packages/adena-extension/src/router/popup/header/index.tsx b/packages/adena-extension/src/router/popup/header/index.tsx
@@ -32,6 +32,7 @@ export const Header = (): JSX.Element => {
   const ApproveLogin = useMatch(RoutePath.ApproveLogin);
   const approveSign = useMatch(RoutePath.ApproveSign);
   const approveTransaction = useMatch(RoutePath.ApproveTransaction);
+  const approveSignFailed = useMatch(RoutePath.ApproveSignFailed);
   const wallet = useMatch('/wallet/*');
   const nft = useMatch(RoutePath.Nft);
 
@@ -67,7 +68,7 @@ export const Header = (): JSX.Element => {
       }
       return <ProgressMenu progressLevel={'first'} />;
     }
-    if (approveEstablish || approveTransaction || approveSign) {
+    if (approveEstablish || approveTransaction || approveSign || approveSignFailed) {
       return <ApproveMenu />;
     }
     if (createPassword) {

diff --git a/packages/adena-extension/src/router/popup/index.tsx b/packages/adena-extension/src/router/popup/index.tsx
@@ -107,7 +107,6 @@ export const PopupRouter = (): JSX.Element => {
           element={<ApproveSignTransactionLedgerLoading />}
         />
         <Route path={RoutePath.ApproveSignFailed} element={<ApproveSignFailedScreen />} />
-        <Route path={RoutePath.AboutAdena} element={<ApproveLogin />} />
         <Route path={RoutePath.ApproveLogin} element={<ApproveLogin />} />
         <Route path={RoutePath.ApproveEstablish} element={<ApproveEstablish />} />
         <Route path={RoutePath.ApproveChangingNetwork} element={<ApproveChangingNetworkPage />} />

diff --git a/packages/adena-extension/src/styles/theme.ts b/packages/adena-extension/src/styles/theme.ts
@@ -186,7 +186,6 @@ export const webFonts: Record<WebFontType, FlattenSimpleInterpolation> = {
     letter-spacing: -0.36px;
   `,
   body4: css`
-    font-family: Inter;
     font-size: 16px;
     font-weight: 400;
     line-height: 23px; // 24px makes a pixel issue in the chrome
@@ -409,10 +408,10 @@ const theme = {
   webWarning: WebWarning,
 };
 
-export const getTheme =
-  <T1 extends keyof DefaultTheme, T2 extends keyof DefaultTheme[T1]>(val1: T1, val2: T2) =>
-  ({ theme }: { theme: DefaultTheme }): DefaultTheme[T1][T2] =>
-    theme[val1][val2];
+export const getTheme = <T1 extends keyof DefaultTheme, T2 extends keyof DefaultTheme[T1]>(
+  val1: T1,
+  val2: T2,
+) => ({ theme }: { theme: DefaultTheme }): DefaultTheme[T1][T2] => theme[val1][val2];
 
 export default theme;