feat: add more error messeges (#16)

apps/frontend/src/constants/index.ts

@@ -27,6 +27,9 @@ export const TOKENS_BY_ASSET_ID: Record<string, IToken> = TOKENS_LIST.reduce(
   (acc, t) => ({ ...acc, [t.assetId]: t }),
   {}
 );
+
+export const TX_GAS_LIMIT = 1000000;
+
 export const INDEXER_URL =
   'https://spark-indexer.spark-defi.com/api/sql/composabilitylabs/spark_indexer';
 

apps/frontend/src/screens/Dashboard/ActionTab/InputCard.tsx

@@ -23,6 +23,7 @@ import { ACTION_TYPE } from '@src/stores/DashboardStore';
 import BN from '@src/utils/BN';
 import centerEllipsis from '@src/utils/centerEllipsis';
 import { currentAssetCollateralCapacityLeft } from '@src/utils/dashboardUtils';
+import { errorToMessage } from '@src/utils/errorMessage';
 import {
   borrowBase,
   supplyBase,
@@ -346,7 +347,6 @@ const InputCard: React.FC<IProps> = () => {
       await accountStore.updateAccountBalances();
       refetchData();
     } catch (e) {
-      console.log('err', e);
       const { addErrorToLog } = settingsStore;
       const err = {
         fuelAddress: accountStore.address,
@@ -355,19 +355,19 @@ const InputCard: React.FC<IProps> = () => {
         action: dashboardStore.action,
         errorMessage: e?.toString() ?? '',
       };
-      console.log(e);
+      console.log(err);
       addErrorToLog(err);
       const error = JSON.parse(JSON.stringify(e)).toString();
       notificationStore.toast(error.error, {
         type: 'error',
-        title: 'Oops..',
+        title: errorToMessage(e?.toString() ?? ''),
       });
     } finally {
       dashboardStore.setLoading(false);
     }
   };
 
-  const marketActionMainBtnState = () => {
+  const marketActionMainBtnState = (): boolean => {
     //if (!this.initialized) return false;
 
     if (
@@ -390,7 +390,7 @@ const InputCard: React.FC<IProps> = () => {
         );
 
         if (balance == null) return false;
-        return balance.balance?.gte(dashboardStore.tokenAmount);
+        return balance.balance?.gte(dashboardStore.tokenAmount) ?? false;
       }
       //collateral
 
@@ -416,7 +416,7 @@ const InputCard: React.FC<IProps> = () => {
         )
       )
         return false;
-      return balance.balance?.gte(dashboardStore.tokenAmount);
+      return balance.balance?.gte(dashboardStore.tokenAmount) ?? false;
     }
     //if withdraw
     if (dashboardStore.action === ACTION_TYPE.WITHDRAW) {
@@ -522,7 +522,7 @@ const InputCard: React.FC<IProps> = () => {
         const balance1 = accountStore.findBalanceByAssetId(
           dashboardStore.baseToken.assetId
         );
-        balance1?.balance?.gte(maxBorrowAmount)
+        balance1?.balance?.gte(userSupplyBorrow[1])
           ? dashboardStore.setTokenAmount(userSupplyBorrow[1])
           : dashboardStore.setTokenAmount(balance1?.balance ?? BN.ZERO);
         break;
@@ -570,7 +570,9 @@ const InputCard: React.FC<IProps> = () => {
               <Button
                 fixed
                 onClick={marketAction} //Main function
-                disabled={!marketActionMainBtnState}
+                disabled={
+                  !marketActionMainBtnState() || tokenInputError() != null
+                }
               >
                 {dashboardStore.operationName}
               </Button>

apps/frontend/src/utils/errorMessage.tsx

@@ -0,0 +1,20 @@
+const ERRORS = {
+  "TypeError: Cannot read properties of undefined (reading 'waitForResult')":
+    'There was a problem.',
+  'FuelError: not enough coins to fit the target':
+    'FuelError: not enough coins to fit the target',
+  'FuelError: The transaction reverted with reason: "…t/fuel_asm/enum.PanicReason.html#variant.OutOfGas':
+    'Execution ran out of gas.',
+  'FuelError: The transaction reverted because a "require" statement has thrown "NotCollateralized".':
+    'Cannot withdraw more than collateralized. Try lowering the amount.',
+} as Record<string, string>;
+
+export const errorToMessage = (error: string) => {
+  if (
+    error.startsWith(
+      `FuelError: The transaction reverted with reason: "OutOfGas"`
+    )
+  )
+    return 'Execution ran out of gas. Try again.';
+  return ERRORS[error] || 'An error occurred. Please try again later.';
+};

apps/frontend/src/utils/marketUtils.ts

@@ -1,4 +1,5 @@
 import { PYTH_CONTRACT_ABI } from '@pythnetwork/pyth-fuel-js';
+import { TX_GAS_LIMIT } from '@src/constants';
 import type { MarketAbi } from '@src/contract-types';
 import type { AccountStore, DashboardStore, SettingsStore } from '@src/stores';
 import { Contract } from 'fuels';
@@ -18,6 +19,9 @@ export const supplyBase = async (
         assetId: dashboardStore.baseToken.assetId,
       },
     })
+    .txParams({
+      gasLimit: TX_GAS_LIMIT,
+    })
     .call();
 };
 export const withdrawBase = async (
@@ -29,6 +33,9 @@ export const withdrawBase = async (
 
   return market.functions
     .withdraw_base(dashboardStore.tokenAmount.toString())
+    .txParams({
+      gasLimit: TX_GAS_LIMIT,
+    })
     .call();
 };
 
@@ -51,6 +58,9 @@ export const supplyCollateral = async (
         amount: dashboardStore.tokenAmount.toString(),
       },
     })
+    .txParams({
+      gasLimit: TX_GAS_LIMIT,
+    })
     .call();
 };
 
@@ -80,6 +90,9 @@ export const withdrawCollateral = async (
       dashboardStore.tokenAmount.toString()
     )
     .addContracts([oracle])
+    .txParams({
+      gasLimit: TX_GAS_LIMIT,
+    })
     .call();
 };
 
@@ -106,5 +119,8 @@ export const borrowBase = async (
   return market.functions
     .withdraw_base(dashboardStore.tokenAmount.toFixed(0))
     .addContracts([oracle])
+    .txParams({
+      gasLimit: TX_GAS_LIMIT,
+    })
     .call();
 };