From 37c22f80d54c9cfeeb5f43725107c9ea9a0f444a Mon Sep 17 00:00:00 2001
From: Jesse Pinho <jesse@jessepinho.com>
Date: Fri, 9 Aug 2024 20:42:32 -0700
Subject: [PATCH] Move useRefreshFee to v2, and refactor

---
 .../src/components/send/send-form/index.tsx       |  2 +-
 .../v2/transfer-layout/send-page/index.tsx        |  3 +++
 .../transfer-layout/send-page}/use-refresh-fee.ts | 15 ++++++++++++---
 3 files changed, 16 insertions(+), 4 deletions(-)
 rename apps/minifront/src/components/{send/send-form => v2/transfer-layout/send-page}/use-refresh-fee.ts (60%)

diff --git a/apps/minifront/src/components/send/send-form/index.tsx b/apps/minifront/src/components/send/send-form/index.tsx
index c1a6570f1a..8b715ccbac 100644
--- a/apps/minifront/src/components/send/send-form/index.tsx
+++ b/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();
diff --git a/apps/minifront/src/components/v2/transfer-layout/send-page/index.tsx b/apps/minifront/src/components/v2/transfer-layout/send-page/index.tsx
index b85f5642ec..724efb3327 100644
--- a/apps/minifront/src/components/v2/transfer-layout/send-page/index.tsx
+++ b/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]);
diff --git a/apps/minifront/src/components/send/send-form/use-refresh-fee.ts b/apps/minifront/src/components/v2/transfer-layout/send-page/use-refresh-fee.ts
similarity index 60%
rename from apps/minifront/src/components/send/send-form/use-refresh-fee.ts
rename to apps/minifront/src/components/v2/transfer-layout/send-page/use-refresh-fee.ts
index f063129998..46778bab72 100644
--- a/apps/minifront/src/components/send/send-form/use-refresh-fee.ts
+++ b/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(() => {