From 00485532d52259ee65116d5464b19d1bccc8ff9b Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 21 Feb 2020 12:23:04 -0500
Subject: [PATCH] add wallet sync message on wallet page

---
 static/app-strings.json             |  7 ++++++-
 ui/component/common/help-link.jsx   |  7 ++++---
 ui/component/router/view.jsx        |  2 ++
 ui/component/walletBalance/index.js |  3 ++-
 ui/component/walletBalance/view.jsx | 30 ++++++++++++++++++++++++++++-
 ui/page/backup/index.js             |  2 ++
 ui/page/backup/view.jsx             | 14 ++++++++++++++
 ui/page/help/view.jsx               |  2 --
 8 files changed, 59 insertions(+), 8 deletions(-)
 create mode 100644 ui/page/backup/index.js
 create mode 100644 ui/page/backup/view.jsx

diff --git a/static/app-strings.json b/static/app-strings.json
index 9b65203cc..be30490b7 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -962,5 +962,10 @@
   "Sign in with lbry.tv to receive notifications about new content.": "Sign in with lbry.tv to receive notifications about new content.",
   "Find new channels to follow": "Find new channels to follow",
   "You aren't currently following any channels. %discover_channels_link%.": "You aren't currently following any channels. %discover_channels_link%.",
-  "LBRY Works Better If You Are Following Channels": "LBRY Works Better If You Are Following Channels"
+  "LBRY Works Better If You Are Following Channels": "LBRY Works Better If You Are Following Channels",
+  "Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.": "Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.",
+  "A copy of your wallet is synced to lbry.tv": "A copy of your wallet is synced to lbry.tv",
+  "Saved zip archive to %outputPath%": "Saved zip archive to %outputPath%",
+  "A backup of your wallet is synced with lbry.tv": "A backup of your wallet is synced with lbry.tv",
+  "A backup of your wallet is synced with lbry.tv.": "A backup of your wallet is synced with lbry.tv."
 }
\ No newline at end of file
diff --git a/ui/component/common/help-link.jsx b/ui/component/common/help-link.jsx
index 867288f1e..da942c806 100644
--- a/ui/component/common/help-link.jsx
+++ b/ui/component/common/help-link.jsx
@@ -4,10 +4,11 @@ import React from 'react';
 import Button from 'component/button';
 
 type Props = {
-  href: string,
+  href?: string,
+  navigate?: string,
 };
 
 export default function HelpLink(props: Props) {
-  const { href } = props;
-  return <Button className="icon--help" icon={ICONS.HELP} description={__('Help')} href={href} />;
+  const { href, navigate } = props;
+  return <Button className="icon--help" icon={ICONS.HELP} description={__('Help')} href={href} navigate={navigate} />;
 }
diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx
index 78e9acd5a..562b7ef33 100644
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@@ -4,6 +4,7 @@ import React, { useEffect } from 'react';
 import { Route, Redirect, Switch, withRouter } from 'react-router-dom';
 import SettingsPage from 'page/settings';
 import HelpPage from 'page/help';
+import BackupPage from 'page/backup';
 import ReportPage from 'page/report';
 import ShowPage from 'page/show';
 import PublishPage from 'page/publish';
