diff options
Diffstat (limited to 'ui/app')
6 files changed, 67 insertions, 26 deletions
diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js index 8bdb6a313..f4f8d97b2 100644 --- a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js +++ b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js @@ -36,6 +36,7 @@ export default class TransactionListItem extends PureComponent { rpcPrefs: PropTypes.object, data: PropTypes.string, getContractMethodData: PropTypes.func, + isDeposit: PropTypes.bool, } static defaultProps = { @@ -117,7 +118,7 @@ export default class TransactionListItem extends PureComponent { } renderPrimaryCurrency () { - const { token, primaryTransaction: { txParams: { data } = {} } = {}, value } = this.props + const { token, primaryTransaction: { txParams: { data } = {} } = {}, value, isDeposit } = this.props return token ? ( @@ -132,7 +133,7 @@ export default class TransactionListItem extends PureComponent { className="transaction-list-item__amount transaction-list-item__amount--primary" value={value} type={PRIMARY} - prefix="-" + prefix={isDeposit ? '' : '-'} /> ) } diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.container.js b/ui/app/components/app/transaction-list-item/transaction-list-item.container.js index 1675958aa..27b9e2608 100644 --- a/ui/app/components/app/transaction-list-item/transaction-list-item.container.js +++ b/ui/app/components/app/transaction-list-item/transaction-list-item.container.js @@ -21,8 +21,10 @@ const mapStateToProps = (state, ownProps) => { const { showFiatInTestnets } = preferencesSelector(state) const isMainnet = getIsMainnet(state) const { transactionGroup: { primaryTransaction } = {} } = ownProps - const { txParams: { gas: gasLimit, gasPrice, data } = {} } = primaryTransaction - const selectedAccountBalance = accounts[getSelectedAddress(state)].balance + const { txParams: { gas: gasLimit, gasPrice, data, to } = {} } = primaryTransaction + const selectedAddress = getSelectedAddress(state) + const selectedAccountBalance = accounts[selectedAddress].balance + const isDeposit = selectedAddress === to const selectRpcInfo = frequentRpcListDetail.find(rpcInfo => rpcInfo.rpcUrl === provider.rpcTarget) const { rpcPrefs } = selectRpcInfo || {} @@ -42,6 +44,7 @@ const mapStateToProps = (state, ownProps) => { selectedAccountBalance, hasEnoughCancelGas, rpcPrefs, + isDeposit, } } @@ -68,12 +71,13 @@ const mapDispatchToProps = dispatch => { const mergeProps = (stateProps, dispatchProps, ownProps) => { const { transactionGroup: { primaryTransaction, initialTransaction } = {} } = ownProps + const { isDeposit } = stateProps const { retryTransaction, ...restDispatchProps } = dispatchProps - const { txParams: { nonce, data } = {}, time } = initialTransaction + const { txParams: { nonce, data } = {}, time = 0 } = initialTransaction const { txParams: { value } = {} } = primaryTransaction const tokenData = data && getTokenData(data) - const nonceAndDate = nonce ? `#${hexToDecimal(nonce)} - ${formatDate(time)}` : formatDate(time) + const nonceAndDate = nonce && !isDeposit ? `#${hexToDecimal(nonce)} - ${formatDate(time)}` : formatDate(time) return { ...stateProps, diff --git a/ui/app/components/app/transaction-list/index.scss b/ui/app/components/app/transaction-list/index.scss index 42eddd31e..7535137e2 100644 --- a/ui/app/components/app/transaction-list/index.scss +++ b/ui/app/components/app/transaction-list/index.scss @@ -11,15 +11,34 @@ } &__header { - flex: 0 0 auto; - font-size: 14px; - line-height: 20px; - color: $Grey-400; border-bottom: 1px solid $Grey-100; - padding: 8px 0 8px 20px; - @media screen and (max-width: $break-small) { - padding: 8px 0 8px 16px; + &__tabs { + display: flex; + } + + &__tab, + &__tab--selected { + flex: 0 0 auto; + font-size: 14px; + line-height: 20px; + color: $Grey-400; + padding: 8px 0 8px 20px; + cursor: pointer; + + &:hover { + font-weight: bold; + } + + @media screen and (max-width: $break-small) { + padding: 8px 0 8px 16px; + } + } + + &__tab--selected { + font-weight: bold; + color: $Blue-400; + cursor: auto; } } diff --git a/ui/app/helpers/constants/transactions.js b/ui/app/helpers/constants/transactions.js index d0a819b9b..e91e56ddc 100644 --- a/ui/app/helpers/constants/transactions.js +++ b/ui/app/helpers/constants/transactions.js @@ -20,5 +20,6 @@ export const TRANSFER_FROM_ACTION_KEY = 'transferFrom' export const SIGNATURE_REQUEST_KEY = 'signatureRequest' export const CONTRACT_INTERACTION_KEY = 'contractInteraction' export const CANCEL_ATTEMPT_ACTION_KEY = 'cancelAttempt' +export const DEPOSIT_TRANSACTION_KEY = 'deposit' export const TRANSACTION_TYPE_SHAPESHIFT = 'shapeshift' diff --git a/ui/app/helpers/utils/transactions.util.js b/ui/app/helpers/utils/transactions.util.js index b65bda5b2..cb347ffaa 100644 --- a/ui/app/helpers/utils/transactions.util.js +++ b/ui/app/helpers/utils/transactions.util.js @@ -21,6 +21,7 @@ import { SIGNATURE_REQUEST_KEY, CONTRACT_INTERACTION_KEY, CANCEL_ATTEMPT_ACTION_KEY, + DEPOSIT_TRANSACTION_KEY, } from '../constants/transactions' import log from 'loglevel' @@ -124,6 +125,10 @@ export function isTokenMethodAction (transactionCategory) { export function getTransactionActionKey (transaction) { const { msgParams, type, transactionCategory } = transaction + if (transactionCategory === 'incoming') { + return DEPOSIT_TRANSACTION_KEY + } + if (type === 'cancel') { return CANCEL_ATTEMPT_ACTION_KEY } diff --git a/ui/app/selectors/transactions.js b/ui/app/selectors/transactions.js index b1d27b333..5450978a6 100644 --- a/ui/app/selectors/transactions.js +++ b/ui/app/selectors/transactions.js @@ -10,11 +10,16 @@ import { TRANSACTION_TYPE_RETRY, } from '../../../app/scripts/controllers/transactions/enums' import { hexToDecimal } from '../helpers/utils/conversions.util' - import { selectedTokenAddressSelector } from './tokens' import txHelper from '../../lib/tx-helper' export const shapeShiftTxListSelector = state => state.metamask.shapeShiftTxList + +export const incomingTxListSelector = state => { + const selectedAddress = state.metamask.selectedAddress + return Object.values(state.metamask.incomingTransactions) + .filter(({ txParams }) => txParams.to === selectedAddress) +} export const unapprovedMsgsSelector = state => state.metamask.unapprovedMsgs export const selectedAddressTxListSelector = state => state.metamask.selectedAddressTxList export const unapprovedPersonalMsgsSelector = state => state.metamask.unapprovedPersonalMsgs @@ -55,9 +60,10 @@ export const transactionsSelector = createSelector( selectedTokenAddressSelector, unapprovedMessagesSelector, shapeShiftTxListSelector, + incomingTxListSelector, selectedAddressTxListSelector, - (selectedTokenAddress, unapprovedMessages = [], shapeShiftTxList = [], transactions = []) => { - const txsToRender = transactions.concat(unapprovedMessages, shapeShiftTxList) + (selectedTokenAddress, unapprovedMessages = [], shapeShiftTxList = [], incomingTxList = [], transactions = []) => { + const txsToRender = transactions.concat(unapprovedMessages, shapeShiftTxList, incomingTxList) return selectedTokenAddress ? txsToRender @@ -158,17 +164,18 @@ const insertTransactionGroupByTime = (transactionGroups, transactionGroup) => { } /** - * @name mergeShapeshiftTransactionGroups + * @name mergeNonNonceTransactionGroups * @private - * @description Inserts (mutates) shapeshift transactionGroups into an array of nonce-ordered - * transactionGroups by time. Shapeshift transactionGroups need to be sorted by time within the list - * of transactions as they do not have nonces. + * @description Inserts (mutates) transactionGroups that are not to be ordered by nonce into an array + * of nonce-ordered transactionGroups by time. Shapeshift transactionGroups need to be sorted by time + * within the list of transactions as they do not have nonces. * @param {transactionGroup[]} orderedTransactionGroups - Array of transactionGroups ordered by * nonce. - * @param {transactionGroup[]} shapeshiftTransactionGroups - Array of shapeshift transactionGroups + * @param {transactionGroup[]} nonNonceTransactionGroups - Array of transactionGroups not intended to be ordered by nonce, + * but intended to be ordered by timestamp */ -const mergeShapeshiftTransactionGroups = (orderedTransactionGroups, shapeshiftTransactionGroups) => { - shapeshiftTransactionGroups.forEach(shapeshiftGroup => { +const mergeNonNonceTransactionGroups = (orderedTransactionGroups, nonNonceTransactionGroups) => { + nonNonceTransactionGroups.forEach(shapeshiftGroup => { insertTransactionGroupByTime(orderedTransactionGroups, shapeshiftGroup) }) } @@ -183,13 +190,14 @@ export const nonceSortedTransactionsSelector = createSelector( (transactions = []) => { const unapprovedTransactionGroups = [] const shapeshiftTransactionGroups = [] + const incomingTransactionGroups = [] const orderedNonces = [] const nonceToTransactionsMap = {} transactions.forEach(transaction => { - const { txParams: { nonce } = {}, status, type, time: txTime, key } = transaction + const { txParams: { nonce } = {}, status, type, time: txTime, key, transactionCategory } = transaction - if (typeof nonce === 'undefined') { + if (typeof nonce === 'undefined' || transactionCategory === 'incoming') { const transactionGroup = { transactions: [transaction], initialTransaction: transaction, @@ -200,6 +208,8 @@ export const nonceSortedTransactionsSelector = createSelector( if (key === 'shapeshift') { shapeshiftTransactionGroups.push(transactionGroup) + } else if (transactionCategory === 'incoming') { + incomingTransactionGroups.push(transactionGroup) } else { insertTransactionGroupByTime(unapprovedTransactionGroups, transactionGroup) } @@ -245,7 +255,8 @@ export const nonceSortedTransactionsSelector = createSelector( }) const orderedTransactionGroups = orderedNonces.map(nonce => nonceToTransactionsMap[nonce]) - mergeShapeshiftTransactionGroups(orderedTransactionGroups, shapeshiftTransactionGroups) + mergeNonNonceTransactionGroups(orderedTransactionGroups, shapeshiftTransactionGroups) + mergeNonNonceTransactionGroups(orderedTransactionGroups, incomingTransactionGroups) return unapprovedTransactionGroups.concat(orderedTransactionGroups) } ) |