Refactor container & layout (#320)

packages/adena-extension/src/common/utils/client-utils.ts

@@ -1,8 +1,8 @@
-import gnotLogo from '../../assets/gnot-logo.svg';
-import contractLogo from '../../assets/contract.svg';
-import addPkgLogo from '../../assets/addpkg.svg';
-import success from '../../assets/success.svg';
-import failed from '../../assets/failed.svg';
+import gnotLogo from '@assets/gnot-logo.svg';
+import contractLogo from '@assets/contract.svg';
+import addPkgLogo from '@assets/addpkg.svg';
+import success from '@assets/success.svg';
+import failed from '@assets/failed.svg';
 import theme from '@styles/theme';
 import axios, { AxiosResponse } from 'axios';
 import BigNumber from 'bignumber.js';

packages/adena-extension/src/components/buttons/arrow-buttons.tsx → packages/adena-extension/src/components/atoms/arrow-buttons/index.tsx

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
-import left from '../../assets/arrowL-left.svg';
-import right from '../../assets/arrowL-right.svg';
-import up from '../../assets/arrowL-up.svg';
-import down from '../../assets/arrowL-down.svg';
+import left from '@assets/arrowL-left.svg';
+import right from '@assets/arrowL-right.svg';
+import up from '@assets/arrowL-up.svg';
+import down from '@assets/arrowL-down.svg';
 
 const ButtonSet = styled.button`
   width: 24px;

packages/adena-extension/src/components/blur-screen.tsx → packages/adena-extension/src/components/atoms/blur-screen/index.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
 import styled, { CSSProp } from 'styled-components';
-import Icon from './icons';
-import Text from '@components/text';
+import { Text, Icon } from '@components/atoms';
 import blurBg from '@assets/blur-bg.svg';
 
 interface BlurScreenProps {
   hasText?: boolean;
   text?: string;
 }
 
-const BlurScreen = ({ hasText, text }: BlurScreenProps): JSX.Element => {
+export const BlurScreen = ({ hasText, text }: BlurScreenProps): JSX.Element => {
   return (
     <>
       <Wrapper hasText={hasText}>
@@ -35,5 +34,3 @@ const Wrapper = styled.div<{ hasText?: boolean }>`
     height: 20px;
   }
 `;
-
-export default BlurScreen;

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

@@ -101,7 +101,7 @@ type ButtonProps = XOR<
   }
 >;
 
-const Button = (props: ButtonProps): JSX.Element => {
+export const Button = (props: ButtonProps): JSX.Element => {
   return <ButtonWrapper {...props}>{props.children}</ButtonWrapper>;
 };
 
@@ -139,5 +139,3 @@ Button.defaultProps = {
   hierarchy: 'primary',
   height: '48px',
 };
-
-export default Button;

packages/adena-extension/src/layouts/common-full-content-layout/common-full-content-layout.styles.ts → packages/adena-extension/src/components/atoms/common-full-content-layout/index.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const CommonFullContentLayoutWrapper = styled.section`
+export const CommonFullContentLayout = styled.section`
   position: relative;
   display: flex;
   flex-direction: column;

packages/adena-extension/src/components/buttons/copy-button.tsx → packages/adena-extension/src/components/atoms/copy-button/index.tsx

@@ -1,8 +1,8 @@
-import theme from '@styles/theme';
 import React, { useCallback, useEffect, useState } from 'react';
 import styled, { CSSProp } from 'styled-components';
-import Text from '../text';
-import Button from './button';
+
+import theme from '@styles/theme';
+import { Text, Button } from '@components/atoms';
 
 const CopyButton = styled(Button)<{ isClicked: boolean }>`
   ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
@@ -15,7 +15,13 @@ const CopyButton = styled(Button)<{ isClicked: boolean }>`
   }
 `;
 
