diff --git a/dist.zip b/dist.zip index 36fb13b96..fee4f5bca 100644 Binary files a/dist.zip and b/dist.zip differ diff --git a/dist/index.html b/dist/index.html index f6f7ba88a..c11fd96b7 100644 --- a/dist/index.html +++ b/dist/index.html @@ -35,7 +35,9 @@ + + diff --git a/js/app.js b/js/app.js index 0b03101ff..70cc95693 100644 --- a/js/app.js +++ b/js/app.js @@ -4,7 +4,7 @@ var App = React.createClass({ var match, param, val; [match, param, val] = window.location.search.match(/\??([^=]*)(?:=(.*))?/); - if (['settings', 'help', 'start', 'watch', 'report', 'files', 'claim', 'show'].indexOf(param) != -1) { + if (['settings', 'help', 'start', 'watch', 'report', 'files', 'claim', 'show', 'wallet'].indexOf(param) != -1) { var viewingPage = param; } else { var viewingPage = 'home'; @@ -58,8 +58,12 @@ var App = React.createClass({ return ; } else if (this.state.viewingPage == 'claim') { return ; + } else if (this.state.viewingPage == 'wallet') { + return ; } else if (this.state.viewingPage == 'show') { return ; + } else if (this.state.viewingPage == 'wallet') { + return ; } } }); diff --git a/js/lbry.js b/js/lbry.js index e7ab20239..eba2ce0bb 100644 --- a/js/lbry.js +++ b/js/lbry.js @@ -98,6 +98,11 @@ lbry.getBalance = function(callback) lbry.call("get_balance", {}, callback); } +lbry.sendToAddress = function(amount, address, callback, errorCallback) +{ + lbry.call("send_amount_to_address", { "amount" : amount, "address": address }, callback, errorCallback); +} + lbry.search = function(query, callback) { lbry.call("search_nametrie", { "search": query }, callback); diff --git a/js/page/home.js b/js/page/home.js index 73cf23d91..d0d88a918 100644 --- a/js/page/home.js +++ b/js/page/home.js @@ -376,10 +376,12 @@ var mainMenuStyle = { var MainMenu = React.createClass({ render: function() { var isLinux = /linux/i.test(navigator.userAgent); // @TODO: find a way to use getVersionInfo() here without messy state management + return (
+ {isLinux ? diff --git a/js/page/wallet.js b/js/page/wallet.js new file mode 100644 index 000000000..a0deaaeb9 --- /dev/null +++ b/js/page/wallet.js @@ -0,0 +1,113 @@ +var NewAddressSection = React.createClass({ + generateAddress: function() { + lbry.getNewAddress((results) => { + this.setState({ + address: results, + }) + }); + }, + getInitialState: function() { + return { + address: "", + } + }, + render: function() { + return ( +
+

Generate New Address

+
+ +
+ ); + } +}); + +var SendToAddressSection = React.createClass({ + sendToAddress: function() { + if ((this.state.balance - this.state.amount) < 1) + { + alert("Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.") + return; + } + + this.setState({ + results: "", + }); + + lbry.sendToAddress(this.state.amount, this.state.address, (results) => { + if(results === true) + { + this.setState({ + results: "Your transaction was successfully placed in the queue.", + }); + } + else + { + this.setState({ + results: "Something went wrong: " + results + }); + } + }, (error) => { + this.setState({ + results: "Something went wrong: " + error.faultString + " " + error.faultCode + }) + }); + }, + getInitialState: function() { + return { + address: "", + amount: 0.0, + balance: "Checking balance...", + results: "", + } + }, + componentWillMount: function() { + lbry.getBalance((results) => { + this.setState({ + balance: results, + }); + }); + }, + setAmount: function(event) { + this.setState({ + amount: parseFloat(event.target.value), + }) + }, + setAddress: function(event) { + this.setState({ + address: event.target.value, + }) + }, + render: function() { + return ( +
+

Send Credits

+
+
+ + + 0.0) || this.state.address == ""} /> +
+
+

Results:

+ {this.state.results} +
+
+ ); + } +}); + +var WalletPage = React.createClass({ + render: function() { + return ( +
+ + + +
+ +
+
+ ); + } +}); diff --git a/scss/_gui.scss b/scss/_gui.scss index 372863f42..d9216eea2 100644 --- a/scss/_gui.scss +++ b/scss/_gui.scss @@ -7,7 +7,7 @@ html } body { - font-family: 'Raleway', sans-serif; + font-family: 'Source Sans Pro', sans-serif; line-height: 1.3333; min-height: 100%; position: relative; @@ -17,6 +17,7 @@ body margin-left: auto; margin-right: auto; width: 800px; + padding-bottom: $spacing-vertical*3; &.full-screen { width: 100%; @@ -33,16 +34,43 @@ body section { margin-bottom: $spacing-vertical; + section { + /* Smaller padding around inner sections */ + margin-bottom: $spacing-vertical / 4; + } &:last-child { margin-bottom: 0; } } -h1 { font-size: 2.0em; margin-bottom: $spacing-vertical / 2; margin-top: $spacing-vertical; } -h2 { font-size: 1.75em; } +.section-block { + background-color: rgba(0,0,0,.05); + padding: $spacing-vertical; + border-radius: 2px; + margin-bottom: $spacing-vertical; +} + +h1 { + font-size: 2.0em; + margin-bottom: $spacing-vertical; + margin-top: $spacing-vertical*2; + font-family: 'Raleway', sans-serif; +} + +h2 { + font-size: 1.75em; +} + h3 { font-size: 1.4em; } -h4 { font-size: 1.2em; } + +h4 { + font-weight: 600; + font-size: 1.2em; + margin: 0; + margin-bottom: $spacing-vertical/2; +} + h5 { font-size: 1.1em; } sup, sub { vertical-align: baseline; @@ -50,7 +78,11 @@ sup, sub { } sup { top: -0.4em; } sub { top: 0.4em; } -label { cursor: pointer; } + +label { + cursor: default; + display: block; +} header { @@ -62,6 +94,9 @@ p margin-bottom: 0.8em; } +textarea { + height: 190px; +} .hidden { display: none; @@ -75,10 +110,25 @@ p input[type="search"] { border: 0 none; - border: 1px solid rgba(160,160,160,.5); + border: 2px solid rgba(160,160,160,.5); padding-left: 5px; padding-right: 5px; - height: $spacing-vertical * 1.5; + line-height: $spacing-vertical * 1.5; + margin-bottom: $spacing-vertical/2; +} + +input[type="text"], textarea +{ + border: 0 none; + border: 2px solid rgba(160,160,160,.5); + padding-left: 5px; + padding-right: 5px; + line-height: $spacing-vertical; + margin-bottom: $spacing-vertical/2; +} + +select { + margin-bottom: $spacing-vertical/2; } .busy-indicator @@ -106,10 +156,13 @@ input[type="search"] display: inline-block; height: $spacing-vertical * 1.5; line-height: $spacing-vertical * 1.5; - padding: 0 15px; + padding: 0 30px; text-decoration: none; border: 0 none; text-align: center; + border-radius: 2px; + box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); + text-transform: uppercase; + .button-block { margin-left: 20px; @@ -131,15 +184,12 @@ input[type="search"] .button-primary { color: white; - @include linear-gradient(lighten($color-primary, 5), darken($color-primary, 5)); background-color: $color-primary; - border: 1px solid black; + } .button-alt { - @include linear-gradient(lighten($color-light-alt, 5), darken($color-light-alt, 5)); - color: hsl(hue($color-primary), 85, 15); - border: 1px solid darken($color-primary, 10); + background-color: rgba(0,0,0,.15); } .button-text { @@ -171,6 +221,11 @@ input[type="search"] } } +.footer-buttons { + display: flex; + justify-content: center; +} + .icon:only-child { position: relative; top: 0.16em; @@ -183,7 +238,11 @@ input[type="search"] } } -.help -{ +.help { + font-size: .85em; color: $color-help; } + +.spacer-bottom--sm { + margin-bottom: $spacing-vertical/2; +} \ No newline at end of file