feat: load shield fees instead of hardcoding it

components/ReviewTransactionModal.tsx

@@ -12,8 +12,10 @@ import {
 import { Tooltip } from '@chakra-ui/tooltip';
 import { ethers } from 'ethers';
 import { parseUnits } from 'ethers/lib/utils.js';
+import { useNetwork } from 'wagmi';
 import { TokenListContextItem } from '@/contexts/TokenContext';
 import useNotifications from '@/hooks/useNotifications';
+import { useRailgunProvider } from '@/hooks/useRailgunProvider';
 import useRailgunTx from '@/hooks/useRailgunTx';
 import { shortenAddress } from '@/utils/address';
 
@@ -36,8 +38,16 @@ const ReviewTransactionModal = ({
 }: ReviewTransactionModalProps) => {
   const { txNotify, notifyUser } = useNotifications();
   const { shield, isShielding } = useRailgunTx();
-  const bigNumberAmount = parseUnits(amount! || '0', token?.decimals);
-  const feeAmount = parseUnits(amount! || '0', token?.decimals).div('400');
+  const { shieldingFees } = useRailgunProvider();
+  const { chain } = useNetwork();
+  const tokenAmount = amount;
+  const tokenDecimals = token?.decimals;
+
+  const bigNumberAmount = parseUnits(tokenAmount! || '0', tokenDecimals);
+  const shieldFee = shieldingFees[chain?.id || 1];
+  const feeAmount = parseUnits(tokenAmount! || '0', tokenDecimals)
+    .mul(shieldFee)
+    .div(10000);
 
   const doSubmit: React.FormEventHandler = async () => {
     if (!token.address || !amount || !token?.decimals || !recipient) throw new Error('bad form');

hooks/useRailgunProvider.tsx

@@ -1,19 +1,44 @@
 import { useEffect, useState } from 'react';
 import { setProviderForNetwork } from '@railgun-community/quickstart';
+import { BigNumber } from 'ethers';
 import { useNetwork, useProvider } from 'wagmi';
 import { networks } from '@/utils/networks';
 import { loadProviders } from '@/utils/railgun';
 
+// Fee is in bips, e.g. a value of 25 is a 0.25% fee.
+interface ShieldFee {
+  [chainId: number]: BigNumber;
+}
+
+const fallbackShieldingFees: ShieldFee = {};
+Object.keys(networks).forEach((chainId) => {
+  // Current fees are 0.25% everywhere, so we initialize with that
+  fallbackShieldingFees[Number(chainId)] = BigNumber.from('25');
+});
+
 export const useRailgunProvider = () => {
   const [isProviderLoaded, setProviderLoaded] = useState<Boolean>(false);
+  const [shieldingFees, setShieldingFees] = useState<ShieldFee>(fallbackShieldingFees);
   const { chain } = useNetwork();
   const network = networks[chain?.id || 1];
   const provider = useProvider();
 
   useEffect(() => {
     const fn = async () => {
       setProviderLoaded(false);
-      await loadProviders();
+      const res = await loadProviders();
+
+      // Set the shield fees for each network.
+      const shieldingFeesFromNetwork = res.reduce((acc, response) => {
+        const newFee = response.providerInfo.feesSerialized?.shield;
+        return {
+          ...acc,
+          [response.chainId]: BigNumber.from(newFee || fallbackShieldingFees[response.chainId]),
+        };
+      }, {});
+      setShieldingFees(shieldingFeesFromNetwork);
+
+      // Provider is done loading.
       setProviderLoaded(true);
     };
     fn();
@@ -23,5 +48,5 @@ export const useRailgunProvider = () => {
     setProviderForNetwork(network.railgunNetworkName, provider);
   }, [provider, network.railgunNetworkName]);
 
-  return { isProviderLoaded };
+  return { isProviderLoaded, shieldingFees };
 };

utils/railgun.ts

@@ -12,8 +12,13 @@ export const loadProviders = async () => {
   // Whether to forward debug logs from Fallback Provider.
   const shouldDebug = true;
   return Promise.all(
-    Object.values(networks).map(({ railgunNetworkName, fallbackProviders }) => {
-      return loadProvider(fallbackProviders, railgunNetworkName, shouldDebug);
+    Object.keys(networks).map(async (chainIdString) => {
+      const chainId = Number(chainIdString);
+      const { railgunNetworkName, fallbackProviders } = networks[chainId];
+      return {
+        chainId,
+        providerInfo: await loadProvider(fallbackProviders, railgunNetworkName, shouldDebug),
+      };
     })
   );
 };