diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js index bf3f09d28..d4b1bec94 100644 --- a/ui/app/components/transaction-list-item/transaction-list-item.component.js +++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js @@ -69,7 +69,7 @@ export default class TransactionListItem extends PureComponent { const nonceAndDateText = `#${nonce} - ${formatDate(transaction.time)}` const fiatDisplayText = `-${fiatDisplayValue}` - const ethDisplayText = `-${ethTransactionAmount} ETH` + const ethDisplayText = ethTransactionAmount && `-${ethTransactionAmount} ETH` return (
{ const { metamask } = state const { currentCurrency, conversionRate } = metamask - const { transaction: { txParams: { value } = {} } = {} } = ownProps - const ethTransactionAmount = getEthFromWeiHex({ value, conversionRate }) - const fiatTransactionAmount = getValueFromWeiHex({ - value, conversionRate, toCurrency: currentCurrency, numberOfDecimals: 2, - }) - const fiatFormattedAmount = formatCurrency(fiatTransactionAmount, currentCurrency) - const fiatDisplayValue = `${fiatFormattedAmount} ${currentCurrency.toUpperCase()}` + const { transaction: { txParams: { value, data } = {} } = {}, token } = ownProps + + let ethTransactionAmount, fiatDisplayValue + + if (token) { + const { decimals = '', symbol = '' } = token + const tokenData = getTokenData(data) + + if (tokenData.params && tokenData.params.length === 2) { + const tokenDataName = tokenData.name || '' + const tokenValue = tokenData.params[1].value + const tokenAmount = tokenDataName.toLowerCase() === TOKEN_METHOD_TRANSFER + ? calcTokenAmount(tokenValue, decimals) + : tokenValue + + fiatDisplayValue = `${tokenAmount} ${symbol}` + } + } else { + ethTransactionAmount = getEthFromWeiHex({ value, conversionRate }) + const fiatTransactionAmount = getValueFromWeiHex({ + value, conversionRate, toCurrency: currentCurrency, numberOfDecimals: 2, + }) + const fiatFormattedAmount = formatCurrency(fiatTransactionAmount, currentCurrency) + fiatDisplayValue = `${fiatFormattedAmount} ${currentCurrency.toUpperCase()}` + } return { ethTransactionAmount, diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js index fb23ece7a..953b07217 100644 --- a/ui/app/components/transaction-list/transaction-list.component.js +++ b/ui/app/components/transaction-list/transaction-list.component.js @@ -17,6 +17,7 @@ export default class TransactionList extends PureComponent { pendingTransactions: PropTypes.array, completedTransactions: PropTypes.array, transactionToRetry: PropTypes.object, + selectedToken: PropTypes.object, } shouldShowRetry = transaction => { @@ -27,7 +28,11 @@ export default class TransactionList extends PureComponent { renderTransactions () { const { t } = this.context - const { pendingTransactions = [], completedTransactions = [] } = this.props + const { + pendingTransactions = [], + completedTransactions = [], + selectedToken, + } = this.props return (
@@ -43,6 +48,7 @@ export default class TransactionList extends PureComponent { transaction={transaction} key={transaction.id} showRetry={this.shouldShowRetry(transaction)} + token={selectedToken} /> )) } @@ -59,6 +65,7 @@ export default class TransactionList extends PureComponent { )) : this.renderEmpty() diff --git a/ui/app/components/transaction-list/transaction-list.container.js b/ui/app/components/transaction-list/transaction-list.container.js index 97a94b981..5a63d916d 100644 --- a/ui/app/components/transaction-list/transaction-list.container.js +++ b/ui/app/components/transaction-list/transaction-list.container.js @@ -6,6 +6,7 @@ import { pendingTransactionsSelector, completedTransactionsSelector, } from '../../selectors/transactions' +import { selectedTokenSelector } from '../../selectors/tokens' import { getLatestSubmittedTxWithEarliestNonce } from '../../helpers/transactions.util' const mapStateToProps = state => { @@ -15,6 +16,7 @@ const mapStateToProps = state => { completedTransactions: completedTransactionsSelector(state), pendingTransactions, transactionToRetry: getLatestSubmittedTxWithEarliestNonce(pendingTransactions), + selectedToken: selectedTokenSelector(state), } } diff --git a/ui/app/ducks/confirm-transaction.duck.js b/ui/app/ducks/confirm-transaction.duck.js index eb56d5695..ccb418143 100644 --- a/ui/app/ducks/confirm-transaction.duck.js +++ b/ui/app/ducks/confirm-transaction.duck.js @@ -5,7 +5,6 @@ import { } from '../selectors/confirm-transaction' import { - getTokenData, getValueFromWeiHex, getTransactionFee, getHexGasTotal, @@ -16,7 +15,7 @@ import { isSmartContractAddress, } from '../helpers/confirm-transaction/util' -import { getMethodData } from '../helpers/transactions.util' +import { getTokenData, getMethodData } from '../helpers/transactions.util' import { getSymbolAndDecimals } from '../token-util' import { conversionUtil } from '../conversion-util' diff --git a/ui/app/helpers/confirm-transaction/util.js b/ui/app/helpers/confirm-transaction/util.js index 04978b48f..cbbc27666 100644 --- a/ui/app/helpers/confirm-transaction/util.js +++ b/ui/app/helpers/confirm-transaction/util.js @@ -1,12 +1,8 @@ import currencyFormatter from 'currency-formatter' import currencies from 'currency-formatter/currencies' -import abi from 'human-standard-token-abi' -import abiDecoder from 'abi-decoder' import ethUtil from 'ethereumjs-util' import BigNumber from 'bignumber.js' -abiDecoder.addABI(abi) - import { conversionUtil, addCurrencies, @@ -16,10 +12,6 @@ import { import { unconfirmedTransactionsCountSelector } from '../../selectors/confirm-transaction' -export function getTokenData (data = {}) { - return abiDecoder.decodeMethod(data) -} - export function increaseLastGasPrice (lastGasPrice) { return ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, { multiplicandBase: 16, diff --git a/ui/app/helpers/transactions.util.js b/ui/app/helpers/transactions.util.js index 68e935702..89d2649c9 100644 --- a/ui/app/helpers/transactions.util.js +++ b/ui/app/helpers/transactions.util.js @@ -1,7 +1,7 @@ import ethUtil from 'ethereumjs-util' import MethodRegistry from 'eth-method-registry' -const registry = new MethodRegistry({ provider: global.ethereumProvider }) - +import abi from 'human-standard-token-abi' +import abiDecoder from 'abi-decoder' import { hexToDecimal } from './conversions.util' import { @@ -15,6 +15,26 @@ import { TRANSFER_FROM_ACTION_KEY, } from '../constants/transactions' +abiDecoder.addABI(abi) + +export function getTokenData (data = {}) { + return abiDecoder.decodeMethod(data) +} + +const registry = new MethodRegistry({ provider: global.ethereumProvider }) + +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 isConfirmDeployContract (txData = {}) { const { txParams = {} } = txData return !txParams.to @@ -46,18 +66,6 @@ export function getTransactionActionKey (transaction, methodData) { } } -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 getLatestSubmittedTxWithEarliestNonce (transactions = []) { if (!transactions.length) { return {} diff --git a/ui/app/selectors.js b/ui/app/selectors.js index 1b0100297..1d5f4d4cb 100644 --- a/ui/app/selectors.js +++ b/ui/app/selectors.js @@ -1,5 +1,4 @@ const abi = require('human-standard-token-abi') -import { createSelector } from 'reselect' import { transactionsSelector, @@ -105,50 +104,6 @@ function getCurrentAccountWithSendEtherInfo (state) { return accounts.find(({ address }) => address === currentAddress) } -// // function shapeShiftTxListSelector (state) { -// // return state.metamask.shapeShiftTxList || [] -// // } - -// const transactionsSelector = createSelector( -// selectedTokenAddressSelector, -// unapprovedMsgsSelector, -// shapeShiftTxListSelector, -// selectedAddressTxListSelector, -// (selectedTokenAddress, unapprovedMsgs = {}, shapeShiftTxList = [], transactions = []) => { -// const unapprovedMsgsList = valuesFor(unapprovedMsgs) -// const txsToRender = transactions.concat(unapprovedMsgsList, shapeShiftTxList) - -// return selectedTokenAddress -// ? txsToRender -// .filter(({ txParams }) => txParams && txParams.to === selectedTokenAddress) -// .sort((a, b) => b.time - a.time) -// : txsToRender -// .sort((a, b) => b.time - a.time) -// } -// ) - -// // function transactionsSelector (state) { -// // const { selectedTokenAddress } = state.metamask -// // const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs) -// // const shapeShiftTxList = shapeShiftTxListSelector(state) -// // const transactions = state.metamask.selectedAddressTxList || [] -// // const txsToRender = transactions.concat(unapprovedMsgs, shapeShiftTxList) - -// // return selectedTokenAddress -// // ? txsToRender -// // .filter(({ txParams }) => txParams && txParams.to === selectedTokenAddress) -// // .sort((a, b) => b.time - a.time) -// // : txsToRender -// // .sort((a, b) => b.time - a.time) -// // } - -export const pendingTransactionsSelector = createSelector( - transactionsSelector, - transactions => { - - } -) - function getGasIsLoading (state) { return state.appState.gasIsLoading } diff --git a/ui/app/selectors/tokens.js b/ui/app/selectors/tokens.js new file mode 100644 index 000000000..47b6e0192 --- /dev/null +++ b/ui/app/selectors/tokens.js @@ -0,0 +1,11 @@ +import { createSelector } from 'reselect' + +export const selectedTokenAddressSelector = state => state.metamask.selectedTokenAddress +export const tokenSelector = state => state.metamask.tokens +export const selectedTokenSelector = createSelector( + tokenSelector, + selectedTokenAddressSelector, + (tokens = [], selectedTokenAddress = '') => { + return tokens.find(({ address }) => address === selectedTokenAddress) + } +) diff --git a/ui/app/selectors/transactions.js b/ui/app/selectors/transactions.js index a265b8e70..6fedf36be 100644 --- a/ui/app/selectors/transactions.js +++ b/ui/app/selectors/transactions.js @@ -6,8 +6,9 @@ import { SUBMITTED_STATUS, } from '../constants/transactions' +import { selectedTokenAddressSelector } from './tokens' + export const shapeShiftTxListSelector = state => state.metamask.shapeShiftTxList -export const selectedTokenAddressSelector = state => state.metamask.selectedTokenAddress export const unapprovedMsgsSelector = state => state.metamask.unapprovedMsgs export const selectedAddressTxListSelector = state => state.metamask.selectedAddressTxList