diff options
author | Dan <danjm.com@gmail.com> | 2017-08-30 18:33:00 +0800 |
---|---|---|
committer | Chi Kei Chan <chikeichan@gmail.com> | 2017-09-08 01:25:56 +0800 |
commit | 17b5afb8deb50bf117a888ab24856661f67d3547 (patch) | |
tree | 49eba52441a737f0445d1563354cf9ef4fd51583 /ui/app/components/tx-list-item.js | |
parent | 6d3b3d42034c88475cd90172ddd97b95f04df60e (diff) | |
download | tangerine-wallet-browser-17b5afb8deb50bf117a888ab24856661f67d3547.tar.gz tangerine-wallet-browser-17b5afb8deb50bf117a888ab24856661f67d3547.tar.zst tangerine-wallet-browser-17b5afb8deb50bf117a888ab24856661f67d3547.zip |
Create tx-list-item component.
Diffstat (limited to 'ui/app/components/tx-list-item.js')
-rw-r--r-- | ui/app/components/tx-list-item.js | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js new file mode 100644 index 000000000..85699ceeb --- /dev/null +++ b/ui/app/components/tx-list-item.js @@ -0,0 +1,92 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const Identicon = require('./identicon') + +module.exports = TxListItem + +inherits(TxListItem, Component) +function TxListItem () { + Component.call(this) +} + +TxListItem.prototype.getAddressText = function (address) { + return address + ? `${address.slice(0, 10)}...${address.slice(-4)}` + : 'Contract Published' +} + +TxListItem.prototype.render = function () { + const { + transactionStatus, + onClick, + transActionId, + dateString, + address, + transactionAmount, + className + } = this.props + + 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.tx-list-status', {}, [ + transactionStatus, + ]), + ]), + ]), + + h('div.flex-column.tx-list-details-wrapper', { + style: {}, + }, [ + + h('span.tx-list-value', {}, [ + transactionAmount, + ]), + + h('span.tx-list-fiat-value', {}, [ + '+ $300 USD', + ]), + + ]), + ]), + ]) // holding on icon from design + ]) +} + |