1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Use ens-input component in send-v2 to allow sending to ens names.

This commit is contained in:
Dan 2018-03-26 11:00:54 -02:30
parent dc78594c3a
commit a109a774a5
6 changed files with 32 additions and 43 deletions

View File

@ -21,6 +21,8 @@ global.ethQuery = {
sendTransaction: () => {},
}
global.ethereumProvider = {}
async function runSendFlowTest(assert, done) {
console.log('*** start runSendFlowTest')
const selectState = await queryAsync($, 'select')

View File

@ -694,10 +694,10 @@ function updateSendFrom (from) {
}
}
function updateSendTo (to) {
function updateSendTo (to, nickname = '') {
return {
type: actions.UPDATE_SEND_TO,
value: to,
value: { to, nickname },
}
}

View File

@ -9,6 +9,7 @@ const networkMap = require('ethjs-ens/lib/network-map.json')
const ensRE = /.+\..+$/
const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
const t = require('../../i18n')
const ToAutoComplete = require('./send/to-autocomplete')
module.exports = EnsInput
@ -22,12 +23,14 @@ EnsInput.prototype.render = function () {
const props = this.props
const opts = extend(props, {
list: 'addresses',
onChange: () => {
onChange: (recipient) => {
const network = this.props.network
const networkHasEnsSupport = getNetworkEnsSupport(network)
if (!networkHasEnsSupport) return
const recipient = document.querySelector('input[name="address"]').value
props.onChange(recipient)
if (recipient.match(ensRE) === null) {
return this.setState({
loadingEns: false,
@ -39,34 +42,13 @@ EnsInput.prototype.render = function () {
this.setState({
loadingEns: true,
})
this.checkName()
this.checkName(recipient)
},
})
return h('div', {
style: { width: '100%' },
style: { width: '100%', position: 'relative' },
}, [
h('input.large-input.send-screen-input', opts),
// The address book functionality.
h('datalist#addresses',
[
// Corresponds to the addresses owned.
Object.keys(props.identities).map((key) => {
const identity = props.identities[key]
return h('option', {
value: identity.address,
label: identity.name,
key: identity.address,
})
}),
// Corresponds to previously sent-to addresses.
props.addressBook.map((identity) => {
return h('option', {
value: identity.address,
label: identity.name,
key: identity.address,
})
}),
]),
h(ToAutoComplete, { ...opts }),
this.ensIcon(),
])
}
@ -83,8 +65,7 @@ EnsInput.prototype.componentDidMount = function () {
}
}
EnsInput.prototype.lookupEnsName = function () {
const recipient = document.querySelector('input[name="address"]').value
EnsInput.prototype.lookupEnsName = function (recipient) {
const { ensResolution } = this.state
log.info(`ENS attempting to resolve name: ${recipient}`)
@ -130,8 +111,8 @@ EnsInput.prototype.ensIcon = function (recipient) {
title: hoverText,
style: {
position: 'absolute',
padding: '9px',
transform: 'translatex(-40px)',
top: '16px',
left: '-25px',
},
}, this.ensIconContents(recipient))
}

View File

@ -69,13 +69,13 @@ function mapDispatchToProps (dispatch) {
updateAndApproveTx: txParams => dispatch(actions.updateAndApproveTx(txParams)),
updateTx: txData => dispatch(actions.updateTransaction(txData)),
setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)),
addToAddressBook: address => dispatch(actions.addToAddressBook(address)),
addToAddressBook: (address, nickname) => dispatch(actions.addToAddressBook(address, nickname)),
updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)),
updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)),
updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)),
updateSendTokenBalance: tokenBalance => dispatch(actions.updateSendTokenBalance(tokenBalance)),
updateSendFrom: newFrom => dispatch(actions.updateSendFrom(newFrom)),
updateSendTo: newTo => dispatch(actions.updateSendTo(newTo)),
updateSendTo: (newTo, nickname) => dispatch(actions.updateSendTo(newTo, nickname)),
updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)),
updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),

View File

@ -39,6 +39,7 @@ function reduceMetamask (state, action) {
maxModeOn: false,
editingTransactionId: null,
forceGasMin: null,
toNickname: '',
},
coinOptions: {},
useBlockie: false,
@ -238,7 +239,8 @@ function reduceMetamask (state, action) {
return extend(metamaskState, {
send: {
...metamaskState.send,
to: action.value,
to: action.value.to,
toNickname: action.value.nickname,
},
})

View File

@ -7,7 +7,7 @@ const ethAbi = require('ethereumjs-abi')
const ethUtil = require('ethereumjs-util')
const FromDropdown = require('./components/send/from-dropdown')
const ToAutoComplete = require('./components/send/to-autocomplete')
const EnsInput = require('./components/ens-input')
const CurrencyDisplay = require('./components/send/currency-display')
const MemoTextArea = require('./components/send/memo-textarea')
const GasFeeDisplay = require('./components/send/gas-fee-display-v2')
@ -253,7 +253,7 @@ SendTransactionScreen.prototype.renderFromRow = function () {
])
}
SendTransactionScreen.prototype.handleToChange = function (to) {
SendTransactionScreen.prototype.handleToChange = function (to, nickname = '') {
const {
updateSendTo,
updateSendErrors,
@ -269,12 +269,12 @@ SendTransactionScreen.prototype.handleToChange = function (to) {
toError = t('fromToSame')
}
updateSendTo(to)
updateSendTo(to, nickname)
updateSendErrors({ to: toError })
}
SendTransactionScreen.prototype.renderToRow = function () {
const { toAccounts, errors, to } = this.props
const { toAccounts, errors, to, network } = this.props
const { toDropdownOpen } = this.state
@ -289,7 +289,10 @@ SendTransactionScreen.prototype.renderToRow = function () {
]),
h('div.send-v2__form-field', [
h(ToAutoComplete, {
h(EnsInput, {
name: 'address',
placeholder: 'Recipient Address',
network,
to,
accounts: Object.entries(toAccounts).map(([key, account]) => account),
dropdownOpen: toDropdownOpen,
@ -538,11 +541,11 @@ SendTransactionScreen.prototype.render = function () {
)
}
SendTransactionScreen.prototype.addToAddressBookIfNew = function (newAddress) {
SendTransactionScreen.prototype.addToAddressBookIfNew = function (newAddress, nickname = '') {
const { toAccounts, addToAddressBook } = this.props
if (!toAccounts.find(({ address }) => newAddress === address)) {
// TODO: nickname, i.e. addToAddressBook(recipient, nickname)
addToAddressBook(newAddress)
addToAddressBook(newAddress, nickname)
}
}
@ -603,6 +606,7 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
updateTx,
selectedToken,
editingTransactionId,
toNickname,
errors: { amount: amountError, to: toError },
} = this.props
@ -612,7 +616,7 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
return
}
this.addToAddressBookIfNew(to)
this.addToAddressBookIfNew(to, toNickname)
if (editingTransactionId) {
const editedTx = this.getEditedTx()