mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Split ShiftListItem into container and component files with JSX (#7539)
This commit is contained in:
Whymarrh Whitby
GitHub
parent
c3e834d17b
commit
3377228b74
@ -1,204 +0,0 @@
|
||||
const inherits = require('util').inherits
|
||||
const Component = require('react').Component
|
||||
const PropTypes = require('prop-types')
|
||||
const h = require('react-hyperscript')
|
||||
const connect = require('react-redux').connect
|
||||
const explorerLink = require('etherscan-link').createExplorerLink
|
||||
const actions = require('../../store/actions')
|
||||
const { formatDate, addressSummary } = require('../../helpers/utils/util')
|
||||
|
||||
const CopyButton = require('../ui/copyButton')
|
||||
const EthBalance = require('../ui/eth-balance')
|
||||
const Tooltip = require('../ui/tooltip')
|
||||
|
||||
|
||||
ShiftListItem.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps)(ShiftListItem)
|
||||
|
||||
|
||||
function mapStateToProps (state) {
|
||||
return {
|
||||
selectedAddress: state.metamask.selectedAddress,
|
||||
conversionRate: state.metamask.conversionRate,
|
||||
currentCurrency: state.metamask.currentCurrency,
|
||||
}
|
||||
}
|
||||
|
||||
inherits(ShiftListItem, Component)
|
||||
|
||||
function ShiftListItem () {
|
||||
Component.call(this)
|
||||
}
|
||||
|
||||
ShiftListItem.prototype.render = function () {
|
||||
return h('div.transaction-list-item.tx-list-clickable', {
|
||||
style: {
|
||||
paddingTop: '20px',
|
||||
paddingBottom: '20px',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row',
|
||||
},
|
||||
}, [
|
||||
h('div', {
|
||||
style: {
|
||||
width: '0px',
|
||||
position: 'relative',
|
||||
bottom: '19px',
|
||||
},
|
||||
}, [
|
||||
h('img', {
|
||||
src: 'https://shapeshift.io/logo.png',
|
||||
style: {
|
||||
height: '35px',
|
||||
width: '132px',
|
||||
position: 'absolute',
|
||||
clip: 'rect(0px,30px,34px,0px)',
|
||||
},
|
||||
}),
|
||||
]),
|
||||
|
||||
this.renderInfo(),
|
||||
this.renderUtilComponents(),
|
||||
])
|
||||
}
|
||||
|
||||
ShiftListItem.prototype.renderUtilComponents = function () {
|
||||
var props = this.props
|
||||
const { conversionRate, currentCurrency } = props
|
||||
|
||||
switch (props.response.status) {
|
||||
case 'no_deposits':
|
||||
return h('.flex-row', [
|
||||
h(CopyButton, {
|
||||
value: this.props.depositAddress,
|
||||
}),
|
||||
h(Tooltip, {
|
||||
title: this.context.t('qrCode'),
|
||||
}, [
|
||||
h('i.fa.fa-qrcode.pointer.pop-hover', {
|
||||
onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)),
|
||||
style: {
|
||||
margin: '5px',
|
||||
marginLeft: '23px',
|
||||
marginRight: '12px',
|
||||
fontSize: '20px',
|
||||
color: '#F7861C',
|
||||
},
|
||||
}),
|
||||
]),
|
||||
])
|
||||
case 'received':
|
||||
return h('.flex-row')
|
||||
|
||||
case 'complete':
|
||||
return h('.flex-row', [
|
||||
h(CopyButton, {
|
||||
value: this.props.response.transaction,
|
||||
}),
|
||||
h(EthBalance, {
|
||||
value: `${props.response.outgoingCoin}`,
|
||||
conversionRate,
|
||||
currentCurrency,
|
||||
width: '55px',
|
||||
shorten: true,
|
||||
needsParse: false,
|
||||
incoming: true,
|
||||
style: {
|
||||
fontSize: '15px',
|
||||
color: '#01888C',
|
||||
},
|
||||
}),
|
||||
])
|
||||
|
||||
case 'failed':
|
||||
return ''
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
ShiftListItem.prototype.renderInfo = function () {
|
||||
var props = this.props
|
||||
switch (props.response.status) {
|
||||
case 'no_deposits':
|
||||
return h('.flex-column', {
|
||||
style: {
|
||||
overflow: 'hidden',
|
||||
},
|
||||
}, [
|
||||
h('div', {
|
||||
style: {
|
||||
fontSize: 'x-small',
|
||||
color: '#ABA9AA',
|
||||
width: '100%',
|
||||
},
|
||||
}, this.context.t('toETHviaShapeShift', [props.depositType])),
|
||||
h('div', this.context.t('noDeposits')),
|
||||
h('div', {
|
||||
style: {
|
||||
fontSize: 'x-small',
|
||||
color: '#ABA9AA',
|
||||
width: '100%',
|
||||
},
|
||||
}, formatDate(props.time)),
|
||||
])
|
||||
case 'received':
|
||||
return h('.flex-column', {
|
||||
style: {
|
||||
width: '200px',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
}, [
|
||||
h('div', {
|
||||
style: {
|
||||
fontSize: 'x-small',
|
||||
color: '#ABA9AA',
|
||||
width: '100%',
|
||||
},
|
||||
}, this.context.t('toETHviaShapeShift', [props.depositType])),
|
||||
h('div', this.context.t('conversionProgress')),
|
||||
h('div', {
|
||||
style: {
|
||||
fontSize: 'x-small',
|
||||
color: '#ABA9AA',
|
||||
width: '100%',
|
||||
},
|
||||
}, formatDate(props.time)),
|
||||
])
|
||||
case 'complete':
|
||||
var url = explorerLink(props.response.transaction, parseInt('1'))
|
||||
|
||||
return h('.flex-column.pointer', {
|
||||
style: {
|
||||
width: '200px',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
onClick: () => global.platform.openWindow({ url }),
|
||||
}, [
|
||||
h('div', {
|
||||
style: {
|
||||
fontSize: 'x-small',
|
||||
color: '#ABA9AA',
|
||||
width: '100%',
|
||||
},
|
||||
}, this.context.t('fromShapeShift')),
|
||||
h('div', formatDate(props.time)),
|
||||
h('div', {
|
||||
style: {
|
||||
fontSize: 'x-small',
|
||||
color: '#ABA9AA',
|
||||
width: '100%',
|
||||
},
|
||||
}, addressSummary(props.response.transaction)),
|
||||
])
|
||||
|
||||
case 'failed':
|
||||
return h('span.error', '(' + this.context.t('failed') + ')')
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
1
ui/app/components/app/shift-list-item/index.js
Normal file
1
ui/app/components/app/shift-list-item/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './shift-list-item.container'
|
||||
@ -0,0 +1,240 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import React, { Component } from 'react'
|
||||
const explorerLink = require('etherscan-link').createExplorerLink
|
||||
const actions = require('../../../store/actions')
|
||||
const { formatDate, addressSummary } = require('../../../helpers/utils/util')
|
||||
|
||||
const CopyButton = require('../../ui/copyButton')
|
||||
const EthBalance = require('../../ui/eth-balance')
|
||||
const Tooltip = require('../../ui/tooltip')
|
||||
|
||||
export default class ShiftListItem extends Component {
|
||||
static contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
conversionRate: undefined,
|
||||
currentCurrency: undefined,
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
depositType: PropTypes.string.isRequired,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
depositAddress: PropTypes.string.isRequired,
|
||||
conversionRate: PropTypes.any,
|
||||
currentCurrency: PropTypes.any,
|
||||
time: PropTypes.string.isRequired,
|
||||
response: PropTypes.shape({
|
||||
outgoingCoin: PropTypes.number.isRequired,
|
||||
status: PropTypes.string.isRequired,
|
||||
transaction: PropTypes.string.isRequired,
|
||||
}),
|
||||
}
|
||||
|
||||
renderUtilComponents () {
|
||||
const { conversionRate, currentCurrency } = this.props
|
||||
|
||||
switch (this.props.response.status) {
|
||||
case 'no_deposits':
|
||||
return (
|
||||
<div className="flex-row">
|
||||
<CopyButton value={this.props.depositAddress} />
|
||||
<Tooltip title={this.context.t('qrCode')}>
|
||||
<i
|
||||
className="fa fa-qrcode pointer pop-hover"
|
||||
onClick={() => {
|
||||
this.props.dispatch(actions.reshowQrCode(this.props.depositAddress, this.props.depositType))
|
||||
}}
|
||||
style={{
|
||||
margin: '5px',
|
||||
marginLeft: '23px',
|
||||
marginRight: '12px',
|
||||
fontSize: '20px',
|
||||
color: '#F7861C',
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)
|
||||
case 'received':
|
||||
return <div className="flex-row" />
|
||||
|
||||
case 'complete':
|
||||
return (
|
||||
<div className="flex-row">
|
||||
<CopyButton value={this.props.response.transaction} />
|
||||
<EthBalance
|
||||
value={`${this.props.response.outgoingCoin}`}
|
||||
conversionRate={conversionRate}
|
||||
currentCurrency={currentCurrency}
|
||||
width="55px"
|
||||
shorten
|
||||
needsParse={false}
|
||||
incoming
|
||||
style={{
|
||||
fontSize: '15px',
|
||||
color: '#01888C',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
case 'failed':
|
||||
return ''
|
||||
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
renderInfo () {
|
||||
switch (this.props.response.status) {
|
||||
case 'no_deposits':
|
||||
return (
|
||||
<div
|
||||
className="flex-column"
|
||||
style={{
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 'x-small',
|
||||
color: '#ABA9AA',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{this.context.t('toETHviaShapeShift', [this.props.depositType])}
|
||||
</div>
|
||||
<div>
|
||||
{this.context.t('noDeposits')}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 'x-small',
|
||||
color: '#ABA9AA',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{formatDate(this.props.time)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
case 'received':
|
||||
return (
|
||||
<div
|
||||
className="flex-column"
|
||||
style={{
|
||||
width: '200px',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 'x-small',
|
||||
color: '#ABA9AA',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{this.context.t('toETHviaShapeShift', [this.props.depositType])}
|
||||
</div>
|
||||
<div>
|
||||
{this.context.t('conversionProgress')}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 'x-small',
|
||||
color: '#ABA9AA',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{formatDate(this.props.time)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
case 'complete':
|
||||
const url = explorerLink(this.props.response.transaction, parseInt('1'))
|
||||
return (
|
||||
<div
|
||||
className="flex-column pointer"
|
||||
style={{
|
||||
width: '200px',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
onClick={() => global.platform.openWindow({ url })}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 'x-small',
|
||||
color: '#ABA9AA',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{this.context.t('fromShapeShift')}
|
||||
</div>
|
||||
<div>
|
||||
{formatDate(this.props.time)}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 'x-small',
|
||||
color: '#ABA9AA',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{addressSummary(this.props.response.transaction)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
case 'failed':
|
||||
return (
|
||||
<span className="error">
|
||||
{`(${this.context.t('failed')})`}
|
||||
</span>
|
||||
)
|
||||
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div
|
||||
className="transaction-list-item tx-list-clickable"
|
||||
style={{
|
||||
paddingTop: '20px',
|
||||
paddingBottom: '20px',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '0px',
|
||||
position: 'relative',
|
||||
bottom: '19px',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="https://shapeshift.io/logo.png"
|
||||
alt=""
|
||||
style={{
|
||||
height: '35px',
|
||||
width: '132px',
|
||||
position: 'absolute',
|
||||
clip: 'rect(0px,30px,34px,0px)',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{this.renderInfo()}
|
||||
{this.renderUtilComponents()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
import {connect} from 'react-redux'
|
||||
import ShiftListItem from './shift-list-item.component'
|
||||
|
||||
function mapStateToProps (state) {
|
||||
return {
|
||||
selectedAddress: state.metamask.selectedAddress,
|
||||
conversionRate: state.metamask.conversionRate,
|
||||
currentCurrency: state.metamask.currentCurrency,
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(ShiftListItem)
|
||||
Loading…
Reference in New Issue
Block a user