diff --git a/CHANGELOG.md b/CHANGELOG.md index 2d95c43027..7fdf15fc3b 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/package.json b/package.json index 0bc9435a32..b0750ad1b5 100644 --- a/package.json +++ b/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": "1.0.0-rc.1", "react-router": "5.2.0", "react-router-dom": "5.2.0", "react-svg-inline": "2.1.1", diff --git a/source/renderer/app/components/wallet/WalletSendForm.js b/source/renderer/app/components/wallet/WalletSendForm.js index 87a65d51bf..121bf02064 100755 --- a/source/renderer/app/components/wallet/WalletSendForm.js +++ b/source/renderer/app/components/wallet/WalletSendForm.js @@ -67,6 +67,7 @@ type Props = { onOpenDialogAction: Function, onUnsetActiveAssetFingerprint: Function, onExternalLinkClick: Function, + isAddressFromSameWallet: boolean, }; type State = { @@ -124,6 +125,10 @@ export default class WalletSendForm extends Component { // Read more: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html _isMounted = false; + // We need to prevent auto focus of ada and token amount fields in case user pastes + // or enters a receiver address which belongs to the same wallet he is sending from. + _isAutoFocusEnabled = true; + componentDidMount() { this._isMounted = true; this.updateFormFields(true); @@ -299,8 +304,14 @@ export default class WalletSendForm extends Component { 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 = () => @@ -327,6 +338,9 @@ export default class WalletSendForm extends Component { ]; } const isValid = await this.props.addressValidator(value); + if (isValid && this.isAddressFromSameWallet()) { + this._isAutoFocusEnabled = false; + } this.setReceiverValidity(isValid); const adaAmountField = form.$('adaAmount'); const isAdaAmountValid = adaAmountField.isValid; @@ -551,6 +565,7 @@ export default class WalletSendForm extends Component { selectedAssetFingerprints, }); this.resetTransactionFee(); + this._isAutoFocusEnabled = true; }; removeAssetRow = (fingerprint: string) => { @@ -628,7 +643,6 @@ export default class WalletSendForm extends Component { ]; }, ]); - this.form.$(newAsset).focus(); const assetsDropdown = `assetsDropdown_${fingerprint}`; this.form.add({ @@ -679,8 +693,8 @@ export default class WalletSendForm extends Component { const { currencyMaxFractionalDigits, walletAmount } = this.props; const { - receiver: receiverField, adaAmount: adaAmountField, + receiver: receiverField, assetFields, assetsDropdown, } = formFields.receiver; @@ -700,20 +714,39 @@ export default class WalletSendForm extends Component { !this.hasAvailableAssets ? styles.disabled : null, 'primary', ]); + + const receiverFieldClasses = classNames([ + styles.receiverInput, + this.isAddressFromSameWallet() ? 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 (
-
+
{ this.addFocusableField(field); }} className="receiver" - error={receiverField.error} + error={receiverFieldError} onChange={(value) => { receiverField.onChange(value || ''); this.setState({ @@ -721,6 +754,7 @@ export default class WalletSendForm extends Component { }); }} onKeyPress={this.handleSubmitOnEnter} + themeVariables={receiverFieldThemeVars} /> {this.hasReceiverValue() && (
@@ -731,6 +765,7 @@ export default class WalletSendForm extends Component {