Merge pull request #48 from lbryio/show-wallet-address

Show address on Wallet page

js/component/common.js

@@ -89,3 +89,17 @@ var CreditAmount = React.createClass({
     );
   }
 });
+
+var addressStyle = {
+  fontFamily: '"Consolas", "Lucida Console", "Adobe Source Code Pro", monospace',
+};
+var Address = React.createClass({
+  propTypes: {
+    address: React.PropTypes.string,
+  },
+  render: function() {
+    return (
+      <span style={addressStyle}>{this.props.address}</span>
+    );
+  }
+});

js/lbry.js

@@ -93,6 +93,10 @@ lbry.getNewAddress = function(callback) {
   lbry.call('get_new_address', {}, callback);
 }
 
+lbry.checkAddressIsMine = function(address, callback) { 
+  lbry.call('address_is_mine', {address: address}, callback);
+}
+
 lbry.getDaemonSettings = function(callback) {
   lbry.call('get_settings', {}, callback);
 }

js/page/wallet.js

@@ -1,22 +1,45 @@
-var NewAddressSection = React.createClass({
+var addressRefreshButtonStyle = {
-  generateAddress: function() {
+  fontSize: '11pt',
-    lbry.getNewAddress((results) => {
+};
+var AddressSection = React.createClass({
+  _refreshAddress: function() {
+    lbry.getNewAddress((address) => {
+      localStorage.setItem('wallet_address', address);
       this.setState({
-        address: results,
+        address: address,
-      })
+      });
     });
   },
   getInitialState: function() {
     return {
-      address: "",
+      address: null,
+    }
+  },
+  componentWillMount: function() {
+    var address = localStorage.getItem('wallet_address');
+    if (address === null) {
+      this._refreshAddress();
+    } else {
+      lbry.checkAddressIsMine(address, (isMine) => {
+        if (isMine) {
+          this.setState({
+            address: address,
+          });
+        } else {
+          this._refreshAddress();
+        }
+      });
     }
   },
   render: function() {
     return (
       <section className="card">
-        <h3>Generate New Address</h3>
+        <h3>Wallet Address</h3>
-        <div className="form-row"><input type="text" size="60" value={this.state.address}></input></div>
+        <p><Address address={this.state.address} /> <Link text="Get new address" icon='icon-refresh' onClick={this._refreshAddress} style={addressRefreshButtonStyle} /></p>
-        <div className="form-row form-row-submit"><Link button="primary" label="Generate" onClick={this.generateAddress} /></div>
+        <div className="help">
+          <p>Other LBRY users may send credits to you by entering this address on the "Send" page.</p>
+          You can generate a new address at any time, and any previous addresses will continue to work. Using multiple addresses can be helpful for keeping track of incoming payments from multiple sources.
+        </div>
       </section>
     );
   }
@@ -221,7 +244,7 @@ var WalletPage = React.createClass({
         </section>
         { this.props.viewingPage === 'wallet' ? <TransactionList /> : '' }
         { this.props.viewingPage === 'send' ? <SendToAddressSection /> : '' }
-        { this.props.viewingPage === 'receive' ? <NewAddressSection /> : '' }
+        { this.props.viewingPage === 'receive' ? <AddressSection /> : '' }
       </main>
     );
   }