better?

merging is hard releasable?
2017-08-25 23:21:26 -04:00 · 2017-08-25 23:21:26 -04:00 · c7522dc0a5
parent 2fb0bf4a14
commit c7522dc0a5
46 changed files with 519 additions and 276 deletions
--- a/ui/js/actions/app.js
+++ b/ui/js/actions/app.js
@ -26,6 +26,10 @@ const { lbrySettings: config } = require("../../../app/package.json");

 export function doNavigate(path, params = {}, options = {}) {
  return function(dispatch, getState) {
+    if (!path) {
+      return;
+    }
+
    let url = path;
    if (params) url = `${url}?${toQueryString(params)}`;

--- a/ui/js/actions/rewards.js
+++ b/ui/js/actions/rewards.js
@ -3,6 +3,7 @@ import * as modals from "constants/modal_types";
 import lbryio from "lbryio";
 import rewards from "rewards";
 import { selectUnclaimedRewardsByType } from "selectors/rewards";
+import { selectUserIsRewardApproved } from "selectors/user";

 export function doRewardList() {
  return function(dispatch, getState) {
@ -31,14 +32,23 @@ export function doRewardList() {

 export function doClaimRewardType(rewardType) {
  return function(dispatch, getState) {
-    const rewardsByType = selectUnclaimedRewardsByType(getState()),
-      reward = rewardsByType[rewardType];
+    const state = getState(),
+      rewardsByType = selectUnclaimedRewardsByType(state),
+      reward = rewardsByType[rewardType],
+      userIsRewardApproved = selectUserIsRewardApproved(state);

    if (reward.transaction_id) {
      //already claimed, do nothing
      return;
    }

+    if (!userIsRewardApproved) {
+      return dispatch({
+        type: types.OPEN_MODAL,
+        data: { modal: modals.REWARD_APPROVAL_REQUIRED },
+      });
+    }
+
    dispatch({
      type: types.CLAIM_REWARD_STARTED,
      data: { reward },
--- a/ui/js/actions/user.js
+++ b/ui/js/actions/user.js
@ -1,7 +1,6 @@
 import * as types from "constants/action_types";
 import * as modals from "constants/modal_types";
 import lbryio from "lbryio";
-import { doOpenModal } from "actions/app";
 import { doOpenModal, doShowSnackBar } from "actions/app";
 import { doRewardList, doClaimRewardType } from "actions/rewards";
 import { selectEmailToVerify, selectUser } from "selectors/user";
--- a/ui/js/component/cardVerify/view.jsx
+++ b/ui/js/component/cardVerify/view.jsx
@ -165,7 +165,7 @@ class CardVerify extends React.Component {
  render() {
    return (
      <Link
-        button="primary"
+        button="alt"
        label={this.props.label}
        icon="icon-lock"
        disabled={
--- a/ui/js/component/fileActions/view.jsx
+++ b/ui/js/component/fileActions/view.jsx
@ -167,18 +167,20 @@ class FileActions extends React.PureComponent {
      <section className="file-actions">
        {content}
        {showMenu
-          ? <DropDownMenu>
-              <DropDownMenuItem
-                key={0}
-                onClick={() => openInFolder(fileInfo)}
-                label={openInFolderMessage}
-              />
-              <DropDownMenuItem
-                key={1}
-                onClick={() => openModal(modals.CONFIRM_FILE_REMOVE)}
-                label={__("Remove...")}
-              />
-            </DropDownMenu>
+          ? <div className="button-set-item">
+              <DropDownMenu>
+                <DropDownMenuItem
+                  key={0}
+                  onClick={() => openInFolder(fileInfo)}
+                  label={openInFolderMessage}
+                />
+                <DropDownMenuItem
+                  key={1}
+                  onClick={() => openModal(modals.CONFIRM_FILE_REMOVE)}
+                  label={__("Remove...")}
+                />
+              </DropDownMenu>
+            </div>
          : ""}
        <Modal
          type="confirm"
--- a/ui/js/component/inviteList/view.jsx
+++ b/ui/js/component/inviteList/view.jsx
@ -47,11 +47,14 @@ class InviteList extends React.PureComponent {
                      <td className="text-center">
                        {invitee.invite_reward_claimed
                          ? <Icon icon="icon-check" />
-                          : <RewardLink
-                              label={__("Claim")}
-                              button="text"
-                              reward_type={rewards.TYPE_FIRST_PUBLISH}
-                            />}
+                          : invitee.invite_accepted
+                            ? <RewardLink
+                                label={__("Claim")}
+                                reward_type={rewards.TYPE_FIRST_PUBLISH}
+                              />
+                            : <span className="empty">
+                                {__("unclaimable")}
+                              </span>}
                      </td>
                    </tr>
                  );
--- a/ui/js/component/inviteNew/index.js
+++ b/ui/js/component/inviteNew/index.js
@ -6,13 +6,21 @@ import {
  selectUserInviteNewIsPending,
  selectUserInviteNewErrorMessage,
 } from "selectors/user";
+import rewards from "rewards";
+import { makeSelectRewardAmountByType } from "selectors/rewards";
+
 import { doUserInviteNew } from "actions/user";

-const select = state => ({
-  errorMessage: selectUserInviteNewErrorMessage(state),
-  invitesRemaining: selectUserInvitesRemaining(state),
-  isPending: selectUserInviteNewIsPending(state),
-});
+const select = state => {
+  const selectReward = makeSelectRewardAmountByType();
+
+  return {
+    errorMessage: selectUserInviteNewErrorMessage(state),
+    invitesRemaining: selectUserInvitesRemaining(state),
+    isPending: selectUserInviteNewIsPending(state),
+    rewardAmount: selectReward(state, { reward_type: rewards.TYPE_REFERRAL }),
+  };
+};

 const perform = dispatch => ({
  inviteNew: email => dispatch(doUserInviteNew(email)),
--- a/ui/js/component/inviteNew/view.jsx
+++ b/ui/js/component/inviteNew/view.jsx
@ -1,5 +1,5 @@
 import React from "react";
-import { BusyMessage } from "component/common";
+import { BusyMessage, CreditAmount } from "component/common";
 import Link from "component/link";
 import { FormRow } from "component/form.js";

@ -62,15 +62,15 @@ class InviteNew extends React.PureComponent {
      inviteNew,
      inviteStatusIsPending,
      isPending,
+      rewardAmount,
    } = this.props;

    return (
      <section className="card">
        <div className="card__title-primary">
+          <CreditAmount amount={rewardAmount} />
          <h3>
-            {__(
-              "Invite a Friend (or Enemy) (or Someone You Are Somewhat Ambivalent About)"
-            )}
+            {__("Invite a Friend")}
          </h3>
        </div>
        {/*
@ -81,6 +81,11 @@ class InviteNew extends React.PureComponent {
            <p className="empty">{__("You have no invites.")}</p>}
        </div> */}
        <div className="card__content">
+          <p>
+            {__(
+              "Or an enemy. Or your cousin Jerry, who you're kind of unsure about."
+            )}
+          </p>
          <FormInviteNew
            errorMessage={errorMessage}
            inviteNew={inviteNew}
--- a/ui/js/component/inviteSummary/index.js
+++ b/ui/js/component/inviteSummary/index.js
@ -1,14 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import {
-  selectUserInvitesRemaining,
-  selectUserInviteNewIsPending,
-} from "selectors/user";
-import InviteSummary from "./view";
-
-const select = state => ({
-  invitesRemaining: selectUserInvitesRemaining(state),
-  isPending: selectUserInviteNewIsPending(state),
-});
-
-export default connect(select)(InviteSummary);
--- a/ui/js/component/inviteSummary/view.jsx
+++ b/ui/js/component/inviteSummary/view.jsx
@ -1,35 +0,0 @@
-import React from "react";
-import Link from "component/link";
-import { CreditAmount, BusyMessage } from "component/common";
-
-const InviteSummary = props => {
-  const { isPending, invitesRemaining } = props;
-
-  return (
-    <section className="card">
-      <div className="card__title-primary">
-        <h3>{__("Invites")}</h3>
-      </div>
-      <div className="card__content">
-        {isPending && <BusyMessage message={__("Checking invite status")} />}
-        {!isPending &&
-          <p>
-            {__n(
-              "You have %d invite remaining.",
-              "You have %d invites remaining.",
-              invitesRemaining
-            )}
-          </p>}
-      </div>
-      <div className="card__content">
-        <Link
-          button={invitesRemaining > 0 ? "primary" : "text"}
-          navigate="/invite"
-          label={__("Go To Invites")}
-        />
-      </div>
-    </section>
-  );
-};
-
-export default InviteSummary;
--- a/ui/js/component/link/view.jsx
+++ b/ui/js/component/link/view.jsx
@ -22,11 +22,11 @@ const Link = props => {
    (button ? " button-block button-" + button + " button-set-item" : "") +
    (disabled ? " disabled" : "");

-  const onClick = props.onClick
-    ? props.onClick
-    : () => {
+  const onClick = !props.onClick && navigate
+    ? () => {
        doNavigate(navigate);
-      };
+      }
+    : props.onClick;

  let content;
  if (children) {
--- a/ui/js/component/rewardLink/view.jsx
+++ b/ui/js/component/rewardLink/view.jsx
@ -16,7 +16,7 @@ const RewardLink = props => {
  return (
    <div className="reward-link">
      <Link
-        button={button ? button : "alt"}
+        button={button}
        disabled={isPending}
        label={
          isPending ? __("Claiming...") : label ? label : __("Claim Reward")
--- a/ui/js/component/rewardSummary/view.jsx
+++ b/ui/js/component/rewardSummary/view.jsx
@ -18,12 +18,9 @@ const RewardSummary = props => {
            unclaimed rewards.
          </p>}
      </div>
-      <div className="card__content">
-        <Link
-          button={unclaimedRewardAmount > 0 ? "primary" : "text"}
-          navigate="/rewards"
-          label={__("Go To Rewards")}
-        />
+      <div className="card__actions card__actions--bottom">
+        <Link button="text" navigate="/rewards" label={__("Rewards")} />
+        <Link button="text" navigate="/invite" label={__("Invites")} />
      </div>
    </section>
  );
--- a/ui/js/component/rewardTile/view.jsx
+++ b/ui/js/component/rewardTile/view.jsx
@ -1,6 +1,8 @@
 import React from "react";
 import { CreditAmount, Icon } from "component/common";
 import RewardLink from "component/rewardLink";
+import Link from "component/link";
+import rewards from "rewards";

 const RewardTile = props => {
  const { reward } = props;
@ -14,12 +16,19 @@ const RewardTile = props => {
          <CreditAmount amount={reward.reward_amount} />
          <h3>{reward.reward_title}</h3>
        </div>
-        <div className="card__actions">
-          {claimed
-            ? <span><Icon icon="icon-check" /> {__("Reward claimed.")}</span>
-            : <RewardLink reward_type={reward.reward_type} />}
-        </div>
        <div className="card__content">{reward.reward_description}</div>
+        <div className="card__actions card__actions--bottom ">
+          {reward.reward_type == rewards.TYPE_REFERRAL &&
+            <Link
+              button="alt"
+              navigate="/invite"
+              label={__("Go To Invites")}
+            />}
+          {reward.reward_type !== rewards.TYPE_REFERRAL &&
+            (claimed
+              ? <span><Icon icon="icon-check" /> {__("Reward claimed.")}</span>
+              : <RewardLink button="alt" reward_type={reward.reward_type} />)}
+        </div>
      </div>
    </section>
  );
--- a/ui/js/component/router/view.jsx
+++ b/ui/js/component/router/view.jsx
@ -30,7 +30,6 @@ const Router = props => {
  const { currentPage, params } = props;

  return route(currentPage, {
-    address: <ReceiveCreditsPage params={params} />,
    auth: <AuthPage params={params} />,
    backup: <BackupPage params={params} />,
    channel: <ChannelPage params={params} />,
@ -42,6 +41,7 @@ const Router = props => {
    invite: <InvitePage params={params} />,
    publish: <PublishPage params={params} />,
    published: <FileListPublished params={params} />,
+    receive: <ReceiveCreditsPage params={params} />,
    report: <ReportPage params={params} />,
    rewards: <RewardsPage params={params} />,
    search: <SearchPage params={params} />,
--- a/ui/js/component/transactionListRecent/view.jsx
+++ b/ui/js/component/transactionListRecent/view.jsx
@ -26,7 +26,7 @@ class TransactionListRecent extends React.PureComponent {
            />}
        </div>
        {hasTransactions &&
-          <div className="card__content">
+          <div className="card__actions card__actions--bottom">
            <Link
              navigate="/history"
              label={__("See Full History")}
--- a/ui/js/component/userEmailNew/view.jsx
+++ b/ui/js/component/userEmailNew/view.jsx
@ -31,6 +31,16 @@ class UserEmailNew extends React.PureComponent {
          this.handleSubmit(event);
        }}
      >
+        <p>
+          {__(
+            "This process is required to prevent abuse of the rewards program."
+          )}
+        </p>
+        <p>
+          {__(
+            "We will also contact you about updates and new content, but you can unsubscribe at any time."
+          )}
+        </p>
        <FormRow
          type="text"
          label="Email"
--- a/ui/js/component/userVerify/view.jsx
+++ b/ui/js/component/userVerify/view.jsx
@ -26,37 +26,121 @@ class UserVerify extends React.PureComponent {
    const { errorMessage, isPending, navigate } = this.props;
    return (
      <div>
-        <p>
-          {__(
-            "To ensure you are a real person, we require a valid credit or debit card."
-          ) +
-            " " +
-            __("There is no charge at all, now or in the future.") +
-            " "}
-          <Link
-            href="https://lbry.io/faq/identity-requirements"
-            label={__("Read More")}
-          />
-        </p>
-        {errorMessage && <p className="form-field__error">{errorMessage}</p>}
-        <p>
-          <CardVerify
-            label={__("Link Card and Finish")}
-            disabled={isPending}
-            token={this.onToken.bind(this)}
-            stripeKey={lbryio.getStripeToken()}
-          />
-        </p>
-        <p>
-          {__(
-            "You can continue without this step, but you will not be eligible to earn rewards."
-          )}
-        </p>
-        <Link
-          onClick={() => navigate("/discover")}
-          button="alt"
-          label={__("Skip Rewards")}
-        />
+        <section className="card card--form">
+          <div className="card__title-primary">
+            <h1>{__("Final Human Proof")}</h1>
+          </div>
+          <div className="card__content">
+            <p>
+              Finally, please complete <strong>one and only one</strong> of the
+              options below.
+            </p>
+          </div>
+        </section>
+        <section className="card card--form">
+          <div className="card__title-primary">
+            <h3>{__("1) Proof via Credit")}</h3>
+          </div>
+          <div className="card__content">
+            <p>
+              {__(
+                "If you have a valid credit or debit card, you can instantly prove your humanity."
+              ) +
+                " " +
+                __(
+                  "There is no charge at all for this, now or in the future."
+                ) +
+                " "}
+              <Link
+                href="https://lbry.io/faq/identity-requirements"
+                label={__("Read More")}
+              />
+            </p>
+            {errorMessage &&
+              <p className="form-field__error">{errorMessage}</p>}
+            <p>
+              <CardVerify
+                label={__("Perform Card Verification")}
+                disabled={isPending}
+                token={this.onToken.bind(this)}
+                stripeKey={lbryio.getStripeToken()}
+              />
+            </p>
+          </div>
+        </section>
+        <section className="card card--form">
+          <div className="card__title-primary">
+            <h3>{__("2) Proof via YouTube")}</h3>
+          </div>
+          <div className="card__content">
+            <p>
+              {__(
+                "If you have a YouTube account with published videos that you want to make available on LBRY, syncing your account will grant instant authorization."
+              )}
+            </p>
+          </div>
+          <div className="card__actions">
+            <Link
+              href="https://api.lbry.io/yt/sync"
+              button="alt"
+              icon="icon-youtube"
+              label={__("YouTube Account Sync")}
+            />
+          </div>
+          <div className="card__content">
+            <div className="meta">
+              This will not automatically refresh after approval. Once you have
+              synced your account, just navigate away or click
+              {" "} <Link navigate="/rewards" label="here" />.
+            </div>
+          </div>
+        </section>
+        <section className="card card--form">
+          <div className="card__title-primary">
+            <h3>{__("3) Proof via Chat")}</h3>
+          </div>
+          <div className="card__content">
+            <p>
+              {__(
+                "A moderator capable of approving you is typically available in the #verification channel of our chat room."
+              )}
+            </p>
+            <p>
+              {__(
+                "This process will likely involve providing proof of a stable and established online identity of some kind."
+              )}
+            </p>
+          </div>
+          <div className="card__actions">
+            <Link
+              href="https://slack.lbry.io"
+              button="alt"
+              icon="icon-slack"
+              label={__("Join LBRY Chat")}
+            />
+          </div>
+        </section>
+        <section className="card card--form">
+          <div className="card__title-primary">
+            <h5>{__("Or, Skip It Entirely")}</h5>
+          </div>
+          <div className="card__content">
+
+            <p className="meta">
+              {__(
+                "You can continue without this step, but you will not be eligible to earn rewards."
+              )}
+            </p>
+
+          </div>
+          <div className="card__actions">
+            <Link
+              onClick={() => navigate("/discover")}
+              button="alt"
+              label={__("Skip Rewards")}
+            />
+          </div>
+        </section>
      </div>
    );
  }
--- a/ui/js/component/walletAddress/view.jsx
+++ b/ui/js/component/walletAddress/view.jsx
@ -18,7 +18,7 @@ class WalletAddress extends React.PureComponent {
        <div className="card__content">
          <p>
            {__(
-              'Other LBRY users may send credits to you by entering this address on the "Send" page.'
+              "Use this address to receive credits send by another user (or yourself)."
            )}
          </p>
          <Address address={receiveAddress} />
--- a/ui/js/component/walletBalance/view.jsx
+++ b/ui/js/component/walletBalance/view.jsx
@ -21,13 +21,19 @@ const WalletBalance = props => {
        {(balance || balance === 0) &&
          <CreditAmount amount={balance} precision={8} />}
      </div>
-      <div className="card__content">
-        <Link button="text" navigate="/send" label={__("Send")} />
-        <Link button="text" navigate="/address" label={__("Address")} />
+      <div className="card__actions card__actions--bottom">
        <Link
          button="text"
+          navigate="/send"
+          disabled={balance === 0}
+          label={__("Send")}
+        />
+        <Link button="text" navigate="/receive" label={__("Receive")} />
+        <Link
+          button="text"
+          disabled={balance === 0}
          navigate="/backup"
-          label={__("Backup Your Wallet")}
+          label={__("Backup")}
        />
      </div>
    </section>
--- a/ui/js/component/walletSend/view.jsx
+++ b/ui/js/component/walletSend/view.jsx
@ -42,15 +42,15 @@ const WalletSend = props => {
            onChange={setAddress}
            value={address}
          />
-        </div>
-        <div className="card__actions card__actions--form-submit">
-          <Link
-            button="primary"
-            label={__("Send")}
-            onClick={sendToAddress}
-            disabled={!(parseFloat(amount) > 0.0) || !address}
-          />
-          <input type="submit" className="hidden" />
+          <div className="form-row-submit">
+            <Link
+              button="primary"
+              label={__("Send")}
+              onClick={sendToAddress}
+              disabled={!(parseFloat(amount) > 0.0) || !address}
+            />
+            <input type="submit" className="hidden" />
+          </div>
        </div>
      </form>
      {modal == "insufficientBalance" &&
--- a/ui/js/constants/modal_types.js
+++ b/ui/js/constants/modal_types.js
@ -7,4 +7,5 @@ export const UPGRADE = "upgrade";
 export const WELCOME = "welcome";
 export const FIRST_REWARD = "first_reward";
 export const AUTHENTICATION_FAILURE = "auth_failure";
+export const REWARD_APPROVAL_REQUIRED = "REWARD_APPROVAL_REQUIRED";
 export const CREDIT_INTRO = "credit_intro";
--- a/ui/js/modal/modalCreditIntro/view.jsx
+++ b/ui/js/modal/modalCreditIntro/view.jsx
@ -2,7 +2,7 @@ import React from "react";
 import { Modal } from "modal/modal";
 import { CreditAmount, CurrencySymbol } from "component/common";
 import Link from "component/link/index";
-import { formatCredits } from "utils";
+import { formatCredits } from "util/formatCredits";

 const ModalCreditIntro = props => {
  const { closeModal, currentBalance, totalRewardValue, verifyAccount } = props;
@ -12,50 +12,51 @@ const ModalCreditIntro = props => {
  return (
    <Modal type="custom" isOpen={true} contentLabel="Welcome to LBRY">
      <section>
-        <h3 className="modal__header">{__("Quick Credit Intro")}</h3>
+        <h3 className="modal__header">{__("Blockchain 101")}</h3>
        <p>
-          The LBRY network is controlled and powered by credits called{" "}
-          <em><CurrencySymbol /></em>, a blockchain asset. {" "}
+          LBRY is controlled and powered by a blockchain asset called {" "}
+          <em><CurrencySymbol /></em>.{" "}
          <CurrencySymbol />{" "}
          {__(
            "is used to publish content, to have a say in the network rules, and to access paid content."
          )}
        </p>
-        <p>
-          {__("New verified users can receive more than ")} {" "}
-          {totalRewardValue
-            ? <CreditAmount amount={totalRewardRounded} />
-            : <span className="credit-amount">{__("credits")}</span>}
-          {" "} {__(" in rewards for usage and influence of the network.")}
-        </p>
        {currentBalance <= 0
-          ? <p>
-              <strong>
+          ? <div>
+              <p>
+                You currently have <CreditAmount amount={currentBalance} />, so
+                the actions you can take are limited.
+              </p>
+              <p>
+                However, there are a variety of ways to get credits, including
+                more than {" "}
+                {totalRewardValue
+                  ? <CreditAmount amount={totalRewardRounded} />
+                  : <span className="credit-amount">{__("?? credits")}</span>}
+                {" "}{" "}
                {__(
-                  "Without any credits, you will not be able to take this action."
+                  " in rewards available for being a proven human during the LBRY beta."
                )}
-              </strong>
-            </p>
-          : <p>
-              {__(
-                "But you probably knew all this, since you've already got %s of them!",
-                formatCredits(currentBalance, 2)
-              )}
-            </p>}
+              </p>
+            </div>
+          : <div>
+              <p>
+                But you probably knew this, since you've already got{" "}
+                <CreditAmount amount={currentBalance} />.
+              </p>
+            </div>}

        <div className="modal__buttons">
          <Link
            button="primary"
            onClick={verifyAccount}
-            label={__("You Had Me At Free LBC")}
+            label={__("I'm Totally A Human")}
          />
          <Link
            button="alt"
            onClick={closeModal}
            label={
-              currentBalance <= 0
-                ? __("Continue Without LBC")
-                : __("Meh, Not Now")
+              currentBalance <= 0 ? __("Use Without LBC") : __("Meh, Not Now")
            }
          />
        </div>
--- a/ui/js/modal/modalInsufficientCredits/index.js
+++ b/ui/js/modal/modalInsufficientCredits/index.js
@ -7,7 +7,7 @@ const select = state => ({});

 const perform = dispatch => ({
  addFunds: () => {
-    dispatch(doNavigate("/rewards"));
+    dispatch(doNavigate("/wallet"));
    dispatch(doCloseModal());
  },
  closeModal: () => dispatch(doCloseModal()),
--- a/ui/js/modal/modalInsufficientCredits/view.jsx
+++ b/ui/js/modal/modalInsufficientCredits/view.jsx
@ -1,5 +1,6 @@
 import React from "react";
 import { Modal } from "modal/modal";
+import { CurrencySymbol } from "component/common";

 class ModalInsufficientCredits extends React.PureComponent {
  render() {
@ -15,7 +16,8 @@ class ModalInsufficientCredits extends React.PureComponent {
        onAborted={closeModal}
        onConfirmed={addFunds}
      >
-        <p>{__("More LBRY credits are required to take this action.")}</p>
+        <h3 className="modal__header">{__("More Credits Required")}</h3>
+        <p>You'll need more <CurrencySymbol /> to do this.</p>
      </Modal>
    );
  }
--- a/ui/js/modal/modalRewardApprovalRequired/index.js
+++ b/ui/js/modal/modalRewardApprovalRequired/index.js
@ -0,0 +1,14 @@
+import React from "react";
+import { connect } from "react-redux";
+import { doCloseModal, doAuthNavigate } from "actions/app";
+import ModalRewardApprovalRequired from "./view";
+
+const perform = dispatch => ({
+  doAuth: () => {
+    dispatch(doCloseModal());
+    dispatch(doAuthNavigate());
+  },
+  closeModal: () => dispatch(doCloseModal()),
+});
+
+export default connect(null, perform)(ModalRewardApprovalRequired);
--- a/ui/js/modal/modalRewardApprovalRequired/view.jsx
+++ b/ui/js/modal/modalRewardApprovalRequired/view.jsx
@ -0,0 +1,33 @@
+import React from "react";
+import { Modal } from "modal/modal";
+
+class ModalRewardApprovalRequired extends React.PureComponent {
+  render() {
+    const { closeModal, doAuth } = this.props;
+
+    return (
+      <Modal
+        isOpen={true}
+        contentLabel={__("Human Verification Required")}
+        onConfirmed={doAuth}
+        onAborted={closeModal}
+        type="confirm"
+        confirmButtonLabel={__("I'm Totally Real")}
+        abortButtonLabel={__("Nevermind")}
+      >
+        <section>
+          <h3 className="modal__header">
+            {__("This is awkward. Are you real?")}
+          </h3>
+          <p>
+            {__(
+              "Before we can give you any credits, we need to perform a brief check to make sure you're a new and unique person."
+            )}
+          </p>
+        </section>
+      </Modal>
+    );
+  }
+}
+
+export default ModalRewardApprovalRequired;
--- a/ui/js/modal/modalRouter/index.js
+++ b/ui/js/modal/modalRouter/index.js
@ -6,9 +6,11 @@ import { makeSelectClientSetting } from "selectors/settings";
 import { selectUser } from "selectors/user";
 import { selectCostForCurrentPageUri } from "selectors/cost_info";
 import * as settings from "constants/settings";
+import { selectBalance } from "selectors/wallet";
 import ModalRouter from "./view";

 const select = (state, props) => ({
+  balance: selectBalance(state),
  showPageCost: selectCostForCurrentPageUri(state),
  modal: selectCurrentModal(state),
  page: selectCurrentPage(state),
--- a/ui/js/modal/modalRouter/view.jsx
+++ b/ui/js/modal/modalRouter/view.jsx
@ -6,10 +6,20 @@ import ModalInsufficientCredits from "modal/modalInsufficientCredits";
 import ModalUpgrade from "modal/modalUpgrade";
 import ModalWelcome from "modal/modalWelcome";
 import ModalFirstReward from "modal/modalFirstReward";
+import ModalRewardApprovalRequired from "modal/modalRewardApprovalRequired";
 import * as modals from "constants/modal_types";
 import ModalCreditIntro from "modal/modalCreditIntro";

 class ModalRouter extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      lastTransitionModal: null,
+      lastTransitionPage: null,
+    };
+  }
+
  componentWillMount() {
    this.showTransitionModals(this.props);
  }
@ -19,55 +29,72 @@ class ModalRouter extends React.PureComponent {
  }

  showTransitionModals(props) {
-    const { modal } = props;
+    const { modal, openModal, page } = props;

    if (modal) {
      return;
    }

-    [
-      this.checkShowWelcome.bind(this),
-      this.checkShowCreditIntro.bind(this),
-    ].find(func => func(props));
+    const transitionModal = [
+      this.checkShowWelcome,
+      this.checkShowCreditIntro,
+      this.checkShowInsufficientCredits,
+    ].reduce((acc, func) => {
+      return !acc ? func.bind(this)(props) : acc;
+    }, false);
+
+    if (
+      transitionModal &&
+      (transitionModal != this.state.lastTransitionModal ||
+        page != this.state.lastTransitionPage)
+    ) {
+      openModal(transitionModal);
+      this.setState({
+        lastTransitionModal: transitionModal,
+        lastTransitionPage: page,
+      });
+    }
  }

  checkShowWelcome(props) {
-    const { isWelcomeAcknowledged, openModal, user } = props;
+    const { isWelcomeAcknowledged, user } = props;
    if (
      !isWelcomeAcknowledged &&
      user &&
      !user.is_reward_approved &&
      !user.is_identity_verified
    ) {
-      openModal(modals.WELCOME);
-      return true;
+      return modals.WELCOME;
    }
  }

  checkShowCreditIntro(props) {
-    const {
-      page,
-      isCreditIntroAcknowledged,
-      openModal,
-      user,
-      showPageCost,
-    } = props;
+    const { page, isCreditIntroAcknowledged, user } = props;

    if (
      !isCreditIntroAcknowledged &&
      user &&
      !user.is_reward_approved &&
-      !user.is_identity_verified &&
-      ["rewards", "send", "address", "show", "publish", "wallet"].includes(
-        page
-      ) &&
-      (page != "show" || showPageCost > 0)
+      (["rewards", "send", "receive", "publish", "wallet"].includes(page) ||
+        this.isPaidShowPage(props))
    ) {
-      openModal(modals.CREDIT_INTRO);
-      return true;
+      return modals.CREDIT_INTRO;
    }
  }

+  checkShowInsufficientCredits(props) {
+    const { balance, page } = props;
+
+    if (balance <= 0 && ["send", "publish"].includes(page)) {
+      return modals.INSUFFICIENT_CREDITS;
+    }
+  }
+
+  isPaidShowPage(props) {
+    const { page, showPageCost } = props;
+    return page === "show" && showPageCost > 0;
+  }
+
  render() {
    const { modal } = this.props;

@ -88,6 +115,8 @@ class ModalRouter extends React.PureComponent {
        return <ModalAuthFailure />;
      case modals.CREDIT_INTRO:
        return <ModalCreditIntro />;
+      case modals.REWARD_APPROVAL_REQUIRED:
+        return <ModalRewardApprovalRequired />;
      default:
        return null;
    }
--- a/ui/js/page/auth/view.jsx
+++ b/ui/js/page/auth/view.jsx
@ -30,11 +30,11 @@ export class AuthPage extends React.PureComponent {
    const { email, isPending, isVerificationCandidate, user } = this.props;

    if (isPending || (user && !user.has_verified_email && !email)) {
-      return __("Welcome to LBRY");
+      return __("Human Proofing");
    } else if (user && !user.has_verified_email) {
      return __("Confirm Email");
    } else if (user && !user.is_identity_verified && !user.is_reward_approved) {
-      return __("Confirm Identity");
+      return __("Final Verification");
    } else {
      return __("Welcome to LBRY");
    }
@ -44,51 +44,45 @@ export class AuthPage extends React.PureComponent {
    const { email, isPending, isVerificationCandidate, user } = this.props;

    if (isPending) {
-      return <BusyMessage message={__("Authenticating")} />;
+      return [<BusyMessage message={__("Authenticating")} />, true];
    } else if (user && !user.has_verified_email && !email) {
-      return <UserEmailNew />;
+      return [<UserEmailNew />, true];
    } else if (user && !user.has_verified_email) {
-      return <UserEmailVerify />;
+      return [<UserEmailVerify />, true];
    } else if (user && !user.is_identity_verified) {
-      return <UserVerify />;
+      return [<UserVerify />, false];
    } else {
-      return <span className="empty">{__("No further steps.")}</span>;
+      return [<span className="empty">{__("No further steps.")}</span>, true];
    }
  }

  render() {
    const { email, user, isPending, navigate } = this.props;
+    const [innerContent, useTemplate] = this.renderMain();

-    return (
-      <main className="">
-        <section className="card card--form">
-          <div className="card__title-primary">
-            <h1>{this.getTitle()}</h1>
-          </div>
-          <div className="card__content">
-            {!isPending &&
-              !email &&
-              user &&
-              !user.has_verified_email &&
-              <p>
-                {__("Create a verified identity and receive LBC rewards.")}
-              </p>}
-            {this.renderMain()}
-          </div>
-          <div className="card__content">
-            <div className="help">
-              {__(
-                "This information is disclosed only to LBRY, Inc. and not to the LBRY network. It is only required to earn LBRY rewards."
-              ) + " "}
-              <Link
-                onClick={() => navigate("/discover")}
-                label={__("Return home")}
-              />.
+    return useTemplate
+      ? <main>
+          <section className="card card--form">
+            <div className="card__title-primary">
+              <h1>{this.getTitle()}</h1>
            </div>
-          </div>
-        </section>
-      </main>
-    );
+            <div className="card__content">
+              {innerContent}
+            </div>
+            <div className="card__content">
+              <div className="help">
+                {__(
+                  "This information is disclosed only to LBRY, Inc. and not to the LBRY network. It is only required to earn LBRY rewards."
+                ) + " "}
+                <Link
+                  onClick={() => navigate("/discover")}
+                  label={__("Return home")}
+                />.
+              </div>
+            </div>
+          </section>
+        </main>
+      : innerContent;
  }
 }

--- a/ui/js/page/help/index.js
+++ b/ui/js/page/help/index.js
@ -1,5 +1,5 @@
 import React from "react";
-import { doNavigate } from "actions/app";
+import { doAuthNavigate } from "actions/app";
 import { connect } from "react-redux";
 import { doFetchAccessToken } from "actions/user";
 import { selectAccessToken, selectUser } from "selectors/user";
@ -11,7 +11,7 @@ const select = state => ({
 });

 const perform = dispatch => ({
-  navigate: (path, params) => dispatch(doNavigate(path, params)),
+  doAuth: () => dispatch(doAuthNavigate("/help")),
  fetchAccessToken: () => dispatch(doFetchAccessToken()),
 });

--- a/ui/js/page/help/view.jsx
+++ b/ui/js/page/help/view.jsx
@ -3,7 +3,7 @@ import React from "react";
 import lbry from "lbry.js";
 import Link from "component/link";
 import SubHeader from "component/subHeader";
-import { BusyMessage } from "component/common";
+import { BusyMessage, Icon } from "component/common";

 class HelpPage extends React.PureComponent {
  constructor(props) {
@ -50,7 +50,7 @@ class HelpPage extends React.PureComponent {
  render() {
    let ver, osName, platform, newVerLink;

-    const { navigate, user } = this.props;
+    const { doAuth, user } = this.props;

    if (this.state.versionInfo) {
      ver = this.state.versionInfo;
@ -119,7 +119,7 @@ class HelpPage extends React.PureComponent {
            <p>{__("Did you find something wrong?")}</p>
            <p>
              <Link
-                onClick={() => navigate("report")}
+                navigate="/report"
                label={__("Submit a Bug Report")}
                icon="icon-bug"
                button="alt"
@ -143,7 +143,7 @@ class HelpPage extends React.PureComponent {
                  </p>
                : <p>{__("Your copy of LBRY is up to date.")}</p>}
            {this.state.uiVersion && ver
-              ? <table className="table-standard">
+              ? <table className="table-standard table-stretch table-standard--definition-list">
                  <tbody>
                    <tr>
                      <th>{__("App")}</th>
@ -162,7 +162,21 @@ class HelpPage extends React.PureComponent {
                      <td>
                        {user && user.primary_email
                          ? user.primary_email
-                          : <span className="empty">{__("none")}</span>}
+                          : <span>
+                              <span className="empty">{__("none")} </span>
+                              (<Link
+                                onClick={() => doAuth()}
+                                label={__("set email")}
+                              />)
+                            </span>}
+                      </td>
+                    </tr>
+                    <tr>
+                      <th>{__("Reward Eligible")}</th>
+                      <td>
+                        {user && user.is_reward_approved
+                          ? <Icon icon="icon-check" />
+                          : <Icon icon="icon-ban" />}
                      </td>
                    </tr>
                    <tr>
--- a/ui/js/page/publish/index.js
+++ b/ui/js/page/publish/index.js
@ -16,10 +16,12 @@ import {
  doCreateChannel,
  doPublish,
 } from "actions/content";
+import { selectBalance } from "selectors/wallet";
 import rewards from "rewards";
 import PublishPage from "./view";

 const select = state => ({
+  balance: selectBalance(state),
  myClaims: selectMyClaims(state),
  fetchingChannels: selectFetchingMyChannels(state),
  channels: selectMyChannelClaims(state),
--- a/ui/js/page/receiveCredits/view.jsx
+++ b/ui/js/page/receiveCredits/view.jsx
@ -1,6 +1,6 @@
 import React from "react";
 import SubHeader from "component/subHeader";
-import WalletBalance from "component/walletBalance";
+import Link from "component/link";
 import WalletAddress from "component/walletAddress";

 const ReceiveCreditsPage = props => {
@ -8,6 +8,25 @@ const ReceiveCreditsPage = props => {
    <main className="main--single-column">
      <SubHeader />
      <WalletAddress />
+      <section className="card">
+        <div className="card__title-primary">
+          <h3>{__("Where To Find Credits")}</h3>
+        </div>
+        <div className="card__content">
+          <p>
+            {
+              "LBRY credits can be purchased on exchanges, earned for contributions, for mining, and more."
+            }
+          </p>
+        </div>
+        <div className="card__actions">
+          <Link
+            button="alt"
+            href="https://lbry.io/faq/earn-credits"
+            label={__("Read More")}
+          />
+        </div>
+      </section>
    </main>
  );
 };
--- a/ui/js/page/rewards/view.jsx
+++ b/ui/js/page/rewards/view.jsx
@ -33,13 +33,20 @@ class RewardsPage extends React.PureComponent {
      ) {
        return (
          <section className="card">
+            <div className="card__title-primary">
+              <h3>{__("Humans Only")}</h3>
+            </div>
            <div className="card__content empty">
              <p>
-                {__("Only verified accounts are eligible to earn rewards.")}
+                {__("Rewards are for human beings only.")}
+                {" "}
+                {__(
+                  "You'll have to prove you're one of us before you can claim any rewards."
+                )}
              </p>
            </div>
            <div className="card__content">
-              <Link onClick={doAuth} button="primary" label="Become Verified" />
+              <Link onClick={doAuth} button="primary" label="Prove Humanity" />
            </div>
          </section>
        );
@ -89,12 +96,11 @@ class RewardsPage extends React.PureComponent {
        </div>
      );
    } else if (user === null) {
-
      return (
        <div className="card__content empty">
          <p>
            {__(
-                "This application is unable to earn rewards due to an authentication failure."
+              "This application is unable to earn rewards due to an authentication failure."
            )}
          </p>
        </div>
@ -106,8 +112,12 @@ class RewardsPage extends React.PureComponent {
        </div>
      );
    } else {
-      return rewards.map(reward =>
-        <RewardTile key={reward.reward_type} reward={reward} />
+      return (
+        <div className="card-grid">
+          {rewards.map(reward =>
+            <RewardTile key={reward.reward_type} reward={reward} />
+          )}
+        </div>
      );
    }
  }
--- a/ui/js/page/sendCredits/view.jsx
+++ b/ui/js/page/sendCredits/view.jsx
@ -1,6 +1,5 @@
 import React from "react";
 import SubHeader from "component/subHeader";
-import WalletBalance from "component/walletBalance";
 import WalletSend from "component/walletSend";

 const SendCreditsPage = props => {
--- a/ui/js/page/wallet/view.jsx
+++ b/ui/js/page/wallet/view.jsx
@ -2,16 +2,16 @@ import React from "react";
 import SubHeader from "component/subHeader";
 import WalletBalance from "component/walletBalance";
 import RewardSummary from "component/rewardSummary";
-import InviteSummary from "component/inviteSummary";
 import TransactionListRecent from "component/transactionListRecent";

 const WalletPage = props => {
  return (
-    <main className="main--single-column">
+    <main className="main--single-column page--wallet">
      <SubHeader />
-      <WalletBalance />
-      <RewardSummary />
-      <InviteSummary />
+      <div className="card-grid">
+        <WalletBalance />
+        <RewardSummary />
+      </div>
      <TransactionListRecent />
    </main>
  );
--- a/ui/js/rewards.js
+++ b/ui/js/rewards.js
@ -96,6 +96,17 @@ rewards.TYPE_MANY_DOWNLOADS = "many_downloads";
 rewards.TYPE_FIRST_PUBLISH = "first_publish";
 rewards.TYPE_FEATURED_DOWNLOAD = "featured_download";
 rewards.TYPE_REFERRAL = "referral";
+rewards.SORT_ORDER = [
+  rewards.TYPE_NEW_USER,
+  rewards.TYPE_CONFIRM_EMAIL,
+  rewards.TYPE_FIRST_STREAM,
+  rewards.TYPE_FIRST_CHANNEL,
+  rewards.TYPE_FIRST_PUBLISH,
+  rewards.TYPE_FEATURED_DOWNLOAD,
+  rewards.TYPE_MANY_DOWNLOADS,
+  rewards.TYPE_REFERRAL,
+  rewards.TYPE_NEW_DEVELOPER,
+];

 rewards.claimReward = function(type) {
  function requestReward(resolve, reject, params) {
--- a/ui/js/selectors/app.js
+++ b/ui/js/selectors/app.js
@ -39,7 +39,7 @@ export const selectPageTitle = createSelector(
        return __("Wallet");
      case "send":
        return __("Send Credits");
-      case "address":
+      case "receive":
        return __("Wallet Address");
      case "backup":
        return __("Backup Your Wallet");
@ -143,17 +143,17 @@ export const selectHeaderLinks = createSelector(selectCurrentPage, page => {
    case "wallet":
    case "history":
    case "send":
-    case "address":
+    case "receive":
    case "invite":
    case "rewards":
    case "backup":
      return {
        wallet: __("Overview"),
-        rewards: __("Rewards"),
-        invite: __("Invites"),
        history: __("History"),
        send: __("Send"),
-        address: __("Address"),
+        receive: __("Receive"),
+        rewards: __("Rewards"),
+        invite: __("Invites"),
      };
    case "downloaded":
    case "published":
--- a/ui/js/selectors/rewards.js
+++ b/ui/js/selectors/rewards.js
@ -1,5 +1,6 @@
 import { createSelector } from "reselect";
 import { selectUser } from "selectors/user";
+import rewards from "rewards";

 const _selectState = state => state.rewards || {};

@ -20,7 +21,13 @@ export const selectClaimedRewards = createSelector(

 export const selectUnclaimedRewards = createSelector(
  selectUnclaimedRewardsByType,
-  byType => Object.values(byType) || []
+  byType =>
+    Object.values(byType).sort(function(a, b) {
+      return rewards.SORT_ORDER.indexOf(a.reward_type) <
+        rewards.SORT_ORDER.indexOf(b.reward_type)
+        ? -1
+        : 1;
+    }) || []
 );

 export const selectIsRewardEligible = createSelector(
@ -83,3 +90,10 @@ const selectRewardByType = (state, props) => {
 export const makeSelectRewardByType = () => {
  return createSelector(selectRewardByType, reward => reward);
 };
+
+export const makeSelectRewardAmountByType = () => {
+  return createSelector(
+    selectRewardByType,
+    reward => (reward ? reward.reward_amount : 0)
+  );
+};
--- a/ui/js/selectors/search.js
+++ b/ui/js/selectors/search.js
@ -38,6 +38,8 @@ export const selectWunderBarAddress = createSelector(

 export const selectWunderBarIcon = createSelector(selectCurrentPage, page => {
  switch (page) {
+    case "auth":
+      return "icon-user";
    case "search":
      return "icon-search";
    case "settings":
--- a/ui/scss/_global.scss
+++ b/ui/scss/_global.scss
@ -2,8 +2,8 @@

 $spacing-vertical: 24px;

-$padding-button: 12px;
-$padding-text-link: 4px;
+$padding-button: $spacing-vertical * 2/3;
+$padding-text-link: 0px;

 $color-primary: #155B4A;
 $color-primary-light: saturate(lighten($color-primary, 50%), 20%);
--- a/ui/scss/_gui.scss
+++ b/ui/scss/_gui.scss
@ -134,15 +134,6 @@ p
  }
 }

-/*should this be here or work this way? had to hack additional rule below*/
-.icon:only-child {
-  position: relative;
-  top: 0.16em;
-}
-.icon-featured > .icon {
-  top: 0;
-}
-
 .help {
  font-size: .85em;
  color: $color-help;
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@ -8,7 +8,7 @@ $button-focus-shift: 12%;

  + .button-set-item
  {
-    margin-left: $padding-button;
+    margin-left: $spacing-vertical;
  }
 }

--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@ -23,10 +23,11 @@ $width-card-small: $spacing-vertical * 10;
 }
 .card__title-primary,
 .card__title-identity,
-.card__actions,
 .card__content,
-.card__subtext {
-  padding: 0 $padding-card-horizontal;
+.card__subtext,
+.card__actions {
+  padding-left: $padding-card-horizontal;
+  padding-right: $padding-card-horizontal;
 }
 .card--small {
  .card__title-primary,
@ -39,6 +40,7 @@ $width-card-small: $spacing-vertical * 10;
 }
 .card__title-primary {
  margin-top: $spacing-vertical * 2/3;
+  margin-bottom: $spacing-vertical * 2/3;
 }
 .card__title-identity {
  margin-top: $spacing-vertical * 1/3;
@ -46,13 +48,6 @@ $width-card-small: $spacing-vertical * 10;
 }
 .card__actions {
  margin-top: $spacing-vertical * 2/3;
-}
-.card__actions--bottom {
-  margin-top: $spacing-vertical * 1/3;
-  margin-bottom: $spacing-vertical * 1/3;
-}
-.card__actions--form-submit {
-  margin-top: $spacing-vertical;
  margin-bottom: $spacing-vertical * 2/3;
 }
 .card__content {
@ -259,4 +254,21 @@ $padding-right-card-hover-hack: 30px;

 .card__icon-featured-content {
  color: orangered;
+}
+
+
+/*
+if we keep doing things like this, we should add a real grid system, but I'm going to be a selective dick about it - Jeremy
+ */
+.card-grid {
+  $margin-card-grid: $spacing-vertical * 2/3;
+  display:flex;
+  flex-wrap: wrap;
+  > .card {
+    width: $width-page-constrained / 2 - $margin-card-grid / 2;
+    flex-grow:1;
+  }
+  > .card:nth-of-type(2n - 1) {
+    margin-right: $margin-card-grid;
+  }
 }
--- a/ui/scss/component/_table.scss
+++ b/ui/scss/component/_table.scss
@ -52,6 +52,11 @@ table.table-standard {
    }
  }
 }
+.table-standard--definition-list {
+  th {
+    text-align: right;
+  }
+}

 table.table-stretch {
  width: 100%;