fix: Fix a Web UI Bugs

packages/adena-extension/src/common/constants/resource.constant.ts

@@ -1,2 +1,3 @@
 export const ADENA_TERMS_PAGE = 'https://adena.app/terms' as const;
 export const ADENA_DOCS_PAGE = 'https://docs.adena.app' as const;
+export const GNO_CLI_HELP_PAGE = 'https://docs.onbloc.xyz/docs/cli' as const;

packages/adena-extension/src/components/atoms/rolling-number/index.tsx

@@ -0,0 +1,88 @@
+import { WebFontType } from '@styles/theme';
+import React, { useEffect, useState } from 'react';
+import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
+import { View } from '../base';
+import { WebText } from '../web-text';
+
+export const StyledWrapper = styled(View) <{ active: boolean, height?: number }>`
+  width: fit-content;
+  height: ${({ height }): string => height ? `${height}px` : '1em'};
+  flex-direction: column;
+  overflow: hidden;
+
+  @keyframes rolling-animation {
+    from {
+      transform: translate(0, 0);
+    }
+
+    to {
+      transform: translate(0, -100%);
+    }
+  }
+
+  ${({ active }): FlattenSimpleInterpolation | string => active ? css`
+    & > * {
+      animation: rolling-animation 0.2s linear forwards;
+    }
+  ` : ''}
+`;
+
+
+export interface RollingNumberProps {
+  value: number;
+  height?: number;
+  type: WebFontType;
+  color?: string;
+  style?: React.CSSProperties;
+  textCenter?: boolean;
+}
+
+const RollingNumber: React.FC<RollingNumberProps> = ({
+  height,
+  value,
+  type,
+  color,
+  style,
+  textCenter,
+}) => {
+  const [currentValue, setCurrentValue] = useState(value);
+  const [animated, setAnimated] = useState(false);
+
+  useEffect(() => {
+    if (currentValue !== value) {
+      setAnimated(true);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    if (animated) {
+      setTimeout(() => {
+        setAnimated(false);
+        setCurrentValue(value);
+      }, 200);
+    }
+  }, [animated]);
+
+  return (
+    <StyledWrapper active={animated} height={height}>
+      <WebText
+        type={type}
+        color={color}
+        style={style}
+        textCenter={textCenter}
+      >
+        {currentValue}
+      </WebText>
+      <WebText
+        type={type}
+        color={color}
+        style={style}
+        textCenter={textCenter}
+      >
+        {value}
+      </WebText>
+    </StyledWrapper>
+  );
+};
+
+export default RollingNumber;

packages/adena-extension/src/components/atoms/rolling-number/rolling-number.spec.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { RecoilRoot } from 'recoil';
+import { ThemeProvider } from 'styled-components';
+import { render } from '@testing-library/react';
+import theme from '@styles/theme';
+import { GlobalWebStyle } from '@styles/global-style';
+import RollingNumber from '.';
+
+describe('RollingNumber Component', () => {
+  it('RollingNumber render', () => {
+
+    render(
+      <RecoilRoot>
+        <GlobalWebStyle />
+        <ThemeProvider theme={theme}>
+          <RollingNumber
+            type='body1'
+            value={1}
+          />
+        </ThemeProvider>
+      </RecoilRoot>,
+    );
+  });
+});

packages/adena-extension/src/components/atoms/rolling-number/rolling-number.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import RollingNumber from '.';
+
+export default {
+  title: 'components/atoms/RollingNumber',
+  component: RollingNumber,
+} as Meta<typeof RollingNumber>;
+
+export const Default: StoryObj<typeof RollingNumber> = {
+  args: {
+    value: 3,
+    type: 'body6',
+    color: '#FBC224',
+  },
+};

packages/adena-extension/src/components/atoms/web-button/index.tsx

@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';
 import styled from 'styled-components';
 
-import { WebFontType } from '@styles/theme';
+import { getTheme, WebFontType } from '@styles/theme';
 import IconRight from '@assets/web/chevron-right.svg';
 
 import { WebImg } from '../web-img';
@@ -13,18 +13,18 @@ type WebButtonProps = {
   textType?: WebFontType;
   figure: 'primary' | 'secondary' | 'tertiary' | 'quaternary';
 } & (
-  | { text: string; rightIcon?: 'chevronRight' }
-  | {
+    | { text: string; rightIcon?: 'chevronRight' }
+    | {
       children: ReactNode;
     }
-) &
+  ) &
   ButtonHTMLAttributes<HTMLButtonElement>;
 
 const StyledButtonBase = styled.button<{ size: 'full' | 'large' | 'small' }>`
   cursor: pointer;
   border: transparent;
   border-radius: 14px;
-  padding: ${({ size }): string => (size === 'large' ? '12px 16px 16px' : '8px 24px')};
+  padding: ${({ size }): string => (size === 'large' ? '12px 16px 16px' : '8px 16px')};
   display: flex;
   flex-direction: row;
   width: ${({ size }): string => (size === 'full' ? '100%' : 'auto')};
@@ -37,17 +37,20 @@ const StyledButtonBase = styled.button<{ size: 'full' | 'large' | 'small' }>`
 `;
 
 const StyledButtonPrimary = styled(StyledButtonBase)`
+  color ${getTheme('webNeutral', '_100')};
   outline: 1px solid rgba(255, 255, 255, 0.4);
   background: linear-gradient(180deg, #0059ff 0%, #004bd6 100%);
 
   :hover {
+    color ${getTheme('webNeutral', '_100')};
     outline: 2px solid rgba(255, 255, 255, 0.4);
     background: linear-gradient(180deg, #0059ff 0%, #004bd6 100%);
     box-shadow: 0px 0px 24px 0px rgba(0, 89, 255, 0.32), 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
       0px 1px 2px 0px rgba(0, 0, 0, 0.06);
   }
 
   :active {
+    color ${getTheme('webNeutral', '_100')};
     outline: 2px solid rgba(255, 255, 255, 0.4);
     background: linear-gradient(180deg, #0059ff 0%, #004bd6 100%);
     box-shadow: 0px 0px 24px 0px rgba(0, 89, 255, 0.32), 0px 0px 0px 3px rgba(0, 89, 255, 0.16),
@@ -56,31 +59,37 @@ const StyledButtonPrimary = styled(StyledButtonBase)`
 `;
 
 const StyledButtonSecondary = styled(StyledButtonBase)`
+  color: #ADCAFF;
   outline: 1px solid rgba(122, 169, 255, 0.24);
   background: rgba(0, 89, 255, 0.16);
 
   :hover {
+    color: #ADCAFF;
     outline: 2px solid rgba(122, 169, 255, 0.24);
     background: rgba(0, 89, 255, 0.2);
     box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
   }
 
   :active {
+    color: #7AA9FF;
     outline: 2px solid rgba(122, 169, 255, 0.24);
     background: rgba(0, 89, 255, 0.2);
   }
 `;
 
 const StyledButtonTertiary = styled(StyledButtonBase)`
+  color ${getTheme('webNeutral', '_300')};
   outline: 1px solid rgba(188, 197, 214, 0.16);
   background: rgba(188, 197, 214, 0.04);
 
   :hover {
+    color ${getTheme('webNeutral', '_300')};
     outline: 2px solid rgba(188, 197, 214, 0.16);
     background: rgba(188, 197, 214, 0.06);
   }
 
   :active {
+    color ${getTheme('webNeutral', '_100')};
     outline: 1px solid rgba(188, 197, 214, 0.24);
     background: rgba(188, 197, 214, 0.04);
     box-shadow: 0px 0px 16px 0px rgba(255, 255, 255, 0.04),

packages/adena-extension/src/components/atoms/web-input/index.tsx

@@ -15,12 +15,13 @@ export const WebInput = styled.input<InputProps>`
   border: 1px solid;
   padding: 12px 16px;
   border-color: ${({ error, theme }): string => (error ? theme.webError._200 : theme.webNeutral._800)};
-  background-color: ${({ error, theme }): string => (error ? theme.webError._300 : 'transparent')};
+  background-color: ${({ error, theme }): string => (error ? theme.webError._300 : theme.webNeutral._900)};
 
   ::placeholder {
     color: ${getTheme('webNeutral', '_700')};
   }
   :focus {
+    background-color: ${({ error, theme }): string => (error ? theme.webError._300 : theme.webInput._100)};
     box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
       0px 1px 2px 0px rgba(0, 0, 0, 0.06);
   }

packages/adena-extension/src/components/atoms/web-text/index.tsx

@@ -1,18 +1,18 @@
-import React, { ReactElement } from 'react';
+import React, { CSSProperties, ReactElement } from 'react';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';
 
-import { WebFontType, getTheme, webFonts } from '@styles/theme';
+import { WebFontType, webFonts } from '@styles/theme';
 
 type FormTextProps = {
   type: WebFontType;
   children: string | number;
-  color?: string;
+  color?: CSSProperties['color'];
   style?: React.CSSProperties;
   textCenter?: boolean;
 };
 
-const StyledContainer = styled.div<{ type: WebFontType }>`
-  color: ${getTheme('webNeutral', '_100')};
+const StyledContainer = styled.div<{ type: WebFontType, color?: CSSProperties['color']; }>`
+  color: ${({ color }): CSSProperties['color'] => color ? color : '#FAFCFF'};
   ${({ type }): FlattenSimpleInterpolation => webFonts[type]}
   white-space: pre-wrap;
 `;

packages/adena-extension/src/components/molecules/terms-checkbox/index.tsx

@@ -29,7 +29,7 @@ const Wrapper = styled.div<{ margin?: string }>`
 const Label = styled.label<{ checkboxPos: CheckboxPos }>`
   ${mixins.flex({ direction: 'row', justify: 'flex-start' })};
   position: relative;
-  padding-left: 32px;
+  padding-left: 28px;
   cursor: pointer;
   &:before {
     ${({ checkboxPos }): CSSProp =>
@@ -54,6 +54,7 @@ const Label = styled.label<{ checkboxPos: CheckboxPos }>`
 `;
 
 const Input = styled.input`
+  display: none;
   &[type='checkbox'] {
     width: 0px;
     height: 0px;

packages/adena-extension/src/components/pages/web/loading-accounts/index.tsx

@@ -0,0 +1,35 @@
+import { ReactElement } from 'react';
+import styled, { useTheme } from 'styled-components';
+
+import AnimationLoadingAccount from '@assets/web/loading-account-idle.gif';
+
+import { View, WebImg, WebText } from '@components/atoms';
+
+const StyledContainer = styled(View)`
+  row-gap: 24px;
+  align-items: center;
+`;
+
+const StyledMessageBox = styled(View)`
+  row-gap: 16px;
+`;
+
+const WebLoadingAccounts: React.FC = (): ReactElement => {
+  const theme = useTheme();
+
+  return (
+    <StyledContainer>
+      <WebImg src={AnimationLoadingAccount} height={120} />
+      <StyledMessageBox>
+        <WebText type='headline2' textCenter>
+          Loading Accounts
+        </WebText>
+        <WebText type='body6' color={theme.webNeutral._500} textCenter>
+          We’re loading accounts. This will take a few seconds...
+        </WebText>
+      </StyledMessageBox>
+    </StyledContainer>
+  );
+};
+
+export default WebLoadingAccounts;

packages/adena-extension/src/components/pages/web/main-header/index.tsx

@@ -19,6 +19,10 @@ const StyledDot = styled(View) <{ selected: boolean }>`
     selected ? theme.webPrimary._100 : 'rgba(0, 89, 255, 0.32)'};
 `;
 
+const StyledEmpty = styled(View)`
+  width: 24px;
+`;
+
 export type WebMainHeaderProps = {
   stepLength: number;
   onClickGoBack: () => void;
@@ -47,7 +51,7 @@ export const WebMainHeader = ({
           ))}
         </Row>
       )}
-      <View />
+      <StyledEmpty />
     </StyledContainer>
   );
 };