From 4892a3e0e1821ec04ca6f244702a4c5ecf8b95e6 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Wed, 21 Oct 2020 11:35:56 -0500 Subject: [PATCH 1/5] Fix 9649 - Ensure QR codes work properly when adding contact --- .../send-content/add-recipient/ens-input.component.js | 11 +++++++++-- .../add-contact/add-contact.component.js | 2 ++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.component.js b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js index ccbfed356..acd953116 100644 --- a/ui/app/pages/send/send-content/add-recipient/ens-input.component.js +++ b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js @@ -33,6 +33,7 @@ export default class EnsInput extends Component { onReset: PropTypes.func, onValidAddressTyped: PropTypes.func, contact: PropTypes.object, + value: PropTypes.string, } state = { @@ -53,16 +54,22 @@ export default class EnsInput extends Component { } } - // If an address is sent without a nickname, meaning not from ENS or from - // the user's own accounts, a default of a one-space string is used. componentDidUpdate (prevProps) { const { input, } = this.state const { network, + value, } = this.props + // Update the value in state if its prop value changes + if (input !== value) { + this.setState({ input: value }) + } + + // If an address is sent without a nickname, meaning not from ENS or from + // the user's own accounts, a default of a one-space string is used. if (prevProps.network !== network) { const provider = global.ethereumProvider this.ens = new ENS({ provider, network }) diff --git a/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js b/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js index 12f420186..632ad1b4e 100644 --- a/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js +++ b/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js @@ -52,6 +52,7 @@ export default class AddContact extends PureComponent { validate = (address) => { const valid = isValidAddress(address) const validEnsAddress = isValidDomainName(address) + if (valid || validEnsAddress || address === '') { this.setState({ error: '', ethAddress: address }) } else { @@ -73,6 +74,7 @@ export default class AddContact extends PureComponent { this.setState({ ensAddress: address, error: '', ensError: '' }) }} updateEnsResolutionError={(message) => this.setState({ ensError: message })} + value={this.state.ethAddress || ''} /> ) } From 21875d1dd3ec1d0c82b11fc0f09a5c7f1ad66a4f Mon Sep 17 00:00:00 2001 From: David Walsh Date: Wed, 21 Oct 2020 12:55:03 -0500 Subject: [PATCH 2/5] Fix for tests --- .../send/send-content/add-recipient/ens-input.component.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.component.js b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js index acd953116..1af36fca6 100644 --- a/ui/app/pages/send/send-content/add-recipient/ens-input.component.js +++ b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js @@ -63,8 +63,8 @@ export default class EnsInput extends Component { value, } = this.props - // Update the value in state if its prop value changes - if (input !== value) { + // Set the value of our input based on QR code provided by parent + if (input !== value && prevProps.value != value) { this.setState({ input: value }) } From 6704aab16cba77f9efd21f2e8559515906683253 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Wed, 21 Oct 2020 13:22:00 -0500 Subject: [PATCH 3/5] Lint --- .../send/send-content/add-recipient/ens-input.component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.component.js b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js index 1af36fca6..f6fdef0e6 100644 --- a/ui/app/pages/send/send-content/add-recipient/ens-input.component.js +++ b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js @@ -64,7 +64,7 @@ export default class EnsInput extends Component { } = this.props // Set the value of our input based on QR code provided by parent - if (input !== value && prevProps.value != value) { + if (input !== value && prevProps.value !== value) { this.setState({ input: value }) } From cdef338c85e3879a97af90f2119351700eaf784e Mon Sep 17 00:00:00 2001 From: David Walsh Date: Thu, 22 Oct 2020 07:50:15 -0500 Subject: [PATCH 4/5] Prevent multiple state changes --- .../add-recipient/ens-input.component.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.component.js b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js index f6fdef0e6..0ed9833a4 100644 --- a/ui/app/pages/send/send-content/add-recipient/ens-input.component.js +++ b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js @@ -63,17 +63,21 @@ export default class EnsInput extends Component { value, } = this.props + let newValue + // Set the value of our input based on QR code provided by parent if (input !== value && prevProps.value !== value) { - this.setState({ input: value }) + newValue = value } - // If an address is sent without a nickname, meaning not from ENS or from - // the user's own accounts, a default of a one-space string is used. if (prevProps.network !== network) { const provider = global.ethereumProvider this.ens = new ENS({ provider, network }) - this.onChange({ target: { value: input } }) + newValue = input + } + + if (newValue !== undefined) { + this.onChange({ target: { value: newValue } }) } } From 9c25775b69ab505f61397f7490188b8ac766749b Mon Sep 17 00:00:00 2001 From: David Walsh Date: Thu, 22 Oct 2020 10:08:54 -0500 Subject: [PATCH 5/5] Prevent conflicting values when network change and QR code in same render --- .../send/send-content/add-recipient/ens-input.component.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.component.js b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js index 0ed9833a4..5c02e2654 100644 --- a/ui/app/pages/send/send-content/add-recipient/ens-input.component.js +++ b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js @@ -66,14 +66,17 @@ export default class EnsInput extends Component { let newValue // Set the value of our input based on QR code provided by parent - if (input !== value && prevProps.value !== value) { + const newProvidedValue = input !== value && prevProps.value !== value + if (newProvidedValue) { newValue = value } if (prevProps.network !== network) { const provider = global.ethereumProvider this.ens = new ENS({ provider, network }) - newValue = input + if (!newProvidedValue) { + newValue = input + } } if (newValue !== undefined) {