[DDW-933] Send Screen - part of UI/UX issues (#2859)

.eslintrc

@@ -101,5 +101,14 @@
         "extensions": [".js", ".jsx", ".ts", ".tsx"]
       }
     }
-  }
+  },
+  "overrides": [
+    {
+      "files": "**/*.ts",
+      "rules": {
+          "no-useless-constructor": "off",
+          "@typescript-eslint/no-useless-constructor": "error"
+      }
+    }
+  ]
 }

CHANGELOG.md

@@ -9,7 +9,7 @@
 - Unified CPU info in diagnostics dialog ([PR 2818](https://github.com/input-output-hk/daedalus/pull/2818))
 - Implemented wallet sorting on sidebar menu ([PR 2775](https://github.com/input-output-hk/daedalus/pull/2775))
 - Implemented new token picker ([PR 2787](https://github.com/input-output-hk/daedalus/pull/2787))
-- Improved wallet send form ([PR 2791](https://github.com/input-output-hk/daedalus/pull/2791))
+- Improved wallet send form ([PR 2791](https://github.com/input-output-hk/daedalus/pull/2791), [PR 2859](https://github.com/input-output-hk/daedalus/pull/2859))
 
 ### Fixes
 

source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.tsx

@@ -51,13 +51,16 @@ type Props = {
   oversaturationPercentage: number;
 };
 
+interface FormFields {
+  spendingPassword: string;
+}
+
 @observer
 class DelegationStepsConfirmationDialog extends Component<Props> {
   static contextTypes = {
     intl: intlShape.isRequired,
   };
-  form = new ReactToolboxMobxForm(
-    // @ts-ignore ts-migrate(2554) FIXME: Expected 0 arguments, but got 2.
+  form = new ReactToolboxMobxForm<FormFields>(
     {
       fields: {
         spendingPassword: {
@@ -102,7 +105,6 @@ class DelegationStepsConfirmationDialog extends Component<Props> {
     }
   );
   submit = () => {
-    // @ts-ignore ts-migrate(2339) FIXME: Property 'submit' does not exist on type 'ReactToo... Remove this comment to see the full error message
     this.form.submit({
       onSuccess: (form) => {
         const { selectedWallet } = this.props;
@@ -136,7 +138,6 @@ class DelegationStepsConfirmationDialog extends Component<Props> {
     const isHardwareWallet = get(selectedWallet, 'isHardwareWallet');
     const selectedPoolTicker = get(selectedPool, 'ticker');
     const selectedPoolId = get(selectedPool, 'id');
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const spendingPasswordField = form.$('spendingPassword');
     const buttonLabel = !isSubmitting ? (
       intl.formatMessage(messages.confirmButtonLabel)

source/renderer/app/components/staking/redeem-itn-rewards/Step1ConfigurationDialog.tsx

@@ -143,6 +143,13 @@ type Props = {
   wallets: Array<Wallet>;
 };
 
+interface FormFields {
+  checkboxAcceptance1: string;
+  checkboxAcceptance2: string;
+  walletsDropdown: string;
+  recoveryPhrase: string;
+}
+
 @observer
 class Step1ConfigurationDialog extends Component<Props> {
   static contextTypes = {
@@ -153,8 +160,7 @@ class Step1ConfigurationDialog extends Component<Props> {
     recoveryPhrase: [],
   };
   recoveryPhraseAutocomplete: Autocomplete;
-  form = new ReactToolboxMobxForm(
-    // @ts-ignore ts-migrate(2554) FIXME: Expected 0 arguments, but got 2.
+  form = new ReactToolboxMobxForm<FormFields>(
     {
       fields: {
         recoveryPhrase: {
@@ -198,7 +204,6 @@ class Step1ConfigurationDialog extends Component<Props> {
     }
   );
   submit = () => {
-    // @ts-ignore ts-migrate(2339) FIXME: Property 'submit' does not exist on type 'ReactToo... Remove this comment to see the full error message
     this.form.submit({
       onSuccess: () => this.props.onContinue(),
     });
@@ -207,11 +212,9 @@ class Step1ConfigurationDialog extends Component<Props> {
   get canSubmit() {
     const { isCalculatingReedemFees, wallet, error } = this.props;
     const { form } = this;
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const { checked: checkboxAcceptance1isChecked } = form.$(
       'checkboxAcceptance1'
     );
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const { checked: checkboxAcceptance2isChecked } = form.$(
       'checkboxAcceptance2'
     );
@@ -221,7 +224,6 @@ class Step1ConfigurationDialog extends Component<Props> {
       !error &&
       checkboxAcceptance1isChecked &&
       checkboxAcceptance2isChecked &&
-      // @ts-ignore ts-migrate(2339) FIXME: Property 'isValid' does not exist on type 'ReactTo... Remove this comment to see the full error message
       form.isValid
     );
   }
@@ -270,13 +272,9 @@ class Step1ConfigurationDialog extends Component<Props> {
           />
         </p>
       );
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const recoveryPhraseField = form.$('recoveryPhrase');
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const walletsDropdownField = form.$('walletsDropdown');
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const checkboxAcceptance1Field = form.$('checkboxAcceptance1');
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const checkboxAcceptance2Field = form.$('checkboxAcceptance2');
     const walletId = get(wallet, 'id', null);
     const validRecoveryPhase = recoveryPhraseField.isValid;

source/renderer/app/components/staking/redeem-itn-rewards/Step2ConfirmationDialog.tsx

@@ -77,6 +77,10 @@ type Props = {
   error?: LocalizableError | null | undefined;
 };
 
+interface FormFields {
+  spendingPassword: string;
+}
+
 @observer
 class Step2ConfirmationDialog extends Component<Props> {
   static contextTypes = {
@@ -85,8 +89,7 @@ class Step2ConfirmationDialog extends Component<Props> {
   static defaultProps = {
     error: null,
   };
-  form = new ReactToolboxMobxForm(
-    // @ts-ignore ts-migrate(2554) FIXME: Expected 0 arguments, but got 2.
+  form = new ReactToolboxMobxForm<FormFields>(
     {
       fields: {
         spendingPassword: {
@@ -127,7 +130,6 @@ class Step2ConfirmationDialog extends Component<Props> {
     }
   );
   submit = () => {
-    // @ts-ignore ts-migrate(2339) FIXME: Property 'submit' does not exist on type 'ReactToo... Remove this comment to see the full error message
     this.form.submit({
       onSuccess: (form) => {
         const { spendingPassword } = form.values();
@@ -163,14 +165,12 @@ class Step2ConfirmationDialog extends Component<Props> {
       ? amount
       : transactionFees;
     const { name: walletName } = wallet;
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const spendingPasswordField = form.$('spendingPassword');
     const actions = {
       direction: 'column',
       items: [
         {
           className: isSubmitting ? styles.isSubmitting : null,
-          // @ts-ignore ts-migrate(2339) FIXME: Property 'isValid' does not exist on type 'ReactTo... Remove this comment to see the full error message
           disabled: !form.isValid,
           primary: true,
           label: intl.formatMessage(messages.continueButtonLabel),

source/renderer/app/components/staking/stake-pools/StakePoolsRanking.tsx

@@ -33,7 +33,6 @@ import type { DiscreetModeFeature } from '../../../features/discreet-mode';
 import WalletsDropdown from '../../widgets/forms/WalletsDropdown';
 import ButtonLink from '../../widgets/ButtonLink';
 import { Slider } from '../../widgets/Slider';
-// @ts-ignore ts-migrate(2307) FIXME: Cannot find module './StakePoolsRanking.scss' or i... Remove this comment to see the full error message
 import styles from './StakePoolsRanking.scss';
 
 const messages = defineMessages({

source/renderer/app/components/voting/voting-registration-wizard-steps/VotingRegistrationStepsEnterPinCode.tsx

@@ -13,7 +13,6 @@ import {
   VOTING_REGISTRATION_PIN_CODE_LENGTH,
   NEXT_VOTING_FUND_NUMBER,
 } from '../../../config/votingConfig';
-// @ts-ignore ts-migrate(2307) FIXME: Cannot find module './VotingRegistrationStepsEnter... Remove this comment to see the full error message
 import styles from './VotingRegistrationStepsEnterPinCode.scss';
 import VotingRegistrationDialog from './widgets/VotingRegistrationDialog';
 
@@ -68,13 +67,17 @@ type Props = {
   onSetPinCode: (...args: Array<any>) => any;
 };
 
+interface FormFields {
+  pinCode: string[];
+  repeatPinCode: string[];
+}
+
 @observer
 class VotingRegistrationStepsEnterPinCode extends Component<Props> {
   static contextTypes = {
     intl: intlShape.isRequired,
   };
-  form = new ReactToolboxMobxForm(
-    // @ts-ignore ts-migrate(2554) FIXME: Expected 0 arguments, but got 2.
+  form = new ReactToolboxMobxForm<FormFields>(
     {
       fields: {
         pinCode: {
@@ -125,7 +128,6 @@ class VotingRegistrationStepsEnterPinCode extends Component<Props> {
     }
   );
   submit = () => {
-    // @ts-ignore ts-migrate(2339) FIXME: Property 'submit' does not exist on type 'ReactToo... Remove this comment to see the full error message
     this.form.submit({
       onSuccess: (form) => {
         const { pinCode } = form.values();
@@ -141,17 +143,14 @@ class VotingRegistrationStepsEnterPinCode extends Component<Props> {
     const buttonLabel = intl.formatMessage(messages.continueButtonLabel);
     const enterPinCodeLabel = intl.formatMessage(messages.enterPinCodeLabel);
     const repeatPinCodeLabel = intl.formatMessage(messages.repeatPinCodeLabel);
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const pinCodeField = form.$('pinCode');
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const repeatPinCodeField = form.$('repeatPinCode');
     const pinCodeFieldProps = pinCodeField.bind();
     const repeatPinCodeFieldProps = repeatPinCodeField.bind();
     const actions = [
       {
         label: buttonLabel,
         onClick: this.submit,
-        // @ts-ignore ts-migrate(2339) FIXME: Property 'isValid' does not exist on type 'ReactTo... Remove this comment to see the full error message
         disabled: !form.isValid,
         primary: true,
       },

source/renderer/app/components/voting/voting-registration-wizard-steps/VotingRegistrationStepsRegister.tsx

@@ -87,13 +87,16 @@ type Props = {
   onExternalLinkClick: (...args: Array<any>) => any;
 };
 
+interface FormFields {
+  spendingPassword: string;
+}
+
 @observer
 class VotingRegistrationStepsRegister extends Component<Props> {
   static contextTypes = {
     intl: intlShape.isRequired,
   };
-  form = new ReactToolboxMobxForm(
-    // @ts-ignore ts-migrate(2554) FIXME: Expected 0 arguments, but got 2.
+  form = new ReactToolboxMobxForm<FormFields>(
     {
       fields: {
         spendingPassword: {
@@ -133,7 +136,6 @@ class VotingRegistrationStepsRegister extends Component<Props> {
     }
   );
   submit = () => {
-    // @ts-ignore ts-migrate(2339) FIXME: Property 'values' does not exist on type 'ReactToo... Remove this comment to see the full error message
     const { spendingPassword } = this.form.values();
     this.props.onConfirm(spendingPassword);
   };
@@ -157,7 +159,6 @@ class VotingRegistrationStepsRegister extends Component<Props> {
       isTrezor,
       isHardwareWallet,
     } = this.props;
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const spendingPasswordField = form.$('spendingPassword');
     const buttonLabel = intl.formatMessage(messages.continueButtonLabel);
     const learnMoreLinkUrl = intl.formatMessage(messages.learntMoreLinkUrl);

source/renderer/app/components/wallet/WalletCreateDialog.tsx

@@ -96,6 +96,12 @@ type State = {
   isSubmitting: boolean;
 };
 
+interface FormFields {
+  repeatPassword: string;
+  spendingPassword: string;
+  walletName: string;
+}
+
 @observer
 class WalletCreateDialog extends Component<Props, State> {
   static contextTypes = {
@@ -112,8 +118,7 @@ class WalletCreateDialog extends Component<Props, State> {
   }
 
   walletNameInput: Input;
-  form = new ReactToolboxMobxForm(
-    // @ts-ignore ts-migrate(2554) FIXME: Expected 0 arguments, but got 2.
+  form = new ReactToolboxMobxForm<FormFields>(
     {
       fields: {
         walletName: {
@@ -188,7 +193,6 @@ class WalletCreateDialog extends Component<Props, State> {
     this.setState({
       isSubmitting: false,
     });
-    // @ts-ignore ts-migrate(2339) FIXME: Property 'submit' does not exist on type 'ReactToo... Remove this comment to see the full error message
     this.form.submit({
       onSuccess: (form) => {
         this.setState({
@@ -223,13 +227,9 @@ class WalletCreateDialog extends Component<Props, State> {
       styles.spendingPasswordField,
       currentLocale === 'ja-JP' ? styles.jpLangTooltipIcon : '',
     ]);
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const walletNameField = form.$('walletName');
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const spendingPasswordField = form.$('spendingPassword');
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const repeatedPasswordField = form.$('repeatPassword');
-    // @ts-ignore ts-migrate(2339) FIXME: Property 'isValid' does not exist on type 'ReactTo... Remove this comment to see the full error message
     const canSubmit = !isSubmitting && form.isValid;
     const buttonLabel = !isSubmitting ? (
       this.context.intl.formatMessage(messages.createPersonalWallet)

source/renderer/app/components/wallet/WalletRestoreDialog.tsx

@@ -209,6 +209,13 @@ type State = {
   walletType: string;
 };
 
+interface FormFields {
+  repeatPassword: string;
+  spendingPassword: string;
+  recoveryPhrase: string;
+  walletName: string;
+}
+
 @observer
 class WalletRestoreDialog extends Component<Props, State> {
   static contextTypes = {
@@ -228,8 +235,7 @@ class WalletRestoreDialog extends Component<Props, State> {
     }
   }
 
-  form = new ReactToolboxMobxForm(
-    // @ts-ignore ts-migrate(2554) FIXME: Expected 0 arguments, but got 2.
+  form = new ReactToolboxMobxForm<FormFields>(
     {
       fields: {
         walletName: {
@@ -327,7 +333,6 @@ class WalletRestoreDialog extends Component<Props, State> {
     }
   );
   submit = () => {
-    // @ts-ignore ts-migrate(2339) FIXME: Property 'submit' does not exist on type 'ReactToo... Remove this comment to see the full error message
     this.form.submit({
       onSuccess: (form) => {
         const { onSubmit } = this.props;
@@ -350,17 +355,13 @@ class WalletRestoreDialog extends Component<Props, State> {
   resetForm = () => {
     const { form } = this;
     // Cancel all debounced field validations
-    // @ts-ignore ts-migrate(2339) FIXME: Property 'each' does not exist on type 'ReactToolb... Remove this comment to see the full error message
     form.each((field) => {
       field.debouncedValidation.cancel();
     });
-    // @ts-ignore ts-migrate(2339) FIXME: Property 'reset' does not exist on type 'ReactTool... Remove this comment to see the full error message
     form.reset();
-    // @ts-ignore ts-migrate(2339) FIXME: Property 'showErrors' does not exist on type 'Reac... Remove this comment to see the full error message
     form.showErrors(false);
   };
   resetMnemonics = () => {
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const recoveryPhraseField = this.form.$('recoveryPhrase');
     recoveryPhraseField.debouncedValidation.cancel();
     recoveryPhraseField.reset();
@@ -383,13 +384,9 @@ class WalletRestoreDialog extends Component<Props, State> {
       'walletName',
       styles.walletName,
     ]);
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const walletNameField = form.$('walletName');
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const recoveryPhraseField = form.$('recoveryPhrase');
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const spendingPasswordField = form.$('spendingPassword');
-    // @ts-ignore ts-migrate(2339) FIXME: Property '$' does not exist on type 'ReactToolboxM... Remove this comment to see the full error message
     const repeatedPasswordField = form.$('repeatPassword');
     const label = this.isCertificate()
       ? this.context.intl.formatMessage(messages.restorePaperWalletButtonLabel)