aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/send
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/send')
-rw-r--r--ui/app/components/send/account-list-item.js74
-rw-r--r--ui/app/components/send/currency-display.js65
-rw-r--r--ui/app/components/send/from-dropdown.js72
-rw-r--r--ui/app/components/send/gas-tooltip.js106
-rw-r--r--ui/app/components/send/memo-textarea.js33
-rw-r--r--ui/app/components/send/send-constants.js33
-rw-r--r--ui/app/components/send/send-utils.js78
-rw-r--r--ui/app/components/send/send-v2-container.js89
-rw-r--r--ui/app/components/send/to-autocomplete.js2
9 files changed, 50 insertions, 502 deletions
diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js
deleted file mode 100644
index b5e604a6e..000000000
--- a/ui/app/components/send/account-list-item.js
+++ /dev/null
@@ -1,74 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const { checksumAddress } = require('../../util')
-const Identicon = require('../identicon')
-const CurrencyDisplay = require('./currency-display')
-const { conversionRateSelector, getCurrentCurrency } = require('../../selectors')
-
-inherits(AccountListItem, Component)
-function AccountListItem () {
- Component.call(this)
-}
-
-function mapStateToProps (state) {
- return {
- conversionRate: conversionRateSelector(state),
- currentCurrency: getCurrentCurrency(state),
- }
-}
-
-module.exports = connect(mapStateToProps)(AccountListItem)
-
-AccountListItem.prototype.render = function () {
- const {
- className,
- account,
- handleClick,
- icon = null,
- conversionRate,
- currentCurrency,
- displayBalance = true,
- displayAddress = false,
- } = this.props
-
- const { name, address, balance } = account || {}
-
- return h('div.account-list-item', {
- className,
- onClick: () => handleClick({ name, address, balance }),
- }, [
-
- h('div.account-list-item__top-row', {}, [
-
- h(
- Identicon,
- {
- address,
- diameter: 18,
- className: 'account-list-item__identicon',
- },
- ),
-
- h('div.account-list-item__account-name', {}, name || address),
-
- icon && h('div.account-list-item__icon', [icon]),
-
- ]),
-
- displayAddress && name && h('div.account-list-item__account-address', checksumAddress(address)),
-
- displayBalance && h(CurrencyDisplay, {
- primaryCurrency: 'ETH',
- convertedCurrency: currentCurrency,
- value: balance,
- conversionRate,
- readOnly: true,
- className: 'account-list-item__account-balances',
- primaryBalanceClassName: 'account-list-item__account-primary-balance',
- convertedBalanceClassName: 'account-list-item__account-secondary-balance',
- }, name),
-
- ])
-}
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 90fb2b66c..3bc9ad226 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -1,10 +1,10 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
-const CurrencyInput = require('../currency-input')
const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
const currencyFormatter = require('currency-formatter')
const currencies = require('currency-formatter/currencies')
+const ethUtil = require('ethereumjs-util')
module.exports = CurrencyDisplay
@@ -21,36 +21,51 @@ function toHexWei (value) {
})
}
+CurrencyDisplay.prototype.componentWillMount = function () {
+ this.setState({
+ valueToRender: this.getValueToRender(this.props),
+ })
+}
+
+CurrencyDisplay.prototype.componentWillReceiveProps = function (nextProps) {
+ const currentValueToRender = this.getValueToRender(this.props)
+ const newValueToRender = this.getValueToRender(nextProps)
+ if (currentValueToRender !== newValueToRender) {
+ this.setState({
+ valueToRender: newValueToRender,
+ })
+ }
+}
+
CurrencyDisplay.prototype.getAmount = function (value) {
const { selectedToken } = this.props
const { decimals } = selectedToken || {}
const multiplier = Math.pow(10, Number(decimals || 0))
- const sendAmount = multiplyCurrencies(value, multiplier, {toNumericBase: 'hex'})
+ const sendAmount = multiplyCurrencies(value || '0', multiplier, {toNumericBase: 'hex'})
return selectedToken
? sendAmount
: toHexWei(value)
}
-CurrencyDisplay.prototype.getValueToRender = function () {
- const { selectedToken, conversionRate, value } = this.props
-
+CurrencyDisplay.prototype.getValueToRender = function ({ selectedToken, conversionRate, value, readOnly }) {
+ if (value === '0x0') return readOnly ? '0' : ''
const { decimals, symbol } = selectedToken || {}
const multiplier = Math.pow(10, Number(decimals || 0))
return selectedToken
- ? conversionUtil(value, {
+ ? conversionUtil(ethUtil.addHexPrefix(value), {
fromNumericBase: 'hex',
toCurrency: symbol,
conversionRate: multiplier,
invertConversionRate: true,
})
- : conversionUtil(value, {
+ : conversionUtil(ethUtil.addHexPrefix(value), {
fromNumericBase: 'hex',
toNumericBase: 'dec',
fromDenomination: 'WEI',
- numberOfDecimals: 6,
+ numberOfDecimals: 9,
conversionRate,
})
}
@@ -76,6 +91,18 @@ CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValu
: convertedValue
}
+CurrencyDisplay.prototype.handleChange = function (newVal) {
+ this.setState({ valueToRender: newVal })
+ this.props.onChange(this.getAmount(newVal))
+}
+
+CurrencyDisplay.prototype.getInputWidth = function (valueToRender, readOnly) {
+ const valueString = String(valueToRender)
+ const valueLength = valueString.length || 1
+ const decimalPointDeficit = valueString.match(/\./) ? -0.5 : 0
+ return (valueLength + decimalPointDeficit + 0.75) + 'ch'
+}
+
CurrencyDisplay.prototype.render = function () {
const {
className = 'currency-display',
@@ -85,10 +112,10 @@ CurrencyDisplay.prototype.render = function () {
convertedCurrency,
readOnly = false,
inError = false,
- handleChange,
+ onBlur,
} = this.props
+ const { valueToRender } = this.state
- const valueToRender = this.getValueToRender()
const convertedValueToRender = this.getConvertedValueToRender(valueToRender)
return h('div', {
@@ -96,24 +123,30 @@ CurrencyDisplay.prototype.render = function () {
style: {
borderColor: inError ? 'red' : null,
},
- onClick: () => this.currencyInput && this.currencyInput.focus(),
+ onClick: () => {
+ this.currencyInput && this.currencyInput.focus()
+ },
}, [
h('div.currency-display__primary-row', [
h('div.currency-display__input-wrapper', [
- h(readOnly ? 'input' : CurrencyInput, {
+ h('input', {
className: primaryBalanceClassName,
value: `${valueToRender}`,
placeholder: '0',
+ type: 'number',
readOnly,
...(!readOnly ? {
- onInputChange: newValue => {
- handleChange(this.getAmount(newValue))
- },
- inputRef: input => { this.currencyInput = input },
+ onChange: e => this.handleChange(e.target.value),
+ onBlur: () => onBlur(this.getAmount(valueToRender)),
} : {}),
+ ref: input => { this.currencyInput = input },
+ style: {
+ width: this.getInputWidth(valueToRender, readOnly),
+ },
+ min: 0,
}),
h('span.currency-display__currency-symbol', primaryCurrency),
diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js
deleted file mode 100644
index 0686fbe73..000000000
--- a/ui/app/components/send/from-dropdown.js
+++ /dev/null
@@ -1,72 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const AccountListItem = require('./account-list-item')
-
-module.exports = FromDropdown
-
-inherits(FromDropdown, Component)
-function FromDropdown () {
- Component.call(this)
-}
-
-FromDropdown.prototype.getListItemIcon = function (currentAccount, selectedAccount) {
- const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
-
- return currentAccount.address === selectedAccount.address
- ? listItemIcon
- : null
-}
-
-FromDropdown.prototype.renderDropdown = function () {
- const {
- accounts,
- selectedAccount,
- closeDropdown,
- onSelect,
- } = this.props
-
- return h('div', {}, [
-
- h('div.send-v2__from-dropdown__close-area', {
- onClick: closeDropdown,
- }),
-
- h('div.send-v2__from-dropdown__list', {}, [
-
- ...accounts.map(account => h(AccountListItem, {
- className: 'account-list-item__dropdown',
- account,
- handleClick: () => {
- onSelect(account)
- closeDropdown()
- },
- icon: this.getListItemIcon(account, selectedAccount),
- })),
-
- ]),
-
- ])
-}
-
-FromDropdown.prototype.render = function () {
- const {
- selectedAccount,
- openDropdown,
- dropdownOpen,
- } = this.props
-
- return h('div.send-v2__from-dropdown', {}, [
-
- h(AccountListItem, {
- account: selectedAccount,
- handleClick: openDropdown,
- icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } }),
- }),
-
- dropdownOpen && this.renderDropdown(),
-
- ])
-
-}
-
diff --git a/ui/app/components/send/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js
deleted file mode 100644
index 62cdc1cad..000000000
--- a/ui/app/components/send/gas-tooltip.js
+++ /dev/null
@@ -1,106 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const InputNumber = require('../input-number.js')
-const connect = require('react-redux').connect
-
-GasTooltip.contextTypes = {
- t: PropTypes.func,
-}
-
-module.exports = connect()(GasTooltip)
-
-
-inherits(GasTooltip, Component)
-function GasTooltip () {
- Component.call(this)
- this.state = {
- gasLimit: 0,
- gasPrice: 0,
- }
-
- this.updateGasPrice = this.updateGasPrice.bind(this)
- this.updateGasLimit = this.updateGasLimit.bind(this)
- this.onClose = this.onClose.bind(this)
-}
-
-GasTooltip.prototype.componentWillMount = function () {
- const { gasPrice = 0, gasLimit = 0} = this.props
-
- this.setState({
- gasPrice: parseInt(gasPrice, 16) / 1000000000,
- gasLimit: parseInt(gasLimit, 16),
- })
-}
-
-GasTooltip.prototype.updateGasPrice = function (newPrice) {
- const { onFeeChange } = this.props
- const { gasLimit } = this.state
-
- this.setState({ gasPrice: newPrice })
- onFeeChange({
- gasLimit: gasLimit.toString(16),
- gasPrice: (newPrice * 1000000000).toString(16),
- })
-}
-
-GasTooltip.prototype.updateGasLimit = function (newLimit) {
- const { onFeeChange } = this.props
- const { gasPrice } = this.state
-
- this.setState({ gasLimit: newLimit })
- onFeeChange({
- gasLimit: newLimit.toString(16),
- gasPrice: (gasPrice * 1000000000).toString(16),
- })
-}
-
-GasTooltip.prototype.onClose = function (e) {
- e.stopPropagation()
- this.props.onClose()
-}
-
-GasTooltip.prototype.render = function () {
- const { gasPrice, gasLimit } = this.state
-
- return h('div.gas-tooltip', {}, [
- h('div.gas-tooltip-close-area', {
- onClick: this.onClose,
- }),
- h('div.customize-gas-tooltip-container', {}, [
- h('div.customize-gas-tooltip', {}, [
- h('div.gas-tooltip-header.gas-tooltip-label', {}, ['Customize Gas']),
- h('div.gas-tooltip-input-label', {}, [
- h('span.gas-tooltip-label', {}, ['Gas Price']),
- h('i.fa.fa-info-circle'),
- ]),
- h(InputNumber, {
- unitLabel: 'GWEI',
- step: 1,
- min: 0,
- placeholder: '0',
- value: gasPrice,
- onChange: (newPrice) => this.updateGasPrice(newPrice),
- }),
- h('div.gas-tooltip-input-label', {
- style: {
- 'marginTop': '81px',
- },
- }, [
- h('span.gas-tooltip-label', {}, [this.context.t('gasLimit')]),
- h('i.fa.fa-info-circle'),
- ]),
- h(InputNumber, {
- unitLabel: 'UNITS',
- step: 1,
- min: 0,
- placeholder: '0',
- value: gasLimit,
- onChange: (newLimit) => this.updateGasLimit(newLimit),
- }),
- ]),
- h('div.gas-tooltip-arrow', {}),
- ]),
- ])
-}
diff --git a/ui/app/components/send/memo-textarea.js b/ui/app/components/send/memo-textarea.js
deleted file mode 100644
index f4bb24bf8..000000000
--- a/ui/app/components/send/memo-textarea.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// const Component = require('react').Component
-// const h = require('react-hyperscript')
-// const inherits = require('util').inherits
-// const Identicon = require('../identicon')
-
-// module.exports = MemoTextArea
-
-// inherits(MemoTextArea, Component)
-// function MemoTextArea () {
-// Component.call(this)
-// }
-
-// MemoTextArea.prototype.render = function () {
-// const { memo, identities, onChange } = this.props
-
-// return h('div.send-v2__memo-text-area', [
-
-// h('textarea.send-v2__memo-text-area__input', {
-// placeholder: 'Optional',
-// value: memo,
-// onChange,
-// // onBlur: () => {
-// // this.setErrorsFor('memo')
-// // },
-// onFocus: event => {
-// // this.clearErrorsFor('memo')
-// },
-// }),
-
-// ])
-
-// }
-
diff --git a/ui/app/components/send/send-constants.js b/ui/app/components/send/send-constants.js
deleted file mode 100644
index 5d89c74aa..000000000
--- a/ui/app/components/send/send-constants.js
+++ /dev/null
@@ -1,33 +0,0 @@
-const ethUtil = require('ethereumjs-util')
-const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
-
-const MIN_GAS_PRICE_DEC = '0'
-const MIN_GAS_PRICE_HEX = (parseInt(MIN_GAS_PRICE_DEC)).toString(16)
-const MIN_GAS_LIMIT_DEC = '21000'
-const MIN_GAS_LIMIT_HEX = (parseInt(MIN_GAS_LIMIT_DEC)).toString(16)
-
-const MIN_GAS_PRICE_GWEI = ethUtil.addHexPrefix(conversionUtil(MIN_GAS_PRICE_HEX, {
- fromDenomination: 'WEI',
- toDenomination: 'GWEI',
- fromNumericBase: 'hex',
- toNumericBase: 'hex',
- numberOfDecimals: 1,
-}))
-
-const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT_HEX, MIN_GAS_PRICE_HEX, {
- toNumericBase: 'hex',
- multiplicandBase: 16,
- multiplierBase: 16,
-})
-
-const TOKEN_TRANSFER_FUNCTION_SIGNATURE = '0xa9059cbb'
-
-module.exports = {
- MIN_GAS_PRICE_GWEI,
- MIN_GAS_PRICE_HEX,
- MIN_GAS_PRICE_DEC,
- MIN_GAS_LIMIT_HEX,
- MIN_GAS_LIMIT_DEC,
- MIN_GAS_TOTAL,
- TOKEN_TRANSFER_FUNCTION_SIGNATURE,
-}
diff --git a/ui/app/components/send/send-utils.js b/ui/app/components/send/send-utils.js
deleted file mode 100644
index 71bfb2668..000000000
--- a/ui/app/components/send/send-utils.js
+++ /dev/null
@@ -1,78 +0,0 @@
-const {
- addCurrencies,
- conversionUtil,
- conversionGTE,
- multiplyCurrencies,
-} = require('../../conversion-util')
-const {
- calcTokenAmount,
-} = require('../../token-util')
-
-function isBalanceSufficient ({
- amount = '0x0',
- gasTotal = '0x0',
- balance,
- primaryCurrency,
- amountConversionRate,
- conversionRate,
-}) {
- const totalAmount = addCurrencies(amount, gasTotal, {
- aBase: 16,
- bBase: 16,
- toNumericBase: 'hex',
- })
-
- const balanceIsSufficient = conversionGTE(
- {
- value: balance,
- fromNumericBase: 'hex',
- fromCurrency: primaryCurrency,
- conversionRate,
- },
- {
- value: totalAmount,
- fromNumericBase: 'hex',
- conversionRate: amountConversionRate || conversionRate,
- fromCurrency: primaryCurrency,
- },
- )
-
- return balanceIsSufficient
-}
-
-function isTokenBalanceSufficient ({
- amount = '0x0',
- tokenBalance,
- decimals,
-}) {
- const amountInDec = conversionUtil(amount, {
- fromNumericBase: 'hex',
- })
-
- const tokenBalanceIsSufficient = conversionGTE(
- {
- value: tokenBalance,
- fromNumericBase: 'dec',
- },
- {
- value: calcTokenAmount(amountInDec, decimals),
- fromNumericBase: 'dec',
- },
- )
-
- return tokenBalanceIsSufficient
-}
-
-function getGasTotal (gasLimit, gasPrice) {
- return multiplyCurrencies(gasLimit, gasPrice, {
- toNumericBase: 'hex',
- multiplicandBase: 16,
- multiplierBase: 16,
- })
-}
-
-module.exports = {
- getGasTotal,
- isBalanceSufficient,
- isTokenBalanceSufficient,
-}
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
deleted file mode 100644
index adfc91240..000000000
--- a/ui/app/components/send/send-v2-container.js
+++ /dev/null
@@ -1,89 +0,0 @@
-const connect = require('react-redux').connect
-const actions = require('../../actions')
-const abi = require('ethereumjs-abi')
-const SendEther = require('../../send-v2')
-const { withRouter } = require('react-router-dom')
-const { compose } = require('recompose')
-
-const {
- accountsWithSendEtherInfoSelector,
- getCurrentAccountWithSendEtherInfo,
- conversionRateSelector,
- getSelectedToken,
- getSelectedAddress,
- getAddressBook,
- getSendFrom,
- getCurrentCurrency,
- getSelectedTokenToFiatRate,
- getSelectedTokenContract,
-} = require('../../selectors')
-
-module.exports = compose(
- withRouter,
- connect(mapStateToProps, mapDispatchToProps)
-)(SendEther)
-
-function mapStateToProps (state) {
- const fromAccounts = accountsWithSendEtherInfoSelector(state)
- const selectedAddress = getSelectedAddress(state)
- const selectedToken = getSelectedToken(state)
- const conversionRate = conversionRateSelector(state)
-
- let data
- let primaryCurrency
- let tokenToFiatRate
- if (selectedToken) {
- data = Array.prototype.map.call(
- abi.rawEncode(['address', 'uint256'], [selectedAddress, '0x0']),
- x => ('00' + x.toString(16)).slice(-2)
- ).join('')
-
- primaryCurrency = selectedToken.symbol
-
- tokenToFiatRate = getSelectedTokenToFiatRate(state)
- }
-
- return {
- ...state.metamask.send,
- from: getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state),
- fromAccounts,
- toAccounts: [...fromAccounts, ...getAddressBook(state)],
- conversionRate,
- selectedToken,
- primaryCurrency,
- convertedCurrency: getCurrentCurrency(state),
- data,
- selectedAddress,
- amountConversionRate: selectedToken ? tokenToFiatRate : conversionRate,
- tokenContract: getSelectedTokenContract(state),
- unapprovedTxs: state.metamask.unapprovedTxs,
- network: state.metamask.network,
- }
-}
-
-function mapDispatchToProps (dispatch) {
- return {
- showCustomizeGasModal: () => dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })),
- estimateGas: params => dispatch(actions.estimateGas(params)),
- getGasPrice: () => dispatch(actions.getGasPrice()),
- signTokenTx: (tokenAddress, toAddress, amount, txData) => (
- dispatch(actions.signTokenTx(tokenAddress, toAddress, amount, txData))
- ),
- signTx: txParams => dispatch(actions.signTx(txParams)),
- updateAndApproveTx: txParams => dispatch(actions.updateAndApproveTx(txParams)),
- updateTx: txData => dispatch(actions.updateTransaction(txData)),
- setSelectedAddress: address => dispatch(actions.setSelectedAddress(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, nickname) => dispatch(actions.updateSendTo(newTo, nickname)),
- updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
- updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)),
- updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
- clearSend: () => dispatch(actions.clearSend()),
- setMaxModeTo: bool => dispatch(actions.setMaxModeTo(bool)),
- }
-}
diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
index 5ea17f9a2..df74ef194 100644
--- a/ui/app/components/send/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete.js
@@ -2,7 +2,7 @@ const Component = require('react').Component
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const inherits = require('util').inherits
-const AccountListItem = require('./account-list-item')
+const AccountListItem = require('../send_/account-list-item/account-list-item.component').default
const connect = require('react-redux').connect
ToAutoComplete.contextTypes = {
generated by cgit v1.2.3 (git 2.25.1) at 2024-08-25 07:10:21 +0800