@@ -144,6 +145,7 @@ function AppRouter(props: Props) {
       />
       <Route path={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`} exact component={ChannelsFollowingDiscoverPage} />
       <Route path={`/$/${PAGES.HELP}`} exact component={HelpPage} />
+      <Route path={`/$/${PAGES.BACKUP}`} exact component={BackupPage} />
       <Route path={`/$/${PAGES.AUTH_VERIFY}`} exact component={SignInVerifyPage} />
       <Route path={`/$/${PAGES.SEARCH}`} exact component={SearchPage} />
       <Route path={`/$/${PAGES.TOP}`} exact component={TopPage} />
diff --git a/ui/component/walletBalance/index.js b/ui/component/walletBalance/index.js
index b427ff8f8..e6d8e1b95 100644
--- a/ui/component/walletBalance/index.js
+++ b/ui/component/walletBalance/index.js
@@ -7,7 +7,7 @@ import {
   selectTipsBalance,
 } from 'lbry-redux';
 import { doOpenModal } from 'redux/actions/app';
-import { selectClaimedRewards } from 'lbryinc';
+import { selectClaimedRewards, selectSyncHash } from 'lbryinc';
 import WalletBalance from './view';
 
 const select = state => ({
@@ -17,6 +17,7 @@ const select = state => ({
   supportsBalance: selectSupportsBalance(state) || 0,
   tipsBalance: selectTipsBalance(state) || 0,
   rewards: selectClaimedRewards(state),
+  hasSynced: Boolean(selectSyncHash(state)),
 });
 
 export default connect(
diff --git a/ui/component/walletBalance/view.jsx b/ui/component/walletBalance/view.jsx
index fac3f4f87..afa8f0788 100644
--- a/ui/component/walletBalance/view.jsx
+++ b/ui/component/walletBalance/view.jsx
@@ -1,10 +1,12 @@
 // @flow
 import * as ICONS from 'constants/icons';
 import * as MODALS from 'constants/modal_types';
+import * as PAGES from 'constants/pages';
 import React from 'react';
 import CreditAmount from 'component/common/credit-amount';
 import Button from 'component/button';
 import Icon from 'component/common/icon';
+import HelpLink from 'component/common/help-link';
 
 type Props = {
   balance: number,
@@ -13,10 +15,11 @@ type Props = {
   supportsBalance: number,
   tipsBalance: number,
   doOpenModal: string => void,
+  hasSynced: boolean,
 };
 
 const WalletBalance = (props: Props) => {
-  const { balance, claimsBalance, supportsBalance, tipsBalance, doOpenModal } = props;
+  const { balance, claimsBalance, supportsBalance, tipsBalance, doOpenModal, hasSynced } = props;
 
   return (
     <React.Fragment>
@@ -36,6 +39,31 @@ const WalletBalance = (props: Props) => {
               onClick={() => doOpenModal(MODALS.WALLET_SEND)}
             />
           </div>
+          {/* @if TARGET='app' */}
+          {hasSynced ? (
+            <div className="section">
+              <div className="section__flex">
+                <Icon sectionIcon iconColor={'blue'} icon={ICONS.LOCK} />
+                <h2 className="section__title--small">
+                  {__('A backup of your wallet is synced with lbry.tv.')}
+                  <HelpLink href="https://lbry.com/faq/account-sync" />
+                </h2>
+              </div>
+            </div>
+          ) : (
+            <div className="section">
+              <div className="section__flex">
+                <Icon sectionIcon iconColor={'blue'} icon={ICONS.UNLOCK} />
+                <h2 className="section__title--small">
+                  {__(
+                    'Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.'
+                  )}
+                  <HelpLink navigate={`/$/${PAGES.BACKUP}`} />
+                </h2>
+              </div>
+            </div>
+          )}
+          {/* @endif */}
         </div>
 
         <div>
diff --git a/ui/page/backup/index.js b/ui/page/backup/index.js
new file mode 100644
index 000000000..dff4fdd69
--- /dev/null
+++ b/ui/page/backup/index.js
@@ -0,0 +1,2 @@
+import BackupPage from './view';
+export default BackupPage;
diff --git a/ui/page/backup/view.jsx b/ui/page/backup/view.jsx
new file mode 100644
index 000000000..92ca9599d
--- /dev/null
+++ b/ui/page/backup/view.jsx
@@ -0,0 +1,14 @@
+// @flow
+import * as React from 'react';
+import Page from 'component/page';
+import WalletBackup from 'component/walletBackup';
+
+function BackupPage() {
+  return (
+    <Page>
+      <WalletBackup />
+    </Page>
+  );
+}
+
+export default BackupPage;
diff --git a/ui/page/help/view.jsx b/ui/page/help/view.jsx
index 85efa8dd3..37ba5df5e 100644
--- a/ui/page/help/view.jsx
+++ b/ui/page/help/view.jsx
@@ -4,7 +4,6 @@ import * as icons from 'constants/icons';
 import * as React from 'react';
 // @if TARGET='app'
 import { shell } from 'electron';
-import WalletBackup from 'component/walletBackup';
 // @endif
 import { Lbry } from 'lbry-redux';
 import Native from 'native';
@@ -199,7 +198,6 @@ class HelpPage extends React.PureComponent<Props, State> {
           }
         />
 
-        <WalletBackup />
         {/* @endif */}
 
         <section className="card">