feat: add a memo field

packages/adena-extension/src/common/errors/validation/transaction-validation-error.ts

@@ -0,0 +1,23 @@
+import { BaseError } from '../base';
+
+const ERROR_VALUE = {
+  MEMO_TOO_LARGE_ERROR: {
+    status: 1000,
+    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;
+
+export class TransactionValidationError extends BaseError {
+  constructor(errorType: ErrorType) {
+    super(ERROR_VALUE[errorType]);
+    Object.setPrototypeOf(this, TransactionValidationError.prototype);
+  }
+}

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;
+}

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;
       },

packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts

@@ -78,14 +78,52 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
     background-color: ${getTheme('neutral', '_9')};
   }
 
-  .fee-amount-wrapper {
+  .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')};
+      }
+    }
+
+    &.editable {
+      border: 1px solid ${getTheme('neutral', '_7')};
+    }
+  }
+
+  .fee-amount-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', '_7')};
     ${fonts.body2Reg};
     ${({ isErrorNetworkFee, theme }): string | false =>
       isErrorNetworkFee && `border-color: ${theme.red._5};`}

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,14 +109,35 @@ export const ApproveTransaction: React.FC<ApproveTransactionProps> = ({
         </div>
       ))}
 
+      <div className={hasMemo ? 'memo-wrapper row' : 'memo-wrapper editable 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>
       </div>
       {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</>

packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.spec.tsx

@@ -0,0 +1,27 @@
+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 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>,
+    );
+  });
+});

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'),
+  },
+};

packages/adena-extension/src/components/pages/transfer-input/memo-input/memo-input.styles.ts

@@ -0,0 +1,56 @@
+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;
+    background-color: ${getTheme('neutral', '_9')};
+    border: 1px solid ${getTheme('neutral', '_7')};
+    border-radius: 30px;
+    resize: none;
+
+    ${fonts.body2Reg};
+
+    &.error {
+      border-color: ${getTheme('red', '_5')};
+    }
+  }
+
+  .warning-wrapper {
+    ${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: 8px;
+
+    .icon-warning {
+      width: 14px;
+      padding: 4px 0;
+    }
+
+    .warning-text {
+      width: 100%;
+      ${fonts.body2Reg};
+      color: ${getTheme('red', '_8')};
+    }
+  }
+
+  .error-message {
+    position: relative;
+    margin-top: -10px;
+    padding: 0 16px;
+    ${fonts.captionReg};
+    color: ${getTheme('red', '_5')};
+  }
+`;