Merge pull request #23 from lbryio/add-wallet-ui

Add Wallet UI

dist/index.html

@@ -35,7 +35,9 @@
       <script src="./js/page/my_files.js"></script>
       <script src="./js/page/start.js"></script>
       <script src="./js/page/claim_code.js"></script>
+      <script src="./js/page/wallet.js"></script>
       <script src="./js/page/show.js"></script>
+      <script src="./js/page/wallet.js"></script>
       <script src="./js/app.js"></script>
       <script src="./js/main.js"></script>
     </body>

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 <StartPage />;
     } else if (this.state.viewingPage == 'claim') {
       return <ClaimCodePage />;
+    } else if (this.state.viewingPage == 'wallet') {
+      return <WalletPage />;
     } else if (this.state.viewingPage == 'show') {
       return <DetailPage name={this.state.pageArgs}/>;
+    } else if (this.state.viewingPage == 'wallet') {
+      return <WalletPage />;
     }
   }
 });

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);

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 (
       <div style={mainMenuStyle}>
         <Menu {...this.props}>
           <MenuItem href='/?files' label="My Files" icon='icon-cloud-download' />
+          <MenuItem href='/?wallet' label="My Wallet" icon='icon-bank' />
           <MenuItem href='/?settings' label="Settings" icon='icon-gear' />
           <MenuItem href='/?help' label="Help" icon='icon-question-circle' />
           {isLinux ? <MenuItem href="/?start" label="Exit LBRY" icon="icon-close" />

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 (
+      <section>
+        <h1>Generate New Address</h1>
+        <section><input type="text" size="60" value={this.state.address}></input></section>
+        <Link button="primary" label="Generate" onClick={this.generateAddress} />
+      </section>
+    );
+  }
+});
+
+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 (
+      <section>
+        <h1>Send Credits</h1>
+        <section>
+          <section><label for="balance">Balance {this.state.balance}</label></section>
+          <label for="amount">Amount <input id="amount" type="text" size="10" onChange={this.setAmount}></input></label>
+          <label for="address">Recipient address <input id="address" type="text" size="60" onChange={this.setAddress}></input></label>
+          <Link button="primary" label="Send" onClick={this.sendToAddress} disabled={!(parseFloat(this.state.amount) > 0.0) || this.state.address == ""} />
+        </section>
+        <section className={!this.state.results ? 'hidden' : ''}>
+          <h4>Results:</h4>
+          {this.state.results}
+        </section>
+      </section>
+    );
+  }
+});
+
+var WalletPage = React.createClass({
+  render: function() {
+    return (
+      <main className="page">
+        <SubPageLogo />
+        <NewAddressSection />
+        <SendToAddressSection />
+        <section>
+          <Link href="/" label="<< Return" />
+        </section>
+      </main>
+    );
+  }
+});

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;
+}