From 324868b5f30181a541eeae81f73c9c0486664bfd Mon Sep 17 00:00:00 2001
From: jinoosss <jwchoi@onbloc.xyz>
Date: Thu, 17 Oct 2024 02:44:26 +0900
Subject: [PATCH 1/8] feat: add memo input components

---
 .../src/assets/warning-info.svg               | 27 ++++++++++
 .../memo-input/memo-input.spec.tsx            | 26 ++++++++++
 .../memo-input/memo-input.stories.tsx         | 15 ++++++
 .../memo-input/memo-input.styles.ts           | 43 ++++++++++++++++
 .../transfer-input/memo-input/memo-input.tsx  | 49 +++++++++++++++++++
 .../transfer-input/transfer-input.spec.tsx    | 13 +++--
 .../transfer-input/transfer-input.stories.tsx | 10 ++--
 .../transfer-input/transfer-input.styles.ts   | 48 +++---------------
 .../transfer-input/transfer-input.tsx         | 34 ++++++++++---
 .../popup/wallet/transfer-input/index.tsx     | 45 ++++++++---------
 packages/adena-extension/src/styles/theme.ts  |  9 ++--
 11 files changed, 234 insertions(+), 85 deletions(-)
 create mode 100644 packages/adena-extension/src/assets/warning-info.svg
 create mode 100644 packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.spec.tsx
 create mode 100644 packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.stories.tsx
 create mode 100644 packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.styles.ts
 create mode 100644 packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.tsx

