fix: storage deposit error message (#768)

Author: jinoosss

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

@@ -41,6 +41,7 @@ export interface ApproveTransactionProps {
   processing: boolean;
   done: boolean;
   transactionMessages: ContractMessage[];
+  maxDepositAmount?: number;
   changeTransactionMessages: (messages: ContractMessage[]) => void;
   changeMemo: (memo: string) => void;
   openScannerLink: (path: string, parameters?: { [key in string]: string }) => void;
@@ -69,6 +70,7 @@ export const ApproveTransaction: React.FC<ApproveTransactionProps> = ({
   done,
   useNetworkFeeReturn,
   argumentInfos,
+  maxDepositAmount,
   changeTransactionMessages,
   changeMemo,
   onToggleTransactionData,
@@ -96,6 +98,22 @@ export const ApproveTransaction: React.FC<ApproveTransactionProps> = ({
     networkFee,
   ]);
 
+  const isMaxDepositError = useMemo(() => {
+    if (!maxDepositAmount || currentBalance === undefined) {
+      return false;
+    }
+
+    return currentBalance < maxDepositAmount;
+  }, [currentBalance, maxDepositAmount]);
+
+  const maxDepositErrorMessage = useMemo(() => {
+    if (isMaxDepositError) {
+      return 'Insufficient balance';
+    }
+
+    return '';
+  }, [currentBalance, maxDepositAmount]);
+
   const networkFeeErrorMessage = useMemo(() => {
     if (useNetworkFeeReturn.isSimulateError) {
       if (currentBalance !== 0) {
@@ -214,8 +232,8 @@ export const ApproveTransaction: React.FC<ApproveTransactionProps> = ({
             unlockDeposit: useNetworkFeeReturn.currentStorageDeposits?.unlockDeposit || 0,
           }}
           isLoading={useNetworkFeeReturn.isLoading}
-          isError={useNetworkFeeReturn.isSimulateError || isErrorNetworkFee}
-          errorMessage={networkFeeErrorMessage}
+          isError={useNetworkFeeReturn.isSimulateError || isMaxDepositError}
+          errorMessage={maxDepositErrorMessage}
         />
 
         <NetworkFee

packages/adena-extension/src/components/molecules/storage-deposit/storage-deposit.tsx

@@ -40,16 +40,8 @@ const StorageDeposit: React.FC<StorageDepositProps> = ({
       return false;
     }
 
-    return isError || !!errorMessage;
-  }, [isLoading, isError, errorMessage]);
-
-  const displayErrorMessage = useMemo(() => {
-    if (!hasError || isEmptyValue) {
-      return '';
-    }
-
-    return errorMessage;
-  }, [hasError, isEmptyValue, errorMessage]);
+    return isError;
+  }, [isLoading, isError]);
 
   const depositAmount = useMemo(() => {
     if (isEmptyValue) {
@@ -69,7 +61,7 @@ const StorageDeposit: React.FC<StorageDepositProps> = ({
 
   return (
     <StorageDepositContainer>
-      <StorageDepositWrapper error={hasError && !isEmptyValue ? 1 : 0}>
+      <StorageDepositWrapper error={hasError ? 1 : 0}>
         <span className='key'>
           {'Storage Deposit'}
 
@@ -85,7 +77,7 @@ const StorageDeposit: React.FC<StorageDepositProps> = ({
         </div>
       </StorageDepositWrapper>
 
-      {displayErrorMessage && <span className='error-message'>{displayErrorMessage}</span>}
+      {errorMessage && <span className='error-message'>{errorMessage}</span>}
     </StorageDepositContainer>
   );
 };

packages/adena-extension/src/pages/popup/wallet/approve-transaction-main/index.tsx

@@ -153,6 +153,25 @@ const ApproveTransactionContainer: React.FC = () => {
     };
   }, [networkFee]);
 
+  const maxDepositAmount = useMemo(() => {
+    const accumulatedAmount = document?.msgs.reduce((acc, msg): number => {
+      const messageValue = msg.value;
+      const amountStr = messageValue?.max_deposit;
+      if (!amountStr) {
+        return acc;
+      }
+
+      try {
+        const amount = parseTokenAmount(amountStr);
+        return BigNumber(acc).plus(amount).toNumber();
+      } catch {
+        return acc;
+      }
+    }, 0);
+
+    return accumulatedAmount;
+  }, [document]);
+
   const consumedTokenAmount = useMemo(() => {
     const accumulatedAmount = document?.msgs.reduce((acc, msg) => {
       const messageValue = msg.value;
@@ -506,6 +525,7 @@ const ApproveTransactionContainer: React.FC = () => {
       done={done}
       logo={favicon}
       currentBalance={currentBalance}
+      maxDepositAmount={maxDepositAmount}
       isErrorNetworkFee={isErrorNetworkFee || !networkFee}
       networkFee={displayNetworkFee}
       useNetworkFeeReturn={useNetworkFeeReturn}