-const Copy = ({ copyStr, tabIndex }: { copyStr: string; tabIndex?: number }): JSX.Element => {
+export const Copy = ({
+  copyStr,
+  tabIndex,
+}: {
+  copyStr: string;
+  tabIndex?: number;
+}): JSX.Element => {
   const [isClicked, setIsClicked] = useState<boolean>(false);
 
   const handleButtonClick = useCallback(() => {
@@ -42,5 +48,3 @@ const Copy = ({ copyStr, tabIndex }: { copyStr: string; tabIndex?: number }): JS
     </CopyButton>
   );
 };
-
-export default Copy;

packages/adena-extension/src/components/common/copy-button/copy-button.spec.tsx → packages/adena-extension/src/components/atoms/copy-icon-button/copy-icon-button.spec.tsx

@@ -4,21 +4,21 @@ import { ThemeProvider } from 'styled-components';
 import { render } from '@testing-library/react';
 import theme from '@styles/theme';
 import { GlobalStyle } from '@styles/global-style';
-import CopyButton, { CopyButtonProps } from './copy-button';
+import { CopyIconButton, CopyIconButtonProps } from '.';
 
 describe('CopyButton Component', () => {
   it('CopyButton render', () => {
-    const args: CopyButtonProps = {
+    const args: CopyIconButtonProps = {
       copyText: 'hello',
     };
 
     render(
       <RecoilRoot>
         <GlobalStyle />
         <ThemeProvider theme={theme}>
-          <CopyButton {...args} />
+          <CopyIconButton {...args} />
         </ThemeProvider>
       </RecoilRoot>,
     );
   });
-});
+});

packages/adena-extension/src/components/atoms/copy-icon-button/copy-icon-button.stories.tsx

@@ -0,0 +1,13 @@
+import { CopyIconButton, type CopyIconButtonProps } from '.';
+import { Meta, StoryObj } from '@storybook/react';
+
+export default {
+  title: 'components/common/CopyButton',
+  component: CopyIconButton,
+} as Meta<typeof CopyIconButton>;
+
+export const Default: StoryObj<CopyIconButtonProps> = {
+  args: {
+    copyText: 'hello',
+  },
+};

packages/adena-extension/src/components/common/copy-button/copy-button.tsx → packages/adena-extension/src/components/atoms/copy-icon-button/index.tsx

@@ -1,17 +1,14 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { CopyButtonWrapper } from './copy-button.styles';
+import { CopyButtonWrapper } from './copy-icon-button.styles';
 import IconCopy from '@assets/icon-copy';
 import IconCopyCheck from '@assets/icon-copy-check';
 
-export interface CopyButtonProps {
+export interface CopyIconButtonProps {
   className?: string;
   copyText: string;
 }
 
-const CopyButton: React.FC<CopyButtonProps> = ({
-  className = '',
-  copyText,
-}) => {
+export const CopyIconButton: React.FC<CopyIconButtonProps> = ({ className = '', copyText }) => {
   const [checked, setChecked] = useState<boolean>(false);
 
   useEffect(() => {
@@ -21,18 +18,19 @@ const CopyButton: React.FC<CopyButtonProps> = ({
     };
   }, [checked]);
 
-  const onClickCopyButton = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-    setChecked(true);
-    navigator.clipboard.writeText(copyText);
-  }, [copyText, checked])
+  const onClickCopyButton = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setChecked(true);
+      navigator.clipboard.writeText(copyText);
+    },
+    [copyText, checked],
+  );
 
   return (
     <CopyButtonWrapper className={className} checked={checked} onClick={onClickCopyButton}>
       {checked ? <IconCopyCheck /> : <IconCopy />}
     </CopyButtonWrapper>
   );
 };
-
-export default CopyButton;

packages/adena-extension/src/components/tooltips/copy-tooltip.tsx → packages/adena-extension/src/components/atoms/copy-tooltip/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import styled, { CSSProp, FlattenSimpleInterpolation } from 'styled-components';
-import Text from '@components/text';
+import { Text } from '@components/atoms';
 
 interface CopyTooltipProps {
   children: React.ReactNode;

packages/adena-extension/src/components/common/custom-network-form/custom-network-input.spec.tsx → packages/adena-extension/src/components/atoms/custom-network-input/custom-network-input.spec.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider } from 'styled-components';
 import { render } from '@testing-library/react';
 import theme from '@styles/theme';
 import { GlobalStyle } from '@styles/global-style';
