fix: fix a error message

Author: jinoosss

packages/adena-extension/src/components/molecules/approve-transaction/index.tsx

@@ -57,7 +57,6 @@ export const ApproveTransaction: React.FC<ApproveTransactionProps> = ({
   logo,
   domain,
   transactionMessages,
-  changeTransactionMessages,
   memo,
   currentBalance,
   hasMemo,
@@ -69,6 +68,7 @@ export const ApproveTransaction: React.FC<ApproveTransactionProps> = ({
   done,
   useNetworkFeeReturn,
   argumentInfos,
+  changeTransactionMessages,
   changeMemo,
   onToggleTransactionData,
   onResponse,

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

@@ -1,7 +1,9 @@
 import React from 'react';
+
 import { GlobalPopupStyle } from '@styles/global-style';
 import theme from '@styles/theme';
 import { render } from '@testing-library/react';
+import { NetworkFeeSettingType } from '@types';
 import { RecoilRoot } from 'recoil';
 import { ThemeProvider } from 'styled-components';
 import TransferSummary, { TransferSummaryProps } from './transfer-summary';
@@ -20,6 +22,29 @@ describe('TransferSummary Component', () => {
         decimals: 6,
         display: true,
       },
+      currentBalance: 1000000,
+      useNetworkFeeReturn: {
+        isLoading: false,
+        isSimulateError: false,
+        currentGasInfo: null,
+        currentGasFeeRawAmount: 0,
+        changedGasInfo: null,
+        networkFee: null,
+        networkFeeSettingType: NetworkFeeSettingType.AVERAGE,
+        networkFeeSettings: null,
+        gasAdjustment: '0',
+        setGasAdjustment: () => {
+          return;
+        },
+        setNetworkFeeSetting: () => {
+          return;
+        },
+        save: () => {
+          return;
+        },
+        isFetchedPriceTiers: false,
+        isFetchedEstimateGasInfo: false,
+      },
       tokenImage: '',
       transferBalance: {
         value: '4,000.123',

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

@@ -9,6 +9,7 @@ export const TransferSummaryWrapper = styled.div`
   height: 100%;
   padding-top: 5px;
   min-height: 444px;
+  padding-bottom: 70px;
   align-items: center;
 
   .sub-header-wrapper {
@@ -41,41 +42,8 @@ export const TransferSummaryWrapper = styled.div`
   }
 
   .button-group {
-    position: absolute;
-    display: flex;
+    display: block;
+    padding-top: 70px;
     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;
-      }
-
-      &.send {
-        background-color: ${getTheme('primary', '_6')};
-
-        &:hover {
-          background-color: ${getTheme('primary', '_7')};
-        }
-
-        &.disabled {
-          background-color: ${getTheme('primary', '_9')};
-          color: ${getTheme('neutral', '_5')};
-          cursor: default;
-        }
-      }
-    }
   }
 `;

packages/adena-extension/src/components/pages/transfer-summary/transfer-summary/transfer-summary.tsx

@@ -8,8 +8,9 @@ import TransferSummaryAddress from '../transfer-summary-address/transfer-summary
 import TransferSummaryBalance from '../transfer-summary-balance/transfer-summary-balance';
 import { TransferSummaryWrapper } from './transfer-summary.styles';
 
-import { TransactionValidationError } from '@common/errors/validation/transaction-validation-error';
+import { BottomFixedButtonGroup } from '@components/molecules';
 import NetworkFee from '@components/molecules/network-fee/network-fee';
+import { UseNetworkFeeReturn } from '@hooks/wallet/use-network-fee';
 import { Amount, NetworkFee as NetworkFeeType, TokenModel } from '@types';
 
 export interface TransferSummaryProps {
@@ -19,6 +20,8 @@ export interface TransferSummaryProps {
   toAddress: string;
   networkFee: NetworkFeeType | null;
   memo: string;
+  currentBalance: number | null | undefined;
+  useNetworkFeeReturn: UseNetworkFeeReturn;
   isErrorNetworkFee?: boolean;
   isLoadingNetworkFee?: boolean;
   onClickBack: () => void;
@@ -34,26 +37,52 @@ const TransferSummary: React.FC<TransferSummaryProps> = ({
   toAddress,
   networkFee,
   memo,
+  currentBalance,
+  useNetworkFeeReturn,
   isErrorNetworkFee,
-  isLoadingNetworkFee,
   onClickBack,
   onClickCancel,
   onClickSend,
   onClickNetworkFeeSetting,
 }) => {
-  const insufficientNetworkFeeError = new TransactionValidationError('INSUFFICIENT_NETWORK_FEE');
-
   const disabledSendButton = useMemo(() => {
-    return isLoadingNetworkFee || isErrorNetworkFee;
-  }, [isLoadingNetworkFee, isErrorNetworkFee]);
+    if (useNetworkFeeReturn.isLoading) {
+      return true;
+    }
+
+    if (isErrorNetworkFee || useNetworkFeeReturn.isSimulateError) {
+      return true;
+    }
+
+    return Number(networkFee?.amount || 0) <= 0;
+  }, [
+    isErrorNetworkFee,
+    useNetworkFeeReturn.isLoading,
+    useNetworkFeeReturn.isSimulateError,
+    networkFee,
+  ]);
 
-  const errorMessage = useMemo(() => {
-    if (!isErrorNetworkFee) {
-      return '';
+  const networkFeeErrorMessage = useMemo(() => {
+    if (useNetworkFeeReturn.isSimulateError) {
+      if (currentBalance !== 0) {
+        return 'This transaction cannot be simulated. Try again.';
+      }
     }
 
-    return insufficientNetworkFeeError.message;
-  }, [isErrorNetworkFee, insufficientNetworkFeeError.message]);
+    if (isErrorNetworkFee) {
+      return 'Insufficient network fee';
+    }
+
+    return '';
+  }, [useNetworkFeeReturn.isSimulateError, isErrorNetworkFee, currentBalance]);
+
+  const simulateErrorMessage = useMemo(() => {
+    if (useNetworkFeeReturn.isSimulateError) {
+      return useNetworkFeeReturn.currentGasInfo?.simulateErrorMessage || null;
+    }
+
+    return null;
+  }, [useNetworkFeeReturn.isSimulateError, useNetworkFeeReturn.currentGasInfo]);
 
   return (
     <TransferSummaryWrapper>
@@ -83,23 +112,29 @@ const TransferSummary: React.FC<TransferSummaryProps> = ({
 
       <div className='network-fee-wrapper'>
         <NetworkFee
-          isError={isErrorNetworkFee}
-          isLoading={isLoadingNetworkFee}
           value={networkFee?.amount || ''}
           denom={networkFee?.denom || ''}
-          errorMessage={errorMessage}
+          isError={useNetworkFeeReturn.isSimulateError || isErrorNetworkFee}
+          isLoading={useNetworkFeeReturn.isLoading}
+          errorMessage={networkFeeErrorMessage}
+          simulateErrorMessage={simulateErrorMessage}
           onClickSetting={onClickNetworkFeeSetting}
         />
       </div>
+      {simulateErrorMessage !== null && <div className='button-group' />}
 
-      <div className='button-group'>
-        <button className='cancel' onClick={onClickCancel}>
-          Cancel
-        </button>
-        <button className={disabledSendButton ? 'send disabled' : 'send'} onClick={onClickSend}>
-          Send
-        </button>
-      </div>
+      <BottomFixedButtonGroup
+        leftButton={{
+          text: 'Cancel',
+          onClick: onClickCancel,
+        }}
+        rightButton={{
+          text: 'Send',
+          primary: true,
+          onClick: onClickSend,
+          disabled: disabledSendButton,
+        }}
+      />
     </TransferSummaryWrapper>
   );
 };

packages/adena-extension/src/pages/popup/wallet/transfer-summary/index.tsx

@@ -309,6 +309,8 @@ const TransferSummaryContainer: React.FC = () => {
           isLoadingNetworkFee={useNetworkFeeReturn.isLoading}
           networkFee={networkFee}
           memo={summaryInfo.memo}
+          currentBalance={currentBalance}
+          useNetworkFeeReturn={useNetworkFeeReturn}
           onClickBack={onClickBack}
           onClickCancel={onClickCancel}
           onClickSend={transfer}