frontend/feetargets: load fee targets only once

Due to the useEffect fetching the fee targets depending on config, it
was executed many times when going to the send screen, while it should
only be called once. This commit fixes this.

While not strictly necessary, I also moved the fee target fetching its
own `useLoad()`, which should decrease the chance that we will
accidentally increase the number of requests again.

Co-Authored-By: thisconnect <this@shiftcrypto.ch>

Author: benma

frontends/web/src/routes/account/send/feetargets.test.tsx

@@ -25,14 +25,16 @@ vi.mock('../../../i18n/i18n');
 import { render, waitFor } from '@testing-library/react';
 import { FeeTargets } from './feetargets';
 import { apiGet } from '../../../utils/request';
-import * as apiHooks from '../../../hooks/api';
 
-const useLoadSpy = vi.spyOn(apiHooks, 'useLoad');
+import * as utilsConfig from '../../../utils/config';
+const getConfig = vi.spyOn(utilsConfig, 'getConfig');
 
 describe('routes/account/send/feetargets', () => {
 
   it('should match the snapshot', async () => {
-    useLoadSpy.mockReturnValue({ frontend: { expertFee: false } });
+    getConfig.mockReturnValue(Promise.resolve({
+      frontend: { expertFee: false }
+    }));
     (apiGet as Mock).mockResolvedValue({
       defaultFeeTarget: 'economy',
       feeTargets: [
@@ -80,7 +82,7 @@ describe('routes/account/send/feetargets', () => {
   });
 
   it('should match the snapshot with empty feetargets', async () => {
-    useLoadSpy.mockReturnValue({ frontend: { expertFee: false } });
+    getConfig.mockReturnValue(Promise.resolve({ frontend: { expertFee: false } }));
     (apiGet as Mock).mockResolvedValue({
       defaultFeeTarget: '',
       feeTargets: [],
@@ -100,7 +102,7 @@ describe('routes/account/send/feetargets', () => {
   });
 
   it('should call onFeeTargetChange with default', () => new Promise<void>(async done => {
-    useLoadSpy.mockReturnValue({ frontend: { expertFee: false } });
+    getConfig.mockReturnValue(Promise.resolve({ frontend: { expertFee: false } }));
     const apiGetMock = (apiGet as Mock).mockResolvedValue({
       defaultFeeTarget: 'normal',
       feeTargets: [

frontends/web/src/routes/account/send/feetargets.tsx

@@ -62,6 +62,8 @@ export const FeeTargets = ({
   const [options, setOptions] = useState<TOptions[] | null>(null);
   const [noFeeTargets, setNoFeeTargets] = useState<boolean>(false);
 
+  const feeTargets = useLoad(() => accountApi.getFeeTargetList(accountCode));
+
   const inputRef = useRef<HTMLInputElement & { autofocus: boolean }>(null);
 
   const focusInput = useCallback(() => {
@@ -70,32 +72,30 @@ export const FeeTargets = ({
     }
   }, [disabled]);
 
+
   useEffect(() => {
-    accountApi.getFeeTargetList(accountCode)
-      .then(({ feeTargets, defaultFeeTarget }) => {
-        if (config) {
-          const expert = config.frontend.expertFee || feeTargets.length === 0;
-          const options = feeTargets.map(({ code, feeRateInfo }) => ({
-            value: code,
-            text: t(`send.feeTarget.label.${code}`) + (expert && feeRateInfo ? ` (${feeRateInfo})` : ''),
-          }));
-          if (expert) {
-            options.push({
-              value: 'custom',
-              text: t('send.feeTarget.label.custom'),
-            });
-          }
-          setOptions(options);
-          setFeeTarget(defaultFeeTarget);
-          onFeeTargetChange(defaultFeeTarget);
-          if (feeTargets.length === 0) {
-            setNoFeeTargets(true);
-          }
-        }
-      })
-      .catch(console.error);
+    if (!config || !feeTargets) {
+      return;
+    }
+    const expert = config.frontend.expertFee || feeTargets.feeTargets.length === 0;
+    const options = feeTargets.feeTargets.map(({ code, feeRateInfo }) => ({
+      value: code,
+      text: t(`send.feeTarget.label.${code}`) + (expert && feeRateInfo ? ` (${feeRateInfo})` : ''),
+    }));
+    if (expert) {
+      options.push({
+        value: 'custom',
+        text: t('send.feeTarget.label.custom'),
+      });
+    }
+    setOptions(options);
+    setFeeTarget(feeTargets.defaultFeeTarget);
+    onFeeTargetChange(feeTargets.defaultFeeTarget);
+    if (feeTargets.feeTargets.length === 0) {
+      setNoFeeTargets(true);
+    }
     focusInput();
-  }, [t, focusInput, accountCode, config, onFeeTargetChange]);
+  }, [t, feeTargets, focusInput, accountCode, config, onFeeTargetChange]);
 
   const handleFeeTargetChange = (event: React.SyntheticEvent) => {
     const target = event.target as HTMLSelectElement;
@@ -232,4 +232,3 @@ export const FeeTargets = ({
     )
   );
 };
-