[DDW-595] Warn user when pasting an address of the same wallet

CHANGELOG.md

@@ -5,6 +5,7 @@ Changelog
 
 ### Features
 
+- Added warning message when pasting an address of the same wallet in the send form ([PR 2506](https://github.com/input-output-hk/daedalus/pull/2506))
 - Implemented select search style variables ([PR 2512](https://github.com/input-output-hk/daedalus/pull/2512))
 - Enabled pasting of wallet recovery phrase ([PR 2459](https://github.com/input-output-hk/daedalus/pull/2459))
 

package.json

@@ -234,7 +234,7 @@
     "react-intl": "2.7.2",
     "react-lottie": "1.2.3",
     "react-markdown": "4.3.1",
-    "react-polymorph": "0.9.8-rc.21",
+    "react-polymorph": "0.9.7-next.1",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-svg-inline": "2.1.1",

source/renderer/app/components/wallet/WalletSendForm.js

@@ -67,6 +67,7 @@ type Props = {
   onOpenDialogAction: Function,
   onUnsetActiveAssetFingerprint: Function,
   onExternalLinkClick: Function,
+  isAddressFromSameWallet: boolean,
 };
 
 type State = {
@@ -199,8 +200,6 @@ export default class WalletSendForm extends Component<Props, State> {
     }
   };
 
-  handleSubmitOnEnter = submitOnEnter.bind(this, this.handleOnSubmit);
-
   handleOnSubmit = () => {
     if (this.isDisabled()) {
       return false;
@@ -210,6 +209,8 @@ export default class WalletSendForm extends Component<Props, State> {
     });
   };
 
+  handleSubmitOnEnter = submitOnEnter.bind(this, this.handleOnSubmit);
+
   handleOnReset = () => {
     // Cancel all debounced field validations
     this.form.each((field) => {
@@ -299,8 +300,14 @@ export default class WalletSendForm extends Component<Props, State> {
     return receiverField.value.length > 0;
   };
 
-  hasAssetValue = (asset: Field) => {
-    return get(asset, 'value', false);
+  isAddressFromSameWallet = () => {
+    const { isAddressFromSameWallet } = this.props;
+    const receiverField = this.form.$('receiver');
+    return (
+      this.hasReceiverValue() &&
+      isAddressFromSameWallet &&
+      receiverField.isValid
+    );
   };
 
   isDisabled = () =>
@@ -330,6 +337,17 @@ export default class WalletSendForm extends Component<Props, State> {
               this.setReceiverValidity(isValid);
               const adaAmountField = form.$('adaAmount');
               const isAdaAmountValid = adaAmountField.isValid;
+              const { selectedAsset } = this.props;
+              const shouldFocus = !this.isAddressFromSameWallet();
+              if (selectedAsset && !shouldFocus) {
+                const newAsset = `asset_${selectedAsset.fingerprint}`;
+                const newAssetField = this.form.$(newAsset);
+                const { name: fieldName } = newAssetField;
+                const focusableField = this.focusableFields[fieldName];
+                if (focusableField && focusableField.inputElement) {
+                  focusableField.inputElement.current.blur();
+                }
+              }
               if (isValid && isAdaAmountValid) {
                 this.calculateTransactionFee();
               } else {
@@ -504,7 +522,6 @@ export default class WalletSendForm extends Component<Props, State> {
             <FormattedHTMLMessage {...localizableError} values={values} />
           );
         }
-
         this._isCalculatingTransactionFee = false;
         this.setState({
           isTransactionFeeCalculated: false,
@@ -676,11 +693,16 @@ export default class WalletSendForm extends Component<Props, State> {
       selectedAssetFingerprints,
       isReceiverAddressValid,
     } = this.state;
-    const { currencyMaxFractionalDigits, walletAmount } = this.props;
+    const {
+      currencyMaxFractionalDigits,
+      walletAmount,
+      isAddressFromSameWallet,
+      selectedAsset,
+    } = this.props;
 
     const {
-      receiver: receiverField,
       adaAmount: adaAmountField,
+      receiver: receiverField,
       assetFields,
       assetsDropdown,
     } = formFields.receiver;
@@ -700,27 +722,51 @@ export default class WalletSendForm extends Component<Props, State> {
       !this.hasAvailableAssets ? styles.disabled : null,
       'primary',
     ]);
+
+    const receiverFieldClasses = classNames([
+      styles.receiverInput,
+      this.hasReceiverValue() &&
+      isAddressFromSameWallet &&
+      receiverField.isValid
+        ? styles.sameRecieverInput
+        : null,
+    ]);
+
     const minAdaRequiredTooltip = selectedAssetFingerprints.length
       ? messages.minAdaRequiredWithAssetTooltip
       : messages.minAdaRequiredWithNoAssetTooltip;
 
+    const sameWalletError = intl.formatMessage(messages.sameWalletLabel);
+    let receiverFieldError = receiverField.error;
+    let receiverFieldThemeVars = {};
+    if (this.isAddressFromSameWallet()) {
+      receiverFieldError = sameWalletError;
+      receiverFieldThemeVars = {
+        '--rp-input-border-color-errored':
+          'var(--rp-password-input-warning-score-color)',
+        '--rp-pop-over-bg-color':
+          'var(--rp-password-input-warning-score-color)',
+      };
+    }
+
     return (
       <div className={styles.fieldsContainer}>
-        <div className={styles.receiverInput}>
+        <div className={receiverFieldClasses}>
           <Input
             {...receiverField.bind()}
             ref={(field) => {
               this.addFocusableField(field);
             }}
             className="receiver"
-            error={receiverField.error}
+            error={receiverFieldError}
             onChange={(value) => {
               receiverField.onChange(value || '');
               this.setState({
                 isResetButtonDisabled: false,
               });
             }}
             onKeyPress={this.handleSubmitOnEnter}
+            themeVariables={receiverFieldThemeVars}
           />
           {this.hasReceiverValue() && (
             <div className={styles.clearReceiverContainer}>
@@ -731,6 +777,7 @@ export default class WalletSendForm extends Component<Props, State> {
                 <button
                   onClick={() => this.handleOnReset()}
                   className={styles.clearReceiverButton}
+                  tabIndex={-1}
                 >
                   <SVGInline
                     svg={closeIcon}
@@ -781,7 +828,7 @@ export default class WalletSendForm extends Component<Props, State> {
                   error={adaAmountField.error || transactionFeeError}
                   onKeyPress={this.handleSubmitOnEnter}
                   allowSigns={false}
-                  autoFocus
+                  autoFocus={!this.isAddressFromSameWallet() && !selectedAsset}
                 />
                 <div className={styles.minAdaRequired}>
                   <span>

source/renderer/app/components/wallet/WalletSendForm.scss

@@ -128,6 +128,12 @@
       }
     }
   }
+
+  &.sameRecieverInput {
+    input {
+      border-color: var(--rp-password-input-warning-score-color) !important;
+    }
+  }
 }
 
 .estimatedFeeInput,

source/renderer/app/components/wallet/send-form/messages.js

@@ -44,6 +44,12 @@ export default defineMessages({
     defaultMessage: '!!!Clear',
     description: 'Label for the "Clear" button in the wallet send form.',
   },
+  sameWalletLabel: {
+    id: 'wallet.send.form.sameWalletLabel',
+    defaultMessage:
+      '!!!This receiver address belongs to the same wallet from which you are sending funds. If you proceed with this transaction, the transferred funds will remain in this wallet, and you will incur transaction fees, as outlined in Estimated fees.',
+    description: 'Label for the same wallet tooltip in the wallet send form.',
+  },
   addAssetButtonLabel: {
     id: 'wallet.send.form.button.addAssetButtonLabel',
     defaultMessage: '!!!+ Add a token',

source/renderer/app/components/widgets/forms/InlineEditingInput.js

@@ -301,11 +301,9 @@ export default class InlineEditingInput extends Component<Props, State> {
           type="text"
           maxLength={maxLength}
           label={label}
-          onFocus={this.onFocus}
-          onBlur={this.onBlur}
           onChange={this.onChange}
           onKeyDown={(event) => this.handleInputKeyDown(event)}
-          error={isActive ? error : !!error}
+          error={error}
           disabled={disabled}
           readOnly={readOnly}
           ref={(input) => {

source/renderer/app/containers/wallet/WalletSendPage.js

@@ -103,7 +103,7 @@ export default class WalletSendPage extends Component<Props> {
       hardwareWallets,
       assets: assetsStore,
     } = this.props.stores;
-    const { isValidAddress } = wallets;
+    const { isValidAddress, isAddressFromSameWallet } = wallets;
     const { validateAmount } = transactions;
     const { hwDeviceStatus } = hardwareWallets;
     const hasAssetsEnabled = WALLET_ASSETS_ENABLED;
@@ -182,6 +182,7 @@ export default class WalletSendPage extends Component<Props> {
         }
         onUnsetActiveAssetFingerprint={this.handleUnsetActiveAssetFingerprint}
         onExternalLinkClick={app.openExternalLink}
+        isAddressFromSameWallet={isAddressFromSameWallet}
       />
     );
   }