aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
Diffstat (limited to 'ui')
-rw-r--r--ui/app/account-detail.js146
-rw-r--r--ui/app/app.js3
-rw-r--r--ui/app/components/panel.js11
-rw-r--r--ui/app/components/transaction-list.js86
-rw-r--r--ui/app/conf-tx.js3
-rw-r--r--ui/app/css/index.css2
-rw-r--r--ui/app/css/lib.css6
-rw-r--r--ui/app/loading.js3
8 files changed, 149 insertions, 111 deletions
diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 884a5d9c5..663014293 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -42,85 +42,99 @@ AccountDetailScreen.prototype.render = function() {
return (
- h('.account-detail-section.flex-column.flex-grow', {
- style: {
- width: 330,
- marginTop: 28,
- },
- }, [
+ h('.account-detail-section.flex-column.flex-grow', [
- h('.flex-row.flex-space-between', [
+ // identicon, label, balance, etc
+ h('.account-data-subsection.flex-column.flex-grow', {
+ style: {
+ margin: '0 20px',
+ },
+ }, [
- // invisible placeholder for later
- h('i.fa.fa-users.fa-lg.color-orange', {
+ // header - identicon + nav
+ h('.flex-row.flex-space-between', {
style: {
- visibility: 'hidden',
+ marginTop: 28,
},
- }),
+ }, [
- // large identicon
- h('.identicon-wrapper.flex-column.flex-center.select-none', [
- h(Identicon, {
- diameter: 62,
- address: selected,
+ // invisible placeholder for later
+ h('i.fa.fa-users.fa-lg.color-orange', {
+ style: {
+ visibility: 'hidden',
+ },
}),
- ]),
-
- // small accounts nav
- h('i.fa.fa-users.fa-lg.cursor-pointer.color-orange', {
- onClick: this.navigateToAccounts.bind(this),
- }),
- ]),
+ // large identicon
+ h('.identicon-wrapper.flex-column.flex-center.select-none', [
+ h(Identicon, {
+ diameter: 62,
+ address: selected,
+ }),
+ ]),
+
+ // small accounts nav
+ h('i.fa.fa-users.fa-lg.cursor-pointer.color-orange', {
+ onClick: this.navigateToAccounts.bind(this),
+ }),
- h('h2.font-medium.color-forest.flex-center', {
- style: {
- paddingTop: 8,
- marginBottom: 32,
- },
- }, identity && identity.name),
+ ]),
- h('.flex-row.flex-space-between', {
- style: {
- marginBottom: 16,
- },
- }, [
+ // account label
+ h('h2.font-medium.color-forest.flex-center', {
+ style: {
+ paddingTop: 8,
+ marginBottom: 32,
+ },
+ }, identity && identity.name),
- h('div', {
+ // address and getter actions
+ h('.flex-row.flex-space-between', {
style: {
- lineHeight: '16px',
+ marginBottom: 16,
},
- }, addressSummary(selected)),
+ }, [
- h('i.fa.fa-download.fa-md.cursor-pointer.color-orange', {
- onClick: () => this.requestAccountExport(account.address),
- }),
+ h('div', {
+ style: {
+ lineHeight: '16px',
+ },
+ }, addressSummary(selected)),
- h('i.fa.fa-qrcode.fa-md.cursor-disabled.color-orange', {
- onClick: () => console.warn('QRCode not implented...'),
- }),
+ h('i.fa.fa-download.fa-md.cursor-pointer.color-orange', {
+ onClick: () => this.requestAccountExport(account.address),
+ }),
- h('i.fa.fa-clipboard.fa-md.cursor-pointer.color-orange', {
- onClick: () => copyToClipboard(account.address),
- }),
+ h('i.fa.fa-qrcode.fa-md.cursor-disabled.color-orange', {
+ onClick: () => console.warn('QRCode not implented...'),
+ }),
- ]),
+ h('i.fa.fa-clipboard.fa-md.cursor-pointer.color-orange', {
+ onClick: () => copyToClipboard(account.address),
+ }),
- h('.flex-row.flex-space-between', [
+ ]),
- h('div', {
- style: {
- lineHeight: '50px',
- },
- }, formatBalance(account.balance)),
+ // balance + send
+ h('.flex-row.flex-space-between', [
+
+ h('div', {
+ style: {
+ lineHeight: '50px',
+ },
+ }, formatBalance(account && account.balance)),
- h('button', {
- onClick: () => this.props.dispatch(actions.showSendPage()),
- }, 'SEND ETH'),
+ h('button', {
+ onClick: () => this.props.dispatch(actions.showSendPage()),
+ }, 'SEND ETH'),
+ ]),
+
]),
+ // subview (tx history, pk export confirm)
h(ReactCSSTransitionGroup, {
+ className: 'css-transition-group',
transitionName: 'main',
transitionEnterTimeout: 300,
transitionLeaveTimeout: 300,
@@ -155,15 +169,17 @@ AccountDetailScreen.prototype.transactionList = function() {
var state = this.props
var transactions = state.transactions
- return transactionList(transactions
- // only transactions that have a hash
- .filter(tx => tx.hash)
- // only transactions that are from the current address
- .filter(tx => tx.txParams.from === state.address)
- // only transactions that are on the current network
- .filter(tx => tx.txParams.metamaskNetworkId === state.networkVersion)
- // sort by recency
- .sort((a, b) => b.time - a.time), state.networkVersion)
+ var txsToRender = transactions
+ // only transactions that are from the current address
+ .filter(tx => tx.txParams.from === state.address)
+ // only transactions that are on the current network
+ .filter(tx => tx.txParams.metamaskNetworkId === state.networkVersion)
+ // only transactions that have a hash
+ .filter(tx => tx.hash)
+ // sort by recency
+ .sort((a, b) => b.time - a.time)
+
+ return transactionList(txsToRender, state.networkVersion)
}
AccountDetailScreen.prototype.navigateToAccounts = function(event){
diff --git a/ui/app/app.js b/ui/app/app.js
index 9f91aa47a..bd4249956 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -104,7 +104,8 @@ App.prototype.render = function() {
}
}, [
h(ReactCSSTransitionGroup, {
- transitionName: "main",
+ className: 'css-transition-group',
+ transitionName: 'main',
transitionEnterTimeout: 300,
transitionLeaveTimeout: 300,
}, [
diff --git a/ui/app/components/panel.js b/ui/app/components/panel.js
index 2f5a3715d..5d72d6068 100644
--- a/ui/app/components/panel.js
+++ b/ui/app/components/panel.js
@@ -18,12 +18,15 @@ Panel.prototype.render = function() {
var identity = state.identity || {}
var account = state.account || {}
var isFauceting = state.isFauceting
+ var style = {
+ flex: '1 0 auto',
+ }
+
+ if (state.onClick) style.cursor = 'pointer'
return (
h('.identity-panel.flex-row.flex-space-between', {
- style: {
- flex: '1 0 auto',
- },
+ style,
onClick: state.onClick,
}, [
@@ -42,7 +45,7 @@ Panel.prototype.render = function() {
return h('.flex-row.flex-space-between', {
key: '' + Math.round(Math.random() * 1000000),
}, [
- h('label.font-small', attr.key),
+ h('label.font-small.no-select', attr.key),
h('span.font-small', attr.value),
])
}),
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index 0c025cae3..e10dfecf3 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -5,50 +5,62 @@ const explorerLink = require('../../lib/explorer-link')
const Panel = require('./panel')
module.exports = function(transactions, network) {
- return h('section', [
+ return (
- h('.current-domain-panel.flex-center.font-small', [
- h('span', 'Transactions'),
- ]),
+ h('section.transaction-list', [
- h('.tx-list', {
+ h('h3.flex-center.text-transform-uppercase', {
+ style: {
+ background: '#EBEBEB',
+ },
+ }, [
+ 'Transactions',
+ ]),
+
+ h('.tx-list', {
style: {
overflowY: 'auto',
- height: '180px',
+ height: '204px',
+ margin: '0 20px',
textAlign: 'center',
},
- },
+ }, (
- [
-
- transactions.map((transaction) => {
-
- var panelOpts = {
- key: `tx-${transaction.hash}`,
- identiconKey: transaction.txParams.to,
+ transactions.length ?
+ transactions.map(renderTransaction)
+ :
+ [h('.flex-center', {
style: {
- cursor: 'pointer',
- },
- onClick: (event) => {
- var url = explorerLink(transaction.hash, parseInt(network))
- chrome.tabs.create({ url });
+ height: '100%',
},
- attributes: [
- {
- key: 'TO',
- value: addressSummary(transaction.txParams.to),
- },
- {
- key: 'VALUE',
- value: formatBalance(transaction.txParams.value),
- },
- ]
- }
-
- return h(Panel, panelOpts)
- })
- ]
- )
-
- ])
+ }, 'No transaction history...')]
+
+ ))
+
+ ])
+
+ )
}
+
+function renderTransaction(transaction){
+ var panelOpts = {
+ key: `tx-${transaction.hash}`,
+ identiconKey: transaction.txParams.to,
+ onClick: (event) => {
+ var url = explorerLink(transaction.hash, parseInt(network))
+ chrome.tabs.create({ url })
+ },
+ attributes: [
+ {
+ key: 'TO',
+ value: addressSummary(transaction.txParams.to),
+ },
+ {
+ key: 'VALUE',
+ value: formatBalance(transaction.txParams.value),
+ },
+ ]
+ }
+
+ return h(Panel, panelOpts)
+} \ No newline at end of file
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index 8ab79c3b9..9092c85c9 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -77,7 +77,8 @@ ConfirmTxScreen.prototype.render = function() {
warningIfExists(state.warning),
h(ReactCSSTransitionGroup, {
- transitionName: "main",
+ className: 'css-transition-group',
+ transitionName: 'main',
transitionEnterTimeout: 300,
transitionLeaveTimeout: 300,
}, [
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 9dbfb6518..18d921700 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -327,7 +327,7 @@ app sections
/* account detail screen */
.account-detail-section {
- margin: 0 20px;
+
}
/* tx confirm */
diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index 14ef272ad..22e578ec6 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/lib.css
@@ -100,7 +100,7 @@
}
.select-none {
- cursor: default;
+ cursor: inherit;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
@@ -139,6 +139,10 @@
font-weight: bold;
}
+.text-transform-uppercase {
+ text-transform: uppercase;
+}
+
.font-small {
font-size: 12px;
}
diff --git a/ui/app/loading.js b/ui/app/loading.js
index 9288256de..f6279d5cf 100644
--- a/ui/app/loading.js
+++ b/ui/app/loading.js
@@ -23,7 +23,8 @@ LoadingIndicator.prototype.render = function() {
return (
h(ReactCSSTransitionGroup, {
- transitionName: "loader",
+ className: 'css-transition-group',
+ transitionName: 'loader',
transitionEnterTimeout: 150,
transitionLeaveTimeout: 150,
}, [
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-17 20:12:13 +0800