feat: vai error show

.changeset/fast-drinks-stop.md

@@ -0,0 +1,5 @@
+---
+"@venusprotocol/evm": patch
+---
+
+feat: remove raw translate key on vai

apps/evm/src/pages/Vai/Borrow/index.tsx

@@ -13,7 +13,6 @@ import {
   AcknowledgementToggle,
   Delimiter,
   LabeledInlineContent,
-  NoticeError,
   NoticeWarning,
   Spinner,
 } from 'components';
@@ -45,7 +44,7 @@ import { useSimulateBalanceMutations } from 'hooks/useSimulateBalanceMutations';
 import type { BalanceMutation } from 'types';
 import TEST_IDS from './testIds';
 import type { FormValues } from './types';
-import { ErrorCode, useForm } from './useForm';
+import { useForm } from './useForm';
 
 export const Borrow: React.FC = () => {
   const { t, Trans } = useTranslation();
@@ -180,20 +179,6 @@ export const Borrow: React.FC = () => {
     token: vai,
   });
 
-  const errorMessage = useMemo(() => {
-    const errorCode = formState.errors.amountTokens?.message;
-
-    if (errorCode === ErrorCode.HIGHER_THAN_LIQUIDITY) {
-      return t('vai.borrow.notice.amountHigherThanLiquidity');
-    }
-
-    if (errorCode === ErrorCode.HIGHER_THAN_MINTABLE_AMOUNT) {
-      return t('vai.borrow.notice.amountHigherThanAccountMintableAmount');
-    }
-
-    return undefined;
-  }, [t, formState.errors.amountTokens]);
-
   const isRiskyOperation =
     simulatedPool?.userHealthFactor !== undefined &&
     simulatedPool.userHealthFactor < HEALTH_FACTOR_MODERATE_THRESHOLD &&
@@ -277,8 +262,6 @@ export const Borrow: React.FC = () => {
               }),
           }}
         />
-
-        {errorMessage && <NoticeError description={errorMessage} />}
       </div>
 
       <div className="space-y-3">

apps/evm/src/pages/Vai/Borrow/useForm/index.ts

