From f823b570f3cc899649c820eecf62e0507226ebcb Mon Sep 17 00:00:00 2001 From: Sonata Green Date: Sat, 20 Aug 2016 14:52:03 -0500 Subject: [PATCH 01/13] Bare-bones transaction history. --- js/page/wallet.js | 37 ++++++++++++++++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/js/page/wallet.js b/js/page/wallet.js index acfd5e67b..7821d5c1c 100644 --- a/js/page/wallet.js +++ b/js/page/wallet.js @@ -117,13 +117,44 @@ var WalletPage = React.createClass({ getInitialState: function() { return { balance: "Checking balance...", + txlog: "Loading transactions...", } }, componentWillMount: function() { lbry.getBalance((results) => { this.setState({ balance: results, - }); + }) + }); + lbry.call('get_transaction_history', {}, (results) => { + var out = 'Transaction history loaded.' + if (results.length == 0) { + out = 'No transactions yet.'; + } else { + var rows = []; + rows.push( + Amount + Time + Date + Transaction + ); + results.forEach(function(tx) { + rows.push( + { (tx["amount"]>0 ? '+' : '' ) + tx["amount"] } + { (new Date(tx["time"])).toLocaleTimeString() } + { (new Date(tx["time"])).toLocaleDateString() } + + + { tx["txid"] } + + + ) + }); + out = {rows}
+ } + this.setState({ + txlog: out, + }) }); }, render: function() { @@ -139,6 +170,10 @@ var WalletPage = React.createClass({

Claim Invite Code

+
+

Transaction History

+ {this.state.txlog} +
); } From 0efe31e44485a0c881a4619028103aa9aa49ccb5 Mon Sep 17 00:00:00 2001 From: Sonata Green Date: Sat, 20 Aug 2016 15:38:01 -0500 Subject: [PATCH 02/13] fix date/time display --- js/page/wallet.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/page/wallet.js b/js/page/wallet.js index 7821d5c1c..749dffaae 100644 --- a/js/page/wallet.js +++ b/js/page/wallet.js @@ -141,8 +141,8 @@ var WalletPage = React.createClass({ results.forEach(function(tx) { rows.push( { (tx["amount"]>0 ? '+' : '' ) + tx["amount"] } - { (new Date(tx["time"])).toLocaleTimeString() } - { (new Date(tx["time"])).toLocaleDateString() } + { (new Date(parseInt(tx["time"])*1000)).toLocaleTimeString() } + { (new Date(parseInt(tx["time"])*1000)).toLocaleDateString() } { tx["txid"] } From 6b97cc7f6af11e3e1ca50da1aa9bd5d48471ef7b Mon Sep 17 00:00:00 2001 From: Sonata Green Date: Sat, 20 Aug 2016 15:38:27 -0500 Subject: [PATCH 03/13] prettify transaction log a bit --- scss/_gui.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/scss/_gui.scss b/scss/_gui.scss index 7f042b433..fc207d46e 100644 --- a/scss/_gui.scss +++ b/scss/_gui.scss @@ -211,4 +211,13 @@ input[type="text"], input[type="search"], textarea { margin-top: $spacing-vertical; } -} \ No newline at end of file +} + +td.transaction_history, tr.transaction_history { + padding: 4px; +} +a.transaction_explorer_link { + color: $color-primary; + text-decoration: underline; + font-family: monospace; +} From 0b5ec7be77f166c9ef9ada62f01c4a06faca62d0 Mon Sep 17 00:00:00 2001 From: Sonata Green Date: Sat, 20 Aug 2016 16:52:31 -0500 Subject: [PATCH 04/13] fix double transactions --- js/page/wallet.js | 34 +++++++++++++++++++++++----------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/js/page/wallet.js b/js/page/wallet.js index 749dffaae..32709640e 100644 --- a/js/page/wallet.js +++ b/js/page/wallet.js @@ -131,6 +131,7 @@ var WalletPage = React.createClass({ if (results.length == 0) { out = 'No transactions yet.'; } else { + var condensedTransactions = {}; var rows = []; rows.push( Amount @@ -139,18 +140,29 @@ var WalletPage = React.createClass({ Transaction ); results.forEach(function(tx) { - rows.push( - { (tx["amount"]>0 ? '+' : '' ) + tx["amount"] } - { (new Date(parseInt(tx["time"])*1000)).toLocaleTimeString() } - { (new Date(parseInt(tx["time"])*1000)).toLocaleDateString() } - - - { tx["txid"] } - - - ) + var txid = tx["txid"]; + if (!(txid in condensedTransactions)) { + condensedTransactions[txid] = 0; + } + condensedTransactions[txid] += parseFloat(tx["amount"]); }); - out = {rows}
+ results.forEach(function(tx) { + var txid = tx["txid"]; + var txval = condensedTransactions[txid]; + var txdate = new Date(parseInt(tx["time"])*1000); + if (txid in condensedTransactions && txval != 0) { + rows.push( + { (txval>0 ? '+' : '' ) + txval } + { txdate.toLocaleTimeString() } + { txdate.toLocaleDateString() } + + {txid} + + ); + delete condensedTransactions[tx["txid"]]; + } + }); + out = {rows}
} this.setState({ txlog: out, From a255d7aefa376de884db76e3eb7b0d0da953ba3e Mon Sep 17 00:00:00 2001 From: Sonata Green Date: Sun, 21 Aug 2016 12:54:37 -0500 Subject: [PATCH 05/13] use .table-standard for transaction history --- js/page/wallet.js | 24 ++++++++++++------------ scss/_gui.scss | 9 --------- 2 files changed, 12 insertions(+), 21 deletions(-) diff --git a/js/page/wallet.js b/js/page/wallet.js index 32709640e..7156967ff 100644 --- a/js/page/wallet.js +++ b/js/page/wallet.js @@ -133,11 +133,11 @@ var WalletPage = React.createClass({ } else { var condensedTransactions = {}; var rows = []; - rows.push( - Amount - Time - Date - Transaction + rows.push( + Amount + Time + Date + Transaction ); results.forEach(function(tx) { var txid = tx["txid"]; @@ -151,18 +151,18 @@ var WalletPage = React.createClass({ var txval = condensedTransactions[txid]; var txdate = new Date(parseInt(tx["time"])*1000); if (txid in condensedTransactions && txval != 0) { - rows.push( - { (txval>0 ? '+' : '' ) + txval } - { txdate.toLocaleTimeString() } - { txdate.toLocaleDateString() } - + rows.push( + { (txval>0 ? '+' : '' ) + txval } + { txdate.toLocaleTimeString() } + { txdate.toLocaleDateString() } + {txid} ); delete condensedTransactions[tx["txid"]]; } }); - out = {rows}
+ out = {rows}
} this.setState({ txlog: out, @@ -182,7 +182,7 @@ var WalletPage = React.createClass({

Claim Invite Code

-
+

Transaction History

{this.state.txlog}
diff --git a/scss/_gui.scss b/scss/_gui.scss index fc207d46e..5b7df0e5b 100644 --- a/scss/_gui.scss +++ b/scss/_gui.scss @@ -212,12 +212,3 @@ input[type="text"], input[type="search"], textarea margin-top: $spacing-vertical; } } - -td.transaction_history, tr.transaction_history { - padding: 4px; -} -a.transaction_explorer_link { - color: $color-primary; - text-decoration: underline; - font-family: monospace; -} From 1687518c6ed572bbfc7a3e7cdfab9943a755c524 Mon Sep 17 00:00:00 2001 From: Sonata Green Date: Sat, 20 Aug 2016 14:52:03 -0500 Subject: [PATCH 06/13] Bare-bones transaction history. --- js/page/wallet.js | 37 ++++++++++++++++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/js/page/wallet.js b/js/page/wallet.js index cca61907e..9241f76d0 100644 --- a/js/page/wallet.js +++ b/js/page/wallet.js @@ -117,13 +117,44 @@ var WalletPage = React.createClass({ getInitialState: function() { return { balance: "Checking balance...", + txlog: "Loading transactions...", } }, componentWillMount: function() { lbry.getBalance((results) => { this.setState({ balance: results, - }); + }) + }); + lbry.call('get_transaction_history', {}, (results) => { + var out = 'Transaction history loaded.' + if (results.length == 0) { + out = 'No transactions yet.'; + } else { + var rows = []; + rows.push( + Amount + Time + Date + Transaction + ); + results.forEach(function(tx) { + rows.push( + { (tx["amount"]>0 ? '+' : '' ) + tx["amount"] } + { (new Date(tx["time"])).toLocaleTimeString() } + { (new Date(tx["time"])).toLocaleDateString() } + + + { tx["txid"] } + + + ) + }); + out = {rows}
+ } + this.setState({ + txlog: out, + }) }); }, render: function() { @@ -139,6 +170,10 @@ var WalletPage = React.createClass({

Claim Invite Code

+
+

Transaction History

+ {this.state.txlog} +
); } From e2a1d53287e849e6d40e6a3234bcb616f02df528 Mon Sep 17 00:00:00 2001 From: Sonata Green Date: Sat, 20 Aug 2016 15:38:01 -0500 Subject: [PATCH 07/13] fix date/time display --- js/page/wallet.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/page/wallet.js b/js/page/wallet.js index 9241f76d0..f5c760a62 100644 --- a/js/page/wallet.js +++ b/js/page/wallet.js @@ -141,8 +141,8 @@ var WalletPage = React.createClass({ results.forEach(function(tx) { rows.push( { (tx["amount"]>0 ? '+' : '' ) + tx["amount"] } - { (new Date(tx["time"])).toLocaleTimeString() } - { (new Date(tx["time"])).toLocaleDateString() } + { (new Date(parseInt(tx["time"])*1000)).toLocaleTimeString() } + { (new Date(parseInt(tx["time"])*1000)).toLocaleDateString() } { tx["txid"] } From d8182c084c9adb1a54abb04e82c949e8087c2e17 Mon Sep 17 00:00:00 2001 From: Sonata Green Date: Sat, 20 Aug 2016 15:38:27 -0500 Subject: [PATCH 08/13] prettify transaction log a bit --- scss/_gui.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/scss/_gui.scss b/scss/_gui.scss index 7f042b433..fc207d46e 100644 --- a/scss/_gui.scss +++ b/scss/_gui.scss @@ -211,4 +211,13 @@ input[type="text"], input[type="search"], textarea { margin-top: $spacing-vertical; } -} \ No newline at end of file +} + +td.transaction_history, tr.transaction_history { + padding: 4px; +} +a.transaction_explorer_link { + color: $color-primary; + text-decoration: underline; + font-family: monospace; +} From 955db5fcfc37c9d68658fb3e631a23688bfbfff5 Mon Sep 17 00:00:00 2001 From: Sonata Green Date: Sat, 20 Aug 2016 16:52:31 -0500 Subject: [PATCH 09/13] fix double transactions --- js/page/wallet.js | 34 +++++++++++++++++++++++----------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/js/page/wallet.js b/js/page/wallet.js index f5c760a62..34041411b 100644 --- a/js/page/wallet.js +++ b/js/page/wallet.js @@ -131,6 +131,7 @@ var WalletPage = React.createClass({ if (results.length == 0) { out = 'No transactions yet.'; } else { + var condensedTransactions = {}; var rows = []; rows.push( Amount @@ -139,18 +140,29 @@ var WalletPage = React.createClass({ Transaction ); results.forEach(function(tx) { - rows.push( - { (tx["amount"]>0 ? '+' : '' ) + tx["amount"] } - { (new Date(parseInt(tx["time"])*1000)).toLocaleTimeString() } - { (new Date(parseInt(tx["time"])*1000)).toLocaleDateString() } - - - { tx["txid"] } - - - ) + var txid = tx["txid"]; + if (!(txid in condensedTransactions)) { + condensedTransactions[txid] = 0; + } + condensedTransactions[txid] += parseFloat(tx["amount"]); }); - out = {rows}
+ results.forEach(function(tx) { + var txid = tx["txid"]; + var txval = condensedTransactions[txid]; + var txdate = new Date(parseInt(tx["time"])*1000); + if (txid in condensedTransactions && txval != 0) { + rows.push( + { (txval>0 ? '+' : '' ) + txval } + { txdate.toLocaleTimeString() } + { txdate.toLocaleDateString() } + + {txid} + + ); + delete condensedTransactions[tx["txid"]]; + } + }); + out = {rows}
} this.setState({ txlog: out, From a4cd2f9b09fe3fe68683068af1a03cd01ea7951c Mon Sep 17 00:00:00 2001 From: Sonata Green Date: Sun, 21 Aug 2016 12:54:37 -0500 Subject: [PATCH 10/13] use .table-standard for transaction history --- js/page/wallet.js | 24 ++++++++++++------------ scss/_gui.scss | 9 --------- 2 files changed, 12 insertions(+), 21 deletions(-) diff --git a/js/page/wallet.js b/js/page/wallet.js index 34041411b..3d60e7caa 100644 --- a/js/page/wallet.js +++ b/js/page/wallet.js @@ -133,11 +133,11 @@ var WalletPage = React.createClass({ } else { var condensedTransactions = {}; var rows = []; - rows.push( - Amount - Time - Date - Transaction + rows.push( + Amount + Time + Date + Transaction ); results.forEach(function(tx) { var txid = tx["txid"]; @@ -151,18 +151,18 @@ var WalletPage = React.createClass({ var txval = condensedTransactions[txid]; var txdate = new Date(parseInt(tx["time"])*1000); if (txid in condensedTransactions && txval != 0) { - rows.push( - { (txval>0 ? '+' : '' ) + txval } - { txdate.toLocaleTimeString() } - { txdate.toLocaleDateString() } - + rows.push( + { (txval>0 ? '+' : '' ) + txval } + { txdate.toLocaleTimeString() } + { txdate.toLocaleDateString() } + {txid} ); delete condensedTransactions[tx["txid"]]; } }); - out = {rows}
+ out = {rows}
} this.setState({ txlog: out, @@ -182,7 +182,7 @@ var WalletPage = React.createClass({

Claim Invite Code

-
+

Transaction History

{this.state.txlog}
diff --git a/scss/_gui.scss b/scss/_gui.scss index fc207d46e..5b7df0e5b 100644 --- a/scss/_gui.scss +++ b/scss/_gui.scss @@ -212,12 +212,3 @@ input[type="text"], input[type="search"], textarea margin-top: $spacing-vertical; } } - -td.transaction_history, tr.transaction_history { - padding: 4px; -} -a.transaction_explorer_link { - color: $color-primary; - text-decoration: underline; - font-family: monospace; -} From 73e29b423be1948cd9c7a826d0db1fcdc0cd75cb Mon Sep 17 00:00:00 2001 From: Sonata Green Date: Mon, 22 Aug 2016 11:16:43 -0500 Subject: [PATCH 11/13] use BusyMessage on wallet page --- js/page/wallet.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/js/page/wallet.js b/js/page/wallet.js index 3d60e7caa..79024f562 100644 --- a/js/page/wallet.js +++ b/js/page/wallet.js @@ -57,7 +57,7 @@ var SendToAddressSection = React.createClass({ return { address: "", amount: 0.0, - balance: "Checking balance...", + balance: , results: "", } }, @@ -116,8 +116,8 @@ var WalletPage = React.createClass({ */ getInitialState: function() { return { - balance: "Checking balance...", - txlog: "Loading transactions...", + balance: , + txlog: , } }, componentWillMount: function() { @@ -127,7 +127,7 @@ var WalletPage = React.createClass({ }) }); lbry.call('get_transaction_history', {}, (results) => { - var out = 'Transaction history loaded.' + var out = '(You should never see this message. -- wallet.js WalletPage componentWillMount)' if (results.length == 0) { out = 'No transactions yet.'; } else { @@ -189,4 +189,4 @@ var WalletPage = React.createClass({ ); } -}); \ No newline at end of file +}); From f0c93ce1503d74b6809e48c28debf08df9f7deb1 Mon Sep 17 00:00:00 2001 From: Sonata Green Date: Wed, 24 Aug 2016 00:08:58 -0500 Subject: [PATCH 12/13] List newest transactions first --- js/page/wallet.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/page/wallet.js b/js/page/wallet.js index 79024f562..0229fd0b0 100644 --- a/js/page/wallet.js +++ b/js/page/wallet.js @@ -146,7 +146,7 @@ var WalletPage = React.createClass({ } condensedTransactions[txid] += parseFloat(tx["amount"]); }); - results.forEach(function(tx) { + results.reverse().forEach(function(tx) { var txid = tx["txid"]; var txval = condensedTransactions[txid]; var txdate = new Date(parseInt(tx["time"])*1000); From b4dac55d2676f88b01e1420395089494091f18bc Mon Sep 17 00:00:00 2001 From: Jeremy Kauffman Date: Sat, 27 Aug 2016 10:12:56 -0400 Subject: [PATCH 13/13] cleaned up transaction history, added header subnav style --- js/app.js | 45 ++++++++++--- js/component/common.js | 3 +- js/component/header.js | 39 +++++++++-- js/page/claim_code.js | 2 +- js/page/wallet.js | 148 ++++++++++++++++++++++++++--------------- scss/_canvas.scss | 59 ++++++++++++++-- scss/_gui.scss | 6 ++ scss/_table.scss | 4 ++ 8 files changed, 227 insertions(+), 79 deletions(-) diff --git a/js/app.js b/js/app.js index a052f804c..1c3a6fa7f 100644 --- a/js/app.js +++ b/js/app.js @@ -4,14 +4,11 @@ var App = React.createClass({ var match, param, val, viewingPage, drawerOpenRaw = sessionStorage.getItem('drawerOpen'); - [match, param, val] = window.location.search.match(/\??([^=]*)(?:=(.*))?/); + [match, viewingPage, val] = window.location.search.match(/\??([^=]*)(?:=(.*))?/); - if (param && ['settings', 'discover', 'help', 'start', 'watch', 'report', 'files', 'claim', 'show', 'wallet', 'publish'].indexOf(param) != -1) { - viewingPage = param; - } return { - viewingPage: viewingPage ? viewingPage : 'discover', + viewingPage: viewingPage, drawerOpen: drawerOpenRaw !== null ? JSON.parse(drawerOpenRaw) : true, pageArgs: val, }; @@ -72,12 +69,28 @@ var App = React.createClass({ pageArgs: term }); }, + getHeaderLinks: function() + { + switch(this.state.viewingPage) + { + case 'wallet': + case 'send': + case 'receive': + case 'claim': + return { + '?wallet' : 'Overview', + '?send' : 'Send', + '?receive' : 'Receive', + '?claim' : 'Claim Beta Code' + }; + default: + return null; + } + }, getMainContent: function() { switch(this.state.viewingPage) { - case 'discover': - return ; case 'settings': return ; case 'help': @@ -93,23 +106,33 @@ var App = React.createClass({ case 'claim': return ; case 'wallet': - return ; + case 'send': + case 'receive': + return ; + case 'send': + return ; + case 'receive': + return ; case 'show': return ; case 'publish': return ; + case 'discover': + default: + return ; } }, render: function() { - var mainContent = this.getMainContent(); + var mainContent = this.getMainContent(), + headerLinks = this.getHeaderLinks(); return ( this.state.viewingPage == 'watch' ? mainContent :
-
-
+
+
{mainContent}
diff --git a/js/component/common.js b/js/component/common.js index 9a5fd57e4..861685fa5 100644 --- a/js/component/common.js +++ b/js/component/common.js @@ -77,9 +77,10 @@ var CurrencySymbol = React.createClass({ var CreditAmount = React.createClass({ propTypes: { amount: React.PropTypes.number, + precision: React.PropTypes.number }, render: function() { - var formattedAmount = lbry.formatCredits(this.props.amount); + var formattedAmount = lbry.formatCredits(this.props.amount, this.props.precision ? this.props.precision : 1); return ( {formattedAmount} {parseFloat(formattedAmount) == 1.0 ? 'credit' : 'credits'} diff --git a/js/component/header.js b/js/component/header.js index 38ea57a40..4022f4019 100644 --- a/js/component/header.js +++ b/js/component/header.js @@ -44,14 +44,41 @@ var Header = React.createClass({ }, render: function() { return ( -