From b953dc9ae133a83ab37ba664246693e470ee2ed0 Mon Sep 17 00:00:00 2001 From: John Whitton Date: Tue, 19 Apr 2016 12:34:49 -0700 Subject: Prototype Transaction Details in account-detail.js Rough prototype with hyperlink --- ui/app/account-detail.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'ui') diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 6ed23d482..b8d4100de 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -69,6 +69,23 @@ AccountDetailScreen.prototype.render = function() { }, }, 'EXPORT'), ]), + h('.flex-row.flex-space-around', [ + // h('button', 'GET ETH'), DISABLED UNTIL WORKING + + h('div.font-small', 'Transaction Summary'), + ]), + h('.flex-row.flex-space-around', [ + h('div.font-small','Transaction'), + h('div.font-small','Amount'), + ]), + h('.flex-row.flex-space-around', [ + // h('div'['href','0xfc37bda95ce571bd0a393e8e7f6da394f1420a57b7d53f7c93821bff61f9b580'), + h('a.font-small', + {href: 'http://testnet.etherscan.io/tx/0xfc37bda95ce571bd0a393e8e7f6da394f1420a57b7d53f7c93821bff61f9b580', + target: '_blank'}, + '0xfc37bda...b580'), + h('div.font-small','0.5000 ETH'), + ]), ]), this.exportedAccount(accountDetail), -- cgit v1.2.3 From c858b7058558fb05af350059bb02972aca1ade19 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 19 Apr 2016 15:07:15 -0700 Subject: Moved transaction-list into its own component --- ui/app/account-detail.js | 14 +++++----- ui/app/components/transaction-list.js | 49 +++++++++++++++++++++++++++++++++++ 2 files changed, 55 insertions(+), 8 deletions(-) create mode 100644 ui/app/components/transaction-list.js (limited to 'ui') diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index b8d4100de..ec3ca0005 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -5,6 +5,7 @@ const connect = require('react-redux').connect const copyToClipboard = require('copy-to-clipboard') const actions = require('./actions') const AccountPanel = require('./components/account-panel') +const transactionList = require('./components/transaction-list') module.exports = connect(mapStateToProps)(AccountDetailScreen) @@ -15,6 +16,7 @@ function mapStateToProps(state) { accounts: state.metamask.accounts, address: state.appState.currentView.context, accountDetail: accountDetail, + transactions: state.metamask.transactions, } } @@ -29,6 +31,7 @@ AccountDetailScreen.prototype.render = function() { var identity = state.identities[state.address] var account = state.accounts[state.address] var accountDetail = state.accountDetail + var transactions = state.transactions return ( @@ -78,14 +81,9 @@ AccountDetailScreen.prototype.render = function() { h('div.font-small','Transaction'), h('div.font-small','Amount'), ]), - h('.flex-row.flex-space-around', [ - // h('div'['href','0xfc37bda95ce571bd0a393e8e7f6da394f1420a57b7d53f7c93821bff61f9b580'), - h('a.font-small', - {href: 'http://testnet.etherscan.io/tx/0xfc37bda95ce571bd0a393e8e7f6da394f1420a57b7d53f7c93821bff61f9b580', - target: '_blank'}, - '0xfc37bda...b580'), - h('div.font-small','0.5000 ETH'), - ]), + + transactionList(transactions), + ]), this.exportedAccount(accountDetail), diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js new file mode 100644 index 000000000..d1cdf8604 --- /dev/null +++ b/ui/app/components/transaction-list.js @@ -0,0 +1,49 @@ +/* +transactions +: +Array[3] +0 +: +Object +id +: +1461025348948185 +status +: +"confirmed" +time +: +1461025348948 +txParams +: +Object +data +: +"0x90b98a11000000000000000000000000c5b8dbac4c1d3f152cdeb400e2313f309c410acb00000000000000000000000000000000000000000000000000000000000003e8" +from +: +"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825" +to +: +"0xcd1ca6275b45065c4db4ec024859f8fd9d8d44ba" +__proto__ +: +Object +*/ +const h = require('react-hyperscript') + +module.exports = function(transactions) { + return h('.tx-list', + transactions.map((transaction) => { + return h('.tx.flex-row.flex-space-around', [ + h('a.font-small', + { + href: 'http://testnet.etherscan.io/tx/0xfc37bda95ce571bd0a393e8e7f6da394f1420a57b7d53f7c93821bff61f9b580', + target: '_blank', + }, + '0xfc37bda...b580'), + h('div.font-small', '0.5000 ETH') + ]) + }) + ) +} -- cgit v1.2.3 From 13cac5943e7a84084e2e961572f7e8bc026d0c1b Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 19 Apr 2016 17:27:20 -0700 Subject: Move transaction list after account panel --- ui/app/account-detail.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) (limited to 'ui') diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index ec3ca0005..871c0e66c 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -72,20 +72,9 @@ AccountDetailScreen.prototype.render = function() { }, }, 'EXPORT'), ]), - h('.flex-row.flex-space-around', [ - // h('button', 'GET ETH'), DISABLED UNTIL WORKING - - h('div.font-small', 'Transaction Summary'), - ]), - h('.flex-row.flex-space-around', [ - h('div.font-small','Transaction'), - h('div.font-small','Amount'), - ]), - - transactionList(transactions), - ]), + transactionList(transactions), this.exportedAccount(accountDetail), // transaction table -- cgit v1.2.3 From 0a0a631af29eb1547f18f2f8072670db0e415372 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 19 Apr 2016 17:31:34 -0700 Subject: Improve some UI formatting --- ui/app/components/transaction-list.js | 44 +++++++++++++++++++++++++---------- ui/app/send.js | 2 +- 2 files changed, 33 insertions(+), 13 deletions(-) (limited to 'ui') diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js index d1cdf8604..e01c8c1f0 100644 --- a/ui/app/components/transaction-list.js +++ b/ui/app/components/transaction-list.js @@ -31,19 +31,39 @@ __proto__ Object */ const h = require('react-hyperscript') +const formatBalance = require('../util').formatBalance module.exports = function(transactions) { - return h('.tx-list', - transactions.map((transaction) => { - return h('.tx.flex-row.flex-space-around', [ - h('a.font-small', - { - href: 'http://testnet.etherscan.io/tx/0xfc37bda95ce571bd0a393e8e7f6da394f1420a57b7d53f7c93821bff61f9b580', - target: '_blank', + return h('details', [ + + h('summary', [ + h('div.font-small', {style: {display: 'inline'}}, 'Transaction Summary'), + ]), + + h('.flex-row.flex-space-around', [ + h('div.font-small','Transaction'), + h('div.font-small','Amount'), + ]), + + h('.tx-list', { + style: { + overflowY: 'auto', + height: '180px', }, - '0xfc37bda...b580'), - h('div.font-small', '0.5000 ETH') - ]) - }) - ) + }, + + transactions.map((transaction) => { + return h('.tx.flex-row.flex-space-around', [ + h('a.font-small', + { + href: 'http://testnet.etherscan.io/tx/0xfc37bda95ce571bd0a393e8e7f6da394f1420a57b7d53f7c93821bff61f9b580', + target: '_blank', + }, + '0xfc37bda...b580'), + h('div.font-small', formatBalance(transaction.txParams.value)) + ]) + }) + ) + + ]) } diff --git a/ui/app/send.js b/ui/app/send.js index 3cb56cb6e..ad4a27604 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -96,7 +96,7 @@ SendTransactionScreen.prototype.render = function() { }, 'Send') ]), - state.warning ? h('span.error', state.warning) : null, + state.warning ? h('span.error', state.warning.split('.')[0]) : null, ]) ) } -- cgit v1.2.3 From f79601ee58a07ec6275d4588845578795f550d84 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 19 Apr 2016 18:21:28 -0700 Subject: Generate explorer link to match current blockchain --- ui/app/account-detail.js | 5 ++++- ui/app/components/transaction-list.js | 42 +++++------------------------------ ui/index.js | 5 ++++- ui/lib/explorer-link.js | 12 ++++++++++ 4 files changed, 26 insertions(+), 38 deletions(-) create mode 100644 ui/lib/explorer-link.js (limited to 'ui') diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 871c0e66c..025644efe 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -17,6 +17,7 @@ function mapStateToProps(state) { address: state.appState.currentView.context, accountDetail: accountDetail, transactions: state.metamask.transactions, + networkVersion: state.networkVersion, } } @@ -74,7 +75,9 @@ AccountDetailScreen.prototype.render = function() { ]), ]), - transactionList(transactions), + transactionList(transactions + .filter(tx => tx.txParams.from === state.address) + .sort((a, b) => b.time - a.time), state.networkVersion), this.exportedAccount(accountDetail), // transaction table diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js index e01c8c1f0..865ce5370 100644 --- a/ui/app/components/transaction-list.js +++ b/ui/app/components/transaction-list.js @@ -1,39 +1,9 @@ -/* -transactions -: -Array[3] -0 -: -Object -id -: -1461025348948185 -status -: -"confirmed" -time -: -1461025348948 -txParams -: -Object -data -: -"0x90b98a11000000000000000000000000c5b8dbac4c1d3f152cdeb400e2313f309c410acb00000000000000000000000000000000000000000000000000000000000003e8" -from -: -"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825" -to -: -"0xcd1ca6275b45065c4db4ec024859f8fd9d8d44ba" -__proto__ -: -Object -*/ const h = require('react-hyperscript') const formatBalance = require('../util').formatBalance +const addressSummary = require('../util').addressSummary +const explorerLink = require('../../lib/explorer-link') -module.exports = function(transactions) { +module.exports = function(transactions, network) { return h('details', [ h('summary', [ @@ -41,7 +11,7 @@ module.exports = function(transactions) { ]), h('.flex-row.flex-space-around', [ - h('div.font-small','Transaction'), + h('div.font-small','To'), h('div.font-small','Amount'), ]), @@ -56,10 +26,10 @@ module.exports = function(transactions) { return h('.tx.flex-row.flex-space-around', [ h('a.font-small', { - href: 'http://testnet.etherscan.io/tx/0xfc37bda95ce571bd0a393e8e7f6da394f1420a57b7d53f7c93821bff61f9b580', + href: explorerLink(transaction.hash, parseInt(network)), target: '_blank', }, - '0xfc37bda...b580'), + addressSummary(transaction.txParams.to)), h('div.font-small', formatBalance(transaction.txParams.value)) ]) }) diff --git a/ui/index.js b/ui/index.js index 05d30d8d3..4ecce2fbe 100644 --- a/ui/index.js +++ b/ui/index.js @@ -32,7 +32,10 @@ function startApp(metamaskState, accountManager, opts){ // appState represents the current tab's popup state appState: { currentDomain: opts.currentDomain, - } + }, + + // Which blockchain we are using: + networkVersion: opts.networkVersion, }) // if unconfirmed txs, start on txConf page diff --git a/ui/lib/explorer-link.js b/ui/lib/explorer-link.js new file mode 100644 index 000000000..a2e7872f9 --- /dev/null +++ b/ui/lib/explorer-link.js @@ -0,0 +1,12 @@ +module.exports = function(hash, network) { + let prefix + switch (network) { + case 1: // main net + prefix = '' + case 2: // morden test net + prefix = 'testnet.' + default: + prefix = '' + } + return `http://${prefix}etherscan.io/tx/${hash}` +} -- cgit v1.2.3 From d6ab6bb4fa506c5fb9479b6e534ab74632c1b819 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 19 Apr 2016 18:56:22 -0700 Subject: Fix floating point input bug When sending a transaction, we were converting to BN before handling decimals, which meant we were losing any precision past a decimal point, since BN does not handle decimals! Put this numeric normalization into a utility function with a test around it and got it working. --- ui/app/send.js | 8 +++++--- ui/app/util.js | 14 +++++++++++--- 2 files changed, 16 insertions(+), 6 deletions(-) (limited to 'ui') diff --git a/ui/app/send.js b/ui/app/send.js index ad4a27604..d34accddc 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -108,11 +108,11 @@ SendTransactionScreen.prototype.back = function() { SendTransactionScreen.prototype.onSubmit = function(event) { var recipient = document.querySelector('input.address').value - var amount = new ethUtil.BN(document.querySelector('input.ether').value, 10) + + var inputAmount = parseFloat(document.querySelector('input.ether').value) var currency = document.querySelector('select.currency').value - var txData = document.querySelector('textarea.txData').value + var value = util.normalizeNumberToWei(inputAmount, currency) - var value = util.normalizeToWei(amount, currency) var balance = this.props.balance if (value.gt(balance)) { @@ -132,6 +132,8 @@ SendTransactionScreen.prototype.onSubmit = function(event) { from: this.props.address, value: '0x' + value.toString(16), } + + var txData = document.querySelector('textarea.txData').value if (txData) txParams.data = txData this.props.dispatch(actions.signTx(txParams)) diff --git a/ui/app/util.js b/ui/app/util.js index 18862fade..bacf00c66 100644 --- a/ui/app/util.js +++ b/ui/app/util.js @@ -28,6 +28,7 @@ module.exports = { ethToWei: ethToWei, weiToEth: weiToEth, normalizeToWei: normalizeToWei, + normalizeNumberToWei: normalizeNumberToWei, valueTable: valueTable, bnTable: bnTable, } @@ -85,13 +86,20 @@ function dataSize(data) { // returns a BN in wei function normalizeToWei(amount, currency) { try { - var ether = amount.div(bnTable[currency]) - var wei = ether.mul(bnTable.wei) - return wei + return amount.mul(bnTable.wei).div(bnTable[currency]) } catch (e) {} return amount } +var multiple = new ethUtil.BN('1000', 10) +function normalizeNumberToWei(n, currency) { + var enlarged = n * 1000 + console.log(`Enlarged, we have ${enlarged}`) + var amount = new ethUtil.BN(String(enlarged), 10) + console.log("Amount inside is "+ amount.toString(10)) + return normalizeToWei(amount, currency).div(multiple) +} + function readableDate(ms) { var date = new Date(ms) var month = date.getMonth() -- cgit v1.2.3 From 7276e8081672cd4d30f00cc76298d4fb28a9cca1 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 19 Apr 2016 18:58:34 -0700 Subject: Removed logs --- ui/app/util.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'ui') diff --git a/ui/app/util.js b/ui/app/util.js index bacf00c66..5dbcffa7e 100644 --- a/ui/app/util.js +++ b/ui/app/util.js @@ -94,9 +94,7 @@ function normalizeToWei(amount, currency) { var multiple = new ethUtil.BN('1000', 10) function normalizeNumberToWei(n, currency) { var enlarged = n * 1000 - console.log(`Enlarged, we have ${enlarged}`) var amount = new ethUtil.BN(String(enlarged), 10) - console.log("Amount inside is "+ amount.toString(10)) return normalizeToWei(amount, currency).div(multiple) } -- cgit v1.2.3 From 7455a0fa32850e46a3d7c84d39c549928274a248 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 19 Apr 2016 19:10:22 -0700 Subject: Improve transaction list title --- ui/app/components/transaction-list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js index 865ce5370..99a325e35 100644 --- a/ui/app/components/transaction-list.js +++ b/ui/app/components/transaction-list.js @@ -7,7 +7,7 @@ module.exports = function(transactions, network) { return h('details', [ h('summary', [ - h('div.font-small', {style: {display: 'inline'}}, 'Transaction Summary'), + h('div.font-small', {style: {display: 'inline'}}, 'Transactions'), ]), h('.flex-row.flex-space-around', [ -- cgit v1.2.3