refactor: update top up, tx modals amount calculation, ValidatorsStatistic usd value

Author: ev-d

features/validators/modals/topup-modal/components/index.ts

@@ -1,2 +1,3 @@
 export { NotInPdg } from './not-in-pdg';
 export { DepositPaused } from './diposit-paused';
+export { LowBalance } from './low-balance';

features/validators/modals/topup-modal/components/low-balance/index.ts

@@ -0,0 +1 @@
+export { LowBalance } from './low-balance';

features/validators/modals/topup-modal/components/low-balance/low-balance.tsx

@@ -0,0 +1,20 @@
+import type { FC } from 'react';
+
+import { vaultTexts } from 'modules/vaults';
+import { WEI_PER_ETHER } from 'consts/tx';
+
+import { WarningInfo } from 'features/validators/shared';
+
+type LowBalanceProps = {
+  availableBalance: bigint;
+};
+
+const { availableBalanceLow } = vaultTexts.actions.validators.modals.topUp;
+
+export const LowBalance: FC<LowBalanceProps> = ({ availableBalance }) => {
+  if (availableBalance >= WEI_PER_ETHER) {
+    return null;
+  }
+
+  return <WarningInfo>{availableBalanceLow(availableBalance)}</WarningInfo>;
+};

features/validators/modals/topup-modal/content/form/form.tsx

