Merge branch 'frontend-cleanup-send'

thisconnect · thisconnect · commit 0c3f44fa9ef3 · 2024-12-09T10:47:47.000+01:00
diff --git a/frontends/web/src/routes/account/send/components/inputs/note-input.tsx b/frontends/web/src/routes/account/send/components/inputs/note-input.tsx
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
+import { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Input } from '@/components/forms';
 import style from './note-input.module.css';
-import { ChangeEvent } from 'react';
 
 type TProps = {
-    onNoteChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onNoteChange: (note: string) => void;
     note: string;
 }
 
@@ -35,9 +35,9 @@ export const NoteInput = ({ onNoteChange, note }: TProps) => {
         </span>
       }
       id="note"
-      onInput={onNoteChange}
+      onInput={(e: ChangeEvent<HTMLInputElement>) => onNoteChange(e.target.value)}
       value={note}
       placeholder={t('note.input.placeholder')}
     />
   );
-};
+};
diff --git a/frontends/web/src/routes/account/send/send.tsx b/frontends/web/src/routes/account/send/send.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { ChangeEvent, Component } from 'react';
+import { Component } from 'react';
 import * as accountApi from '@/api/account';
 import { syncdone } from '@/api/accountsync';
 import { convertFromCurrency, convertToCurrency, parseExternalBtcAmount } from '@/api/coins';
@@ -26,7 +26,6 @@ import { HideAmountsButton } from '@/components/hideamountsbutton/hideamountsbut
 import { Button } from '@/components/forms';
 import { BackButton } from '@/components/backbutton/backbutton';
 import { Column, ColumnButtons, Grid, GuideWrapper, GuidedContent, Header, Main } from '@/components/layout';
-import { Status } from '@/components/status/status';
 import { translate, TranslateProps } from '@/decorators/translate';
 import { FeeTargets } from './feetargets';
 import { isBitcoinBased } from '@/routes/account/utils';
@@ -39,7 +38,6 @@ import { FiatInput } from './components/inputs/fiat-input';
 import { NoteInput } from './components/inputs/note-input';
 import { TSelectedUTXOs } from './utxos';
 import { TProposalError, txProposalErrorHandling } from './services';
-import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
 import { CoinControl } from './coin-control';
 import style from './send.module.css';
 
