feat: gas price

config/network/index.ts

@@ -8,6 +8,7 @@ import { getPreConfig } from 'config/get-preconfig';
 import type { CONTRACT_NAMES, NetworkConfig } from './const';
 
 // Main deployments
+import mainnetSet from 'networks/mainnet.json' assert { type: 'json' };
 import hoodiSet from 'networks/hoodi.json' assert { type: 'json' };
 import sepoliaSet from 'networks/sepolia.json' assert { type: 'json' };
 
@@ -43,6 +44,7 @@ const DEVNETS_MAP = {
 
 // Main deployments
 const NETWORKS_MAP = {
+  [CHAINS.Mainnet]: mainnetSet as NetworkConfig,
   [CHAINS.Hoodi]: hoodiSet as NetworkConfig,
   [CHAINS.Sepolia]: sepoliaSet as NetworkConfig,
 } as Record<string, NetworkConfig>;

features/adjustment/mint/form/feature-tx-info/feature-tx-info.tsx

@@ -1,31 +1,21 @@
 import { useFormContext } from 'react-hook-form';
-import { useSimulationMint } from 'features/adjustment/mint/hooks';
+import { useEstimateMint } from 'features/adjustment/mint/hooks';
 
-import { Loader, Text } from '@lidofinance/lido-ui';
-import { AmountInfo, InfoRow, Wrapper } from './styles';
+import { Wrapper } from './styles';
+import { TxCostRow } from 'shared/components/tx-cost-row';
 
 export const FeatureTxInfo = () => {
   const { watch } = useFormContext();
   const [token, amount, recipient] = watch(['token', 'amount', 'recipient']);
-  const { isLoading, data, isError } = useSimulationMint({
+  const estimateGasQuery = useEstimateMint({
     token,
     amount,
     recipient,
   });
 
-  // TODO: add error
   return (
     <Wrapper>
-      <InfoRow>
-        <Text size="xxs" color="secondary">
-          Transaction cost
-        </Text>
-        {isLoading && <Loader size="small" />}
-        {/*TODO: replace static by real data*/}
-        {data?.result && !isLoading && <AmountInfo>{data?.result}</AmountInfo>}
-        {isError && !isLoading && <AmountInfo>Is not available</AmountInfo>}
-        {!isLoading && !data?.result && !isError && <AmountInfo>-</AmountInfo>}
-      </InfoRow>
+      <TxCostRow estimateGasQuery={estimateGasQuery}></TxCostRow>
     </Wrapper>
   );
 };

features/adjustment/mint/form/feature-tx-info/styles.ts

@@ -7,18 +7,6 @@ export const Wrapper = styled.section`
   gap: ${({ theme }) => theme.spaceMap.sm}px;
 `;
 
-export const InfoRow = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-
-export const AmountInfo = styled.p`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.spaceMap.xs}px;
-  color: ${({ theme }) => theme.colors.text};
-`;
-
 export const StEthQuestion = styled(Question)`
   cursor: pointer;
 

features/adjustment/mint/hooks/use-mint.ts

@@ -1,12 +1,12 @@
 import { useCallback } from 'react';
 import {
   useConfig,
-  useSimulateContract,
   useWriteContract,
   usePublicClient,
-  UseSimulateContractParameters,
+  useEstimateGas,
+  useAccount,
 } from 'wagmi';
-import { Address } from 'viem';
+import { Address, encodeFunctionData } from 'viem';
 
 import { dashboardAbi } from 'abi/dashboard-abi';
 import { useDappStatus } from 'modules/web3/hooks/use-dapp-status';
@@ -16,6 +16,8 @@ import {
   SubmitStepEnum,
 } from 'shared/components/submit-modal/types';
 import invariant from 'tiny-invariant';
+import { useVaultPermissions } from 'modules/vaults/hooks/use-vault-permissions';
+import { fallbackedAddress } from 'utils/fallbacked-address';
 
 export const useMint = (onMutate = () => {}) => {
   const { chainId } = useDappStatus();
@@ -63,32 +65,39 @@ export const useMint = (onMutate = () => {}) => {
   };
 };
 
-export interface SimulationMintProps {
+export type EstimateGasMintProps = {
   recipient: Address;
   token: string;
-  amount: number;
-}
+  amount: bigint;
+};
 
-export const useSimulationMint = ({
+export const useEstimateMint = ({
   recipient,
   token,
   amount,
-}: SimulationMintProps) => {
-  const payload = [recipient, BigInt(amount ?? 0)];
+}: EstimateGasMintProps) => {
+  const { hasPermission } = useVaultPermissions('minter');
+  const { address } = useAccount();
+  const payload = [
+    fallbackedAddress(recipient || address),
+    amount ?? 1n,
+  ] as const;
   const functionName = token === 'stETH' ? 'mintStETH' : 'mintWstETH';
   const { activeVault } = useVaultInfo();
   const owner = activeVault?.owner;
-  const isEnabled = !!(recipient && owner);
 
-  const simulationContractPayload: UseSimulateContractParameters = {
-    abi: dashboardAbi,
-    address: owner,
-    functionName,
-    args: payload,
+  const enabled = !!(hasPermission && address);
+
+  return useEstimateGas({
+    to: owner,
+    account: address,
+    data: encodeFunctionData({
+      abi: dashboardAbi,
+      functionName,
+      args: payload,
+    }),
     query: {
-      enabled: isEnabled,
+      enabled,
     },
-  };
-
-  return useSimulateContract(simulationContractPayload);
+  });
 };

features/adjustment/repay/form/feature-tx-info/feature-tx-info.tsx

@@ -1,39 +1,16 @@
-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 { Wrapper } from './styles';
 import { useFormContext } from 'react-hook-form';
+import { TxCostRow } from 'shared/components/tx-cost-row';
+import { useEstimateGasBurn } from '../../hooks';
 
 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,
-    },
-  });
+  const estimateGasQuery = useEstimateGasBurn({ token, amount });
 
   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>
+      <TxCostRow estimateGasQuery={estimateGasQuery} />
     </Wrapper>
   );
 };

features/adjustment/repay/form/feature-tx-info/styles.ts

@@ -7,18 +7,6 @@ export const Wrapper = styled.section`
   gap: ${({ theme }) => theme.spaceMap.sm}px;
 `;
 
-export const InfoRow = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-
-export const AmountInfo = styled.p`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.spaceMap.xs}px;
-  color: ${({ theme }) => theme.colors.text};
-`;
-
 export const StEthQuestion = styled(Question)`
   cursor: pointer;
 

features/adjustment/repay/hooks/use-burn.ts

@@ -4,8 +4,10 @@ import {
   useWaitForTransactionReceipt,
   useWriteContract,
   usePublicClient,
+  useEstimateGas,
+  useAccount,
 } from 'wagmi';
-import { Address } from 'viem';
+import { Address, encodeFunctionData } from 'viem';
 
 import { dashboardAbi } from 'abi/dashboard-abi';
 import { useDappStatus } from 'modules/web3/hooks/use-dapp-status';
@@ -15,6 +17,13 @@ import {
   SubmitStepEnum,
 } from 'shared/components/submit-modal/types';
 import invariant from 'tiny-invariant';
+import { useVaultPermissions } from 'modules/vaults/hooks/use-vault-permissions';
+
+type BurnArgs = {
+  token: string;
+  amount: bigint;
+  setModalState: (submitStep: { step: SubmitStep; tx?: Address }) => void;
+};
 
 export const useBurn = (onMutate = () => {}) => {
   const { chainId } = useDappStatus();
@@ -34,15 +43,7 @@ export const useBurn = (onMutate = () => {}) => {
   });
 
   const callBurn = useCallback(
-    async ({
-      token,
-      amount,
-      setModalState,
-    }: {
-      token: string;
-      amount: bigint;
-      setModalState: (submitStep: { step: SubmitStep; tx?: Address }) => void;
-    }) => {
+    async ({ token, amount, setModalState }: BurnArgs) => {
       invariant(publicClient, '[useBurn] publicClient is undefined');
 
       setModalState({ step: SubmitStepEnum.confirming });
@@ -70,3 +71,32 @@ export const useBurn = (onMutate = () => {}) => {
     burnReceipt,
   };
 };
+
+type EstimateGasBurnProps = {
+  token: string;
+  amount: bigint;
+};
+
+export const useEstimateGasBurn = ({ token, amount }: EstimateGasBurnProps) => {
+  const { hasPermission } = useVaultPermissions('repayer');
+  const { address } = useAccount();
+  const payload = [amount ?? 1n] as const;
+  const functionName = token === 'stETH' ? 'burnStETH' : 'burnWstETH';
+  const { activeVault } = useVaultInfo();
+  const owner = activeVault?.owner;
+
+  const enabled = !!(hasPermission && address);
+
+  return useEstimateGas({
+    to: owner,
+    account: address,
+    data: encodeFunctionData({
+      abi: dashboardAbi,
+      functionName,
+      args: payload,
+    }),
+    query: {
+      enabled,
+    },
+  });
+};

features/claim/claim-form/form/feature-tx-info/feature-tx-info.tsx

@@ -1,30 +1,17 @@
 import { useFormContext } from 'react-hook-form';
-
-import { Loader, Text } from '@lidofinance/lido-ui';
-import { AmountInfo, InfoRow, Wrapper } from './styles';
-import { useSimulationClaim } from 'features/claim/claim-form/hooks';
+import { Wrapper } from './styles';
+import { useEstimateClaim } from 'features/claim/claim-form/hooks';
 import { Address } from 'viem';
+import { TxCostRow } from 'shared/components/tx-cost-row';
 
 export const FeatureTxInfo = () => {
   const { watch } = useFormContext();
   const recipient: Address = watch('recipient');
-  const { data, isLoading, isError } = useSimulationClaim(recipient);
+  const estimateQuery = useEstimateClaim(recipient);
 
   return (
     <Wrapper>
-      <InfoRow>
-        <Text size="xxs" color="secondary">
-          Transaction cost
-        </Text>
-        {isLoading && <Loader size="small" />}
-        {/*TODO: get simulated data*/}
-        {/*TODO: show error message*/}
-        {!!data?.result && !isLoading && (
-          <AmountInfo>{data?.result}</AmountInfo>
-        )}
-        {isError && !isLoading && <AmountInfo>-</AmountInfo>}
-        {!isLoading && !data && !isError && <AmountInfo>-</AmountInfo>}
-      </InfoRow>
+      <TxCostRow estimateGasQuery={estimateQuery} />
     </Wrapper>
   );
 };

features/claim/claim-form/form/feature-tx-info/styles.ts

@@ -1,28 +1,7 @@
 import styled from 'styled-components';
-import { Question } from '@lidofinance/lido-ui';
 
 export const Wrapper = styled.section`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spaceMap.sm}px;
 `;
-
-export const InfoRow = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-
-export const AmountInfo = styled.p`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.spaceMap.xs}px;
-  color: ${({ theme }) => theme.colors.text};
-`;
-
-export const StEthQuestion = styled(Question)`
-  cursor: pointer;
-
-  &:hover {
-    fill: var(--lido-color-text);
-  }
-`;