diff options
Diffstat (limited to 'ui')
8 files changed, 112 insertions, 34 deletions
diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index 01f751b69..59c6842ef 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -2,8 +2,10 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const { + addCurrencies, conversionGTE, conversionLTE, + subtractCurrencies, } = require('../conversion-util') module.exports = InputNumber @@ -49,11 +51,7 @@ InputNumber.prototype.setValue = function (newValue) { } InputNumber.prototype.render = function () { -<<<<<<< HEAD const { unitLabel, step = 1, placeholder, value } = this.props -======= - const { unitLabel, step = 1, placeholder, value = 0, min = -1, max = Infinity } = this.props ->>>>>>> Refactor and redesign confirm transaction views return h('div.customize-gas-input-wrapper', {}, [ h('input', { @@ -69,19 +67,11 @@ InputNumber.prototype.render = function () { h('span.gas-tooltip-input-detail', {}, [unitLabel]), h('div.gas-tooltip-input-arrows', {}, [ h('i.fa.fa-angle-up', { -<<<<<<< HEAD onClick: () => this.setValue(addCurrencies(value, step, { toNumericBase: 'dec' })), }), h('i.fa.fa-angle-down', { style: { cursor: 'pointer' }, onClick: () => this.setValue(subtractCurrencies(value, step, { toNumericBase: 'dec' })), -======= - onClick: () => this.setValue(Math.min(+value + step, max)), - }), - h('i.fa.fa-angle-down', { - style: { cursor: 'pointer' }, - onClick: () => this.setValue(Math.max(+value - step, min)), ->>>>>>> Refactor and redesign confirm transaction views }), ]), ]) diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js index dfbbd0177..1a399a464 100644 --- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -18,6 +18,7 @@ export default class ConfirmTransactionBase extends Component { // Redux props txData: PropTypes.object, tokenData: PropTypes.object, + methodData: PropTypes.object, tokenProps: PropTypes.object, isTxReprice: PropTypes.bool, nonce: PropTypes.string, @@ -245,7 +246,7 @@ export default class ConfirmTransactionBase extends Component { data, } = {}, } = {}, - tokenData: { + methodData: { name, params, } = {}, @@ -266,7 +267,12 @@ export default class ConfirmTransactionBase extends Component { </span> </div> <div className="confirm-page-container-content__data-box"> - { JSON.stringify(params, null, 2) } + <div className="confirm-page-container-content__data-field-label"> + { `${t('parameters')}:` } + </div> + <div> + <pre>{ JSON.stringify(params, null, 2) }</pre> + </div> </div> <div className="confirm-page-container-content__data-box-label"> {`${t('hexData')}:`} @@ -318,7 +324,7 @@ export default class ConfirmTransactionBase extends Component { fromAddress, toName, toAddress, - tokenData, + methodData, ethTransactionAmount, fiatTransactionAmount, valid: propsValid, @@ -336,7 +342,7 @@ export default class ConfirmTransactionBase extends Component { warning, } = this.props - const { name } = tokenData + const { name } = methodData const fiatConvertedAmount = formatCurrency(fiatTransactionAmount, currentCurrency) const { valid, errorMessage } = this.getError() diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js index 19c39aed9..4f1fb86c1 100644 --- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js +++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js @@ -21,6 +21,7 @@ const mapStateToProps = (state, props) => { fiatTransactionTotal, hexGasTotal, tokenData, + methodData, txData, tokenProps, nonce, @@ -60,6 +61,7 @@ const mapStateToProps = (state, props) => { hexGasTotal, txData, tokenData, + methodData, tokenProps, isTxReprice, currentCurrency, diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js index 9ec0fc623..db28d0bad 100644 --- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js +++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js @@ -11,7 +11,7 @@ import { CONFIRM_TOKEN_METHOD_PATH, SIGNATURE_REQUEST_PATH, } from '../../../routes' -import { isConfirmDeployContract, getTokenData } from './confirm-transaction-switch.util' +import { isConfirmDeployContract } from './confirm-transaction-switch.util' import { TOKEN_METHOD_TRANSFER, TOKEN_METHOD_APPROVE } from './confirm-transaction-switch.constants' export default class ConfirmTransactionSwitch extends Component { @@ -19,19 +19,29 @@ export default class ConfirmTransactionSwitch extends Component { confirmTransaction: PropTypes.object, } - redirectToTransaction (txData) { - const { id, txParams: { data } } = txData + redirectToTransaction () { + const { + confirmTransaction: { + txData, + methodData: { name }, + fetchingMethodData, + }, + } = this.props + const { id } = txData if (isConfirmDeployContract(txData)) { const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_DEPLOY_CONTRACT_PATH}` return <Redirect to={{ pathname }} /> } - if (data) { - const tokenData = getTokenData(data) - const { name: tokenMethodName } = tokenData || {} + if (fetchingMethodData) { + return <Loading /> + } + + if (name) { + const methodName = name.toLowerCase() - switch (tokenMethodName) { + switch (methodName.toLowerCase()) { case TOKEN_METHOD_TRANSFER: { const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_TOKEN_PATH}` return <Redirect to={{ pathname }} /> @@ -55,7 +65,7 @@ export default class ConfirmTransactionSwitch extends Component { const { confirmTransaction: { txData } } = this.props if (txData.txParams) { - return this.redirectToTransaction(txData) + return this.redirectToTransaction() } else if (txData.msgParams) { const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${txData.id}${SIGNATURE_REQUEST_PATH}` return <Redirect to={{ pathname }} /> diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js index dd1dec6ae..536aa5212 100644 --- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js +++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js @@ -1,12 +1,4 @@ -import abi from 'human-standard-token-abi' -import abiDecoder from 'abi-decoder' -abiDecoder.addABI(abi) - export function isConfirmDeployContract (txData = {}) { const { txParams = {} } = txData return !txParams.to } - -export function getTokenData (data = {}) { - return abiDecoder.decodeMethod(data) -} diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js index d4581e8ed..219f5b49a 100644 --- a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js +++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js @@ -85,8 +85,12 @@ export default class ConfirmTransaction extends Component { } } else if (unconfirmedTransactions.length) { const totalUnconfirmed = unconfirmedTransactions.length - const transactionId = unconfirmedTransactions[totalUnconfirmed - 1].id - setTransactionToConfirm(transactionId) + const transaction = unconfirmedTransactions[totalUnconfirmed - 1] + const { id: transactionId, loadingDefaults } = transaction + + if (!loadingDefaults) { + setTransactionToConfirm(transactionId) + } } } diff --git a/ui/app/ducks/confirm-transaction.duck.js b/ui/app/ducks/confirm-transaction.duck.js index cb3582ec3..be0888dc1 100644 --- a/ui/app/ducks/confirm-transaction.duck.js +++ b/ui/app/ducks/confirm-transaction.duck.js @@ -6,6 +6,7 @@ import { import { getTokenData, + getMethodData, getTransactionAmount, getTransactionFee, getHexGasTotal, @@ -25,6 +26,8 @@ const UPDATE_TX_DATA = createActionType('UPDATE_TX_DATA') const CLEAR_TX_DATA = createActionType('CLEAR_TX_DATA') const UPDATE_TOKEN_DATA = createActionType('UPDATE_TOKEN_DATA') const CLEAR_TOKEN_DATA = createActionType('CLEAR_TOKEN_DATA') +const UPDATE_METHOD_DATA = createActionType('UPDATE_METHOD_DATA') +const CLEAR_METHOD_DATA = createActionType('CLEAR_METHOD_DATA') const CLEAR_CONFIRM_TRANSACTION = createActionType('CLEAR_CONFIRM_TRANSACTION') const UPDATE_TRANSACTION_AMOUNTS = createActionType('UPDATE_TRANSACTION_AMOUNTS') const UPDATE_TRANSACTION_FEES = createActionType('UPDATE_TRANSACTION_FEES') @@ -32,11 +35,14 @@ const UPDATE_TRANSACTION_TOTALS = createActionType('UPDATE_TRANSACTION_TOTALS') const UPDATE_HEX_GAS_TOTAL = createActionType('UPDATE_HEX_GAS_TOTAL') const UPDATE_TOKEN_PROPS = createActionType('UPDATE_TOKEN_PROPS') const UPDATE_NONCE = createActionType('UPDATE_NONCE') +const FETCH_METHOD_DATA_START = createActionType('FETCH_METHOD_DATA_START') +const FETCH_METHOD_DATA_END = createActionType('FETCH_METHOD_DATA_END') // Initial state const initState = { txData: {}, tokenData: {}, + methodData: {}, tokenProps: { tokenDecimals: '', tokenSymbol: '', @@ -49,6 +55,7 @@ const initState = { ethTransactionTotal: '', hexGasTotal: '', nonce: '', + fetchingMethodData: false, } // Reducer @@ -78,6 +85,18 @@ export default function reducer ({ confirmTransaction: confirmState = initState ...confirmState, tokenData: {}, } + case UPDATE_METHOD_DATA: + return { + ...confirmState, + methodData: { + ...action.payload, + }, + } + case CLEAR_METHOD_DATA: + return { + ...confirmState, + methodData: {}, + } case UPDATE_TRANSACTION_AMOUNTS: const { fiatTransactionAmount, ethTransactionAmount } = action.payload return { @@ -119,6 +138,16 @@ export default function reducer ({ confirmTransaction: confirmState = initState ...confirmState, nonce: action.payload, } + case FETCH_METHOD_DATA_START: + return { + ...confirmState, + fetchingMethodData: true, + } + case FETCH_METHOD_DATA_END: + return { + ...confirmState, + fetchingMethodData: false, + } case CLEAR_CONFIRM_TRANSACTION: return initState default: @@ -153,6 +182,19 @@ export function clearTokenData () { } } +export function updateMethodData (methodData) { + return { + type: UPDATE_METHOD_DATA, + payload: methodData, + } +} + +export function clearMethodData () { + return { + type: CLEAR_METHOD_DATA, + } +} + export function updateTransactionAmounts (amounts) { return { type: UPDATE_TRANSACTION_AMOUNTS, @@ -195,6 +237,12 @@ export function updateNonce (nonce) { } } +export function setFetchingMethodData (isFetching) { + return { + type: isFetching ? FETCH_METHOD_DATA_START : FETCH_METHOD_DATA_END, + } +} + export function updateGasAndCalculate ({ gasLimit, gasPrice }) { return (dispatch, getState) => { const { confirmTransaction: { txData } } = getState() @@ -294,6 +342,17 @@ export function setTransactionToConfirm (transactionId) { if (txParams.data) { const { tokens: existingTokens } = state const { data, to: tokenAddress } = txParams + + try { + dispatch(setFetchingMethodData(true)) + const methodData = await getMethodData(data) + dispatch(updateMethodData(methodData)) + dispatch(setFetchingMethodData(false)) + } catch (error) { + dispatch(updateMethodData({})) + dispatch(setFetchingMethodData(false)) + } + const tokenData = getTokenData(data) dispatch(updateTokenData(tokenData)) diff --git a/ui/app/helpers/confirm-transaction/util.js b/ui/app/helpers/confirm-transaction/util.js index fa748ca46..ad247a348 100644 --- a/ui/app/helpers/confirm-transaction/util.js +++ b/ui/app/helpers/confirm-transaction/util.js @@ -6,6 +6,9 @@ import ethUtil from 'ethereumjs-util' abiDecoder.addABI(abi) +import MethodRegistry from 'eth-method-registry' +const registry = new MethodRegistry({ provider: global.ethereumProvider }) + import { conversionUtil, addCurrencies, @@ -17,6 +20,18 @@ export function getTokenData (data = {}) { return abiDecoder.decodeMethod(data) } +export async function getMethodData (data = {}) { + const prefixedData = ethUtil.addHexPrefix(data) + const fourBytePrefix = prefixedData.slice(0, 10) + const sig = await registry.lookup(fourBytePrefix) + const parsedResult = registry.parse(sig) + + return { + name: parsedResult.name, + params: parsedResult.args, + } +} + export function increaseLastGasPrice (lastGasPrice) { return ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, { multiplicandBase: 16, |