feature-tx-info.tsx

import { AmountInfo, InfoRow, Wrapper } from './styles';
import { Loader, Text } from '@lidofinance/lido-ui';
import { useSimulateContract } from 'wagmi';
import { dashboardAbi } from 'abi/dashboard-abi';
import { useVaultInfo } from 'features/overview/contexts';
import { useFormContext } from 'react-hook-form';

export const FeatureTxInfo = () => {
  const { activeVault } = useVaultInfo();
  const { watch } = useFormContext();
  const [token, amount] = watch(['token', 'amount']);
  const owner = activeVault?.owner;
  const isEnabled = !!owner && !!amount;
  const amountAsArg = amount ? BigInt(amount) : BigInt(0);
  const functionName = token === 'stETH' ? 'burnStETH' : 'burnWstETH';
  const { isLoading, data, isError } = useSimulateContract({
    abi: dashboardAbi,
    address: owner,
    functionName,
    args: [amountAsArg],
    query: {
      enabled: isEnabled,
    },
  });

  return (
    <Wrapper>
      <InfoRow>
        <Text size="xxs" color="secondary">
          Transaction cost
        </Text>
        {isLoading && <Loader size="small" />}
        {!!data?.result && <AmountInfo>{data?.result}</AmountInfo>}
        {isError && !isLoading && <AmountInfo>Is not available</AmountInfo>}
        {!isLoading && !data?.result && !isError && <AmountInfo>-</AmountInfo>}
      </InfoRow>
    </Wrapper>
  );
};