more fixes

ui/js/component/auth.js

@@ -104,21 +104,45 @@ const ConfirmEmailStage = React.createClass({
 });
 
 const WelcomeStage = React.createClass({
+  propTypes: {
+    endAuth: React.PropTypes.func,
+  },
+  getInitialState: function() {
+    return {
+      hasReward: false,
+      rewardAmount: null,
+    }
+  },
+  onRewardClaim: function(reward) {
+    this.setState({
+      hasReward: true,
+      rewardAmount: reward
+    })
+  },
   render: function() {
-    // <p>Thank you
     return (
-      <section>
+      !this.state.hasReward ?
-        <h3 className="modal__header">Welcome to LBRY.</h3>
+        <Modal type="custom" isOpen={true} contentLabel="Welcome to LBRY" {...this.props}>
-        <p>LBRY is kind of like a centaur. Totally normal up top, and <em>way different</em> underneath.</p>
+          <section>
-        <p>On the upper level, LBRY is like other popular video and media sites.</p>
+            <h3 className="modal__header">Welcome to LBRY.</h3>
-        <p>Below, LBRY is like nothing else. Through blockchain and decentralization, LBRY is controlled by it's users -- that is, you.</p>
+            <p>LBRY is kind of like a centaur. Totally normal up top, and <em>way different</em> underneath.</p>
-        <p>Here is a reward for reading our weird centaur metaphor:</p>
+            <p>On the upper level, LBRY is like other popular video and media sites.</p>
-        <div style={{textAlign: "center", marginBottom: "12px"}}>
+            <p>Below, LBRY is like nothing else. Using blockchain and decentralization, LBRY is controlled by its users -- that is, you -- and no one else.</p>
-          <RewardLink type="new_user" onRewardClaim={this.onRewardClaim} />
+            <p>Thanks for being a part of it! Here's a nickel, kid.</p>
-        </div>
+            <div style={{textAlign: "center", marginBottom: "12px"}}>
-        <p>This reward earned you <em>LBC</em>. LBC is used to watch stuff and to have say in how the network works.</p>
+              <RewardLink type="new_user" button="primary" onRewardClaim={this.onRewardClaim} onRewardFailure={this.props.endAuth} />
-        <p>But no need to understand it all just yet! Try watching something next.</p>
+            </div>
-      </section>
+          </section>
+         </Modal> :
+         <Modal type="alert" overlayClassName="modal-overlay modal-overlay--clear" isOpen={true} contentLabel="Welcome to LBRY" {...this.props} onConfirmed={this.props.endAuth}>
+          <section>
+            <h3 className="modal__header">About Your Reward</h3>
+            <p>You earned a reward of 5 LBRY credits, or <em>LBC</em>.</p>
+            <p>This reward will show in your Wallet momentarily, likely while you are reading this message.</p>
+            <p>LBC is used to compensate creators, to publish, and to have say in how the network works.</p>
+            <p>No need to understand it all just yet! Try watching or downloading something next.</p>
+          </section>
+      </Modal>
     );
   }
 });
