1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-11 20:27:12 +01:00
metamask-extension/ui/app/components/tx-view.js

160 lines
4.1 KiB
JavaScript
Raw Normal View History

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')
2017-08-02 22:32:02 +02:00
const actions = require('../actions')
2017-09-06 12:17:49 +02:00
const selectors = require('../selectors')
const { SEND_ROUTE } = require('../routes')
const { checksumAddress: toChecksumAddress } = require('../util')
2017-08-02 22:32:02 +02:00
const BalanceComponent = require('./balance-component')
2017-08-09 12:10:51 +02:00
const TxList = require('./tx-list')
const Identicon = require('./identicon')
module.exports = compose(
withRouter,
connect(mapStateToProps, mapDispatchToProps)
)(TxView)
2017-08-02 22:32:02 +02:00
TxView.contextTypes = {
t: PropTypes.func,
}
2017-08-02 22:32:02 +02:00
function mapStateToProps (state) {
const sidebarOpen = state.appState.sidebarOpen
const isMascara = state.appState.isMascara
const identities = state.metamask.identities
const accounts = state.metamask.accounts
2017-09-07 08:03:23 +02:00
const network = state.metamask.network
2017-09-06 12:17:49 +02:00
const selectedTokenAddress = state.metamask.selectedTokenAddress
const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
const checksumAddress = toChecksumAddress(selectedAddress)
const identity = identities[selectedAddress]
2017-08-02 22:32:02 +02:00
return {
sidebarOpen,
selectedAddress,
checksumAddress,
2017-09-06 12:17:49 +02:00
selectedTokenAddress,
selectedToken: selectors.getSelectedToken(state),
identity,
2017-09-07 08:03:23 +02:00
network,
2017-12-12 21:22:22 +01:00
isMascara,
2017-08-02 22:32:02 +02:00
}
}
2017-08-02 22:32:02 +02:00
function mapDispatchToProps (dispatch) {
return {
showSidebar: () => { dispatch(actions.showSidebar()) },
hideSidebar: () => { dispatch(actions.hideSidebar()) },
showModal: (payload) => { dispatch(actions.showModal(payload)) },
showSendPage: () => { dispatch(actions.showSendPage()) },
2017-09-07 13:24:03 +02:00
showSendTokenPage: () => { dispatch(actions.showSendTokenPage()) },
2017-08-02 22:32:02 +02:00
}
}
2017-08-01 06:34:37 +02:00
inherits(TxView, Component)
function TxView () {
Component.call(this)
}
2017-09-06 12:17:49 +02:00
TxView.prototype.renderHeroBalance = function () {
2017-09-07 08:03:23 +02:00
const { selectedToken } = this.props
2017-09-06 12:17:49 +02:00
return h('div.hero-balance', {}, [
2017-09-07 08:03:23 +02:00
h(BalanceComponent, { token: selectedToken }),
2017-09-06 12:17:49 +02:00
2017-09-07 08:03:23 +02:00
this.renderButtons(),
2017-09-06 12:17:49 +02:00
])
}
2017-09-07 08:03:23 +02:00
TxView.prototype.renderButtons = function () {
const {selectedToken, showModal, history } = this.props
2017-09-07 08:03:23 +02:00
return !selectedToken
? (
h('div.flex-row.flex-center.hero-balance-buttons', [
2018-03-26 07:19:42 +02:00
h('button.btn-primary.hero-balance-button', {
2017-09-07 08:03:23 +02:00
onClick: () => showModal({
name: 'DEPOSIT_ETHER',
2017-09-07 08:03:23 +02:00
}),
}, this.context.t('deposit')),
2017-09-07 08:03:23 +02:00
2018-03-26 07:19:42 +02:00
h('button.btn-primary.hero-balance-button', {
2017-09-07 08:03:23 +02:00
style: {
marginLeft: '0.8em',
},
onClick: () => history.push(SEND_ROUTE),
}, this.context.t('send')),
2017-09-07 08:03:23 +02:00
])
)
: (
h('div.flex-row.flex-center.hero-balance-buttons', [
2018-03-26 07:19:42 +02:00
h('button.btn-primary.hero-balance-button', {
onClick: () => history.push(SEND_ROUTE),
}, this.context.t('send')),
2017-09-07 08:03:23 +02:00
])
)
}
2017-09-07 08:03:23 +02:00
TxView.prototype.render = function () {
2017-12-12 21:22:22 +01:00
const { selectedAddress, identity, network, isMascara } = this.props
return h('div.tx-view.flex-column', {
style: {},
}, [
h('div.flex-row.phone-visible', {
style: {
justifyContent: 'space-between',
alignItems: 'center',
flex: '0 0 auto',
margin: '10px',
},
}, [
2017-08-11 04:35:10 +02:00
h('div.fa.fa-bars', {
style: {
fontSize: '1.3em',
2017-10-24 09:13:49 +02:00
cursor: 'pointer',
padding: '10px',
2017-10-24 09:13:49 +02:00
},
onClick: () => this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar(),
}),
h('.identicon-wrapper.select-none', {
style: {
marginLeft: '0.9em',
},
}, [
h(Identicon, {
diameter: 24,
address: selectedAddress,
2017-09-07 08:03:23 +02:00
network,
}),
]),
h('span.account-name', {
style: {},
}, [
identity.name,
]),
!isMascara && h('div.open-in-browser', {
onClick: () => global.platform.openExtensionInBrowser(),
2018-01-18 02:37:18 +01:00
}, [h('img', { src: 'images/popout.svg' })]),
]),
2017-09-06 12:17:49 +02:00
this.renderHeroBalance(),
2017-08-03 09:43:24 +02:00
2017-09-07 20:38:21 +02:00
h(TxList),
2017-08-01 07:00:18 +02:00
])
}