first pass at wallet styles

src/ui/component/common/icon-custom.jsx

@@ -264,6 +264,14 @@ export const icons = {
       <path d="M7 11V7a5 5 0 0 1 9.9-1" />
     </g>
   ),
+
+  [ICONS.LOCK]: buildIcon(
+    <g>
+      <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+    </g>
+  ),
+
   [ICONS.TAG]: buildIcon(
     <g>
       <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />

src/ui/component/header/view.jsx

@@ -68,6 +68,13 @@ const Header = (props: Props) => {
     <header className={classnames('header', { 'header--minimal': minimal })}>
       <div className="header__contents">
         <div className="header__navigation">
+          <Button
+            className="header__navigation-item header__navigation-item--lbry"
+            label={__('LBRY')}
+            icon={ICONS.LBRY}
+            navigate="/"
+          />
+
           {/* @if TARGET='app' */}
           {!minimal && (
             <div className="header__navigation-arrows">
@@ -90,13 +97,6 @@ const Header = (props: Props) => {
           )}
           {/* @endif */}
 
-          <Button
-            className="header__navigation-item header__navigation-item--lbry"
-            label={__('LBRY')}
-            icon={ICONS.LBRY}
-            navigate="/"
-          />
-
           {!minimal && <WunderBar />}
         </div>
 

src/ui/component/router/view.jsx

@@ -17,6 +17,8 @@ import InvitePage from 'page/invite';
 import SearchPage from 'page/search';
 import LibraryPage from 'page/library';
 import WalletPage from 'page/wallet';
+import WalletSendPage from 'page/walletSend';
+import WalletReceivePage from 'page/walletReceive';
 import TagsPage from 'page/tags';
 import FollowingPage from 'page/following';
 import ListBlockedPage from 'page/listBlocked';
@@ -83,8 +85,10 @@ function AppRouter(props: Props) {
       <PrivateRoute {...props} path={`/$/${PAGES.LIBRARY}`} component={LibraryPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.ACCOUNT}`} component={AccountPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.FOLLOWING}`} component={FollowingPage} />
-      <PrivateRoute {...props} path={`/$/${PAGES.WALLET}`} component={WalletPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.BLOCKED}`} component={ListBlockedPage} />
+      <PrivateRoute {...props} path={`/$/${PAGES.WALLET}`} exact component={WalletPage} />
+      <PrivateRoute {...props} path={`/$/${PAGES.WALLET_SEND}`} exact component={WalletSendPage} />
+      <PrivateRoute {...props} path={`/$/${PAGES.WALLET_RECEIVE}`} exact component={WalletReceivePage} />
 
       {/* Below need to go at the end to make sure we don't match any of our pages first */}
       <Route path="/:claimName" exact component={ShowPage} />

src/ui/component/transactionList/view.jsx

@@ -49,15 +49,8 @@ function TransactionList(props: Props) {
             {loading && <Spinner type="small" />}
           </span>
           <div className="card__actions--inline">
-            {slim && (
-              <Button
-                button="link"
-                className="button--alt"
-                navigate={`/$/${PAGES.TRANSACTIONS}`}
-                label={__('Full History')}
-              />
-            )}
             <RefreshTransactionButton />
+            {slim && <Button button="primary" navigate={`/$/${PAGES.TRANSACTIONS}`} label={__('Full History')} />}
           </div>
         </h2>
       </header>

src/ui/component/walletAddress/view.jsx

@@ -49,9 +49,7 @@ class WalletAddress extends React.PureComponent<Props, State> {
     return (
       <Card
         title={__('Receive Credits')}
-        subtitle={__(
-          'Use this address to receive LBC. You can generate a new address at any time, and any previous addresses will continue to work.'
-        )}
+        subtitle={__('Use this address to receive LBC.')}
         actions={
           <React.Fragment>
             <CopyableText label={__('Your Address')} copyable={receiveAddress} snackMessage={__('Address copied.')} />
@@ -67,6 +65,9 @@ class WalletAddress extends React.PureComponent<Props, State> {
               )}
               <Button button="link" label={showQR ? __('Hide QR code') : __('Show QR code')} onClick={this.toggleQR} />
             </div>
+            <p className="help">
+              {__('You can generate a new address at any time, and any previous addresses will continue to work.')}
+            </p>
 
             {showQR && <QRCode value={receiveAddress} paddingTop />}
           </React.Fragment>

src/ui/component/walletBalance/index.js

@@ -6,17 +6,16 @@ import {
   selectSupportsBalance,
   selectTipsBalance,
 } from 'lbry-redux';
+import { selectClaimedRewards } from 'lbryinc';
 import WalletBalance from './view';
 
 const select = state => ({
   balance: selectBalance(state),
   totalBalance: selectTotalBalance(state),
-  claimsBalance: selectClaimsBalance(state),
-  supportsBalance: selectSupportsBalance(state),
-  tipsBalance: selectTipsBalance(state),
+  claimsBalance: selectClaimsBalance(state) || 0,
+  supportsBalance: selectSupportsBalance(state) || 0,
+  tipsBalance: selectTipsBalance(state) || 0,
+  rewards: selectClaimedRewards(state),
 });
 
-export default connect(
-  select,
-  null
-)(WalletBalance);
+export default connect(select)(WalletBalance);

src/ui/component/walletBalance/view.jsx

@@ -1,7 +1,10 @@
 // @flow
+import * as ICONS from 'constants/icons';
+import * as PAGES from 'constants/pages';
 import React from 'react';
 import CreditAmount from 'component/common/credit-amount';
-import BalanceBackground from './balance-background.png';
+import Button from 'component/button';
+import Icon from 'component/common/icon';
 
 type Props = {
   balance: number,
@@ -9,40 +12,79 @@ type Props = {
   claimsBalance: number,
   supportsBalance: number,
   tipsBalance: number,
+  rewards: Array<Reward>,
 };
 
 const WalletBalance = (props: Props) => {
-  const { balance, totalBalance, claimsBalance, supportsBalance, tipsBalance } = props;
+  const { balance, claimsBalance, supportsBalance, tipsBalance, rewards } = props;
+  const rewardTotal = rewards.reduce((acc, val) => acc + val.reward_amount, 0);
+
   return (
-    <section
-      className="card card--section card--wallet-balance"
-      style={{ backgroundImage: `url(${BalanceBackground})` }}
-    >
-      <h2 className="card__title">{__('Balance')}</h2>
-      <span className="card__content--large">
-        {(balance || balance === 0) && <CreditAmount badge={false} amount={balance} precision={8} />}
-      </span>
-      {tipsBalance > 0 && (
-        <div className="card__content--small">
-          Locked in Tips: <CreditAmount badge={false} amount={tipsBalance} precision={8} />
+    <React.Fragment>
+      <section className="section__flex-wrap">
+        <div>
+          <h2 className="section__title">{__('Available Balance')}</h2>
+          <span className="section__title--large">
+            {(balance || balance === 0) && <CreditAmount badge={false} amount={balance} precision={8} />}
+          </span>
+
+          <div className="section__actions">
+            <Button button="inverse" label={__('Send Credits')} navigate={`$/${PAGES.WALLET_SEND}`} />
+            <Button button="inverse" label={__('Your Address')} navigate={`$/${PAGES.WALLET_RECEIVE}`} />
+          </div>
         </div>
-      )}
-      {claimsBalance > 0 && (
-        <div className="card__content--small">
-          Locked in claims: <CreditAmount badge={false} amount={claimsBalance} precision={8} />
+
+        <div>
+          <div className="section">
+            <div className="section__flex">
+              <Icon sectionIcon icon={ICONS.FEATURED} />
+              <h2 className="section__title--small">
+                <strong>
+                  <CreditAmount badge={false} amount={rewardTotal} precision={8} />
+                </strong>{' '}
+                {__('Earned From Rewards')}
+              </h2>
+            </div>
+          </div>
+
+          <div className="section">
+            <div className="section__flex">
+              <Icon sectionIcon icon={ICONS.TIP} />
+              <h2 className="section__title--small">
+                <strong>
+                  <CreditAmount badge={false} amount={tipsBalance} precision={8} />
+                </strong>{' '}
+                {__('Earned From Tips')}
+              </h2>
+            </div>
+          </div>
+
+          <div className="section">
+            <div className="section__flex">
+              <Icon sectionIcon icon={ICONS.LOCK} />
+              <div>
+                <h2 className="section__title--small">
+                  <strong>{(claimsBalance + supportsBalance).toFixed(2)}</strong> {__('LBC Currently Staked')}
+                </h2>
+                <div className="section__subtitle">
+                  <dl>
+                    <dt>{__('Your Publishes')}</dt>
+                    <dd>
+                      <CreditAmount badge={false} amount={claimsBalance} precision={8} />
+                    </dd>
+
+                    <dt>{__('Your Supports')}</dt>
+                    <dd>
+                      <CreditAmount badge={false} amount={supportsBalance} precision={8} />
+                    </dd>
+                  </dl>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-      )}
-      {supportsBalance > 0 && (
-        <div className="card__content--small">
-          Locked in supports: <CreditAmount badge={false} amount={supportsBalance} precision={8} />
-        </div>
-      )}
-      {totalBalance > 0 && (
-        <div className="card__content--small">
-          Total account value: <CreditAmount badge={false} amount={totalBalance} precision={8} />
-        </div>
-      )}
-    </section>
+      </section>
+    </React.Fragment>
   );
 };
 

src/ui/constants/icons.js

@@ -31,6 +31,7 @@ export const COMPLETED = 'CheckCircle';
 export const SUBSCRIBE = 'Heart';
 export const UNSUBSCRIBE = 'BrokenHeart';
 export const UNLOCK = 'Unlock';
+export const LOCK = 'Lock';
 export const WEB = 'Globe';
 export const SHARE = 'Share2';
 export const EXTERNAL = 'ExternalLink';

src/ui/constants/pages.js

@@ -20,4 +20,6 @@ export const SEARCH = 'search';
 export const TRANSACTIONS = 'transactions';
 export const TAGS = 'tags';
 export const WALLET = 'wallet';
+export const WALLET_SEND = 'wallet/send';
+export const WALLET_RECEIVE = 'wallet/receive';
 export const BLOCKED = 'blocked';

src/ui/page/channel/view.jsx

@@ -158,7 +158,7 @@ function ChannelPage(props: Props) {
                 onClick={() => openModal(MODALS.SEND_TIP, { uri, channelIsMine, isSupport: true })}
               />
             )}
-            {!channelIsBlocked && !channelIsBlackListed && <SubscribeButton uri={permanentUrl} />}
+            {!channelIsBlocked && (!channelIsBlackListed || isSubscribed) && <SubscribeButton uri={permanentUrl} />}
             {!isSubscribed && <BlockButton uri={permanentUrl} />}
           </div>
           {!editing && cover && (

src/ui/page/wallet/view.jsx

@@ -1,15 +1,11 @@
 import React from 'react';
 import WalletBalance from 'component/walletBalance';
-import WalletSend from 'component/walletSend';
-import WalletAddress from 'component/walletAddress';
 import TransactionListRecent from 'component/transactionListRecent';
 import Page from 'component/page';
 
 const WalletPage = () => (
   <Page>
     <WalletBalance />
-    <WalletSend />
-    <WalletAddress />
     <TransactionListRecent />
   </Page>
 );

src/ui/page/walletReceive/index.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import WalletReceive from './view';
+
+const select = state => ({});
+
+const perform = dispatch => ({});
+
+export default connect(
+  select,
+  perform
+)(WalletReceive);

src/ui/page/walletReceive/view.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import WalletAddress from 'component/walletAddress';
+import Page from 'component/page';
+
+const WalletAddressPage = () => (
+  <Page className="main--contained">
+    <WalletAddress />
+  </Page>
+);
+
+export default WalletAddressPage;

src/ui/page/walletSend/index.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import WalletSend from './view';
+
+const select = state => ({});
+
+const perform = dispatch => ({});
+
+export default connect(
+  select,
+  perform
+)(WalletSend);

src/ui/page/walletSend/view.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import WalletSend from 'component/walletSend';
+import Page from 'component/page';
+
+const WalletSendPage = () => (
+  <Page className="main--contained">
+    <WalletSend />
+  </Page>
+);
+
+export default WalletSendPage;

src/ui/scss/component/_card.scss

@@ -194,7 +194,8 @@
   display: flex;
   align-items: center;
   margin-bottom: var(--spacing-small);
-  font-size: var(--font-title);
+  font-size: var(--font-section-title);
+  font-weight: 300;
 
   & > *:not(:last-child) {
     margin-right: var(--spacing-medium);

src/ui/scss/component/_form-field.scss

@@ -335,5 +335,5 @@ fieldset-section {
 }
 
 .form-field--address {
-  width: 370px;
+  min-width: 18em;
 }

src/ui/scss/component/_main.scss

@@ -21,6 +21,7 @@
 .main {
   position: relative;
   width: calc(100% - var(--side-nav-width) - var(--spacing-large));
+  margin-right: var(--spacing-main-padding);
 
   @media (max-width: 600px) {
     width: 100%;

src/ui/scss/component/_wunderbar.scss

@@ -6,7 +6,7 @@
   align-items: center;
   position: relative;
   z-index: 1;
-  margin-right: var(--spacing-large);
+  margin-right: var(--spacing-main-padding);
   font-size: var(--font-label);
 
   @media (max-width: 600px) {

src/ui/scss/component/section.scss

@@ -1,5 +1,5 @@
 .section {
-  margin-top: var(--spacing-medium);
+  margin-top: var(--spacing-large);
 
   &:first-of-type {
     margin-top: 0;
@@ -23,14 +23,32 @@
   }
 }
 
+.section__flex-wrap {
+  @extend .section__flex;
+  flex-wrap: wrap;
+  margin-bottom: var(--spacing-large);
+
+  & > * {
+    margin-bottom: var(--spacing-large);
+  }
+}
+
 .section__title {
   text-align: left;
   font-size: var(--font-section-title);
   font-weight: 300;
 }
 
+.section__title--small {
+  @extend .section__title;
+  font-size: var(--font-body);
+  margin-top: var(--spacing-small);
+}
+
 .section__title--large {
   @extend .section__title;
+  margin-right: var(--spacing-medium);
+  display: inline-block;
   font-weight: 700;
   font-size: var(--font-heading);
 }

src/ui/scss/init/_gui.scss

@@ -46,10 +46,6 @@ p {
   font-size: var(--font-body);
 }
 
-ul,
-ol {
-}
-
 ul,
 ol {
   list-style: initial;
@@ -70,6 +66,37 @@ ol {
   }
 }
 
+dl {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-top: var(--spacing-medium);
+}
+
+dt {
+  flex-basis: 40%;
+  text-align: left;
+  font-weight: bold;
+}
+
+dd {
+  flex-basis: 55%;
+  flex-grow: 1;
+  margin: 0;
+  text-align: right;
+}
+
+dt,
+dd {
+  padding: var(--spacing-medium) var(--spacing-small);
+
+  border-top: 1px solid $lbry-gray-1;
+
+  &:last-of-type {
+    border-bottom: 1px solid $lbry-gray-1;
+  }
+}
+
 input,
 label {
   user-select: none;