move backup page inside of help

src/ui/component/router/view.jsx

@@ -14,7 +14,6 @@ import FileListPublished from 'page/fileListPublished';
 import TransactionHistoryPage from 'page/transactionHistory';
 import AuthPage from 'page/auth';
 import InvitePage from 'page/invite';
-import BackupPage from 'page/backup';
 import SubscriptionsPage from 'page/subscriptions';
 import SearchPage from 'page/search';
 import UserHistoryPage from 'page/userHistory';
@@ -39,7 +38,6 @@ export default function AppRouter() {
       <Switch>
         <Route path="/" exact component={DiscoverPage} />
         <Route path={`/$/${PAGES.AUTH}`} exact component={AuthPage} />
-        <Route path={`/$/${PAGES.BACKUP}`} exact component={BackupPage} />
         <Route path={`/$/${PAGES.INVITE}`} exact component={InvitePage} />
         <Route path={`/$/${PAGES.DOWNLOADED}`} exact component={FileListDownloaded} />
         <Route path={`/$/${PAGES.PUBLISHED}`} exact component={FileListPublished} />

src/ui/component/sideBar/view.jsx

@@ -91,11 +91,6 @@ class SideBar extends React.PureComponent<Props> {
             {
               ...buildLink(PAGES.SETTINGS, __('Settings'), ICONS.SETTINGS),
             },
-            // @if TARGET='app'
-            {
-              ...buildLink(PAGES.BACKUP, __('Backup'), ICONS.BACKUP),
-            },
-            // @endif
           ].map(renderLink)}
         </ul>
 

src/ui/component/walletBackup/index.js

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
 import { selectDaemonSettings } from 'redux/selectors/settings';
-import BackupPage from './view';
+import WalletBackup from './view';
 
 const select = state => ({
   daemonSettings: selectDaemonSettings(state),
 });
 
-export default connect(select)(BackupPage);
+export default connect(select)(WalletBackup);

src/ui/component/walletBackup/view.jsx

@@ -0,0 +1,66 @@
+// @flow
+import * as React from 'react';
+import Button from 'component/button';
+
+type Props = {
+  daemonSettings: {
+    wallet_dir: ?string,
+  },
+};
+
+class WalletBackup extends React.PureComponent<Props> {
+  render() {
+    const { daemonSettings } = this.props;
+    const { wallet_dir: lbryumWalletDir } = daemonSettings;
+
+    const noDaemonSettings = Object.keys(daemonSettings).length === 0;
+
+    return (
+      <section className="card card--section">
+        {noDaemonSettings ? (
+          <header className="card__header">
+            <h2 className="card__title">{__('Failed to load settings.')}</h2>
+          </header>
+        ) : (
+          <React.Fragment>
+            <header className="card__header">
+              <h2 className="card__title">{__('Backup Your LBRY Credits')}</h2>
+
+              <p className="card__subtitle">
+                {__(
+                  'Your LBRY credits are controllable by you and only you, via wallet file(s) stored locally on your computer.'
+                )}
+              </p>
+            </header>
+
+            <div className="card__content">
+              <p>
+                {__(
+                  'Currently, there is no automatic wallet backup. If you lose access to these files, you will lose your credits permanently.'
+                )}
+              </p>
+              <p>
+                {__(
+                  'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:'
+                )}
+              </p>
+              <p className="card__message">{lbryumWalletDir}</p>
+              <p>
+                {__(
+                  'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.'
+                )}
+              </p>
+              <p>
+                For more details on backing up and best practices,{' '}
+                <Button button="link" href="https://lbry.com/faq/how-to-backup-wallet" label={__('see this article')} />
+                .
+              </p>
+            </div>
+          </React.Fragment>
+        )}
+      </section>
+    );
+  }
+}
+
+export default WalletBackup;

src/ui/page/help/view.jsx

@@ -2,7 +2,6 @@
 // @flow
 import * as icons from 'constants/icons';
 import * as React from 'react';
-import classnames from 'classnames';
 // @if TARGET='app'
 import { shell } from 'electron';
 // @endif
@@ -10,6 +9,7 @@ import { Lbry } from 'lbry-redux';
 import Native from 'native';
 import Button from 'component/button';
 import Page from 'component/page';
+import BackupSection from 'component/walletBackup';
 
 type DeamonSettings = {
   data_dir: string | any,
@@ -194,6 +194,10 @@ class HelpPage extends React.PureComponent<Props, State> {
           </div>
         </section>
 
+        {/* @if TARGET='app' */}
+        <BackupSection />
+        {/* @endif */}
+
         <section className="card card--section">
           <header className="card__header">
             <h2 className="card__title">{__('About')}</h2>