SD-102: Split fee calculation logic into separate hooks for shielding and sending operations

rAskVAL · rAskVAL · commit 863712a1daea · 2025-06-25T14:25:34.000+03:00
diff --git a/src/domains/misc/utils/getQueryKey.ts b/src/domains/misc/utils/getQueryKey.ts
@@ -5,6 +5,7 @@ import { NetworkEnvironment } from 'src/domains/chains/types/misc';
 export const QUERY_KEYS = {
   sendingFees: 'sendingFees',
   shieldingFees: 'shieldingFees',
+  allowanceCheck: 'allowance-check',
   allowanceFeeEstimate: 'allowanceFeeEstimate',
   shielderClient: 'shielder-client',
   shielderTransactions: 'shielder-transactions',
@@ -33,6 +34,13 @@ const getQueryKey = {
     chainId,
     tokenType,
   ],
+  allowanceCheck: (tokenAddress: Address, chainId: string, walletAddress: Address, amount: string) => [
+    QUERY_KEYS.allowanceCheck,
+    tokenAddress,
+    chainId,
+    walletAddress,
+    amount,
+  ],
   allowanceFeeEstimate: (tokenAddress: Address, chainId: string, walletAddress: Address, amount: string) => [
     QUERY_KEYS.allowanceFeeEstimate,
     tokenAddress,
diff --git a/src/domains/shielder/components/TokenList/Modals/ConfirmPage.tsx b/src/domains/shielder/components/TokenList/Modals/ConfirmPage.tsx
@@ -55,7 +55,7 @@ const ConfirmPage = ({
     decimalsQuery: { data: nativeTokenDecimals },
   } = useTokenData({ isNative: true }, ['symbol', 'decimals']);
 
-  const feeBreakdownModal = useFeeBreakdownModal({ fees, totalFee });
+  const openFeeBreakdownModal = useFeeBreakdownModal({ fees, totalFee });
 
   const isButtonDisabled = amount <= 0n || !!hasInsufficientFees || !!isLoading;
 
@@ -98,7 +98,7 @@ const ConfirmPage = ({
           label={
             <TotalFee>
               <p>Est. Total fee</p>
-              <button onClick={() => void feeBreakdownModal()}>
+              <button onClick={() => void openFeeBreakdownModal()}>
                 <CIcon size={16} icon="InfoRegular" />
               </button>
             </TotalFee>
diff --git a/src/domains/shielder/components/TokenList/Modals/SendModal/SelectAmountPage.tsx b/src/domains/shielder/components/TokenList/Modals/SendModal/SelectAmountPage.tsx
@@ -47,7 +47,7 @@ const SelectAmountPage = ({ onContinue, token, hasInsufficientFees }: Props) =>
     decimalsQuery: { data: nativeTokenDecimals },
   } = useTokenData({ isNative: true }, ['symbol', 'decimals']);
 
-  const feeBreakdownModal = useFeeBreakdownModal({ fees, totalFee });
+  const openFeeBreakdownModal = useFeeBreakdownModal({ fees, totalFee });
 
   const maxAmountToSend = useMemo(() => {
     if (isNullish(token.balance)) return token.balance;
@@ -99,7 +99,7 @@ const SelectAmountPage = ({ onContinue, token, hasInsufficientFees }: Props) =>
           label={
             <TotalFeeLabel>
               <p>Est. Total fee</p>
-              <button onClick={() => void feeBreakdownModal()}>
+              <button onClick={() => void openFeeBreakdownModal()}>
                 <CIcon size={16} icon="InfoRegular" />
               </button>
             </TotalFeeLabel>
diff --git a/src/domains/shielder/components/TokenList/Modals/ShieldModal/SelectAmountPage.tsx b/src/domains/shielder/components/TokenList/Modals/ShieldModal/SelectAmountPage.tsx
@@ -53,7 +53,7 @@ const SelectAmountPage = ({ onContinue, token, hasInsufficientFees }: Props) =>
     decimalsQuery: { data: nativeTokenDecimals },
   } = useTokenData({ isNative: true }, ['symbol', 'decimals']);
 
-  const feeBreakdownModal = useFeeBreakdownModal({ fees, totalFee });
+  const openFeeBreakdownModal = useFeeBreakdownModal({ fees, totalFee });
 
   const maxAmountToShield = useMemo(() => {
     if (isNullish(token.balance)) return token.balance;
@@ -104,7 +104,7 @@ const SelectAmountPage = ({ onContinue, token, hasInsufficientFees }: Props) =>
           label={
             <TotalFeeLabel>
               <p>Est. Total fee</p>
-              <button onClick={() => void feeBreakdownModal()}>
+              <button onClick={() => void openFeeBreakdownModal()}>
                 <CIcon size={16} icon="InfoRegular" />
               </button>
             </TotalFeeLabel>
diff --git a/src/domains/shielder/components/TransactionDetailsModal/ActivityDetailsModal.tsx b/src/domains/shielder/components/TransactionDetailsModal/ActivityDetailsModal.tsx
@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import { Address } from 'viem';
 import { useTransactionReceipt } from 'wagmi';
@@ -49,10 +48,9 @@ const ActivityDetailsModal = (props: Props) => {
     },
   });
 
-  const totalFee = useMemo(() => transactionReceipt && transaction?.txHash ?
+  const totalFee = transactionReceipt && transaction?.txHash ?
     transactionReceipt.gasUsed * transactionReceipt.effectiveGasPrice :
-    null,
-  [transactionReceipt, transaction?.txHash]);
+    null;
 
   const token = transaction?.token?.type === 'erc20' ?
     { address: transaction.token.address, isNative: false as const } :
diff --git a/src/domains/shielder/stores/getShielderIndexedDB.ts b/src/domains/shielder/stores/getShielderIndexedDB.ts
@@ -1,6 +1,6 @@
 import { ShielderTransaction } from '@cardinal-cryptography/shielder-sdk';
 import { openDB, deleteDB, IDBPDatabase } from 'idb';
-import { Address, sha256 } from 'viem';
+import { Address, isAddress, sha256 } from 'viem';
 import { z } from 'zod';
 
 import isPresent from 'src/domains/misc/utils/isPresent';
@@ -9,12 +9,12 @@ const DB_INDEX = 3;
 const DB_BASE_NAME = 'SHIELDER_STORAGE';
 const DB_NAME = `${DB_BASE_NAME}_V${DB_INDEX}`;
 
-export const STORE_SHIELDER = 'shielder-store';
-export const STORE_TRANSACTIONS = 'shielder-transactions';
+const STORE_SHIELDER = 'shielder-store';
+const STORE_TRANSACTIONS = 'shielder-transactions';
 
-const ethAddress = z.string().refine(
-  (address): address is `0x${string}` => /^0x[a-fA-F0-9]{40}$/.test(address),
-  { message: 'Must be a valid Ethereum address' }
+const ethAddress = z.custom<`0x${string}`>(
+  val => typeof val === 'string' ? isAddress(val, { strict: true }) : false,
+  val => ({ message: `Invalid Ethereum address: "${val}".` }),
 );
 
 const txHash = z.string().refine(
diff --git a/src/domains/shielder/utils/useEstimateAllowanceFee.tsx b/src/domains/shielder/utils/useEstimateAllowanceFee.tsx
@@ -1,27 +1,28 @@
 import { skipToken, useQuery } from '@tanstack/react-query';
 import { erc20Abi, encodeFunctionData } from 'viem';
-import { useEstimateGas, useGasPrice, usePublicClient } from 'wagmi';
+import { useEstimateFeesPerGas, useEstimateGas, usePublicClient } from 'wagmi';
 
 import { useWallet } from 'src/domains/chains/components/WalletProvider.tsx';
 import { Token } from 'src/domains/chains/types/misc';
 import useChain from 'src/domains/chains/utils/useChain';
+import getQueryKey from 'src/domains/misc/utils/getQueryKey';
 
 type Props = {
   token: Token,
   amount: bigint,
-  enabled?: boolean,
+  disabled?: boolean,
 };
 
-const useEstimateAllowanceFee = ({ token, amount, enabled = true }: Props) => {
+const useEstimateAllowanceFee = ({ token, amount, disabled }: Props) => {
   const chainConfig = useChain();
   const publicClient = usePublicClient();
   const { address: walletAddress } = useWallet();
 
-  const shouldCheckAllowance = !token.isNative && amount > 0n && enabled;
+  const shouldCheckAllowance = !token.isNative && amount > 0n && !disabled;
 
   const { data: needsApproval } = useQuery({
     queryKey: chainConfig && walletAddress && shouldCheckAllowance ?
-      ['allowance-check', token.address, chainConfig.id.toString(), walletAddress, amount.toString()] : [],
+      getQueryKey.allowanceCheck(token.address, chainConfig.id.toString(), walletAddress, amount.toString()) : [],
     queryFn: !publicClient || !chainConfig?.shielderConfig || !walletAddress || !shouldCheckAllowance ?
       skipToken :
       async (): Promise<boolean> => {
@@ -50,20 +51,35 @@ const useEstimateAllowanceFee = ({ token, amount, enabled = true }: Props) => {
         abi: erc20Abi,
         functionName: 'approve',
         args: [chainConfig.shielderConfig.shielderContractAddress, amount],
-      }) : undefined,
+      }) :
+      undefined,
     account: walletAddress,
     query: {
-      enabled: shouldCheckAllowance && !!needsApproval && !!chainConfig?.shielderConfig && !!walletAddress,
+      enabled:
+        shouldCheckAllowance &&
+        !!needsApproval &&
+        !!chainConfig?.shielderConfig &&
+        !!walletAddress,
     },
   });
 
-  const { data: gasPrice } = useGasPrice({
+  const { data: feeEstimate } = useEstimateFeesPerGas({
+    chainId: chainConfig?.id,
     query: {
-      enabled: shouldCheckAllowance && !!needsApproval && !!gasEstimate,
+      enabled:
+        shouldCheckAllowance &&
+        !!needsApproval &&
+        !!chainConfig?.shielderConfig &&
+        !!walletAddress,
     },
   });
 
-  const allowanceFee = gasEstimate && gasPrice ? gasEstimate * gasPrice : null;
+  const gasPrice = feeEstimate?.maxFeePerGas;
+
+  const allowanceFee =
+    gasEstimate && feeEstimate?.maxFeePerGas ?
+      gasEstimate * feeEstimate.maxFeePerGas :
+      null;
 
   if (!shouldCheckAllowance) {
     return {
diff --git a/src/domains/shielder/utils/useSendingFees.tsx b/src/domains/shielder/utils/useSendingFees.tsx
@@ -0,0 +1,76 @@
+import { erc20Token, nativeToken } from '@cardinal-cryptography/shielder-sdk';
+import { skipToken, useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+
+import { useWallet } from 'src/domains/chains/components/WalletProvider.tsx';
+import { Token } from 'src/domains/chains/types/misc';
+import useChain from 'src/domains/chains/utils/useChain';
+import getQueryKey from 'src/domains/misc/utils/getQueryKey';
+import useShielderClient from 'src/domains/shielder/utils/useShielderClient';
+
+export type FeeItem = {
+  type: 'network' | 'relayer' | 'allowance',
+  amount: bigint,
+  token: string,
+};
+
+type Props = {
+  token: Token,
+  disabled?: boolean,
+};
+
+const useSendingFees = ({ token, disabled }: Props) => {
+  const chainConfig = useChain();
+  const { data: shielderClient } = useShielderClient();
+  const { address: walletAddress } = useWallet();
+
+  const {
+    data: withdrawingFees,
+    error: withdrawingFeesError,
+    isLoading: areWithdrawingFeesLoading,
+  } = useQuery({
+    queryKey: chainConfig && walletAddress && !disabled ?
+      getQueryKey.sendingFees(walletAddress, chainConfig.id.toString()) : [],
+    queryFn: !shielderClient || disabled ?
+      skipToken :
+      async () => {
+        const sdkToken = token.isNative ? nativeToken() : erc20Token(token.address);
+        return await shielderClient.getWithdrawFees(sdkToken, 0n);
+      },
+    enabled: !!shielderClient && !!chainConfig && !!walletAddress && !disabled,
+  });
+
+  const fees: FeeItem[] | undefined = useMemo(() => {
+    if (!withdrawingFees) {
+      return undefined;
+    }
+
+    const { fee_details } = withdrawingFees;
+    const hasCommission = fee_details.commission_fee_token > 0n;
+
+    const networkFee: FeeItem = {
+      type: 'network',
+      amount: fee_details.gas_cost_fee_token,
+      token: 'native',
+    };
+
+    if (hasCommission) {
+      const relayerFee: FeeItem = {
+        type: 'relayer',
+        amount: fee_details.commission_fee_token,
+        token: 'native',
+      };
+      return [networkFee, relayerFee];
+    }
+
+    return [networkFee];
+  }, [withdrawingFees]);
+
+  return {
+    fees,
+    isLoading: areWithdrawingFeesLoading,
+    error: withdrawingFeesError,
+  };
+};
+
+export default useSendingFees;
diff --git a/src/domains/shielder/utils/useShield.tsx b/src/domains/shielder/utils/useShield.tsx
@@ -2,9 +2,11 @@ import { erc20Token, nativeToken } from '@cardinal-cryptography/shielder-sdk';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import styled from 'styled-components';
 import { v4 } from 'uuid';
-import { useAccount, useSendTransaction } from 'wagmi';
+import { erc20Abi } from 'viem';
+import { useAccount, useSendTransaction, usePublicClient, useWalletClient } from 'wagmi';
 
 import { Token } from 'src/domains/chains/types/misc';
+import useChain from 'src/domains/chains/utils/useChain';
 import { useToast } from 'src/domains/misc/components/Toast';
 import getQueryKey, { MUTATION_KEYS } from 'src/domains/misc/utils/getQueryKey';
 import { useActivityHistory } from 'src/domains/shielder/utils/useActivityHistory';
@@ -18,6 +20,9 @@ const useShield = () => {
   const { data: shielderClient } = useShielderClient();
   const { address: walletAddress, chainId } = useAccount();
   const { sendTransactionAsync } = useSendTransaction();
+  const { data: walletClient } = useWalletClient();
+  const publicClient = usePublicClient();
+  const chainConfig = useChain();
   const queryClient = useQueryClient();
   const { showToast } = useToast();
   const { openTransactionModal } = useActivityModal();
@@ -89,6 +94,30 @@ const useShield = () => {
       if (!walletAddress) throw new Error('Address is not available');
       if (!chainId) throw new Error('Chain ID is not available');
 
+      if (!token.isNative) {
+        if (!publicClient) throw new Error('Public client is not ready');
+        if (!walletClient) throw new Error('Wallet client is not ready');
+        if (!chainConfig?.shielderConfig) throw new Error('Shielder is not configured for this chain.');
+
+        const allowance = await publicClient.readContract({
+          address: token.address,
+          abi: erc20Abi,
+          functionName: 'allowance',
+          args: [walletAddress, chainConfig.shielderConfig.shielderContractAddress],
+        });
+
+        if (allowance < amount) {
+          const approveTxHash = await walletClient.writeContract({
+            address: token.address,
+            abi: erc20Abi,
+            functionName: 'approve',
+            args: [chainConfig.shielderConfig.shielderContractAddress, amount],
+          });
+
+          await publicClient.waitForTransactionReceipt({ hash: approveTxHash });
+        }
+      }
+
       const sdkToken = token.isNative ? nativeToken() : erc20Token(token.address);
 
       await shielderClient.shield(
diff --git a/src/domains/shielder/utils/useShielderFees.tsx b/src/domains/shielder/utils/useShielderFees.tsx
diff --git a/src/domains/shielder/utils/useShieldingFees.tsx b/src/domains/shielder/utils/useShieldingFees.tsx
