aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/components/tx-list.js141
-rw-r--r--ui/app/components/tx-view.js112
2 files changed, 151 insertions, 102 deletions
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
new file mode 100644
index 000000000..8f6f09348
--- /dev/null
+++ b/ui/app/components/tx-list.js
@@ -0,0 +1,141 @@
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+const valuesFor = require('../util').valuesFor
+
+module.exports = connect(mapStateToProps)(TxList)
+
+function mapStateToProps(state) {
+ return {
+ network: state.metamask.network,
+ unapprovedMsgs: valuesFor(state.metamask.unapprovedMsgs),
+ shapeShiftTxList: state.metamask.shapeShiftTxList,
+ transactions: state.metamask.selectedAddressTxList || [],
+ conversionRate: state.metamask.conversionRate,
+ }
+}
+
+inherits(TxList, Component)
+function TxList () {
+ Component.call(this)
+}
+
+const contentDivider = h('div', {
+ style: {
+ marginLeft: '1.3em',
+ marginRight: '1.3em',
+ height:'1px',
+ background:'#E7E7E7', // TODO: make custom color
+ },
+})
+
+TxList.prototype.render = function () {
+
+ const { transactions, network, unapprovedMsgs, conversionRate } = this.props
+
+ var shapeShiftTxList
+ if (network === '1') {
+ shapeShiftTxList = this.props.shapeShiftTxList
+ }
+ const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList)
+ .sort((a, b) => b.time - a.time)
+
+ console.log("transactions to render", txsToRender)
+
+ return h('div.flex-column.tx-list-container', {}, [
+
+ h('div.flex-row.tx-list', {
+ style: {
+ margin: '1.8em 0.9em 0.8em 0.9em',
+ },
+ }, [
+
+ // tx-view-tab.js
+ h('div.flex-row', {
+ }, [
+
+ h('div', {
+ style: {
+ borderBottom: '0.07em solid black',
+ paddingBottom: '0.015em',
+ }
+ }, 'TRANSACTIONS'),
+
+ h('div', {
+ style: {
+ marginLeft: '1.25em',
+ }
+ }, 'TOKENS'),
+
+ ]),
+ ]),
+
+ contentDivider,
+
+ this.renderTransactionListItem(),
+
+ contentDivider,
+
+ this.renderTransactionListItem(),
+
+ contentDivider,
+
+ // column
+ // tab row
+ // divider
+ // item
+ ])
+}
+
+TxList.prototype.renderTransactionListItem = function () {
+ return h('div.flex-column', {
+ style: {
+ alignItems: 'stretch',
+ margin: '0.6em 1.3em 0.6em 1.3em',
+ }
+ }, [
+
+ h('div', {
+ style: {
+ flexGrow: 1,
+ marginTop: '0.3em',
+ }
+ }, 'Jul 01, 2017'),
+
+ h('div.flex-row', {
+ style: {
+ alignItems: 'stretch',
+ }
+ }, [
+
+ h('div', {
+ style: {
+ flexGrow: 1,
+ }
+ }, 'icon'),
+
+ h('div', {
+ style: {
+ flexGrow: 3,
+ }
+ }, 'Hash'),
+
+ h('div', {
+ style: {
+ flexGrow: 5,
+ }
+ }, 'Status'),
+
+ h('div', {
+ style: {
+ flexGrow: 2,
+ }
+ }, 'Details'),
+
+ ])
+
+ ])
+}
+
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index 9d7bc9138..f0a93a2ab 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -10,6 +10,9 @@ const WalletView = require('./wallet-view')
// balance component
const BalanceComponent = require('./balance-component')
+// tx list
+const TxList = require('./tx-list')
+
const Identicon = require('./identicon')
// const AccountDropdowns = require('./account-dropdowns').AccountDropdowns
// const Content = require('./wallet-content-display')
@@ -22,6 +25,8 @@ function mapStateToProps (state) {
identities: state.metamask.identities,
accounts: state.metamask.accounts,
address: state.metamask.selectedAddress,
+ transactions: state.metamask.selectedAddressTxList || [],
+ shapeShiftTxList: state.metamask.shapeShiftTxList,
conversionRate: state.metamask.conversionRate,
currentCurrency: state.metamask.currentCurrency,
}
@@ -35,15 +40,6 @@ function mapDispatchToProps (dispatch) {
}
}
-const contentDivider = h('div', {
- style: {
- marginLeft: '1.3em',
- marginRight: '1.3em',
- height:'1px',
- background:'#E7E7E7', // TODO: make custom color
- },
-})
-
inherits(TxView, Component)
function TxView () {
Component.call(this)
@@ -56,7 +52,9 @@ TxView.prototype.render = function () {
var checksumAddress = selected && ethUtil.toChecksumAddress(selected)
var identity = props.identities[selected]
var account = props.accounts[selected]
- const { conversionRate, currentCurrency } = props
+ const { conversionRate, currentCurrency, transactions } = props
+
+ console.log(transactions)
return h('div.tx-view.flex-column', {
style: {},
@@ -114,7 +112,7 @@ TxView.prototype.render = function () {
// laptop: 10vw?
// phone: 75vw?
h('div.flex-row.flex-center.hero-balance-buttons', {
- style: {}
+ style: {},
}, [
h('button.btn-clear', {
style: {
@@ -135,97 +133,7 @@ TxView.prototype.render = function () {
]),
]),
- h('div.flex-row', {
- style: {
- margin: '1.8em 0.9em 0.8em 0.9em',
- }
- }, [
-
- // tx-view-tab.js
- h('div.flex-row', {
- }, [
-
- h('div', {
- style: {
- borderBottom: '0.07em solid black',
- paddingBottom: '0.015em',
- }
- }, 'TRANSACTIONS'),
-
- h('div', {
- style: {
- marginLeft: '1.25em',
- }
- }, 'TOKENS'),
-
- ]),
- ]),
-
- contentDivider,
-
- this.renderTransactionListItem(),
-
- contentDivider,
-
- this.renderTransactionListItem(),
-
- contentDivider,
+ h(TxList, {}),
])
- // column
- // tab row
- // divider
- // item
}
-
-TxView.prototype.renderTransactionListItem = function () {
- return h('div.flex-column', {
- style: {
- alignItems: 'stretch',
- margin: '0.6em 1.3em 0.6em 1.3em',
- }
- }, [
-
- h('div', {
- style: {
- flexGrow: 1,
- marginTop: '0.3em',
- }
- }, 'Jul 01, 2017'),
-
- h('div.flex-row', {
- style: {
- alignItems: 'stretch',
- }
- }, [
-
- h('div', {
- style: {
- flexGrow: 1,
- }
- }, 'icon'),
-
- h('div', {
- style: {
- flexGrow: 3,
- }
- }, 'Hash'),
-
- h('div', {
- style: {
- flexGrow: 5,
- }
- }, 'Status'),
-
- h('div', {
- style: {
- flexGrow: 2,
- }
- }, 'Details'),
-
- ])
-
- ])
-}
-
-