Alexander Tseung
6 years ago
parent
33a94332e4
commit
e104744d3b
@ -1,356 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const PropTypes = require('prop-types') |
|
||||||
const { compose } = require('recompose') |
|
||||||
const { withRouter } = require('react-router-dom') |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const inherits = require('util').inherits |
|
||||||
const classnames = require('classnames') |
|
||||||
const abi = require('human-standard-token-abi') |
|
||||||
const abiDecoder = require('abi-decoder') |
|
||||||
abiDecoder.addABI(abi) |
|
||||||
const Identicon = require('./identicon') |
|
||||||
const contractMap = require('eth-contract-metadata') |
|
||||||
const { checksumAddress } = require('../util') |
|
||||||
|
|
||||||
const actions = require('../actions') |
|
||||||
const { conversionUtil, multiplyCurrencies } = require('../conversion-util') |
|
||||||
const { calcTokenAmount } = require('../token-util') |
|
||||||
|
|
||||||
const { getCurrentCurrency } = require('../selectors') |
|
||||||
const { CONFIRM_TRANSACTION_ROUTE } = require('../routes') |
|
||||||
|
|
||||||
TxListItem.contextTypes = { |
|
||||||
t: PropTypes.func, |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = compose( |
|
||||||
withRouter, |
|
||||||
connect(mapStateToProps, mapDispatchToProps) |
|
||||||
)(TxListItem) |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
tokens: state.metamask.tokens, |
|
||||||
currentCurrency: getCurrentCurrency(state), |
|
||||||
contractExchangeRates: state.metamask.contractExchangeRates, |
|
||||||
selectedAddressTxList: state.metamask.selectedAddressTxList, |
|
||||||
networkNonce: state.appState.networkNonce, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function mapDispatchToProps (dispatch) { |
|
||||||
return { |
|
||||||
setSelectedToken: tokenAddress => dispatch(actions.setSelectedToken(tokenAddress)), |
|
||||||
retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)), |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(TxListItem, Component) |
|
||||||
function TxListItem () { |
|
||||||
Component.call(this) |
|
||||||
|
|
||||||
this.state = { |
|
||||||
total: null, |
|
||||||
fiatTotal: null, |
|
||||||
isTokenTx: null, |
|
||||||
} |
|
||||||
|
|
||||||
this.unmounted = false |
|
||||||
} |
|
||||||
|
|
||||||
TxListItem.prototype.componentDidMount = async function () { |
|
||||||
const { txParams = {} } = this.props |
|
||||||
|
|
||||||
const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data) |
|
||||||
const { name: txDataName } = decodedData || {} |
|
||||||
const isTokenTx = txDataName === 'transfer' |
|
||||||
|
|
||||||
const { total, fiatTotal } = isTokenTx |
|
||||||
? await this.getSendTokenTotal() |
|
||||||
: this.getSendEtherTotal() |
|
||||||
|
|
||||||
if (this.unmounted) { |
|
||||||
return |
|
||||||
} |
|
||||||
this.setState({ total, fiatTotal, isTokenTx }) |
|
||||||
} |
|
||||||
|
|
||||||
TxListItem.prototype.componentWillUnmount = function () { |
|
||||||
this.unmounted = true |
|
||||||
} |
|
||||||
|
|
||||||
TxListItem.prototype.getAddressText = function () { |
|
||||||
const { |
|
||||||
address, |
|
||||||
txParams = {}, |
|
||||||
isMsg, |
|
||||||
} = this.props |
|
||||||
|
|
||||||
const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data) |
|
||||||
const { name: txDataName, params = [] } = decodedData || {} |
|
||||||
const { value } = params[0] || {} |
|
||||||
const checksummedAddress = checksumAddress(address) |
|
||||||
const checksummedValue = checksumAddress(value) |
|
||||||
|
|
||||||
let addressText |
|
||||||
if (txDataName === 'transfer' || address) { |
|
||||||
const addressToRender = txDataName === 'transfer' ? checksummedValue : checksummedAddress |
|
||||||
addressText = `${addressToRender.slice(0, 10)}...${addressToRender.slice(-4)}` |
|
||||||
} else if (isMsg) { |
|
||||||
addressText = this.context.t('sigRequest') |
|
||||||
} else { |
|
||||||
addressText = this.context.t('contractDeployment') |
|
||||||
} |
|
||||||
|
|
||||||
return addressText |
|
||||||
} |
|
||||||
|
|
||||||
TxListItem.prototype.getSendEtherTotal = function () { |
|
||||||
const { |
|
||||||
transactionAmount, |
|
||||||
conversionRate, |
|
||||||
address, |
|
||||||
currentCurrency, |
|
||||||
} = this.props |
|
||||||
|
|
||||||
if (!address) { |
|
||||||
return {} |
|
||||||
} |
|
||||||
|
|
||||||
const totalInFiat = conversionUtil(transactionAmount, { |
|
||||||
fromNumericBase: 'hex', |
|
||||||
toNumericBase: 'dec', |
|
||||||
fromCurrency: 'ETH', |
|
||||||
toCurrency: currentCurrency, |
|
||||||
fromDenomination: 'WEI', |
|
||||||
numberOfDecimals: 2, |
|
||||||
conversionRate, |
|
||||||
}) |
|
||||||
const totalInETH = conversionUtil(transactionAmount, { |
|
||||||
fromNumericBase: 'hex', |
|
||||||
toNumericBase: 'dec', |
|
||||||
fromCurrency: 'ETH', |
|
||||||
toCurrency: 'ETH', |
|
||||||
fromDenomination: 'WEI', |
|
||||||
conversionRate, |
|
||||||
numberOfDecimals: 6, |
|
||||||
}) |
|
||||||
|
|
||||||
return { |
|
||||||
total: `${totalInETH} ETH`, |
|
||||||
fiatTotal: `${totalInFiat} ${currentCurrency.toUpperCase()}`, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
TxListItem.prototype.getTokenInfo = async function () { |
|
||||||
const { txParams = {}, tokenInfoGetter, tokens } = this.props |
|
||||||
const toAddress = txParams.to |
|
||||||
|
|
||||||
let decimals |
|
||||||
let symbol |
|
||||||
|
|
||||||
({ decimals, symbol } = tokens.filter(({ address }) => address === toAddress)[0] || {}) |
|
||||||
|
|
||||||
if (!decimals && !symbol) { |
|
||||||
({ decimals, symbol } = contractMap[toAddress] || {}) |
|
||||||
} |
|
||||||
|
|
||||||
if (!decimals && !symbol) { |
|
||||||
({ decimals, symbol } = await tokenInfoGetter(toAddress)) |
|
||||||
} |
|
||||||
|
|
||||||
return { decimals, symbol, address: toAddress } |
|
||||||
} |
|
||||||
|
|
||||||
TxListItem.prototype.getSendTokenTotal = async function () { |
|
||||||
const { |
|
||||||
txParams = {}, |
|
||||||
conversionRate, |
|
||||||
contractExchangeRates, |
|
||||||
currentCurrency, |
|
||||||
} = this.props |
|
||||||
|
|
||||||
const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data) |
|
||||||
const { params = [] } = decodedData || {} |
|
||||||
const { value } = params[1] || {} |
|
||||||
const { decimals, symbol, address } = await this.getTokenInfo() |
|
||||||
const total = calcTokenAmount(value, decimals) |
|
||||||
|
|
||||||
let tokenToFiatRate |
|
||||||
let totalInFiat |
|
||||||
|
|
||||||
if (contractExchangeRates[address]) { |
|
||||||
tokenToFiatRate = multiplyCurrencies( |
|
||||||
contractExchangeRates[address], |
|
||||||
conversionRate |
|
||||||
) |
|
||||||
|
|
||||||
totalInFiat = conversionUtil(total, { |
|
||||||
fromNumericBase: 'dec', |
|
||||||
toNumericBase: 'dec', |
|
||||||
fromCurrency: symbol, |
|
||||||
toCurrency: currentCurrency, |
|
||||||
numberOfDecimals: 2, |
|
||||||
conversionRate: tokenToFiatRate, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const showFiat = Boolean(totalInFiat) && currentCurrency.toUpperCase() !== symbol |
|
||||||
|
|
||||||
return { |
|
||||||
total: `${total} ${symbol}`, |
|
||||||
fiatTotal: showFiat && `${totalInFiat} ${currentCurrency.toUpperCase()}`, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
TxListItem.prototype.showRetryButton = function () { |
|
||||||
const { |
|
||||||
transactionSubmittedTime, |
|
||||||
selectedAddressTxList, |
|
||||||
transactionId, |
|
||||||
txParams, |
|
||||||
networkNonce, |
|
||||||
} = this.props |
|
||||||
if (!txParams) { |
|
||||||
return false |
|
||||||
} |
|
||||||
let currentTxSharesEarliestNonce = false |
|
||||||
const currentNonce = txParams.nonce |
|
||||||
const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce) |
|
||||||
const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => tx.status === 'submitted') |
|
||||||
const currentSubmittedTxs = selectedAddressTxList.filter(tx => tx.status === 'submitted') |
|
||||||
const lastSubmittedTxWithCurrentNonce = currentNonceSubmittedTxs[currentNonceSubmittedTxs.length - 1] |
|
||||||
const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce && |
|
||||||
lastSubmittedTxWithCurrentNonce.id === transactionId |
|
||||||
if (currentSubmittedTxs.length > 0) { |
|
||||||
currentTxSharesEarliestNonce = currentNonce === networkNonce |
|
||||||
} |
|
||||||
|
|
||||||
return currentTxSharesEarliestNonce && currentTxIsLatestWithNonce && Date.now() - transactionSubmittedTime > 30000 |
|
||||||
} |
|
||||||
|
|
||||||
TxListItem.prototype.setSelectedToken = function (tokenAddress) { |
|
||||||
this.props.setSelectedToken(tokenAddress) |
|
||||||
} |
|
||||||
|
|
||||||
TxListItem.prototype.resubmit = function () { |
|
||||||
const { transactionId } = this.props |
|
||||||
this.props.retryTransaction(transactionId) |
|
||||||
.then(id => this.props.history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`)) |
|
||||||
} |
|
||||||
|
|
||||||
TxListItem.prototype.render = function () { |
|
||||||
const { |
|
||||||
transactionStatus, |
|
||||||
onClick, |
|
||||||
transactionId, |
|
||||||
dateString, |
|
||||||
address, |
|
||||||
className, |
|
||||||
txParams, |
|
||||||
} = this.props |
|
||||||
const { total, fiatTotal, isTokenTx } = this.state |
|
||||||
|
|
||||||
return h(`div${className || ''}`, { |
|
||||||
key: transactionId, |
|
||||||
onClick: () => onClick && onClick(transactionId), |
|
||||||
}, [ |
|
||||||
h(`div.flex-column.tx-list-item-wrapper`, {}, [ |
|
||||||
|
|
||||||
h('div.tx-list-date-wrapper', { |
|
||||||
style: {}, |
|
||||||
}, [ |
|
||||||
h('span.tx-list-date', {}, [ |
|
||||||
dateString, |
|
||||||
]), |
|
||||||
]), |
|
||||||
|
|
||||||
h('div.flex-row.tx-list-content-wrapper', { |
|
||||||
style: {}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h('div.tx-list-identicon-wrapper', { |
|
||||||
style: {}, |
|
||||||
}, [ |
|
||||||
h(Identicon, { |
|
||||||
address, |
|
||||||
diameter: 28, |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
h('div.tx-list-account-and-status-wrapper', {}, [ |
|
||||||
h('div.tx-list-account-wrapper', { |
|
||||||
style: {}, |
|
||||||
}, [ |
|
||||||
h('span.tx-list-account', {}, [ |
|
||||||
this.getAddressText(address), |
|
||||||
]), |
|
||||||
]), |
|
||||||
|
|
||||||
h('div.tx-list-status-wrapper', { |
|
||||||
style: {}, |
|
||||||
}, [ |
|
||||||
h('span', { |
|
||||||
className: classnames('tx-list-status', { |
|
||||||
'tx-list-status--rejected': transactionStatus === 'rejected', |
|
||||||
'tx-list-status--failed': transactionStatus === 'failed', |
|
||||||
'tx-list-status--dropped': transactionStatus === 'dropped', |
|
||||||
}), |
|
||||||
}, |
|
||||||
this.txStatusIndicator(), |
|
||||||
), |
|
||||||
]), |
|
||||||
]), |
|
||||||
|
|
||||||
h('div.flex-column.tx-list-details-wrapper', { |
|
||||||
style: {}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h('span.tx-list-value', total), |
|
||||||
|
|
||||||
fiatTotal && h('span.tx-list-fiat-value', fiatTotal), |
|
||||||
|
|
||||||
]), |
|
||||||
]), |
|
||||||
|
|
||||||
this.showRetryButton() && h('.tx-list-item-retry-container', { |
|
||||||
onClick: (event) => { |
|
||||||
event.stopPropagation() |
|
||||||
if (isTokenTx) { |
|
||||||
this.setSelectedToken(txParams.to) |
|
||||||
} |
|
||||||
this.resubmit() |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('span', 'Taking too long? Increase the gas price on your transaction'), |
|
||||||
]), |
|
||||||
|
|
||||||
]), // holding on icon from design
|
|
||||||
]) |
|
||||||
} |
|
||||||
|
|
||||||
TxListItem.prototype.txStatusIndicator = function () { |
|
||||||
const { transactionStatus } = this.props |
|
||||||
|
|
||||||
let name |
|
||||||
|
|
||||||
if (transactionStatus === 'unapproved') { |
|
||||||
name = this.context.t('unapproved') |
|
||||||
} else if (transactionStatus === 'rejected') { |
|
||||||
name = this.context.t('rejected') |
|
||||||
} else if (transactionStatus === 'approved') { |
|
||||||
name = this.context.t('approved') |
|
||||||
} else if (transactionStatus === 'signed') { |
|
||||||
name = this.context.t('signed') |
|
||||||
} else if (transactionStatus === 'submitted') { |
|
||||||
name = this.context.t('submitted') |
|
||||||
} else if (transactionStatus === 'confirmed') { |
|
||||||
name = this.context.t('confirmed') |
|
||||||
} else if (transactionStatus === 'failed') { |
|
||||||
name = this.context.t('failed') |
|
||||||
} else if (transactionStatus === 'dropped') { |
|
||||||
name = this.context.t('dropped') |
|
||||||
} |
|
||||||
return name |
|
||||||
} |
|
||||||
@ -1,171 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const PropTypes = require('prop-types') |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const prefixForNetwork = require('../../lib/etherscan-prefix-for-network') |
|
||||||
const selectors = require('../selectors') |
|
||||||
const TxListItem = require('./tx-list-item') |
|
||||||
const ShiftListItem = require('./shift-list-item') |
|
||||||
const { formatDate } = require('../util') |
|
||||||
const { showConfTxPage, updateNetworkNonce } = require('../actions') |
|
||||||
const classnames = require('classnames') |
|
||||||
const { tokenInfoGetter } = require('../token-util') |
|
||||||
const { withRouter } = require('react-router-dom') |
|
||||||
const { compose } = require('recompose') |
|
||||||
const { CONFIRM_TRANSACTION_ROUTE } = require('../routes') |
|
||||||
|
|
||||||
module.exports = compose( |
|
||||||
withRouter, |
|
||||||
connect(mapStateToProps, mapDispatchToProps) |
|
||||||
)(TxList) |
|
||||||
|
|
||||||
TxList.contextTypes = { |
|
||||||
t: PropTypes.func, |
|
||||||
} |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
txsToRender: selectors.transactionsSelector(state), |
|
||||||
conversionRate: selectors.conversionRateSelector(state), |
|
||||||
selectedAddress: selectors.getSelectedAddress(state), |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function mapDispatchToProps (dispatch) { |
|
||||||
return { |
|
||||||
showConfTxPage: ({ id }) => dispatch(showConfTxPage({ id })), |
|
||||||
updateNetworkNonce: (address) => dispatch(updateNetworkNonce(address)), |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(TxList, Component) |
|
||||||
function TxList () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
TxList.prototype.componentWillMount = function () { |
|
||||||
this.tokenInfoGetter = tokenInfoGetter() |
|
||||||
this.props.updateNetworkNonce(this.props.selectedAddress) |
|
||||||
} |
|
||||||
|
|
||||||
TxList.prototype.componentDidUpdate = function (prevProps) { |
|
||||||
const oldTxsToRender = prevProps.txsToRender |
|
||||||
const { |
|
||||||
txsToRender: newTxsToRender, |
|
||||||
selectedAddress, |
|
||||||
updateNetworkNonce, |
|
||||||
} = this.props |
|
||||||
|
|
||||||
if (newTxsToRender.length > oldTxsToRender.length) { |
|
||||||
updateNetworkNonce(selectedAddress) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
TxList.prototype.render = function () { |
|
||||||
return h('div.flex-column', [ |
|
||||||
h('div.flex-row.tx-list-header-wrapper', [ |
|
||||||
h('div.flex-row.tx-list-header', [ |
|
||||||
h('div', this.context.t('transactions')), |
|
||||||
]), |
|
||||||
]), |
|
||||||
h('div.flex-column.tx-list-container', {}, [ |
|
||||||
this.renderTransaction(), |
|
||||||
]), |
|
||||||
]) |
|
||||||
} |
|
||||||
|
|
||||||
TxList.prototype.renderTransaction = function () { |
|
||||||
const { txsToRender, conversionRate } = this.props |
|
||||||
|
|
||||||
return txsToRender.length |
|
||||||
? txsToRender.map((transaction, i) => this.renderTransactionListItem(transaction, conversionRate, i)) |
|
||||||
: [h( |
|
||||||
'div.tx-list-item.tx-list-item--empty', |
|
||||||
{ key: 'tx-list-none' }, |
|
||||||
[ this.context.t('noTransactions') ], |
|
||||||
)] |
|
||||||
} |
|
||||||
|
|
||||||
// TODO: Consider moving TxListItem into a separate component
|
|
||||||
TxList.prototype.renderTransactionListItem = function (transaction, conversionRate, index) { |
|
||||||
// console.log({transaction})
|
|
||||||
// refer to transaction-list.js:line 58
|
|
||||||
|
|
||||||
if (transaction.key === 'shapeshift') { |
|
||||||
return h(ShiftListItem, { ...transaction, key: `shapeshift${index}` }) |
|
||||||
} |
|
||||||
|
|
||||||
const props = { |
|
||||||
dateString: formatDate(transaction.time), |
|
||||||
address: transaction.txParams && transaction.txParams.to, |
|
||||||
transactionStatus: transaction.status, |
|
||||||
transactionAmount: transaction.txParams && transaction.txParams.value, |
|
||||||
transactionId: transaction.id, |
|
||||||
transactionHash: transaction.hash, |
|
||||||
transactionNetworkId: transaction.metamaskNetworkId, |
|
||||||
transactionSubmittedTime: transaction.submittedTime, |
|
||||||
} |
|
||||||
|
|
||||||
const { |
|
||||||
address, |
|
||||||
transactionStatus, |
|
||||||
transactionAmount, |
|
||||||
dateString, |
|
||||||
transactionId, |
|
||||||
transactionHash, |
|
||||||
transactionNetworkId, |
|
||||||
transactionSubmittedTime, |
|
||||||
} = props |
|
||||||
const { history } = this.props |
|
||||||
|
|
||||||
const opts = { |
|
||||||
key: transactionId || transactionHash, |
|
||||||
txParams: transaction.txParams, |
|
||||||
isMsg: Boolean(transaction.msgParams), |
|
||||||
transactionStatus, |
|
||||||
transactionId, |
|
||||||
dateString, |
|
||||||
address, |
|
||||||
transactionAmount, |
|
||||||
transactionHash, |
|
||||||
conversionRate, |
|
||||||
tokenInfoGetter: this.tokenInfoGetter, |
|
||||||
transactionSubmittedTime, |
|
||||||
} |
|
||||||
|
|
||||||
const isUnapproved = transactionStatus === 'unapproved' |
|
||||||
|
|
||||||
if (isUnapproved) { |
|
||||||
opts.onClick = () => { |
|
||||||
this.props.showConfTxPage({ id: transactionId }) |
|
||||||
history.push(CONFIRM_TRANSACTION_ROUTE) |
|
||||||
} |
|
||||||
opts.transactionStatus = this.context.t('notStarted') |
|
||||||
} else if (transactionHash) { |
|
||||||
opts.onClick = () => this.view(transactionHash, transactionNetworkId) |
|
||||||
} |
|
||||||
|
|
||||||
opts.className = classnames('.tx-list-item', { |
|
||||||
'.tx-list-pending-item-container': isUnapproved, |
|
||||||
'.tx-list-clickable': Boolean(transactionHash) || isUnapproved, |
|
||||||
}) |
|
||||||
|
|
||||||
return h(TxListItem, opts) |
|
||||||
} |
|
||||||
|
|
||||||
TxList.prototype.view = function (txHash, network) { |
|
||||||
const url = etherscanLinkFor(txHash, network) |
|
||||||
if (url) { |
|
||||||
navigateTo(url) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function navigateTo (url) { |
|
||||||
global.platform.openWindow({ url }) |
|
||||||
} |
|
||||||
|
|
||||||
function etherscanLinkFor (txHash, network) { |
|
||||||
const prefix = prefixForNetwork(network) |
|
||||||
return `https://${prefix}etherscan.io/tx/${txHash}` |
|
||||||
} |
|
||||||
@ -1,121 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const PropTypes = require('prop-types') |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const { withRouter } = require('react-router-dom') |
|
||||||
const { compose } = require('recompose') |
|
||||||
const actions = require('../actions') |
|
||||||
const selectors = require('../selectors') |
|
||||||
const { SEND_ROUTE } = require('../routes') |
|
||||||
const { checksumAddress: toChecksumAddress } = require('../util') |
|
||||||
|
|
||||||
const BalanceComponent = require('./balance-component') |
|
||||||
const Tooltip = require('./tooltip') |
|
||||||
const TxList = require('./tx-list') |
|
||||||
const SelectedAccount = require('./selected-account') |
|
||||||
|
|
||||||
import Media from 'react-media' |
|
||||||
import MenuBar from './menu-bar' |
|
||||||
|
|
||||||
module.exports = compose( |
|
||||||
withRouter, |
|
||||||
connect(mapStateToProps, mapDispatchToProps) |
|
||||||
)(TxView) |
|
||||||
|
|
||||||
TxView.contextTypes = { |
|
||||||
t: PropTypes.func, |
|
||||||
} |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
const sidebarOpen = state.appState.sidebarOpen |
|
||||||
const isMascara = state.appState.isMascara |
|
||||||
|
|
||||||
const identities = state.metamask.identities |
|
||||||
const accounts = state.metamask.accounts |
|
||||||
const network = state.metamask.network |
|
||||||
const selectedTokenAddress = state.metamask.selectedTokenAddress |
|
||||||
const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] |
|
||||||
const checksumAddress = toChecksumAddress(selectedAddress) |
|
||||||
const identity = identities[selectedAddress] |
|
||||||
|
|
||||||
return { |
|
||||||
sidebarOpen, |
|
||||||
selectedAddress, |
|
||||||
checksumAddress, |
|
||||||
selectedTokenAddress, |
|
||||||
selectedToken: selectors.getSelectedToken(state), |
|
||||||
identity, |
|
||||||
network, |
|
||||||
isMascara, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function mapDispatchToProps (dispatch) { |
|
||||||
return { |
|
||||||
showSidebar: () => { dispatch(actions.showSidebar()) }, |
|
||||||
hideSidebar: () => { dispatch(actions.hideSidebar()) }, |
|
||||||
showModal: (payload) => { dispatch(actions.showModal(payload)) }, |
|
||||||
showSendPage: () => { dispatch(actions.showSendPage()) }, |
|
||||||
showSendTokenPage: () => { dispatch(actions.showSendTokenPage()) }, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(TxView, Component) |
|
||||||
function TxView () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
TxView.prototype.renderHeroBalance = function () { |
|
||||||
const { selectedToken } = this.props |
|
||||||
|
|
||||||
return h('div.hero-balance', {}, [ |
|
||||||
|
|
||||||
h(BalanceComponent, { token: selectedToken }), |
|
||||||
|
|
||||||
this.renderButtons(), |
|
||||||
]) |
|
||||||
} |
|
||||||
|
|
||||||
TxView.prototype.renderButtons = function () { |
|
||||||
const {selectedToken, showModal, history } = this.props |
|
||||||
|
|
||||||
return !selectedToken |
|
||||||
? ( |
|
||||||
h('div.flex-row.flex-center.hero-balance-buttons', [ |
|
||||||
h('button.btn-primary.hero-balance-button', { |
|
||||||
onClick: () => showModal({ |
|
||||||
name: 'DEPOSIT_ETHER', |
|
||||||
}), |
|
||||||
}, this.context.t('deposit')), |
|
||||||
|
|
||||||
h('button.btn-primary.hero-balance-button', { |
|
||||||
style: { |
|
||||||
marginLeft: '0.8em', |
|
||||||
}, |
|
||||||
onClick: () => history.push(SEND_ROUTE), |
|
||||||
}, this.context.t('send')), |
|
||||||
]) |
|
||||||
) |
|
||||||
: ( |
|
||||||
h('div.flex-row.flex-center.hero-balance-buttons', [ |
|
||||||
h('button.btn-primary.hero-balance-button', { |
|
||||||
onClick: () => history.push(SEND_ROUTE), |
|
||||||
}, this.context.t('send')), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
TxView.prototype.render = function () { |
|
||||||
return h('div.tx-view.flex-column', [ |
|
||||||
h(Media, { |
|
||||||
query: '(max-width: 575px)', |
|
||||||
render: () => h(MenuBar), |
|
||||||
}), |
|
||||||
|
|
||||||
this.renderHeroBalance(), |
|
||||||
|
|
||||||
h(TxList), |
|
||||||
|
|
||||||
]) |
|
||||||
} |
|
||||||
Loading…
Reference in new issue