-import CustomNetworkInput, { CustomNetworkInputProps } from './custom-network-input';
+import { CustomNetworkInputProps, CustomNetworkInput } from '.';
 
 describe('CustomNetworkInput Component', () => {
   it('CustomNetworkInput render', () => {
@@ -13,9 +13,15 @@ describe('CustomNetworkInput Component', () => {
       rpcUrl: '',
       rpcUrlError: '',
       chainId: '',
-      changeName: () => { return; },
-      changeRPCUrl: () => { return; },
-      changeChainId: () => { return; },
+      changeName: () => {
+        return;
+      },
+      changeRPCUrl: () => {
+        return;
+      },
+      changeChainId: () => {
+        return;
+      },
     };
 
     render(
@@ -27,4 +33,4 @@ describe('CustomNetworkInput Component', () => {
       </RecoilRoot>,
     );
   });
-});
+});

packages/adena-extension/src/components/common/custom-network-form/custom-network-input.stories.tsx → packages/adena-extension/src/components/atoms/custom-network-input/custom-network-input.stories.tsx

@@ -1,4 +1,4 @@
-import CustomNetworkInput, { type CustomNetworkInputProps } from './custom-network-input';
+import { CustomNetworkInput, type CustomNetworkInputProps } from '.';
 import { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
@@ -17,4 +17,4 @@ export const Default: StoryObj<CustomNetworkInputProps> = {
     changeRPCUrl: action('onChangeRPCUrl'),
     changeChainId: action('onChangeChainId'),
   },
-};
+};

packages/adena-extension/src/components/common/custom-network-form/custom-network-input.tsx → packages/adena-extension/src/components/atoms/custom-network-input/index.tsx

@@ -3,7 +3,7 @@ import { CustomNetworkInputWrapper } from './custom-network-input.styles';
 
 export interface CustomNetworkInputProps {
   name: string;
-  rpcUrl: string
+  rpcUrl: string;
   rpcUrlError?: string;
   chainId: string;
   chainIdError?: string;
@@ -12,7 +12,7 @@ export interface CustomNetworkInputProps {
   changeChainId: (chainId: string) => void;
 }
 
-const CustomNetworkInput: React.FC<CustomNetworkInputProps> = ({
+export const CustomNetworkInput: React.FC<CustomNetworkInputProps> = ({
   name,
   rpcUrl,
   chainId,
@@ -22,18 +22,17 @@ const CustomNetworkInput: React.FC<CustomNetworkInputProps> = ({
   changeRPCUrl,
   changeChainId,
 }) => {
-
   const onChangeName = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     changeName(event.target.value);
-  }, [])
+  }, []);
 
   const onChangeRPCUrl = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     changeRPCUrl(event.target.value.replace(/ /g, ''));
-  }, [])
+  }, []);
 
   const onChangeChainId = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     changeChainId(event.target.value.replace(/ /g, ''));
-  }, [])
+  }, []);
 
   return (
     <CustomNetworkInputWrapper>
@@ -56,10 +55,7 @@ const CustomNetworkInput: React.FC<CustomNetworkInputProps> = ({
             placeholder='RPC URL'
           />
         </div>
-        {
-          rpcUrlError &&
-          <span className='error-message'>{rpcUrlError}</span>
-        }
+        {rpcUrlError && <span className='error-message'>{rpcUrlError}</span>}
         <div className='input-box'>
           <input
             type='text'
@@ -69,13 +65,8 @@ const CustomNetworkInput: React.FC<CustomNetworkInputProps> = ({
             placeholder='Chain ID'
           />
         </div>
-        {
-          chainIdError &&
-          <span className='error-message'>{chainIdError}</span>
-        }
+        {chainIdError && <span className='error-message'>{chainIdError}</span>}
       </div>
     </CustomNetworkInputWrapper>
   );
 };
-
-export default CustomNetworkInput;

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

@@ -18,11 +18,9 @@ export const inputStyle = css`
   }
 `;
 
-const DefaultInput = styled.input<InputProps>`
+export const DefaultInput = styled.input<InputProps>`
   ${inputStyle};
   border: 1px solid
     ${({ error, theme }): string => (error ? theme.color.red[2] : theme.color.neutral[6])};
   margin: ${({ margin }): string | undefined => margin && margin};
 `;
-
-export default DefaultInput;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import theme from '@styles/theme';
 import styled from 'styled-components';
-import Text from '@components/text';
+import { Text } from '../text';
 
 const ErrorMsg = styled(Text)`
   width: 100%;