@@ -53,7 +51,6 @@ interface SendProps {
 type Props = SendProps & TranslateProps;
 
 export type State = {
-    account?: accountApi.IAccount;
     balance?: accountApi.IBalance;
     proposedFee?: accountApi.IAmount;
     proposedTotal?: accountApi.IAmount;
@@ -68,10 +65,7 @@ export type State = {
     isConfirming: boolean;
     sendResult?: accountApi.ISendTx;
     isUpdatingProposal: boolean;
-    addressError?: TProposalError['addressError'];
-    amountError?: TProposalError['amountError'];
-    feeError?: TProposalError['feeError'];
-    paired?: boolean;
+    errorHandling: TProposalError;
     note: string;
 }
 
@@ -93,6 +87,7 @@ class Send extends Component<Props, State> {
     isUpdatingProposal: false,
     note: '',
     customFee: '',
+    errorHandling: {},
   };
 
   public componentDidMount() {
@@ -173,9 +168,7 @@ class Send extends Component<Props, State> {
   private validateAndDisplayFee = (updateFiat: boolean = true) => {
     this.setState({
       proposedTotal: undefined,
-      addressError: undefined,
-      amountError: undefined,
-      feeError: undefined,
+      errorHandling: {},
     });
     const txInput = this.getValidTxInputData();
     if (!txInput) {
@@ -209,23 +202,14 @@ class Send extends Component<Props, State> {
     }, 400); // Delay the proposal by 400 ms
   };
 
-  private handleNoteInput = (event: ChangeEvent<HTMLInputElement>) => {
-    const target = event.target;
-    this.setState({
-      'note': target.value,
-    });
-  };
-
   private txProposal = (
     updateFiat: boolean,
     result: accountApi.TTxProposalResult,
   ) => {
     this.setState({ valid: result.success });
     if (result.success) {
       this.setState({
-        addressError: undefined,
-        amountError: undefined,
-        feeError: undefined,
+        errorHandling: {},
         proposedFee: result.fee,
         proposedAmount: result.amount,
         proposedTotal: result.total,
@@ -236,7 +220,11 @@ class Send extends Component<Props, State> {
       }
     } else {
       const errorHandling = txProposalErrorHandling(result.errorCode);
-      this.setState({ ...errorHandling, isUpdatingProposal: false });
+      this.setState({ errorHandling, isUpdatingProposal: false });
+      if (errorHandling.amountError
+        || Object.keys(errorHandling).length === 0) {
+        this.setState({ proposedFee: undefined });
+      }
     }
   };
 
@@ -256,7 +244,7 @@ class Send extends Component<Props, State> {
       if (data.success) {
         this.setState({ fiatAmount: data.fiatAmount });
       } else {
-        this.setState({ amountError: this.props.t('send.error.invalidAmount') });
+        this.setState({ errorHandling: { amountError: this.props.t('send.error.invalidAmount') } });
       }
     } else {
       this.setState({ fiatAmount: '' });
@@ -274,7 +262,7 @@ class Send extends Component<Props, State> {
       if (data.success) {
         this.setState({ amount: data.amount }, () => this.validateAndDisplayFee(false));
       } else {
-        this.setState({ amountError: this.props.t('send.error.invalidAmount') });
+        this.setState({ errorHandling: { amountError: this.props.t('send.error.invalidAmount') } });
       }
     } else {
       this.setState({ amount: '' });
@@ -326,7 +314,7 @@ class Send extends Component<Props, State> {
         if (result.success) {
           updateState['amount'] = result.amount;
         } else {
-          updateState['amountError'] = this.props.t('send.error.invalidAmount');
+          updateState['errorHandling'] = { amountError: this.props.t('send.error.invalidAmount') };
           this.setState(updateState);
           return;
         }
@@ -387,10 +375,7 @@ class Send extends Component<Props, State> {
       isConfirming,
       sendResult,
       isUpdatingProposal,
-      addressError,
-      amountError,
-      feeError,
-      paired,
+      errorHandling,
       note,
     } = this.state;
 
@@ -408,11 +393,6 @@ class Send extends Component<Props, State> {
       <GuideWrapper>
         <GuidedContent>
           <Main>
-            <ContentWrapper>
-              <Status type="warning" hidden={paired !== false}>
-                {t('warning.sendPairing')}
-              </Status>
-            </ContentWrapper>
             <Header
               title={<h2>{t('send.title', { accountName: account.coinName })}</h2>}
             >
@@ -438,7 +418,7 @@ class Send extends Component<Props, State> {
                   <Column>
                     <ReceiverAddressInput
                       accountCode={account.code}
-                      addressError={addressError}
+                      addressError={errorHandling.addressError}
                       onInputChange={this.onReceiverAddressInputChange}
                       recipientAddress={recipientAddress}
                       parseQRResult={this.parseQRResult}
@@ -452,7 +432,7 @@ class Send extends Component<Props, State> {
                       onAmountChange={this.onCoinAmountChange}
                       onSendAllChange={this.onSendAllChange}
                       sendAll={sendAll}
-                      amountError={amountError}
+                      amountError={errorHandling.amountError}
                       proposedAmount={proposedAmount}
                       amount={amount}
                       hasSelectedUTXOs={this.hasSelectedUTXOs()}
@@ -462,7 +442,7 @@ class Send extends Component<Props, State> {
                     <FiatInput
                       onFiatChange={this.handleFiatInput}
                       disabled={sendAll}
-                      error={amountError}
+                      error={errorHandling.amountError}
                       fiatAmount={fiatAmount}
                       label={activeCurrency}
                     />
@@ -480,12 +460,12 @@ class Send extends Component<Props, State> {
                       showCalculatingFeeLabel={isUpdatingProposal}
                       onFeeTargetChange={this.feeTargetChange}
                       onCustomFee={customFee => this.setState({ customFee }, this.validateAndDisplayFee)}
-                      error={feeError} />
+                      error={errorHandling.feeError} />
                   </Column>
                   <Column>
                     <NoteInput
                       note={note}
-                      onNoteChange={this.handleNoteInput}
+                      onNoteChange={note => this.setState({ note: note })}
                     />
                     <ColumnButtons
                       className="m-top-default m-bottom-xlarge"
diff --git a/frontends/web/src/routes/account/send/services.ts b/frontends/web/src/routes/account/send/services.ts
@@ -19,26 +19,26 @@ import { alertUser } from '@/components/alert/Alert';
 import { i18n } from '@/i18n/i18n';
 
 export type TProposalError = {
-    addressError: string;
-    amountError: string;
-    feeError: string;
+    addressError?: string;
+    amountError?: string;
+    feeError?: string;
 }
 
-export const txProposalErrorHandling = (errorCode?: string) => {
+export const txProposalErrorHandling = (errorCode?: string): TProposalError => {
   const { t } = i18n;
   switch (errorCode) {
   case 'invalidAddress':
     return { addressError: t('send.error.invalidAddress') };
   case 'invalidAmount':
   case 'insufficientFunds':
-    return { amountError: t(`send.error.${errorCode}`), proposedFee: undefined };
+    return { amountError: t(`send.error.${errorCode}`) };
   case 'feeTooLow':
   case 'feesNotAvailable':
     return { feeError: t(`send.error.${errorCode}`) };
   default:
     if (errorCode) {
       alertUser(errorCode);
     }
-    return { proposedFee: undefined };
+    return {};
   }
-};
+};
