Merge remote-tracking branch 'benma/feetargets'

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 = ({
     )
   );
 };
-