From aefda6398bc8dd92b5e3d310aa13c73e99db435f Mon Sep 17 00:00:00 2001
From: hackrush <atulshyan96@gmail.com>
Date: Thu, 10 Aug 2017 00:42:02 +0530
Subject: [PATCH] Added wallet backup guide referance.

It also displays the current wallet path so user doesn't have to "go
places"

Could use a different/better msg though, this was more of a place
holder.
---
 CHANGELOG.md                    |  1 +
 ui/js/component/router/view.jsx |  2 ++
 ui/js/page/backup/index.js      | 10 +++++++
 ui/js/page/backup/view.jsx      | 49 +++++++++++++++++++++++++++++++++
 ui/js/selectors/app.js          |  5 ++++
 ui/js/selectors/search.js       |  1 +
 6 files changed, 68 insertions(+)
 create mode 100644 ui/js/page/backup/index.js
 create mode 100644 ui/js/page/backup/view.jsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 23679792c..62d107031 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
 ## [Unreleased]
 ### Added
   * Added a new component, `FormFieldPrice` which is now used in Publish and Settings
+  * Added wallet backup guide reference
   *
 
 ### Changed
diff --git a/ui/js/component/router/view.jsx b/ui/js/component/router/view.jsx
index 74ffc836b..fa26f61eb 100644
--- a/ui/js/component/router/view.jsx
+++ b/ui/js/component/router/view.jsx
@@ -14,6 +14,7 @@ import FileListPublished from "page/fileListPublished";
 import ChannelPage from "page/channel";
 import SearchPage from "page/search";
 import AuthPage from "page/auth";
+import BackupPage from "page/backup";
 
 const route = (page, routesMap) => {
   const component = routesMap[page];
@@ -26,6 +27,7 @@ const Router = props => {
 
   return route(currentPage, {
     auth: <AuthPage params={params} />,
+    backup: <BackupPage params={params} />,
     channel: <ChannelPage params={params} />,
     developer: <DeveloperPage params={params} />,
     discover: <DiscoverPage params={params} />,
diff --git a/ui/js/page/backup/index.js b/ui/js/page/backup/index.js
new file mode 100644
index 000000000..fd83a400f
--- /dev/null
+++ b/ui/js/page/backup/index.js
@@ -0,0 +1,10 @@
+import React from "react";
+import { connect } from "react-redux";
+import { selectDaemonSettings } from "selectors/settings";
+import BackupPage from "./view";
+
+const select = state => ({
+  daemonSettings: selectDaemonSettings(state),
+});
+
+export default connect(select, null)(BackupPage);
diff --git a/ui/js/page/backup/view.jsx b/ui/js/page/backup/view.jsx
new file mode 100644
index 000000000..22dc966c2
--- /dev/null
+++ b/ui/js/page/backup/view.jsx
@@ -0,0 +1,49 @@
+import React from "react";
+import SubHeader from "component/subHeader";
+import Link from "component/link";
+
+class BackupPage extends React.PureComponent {
+  render() {
+    const { daemonSettings } = this.props;
+
+    if (!daemonSettings || Object.keys(daemonSettings).length === 0) {
+      return (
+        <main className="main--single-column">
+          <SubHeader />
+          <span className="empty">{__("Failed to load settings.")}</span>
+        </main>
+      );
+    }
+
+    return (
+      <main className="main--single-column">
+        <SubHeader />
+        <section className="card">
+          <div className="card__title-primary">
+            <h3>{__("Backup Wallet")}</h3>
+          </div>
+          <div className="card__content">
+            {__(
+              "Right now there is no automated procedure for backing up the wallet, but rest assured we are working on it(We do have a lot on our plates ^‿^)."
+            )}
+            {__(
+              " But you can still back it up manually, by following the steps mentioned here."
+            )}
+            <Link
+              label={__("Backup LBRY wallet")}
+              href="https://lbry.io/faq/how-to-backup-wallet"
+            />
+          </div>
+          <div className="card__content">
+            {__("Path of your wallet is: ")}
+            <span style={{ backgroundColor: "rgba(211, 211, 211, 0.49)" }}>
+              {__(`${daemonSettings.lbryum_wallet_dir}`)}
+            </span>
+          </div>
+        </section>
+      </main>
+    );
+  }
+}
+
+export default BackupPage;
diff --git a/ui/js/selectors/app.js b/ui/js/selectors/app.js
index a67dc9f37..c110a1747 100644
--- a/ui/js/selectors/app.js
+++ b/ui/js/selectors/app.js
@@ -41,6 +41,8 @@ export const selectPageTitle = createSelector(
         return __("Send");
       case "receive":
         return __("Receive");
+      case "backup":
+        return __("Backup");
       case "rewards":
         return __("Rewards");
       case "start":
@@ -130,16 +132,19 @@ export const selectDownloadComplete = createSelector(
 );
 
 export const selectHeaderLinks = createSelector(selectCurrentPage, page => {
+  // This contains intentional fall throughs
   switch (page) {
     case "wallet":
     case "send":
     case "receive":
     case "rewards":
+    case "backup":
       return {
         wallet: __("Overview"),
         send: __("Send"),
         receive: __("Receive"),
         rewards: __("Rewards"),
+        backup: __("Backup"),
       };
     case "downloaded":
     case "published":
diff --git a/ui/js/selectors/search.js b/ui/js/selectors/search.js
index 9660cdcb5..1daa1ef79 100644
--- a/ui/js/selectors/search.js
+++ b/ui/js/selectors/search.js
@@ -57,6 +57,7 @@ export const selectWunderBarIcon = createSelector(selectCurrentPage, page => {
     case "wallet":
     case "send":
     case "receive":
+    case "backup":
       return "icon-bank";
     case "show":
       return "icon-file";