<commit_before>var NewAddressSection = React.createClass({
  generateAddress: function() {
    lbry.getNewAddress((results) => {
      this.setState({
        address: results,
      })
    });
  },
  getInitialState: function() {
    return {
      address: "",
    }
  },
  render: function() {
    return (
      <section className="card">
        <h3>Generate New Address</h3>
        <div className="form-row"><input type="text" size="60" value={this.state.address}></input></div>
        <div className="form-row form-row-submit"><Link button="primary" label="Generate" onClick={this.generateAddress} /></div>
      </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 className="card">
        <h3>Send Credits</h3>
        <div className="form-row">
          <label htmlFor="amount">Amount</label>
          <input id="amount" type="text" size="10" onChange={this.setAmount}></input>
        </div>
        <div className="form-row">
          <label htmlFor="address">Recipient address</label>
          <input id="address" type="text" size="60" onChange={this.setAddress}></input>
        </div>
        <div className="form-row form-row-submit">
          <Link button="primary" label="Send" onClick={this.sendToAddress} disabled={!(parseFloat(this.state.amount) > 0.0) || this.state.address == ""} />
        </div>
        {
          this.state.results ?
          <div className="form-row">
            <h4>Results</h4>
            {this.state.results}
          </div>
          : ''
        }
      </section>
    );
  }
});

var WalletPage = React.createClass({
  componentDidMount: function() {
    document.title = "My Wallet";
  },
  /*
  Below should be refactored so that balance is shared all of wallet page. Or even broader?
  What is the proper React pattern for sharing a global state like balance?
   */
  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(<tr className="transaction_history">
                    <th className="transaction_history">Amount</th>
                    <th className="transaction_history">Time</th>
                    <th className="transaction_history">Date</th>
                    <th className="transaction_history">Transaction</th>
                  </tr>);
        results.forEach(function(tx) {
          rows.push(<tr className="transaction_history">
                      <td className="transaction_history">{ (tx["amount"]>0 ? '+' : '' ) + tx["amount"] }</td>
                      <td className="transaction_history">{ (new Date(tx["time"])).toLocaleTimeString() }</td>
                      <td className="transaction_history">{ (new Date(tx["time"])).toLocaleDateString() }</td>
                      <td className="transaction_history"><commit_msg>fix date/time display<commit_after>var NewAddressSection = React.createClass({
  generateAddress: function() {
    lbry.getNewAddress((results) => {
      this.setState({
        address: results,
      })
    });
  },
  getInitialState: function() {
    return {
      address: "",
    }
  },
  render: function() {
    return (
      <section className="card">
        <h3>Generate New Address</h3>
        <div className="form-row"><input type="text" size="60" value={this.state.address}></input></div>
        <div className="form-row form-row-submit"><Link button="primary" label="Generate" onClick={this.generateAddress} /></div>
      </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 className="card">
        <h3>Send Credits</h3>
        <div className="form-row">
          <label htmlFor="amount">Amount</label>
          <input id="amount" type="text" size="10" onChange={this.setAmount}></input>
        </div>
        <div className="form-row">
          <label htmlFor="address">Recipient address</label>
          <input id="address" type="text" size="60" onChange={this.setAddress}></input>
        </div>
        <div className="form-row form-row-submit">
          <Link button="primary" label="Send" onClick={this.sendToAddress} disabled={!(parseFloat(this.state.amount) > 0.0) || this.state.address == ""} />
        </div>
        {
          this.state.results ?
          <div className="form-row">
            <h4>Results</h4>
            {this.state.results}
          </div>
          : ''
        }
      </section>
    );
  }
});

var WalletPage = React.createClass({
  componentDidMount: function() {
    document.title = "My Wallet";
  },
  /*
  Below should be refactored so that balance is shared all of wallet page. Or even broader?
  What is the proper React pattern for sharing a global state like balance?
   */
  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(<tr className="transaction_history">
                    <th className="transaction_history">Amount</th>
                    <th className="transaction_history">Time</th>
                    <th className="transaction_history">Date</th>
                    <th className="transaction_history">Transaction</th>
                  </tr>);
        results.forEach(function(tx) {
          rows.push(<tr className="transaction_history">
                      <td className="transaction_history">{ (tx["amount"]>0 ? '+' : '' ) + tx["amount"] }</td>
                      <td className="transaction_history">{ (new Date(parseInt(tx["time"])*1000)).toLocaleTimeString() }</td>
                      <td className="transaction_history">{ (new Date(parseInt(tx["time"])*1000)).toLocaleDateString() }</td>
                      <td className="transaction_history">
{'fraction_non_alphanumeric': 0.1556218246079081, 'fraction_numerical': 0.005301524188204109, 'mean_word_length': 2.2713150289017343, 'pattern_counts': {'":': 0, '<': 109, '<?xml version=': 0, '>': 123, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4579623', 'n_tokens_mistral': 2612, 'n_tokens_neox': 2581, 'n_words': 527}