@@ -5,14 +5,13 @@ import { useForm as useRhfForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { useGetToken } from 'libs/tokens';
+import { useTranslation } from 'libs/translations';
 import { calculateHealthFactor, convertMantissaToTokens } from 'utilities';
 
 import { HEALTH_FACTOR_MODERATE_THRESHOLD } from 'constants/healthFactor';
 import type { FormValues } from '../types';
 
 export enum ErrorCode {
-  HIGHER_THAN_LIQUIDITY = 'HIGHER_THAN_LIQUIDITY',
-  HIGHER_THAN_MINTABLE_AMOUNT = 'HIGHER_THAN_MINTABLE_AMOUNT',
   REQUIRES_RISK_ACKNOWLEDGEMENT = 'REQUIRES_RISK_ACKNOWLEDGEMENT',
 }
 
@@ -31,6 +30,7 @@ export const useForm = ({
   userLiquidationThresholdCents,
   vaiPriceCents,
 }: UseFormProps) => {
+  const { t } = useTranslation();
   const vai = useGetToken({
     symbol: 'VAI',
   })!;
@@ -61,15 +61,15 @@ export const useForm = ({
                 !vaiLiquidityTokens ||
                 new BigNumber(vaiLiquidityTokens).isGreaterThanOrEqualTo(value),
               {
-                message: ErrorCode.HIGHER_THAN_LIQUIDITY,
+                message: t('vai.borrow.notice.amountHigherThanLiquidity'),
               },
             )
             .refine(
               value =>
                 !accountMintableVaiTokens ||
                 new BigNumber(accountMintableVaiTokens).isGreaterThanOrEqualTo(value),
               {
-                message: ErrorCode.HIGHER_THAN_MINTABLE_AMOUNT,
+                message: t('vai.borrow.notice.amountHigherThanAccountMintableAmount'),
               },
             ),
           acknowledgeRisk: z.boolean(),
@@ -109,6 +109,7 @@ export const useForm = ({
       userBorrowBalanceCents,
       userLiquidationThresholdCents,
       vaiPriceCents,
+      t,
     ],
   );
 

apps/evm/src/pages/Vai/Repay/index.tsx

@@ -3,14 +3,7 @@ import { useCallback, useEffect, useMemo } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 
 import { useGetBalanceOf, useGetPool, useRepayVai } from 'clients/api';
-import {
-  Delimiter,
-  LabeledInlineContent,
-  NoticeError,
-  NoticeWarning,
-  SpendingLimit,
-  Spinner,
-} from 'components';
+import { Delimiter, LabeledInlineContent, NoticeWarning, SpendingLimit, Spinner } from 'components';
 import { NULL_ADDRESS } from 'constants/address';
 import MAX_UINT256 from 'constants/maxUint256';
 import { AccountData } from 'containers/AccountData';
@@ -32,7 +25,7 @@ import formatPercentageToReadableValue from 'utilities/formatPercentageToReadabl
 import { generatePseudoRandomRefetchInterval } from 'utilities/generatePseudoRandomRefetchInterval';
 import TEST_IDS from './testIds';
 import type { FormValues } from './types';
-import { ErrorCode, useForm } from './useForm';
+import { useForm } from './useForm';
 
 const userVaiBalanceRefetchInterval = generatePseudoRandomRefetchInterval();
 
@@ -127,26 +120,6 @@ export const Repay: React.FC = () => {
 
   const isRepayingFullLoan = !!userVaiBorrowBalanceTokens?.isEqualTo(debouncedInputAmountTokens);
 
-  const errorMessage = useMemo(() => {
-    const errorCode = formState.errors.amountTokens?.message;
-
-    if (errorCode === ErrorCode.HIGHER_THAN_WALLET_BALANCE) {
-      return t('vai.repay.notice.amountHigherThanWalletBalance', {
-        tokenSymbol: vai.symbol,
-      });
-    }
-
-    if (errorCode === ErrorCode.HIGHER_THAN_WALLET_SPENDING_LIMIT) {
-      return t('vai.repay.notice.amountHigherThanWalletSpendingLimit');
-    }
-
-    if (errorCode === ErrorCode.HIGHER_THAN_BORROW_BALANCE) {
-      return t('vai.repay.notice.amountHigherThanBorrowBalance');
-    }
-
-    return undefined;
-  }, [t, formState.errors.amountTokens, vai]);
-
   // Reset form when user disconnects their wallet
   useEffect(() => {
     if (!accountAddress) {
@@ -213,9 +186,7 @@ export const Repay: React.FC = () => {
           }
         />
 
-        {errorMessage && <NoticeError description={errorMessage} />}
-
-        {!errorMessage && isRepayingFullLoan && (
+        {!formState.errors.amountTokens && isRepayingFullLoan && (
           <NoticeWarning description={t('vai.repay.notice.fullRepaymentWarning')} />
         )}
       </div>

apps/evm/src/pages/Vai/Repay/useForm/index.ts

@@ -5,15 +5,10 @@ import { useForm as useRhfForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { useGetToken } from 'libs/tokens';
+import { useTranslation } from 'libs/translations';
 import { convertMantissaToTokens } from 'utilities';
 import type { FormValues } from '../types';
 
-export enum ErrorCode {
-  HIGHER_THAN_WALLET_BALANCE = 'HIGHER_THAN_WALLET_BALANCE',
-  HIGHER_THAN_BORROW_BALANCE = 'HIGHER_THAN_BORROW_BALANCE',
-  HIGHER_THAN_WALLET_SPENDING_LIMIT = 'HIGHER_THAN_WALLET_SPENDING_LIMIT',
-}
-
 export interface UseFormProps {
   userVaiWalletBalanceMantissa?: BigNumber;
   userVaiBorrowBalanceTokens?: BigNumber;
@@ -25,6 +20,7 @@ export const useForm = ({
   userVaiBorrowBalanceTokens,
   userWalletSpendingLimitTokens,
 }: UseFormProps) => {
+  const { t } = useTranslation();
   const vai = useGetToken({
     symbol: 'VAI',
   })!;
@@ -65,15 +61,17 @@ export const useForm = ({
               !userVaiWalletBalanceTokens ||
               new BigNumber(userVaiWalletBalanceTokens).isGreaterThanOrEqualTo(value),
             {
-              message: ErrorCode.HIGHER_THAN_WALLET_BALANCE,
+              message: t('vai.repay.notice.amountHigherThanWalletBalance', {
+                tokenSymbol: vai.symbol,
+              }),
             },
           )
           .refine(
             value =>
               !userVaiBorrowBalanceTokens ||
               new BigNumber(userVaiBorrowBalanceTokens).isGreaterThanOrEqualTo(value),
             {
-              message: ErrorCode.HIGHER_THAN_BORROW_BALANCE,
+              message: t('vai.repay.notice.amountHigherThanBorrowBalance'),
             },
           )
           .refine(
@@ -82,11 +80,11 @@ export const useForm = ({
               userWalletSpendingLimitTokens.isEqualTo(0) ||
               new BigNumber(userWalletSpendingLimitTokens).isGreaterThanOrEqualTo(value),
             {
-              message: ErrorCode.HIGHER_THAN_WALLET_SPENDING_LIMIT,
+              message: t('vai.repay.notice.amountHigherThanWalletSpendingLimit'),
             },
           ),
       }) satisfies z.ZodType<FormValues>,
-    [userVaiWalletBalanceTokens, userVaiBorrowBalanceTokens, userWalletSpendingLimitTokens],
+    [userVaiWalletBalanceTokens, userVaiBorrowBalanceTokens, userWalletSpendingLimitTokens, t, vai],
   );
 
   const form = useRhfForm({