diff --git a/packages/adena-extension/src/assets/warning-info.svg b/packages/adena-extension/src/assets/warning-info.svg
new file mode 100644
index 000000000..bf5acbe3d
--- /dev/null
+++ b/packages/adena-extension/src/assets/warning-info.svg
@@ -0,0 +1,27 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_9116_7794)">
+    <path
+      d="M7 7.83594V9.5026"
+      stroke="#FB923C"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M7.41732 4.5026C7.41732 4.73272 7.23077 4.91927 7.00065 4.91927C6.77053 4.91927 6.58398 4.73272 6.58398 4.5026C6.58398 4.27249 6.77053 4.08594 7.00065 4.08594C7.23077 4.08594 7.41732 4.27249 7.41732 4.5026Z"
+      stroke="#FB923C"
+    />
+    <path
+      d="M13.0423 7.0026C13.0423 10.3393 10.3374 13.0443 7.00065 13.0443C3.66393 13.0443 0.958984 10.3393 0.958984 7.0026C0.958984 3.66588 3.66393 0.960938 7.00065 0.960938C10.3374 0.960938 13.0423 3.66588 13.0423 7.0026Z"
+      stroke="#FB923C"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    </g>
+    <defs>
+    <clipPath id="clip0_9116_7794">
+    <rect width="14" height="14" fill="white" />
+    </clipPath>
+    </defs>
+</svg>
diff --git a/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.spec.tsx b/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.spec.tsx
new file mode 100644
index 000000000..50c34d552
--- /dev/null
+++ b/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.spec.tsx
@@ -0,0 +1,26 @@
+import { GlobalPopupStyle } from '@styles/global-style';
+import theme from '@styles/theme';
+import { render } from '@testing-library/react';
+import { RecoilRoot } from 'recoil';
+import { ThemeProvider } from 'styled-components';
+import MemoInput, { MemoInputProps } from './memo-input';
+
+describe('MemoInput Component', () => {
+  it('MemoInput render', () => {
+    const args: MemoInputProps = {
+      memo: '132123123123',
+      onChangeMemo: () => {
+        return;
+      },
+    };
+
+    render(
+      <RecoilRoot>
+        <GlobalPopupStyle />
+        <ThemeProvider theme={theme}>
+          <MemoInput {...args} />
+        </ThemeProvider>
+      </RecoilRoot>,
+    );
+  });
+});
diff --git a/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.stories.tsx b/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.stories.tsx
new file mode 100644
index 000000000..cf3bd5b2f
--- /dev/null
+++ b/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.stories.tsx
@@ -0,0 +1,15 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+import MemoInput, { type MemoInputProps } from './memo-input';
+
+export default {
+  title: 'components/transfer/MemoInput',
+  component: MemoInput,
+} as Meta<typeof MemoInput>;
+
+export const Default: StoryObj<MemoInputProps> = {
+  args: {
+    memo: '132123123123',
+    onChangeMemo: action('change memo'),
+  },
+};
diff --git a/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.styles.ts b/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.styles.ts
new file mode 100644
index 000000000..d6bd6b73f
--- /dev/null
+++ b/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.styles.ts
@@ -0,0 +1,43 @@
+import mixins from '@styles/mixins';
+import { fonts, getTheme } from '@styles/theme';
+import styled from 'styled-components';
+
+export const MemoInputWrapper = styled.div`
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
+  width: 100%;
+  height: auto;
+  gap: 12px;
+
+  .memo-input {
+    ${mixins.flex({ direction: 'row', justify: 'normal' })};
+    width: 100%;
+    height: auto;
+    padding: 12px 16px;
+    ${fonts.body2Reg};
+    background-color: ${getTheme('neutral', '_9')};
+    border: 1px solid ${getTheme('neutral', '_7')};
+    border-radius: 30px;
+    width: 100%;
+    resize: none;
+  }
+
+  .warning-wrapper {
+    ${mixins.flex({ direction: 'row', justify: 'normal' })};
+    width: 100%;
+    border-radius: 8px;
+    border: 1px solid ${getTheme('red', '_8')}0d;
+    background-color: ${getTheme('red', '_8')}1a;
+    padding: 12px 20px;
+    gap: 10px;
+
+    .icon-warning {
+      width: 14px;
+    }
+
+    .warning-text {
+      width: 100%;
+      ${fonts.body2Reg};
+      color: ${getTheme('red', '_8')};
+    }
+  }
+`;
diff --git a/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.tsx b/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.tsx
new file mode 100644
index 000000000..390fe0e57
--- /dev/null
+++ b/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.tsx
@@ -0,0 +1,49 @@
+import React, { useRef } from 'react';
+
+import IconWarning from '@assets/warning-info.svg';
+import { MemoInputWrapper } from './memo-input.styles';
+
+export interface MemoInputProps {
+  memo: string;
+  onChangeMemo: (memo: string) => void;
+}
+
+const WARNING_TEXT = 'A memo is required when sending tokens to a centralized exchange.';
+
+const MemoInput: React.FC<MemoInputProps> = ({ memo, onChangeMemo }) => {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleResizeHeight = (): void => {
+    if (!inputRef.current) {
+      return;
+    }
+
+    inputRef.current.style.height = 'auto';
+    inputRef.current.style.height = inputRef.current.scrollHeight + 'px';
+  };
+
+  const onChangeMemoTextArea = (memo: string): void => {
+    onChangeMemo(memo);
+    handleResizeHeight();
+  };
+
+  return (
+    <MemoInputWrapper>
+      <textarea
+        ref={inputRef}
+        className='memo-input'
+        value={memo}
+        onChange={(event): void => onChangeMemoTextArea(event.target.value)}
+        rows={1}
+        placeholder='Memo (Optional)'
+      />
+
+      <div className='warning-wrapper'>
+        <img className='icon-warning' src={IconWarning} alt='icon' />
+        <span className='warning-text'>{WARNING_TEXT}</span>
+      </div>
+    </MemoInputWrapper>
+  );
+};
+
+export default MemoInput;
diff --git a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.spec.tsx b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.spec.tsx
index 89f5e846f..b37c22f7e 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.spec.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.spec.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
+import { GlobalPopupStyle } from '@styles/global-style';
+import theme from '@styles/theme';
+import { render } from '@testing-library/react';
 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 TransferInput, { TransferInputProps } from './transfer-input';
 
 describe('TransferInput Component', () => {
@@ -51,6 +50,12 @@ describe('TransferInput Component', () => {
           return;
         },
       },
+      memoInput: {
+        memo: '',
+        onChangeMemo: () => {
+          return;
+        },
+      },
       isNext: true,
       hasBackButton: true,
       onClickBack: () => {
diff --git a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.stories.tsx b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.stories.tsx
index 8d8840310..b408ae9e2 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.stories.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.stories.tsx
@@ -1,6 +1,6 @@
-import TransferInput, { type TransferInputProps } from './transfer-input';
-import { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+import TransferInput, { type TransferInputProps } from './transfer-input';
 
 export default {
   title: 'components/transfer/TransferInput',
@@ -41,10 +41,14 @@ export const Default: StoryObj<TransferInputProps> = {
       onChangeAddress: action('change address'),
       onClickAddressBook: action('click address book'),
     },
+    memoInput: {
+      memo: '',
+      onChangeMemo: action('onChangeMemo'),
+    },
     isNext: true,
     hasBackButton: true,
     onClickBack: action('click back'),
     onClickCancel: action('click cancel'),
     onClickNext: action('click next'),
   },
-};
\ No newline at end of file
+};
diff --git a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.styles.ts b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.styles.ts
index 6163361d4..c4f7ee175 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.styles.ts
@@ -1,19 +1,19 @@
 import mixins from '@styles/mixins';
-import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const TransferInputWrapper = styled.div`
   ${mixins.flex({ align: 'normal', justify: 'normal' })};
   position: relative;
   width: 100%;
-  height: 100%;
-  min-height: 444px;
-  padding-top: 5px;
+  width: 100%;
+  height: auto;
+  padding: 24px 20px 96px;
 
   .logo-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
+    padding-top: 5px;
     margin: 30px 0;
     .logo {
       width: 100px;
@@ -28,45 +28,11 @@ export const TransferInputWrapper = styled.div`
 
   .balance-input-wrapper {
     display: flex;
-    height: 100%;
+    margin-bottom: 12px;
   }
 
-  .button-group {
-    position: absolute;
+  .memo-input-wrapper {
     display: flex;
-    width: 100%;
-    bottom: 0;
-    justify-content: space-between;
-
-    button {
-      width: 100%;
-      height: 48px;
-      border-radius: 30px;
-      ${fonts.body1Bold};
-      background-color: ${getTheme('neutral', '_5')};
-      transition: 0.2s;
-
-      :hover {
-        background-color: ${getTheme('neutral', '_6')};
-      }
-
-      &:last-child {
-        margin-left: 10px;
-      }
-
-      &.next {
-        background-color: ${getTheme('primary', '_6')};
-
-        :hover {
-          background-color: ${getTheme('primary', '_7')};
-        }
-
-        &.disabled {
-          color: ${getTheme('neutral', '_5')};
-          background-color: ${getTheme('primary', '_9')};
-          cursor: default;
-        }
-      }
-    }
+    padding-bottom: 20px;
   }
 `;
diff --git a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.tsx b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.tsx
index 6175caa47..1efab6b58 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 
-import { SubHeader } from '@components/atoms';
-import { TransferInputWrapper } from './transfer-input.styles';
+import ArrowLeftIcon from '@assets/arrowL-left.svg';
 import UnknownTokenIcon from '@assets/common-unknown-token.svg';
+import { SubHeader } from '@components/atoms';
 import AddressInput from '../address-input/address-input';
 import BalanceInput from '../balance-input/balance-input';
-import ArrowLeftIcon from '@assets/arrowL-left.svg';
+import { TransferInputWrapper } from './transfer-input.styles';
 
+import { BottomFixedButtonGroup } from '@components/molecules';
 import { TokenModel } from '@types';
+import MemoInput from '../memo-input/memo-input';
 
 export interface TransferInputProps {
   tokenMetainfo?: TokenModel;
@@ -36,6 +38,10 @@ export interface TransferInputProps {
     onChangeAmount: (value: string) => void;
     onClickMax: () => void;
   };
+  memoInput: {
+    memo: string;
+    onChangeMemo: (memo: string) => void;
+  };
   isNext: boolean;
   hasBackButton: boolean;
   onClickBack: () => void;
@@ -47,6 +53,7 @@ const TransferInput: React.FC<TransferInputProps> = ({
   tokenMetainfo,
   addressInput,
   balanceInput,
+  memoInput,
   hasBackButton,
   isNext,
   onClickBack,
@@ -75,12 +82,23 @@ const TransferInput: React.FC<TransferInputProps> = ({
       <div className='balance-input-wrapper'>
         <BalanceInput {...balanceInput} />
       </div>
-      <div className='button-group'>
-        <button onClick={onClickCancel}>Cancel</button>
-        <button className={isNext ? 'next' : 'next disabled'} onClick={onClickNext}>
-          Next
-        </button>
+      <div className='memo-input-wrapper'>
+        <MemoInput {...memoInput} />
       </div>
+
+      <BottomFixedButtonGroup
+        leftButton={{
+          text: 'Cancel',
+          onClick: onClickCancel,
+        }}
+        rightButton={{
+          text: 'Next',
+          onClick: onClickNext,
+          disabled: !isNext,
+          primary: true,
+        }}
+        filled
+      />
     </TransferInputWrapper>
   );
 };
diff --git a/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx b/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx
index 236eb8285..80398b03c 100644
--- a/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx
+++ b/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx
@@ -1,27 +1,18 @@
-import React, { useCallback, useEffect, useState } from 'react';
 import BigNumber from 'bignumber.js';
-import styled from 'styled-components';
+import React, { useCallback, useEffect, useState } from 'react';
 
+import { isNativeTokenModel } from '@common/validation/validation-token';
 import TransferInput from '@components/pages/transfer-input/transfer-input/transfer-input';
-import { RoutePath } from '@types';
 import { useAddressBookInput } from '@hooks/use-address-book-input';
 import { useBalanceInput } from '@hooks/use-balance-input';
 import { useCurrentAccount } from '@hooks/use-current-account';
-import { isNativeTokenModel } from '@common/validation/validation-token';
 import useHistoryData from '@hooks/use-history-data';
+import { RoutePath } from '@types';
 
-import { TokenModel } from '@types';
-import mixins from '@styles/mixins';
 import useAppNavigate from '@hooks/use-app-navigate';
 import { useNetwork } from '@hooks/use-network';
 import useSessionParams from '@hooks/use-session-state';
-
-const TransferInputLayoutWrapper = styled.div`
-  ${mixins.flex({ align: 'normal', justify: 'normal' })};
-  width: 100%;
-  height: 100%;
-  padding: 24px 20px;
-`;
+import { TokenModel } from '@types';
 
 interface HistoryData {
   isTokenSearch: boolean;
@@ -50,6 +41,7 @@ const TransferInputContainer: React.FC = () => {
   const [tokenMetainfo, setTokenMetainfo] = useState<TokenModel | undefined>(params?.tokenBalance);
   const addressBookInput = useAddressBookInput();
   const balanceInput = useBalanceInput(tokenMetainfo);
+  const [memo, setMemo] = useState('');
   const { currentAccount } = useCurrentAccount();
   const { getHistoryData, setHistoryData } = useHistoryData<HistoryData>();
   const { currentNetwork } = useNetwork();
@@ -87,6 +79,10 @@ const TransferInputContainer: React.FC = () => {
     }
   }, [getHistoryData()]);
 
+  const onChangeMemo = useCallback((memo: string) => {
+    setMemo(memo);
+  }, []);
+
   const saveHistoryData = (): void => {
     if (!tokenMetainfo) {
       return;
@@ -154,18 +150,17 @@ const TransferInputContainer: React.FC = () => {
   }
 
   return (
-    <TransferInputLayoutWrapper>
-      <TransferInput
-        hasBackButton={isTokenSearch}
-        tokenMetainfo={tokenMetainfo}
-        addressInput={addressBookInput}
-        balanceInput={balanceInput}
-        isNext={isNext()}
-        onClickBack={goBack}
-        onClickCancel={onClickCancel}
-        onClickNext={onClickNext}
-      />
-    </TransferInputLayoutWrapper>
+    <TransferInput
+      hasBackButton={isTokenSearch}
+      tokenMetainfo={tokenMetainfo}
+      addressInput={addressBookInput}
+      balanceInput={balanceInput}
+      memoInput={{ memo, onChangeMemo }}
+      isNext={isNext()}
+      onClickBack={goBack}
+      onClickCancel={onClickCancel}
+      onClickNext={onClickNext}
+    />
   );
 };
 
diff --git a/packages/adena-extension/src/styles/theme.ts b/packages/adena-extension/src/styles/theme.ts
index d5e887692..a54adce63 100644
--- a/packages/adena-extension/src/styles/theme.ts
+++ b/packages/adena-extension/src/styles/theme.ts
@@ -73,6 +73,7 @@ enum Red {
   _5 = '#EF2D21',
   _6 = '#D6160A',
   _7 = '#BB0B00',
+  _8 = '#FB923C',
   a = '#E7323B',
   b = '#B62E29',
 }
@@ -416,10 +417,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;
 

From 40756802527c15e26174d46cbb8a3aaadf97143b Mon Sep 17 00:00:00 2001
From: jinoosss <jwchoi@onbloc.xyz>
Date: Fri, 18 Oct 2024 13:58:16 +0900
Subject: [PATCH 2/8] feat: add memo errors

---
 .../transaction-validation-error.ts           | 18 ++++
 .../src/common/utils/string-utils.ts          |  6 ++
 .../memo-input/memo-input.styles.ts           | 12 +++
 .../transfer-input/memo-input/memo-input.tsx  | 22 ++++-
 .../transfer-input/transfer-input.tsx         |  2 +
 .../popup/wallet/transfer-input/index.tsx     | 90 +++++++++++--------
 6 files changed, 110 insertions(+), 40 deletions(-)
 create mode 100644 packages/adena-extension/src/common/errors/validation/transaction-validation-error.ts

diff --git a/packages/adena-extension/src/common/errors/validation/transaction-validation-error.ts b/packages/adena-extension/src/common/errors/validation/transaction-validation-error.ts
new file mode 100644
index 000000000..223671a18
--- /dev/null
+++ b/packages/adena-extension/src/common/errors/validation/transaction-validation-error.ts
@@ -0,0 +1,18 @@
+import { BaseError } from '../base';
+
+const ERROR_VALUE = {
+  MEMO_TOO_LARGE_ERROR: {
+    status: 1000,
+    type: 'MEMO_TOO_LARGE_ERROR',
+    message: 'Memo too large',
+  },
+};
+
+type ErrorType = keyof typeof ERROR_VALUE;
+
+export class TransactionValidationError extends BaseError {
+  constructor(errorType: ErrorType) {
+    super(ERROR_VALUE[errorType]);
+    Object.setPrototypeOf(this, TransactionValidationError.prototype);
+  }
+}
diff --git a/packages/adena-extension/src/common/utils/string-utils.ts b/packages/adena-extension/src/common/utils/string-utils.ts
index d1720f4a4..d8e7c36f9 100644
--- a/packages/adena-extension/src/common/utils/string-utils.ts
+++ b/packages/adena-extension/src/common/utils/string-utils.ts
@@ -40,3 +40,9 @@ const isBech32Address = (str: string): boolean => {
     return false;
   }
 };
+
+export function calculateByteSize(str: string): number {
+  const encoder = new TextEncoder();
+  const encodedStr = encoder.encode(str);
+  return encodedStr.length;
+}
diff --git a/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.styles.ts b/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.styles.ts
index d6bd6b73f..cd54051d7 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.styles.ts
@@ -19,6 +19,10 @@ export const MemoInputWrapper = styled.div`
     border-radius: 30px;
     width: 100%;
     resize: none;
+
+    &.error {
+      border-color: ${getTheme('red', '_5')};
+    }
   }
 
   .warning-wrapper {
@@ -40,4 +44,12 @@ export const MemoInputWrapper = styled.div`
       color: ${getTheme('red', '_8')};
     }
   }
+
+  .error-message {
+    position: relative;
+    margin-top: -10px;
+    padding: 0 16px;
+    ${fonts.captionReg};
+    color: ${getTheme('red', '_5')};
+  }
 `;
diff --git a/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.tsx b/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.tsx
index 390fe0e57..f58802728 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.tsx
@@ -1,18 +1,32 @@
-import React, { useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 
 import IconWarning from '@assets/warning-info.svg';
+import { BaseError } from '@common/errors';
 import { MemoInputWrapper } from './memo-input.styles';
 
 export interface MemoInputProps {
   memo: string;
+  memoError?: BaseError | null;
   onChangeMemo: (memo: string) => void;
 }
 
 const WARNING_TEXT = 'A memo is required when sending tokens to a centralized exchange.';
 
-const MemoInput: React.FC<MemoInputProps> = ({ memo, onChangeMemo }) => {
+const MemoInput: React.FC<MemoInputProps> = ({ memo, memoError, onChangeMemo }) => {
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
+  const hasError = useMemo(() => {
+    return !!memoError;
+  }, [memoError]);
+
+  const errorMessage = useMemo(() => {
+    if (!memoError) {
+      return '';
+    }
+
+    return memoError.message;
+  }, [memoError]);
+
   const handleResizeHeight = (): void => {
     if (!inputRef.current) {
       return;
@@ -31,13 +45,15 @@ const MemoInput: React.FC<MemoInputProps> = ({ memo, onChangeMemo }) => {
     <MemoInputWrapper>
       <textarea
         ref={inputRef}
-        className='memo-input'
+        className={hasError ? 'memo-input error' : 'memo-input'}
         value={memo}
         onChange={(event): void => onChangeMemoTextArea(event.target.value)}
         rows={1}
         placeholder='Memo (Optional)'
       />
 
+      {hasError && <span className='error-message'>{errorMessage}</span>}
+
       <div className='warning-wrapper'>
         <img className='icon-warning' src={IconWarning} alt='icon' />
         <span className='warning-text'>{WARNING_TEXT}</span>
diff --git a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.tsx b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.tsx
index 1efab6b58..7360fdeb4 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.tsx
@@ -7,6 +7,7 @@ import AddressInput from '../address-input/address-input';
 import BalanceInput from '../balance-input/balance-input';
 import { TransferInputWrapper } from './transfer-input.styles';
 
+import { BaseError } from '@common/errors';
 import { BottomFixedButtonGroup } from '@components/molecules';
 import { TokenModel } from '@types';
 import MemoInput from '../memo-input/memo-input';
@@ -40,6 +41,7 @@ export interface TransferInputProps {
   };
   memoInput: {
     memo: string;
+    memoError?: BaseError | null;
     onChangeMemo: (memo: string) => void;
   };
   isNext: boolean;
diff --git a/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx b/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx
index 80398b03c..856446f07 100644
--- a/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx
+++ b/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx
@@ -1,5 +1,5 @@
 import BigNumber from 'bignumber.js';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { isNativeTokenModel } from '@common/validation/validation-token';
 import TransferInput from '@components/pages/transfer-input/transfer-input/transfer-input';
@@ -9,6 +9,8 @@ import { useCurrentAccount } from '@hooks/use-current-account';
 import useHistoryData from '@hooks/use-history-data';
 import { RoutePath } from '@types';
 
+import { TransactionValidationError } from '@common/errors/validation/transaction-validation-error';
+import { calculateByteSize } from '@common/utils/string-utils';
 import useAppNavigate from '@hooks/use-app-navigate';
 import { useNetwork } from '@hooks/use-network';
 import useSessionParams from '@hooks/use-session-state';
@@ -30,6 +32,8 @@ interface HistoryData {
   };
 }
 
+const MEMO_MAX_BYTES = 65_536; // 2 ** 16
+
 const TransferInputContainer: React.FC = () => {
   const { navigate, goBack } = useAppNavigate<RoutePath.TransferInput>();
   const {
@@ -46,38 +50,14 @@ const TransferInputContainer: React.FC = () => {
   const { getHistoryData, setHistoryData } = useHistoryData<HistoryData>();
   const { currentNetwork } = useNetwork();
 
-  useEffect(() => {
-    if (isLoadingSessionState) {
-      return;
+  const memoError = useMemo(() => {
+    const size = calculateByteSize(memo);
+    if (size < MEMO_MAX_BYTES) {
+      return null;
     }
-    if (params) {
-      setIsTokenSearch(params.isTokenSearch === true);
-      setTokenMetainfo(params.tokenBalance);
-    }
-  }, [isPopup, params, isLoadingSessionState]);
 
-  useEffect(() => {
-    if (currentAccount && tokenMetainfo) {
-      addressBookInput.updateAddressBook();
-      balanceInput.updateCurrentBalance();
-    }
-  }, [currentAccount, tokenMetainfo, currentNetwork.chainId]);
-
-  useEffect(() => {
-    const historyData = getHistoryData();
-    if (historyData) {
-      setIsTokenSearch(historyData.isTokenSearch);
-      setTokenMetainfo(tokenMetainfo);
-      addressBookInput.setSelected(historyData.addressInput.selected);
-      if (historyData.addressInput.selectedAddressBook) {
-        addressBookInput.setSelectedAddressBook(historyData.addressInput.selectedAddressBook);
-      }
-      if (historyData.addressInput.address) {
-        addressBookInput.setAddress(historyData.addressInput.address);
-      }
-      balanceInput.onChangeAmount(historyData.balanceAmount);
-    }
-  }, [getHistoryData()]);
+    return new TransactionValidationError('MEMO_TOO_LARGE_ERROR');
+  }, [memo]);
 
   const onChangeMemo = useCallback((memo: string) => {
     setMemo(memo);
@@ -99,15 +79,18 @@ const TransferInputContainer: React.FC = () => {
     });
   };
 
-  const isNext = useCallback(() => {
+  const isNext = useMemo(() => {
     if (balanceInput.amount === '' || BigNumber(balanceInput.amount).isLessThanOrEqualTo(0)) {
       return false;
     }
     if (addressBookInput.resultAddress === '') {
       return false;
     }
+    if (memoError !== null) {
+      return false;
+    }
     return true;
-  }, [addressBookInput, balanceInput]);
+  }, [addressBookInput, balanceInput, memoError]);
 
   const onClickCancel = useCallback(() => {
     if (isTokenSearch) {
@@ -118,7 +101,7 @@ const TransferInputContainer: React.FC = () => {
   }, [isTokenSearch]);
 
   const onClickNext = useCallback(async () => {
-    if (!isNext()) {
+    if (!isNext) {
       return;
     }
     if (!tokenMetainfo) {
@@ -143,7 +126,40 @@ const TransferInputContainer: React.FC = () => {
         },
       });
     }
-  }, [addressBookInput, balanceInput, isNext()]);
+  }, [addressBookInput, balanceInput, isNext]);
+
+  useEffect(() => {
+    if (isLoadingSessionState) {
+      return;
+    }
+    if (params) {
+      setIsTokenSearch(params.isTokenSearch === true);
+      setTokenMetainfo(params.tokenBalance);
+    }
+  }, [isPopup, params, isLoadingSessionState]);
+
+  useEffect(() => {
+    if (currentAccount && tokenMetainfo) {
+      addressBookInput.updateAddressBook();
+      balanceInput.updateCurrentBalance();
+    }
+  }, [currentAccount, tokenMetainfo, currentNetwork.chainId]);
+
+  useEffect(() => {
+    const historyData = getHistoryData();
+    if (historyData) {
+      setIsTokenSearch(historyData.isTokenSearch);
+      setTokenMetainfo(tokenMetainfo);
+      addressBookInput.setSelected(historyData.addressInput.selected);
+      if (historyData.addressInput.selectedAddressBook) {
+        addressBookInput.setSelectedAddressBook(historyData.addressInput.selectedAddressBook);
+      }
+      if (historyData.addressInput.address) {
+        addressBookInput.setAddress(historyData.addressInput.address);
+      }
+      balanceInput.onChangeAmount(historyData.balanceAmount);
+    }
+  }, [getHistoryData()]);
 
   if (isLoadingSessionState) {
     return <></>;
@@ -155,8 +171,8 @@ const TransferInputContainer: React.FC = () => {
       tokenMetainfo={tokenMetainfo}
       addressInput={addressBookInput}
       balanceInput={balanceInput}
-      memoInput={{ memo, onChangeMemo }}
-      isNext={isNext()}
+      memoInput={{ memo, onChangeMemo, memoError }}
+      isNext={isNext}
       onClickBack={goBack}
       onClickCancel={onClickCancel}
       onClickNext={onClickNext}

From 47932afb665961955d6d5a6c2b3d02f72e2cbe49 Mon Sep 17 00:00:00 2001
From: jinoosss <jwchoi@onbloc.xyz>
Date: Tue, 22 Oct 2024 19:28:57 +0900
Subject: [PATCH 3/8] feat: add memo on token transfer summary

---
 .../transaction-validation-error.ts           |  5 ++++
 .../transfer-summary-address.spec.tsx         |  1 +
 .../transfer-summary-address.stories.tsx      |  7 +++--
 .../transfer-summary-address.styles.ts        | 23 ++++++++++++--
 .../transfer-summary-address.tsx              |  8 +++--
 .../transfer-summary-balance.tsx              |  2 +-
 .../transfer-summary.spec.tsx                 |  1 +
 .../transfer-summary/transfer-summary.tsx     | 30 ++++++++++++++-----
 .../popup/wallet/transfer-input/index.tsx     |  1 +
 .../popup/wallet/transfer-summary/index.tsx   | 20 ++++++-------
 packages/adena-extension/src/types/router.ts  |  1 +
 11 files changed, 72 insertions(+), 27 deletions(-)

diff --git a/packages/adena-extension/src/common/errors/validation/transaction-validation-error.ts b/packages/adena-extension/src/common/errors/validation/transaction-validation-error.ts
index 223671a18..cce1d672b 100644
--- a/packages/adena-extension/src/common/errors/validation/transaction-validation-error.ts
+++ b/packages/adena-extension/src/common/errors/validation/transaction-validation-error.ts
@@ -6,6 +6,11 @@ const ERROR_VALUE = {
     type: 'MEMO_TOO_LARGE_ERROR',
     message: 'Memo too large',
   },
+  INSUFFICIENT_NETWORK_FEE: {
+    status: 1001,
+    type: 'INSUFFICIENT_NETWORK_FEE',
+    message: 'Insufficient network fee',
+  },
 };
 
 type ErrorType = keyof typeof ERROR_VALUE;
diff --git a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.spec.tsx b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.spec.tsx
index 6261b0dd0..712a938a9 100644
--- a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.spec.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.spec.tsx
@@ -10,6 +10,7 @@ describe('TransferSummaryAddress Component', () => {
   it('TransferSummaryAddress render', () => {
     const args: TransferSummaryAddressProps = {
       toAddress: '',
+      memo: '',
     };
 
     render(
diff --git a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.stories.tsx b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.stories.tsx
index 028409fb3..2f50584e8 100644
--- a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.stories.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.stories.tsx
@@ -1,5 +1,7 @@
-import TransferSummaryAddress, { type TransferSummaryAddressProps } from './transfer-summary-address';
 import { Meta, StoryObj } from '@storybook/react';
+import TransferSummaryAddress, {
+  type TransferSummaryAddressProps,
+} from './transfer-summary-address';
 
 export default {
   title: 'components/transfer/TransferSummaryAddress',
@@ -9,5 +11,6 @@ export default {
 export const Default: StoryObj<TransferSummaryAddressProps> = {
   args: {
     toAddress: 'g1fnakf9vrd6uqn8qdmp88yac4p0ngy572answ9f',
+    memo: '',
   },
-};
\ No newline at end of file
+};
diff --git a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.styles.ts b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.styles.ts
index 50e961f86..e252de37c 100644
--- a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.styles.ts
@@ -7,10 +7,27 @@ export const TransferSummaryAddressWrapper = styled.div`
   width: 100%;
   height: auto;
   padding: 20px;
+  gap: 20px;
   ${fonts.body2Reg};
   background-color: ${getTheme('neutral', '_9')};
   border-radius: 18px;
-  justify-content: space-between;
-  align-items: center;
-  word-break: break-all;
+
+  .address-wrapper {
+    display: flex;
+    width: 100%;
+    height: auto;
+    word-break: break-all;
+    overflow: hidden;
+  }
+
+  .memo-wrapper {
+    display: block;
+    width: 100%;
+    height: auto;
+    color: ${getTheme('neutral', 'a')};
+    word-break: break-all;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 `;
diff --git a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.tsx b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.tsx
index a341aef03..cb8ec82ed 100644
--- a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.tsx
@@ -3,14 +3,16 @@ import { TransferSummaryAddressWrapper } from './transfer-summary-address.styles
 
 export interface TransferSummaryAddressProps {
   toAddress: string;
+  memo: string;
 }
 
-const TransferSummaryAddress: React.FC<TransferSummaryAddressProps> = ({ toAddress }) => {
+const TransferSummaryAddress: React.FC<TransferSummaryAddressProps> = ({ toAddress, memo }) => {
   return (
     <TransferSummaryAddressWrapper>
-      {toAddress}
+      <div className='address-wrapper'>{toAddress}</div>
+      <div className='memo-wrapper'>{memo}</div>
     </TransferSummaryAddressWrapper>
   );
 };
 
-export default TransferSummaryAddress;
\ No newline at end of file
+export default TransferSummaryAddress;
diff --git a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-balance/transfer-summary-balance.tsx b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-balance/transfer-summary-balance.tsx
index 76fb6e7ec..73802e1a7 100644
--- a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-balance/transfer-summary-balance.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-balance/transfer-summary-balance.tsx
@@ -1,6 +1,6 @@
+import { TokenBalance } from '@components/molecules';
 import React from 'react';
 import { TransferSummaryBalanceWrapper } from './transfer-summary-balance.styles';
-import { TokenBalance } from '@components/molecules';
 
 export interface TransferSummaryBalanceProps {
   tokenImage: string;
diff --git a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary/transfer-summary.spec.tsx b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary/transfer-summary.spec.tsx
index 745695a85..e7f2b8980 100644
--- a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary/transfer-summary.spec.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary/transfer-summary.spec.tsx
@@ -30,6 +30,7 @@ describe('TransferSummary Component', () => {
         value: '0.0048',
         denom: 'GNOT',
       },
+      memo: '',
       onClickBack: () => {
         return;
       },
diff --git a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary/transfer-summary.tsx b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary/transfer-summary.tsx
index 44195d54a..ee9faef25 100644
--- a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary/transfer-summary.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary/transfer-summary.tsx
@@ -1,15 +1,16 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { SubHeader } from '@components/atoms';
 
-import { TransferSummaryWrapper } from './transfer-summary.styles';
-import TransferSummaryBalance from '../transfer-summary-balance/transfer-summary-balance';
+import ArrowLeftIcon from '@assets/arrowL-left.svg';
+import ArrowDownIcon from '@assets/transfer-arrow-down.svg';
 import TransferSummaryAddress from '../transfer-summary-address/transfer-summary-address';
+import TransferSummaryBalance from '../transfer-summary-balance/transfer-summary-balance';
 import TransferSummaryNetworkFee from '../transfer-summary-network-fee/transfer-summary-network-fee';
-import ArrowDownIcon from '@assets/transfer-arrow-down.svg';
-import ArrowLeftIcon from '@assets/arrowL-left.svg';
+import { TransferSummaryWrapper } from './transfer-summary.styles';
 
-import { TokenModel, Amount } from '@types';
+import { TransactionValidationError } from '@common/errors/validation/transaction-validation-error';
+import { Amount, TokenModel } from '@types';
 
 export interface TransferSummaryProps {
   tokenMetainfo: TokenModel;
@@ -20,6 +21,7 @@ export interface TransferSummaryProps {
     value: string;
     denom: string;
   };
+  memo: string;
   isErrorNetworkFee?: boolean;
   onClickBack: () => void;
   onClickCancel: () => void;
@@ -32,11 +34,22 @@ const TransferSummary: React.FC<TransferSummaryProps> = ({
   transferBalance,
   toAddress,
   networkFee,
+  memo,
   isErrorNetworkFee,
   onClickBack,
   onClickCancel,
   onClickSend,
 }) => {
+  const insufficientNetworkFeeError = new TransactionValidationError('INSUFFICIENT_NETWORK_FEE');
+
+  const errorMessage = useMemo(() => {
+    if (!isErrorNetworkFee) {
+      return '';
+    }
+
+    return insufficientNetworkFeeError.message;
+  }, [isErrorNetworkFee]);
+
   return (
     <TransferSummaryWrapper>
       <div className='sub-header-wrapper'>
@@ -48,6 +61,7 @@ const TransferSummary: React.FC<TransferSummaryProps> = ({
           title={`Sending ${tokenMetainfo.symbol}`}
         />
       </div>
+
       <div className='info-wrapper'>
         <TransferSummaryBalance
           tokenImage={tokenImage}
@@ -59,7 +73,7 @@ const TransferSummary: React.FC<TransferSummaryProps> = ({
           <img src={`${ArrowDownIcon}`} alt='direction-icon' />
         </div>
 
-        <TransferSummaryAddress toAddress={toAddress} />
+        <TransferSummaryAddress toAddress={toAddress} memo={memo} />
       </div>
 
       <div className='network-fee-wrapper'>
@@ -68,7 +82,7 @@ const TransferSummary: React.FC<TransferSummaryProps> = ({
           value={networkFee.value}
           denom={networkFee.denom}
         />
-        {isErrorNetworkFee && <span className='error-message'>Insufficient network fee</span>}
+        {isErrorNetworkFee && <span className='error-message'>{errorMessage}</span>}
       </div>
 
       <div className='button-group'>
diff --git a/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx b/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx
index 856446f07..6fd1f9491 100644
--- a/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx
+++ b/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx
@@ -123,6 +123,7 @@ const TransferInputContainer: React.FC = () => {
             denom: balanceInput.denom,
           },
           networkFee: balanceInput.networkFee,
+          memo,
         },
       });
     }
diff --git a/packages/adena-extension/src/pages/popup/wallet/transfer-summary/index.tsx b/packages/adena-extension/src/pages/popup/wallet/transfer-summary/index.tsx
index 1c7111bbf..3a253791a 100644
--- a/packages/adena-extension/src/pages/popup/wallet/transfer-summary/index.tsx
+++ b/packages/adena-extension/src/pages/popup/wallet/transfer-summary/index.tsx
@@ -1,21 +1,19 @@
-import React, { useCallback, useState } from 'react';
+import { isLedgerAccount } from 'adena-module';
 import BigNumber from 'bignumber.js';
+import React, { useCallback, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { isLedgerAccount } from 'adena-module';
-
-import TransferSummary from '@components/pages/transfer-summary/transfer-summary/transfer-summary';
-import { useNavigate } from 'react-router-dom';
-import { RoutePath } from '@types';
 import UnknownTokenIcon from '@assets/common-unknown-token.svg';
+import { isGRC20TokenModel, isNativeTokenModel } from '@common/validation/validation-token';
+import TransferSummary from '@components/pages/transfer-summary/transfer-summary/transfer-summary';
+import useAppNavigate from '@hooks/use-app-navigate';
 import { useAdenaContext, useWalletContext } from '@hooks/use-context';
 import { useCurrentAccount } from '@hooks/use-current-account';
-import { TransactionMessage } from '@services/index';
-import { isGRC20TokenModel, isNativeTokenModel } from '@common/validation/validation-token';
 import { useNetwork } from '@hooks/use-network';
-
+import { TransactionMessage } from '@services/index';
 import mixins from '@styles/mixins';
-import useAppNavigate from '@hooks/use-app-navigate';
+import { RoutePath } from '@types';
 
 const TransferSummaryLayout = styled.div`
   ${mixins.flex({ align: 'normal', justify: 'normal' })};
@@ -90,6 +88,7 @@ const TransferSummaryContainer: React.FC = () => {
       [message],
       GAS_WANTED,
       networkFeeAmount,
+      summaryInfo.memo,
     );
     return document;
   }, [summaryInfo, currentAccount]);
@@ -177,6 +176,7 @@ const TransferSummaryContainer: React.FC = () => {
         transferBalance={getTransferBalance()}
         isErrorNetworkFee={isErrorNetworkFee}
         networkFee={summaryInfo.networkFee}
+        memo={summaryInfo.memo}
         onClickBack={goBack}
         onClickCancel={onClickCancel}
         onClickSend={transfer}
diff --git a/packages/adena-extension/src/types/router.ts b/packages/adena-extension/src/types/router.ts
index 2ae041d67..b2aa583a9 100644
--- a/packages/adena-extension/src/types/router.ts
+++ b/packages/adena-extension/src/types/router.ts
@@ -149,6 +149,7 @@ export type RouteParams = {
       value: string;
       denom: string;
     };
+    memo: string;
   };
   [RoutePath.TransferLedgerLoading]: {
     document: Document;

From ea7720127eb06d3458affcdd293790210de0a41e Mon Sep 17 00:00:00 2001
From: jinoosss <jwchoi@onbloc.xyz>
Date: Tue, 22 Oct 2024 19:29:28 +0900
Subject: [PATCH 4/8] feat: add memo field on injection method approve

---
 .../approve-transaction.spec.tsx              | 11 +++--
 .../approve-transaction.styles.ts             | 34 +++++++++++++
 .../molecules/approve-transaction/index.tsx   | 49 +++++++++++++++++--
 .../wallet/approve-sign-transaction/index.tsx | 41 +++++++++++++---
 .../pages/popup/wallet/approve-sign/index.tsx | 40 ++++++++++++---
 .../wallet/approve-transaction-main/index.tsx | 41 +++++++++++++---
 6 files changed, 186 insertions(+), 30 deletions(-)

diff --git a/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.spec.tsx b/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.spec.tsx
index c70711dfc..351df6529 100644
--- a/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.spec.tsx
+++ b/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.spec.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
+import { GlobalPopupStyle } from '@styles/global-style';
+import theme from '@styles/theme';
+import { render } from '@testing-library/react';
 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 { ApproveTransaction, ApproveTransactionProps } from '.';
 
 describe('ApproveTransaction Component', () => {
@@ -13,6 +13,8 @@ describe('ApproveTransaction Component', () => {
       loading: true,
       logo: '',
       title: 'Sign Transaction',
+      memo: '',
+      hasMemo: true,
       contracts: [
         {
           type: '/vm.m_call',
@@ -28,6 +30,9 @@ describe('ApproveTransaction Component', () => {
       opened: false,
       processing: false,
       done: false,
+      changeMemo: () => {
+        return;
+      },
       onResponse: () => {
         return;
       },
diff --git a/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts b/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts
index 8e455faab..91a20b2ff 100644
--- a/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts
+++ b/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts
@@ -78,6 +78,40 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
     background-color: ${getTheme('neutral', '_9')};
   }
 
+  .memo-wrapper {
+    width: 100%;
+    min-height: 48px;
+    border-radius: 30px;
+    padding: 10px 18px;
+    margin-bottom: 8px;
+    background-color: ${getTheme('neutral', '_9')};
+    border: 1px solid ${getTheme('neutral', '_8')};
+    gap: 10px;
+    ${fonts.body2Reg};
+
+    span.value {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      height: auto;
+      word-break: break-all;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    input.value {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      height: auto;
+
+      &::placeholder {
+        color: ${getTheme('neutral', 'a')};
+      }
+    }
+  }
+
   .fee-amount-wrapper {
     width: 100%;
     min-height: 48px;
diff --git a/packages/adena-extension/src/components/molecules/approve-transaction/index.tsx b/packages/adena-extension/src/components/molecules/approve-transaction/index.tsx
index 125a8188e..2351b9d3d 100644
--- a/packages/adena-extension/src/components/molecules/approve-transaction/index.tsx
+++ b/packages/adena-extension/src/components/molecules/approve-transaction/index.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
-import { Text, Button } from '@components/atoms';
+import { Button, Text } from '@components/atoms';
 import {
-  BottomFixedButtonGroup,
   ApproveInjectionLoading,
   ApproveLoading,
+  BottomFixedButtonGroup,
 } from '@components/molecules';
 
-import DefaultFavicon from '@assets/favicon-default.svg';
 import IconArraowDown from '@assets/arrowS-down-gray.svg';
 import IconArraowUp from '@assets/arrowS-up-gray.svg';
+import DefaultFavicon from '@assets/favicon-default.svg';
 import { ApproveTransactionWrapper } from './approve-transaction.styles';
 
 export interface ApproveTransactionProps {
@@ -22,6 +22,8 @@ export interface ApproveTransactionProps {
     function: string;
     value: string;
   }[];
+  memo: string;
+  hasMemo: boolean;
   isErrorNetworkFee?: boolean;
   networkFee: {
     amount: string;
@@ -31,6 +33,7 @@ export interface ApproveTransactionProps {
   opened: boolean;
   processing: boolean;
   done: boolean;
+  changeMemo: (memo: string) => void;
   onToggleTransactionData: (opened: boolean) => void;
   onResponse: () => void;
   onTimeout: () => void;
@@ -44,18 +47,33 @@ export const ApproveTransaction: React.FC<ApproveTransactionProps> = ({
   logo,
   domain,
   contracts,
+  memo,
+  hasMemo,
   isErrorNetworkFee,
   networkFee,
   transactionData,
   opened,
   processing,
   done,
+  changeMemo,
   onToggleTransactionData,
   onResponse,
   onTimeout,
   onClickConfirm,
   onClickCancel,
 }) => {
+  const onChangeMemo = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (hasMemo) {
+        return;
+      }
+
+      const value = e.target.value;
+      changeMemo(value);
+    },
+    [hasMemo, changeMemo],
+  );
+
   if (loading) {
     return <ApproveLoading rightButtonText='Approve' />;
   }
@@ -91,6 +109,22 @@ export const ApproveTransaction: React.FC<ApproveTransactionProps> = ({
         </div>
       ))}
 
+      <div className='memo-wrapper row'>
+        <span className='key'>Memo:</span>
+        {hasMemo ? (
+          <span className={'value'}>{memo}</span>
+        ) : (
+          <input
+            type='text'
+            className={'value'}
+            value={memo}
+            onChange={onChangeMemo}
+            autoComplete='off'
+            placeholder='(Optional)'
+          />
+        )}
+      </div>
+
       <div className='fee-amount-wrapper row'>
         <span className='key'>Network Fee:</span>
         <span className='value'>{`${networkFee.amount} ${networkFee.denom}`}</span>
@@ -98,7 +132,12 @@ export const ApproveTransaction: React.FC<ApproveTransactionProps> = ({
       {isErrorNetworkFee && <span className='error-message'>Insufficient network fee</span>}
 
       <div className='transaction-data-wrapper'>
-        <Button hierarchy='custom' bgColor='transparent' className='visible-button' onClick={(): void => onToggleTransactionData(!opened)}>
+        <Button
+          hierarchy='custom'
+          bgColor='transparent'
+          className='visible-button'
+          onClick={(): void => onToggleTransactionData(!opened)}
+        >
           {opened ? (
             <>
               <>Hide Transaction Data</>
diff --git a/packages/adena-extension/src/pages/popup/wallet/approve-sign-transaction/index.tsx b/packages/adena-extension/src/pages/popup/wallet/approve-sign-transaction/index.tsx
index dc57517f1..1e303231c 100644
--- a/packages/adena-extension/src/pages/popup/wallet/approve-sign-transaction/index.tsx
+++ b/packages/adena-extension/src/pages/popup/wallet/approve-sign-transaction/index.tsx
@@ -22,14 +22,16 @@ import { InjectionMessage, InjectionMessageInstance } from '@inject/message';
 import { validateInjectionData } from '@inject/message/methods';
 import { RoutePath } from '@types';
 
-function mappedTransactionData(document: Document): {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+interface TransactionData {
   messages: readonly any[];
-  contracts: { type: string; function: any; value: any }[];
+  contracts: { type: string; function: string; value: any }[];
   gasWanted: string;
   gasFee: string;
+  memo: string;
   document: Document;
-} {
+}
+
+function mappedTransactionData(document: Document): TransactionData {
   return {
     messages: document.msgs,
     contracts: document.msgs.map((message) => {
@@ -41,6 +43,7 @@ function mappedTransactionData(document: Document): {
     }),
     gasWanted: document.fee.gas,
     gasFee: `${document.fee.amount[0].amount}${document.fee.amount[0].denom}`,
+    memo: `${document.memo || ''}`,
     document,
   };
 }
@@ -53,9 +56,7 @@ const ApproveSignTransactionContainer: React.FC = () => {
   const { navigate } = useAppNavigate();
   const { walletService, transactionService } = useAdenaContext();
   const { currentAccount } = useCurrentAccount();
-  const [transactionData, setTransactionData] = useState<{ [key in string]: any } | undefined>(
-    undefined,
-  );
+  const [transactionData, setTransactionData] = useState<TransactionData>();
   const { currentNetwork } = useNetwork();
   const [hostname, setHostname] = useState('');
   const location = useLocation();
@@ -65,11 +66,19 @@ const ApproveSignTransactionContainer: React.FC = () => {
   const [document, setDocument] = useState<Document>();
   const [processType, setProcessType] = useState<'INIT' | 'PROCESSING' | 'DONE'>('INIT');
   const [response, setResponse] = useState<InjectionMessage | null>(null);
+  const [memo, setMemo] = useState('');
 
   const processing = useMemo(() => processType !== 'INIT', [processType]);
 
   const done = useMemo(() => processType === 'DONE', [processType]);
 
+  const hasMemo = useMemo(() => {
+    if (!requestData?.data?.memo) {
+      return false;
+    }
+    return true;
+  }, [requestData?.data?.memo]);
+
   const networkFee = useMemo(() => {
     if (!document || document.fee.amount.length === 0) {
       return {
@@ -161,6 +170,7 @@ const ApproveSignTransactionContainer: React.FC = () => {
       setDocument(document);
       setTransactionData(mappedTransactionData(document));
       setHostname(requestData?.hostname ?? '');
+      setMemo(document.memo);
       return true;
     } catch (e) {
       console.error(e);
@@ -178,6 +188,18 @@ const ApproveSignTransactionContainer: React.FC = () => {
     return false;
   };
 
+  const changeMemo = (memo: string): void => {
+    setMemo(memo);
+    if (document) {
+      setDocument((prev): Document | undefined => {
+        if (!prev) {
+          return undefined;
+        }
+        return { ...document, memo };
+      });
+    }
+  };
+
   const signTransaction = async (): Promise<boolean> => {
     if (!document || !currentAccount || !wallet) {
       setResponse(
@@ -276,12 +298,15 @@ const ApproveSignTransactionContainer: React.FC = () => {
     <ApproveTransaction
       title='Sign Transaction'
       domain={hostname}
-      contracts={transactionData?.contracts}
+      contracts={transactionData?.contracts || []}
+      memo={memo}
+      hasMemo={hasMemo}
       loading={transactionData === undefined}
       processing={processing}
       done={done}
       logo={favicon}
       networkFee={networkFee}
+      changeMemo={changeMemo}
       onClickConfirm={onClickConfirm}
       onClickCancel={onClickCancel}
       onResponse={onResponseSignTransaction}
diff --git a/packages/adena-extension/src/pages/popup/wallet/approve-sign/index.tsx b/packages/adena-extension/src/pages/popup/wallet/approve-sign/index.tsx
index a53bece88..5540fddf0 100644
--- a/packages/adena-extension/src/pages/popup/wallet/approve-sign/index.tsx
+++ b/packages/adena-extension/src/pages/popup/wallet/approve-sign/index.tsx
@@ -22,13 +22,16 @@ import { InjectionMessage, InjectionMessageInstance } from '@inject/message';
 import { validateInjectionData } from '@inject/message/methods';
 import { RoutePath } from '@types';
 
-function mappedTransactionData(document: Document): {
+interface TransactionData {
   messages: readonly any[];
-  contracts: { type: string; function: any; value: any }[];
+  contracts: { type: string; function: string; value: any }[];
   gasWanted: string;
   gasFee: string;
+  memo: string;
   document: Document;
-} {
+}
+
+function mappedTransactionData(document: Document): TransactionData {
   return {
     messages: document.msgs,
     contracts: document.msgs.map((message) => {
@@ -40,6 +43,7 @@ function mappedTransactionData(document: Document): {
     }),
     gasWanted: document.fee.gas,
     gasFee: `${document.fee.amount[0].amount}${document.fee.amount[0].denom}`,
+    memo: `${document.memo || ''}`,
     document,
   };
 }
@@ -52,9 +56,7 @@ const ApproveSignContainer: React.FC = () => {
   const { gnoProvider } = useWalletContext();
   const { walletService, transactionService } = useAdenaContext();
   const { currentAccount } = useCurrentAccount();
-  const [transactionData, setTransactionData] = useState<{ [key in string]: any } | undefined>(
-    undefined,
-  );
+  const [transactionData, setTransactionData] = useState<TransactionData>();
   const { currentNetwork } = useNetwork();
   const [hostname, setHostname] = useState('');
   const location = useLocation();
@@ -64,11 +66,19 @@ const ApproveSignContainer: React.FC = () => {
   const [document, setDocument] = useState<Document>();
   const [processType, setProcessType] = useState<'INIT' | 'PROCESSING' | 'DONE'>('INIT');
   const [response, setResponse] = useState<InjectionMessage | null>(null);
+  const [memo, setMemo] = useState('');
 
   const processing = useMemo(() => processType !== 'INIT', [processType]);
 
   const done = useMemo(() => processType === 'DONE', [processType]);
 
+  const hasMemo = useMemo(() => {
+    if (!requestData?.data?.memo) {
+      return false;
+    }
+    return true;
+  }, [requestData?.data?.memo]);
+
   const networkFee = useMemo(() => {
     if (!document || document.fee.amount.length === 0) {
       return {
@@ -159,6 +169,7 @@ const ApproveSignContainer: React.FC = () => {
       setDocument(document);
       setTransactionData(mappedTransactionData(document));
       setHostname(requestData?.hostname ?? '');
+      setMemo(document.memo);
       return true;
     } catch (e) {
       console.error(e);
@@ -176,6 +187,18 @@ const ApproveSignContainer: React.FC = () => {
     return false;
   };
 
+  const changeMemo = (memo: string): void => {
+    setMemo(memo);
+    if (document) {
+      setDocument((prev): Document | undefined => {
+        if (!prev) {
+          return undefined;
+        }
+        return { ...document, memo };
+      });
+    }
+  };
+
   const createSignDocument = async (): Promise<boolean> => {
     if (!document || !currentAccount) {
       setResponse(
@@ -274,12 +297,15 @@ const ApproveSignContainer: React.FC = () => {
     <ApproveTransaction
       title='Sign Transaction'
       domain={hostname}
-      contracts={transactionData?.contracts}
+      contracts={transactionData?.contracts || []}
+      memo={memo}
+      hasMemo={hasMemo}
       loading={transactionData === undefined}
       processing={processing}
       done={done}
       logo={favicon}
       networkFee={networkFee}
+      changeMemo={changeMemo}
       onClickConfirm={onClickConfirm}
       onClickCancel={onClickCancel}
       onResponse={onResponseSignTransaction}
diff --git a/packages/adena-extension/src/pages/popup/wallet/approve-transaction-main/index.tsx b/packages/adena-extension/src/pages/popup/wallet/approve-transaction-main/index.tsx
index 77a97d0bf..77e5e8914 100644
--- a/packages/adena-extension/src/pages/popup/wallet/approve-transaction-main/index.tsx
+++ b/packages/adena-extension/src/pages/popup/wallet/approve-transaction-main/index.tsx
@@ -25,13 +25,16 @@ import { InjectionMessage, InjectionMessageInstance } from '@inject/message';
 import { validateInjectionData } from '@inject/message/methods';
 import { RoutePath } from '@types';
 
-function mappedTransactionData(document: Document): {
+interface TransactionData {
   messages: readonly any[];
-  contracts: { type: string; function: any; value: any }[];
+  contracts: { type: string; function: string; value: any }[];
   gasWanted: string;
   gasFee: string;
+  memo: string;
   document: Document;
-} {
+}
+
+function mappedTransactionData(document: Document): TransactionData {
   return {
     messages: document.msgs,
     contracts: document.msgs.map((message: any) => {
@@ -43,6 +46,7 @@ function mappedTransactionData(document: Document): {
     }),
     gasWanted: document.fee.gas,
     gasFee: `${document.fee.amount[0].amount}${document.fee.amount[0].denom}`,
+    memo: `${document.memo || ''}`,
     document,
   };
 }
@@ -67,9 +71,7 @@ const ApproveTransactionContainer: React.FC = () => {
   const { gnoProvider } = useWalletContext();
   const { walletService, transactionService } = useAdenaContext();
   const { currentAccount, getCurrentAddress } = useCurrentAccount();
-  const [transactionData, setTransactionData] = useState<{ [key in string]: any } | undefined>(
-    undefined,
-  );
+  const [transactionData, setTransactionData] = useState<TransactionData>();
   const [hostname, setHostname] = useState('');
   const location = useLocation();
   const [requestData, setRequestData] = useState<InjectionMessage>();
@@ -80,11 +82,19 @@ const ApproveTransactionContainer: React.FC = () => {
   const [currentBalance, setCurrentBalance] = useState(0);
   const [processType, setProcessType] = useState<'INIT' | 'PROCESSING' | 'DONE'>('INIT');
   const [response, setResponse] = useState<InjectionMessage | null>(null);
+  const [memo, setMemo] = useState('');
 
   const processing = useMemo(() => processType !== 'INIT', [processType]);
 
   const done = useMemo(() => processType === 'DONE', [processType]);
 
+  const hasMemo = useMemo(() => {
+    if (!requestData?.data?.memo) {
+      return false;
+    }
+    return true;
+  }, [requestData?.data?.memo]);
+
   const networkFee = useMemo(() => {
     if (!document || document.fee.amount.length === 0) {
       return {
@@ -163,6 +173,7 @@ const ApproveTransactionContainer: React.FC = () => {
       setDocument(document);
       setTransactionData(mappedTransactionData(document));
       setHostname(requestData?.hostname ?? '');
+      setMemo(document.memo);
       return true;
     } catch (e) {
       const error: any = e;
@@ -182,6 +193,18 @@ const ApproveTransactionContainer: React.FC = () => {
     return false;
   };
 
+  const changeMemo = (memo: string): void => {
+    setMemo(memo);
+    if (document) {
+      setDocument((prev): Document | undefined => {
+        if (!prev) {
+          return undefined;
+        }
+        return { ...document, memo };
+      });
+    }
+  };
+
   const sendTransaction = async (): Promise<boolean> => {
     if (isErrorNetworkFee) {
       return false;
@@ -319,6 +342,7 @@ const ApproveTransactionContainer: React.FC = () => {
       });
     }
   }, [currentAccount, requestData, gnoProvider]);
+
   const onClickCancel = (): void => {
     chrome.runtime.sendMessage(
       InjectionMessageInstance.failure(
@@ -349,13 +373,16 @@ const ApproveTransactionContainer: React.FC = () => {
     <ApproveTransaction
       title='Approve Transaction'
       domain={hostname}
-      contracts={transactionData?.contracts}
+      contracts={transactionData?.contracts || []}
+      memo={memo}
+      hasMemo={hasMemo}
       loading={transactionData === undefined}
       processing={processing}
       done={done}
       logo={favicon}
       isErrorNetworkFee={isErrorNetworkFee}
       networkFee={networkFee}
+      changeMemo={changeMemo}
       onClickConfirm={onClickConfirm}
       onClickCancel={onClickCancel}
       onResponse={onResponseSendTransaction}

From 7fd132aab2b4761e45cd92169bb192ea3bdd8ee6 Mon Sep 17 00:00:00 2001
From: jinoosss <jwchoi@onbloc.xyz>
Date: Tue, 22 Oct 2024 19:42:38 +0900
Subject: [PATCH 5/8] fix: test errors

---
 .../pages/transfer-input/memo-input/memo-input.spec.tsx          | 1 +
 .../pages/transfer-input/transfer-input/transfer-input.spec.tsx  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.spec.tsx b/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.spec.tsx
index 50c34d552..c4436252d 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.spec.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.spec.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { GlobalPopupStyle } from '@styles/global-style';
 import theme from '@styles/theme';
 import { render } from '@testing-library/react';
diff --git a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.spec.tsx b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.spec.tsx
index b37c22f7e..e289e3f51 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.spec.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.spec.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { GlobalPopupStyle } from '@styles/global-style';
 import theme from '@styles/theme';
 import { render } from '@testing-library/react';

From 082550d5e053b40c827f757b38fafef383cf8f94 Mon Sep 17 00:00:00 2001
From: jinoosss <jwchoi@onbloc.xyz>
Date: Wed, 23 Oct 2024 01:46:39 +0900
Subject: [PATCH 6/8] feat: improve transfer page styles

---
 .../transfer-input/memo-input/memo-input.styles.ts  |  9 +++++----
 .../pages/transfer-input/memo-input/memo-input.tsx  |  6 +++++-
 .../transfer-summary-address.styles.ts              |  2 +-
 .../transfer-summary-address.tsx                    | 13 +++++++++++--
 .../src/pages/popup/wallet/transfer-input/index.tsx |  5 ++++-
 .../pages/popup/wallet/transfer-summary/index.tsx   |  9 ++++++++-
 6 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.styles.ts b/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.styles.ts
index cd54051d7..779e31f9b 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.styles.ts
@@ -13,29 +13,30 @@ export const MemoInputWrapper = styled.div`
     width: 100%;
     height: auto;
     padding: 12px 16px;
-    ${fonts.body2Reg};
     background-color: ${getTheme('neutral', '_9')};
     border: 1px solid ${getTheme('neutral', '_7')};
     border-radius: 30px;
-    width: 100%;
     resize: none;
 
+    ${fonts.body2Reg};
+
     &.error {
       border-color: ${getTheme('red', '_5')};
     }
   }
 
   .warning-wrapper {
-    ${mixins.flex({ direction: 'row', justify: 'normal' })};
+    ${mixins.flex({ direction: 'row', justify: 'normal', align: 'flex-start' })};
     width: 100%;
     border-radius: 8px;
     border: 1px solid ${getTheme('red', '_8')}0d;
     background-color: ${getTheme('red', '_8')}1a;
     padding: 12px 20px;
-    gap: 10px;
+    gap: 8px;
 
     .icon-warning {
       width: 14px;
+      padding: 4px 0;
     }
 
     .warning-text {
diff --git a/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.tsx b/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.tsx
index f58802728..6d2b29390 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 
 import IconWarning from '@assets/warning-info.svg';
 import { BaseError } from '@common/errors';
@@ -41,6 +41,10 @@ const MemoInput: React.FC<MemoInputProps> = ({ memo, memoError, onChangeMemo })
     handleResizeHeight();
   };
 
+  useEffect(() => {
+    handleResizeHeight();
+  }, []);
+
   return (
     <MemoInputWrapper>
       <textarea
diff --git a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.styles.ts b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.styles.ts
index e252de37c..5d1bab177 100644
--- a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.styles.ts
@@ -7,7 +7,7 @@ export const TransferSummaryAddressWrapper = styled.div`
   width: 100%;
   height: auto;
   padding: 20px;
-  gap: 20px;
+  gap: 12px;
   ${fonts.body2Reg};
   background-color: ${getTheme('neutral', '_9')};
   border-radius: 18px;
diff --git a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.tsx b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.tsx
index cb8ec82ed..af7f83644 100644
--- a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { TransferSummaryAddressWrapper } from './transfer-summary-address.styles';
 
 export interface TransferSummaryAddressProps {
@@ -7,10 +7,19 @@ export interface TransferSummaryAddressProps {
 }
 
 const TransferSummaryAddress: React.FC<TransferSummaryAddressProps> = ({ toAddress, memo }) => {
+  const memoMessage = useMemo(() => {
+    const prefix = 'Memo:';
+    if (!memo) {
+      return `${prefix} (Empty)`;
+    }
+
+    return `${prefix} ${memo}`;
+  }, [memo]);
+
   return (
     <TransferSummaryAddressWrapper>
       <div className='address-wrapper'>{toAddress}</div>
-      <div className='memo-wrapper'>{memo}</div>
+      <div className='memo-wrapper'>{memoMessage}</div>
     </TransferSummaryAddressWrapper>
   );
 };
diff --git a/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx b/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx
index 6fd1f9491..ad2ebe2dd 100644
--- a/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx
+++ b/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx
@@ -14,6 +14,7 @@ import { calculateByteSize } from '@common/utils/string-utils';
 import useAppNavigate from '@hooks/use-app-navigate';
 import { useNetwork } from '@hooks/use-network';
 import useSessionParams from '@hooks/use-session-state';
+import { useTransferInfo } from '@hooks/use-transfer-info';
 import { TokenModel } from '@types';
 
 interface HistoryData {
@@ -45,10 +46,11 @@ const TransferInputContainer: React.FC = () => {
   const [tokenMetainfo, setTokenMetainfo] = useState<TokenModel | undefined>(params?.tokenBalance);
   const addressBookInput = useAddressBookInput();
   const balanceInput = useBalanceInput(tokenMetainfo);
-  const [memo, setMemo] = useState('');
   const { currentAccount } = useCurrentAccount();
   const { getHistoryData, setHistoryData } = useHistoryData<HistoryData>();
   const { currentNetwork } = useNetwork();
+  const { memorizedTransferInfo, clear: clearMemorizedTransferInfo } = useTransferInfo();
+  const [memo, setMemo] = useState(memorizedTransferInfo?.memo || '');
 
   const memoError = useMemo(() => {
     const size = calculateByteSize(memo);
@@ -143,6 +145,7 @@ const TransferInputContainer: React.FC = () => {
     if (currentAccount && tokenMetainfo) {
       addressBookInput.updateAddressBook();
       balanceInput.updateCurrentBalance();
+      clearMemorizedTransferInfo();
     }
   }, [currentAccount, tokenMetainfo, currentNetwork.chainId]);
 
diff --git a/packages/adena-extension/src/pages/popup/wallet/transfer-summary/index.tsx b/packages/adena-extension/src/pages/popup/wallet/transfer-summary/index.tsx
index 3a253791a..56fe4709f 100644
--- a/packages/adena-extension/src/pages/popup/wallet/transfer-summary/index.tsx
+++ b/packages/adena-extension/src/pages/popup/wallet/transfer-summary/index.tsx
@@ -11,6 +11,7 @@ import useAppNavigate from '@hooks/use-app-navigate';
 import { useAdenaContext, useWalletContext } from '@hooks/use-context';
 import { useCurrentAccount } from '@hooks/use-current-account';
 import { useNetwork } from '@hooks/use-network';
+import { useTransferInfo } from '@hooks/use-transfer-info';
 import { TransactionMessage } from '@services/index';
 import mixins from '@styles/mixins';
 import { RoutePath } from '@types';
@@ -30,6 +31,7 @@ const TransferSummaryContainer: React.FC = () => {
   const { transactionService } = useAdenaContext();
   const { currentAccount, currentAddress } = useCurrentAccount();
   const { currentNetwork } = useNetwork();
+  const { setMemorizedTransferInfo } = useTransferInfo();
   const [isSent, setIsSent] = useState(false);
   const [isErrorNetworkFee, setIsErrorNetworkFee] = useState(false);
 
@@ -159,6 +161,11 @@ const TransferSummaryContainer: React.FC = () => {
     return true;
   }, [summaryInfo, currentAccount, isSent, hasNetworkFee]);
 
+  const onClickBack = useCallback(() => {
+    setMemorizedTransferInfo(summaryInfo);
+    goBack();
+  }, [summaryInfo]);
+
   const onClickCancel = useCallback(() => {
     if (summaryInfo.isTokenSearch === true) {
       navigate(RoutePath.Wallet);
@@ -177,7 +184,7 @@ const TransferSummaryContainer: React.FC = () => {
         isErrorNetworkFee={isErrorNetworkFee}
         networkFee={summaryInfo.networkFee}
         memo={summaryInfo.memo}
-        onClickBack={goBack}
+        onClickBack={onClickBack}
         onClickCancel={onClickCancel}
         onClickSend={transfer}
       />

From f05c3bd26dc0358881c1de5e79e896e464d85a8b Mon Sep 17 00:00:00 2001
From: jinoosss <jwchoi@onbloc.xyz>
Date: Wed, 23 Oct 2024 01:47:00 +0900
Subject: [PATCH 7/8] feat: add memorized transfer page data states

---
 .../src/hooks/use-transfer-info.ts            | 25 +++++++++++++++++++
 packages/adena-extension/src/states/index.ts  |  7 +++---
 .../adena-extension/src/states/transfer.ts    | 21 ++++++++++++++++
 3 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 packages/adena-extension/src/hooks/use-transfer-info.ts
 create mode 100644 packages/adena-extension/src/states/transfer.ts

diff --git a/packages/adena-extension/src/hooks/use-transfer-info.ts b/packages/adena-extension/src/hooks/use-transfer-info.ts
new file mode 100644
index 000000000..acd5cf4aa
--- /dev/null
+++ b/packages/adena-extension/src/hooks/use-transfer-info.ts
@@ -0,0 +1,25 @@
+import { TransferState } from '@states';
+import { useRecoilState } from 'recoil';
+import { TransferInfo } from 'src/states/transfer';
+
+interface UseTransferInfoReturn {
+  memorizedTransferInfo: TransferInfo | null;
+  setMemorizedTransferInfo: (transferInfo: TransferInfo) => void;
+  clear: () => void;
+}
+
+export const useTransferInfo = (): UseTransferInfoReturn => {
+  const [memorizedTransferInfo, setMemorizedTransferInfo] = useRecoilState(
+    TransferState.memorizedTransferInfo,
+  );
+
+  const clear = (): void => {
+    setMemorizedTransferInfo(null);
+  };
+
+  return {
+    memorizedTransferInfo,
+    setMemorizedTransferInfo,
+    clear,
+  };
+};
diff --git a/packages/adena-extension/src/states/index.ts b/packages/adena-extension/src/states/index.ts
index ad926a159..572cb9035 100644
--- a/packages/adena-extension/src/states/index.ts
+++ b/packages/adena-extension/src/states/index.ts
@@ -1,6 +1,7 @@
-export * as WalletState from './wallet';
-export * as ExploreState from './explore';
+export * as BalanceState from './balance';
 export * as CommonState from './common';
+export * as ExploreState from './explore';
 export * as NetworkState from './network';
 export * as TokenState from './token';
-export * as BalanceState from './balance';
+export * as TransferState from './transfer';
+export * as WalletState from './wallet';
diff --git a/packages/adena-extension/src/states/transfer.ts b/packages/adena-extension/src/states/transfer.ts
new file mode 100644
index 000000000..e43f3e3f8
--- /dev/null
+++ b/packages/adena-extension/src/states/transfer.ts
@@ -0,0 +1,21 @@
+import { TokenModel } from '@types';
+import { atom } from 'recoil';
+
+export interface TransferInfo {
+  tokenMetainfo: TokenModel;
+  toAddress: string;
+  transferAmount: {
+    value: string;
+    denom: string;
+  };
+  networkFee: {
+    value: string;
+    denom: string;
+  };
+  memo: string;
+}
+
+export const memorizedTransferInfo = atom<TransferInfo | null>({
+  key: 'transfer/transfer-info',
+  default: null,
+});

From 879df8c61a15978fd36468b06f06000fb2e00760 Mon Sep 17 00:00:00 2001
From: jinoosss <jwchoi@onbloc.xyz>
Date: Wed, 23 Oct 2024 01:47:23 +0900
Subject: [PATCH 8/8] feat: improve approve inject method page styles

---
 .../approve-transaction/approve-transaction.styles.ts       | 6 +++++-
 .../src/components/molecules/approve-transaction/index.tsx  | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts b/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts
index 91a20b2ff..d61d6cade 100644
--- a/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts
+++ b/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts
@@ -110,6 +110,10 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
         color: ${getTheme('neutral', 'a')};
       }
     }
+
+    &.editable {
+      border: 1px solid ${getTheme('neutral', '_7')};
+    }
   }
 
   .fee-amount-wrapper {
@@ -119,7 +123,7 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
     padding: 10px 18px;
     margin-bottom: 8px;
     background-color: ${getTheme('neutral', '_9')};
-    border: 1px solid ${getTheme('neutral', '_8')};
+    border: 1px solid ${getTheme('neutral', '_7')};
     ${fonts.body2Reg};
     ${({ isErrorNetworkFee, theme }): string | false =>
       isErrorNetworkFee && `border-color: ${theme.red._5};`}
diff --git a/packages/adena-extension/src/components/molecules/approve-transaction/index.tsx b/packages/adena-extension/src/components/molecules/approve-transaction/index.tsx
index 2351b9d3d..5250e4748 100644
--- a/packages/adena-extension/src/components/molecules/approve-transaction/index.tsx
+++ b/packages/adena-extension/src/components/molecules/approve-transaction/index.tsx
@@ -109,7 +109,7 @@ export const ApproveTransaction: React.FC<ApproveTransactionProps> = ({
         </div>
       ))}
 
-      <div className='memo-wrapper row'>
+      <div className={hasMemo ? 'memo-wrapper row' : 'memo-wrapper editable row'}>
         <span className='key'>Memo:</span>
         {hasMemo ? (
           <span className={'value'}>{memo}</span>