frontend: refactor send into a functional component

Author: thisconnect

frontends/web/src/api/account.ts

@@ -364,7 +364,7 @@ export const sendTx = (
   return apiPost(`account/${code}/sendtx`, txNote);
 };
 
-export type FeeTargetCode = 'custom' | 'low' | 'economy' | 'normal' | 'high';
+export type FeeTargetCode = 'custom' | 'low' | 'economy' | 'normal' | 'high' | 'mHour' | 'mHalfHour' | 'mFastest';
 
 export interface IProposeTxData {
     address?: string;

frontends/web/src/routes/account/send/components/inputs/receiver-address-input.module.css

@@ -26,7 +26,7 @@
   justify-content: center;
   padding: 0;
   position: absolute;
-  top: calc(50% - var(--space-quarter));
+  top: calc(50% - var(--space-eight));
   right: calc(var(--spacing-default) - var(--space-quarter));
   cursor: pointer;
 }

frontends/web/src/routes/account/send/feetargets.module.css

@@ -91,6 +91,10 @@ select.priority {
 .feeCustom input {
     padding-right: 58px;
 }
+.feeCustom input:disabled {
+    padding-right: 66px;
+    padding-top: 2px;
+}
 
 .feeDescription,
 .feeProposed {
@@ -102,7 +106,12 @@ select.priority {
 }
 
 .feeProposed {
-    margin: 0;
+    margin: 0 0 var(--space-quarter) 0;
+}
+@media (min-width: 769px) {
+    .feeProposed {
+        margin: 0;
+    }
 }
 
 .feeDescription + .feeProposed {

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

@@ -78,7 +78,9 @@ describe('routes/account/send/feetargets', () => {
         }}
         customFee=""
         onCustomFee={vi.fn()}
-        onFeeTargetChange={vi.fn()} />,
+        onFeeTargetChange={vi.fn()}
+        // value="normal"
+      />,
     );
     waitFor(() => expect(container).toMatchSnapshot());
   });
@@ -98,7 +100,9 @@ describe('routes/account/send/feetargets', () => {
         fiatUnit="EUR"
         customFee=""
         onCustomFee={vi.fn()}
-        onFeeTargetChange={vi.fn()} />,
+        onFeeTargetChange={vi.fn()}
+        // value="normal"
+      />,
     );
     await waitFor(() => expect(container).toMatchSnapshot());
   });
@@ -126,7 +130,9 @@ describe('routes/account/send/feetargets', () => {
         fiatUnit="USD"
         customFee=""
         onCustomFee={vi.fn()}
-        onFeeTargetChange={onFeeTargetChangeCB} />,
+        onFeeTargetChange={onFeeTargetChangeCB}
+        // value="normal"
+      />,
     );
     await waitFor(() => expect(apiGetMock).toHaveBeenCalled());
   }));

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

@@ -35,6 +35,7 @@ type Props = {
   showCalculatingFeeLabel?: boolean;
   onFeeTargetChange: (code: accountApi.FeeTargetCode) => void;
   onCustomFee: (customFee: string) => void;
+  // value?: accountApi.FeeTargetCode;
   error?: string;
 }
 
@@ -54,11 +55,12 @@ export const FeeTargets = ({
   showCalculatingFeeLabel,
   onFeeTargetChange,
   onCustomFee,
-  error
+  error,
 }: Props) => {
   const { t } = useTranslation();
   const config = useLoad(getConfig);
   const [feeTarget, setFeeTarget] = useState<string>('');
+  // const [feeTarget, setFeeTarget] = useState<accountApi.FeeTargetCode | undefined>(value);
   const [options, setOptions] = useState<TOptions[] | null>(null);
   const [noFeeTargets, setNoFeeTargets] = useState<boolean>(false);
 
@@ -93,6 +95,11 @@ export const FeeTargets = ({
     setOptions(options);
     setFeeTarget(feeTargets.defaultFeeTarget);
     onFeeTargetChange(feeTargets.defaultFeeTarget);
+    // if (!feeTarget) {
+    //   setFeeTarget(feeTargets.defaultFeeTarget);
+    //   console.log('ONLY ONCE????', feeTargets.defaultFeeTarget);
+    //   onFeeTargetChange(feeTargets.defaultFeeTarget);
+    // }
     if (feeTargets.feeTargets.length === 0) {
       setNoFeeTargets(true);
     }