From 3377228b74217d522a05f0aa9aa1e4b134978c6a Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Sun, 24 Nov 2019 01:41:30 -0330 Subject: [PATCH] Split ShiftListItem into container and component files with JSX (#7539) --- ui/app/components/app/shift-list-item.js | 204 --------------- .../components/app/shift-list-item/index.js | 1 + .../shift-list-item.component.js | 240 ++++++++++++++++++ .../shift-list-item.container.js | 12 + 4 files changed, 253 insertions(+), 204 deletions(-) delete mode 100644 ui/app/components/app/shift-list-item.js create mode 100644 ui/app/components/app/shift-list-item/index.js create mode 100644 ui/app/components/app/shift-list-item/shift-list-item.component.js create mode 100644 ui/app/components/app/shift-list-item/shift-list-item.container.js diff --git a/ui/app/components/app/shift-list-item.js b/ui/app/components/app/shift-list-item.js deleted file mode 100644 index f5fa00047..000000000 --- a/ui/app/components/app/shift-list-item.js +++ /dev/null @@ -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 '' - } -} diff --git a/ui/app/components/app/shift-list-item/index.js b/ui/app/components/app/shift-list-item/index.js new file mode 100644 index 000000000..fd6796983 --- /dev/null +++ b/ui/app/components/app/shift-list-item/index.js @@ -0,0 +1 @@ +export { default } from './shift-list-item.container' diff --git a/ui/app/components/app/shift-list-item/shift-list-item.component.js b/ui/app/components/app/shift-list-item/shift-list-item.component.js new file mode 100644 index 000000000..0d8e55389 --- /dev/null +++ b/ui/app/components/app/shift-list-item/shift-list-item.component.js @@ -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 ( +
+ + + { + this.props.dispatch(actions.reshowQrCode(this.props.depositAddress, this.props.depositType)) + }} + style={{ + margin: '5px', + marginLeft: '23px', + marginRight: '12px', + fontSize: '20px', + color: '#F7861C', + }} + /> + +
+ ) + case 'received': + return
+ + case 'complete': + return ( +
+ + +
+ ) + + case 'failed': + return '' + + default: + return '' + } + } + + renderInfo () { + switch (this.props.response.status) { + case 'no_deposits': + return ( +
+
+ {this.context.t('toETHviaShapeShift', [this.props.depositType])} +
+
+ {this.context.t('noDeposits')} +
+
+ {formatDate(this.props.time)} +
+
+ ) + + case 'received': + return ( +
+
+ {this.context.t('toETHviaShapeShift', [this.props.depositType])} +
+
+ {this.context.t('conversionProgress')} +
+
+ {formatDate(this.props.time)} +
+
+ ) + + case 'complete': + const url = explorerLink(this.props.response.transaction, parseInt('1')) + return ( +
global.platform.openWindow({ url })} + > +
+ {this.context.t('fromShapeShift')} +
+
+ {formatDate(this.props.time)} +
+
+ {addressSummary(this.props.response.transaction)} +
+
+ ) + + case 'failed': + return ( + + {`(${this.context.t('failed')})`} + + ) + + default: + return '' + } + } + + render () { + return ( +
+
+ +
+ {this.renderInfo()} + {this.renderUtilComponents()} +
+ ) + } +} diff --git a/ui/app/components/app/shift-list-item/shift-list-item.container.js b/ui/app/components/app/shift-list-item/shift-list-item.container.js new file mode 100644 index 000000000..1d7645dfd --- /dev/null +++ b/ui/app/components/app/shift-list-item/shift-list-item.container.js @@ -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)