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.tsx

@@ -1,6 +1,6 @@
 /**
  * Copyright 2018 Shift Devices AG
- * Copyright 2021-2024 Shift Crypto AG
+ * Copyright 2021-2025 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -91,13 +91,16 @@ export const FeeTargets = ({
       });
     }
     setOptions(options);
+    if (feeTarget) {
+      return;
+    }
     setFeeTarget(feeTargets.defaultFeeTarget);
     onFeeTargetChange(feeTargets.defaultFeeTarget);
     if (feeTargets.feeTargets.length === 0) {
       setNoFeeTargets(true);
     }
     focusInput();
-  }, [t, feeTargets, focusInput, accountCode, config, onFeeTargetChange, disabled]);
+  }, [t, feeTarget, feeTargets, focusInput, accountCode, config, onFeeTargetChange, disabled]);
 
   const handleFeeTargetChange = (event: React.SyntheticEvent) => {
     const target = event.target as HTMLSelectElement;