update Validation component

pendulum-chain · Oct 29, 2024 · 32657e4 · 32657e4
1 parent 624bcee
commit 32657e4
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 26 deletions.
diff --git a/src/components/Form/Validation/index.tsx b/src/components/Form/Validation/index.tsx
@@ -1,18 +1,21 @@
-import { FieldErrors } from 'react-hook-form';
+import { FieldError, FieldErrors } from 'react-hook-form';
 
 export interface ValidationProps {
   errors?: FieldErrors;
   className?: string;
 }
 
-const Validation = ({ errors = {}, className }: ValidationProps): JSX.Element | null => {
-  const keys = Object.keys(errors);
-  if (keys.length === 0) return null;
+export const Validation = ({ errors = {}, className = '' }: ValidationProps) => {
+  const errorEntries = Object.entries(errors);
+
+  if (errorEntries.length === 0) return <></>;
+
   return (
     <ul className={`text-sm text-red-400 ${className}`}>
-      {/** @ts-expect-error @todo remove */}
-      {keys.map((key) => (errors[key] && errors[key]?.message ? <li key={key}>{errors[key]?.message}</li> : null))}
+      {errorEntries.map(([field, error]) => {
+        const message = (error as FieldError)?.message;
+        return typeof message === 'string' ? <li key={field}>{message}</li> : null;
+      })}
     </ul>
   );
 };
-export default Validation;
diff --git a/src/components/nabla/Pools/Backstop/AddLiquidity/index.tsx b/src/components/nabla/Pools/Backstop/AddLiquidity/index.tsx
@@ -4,7 +4,7 @@ import { Big } from 'big.js';
 
 import { PoolProgress } from '../..';
 import { rawToDecimal, stringifyBigWithSignificantDecimals } from '../../../../../shared/parseNumbers/metric';
-import Validation from '../../../../Form/Validation';
+import { Validation } from '../../../../Form/Validation';
 import { NumberLoader } from '../../../../Loader';
 import { useAddLiquidity } from './useAddLiquidity';
 import { NablaInstanceBackstopPool } from '../../../../../hooks/nabla/useNablaInstance';
@@ -48,16 +48,16 @@ const AddLiquidity = ({ data, onClose }: AddLiquidityProps): JSX.Element => {
         <PoolProgress symbol={data.token.symbol} amount={amountString} />
       </TransactionProgress>
       <div className={hideCss}>
-        <div className="absolute top-0 flex items-center gap-2 mt-2 mb-8 translate-y-2/4">
+        <div className="absolute top-0 mb-8 mt-2 flex translate-y-2/4 items-center gap-2">
           <Button size="sm" color="ghost" className="px-2" type="button" onClick={() => toggle(undefined)}>
-            <ArrowLeftIcon className="w-4 h-4 dark:text-neutral-400" />
+            <ArrowLeftIcon className="h-4 w-4 dark:text-neutral-400" />
           </Button>
           <h3 className="text-3xl font-normal">Deposit {data.token.symbol}</h3>
         </div>
         <FormProvider {...form}>
           <form onSubmit={onSubmit}>
             {walletAccount && (
-              <div className="flex justify-between my-3 text-sm align-end text-initial">
+              <div className="align-end text-initial my-3 flex justify-between text-sm">
                 <p>
                   Deposited: <TokenBalance query={depositQuery} symbol={data.symbol}></TokenBalance>
                 </p>
@@ -73,7 +73,7 @@ const AddLiquidity = ({ data, onClose }: AddLiquidityProps): JSX.Element => {
               showAvailableActions={true}
             />
             <Validation className="mt-2 text-center" errors={errors} />
-            <div className="relative flex flex-col w-full gap-4 p-4 mt-4 rounded-lg bg-base-300 text-neutral-500 dark:text-neutral-300">
+            <div className="relative mt-4 flex w-full flex-col gap-4 rounded-lg bg-base-300 p-4 text-neutral-500 dark:text-neutral-300">
               <div className="flex items-center justify-between">
                 <div>Total LP tokens</div>
                 <div>
@@ -113,7 +113,7 @@ const AddLiquidity = ({ data, onClose }: AddLiquidityProps): JSX.Element => {
               </TokenApproval>
               <Button
                 color="secondary"
-                className="w-full mt-2"
+                className="mt-2 w-full"
                 type="button"
                 disabled={mutation.isLoading}
                 onClick={() => toggle()}

diff --git a/src/components/nabla/Pools/Backstop/WithdrawLiquidity/index.tsx b/src/components/nabla/Pools/Backstop/WithdrawLiquidity/index.tsx
@@ -5,7 +5,7 @@ import { Button } from 'react-daisyui';
 import { PoolProgress } from '../..';
 import { calcSharePercentage, getPoolSurplusNativeAmount } from '../../../../../helpers/calc';
 import { rawToDecimal, stringifyBigWithSignificantDecimals } from '../../../../../shared/parseNumbers/metric';
-import Validation from '../../../../Form/Validation';
+import { Validation } from '../../../../Form/Validation';
 import { NumberLoader } from '../../../../Loader';
 import FormLoader from '../../../../Loader/Form';
 import { useWithdrawLiquidity } from './useWithdrawLiquidity';
@@ -73,26 +73,26 @@ const WithdrawLiquidityBody = ({ nabla, onClose }: WithdrawLiquidityBodyProps):
       </TransactionProgress>
       <h3 className={`mb-8 mt-2 flex items-center gap-2 ${hideCss} absolute top-0 translate-y-2/4`}>
         <Button size="sm" color="ghost" className="px-2" type="button" onClick={() => toggle()}>
-          <ArrowLeftIcon className="w-4 h-4 dark:text-neutral-400" />
+          <ArrowLeftIcon className="h-4 w-4 dark:text-neutral-400" />
         </Button>
         <span className="text-3xl font-normal">Withdraw from</span>
         <Button
-          className="px-2 rounded-2xl bg-neutral-200 dark:bg-neutral-800"
+          className="rounded-2xl bg-neutral-200 px-2 dark:bg-neutral-800"
           size="sm"
           type="button"
           onClick={() => setShowTokenModal(true)}
         >
           <strong className="font-bold">
             {selectedPool === undefined ? 'Backstop Pool' : `Swap Pool ${selectedPool.token.symbol}`}
           </strong>
-          <ChevronDownIcon className="inline w-4 h-4" />
+          <ChevronDownIcon className="inline h-4 w-4" />
         </Button>
       </h3>
       <div className={hideCss}>
         <FormProvider {...form}>
           <form onSubmit={onSubmit}>
             {walletAccount && (
-              <div className="flex justify-between my-3 text-sm align-end text-initial">
+              <div className="align-end text-initial my-3 flex justify-between text-sm">
                 <p>
                   Deposited: <TokenBalance query={depositQuery} symbol={backstopPool.symbol}></TokenBalance>
                 </p>
@@ -104,7 +104,7 @@ const WithdrawLiquidityBody = ({ nabla, onClose }: WithdrawLiquidityBodyProps):
             <AmountSelector maxBalance={depositQuery.data} formFieldName="amount" form={form}>
               <div className="flex items-start justify-start pt-2">
                 <div className="flex-grow">
-                  <div className="flex items-center justify-between flex-grow mr-2">
+                  <div className="mr-2 flex flex-grow items-center justify-between">
                     <div>You will withdraw</div>
                     <TokenBalance
                       query={withdrawalQuote}
@@ -113,7 +113,7 @@ const WithdrawLiquidityBody = ({ nabla, onClose }: WithdrawLiquidityBodyProps):
                     ></TokenBalance>
                   </div>
                   {walletAccount && (
-                    <div className="flex items-center justify-between flex-grow mr-2 text-sm text-neutral-500 dark:text-neutral-400">
+                    <div className="mr-2 flex flex-grow items-center justify-between text-sm text-neutral-500 dark:text-neutral-400">
                       <div>Your current balance</div>
                       <TokenBalance query={balanceQuery} symbol={tokenToReceive.symbol}></TokenBalance>
                     </div>
@@ -135,7 +135,7 @@ const WithdrawLiquidityBody = ({ nabla, onClose }: WithdrawLiquidityBodyProps):
               </div>
             </AmountSelector>
             <Validation className="mt-2 text-center" errors={errors} />
-            <div className="relative flex flex-col w-full gap-4 p-4 mt-4 rounded-lg bg-neutral-100 text-neutral-500 dark:bg-neutral-700 dark:text-neutral-300">
+            <div className="relative mt-4 flex w-full flex-col gap-4 rounded-lg bg-neutral-100 p-4 text-neutral-500 dark:bg-neutral-700 dark:text-neutral-300">
               <div className="flex items-center justify-between">
                 <div>Total backstop pool LP tokens</div>
                 <div>
@@ -164,7 +164,7 @@ const WithdrawLiquidityBody = ({ nabla, onClose }: WithdrawLiquidityBodyProps):
               ) : (
                 <OpenWallet />
               )}
-              <Button color="secondary" className="w-full mt-2" type="button" onClick={() => toggle()}>
+              <Button color="secondary" className="mt-2 w-full" type="button" onClick={() => toggle()}>
                 Cancel
               </Button>
             </div>

diff --git a/src/components/nabla/Pools/Swap/AddLiquidity/index.tsx b/src/components/nabla/Pools/Swap/AddLiquidity/index.tsx
@@ -6,7 +6,7 @@ import Big from 'big.js';
 import { PoolProgress } from '../..';
 import { calcSharePercentage } from '../../../../../helpers/calc';
 import { rawToDecimal, stringifyBigWithSignificantDecimals } from '../../../../../shared/parseNumbers/metric';
-import Validation from '../../../../Form/Validation';
+import { Validation } from '../../../../Form/Validation';
 import { NumberLoader } from '../../../../Loader';
 import { SwapPoolColumn } from '../columns';
 import { useAddLiquidity } from './useAddLiquidity';

diff --git a/src/components/nabla/Pools/Swap/Redeem/index.tsx b/src/components/nabla/Pools/Swap/Redeem/index.tsx
@@ -3,7 +3,7 @@ import { Button } from 'react-daisyui';
 import { PoolProgress } from '../..';
 import { calcSharePercentage } from '../../../../../helpers/calc';
 import { rawToDecimal, stringifyBigWithSignificantDecimals } from '../../../../../shared/parseNumbers/metric';
-import Validation from '../../../../Form/Validation';
+import { Validation } from '../../../../Form/Validation';
 import { NumberLoader } from '../../../../Loader';
 import { SwapPoolColumn } from '../columns';
 import { useRedeem } from './useRedeem';

diff --git a/src/components/nabla/Pools/Swap/WithdrawLiquidity/index.tsx b/src/components/nabla/Pools/Swap/WithdrawLiquidity/index.tsx
@@ -4,7 +4,7 @@ import { Button } from 'react-daisyui';
 import { PoolProgress } from '../..';
 import { calcSharePercentage } from '../../../../../helpers/calc';
 import { rawToDecimal, stringifyBigWithSignificantDecimals } from '../../../../../shared/parseNumbers/metric';
-import Validation from '../../../../Form/Validation';
+import { Validation } from '../../../../Form/Validation';
 import { NumberLoader } from '../../../../Loader';
 import { SwapPoolColumn } from '../columns';
 import { useSwapPoolWithdrawLiquidity } from './useWithdrawLiquidity';

diff --git a/src/components/nabla/Swap/index.tsx b/src/components/nabla/Swap/index.tsx
@@ -6,7 +6,7 @@ import { From } from './From';
 import { To } from './To';
 import { useSwapComponent, UseSwapComponentProps } from './useSwapComponent';
 import { PoolSelectorModal } from '../common/PoolSelectorModal';
-import Validation from '../../Form/Validation';
+import { Validation } from '../../Form/Validation';
 import { TransactionSettingsDropdown } from '../common/TransactionSettingsDropdown';
 import { SwapProgress } from '../common/SwapProgress';
 import { NablaFootnote } from '../common/NablaFootnote';