From d72e077ad3e7ba6199c70aa37edd3c6fcee55ef2 Mon Sep 17 00:00:00 2001
From: Jonas Whidden <jonas.whidden@lbry.io>
Date: Mon, 18 Jul 2016 17:40:15 -0500
Subject: [PATCH] Add basic wallet functionality

---
 dist/index.html   |  1 +
 js/app.js         |  4 +-
 js/lbry.js        |  5 +++
 js/page/home.js   |  2 +
 js/page/wallet.js | 98 +++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 109 insertions(+), 1 deletion(-)
 create mode 100644 js/page/wallet.js

diff --git a/dist/index.html b/dist/index.html
index f6f7ba88a..82aad73c9 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -36,6 +36,7 @@
       <script src="./js/page/start.js"></script>
       <script src="./js/page/claim_code.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>
diff --git a/js/app.js b/js/app.js
index 0b03101ff..48a77eeb6 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';
@@ -60,6 +60,8 @@ var App = React.createClass({
       return <ClaimCodePage />;
     } else if (this.state.viewingPage == 'show') {
       return <DetailPage name={this.state.pageArgs}/>;
+    } else if (this.state.viewingPage == 'wallet') {
+      return <WalletPage />;
     }
   }
 });
diff --git a/js/lbry.js b/js/lbry.js
index e7ab20239..e6cd49898 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)
+{
+  lbry.call("send_to_address", { "amount" : amount, "address": address }, callback);
+}
+
 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..0338c2a95 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
+    // @TODO: Need a wallet icon
     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-gear' />
           <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" />
diff --git a/js/page/wallet.js b/js/page/wallet.js
new file mode 100644
index 000000000..e52a73563
--- /dev/null
+++ b/js/page/wallet.js
@@ -0,0 +1,98 @@
+var NewAddressSection = React.createClass({
+  generateAddress: function() {
+    lbry.getNewAddress((results) => {
+      this.setState({
+        address: results,
+      })
+    });
+  },
+  getInitialState: function() {
+    return {
+      address: "",
+    }
+  },
+  render: function() {
+    return (
+      <div>
+        <h1>Create New Address:</h1>
+        <button type="button" onClick={this.generateAddress}>Generate New Address</button> <input type="text" size="60" value={this.state.address}></input>
+      </div>
+    );
+  }
+});
+
+var SendToAddressSection = React.createClass({
+  sendToAddress: function() {
+    this.setState({
+      results: "",
+    });
+
+    lbry.sendToAddress((results) => {
+      if(results === true)
+      {
+        this.setState({
+          results: "Your transaction was completed successfully.",
+        });
+      }
+      else
+      {
+        this.setState({
+          results: "Something went wrong: " + results
+        });
+      }
+    });
+  },
+  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: event.target.value,
+    })
+  },
+  setAddress: function(event) {
+    this.setState({
+      address: event.target.value,
+    })
+  },
+  render: function() {
+    return (
+      <div>
+        <h1>Send To Address:</h1>
+        <label for="balance">Balance: {this.state.balance}</label><br />
+        <label for="amount">Amount:</label> <input id="amount" type="number" size="10" onChange={this.setAmount}></input><br />
+        <label for="address">Address:</label> <input id="address" type="text" size="60" onChange={this.setAddress}></input><br />
+        <button type="button" onClick={this.sendToAddress}>Send Amount to Address</button><br /><br />
+        <h4>Results:</h4>
+        <span>{this.state.results}</span>
+      </div>
+    );
+  }
+});
+
+var WalletPage = React.createClass({
+  render: function() {
+    return (
+      <main className="page">
+        <SubPageLogo />
+        <NewAddressSection /><br />
+        <SendToAddressSection /><br />
+        <section>
+          <Link href="/" label="<< Return" />
+        </section>
+      </main>
+    );
+  }
+});