Move useRefreshFee to v2, and refactor

apps/minifront/src/components/send/send-form/index.tsx

@@ -6,11 +6,11 @@ import { InputBlock } from '../../shared/input-block';
 import { useMemo } from 'react';
 import { penumbraAddrValidation } from '../helpers';
 import InputToken from '../../shared/input-token';
-import { useRefreshFee } from './use-refresh-fee';
 import { GasFee } from '../../shared/gas-fee';
 import { useBalancesResponses, useStakingTokenMetadata } from '../../../state/shared';
 import { NonNativeFeeWarning } from '../../shared/non-native-fee-warning';
 import { transferableBalancesResponsesSelector } from '../../../state/send/helpers';
+import { useRefreshFee } from '../../v2/transfer-layout/send-page/use-refresh-fee';
 
 export const SendForm = () => {
   const stakingTokenMetadata = useStakingTokenMetadata();

apps/minifront/src/components/v2/transfer-layout/send-page/index.tsx

@@ -9,6 +9,7 @@ import { Button } from '@repo/ui/Button';
 import { ArrowUpFromDot } from 'lucide-react';
 import { useMemo } from 'react';
 import { useStoreShallow } from '../../../../utils/use-store-shallow';
+import { useRefreshFee } from './use-refresh-fee';
 
 const sendPageSelector = (state: AllSlices) => ({
   selection: state.send.selection,
@@ -60,6 +61,8 @@ export const SendPage = () => {
     txInProgress,
   } = useStoreShallow(sendPageSelector);
 
+  useRefreshFee();
+
   const validationErrors = useMemo(() => {
     return sendValidationErrors(selection, amount, recipient);
   }, [selection, amount, recipient]);

apps/minifront/src/components/send/send-form/use-refresh-fee.ts → apps/minifront/src/components/v2/transfer-layout/send-page/use-refresh-fee.ts

@@ -1,15 +1,24 @@
 import { useCallback, useEffect, useRef } from 'react';
-import { sendSelector } from '../../../state/send';
-import { useStore } from '../../../state';
+import { AllSlices } from '../../../../state';
+import { useStoreShallow } from '../../../../utils/use-store-shallow';
 
 const DEBOUNCE_MS = 500;
 
+const useRefreshFeeSelector = (state: AllSlices) => ({
+  amount: state.send.amount,
+  feeTier: state.send.feeTier,
+  recipient: state.send.recipient,
+  selection: state.send.selection,
+  refreshFee: state.send.refreshFee,
+});
+
 /**
  * Refreshes the fee in the state when the amount, recipient, selection, or memo
  * changes.
  */
 export const useRefreshFee = () => {
-  const { amount, feeTier, recipient, selection, refreshFee } = useStore(sendSelector);
+  const { amount, feeTier, recipient, selection, refreshFee } =
+    useStoreShallow(useRefreshFeeSelector);
   const timeoutId = useRef<number | null>(null);
 
   const debouncedRefreshFee = useCallback(() => {