@@ -152,12 +176,11 @@ export const AuthOverlay = React.createClass({
     error: ErrorStage,
     email: SubmitEmailStage,
     confirm: ConfirmEmailStage,
-    welcome: WelcomeStage,
+    welcome: WelcomeStage
   },
-
   getInitialState: function() {
     return {
-      stage: null,
+      stage: "pending",
       stageProps: {}
     };
   },
@@ -183,7 +206,13 @@ export const AuthOverlay = React.createClass({
           }
         })
       } else {
-        this.endAuth()
+        lbryio.call('reward', 'list', {}).then(function(userRewards) {
+          userRewards.filter(function(reward) {
+            return reward.RewardType == "new_user" && reward.TransactionID;
+          }).length ?
+             this.endAuth() :
+             this.setState({ stage: "welcome" })
+        }.bind(this));
       }
     }.bind(this)).catch((err) => {
       this.setState({
@@ -199,21 +228,17 @@ export const AuthOverlay = React.createClass({
     })
   },
   render: function() {
-    if (!this.state.stage || lbryio.user && lbryio.user.HasVerifiedEmail) {
+    if (!this.state.stage) {
-      if (this.state.stage != "welcome") {
         return null;
-      }
     }
     const StageContent = this._stages[this.state.stage];
     return (
       this.state.stage != "welcome" ?
-          <ModalPage className="modal-page--full"isOpen={true} contentLabel="Authentication" {...this.props}>
+          <ModalPage className="modal-page--full" isOpen={true} contentLabel="Authentication" {...this.props}>
             <h1>LBRY Early Access</h1>
             <StageContent {...this.state.stageProps} />
           </ModalPage> :
-          <Modal isOpen={true} contentLabel="Welcome to LBRY" {...this.props} onConfirmed={this.endAuth}>
+          <StageContent endAuth={this.endAuth} {...this.state.stageProps}  />
-            <StageContent {...this.state.stageProps} />
-          </Modal>
     );
   }
 });

ui/js/component/link.js

@@ -60,7 +60,8 @@ export let RewardLink = React.createClass({
   propTypes: {
     type: React.PropTypes.string.isRequired,
     claimed: React.PropTypes.bool,
-    onRewardClaim: React.PropTypes.func
+    onRewardClaim: React.PropTypes.func,
+    onRewardFailure: React.PropTypes.func
   },
   refreshClaimable: function() {
     switch(this.props.type) {
@@ -92,7 +93,6 @@ export let RewardLink = React.createClass({
       pending: true
     })
     rewards.claimReward(this.props.type).then(function(reward) {
-      console.log(reward);
       this.setState({
         pending: false,
         errorMessage: null
@@ -108,6 +108,9 @@ export let RewardLink = React.createClass({
     }.bind(this))
   },
   clearError: function() {
+    if (this.props.onRewardFailure) {
+      this.props.onRewardFailure()
+    }
     this.setState({
       errorMessage: null
     })
@@ -117,7 +120,7 @@ export let RewardLink = React.createClass({
       <div className="reward-link">
         {this.props.claimed
           ? <span><Icon icon="icon-check" /> Reward claimed.</span>
-          : <Link button="alt" disabled={this.state.pending || !this.state.claimable } label="Claim Reward" onClick={this.claimReward} />}
+          : <Link button={this.props.button ? this.props.button : 'alt'} disabled={this.state.pending || !this.state.claimable } label="Claim Reward" onClick={this.claimReward} />}
         {this.state.errorMessage ?
          <Modal isOpen={true} contentLabel="Reward Claim Error" className="error-modal" onConfirmed={this.clearError}>
            {this.state.errorMessage}

ui/js/component/modal-page.js

@@ -6,7 +6,7 @@ export const ModalPage = React.createClass({
     return (
       <ReactModal onCloseRequested={this.props.onAborted || this.props.onConfirmed} {...this.props}
                   className={(this.props.className || '') + ' modal-page'}
-                  overlayClassName={(this.props.overlayClassName || '') + ' modal-page-overlay'}>
+                  overlayClassName="modal-overlay">
         <div className="modal-page__content">
           {this.props.children}
         </div>

ui/js/component/modal.js

@@ -6,6 +6,7 @@ import {Link} from './link.js';
 export const Modal = React.createClass({
   propTypes: {
     type: React.PropTypes.oneOf(['alert', 'confirm', 'custom']),
+    overlay: React.PropTypes.bool,
     onConfirmed: React.PropTypes.func,
     onAborted: React.PropTypes.func,
     confirmButtonLabel: React.PropTypes.string,
@@ -16,6 +17,7 @@ export const Modal = React.createClass({
   getDefaultProps: function() {
     return {
       type: 'alert',
+      overlay: true,
       confirmButtonLabel: 'OK',
       abortButtonLabel: 'Cancel',
       confirmButtonDisabled: false,
@@ -26,7 +28,7 @@ export const Modal = React.createClass({
     return (
       <ReactModal onCloseRequested={this.props.onAborted || this.props.onConfirmed} {...this.props}
                   className={(this.props.className || '') + ' modal'}
-                  overlayClassName={(this.props.overlayClassName || '') + ' modal-overlay'}>
+                  overlayClassName={[null, undefined, ""].indexOf(this.props.overlayClassName) === -1 ? this.props.overlayClassName : 'modal-overlay'}>
         <div>
           {this.props.children}
         </div>

ui/js/component/snack-bar.js

@@ -13,7 +13,6 @@ export const SnackBar = React.createClass({
     }
   },
   handleSnackReceived: function(event) {
-    // console.log(event);
     // if (this._hideTimeout) {
     //   clearTimeout(this._hideTimeout);
     // }

ui/js/lbry.js

@@ -204,13 +204,6 @@ lbry.resolveName = function(name, callback) {
   });
 }
 
-lbry.getStream = function(name, callback) {
-  if (!name) {
-    throw new Error(`Name required.`);
-  }
-  lbry.call('get', { 'name': name }, callback);
-};
-
 lbry.getClaimInfo = function(name, callback) {
   if (!name) {
     throw new Error(`Name required.`);
@@ -654,6 +647,14 @@ lbry.claim_list_mine = function(params={}) {
   });
 }
 
+// lbry.get = function(params={}) {
+//   return function(params={}) {
+//     return new Promise((resolve, reject) => {
+//       jsonrpc.call(lbry.daemonConnectionString, "get", [params], resolve, reject, reject);
+//     });
+//   };
+// }
+
 lbry = new Proxy(lbry, {
   get: function(target, name) {
     if (name in target) {

ui/js/page/publish.js

@@ -3,11 +3,25 @@ import lbry from '../lbry.js';
 import uri from '../uri.js';
 import {FormField, FormRow} from '../component/form.js';
 import {Link} from '../component/link.js';
+import rewards from '../rewards.js';
 import Modal from '../component/modal.js';
 
 var PublishPage = React.createClass({
   _requiredFields: ['meta_title', 'name', 'bid'],
 
+  _requestPublishReward: function() {
+    lbryio.call('reward', 'list', {}).then(function(userRewards) {
+      //already rewarded
+      if (userRewards.filter(function (reward) {
+          return reward.RewardType == rewards.TYPE_FIRST_PUBLISH && reward.TransactionID;
+        }).length) {
+        return;
+      }
+      else {
+        rewards.claimReward(rewards.TYPE_FIRST_PUBLISH)
+      }
+    });
+  },
   _updateChannelList: function(channel) {
     // Calls API to update displayed list of channels. If a channel name is provided, will select
     // that channel at the same time (used immediately after creating a channel)
@@ -334,6 +348,7 @@ var PublishPage = React.createClass({
   },
   componentWillMount: function() {
     this._updateChannelList();
+    this._requestPublishReward();
   },
   componentDidMount: function() {
     document.title = "Publish";

ui/js/page/settings.js

@@ -78,20 +78,21 @@ var SettingsPage = React.createClass({
     if (!this.state.daemonSettings) {
       return null;
     }
-
+/*
+ <section className="card">
+ <div className="card__content">
+ <h3>Run on Startup</h3>
+ </div>
+ <div className="card__content">
+ <FormRow type="checkbox"
+ onChange={this.onRunOnStartChange}
+ defaultChecked={this.state.daemonSettings.run_on_startup}
+ label="Run LBRY automatically when I start my computer" />
+ </div>
+ </section>
+ */
     return (
       <main>
-        <section className="card">
-          <div className="card__content">
-            <h3>Run on Startup</h3>
-          </div>
-          <div className="card__content">
-            <FormRow type="checkbox"
-                     onChange={this.onRunOnStartChange}
-                     defaultChecked={this.state.daemonSettings.run_on_startup}
-                     label="Run LBRY automatically when I start my computer" />
-          </div>
-        </section>
         <section className="card">
           <div className="card__content">
             <h3>Download Directory</h3>

ui/js/rewards.js

@@ -3,23 +3,44 @@ import lbryio from './lbryio.js';
 
 function rewardMessage(type, amount) {
   return {
-    new_developer: "Your reward has been confirmed for registering as a new developer.",
+    new_developer: "You received ${amount} for registering as a new developer.",
     new_user: `You received ${amount} LBC new user reward.`,
-    confirm_email: "Your reward has been confirmed for verifying your email address.",
+    confirm_email: "You received ${amount} LBC for verifying your email address.",
-    first_publish: "Your reward has been confirmed for making your first publication.",
+    first_channel: "You received ${amount} LBC for creating a publisher identity.",
+    first_purchase: "You received ${amount} LBC for making your first purchase.",
+    first_publish: "You received ${amount} LBC for making your first publication.",
   }[type];
 }
 
 const rewards = {};
 
-rewards.claimReward = function(type) {
+rewards.TYPE_NEW_DEVELOPER = "new_developer",
+  rewards.TYPE_NEW_USER = "new_user",
+  rewards.TYPE_CONFIRM_EMAIL = "confirm_email",
+  rewards.TYPE_FIRST_CHANNEL = "first_channel",
+  rewards.TYPE_FIRST_PURCHASE = "first_purchase",
+  rewards.TYPE_FIRST_PUBLISH = "first_publish";
+
+rewards.claimReward = function (type) {
   return new Promise((resolve, reject) => {
-    console.log('top of promise body')
     lbry.get_new_address().then((address) => {
       const params = {
         reward_type: type,
         wallet_address: address,
       };
+      switch (type) {
+        case 'first_channel':
+          //params.transaction_id = RelevantTransactionID;
+          break;
+
+        case 'first_purchase':
+          //params.transaction_id = RelevantTransactionID;
+          break;
+
+        case 'first_channel':
+          //params.transaction_id = RelevantTransactionID;
+          break;
+      }
       lbryio.call('reward', 'new', params, 'post').then(({RewardAmount}) => {
         const
           message = rewardMessage(type, RewardAmount),

ui/scss/_gui.scss

@@ -147,79 +147,3 @@ p
   font-size: 0.85em;
   color: $color-help;
 }
-
-.modal-overlay {
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  background-color: rgba(255, 255, 255, 0.74902);
-  z-index: 9999;
-}
-
-.modal {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  border: 1px solid rgb(204, 204, 204);
-  background: rgb(255, 255, 255);
-  overflow: auto;
-  border-radius: 4px;
-  padding: $spacing-vertical;
-  box-shadow: $default-box-shadow;
-  max-width: 400px;
-}
-
-.modal__header {
-   margin-bottom: 5px;
-   text-align: center;
-}
-
-.modal__buttons {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  margin-top: 15px;
-}
-
-.modal__button {
-  margin: 0px 6px;
-}
-
-.error-modal-overlay {
-  background: rgba(#000, .88);
-}
-
-.error-modal__content {
-  display: flex;
-  padding: 0px 8px 10px 10px;
-}
-
-.error-modal__warning-symbol {
-  margin-top: 6px;
-  margin-right: 7px;
-}
-
-.download-started-modal__file-path {
-  word-break: break-all;
-}
-
-.error-modal {
-  max-width: none;
-  width: 400px;
-}
-.error-modal__error-list { /*shitty hack/temp fix for long errors making modals unusable*/
-  border: 1px solid #eee;
-  padding: 8px;
-  list-style: none;
-  max-height: 400px;
-  max-width: 400px;
-  overflow-y: hidden;
-}

ui/scss/all.scss

@@ -15,6 +15,7 @@
 @import "component/_load-screen.scss";
 @import "component/_channel-indicator.scss";
 @import "component/_notice.scss";
+@import "component/_modal.scss";
 @import "component/_modal-page.scss";
 @import "component/_snack-bar.scss";
 @import "page/_developer.scss";

ui/scss/component/_modal-page.scss

@@ -1,16 +1,4 @@
-.modal-page-overlay {
+@import "../global";
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  background-color: rgba(255, 255, 255, 0.74902);
-  z-index: 9999;
-}
 
 .modal-page {
   position: fixed;

ui/scss/component/_modal.scss

@@ -0,0 +1,81 @@
+@import "../global";
+
+.modal-overlay {
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  background-color: rgba(255, 255, 255, 0.74902);
+  z-index: 9999;
+}
+
+.modal-overlay--clear {
+  background-color: transparent;
+}
+
+.modal {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  border: 1px solid rgb(204, 204, 204);
+  background: rgb(255, 255, 255);
+  overflow: auto;
+  border-radius: 4px;
+  padding: $spacing-vertical;
+  box-shadow: $default-box-shadow;
+  max-width: 400px;
+}
+
+.modal__header {
+  margin-bottom: 5px;
+  text-align: center;
+}
+
+.modal__buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 15px;
+}
+
+.modal__button {
+  margin: 0px 6px;
+}
+
+.error-modal-overlay {
+  background: rgba(#000, .88);
+}
+
+.error-modal__content {
+  display: flex;
+  padding: 0px 8px 10px 10px;
+}
+
+.error-modal__warning-symbol {
+  margin-top: 6px;
+  margin-right: 7px;
+}
+
+.download-started-modal__file-path {
+  word-break: break-all;
+}
+
+.error-modal {
+  max-width: none;
+  width: 400px;
+}
+.error-modal__error-list { /*shitty hack/temp fix for long errors making modals unusable*/
+  border: 1px solid #eee;
+  padding: 8px;
+  list-style: none;
+  max-height: 400px;
+  max-width: 400px;
+  overflow-y: hidden;
+}