@@ -11,13 +11,14 @@ import {
 import { useDappStatus } from 'modules/web3';
 import { useVault, vaultTexts } from 'modules/vaults';
 import { ConnectWalletButton } from 'shared/wallet';
+import { WEI_PER_ETHER } from 'consts/tx';
 
 import { useValidators } from 'features/validators/contexts';
 import { ModalFormButton } from 'features/validators/shared';
 
 import { useSubmitTopup } from '../../hooks';
 import { topUpFormResolver } from '../../validation';
-import { DepositPaused, NotInPdg } from '../../components';
+import { DepositPaused, NotInPdg, LowBalance } from '../../components';
 import type {
   TopUpFormFieldValues,
   TopUpFormValidationContext,
@@ -68,6 +69,7 @@ export const TopupModalForm: FC<FormProps> = ({ pubkey }) => {
       disabled ||
       !hasDepositorPermission ||
       !isValidatorInPDG ||
+      availableBalance < WEI_PER_ETHER ||
       beaconChainDepositsPaused,
     resolver: topUpFormResolver,
     context: { availableBalance },
@@ -105,6 +107,7 @@ export const TopupModalForm: FC<FormProps> = ({ pubkey }) => {
         />
         <NotInPdg isValidatorInPDG={isValidatorInPDG} />
         <DepositPaused beaconChainDepositsPaused={beaconChainDepositsPaused} />
+        <LowBalance availableBalance={availableBalance} />
         <ConnectWalletButton>
           <ModalFormButton
             type="submit"

features/validators/modals/topup-modal/hooks/use-submit-topup.ts

@@ -14,6 +14,7 @@ import {
 } from 'modules/web3';
 import { useDisableForm } from 'shared/hook-form';
 import { TopUpFormValidatedValues } from '../types';
+import { WEI_PER_GWEI } from '../../../../../consts/tx';
 
 const { loadingText, mainCompleteText } =
   vaultTexts.actions.validators.modals.topUp.txModal;
@@ -33,15 +34,19 @@ export const useSubmitTopup = () => {
           '[useSubmitTopup] form has been disabled for any transactions',
         );
 
-        const mainActionLoadingText = loadingText(index, amount);
-        const mainActionCompleteText = mainCompleteText(index, amount);
+        // @notice min amount === 1 ETH
+        // amount is result of rounds eth down using gwei
+        const amountInGwei = (amount / WEI_PER_GWEI) * WEI_PER_GWEI;
+
+        const mainActionLoadingText = loadingText(index, amountInGwei);
+        const mainActionCompleteText = mainCompleteText(index, amountInGwei);
 
         const prepareTransactions = async () => {
           const calls: TransactionEntry[] = [...prepareReportCalls()];
 
           calls.push({
             ...activeVault.predepositGuarantee.encode.topUpExistingValidators([
-              [{ pubkey, amount }],
+              [{ pubkey, amount: amountInGwei }],
             ]),
             loadingActionText: mainActionLoadingText,
           });

features/validators/shared/components/validators-statistic/validators-statistic.tsx

@@ -39,9 +39,9 @@ export const ValidatorsStatistic: FC<ValidatorsStatisticProps> = ({
           />
         </Text>
       </InlineLoader>
-      <InlineLoader isLoading={isLoading || !usdAmount} height={20} width={80}>
+      <InlineLoader isLoading={isLoading} height={20} width={80}>
         <Text size="xxs" strong style={{ textTransform: 'uppercase' }}>
-          <FormatPrice amount={usdAmount as number} />
+          <FormatPrice amount={usdAmount} />
         </Text>
       </InlineLoader>
     </StatisticContainer>

modules/vaults/consts/texts.ts

@@ -352,12 +352,12 @@ export const vaultTexts = {
           partialWarning:
             "Withdrawals are subject for the withdrawal queue, which is not yet supported by this UI. So you'll see the result of your request only when it's done.",
           fullWarning: (amount: bigint) =>
-            `You are about to force-exit this validator. The entire validator's actual balance (currently ${formatBalance(amount).trimmed} ETH) will be withdrawn.`,
+            `You are about to force-exit this validator. The entire validator's actual balance (currently ${formatBalance(amount, { adaptiveDecimals: true }).trimmed} ETH) will be withdrawn.`,
           txModal: {
             loadingText: (index: number, amount: bigint) =>
-              `You are withdrawing ${formatBalance(amount).trimmed} ETH from the validator #${index}`,
+              `You are withdrawing ${formatBalance(amount, { adaptiveDecimals: true }).trimmed} ETH from the validator #${index}`,
             mainCompleteText: (index: number, amount: bigint) =>
-              `${formatBalance(amount).trimmed} ETH has been withdrawn from the validator #${index}`,
+              `${formatBalance(amount, { adaptiveDecimals: true }).trimmed} ETH has been withdrawn from the validator #${index}`,
           },
         },
         topUp: {
@@ -370,11 +370,13 @@ export const vaultTexts = {
           actionDisabled: 'Top up unavailable',
           validatorWithoutPDG: `Top-ups are unavailable for this validator because it has not been proven for Predeposit Guarantee. To enable top-ups in this interface, please prove the validator.`,
           depositPaused: `Top-ups are unavailable due to temporary restrictions on deposits from the stVault Balance to validators.`,
+          availableBalanceLow: (amount: bigint) =>
+            `Top-ups are unavailable due to low available balance ${formatBalance(amount, { adaptiveDecimals: true }).trimmed} ETH`,
           txModal: {
             loadingText: (index: number, amount: bigint) =>
-              `You are topping up the validator #${index} with ${formatBalance(amount).trimmed} ETH`,
+              `You are topping up the validator #${index} with ${formatBalance(amount, { adaptiveDecimals: true }).trimmed} ETH`,
             mainCompleteText: (index: number, amount: bigint) =>
-              `The validator #${index} has been topped up with ${formatBalance(amount).trimmed} ETH`,
+              `The validator #${index} has been topped up with ${formatBalance(amount, { adaptiveDecimals: true }).trimmed} ETH`,
           },
         },
       },

shared/components/value-with-loader/value-with-loader.tsx

@@ -8,6 +8,7 @@ type InlineLoaderProps = {
   height?: number;
   placeholder?: ReactNode;
   loader?: ReactNode;
+  showBy?: boolean;
 };
 
 export const InlineLoader: FC<PropsWithChildren<InlineLoaderProps>> = ({
@@ -17,13 +18,16 @@ export const InlineLoader: FC<PropsWithChildren<InlineLoaderProps>> = ({
   loader,
   width,
   height,
+  showBy,
 }) => {
   if (isLoading)
     return loader ? (
       loader
     ) : (
       <InlineLoaderStyled width={width} height={height} />
     );
+
+  if (showBy === false) return placeholder ?? null;
   if (children === undefined) return placeholder || null;
 
   return children;