ui/component/common/nag.jsx

@@ -30,7 +30,9 @@ export default function Nag(props: Props) {
         'nag--relative': relative,
       })}
     >
-      <div className="nag__message">{message}</div>
+      <div className="nag__message">
+        This instance is using P2P network so content without seed won't load. Get The App to help seed content.
+      </div>
       {(href || onClick) && (
         <Button
           className={classnames('nag__button', {
@@ -42,16 +44,6 @@ export default function Nag(props: Props) {
           {actionText}
         </Button>
       )}
-      {onClose && (
-        <Button
-          className={classnames('nag__button nag__close', {
-            'nag__button--helpful': type === 'helpful',
-            'nag__button--error': type === 'error',
-          })}
-          icon={ICONS.REMOVE}
-          onClick={onClose}
-        />
-      )}
     </div>
   );
 }

ui/component/router/view.jsx

@@ -57,6 +57,7 @@ import NotificationsPage from 'page/notifications';
 import SignInWalletPasswordPage from 'page/signInWalletPassword';
 import YoutubeSyncPage from 'page/youtubeSync';
 import CollectionPage from 'page/collection';
+import DonationPage from 'page/donation';
 
 import { LINKED_COMMENT_QUERY_PARAM } from 'constants/comment';
 import { parseURI, isURIValid } from 'lbry-redux';
@@ -259,6 +260,7 @@ function AppRouter(props: Props) {
       <Route path={`/$/${PAGES.CHECKOUT}`} exact component={CheckoutPage} />
       <Route path={`/$/${PAGES.REPORT_CONTENT}`} exact component={ReportContentPage} />
       <Route {...props} path={`/$/${PAGES.LIST}/:collectionId`} component={CollectionPage} />
+      <Route {...props} path={`/$/${PAGES.DONATION}`} component={DonationPage} />
 
       <PrivateRoute {...props} exact path={`/$/${PAGES.YOUTUBE_SYNC}`} component={YoutubeSyncPage} />
       <PrivateRoute {...props} exact path={`/$/${PAGES.TAGS_FOLLOWING}`} component={TagsFollowingPage} />

ui/component/sideNavigation/view.jsx

@@ -31,6 +31,12 @@ const RECENT_FROM_FOLLOWING = {
   icon: ICONS.SUBSCRIBE,
 };
 
+const DONATE = {
+  title: 'Donate',
+  link: `/$/${PAGES.DONATION}`,
+  icon: ICONS.LBC,
+};
+
 type Props = {
   subscriptions: Array<Subscription>,
   followedTags: Array<Tag>,
@@ -215,7 +221,7 @@ function SideNavigation(props: Props) {
   let SIDE_LINKS: Array<SideNavLink> = [];
 
   SIDE_LINKS.push(HOME);
-  SIDE_LINKS.push(RECENT_FROM_FOLLOWING);
+  SIDE_LINKS.push(DONATE);
   if (!SIMPLE_SITE && hasExperimentalUi) {
     FULL_LINKS.push({
       title: 'Lists',

ui/component/userEmailNew/view.jsx

@@ -103,89 +103,14 @@ function UserEmailNew(props: Props) {
       })}
     >
       <Card
-        title={__('Join')}
         // @if TARGET='app'
         subtitle={__('An account allows you to earn rewards and backup your data.')}
         // @endif
         actions={
           <div className={classnames({ 'card--disabled': DOMAIN === 'lbry.tv' })}>
             <Form onSubmit={handleSubmit} className="section">
-              <FormField
-                autoFocus
-                placeholder={__('yourstruly@example.com')}
-                type="email"
-                name="sign_up_email"
-                label={__('Email')}
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-              />
-              <FormField
-                type="password"
-                name="sign_in_password"
-                label={__('Password')}
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-
-              {/* @if TARGET='web' */}
-              <FormField
-                type="checkbox"
-                name="youtube_sync_checkbox"
-                label={__('Sync my YouTube channel')}
-                checked={interestedInYoutubSync}
-                onChange={() => doToggleInterestedInYoutubeSync()}
-              />
-              {/* @endif */}
-
-              {/* @if TARGET='app' */}
-              <FormField
-                type="checkbox"
-                name="sync_checkbox"
-                label={
-                  <React.Fragment>
-                    {__('Backup your account and wallet data.')}{' '}
-                    <Button button="link" href="https://lbry.com/faq/account-sync" label={__('Learn More')} />
-                  </React.Fragment>
-                }
-                checked={formSyncEnabled}
-                onChange={() => setFormSyncEnabled(!formSyncEnabled)}
-              />
-              {/* @endif */}
-
-              {!shareUsageData && !IS_WEB && (
-                <FormField
-                  type="checkbox"
-                  name="share_data_checkbox"
-                  checked={localShareUsageData}
-                  onChange={handleUsageDataChange}
-                  label={
-                    <React.Fragment>
-                      {__('Share usage data with LBRY inc.')}{' '}
-                      <Button button="link" href="https://lbry.com/faq/privacy-and-data" label={__('Learn More')} />
-                      {!localShareUsageData && <span className="error__text"> ({__('Required')})</span>}
-                    </React.Fragment>
-                  }
-                />
-              )}
-              <div className="section__actions">
-                <Button
-                  button="primary"
-                  type="submit"
-                  label={__('Sign Up')}
-                  disabled={
-                    !email || !password || !valid || (!IS_WEB && !localShareUsageData && !shareUsageData) || isPending
-                  }
-                />
-                <Button button="link" onClick={handleChangeToSignIn} label={__('Log In')} />
-              </div>
               <p className="help--card-actions">
-                <I18nMessage
+                <I18nMessage>If you want to upload content to LBRY Network download Desktop App</I18nMessage>
-                  tokens={{
-                    terms: <Button button="link" href="https://www.lbry.com/termsofservice" label={__('terms')} />,
-                  }}
-                >
-                  By creating an account, you agree to our %terms% and confirm you're over the age of 13.
-                </I18nMessage>
               </p>
             </Form>
           </div>

ui/component/userEmailReturning/view.jsx

@@ -11,6 +11,7 @@ import Card from 'component/common/card';
 import Nag from 'component/common/nag';
 import classnames from 'classnames';
 import LoginGraphic from 'component/loginGraphic';
+import I18nMessage from 'component/i18nMessage';
 
 type Props = {
   user: ?User,
@@ -80,47 +81,12 @@ function UserEmailReturning(props: Props) {
         <UserEmailVerify />
       ) : (
         <Card
-          title={__('Log in to %SITE_NAME%', { SITE_NAME })}
           actions={
             <div>
               <Form onSubmit={handleSubmit} className="section">
-                <FormField
+                <p className="help--card-actions">
-                  autoFocus={!emailExistsFromUrl}
+                  <I18nMessage>If you want to upload content to LBRY Network download Desktop App</I18nMessage>
-                  placeholder={__('yourstruly@example.com')}
+                </p>
-                  type="email"
-                  id="username"
-                  autoComplete="on"
-                  name="sign_in_email"
-                  label={__('Email')}
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                />
-
-                {/* @if TARGET='app' */}
-                <FormField
-                  type="checkbox"
-                  name="sync_checkbox"
-                  label={
-                    <React.Fragment>
-                      {__('Backup your account and wallet data.')}{' '}
-                      <Button button="link" href="https://lbry.com/faq/account-sync" label={__('Learn More')} />
-                    </React.Fragment>
-                  }
-                  checked={syncEnabled}
-                  onChange={() => setSyncEnabled(!syncEnabled)}
-                />
-                {/* @endif */}
-
-                <div className="section__actions">
-                  <Button
-                    autoFocus={emailExistsFromUrl}
-                    button="primary"
-                    type="submit"
-                    label={__('Log In')}
-                    disabled={!email || !valid || isPending}
-                  />
-                  <Button button="link" onClick={handleChangeToSignIn} label={__('Sign Up')} />
-                </div>
               </Form>
             </div>
           }

ui/constants/pages.js

@@ -72,3 +72,4 @@ exports.LIVESTREAM = 'livestream';
 exports.LIVESTREAM_CURRENT = 'live';
 exports.GENERAL = 'general';
 exports.LIST = 'list';
+exports.DONATION = 'donation';

ui/page/donation/index.js

@@ -0,0 +1,19 @@
+import * as PAGES from 'constants/pages';
+import { connect } from 'react-redux';
+import { doFetchAccessToken } from 'redux/actions/user';
+import { selectAccessToken, selectUser } from 'redux/selectors/user';
+import { selectDaemonSettings } from 'redux/selectors/settings';
+import HelpPage from './view';
+
+const select = (state) => ({
+  user: selectUser(state),
+  accessToken: selectAccessToken(state),
+  deamonSettings: selectDaemonSettings(state),
+});
+
+const perform = (dispatch, ownProps) => ({
+  doAuth: () => ownProps.history.push(`/$/${PAGES.AUTH}?redirect=/$/${PAGES.HELP}`),
+  fetchAccessToken: () => dispatch(doFetchAccessToken()),
+});
+
+export default connect(select, perform)(HelpPage);

ui/page/donation/view.jsx

@@ -0,0 +1,183 @@
+// @flow
+import * as React from 'react';
+// @if TARGET='app'
+import { shell } from 'electron';
+// @endif
+import { Lbry } from 'lbry-redux';
+import Native from 'native';
+import Button from 'component/button';
+import Page from 'component/page';
+import 'scss/component/_donation';
+
+type DeamonSettings = {
+  data_dir: string | any,
+};
+
+type Props = {
+  deamonSettings: DeamonSettings,
+  accessToken: string,
+  fetchAccessToken: () => void,
+  doAuth: () => void,
+  user: any,
+};
+
+type VersionInfo = {
+  os_system: string,
+  os_release: string,
+  platform: string,
+  lbrynet_version: string,
+};
+
+type State = {
+  versionInfo: VersionInfo | any,
+  lbryId: String | any,
+  uiVersion: ?string,
+  upgradeAvailable: ?boolean,
+  accessTokenHidden: ?boolean,
+};
+
+class HelpPage extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      versionInfo: null,
+      lbryId: null,
+      uiVersion: null,
+      upgradeAvailable: null,
+      accessTokenHidden: true,
+    };
+
+    (this: any).showAccessToken = this.showAccessToken.bind(this);
+    (this: any).openLogFile = this.openLogFile.bind(this);
+  }
+
+  componentDidMount() {
+    // @if TARGET='app'
+    Native.getAppVersionInfo().then(({ localVersion, upgradeAvailable }) => {
+      this.setState({
+        uiVersion: localVersion,
+        upgradeAvailable,
+      });
+    });
+    if (!this.props.accessToken) this.props.fetchAccessToken();
+    // @endif
+
+    Lbry.version().then((info) => {
+      this.setState({
+        versionInfo: info,
+      });
+    });
+    Lbry.status().then((info) => {
+      this.setState({
+        lbryId: info.installation_id,
+      });
+    });
+  }
+
+  showAccessToken() {
+    this.setState({
+      accessTokenHidden: false,
+    });
+  }
+
+  openLogFile(userHomeDirectory: string) {
+    const logFileName = 'lbrynet.log';
+    const os = this.state.versionInfo.os_system;
+    if (os === 'Darwin' || os === 'Linux') {
+      shell.openPath(`${userHomeDirectory}/${logFileName}`);
+    } else {
+      shell.openPath(`${userHomeDirectory}\\${logFileName}`);
+    }
+  }
+
+  render() {
+    let ver;
+    let osName;
+    let platform;
+    let newVerLink;
+
+    if (this.state.versionInfo) {
+      ver = this.state.versionInfo;
+      if (ver.os_system === 'Darwin') {
+        osName = parseInt(ver.os_release.match(/^\d+/), 10) < 16 ? 'Mac OS X' : 'Mac OS';
+
+        platform = `${osName} ${ver.os_release}`;
+        newVerLink = 'https://lbry.com/get/lbry.dmg';
+      } else if (process.env.APPIMAGE !== undefined) {
+        platform = `Linux (AppImage)`;
+        newVerLink = 'https://lbry.com/get/lbry.AppImage';
+      } else if (ver.os_system === 'Linux') {
+        platform = `Linux (${ver.platform})`;
+        newVerLink = 'https://lbry.com/get/lbry.deb';
+      } else {
+        platform = `Windows (${ver.platform})`;
+        newVerLink = 'https://lbry.com/get/lbry.msi';
+      }
+    } else {
+      ver = null;
+    }
+
+    return (
+      <Page className="card-stack">
+        <h1 className="donation-h1">Donations</h1>
+
+        <div className="notice-message">
+          <h1 className="section__title">{__('Help LBRY Save Crypto')}</h1>
+          <p className="section__subtitle">
+            {__('The US government is attempting to destroy the cryptocurrency industry. Can you help?')}{' '}
+            <Button label={__('Learn more and sign petition')} button="link" href="https://helplbrysavecrypto.com" />
+          </p>
+        </div>
+
+        <p className="donation-p">
+          <span className="donation-span">
+            <img src="https://s2.coinmarketcap.com/static/img/coins/64x64/4027.png" className="donation-icon" />
+            DeVault: qrup4teghgza9ylxqd2cdawmdwyyhwd5vv4s00rn5c
+          </span>
+          <span className="donation-span">
+            <img src="https://s2.coinmarketcap.com/static/img/coins/64x64/1298.png" className="donation-icon" />
+            LBRY Credits: bXeBKSjPygVbvkBH79Bp6CxiyeRC2hpVQ3
+          </span>
+          <span className="donation-span">
+            <img src="https://cointr.ee/static/media/btc.ea6d0c84.png" className="donation-icon" />
+            Bitcoin:
+          </span>
+          <span className="donation-span">
+            <img src="https://cointr.ee/static/media/eth.6d288663.png" className="donation-icon" />
+            Ethereum:
+          </span>
+          <span className="donation-span">
+            <img src="https://cointr.ee/static/media/ltc.14cfbc4c.png" className="donation-icon" />
+            Litecoin:
+          </span>
+          <span className="donation-span">
+            <img src="https://cointr.ee/static/media/dash.59d339da.png" className="donation-icon" />
+            Dash:
+          </span>
+          <span className="donation-span">
+            <img src="https://cointr.ee/static/media/doge.fb74d36c.png" className="donation-icon" />
+            Dogecoin:
+          </span>
+          <span className="donation-span">
+            <img src="https://s2.coinmarketcap.com/static/img/coins/64x64/4030.png" className="donation-icon" />
+            Algorand: LJF6DQHBA475GUANNWK4JPSK22MWYXX2YY7M7IT3Q43CDVYXKXGE3TYVQA
+          </span>
+          <span className="donation-span">
+            <img src="https://s2.coinmarketcap.com/static/img/coins/64x64/1521.png" className="donation-icon" />
+            Komodo: RLZWLmLQGYA29gMLYkxJ1A2MM21ALfSa88
+          </span>
+
+          {/*
+            <span className="donation-span">
+                <img src="Image URL" className="donation-icon" />
+                Crypto Name: Crypto Address
+            </span>
+            */}
+        </p>
+      </Page>
+    );
+  }
+}
+
+export default HelpPage;

ui/page/home/view.jsx

@@ -38,7 +38,7 @@ function HomePage(props: Props) {
   );
 
   return (
-    <Page fullWidthPage>
+    <Page fullWidthPage noFooter>
       {IS_WEB && DOMAIN === 'lbry.tv' && (
         <div className="notice-message--loud">
           <h1 className="section__title">

ui/scss/component/_donation.scss

@@ -0,0 +1,21 @@
+.donation-h1 {
+  text-align: center;
+  font-size: 50px;
+  margin-bottom: 20px;
+}
+
+.donation-p {
+  margin-top: 20px;
+}
+
+.donation-span {
+  display: block;
+  font-size: 25px;
+  padding: 5px 5px 5px 5px;
+}
+
+.donation-icon {
+  height: 30px;
+  width: 30px;
+  padding-right: 5px;
+}

ui/scss/component/nag.scss

@@ -13,6 +13,7 @@ $nag-error-z-index: 999;
   color: var(--color-white);
   font-weight: var(--font-weight-bold);
   text-align: center;
+  background-color: #3e675d;
 
   .button--link {
     font-weight: var(--font-weight-bold);
@@ -50,6 +51,7 @@ $nag-error-z-index: 999;
 
 .nag__message {
   display: inline;
+  background-color: #3e675d;
 
   @media (max-width: $breakpoint-small) {
     &::after {