backup help

ui/js/component/link/view.jsx

@@ -17,11 +17,9 @@ const Link = props => {
 
   const className =
     (props.className || "") +
-    (!props.className && !props.button ? "button-text" : "") + // Non-button links get the same look as text buttons
-    (props.button
-      ? " button-block button-" + props.button + " button-set-item"
-      : "") +
-    (props.disabled ? " disabled" : "");
+    (!props.className && !button ? "button-text" : "") + // Non-button links get the same look as text buttons
+    (button ? " button-block button-" + button + " button-set-item" : "") +
+    (disabled ? " disabled" : "");
 
   let content;
   if (children) {

ui/js/page/backup/view.jsx

@@ -23,22 +23,28 @@ class BackupPage extends React.PureComponent {
             <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>
+            <p>
+              {__(
+                "Currently, there is no automatic wallet backup, but it is fairly easy to back up manually."
+              )}
+            </p>
+            <p>
+              {__(
+                "To backup your wallet, make a copy of the folder listed below:"
+              )}
+            </p>
+            <p>
+              <code>
+                {__(`${daemonSettings.lbryum_wallet_dir}`)}
+              </code>
+            </p>
+            <p>
+              <strong>
+                {__(
+                  "Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place."
+                )}
+              </strong>
+            </p>
           </div>
         </section>
       </main>

ui/js/page/wallet/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
+import { doNavigate } from "actions/app";
 import { selectCurrentPage } from "selectors/app";
 import { selectBalance } from "selectors/wallet";
 import WalletPage from "./view";
@@ -9,4 +10,8 @@ const select = state => ({
   balance: selectBalance(state),
 });
 
-export default connect(select, null)(WalletPage);
+const perform = dispatch => ({
+  navigate: path => dispatch(doNavigate(path)),
+});
+
+export default connect(select, perform)(WalletPage);

ui/js/page/wallet/view.jsx

@@ -3,11 +3,11 @@ import SubHeader from "component/subHeader";
 import TransactionList from "component/transactionList";
 import WalletAddress from "component/walletAddress";
 import WalletSend from "component/walletSend";
-
+import Link from "component/link";
 import { CreditAmount } from "component/common";
 
 const WalletPage = props => {
-  const { balance, currentPage } = props;
+  const { balance, currentPage, navigate } = props;
 
   return (
     <main className="main--single-column">
@@ -19,6 +19,14 @@ const WalletPage = props => {
         <div className="card__content">
           <CreditAmount amount={balance} precision={8} />
         </div>
+        <div className="card__content">
+          <div className="help">
+            <Link
+              onClick={() => navigate("/backup")}
+              label={__("Backup Your Wallet")}
+            />
+          </div>
+        </div>
       </section>
       {currentPage === "wallet" ? <TransactionList {...props} /> : ""}
       {currentPage === "send" ? <WalletSend {...props} /> : ""}

ui/js/selectors/app.js

@@ -144,7 +144,6 @@ export const selectHeaderLinks = createSelector(selectCurrentPage, page => {
         send: __("Send"),
         receive: __("Receive"),
         rewards: __("Rewards"),
-        backup: __("Backup"),
       };
     case "downloaded":
     case "published":