first pass at sync for everyone

package.json

@@ -130,7 +130,7 @@
     "husky": "^0.14.3",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#6edcf747e10919605b05b905214fe1d3286898e3",
+    "lbry-redux": "lbryio/lbry-redux#0090f195eb88f4620db7d038f7b01eaa76119836",
     "lbryinc": "lbryio/lbryinc#b8e1708ee4491db342c81576265e1b58f542bedb",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",

src/ui/component/app/index.js

@@ -5,7 +5,8 @@ import { selectUser, doRewardList, doFetchRewardedContent, doFetchAccessToken }
 import { doFetchTransactions, doFetchChannelListMine, selectBalance } from 'lbry-redux';
 import { makeSelectClientSetting, selectThemePath } from 'redux/selectors/settings';
 import { selectIsUpgradeAvailable, selectAutoUpdateDownloaded } from 'redux/selectors/app';
-import { doDownloadUpgradeRequested, doSignIn } from 'redux/actions/app';
+import { doDownloadUpgradeRequested, doSignIn, doSyncWithPreferences } from 'redux/actions/app';
+import { doSetClientSetting } from 'redux/actions/settings';
 import App from './view';
 
 const select = state => ({
@@ -15,6 +16,7 @@ const select = state => ({
   autoUpdateDownloaded: selectAutoUpdateDownloaded(state),
   isUpgradeAvailable: selectIsUpgradeAvailable(state),
   balance: selectBalance(state),
+  syncEnabled: makeSelectClientSetting(SETTINGS.ENABLE_SYNC)(state),
 });
 
 const perform = dispatch => ({
@@ -25,6 +27,8 @@ const perform = dispatch => ({
   fetchChannelListMine: () => dispatch(doFetchChannelListMine()),
   signIn: () => dispatch(doSignIn()),
   requestDownloadUpgrade: () => dispatch(doDownloadUpgradeRequested()),
+  checkSync: () => dispatch(doSyncWithPreferences()),
+  setSyncEnabled: value => dispatch(doSetClientSetting(SETTINGS.ENABLE_SYNC, value)),
 });
 
 export default hot(

src/ui/component/app/view.jsx

@@ -19,6 +19,7 @@ export const MAIN_WRAPPER_CLASS = 'main-wrapper';
 // @if TARGET='app'
 export const IS_MAC = process.platform === 'darwin';
 // @endif
+const SYNC_INTERVAL = 1000 * 60 * 5; // 5 minutes
 
 type Props = {
   alertError: (string | {}) => void,
@@ -38,7 +39,9 @@ type Props = {
   onSignedIn: () => void,
   isUpgradeAvailable: boolean,
   autoUpdateDownloaded: boolean,
-  balance: ?number,
+  checkSync: () => void,
+  setSyncEnabled: boolean => void,
+  syncEnabled: boolean,
 };
 
 function App(props: Props) {
@@ -54,7 +57,9 @@ function App(props: Props) {
     autoUpdateDownloaded,
     isUpgradeAvailable,
     requestDownloadUpgrade,
-    balance,
+    syncEnabled,
+    checkSync,
+    setSyncEnabled,
   } = props;
   const appRef = useRef();
   const isEnhancedLayout = useKonamiListener();
@@ -114,13 +119,27 @@ function App(props: Props) {
   // Keep this at the end to ensure initial setup effects are run first
   useEffect(() => {
     // Wait for balance to be populated on desktop so we know when we can begin syncing
-    // @syncwithbalancefixme
-    if (!hasSignedIn && hasVerifiedEmail && (IS_WEB || balance !== undefined)) {
+    if (!hasSignedIn && hasVerifiedEmail) {
       signIn();
-
       setHasSignedIn(true);
     }
-  }, [hasVerifiedEmail, signIn, balance, hasSignedIn]);
+  }, [hasVerifiedEmail, signIn, hasSignedIn]);
+
+  useEffect(() => {
+    if (!hasVerifiedEmail && syncEnabled) {
+      setSyncEnabled(false);
+    } else if (hasVerifiedEmail && syncEnabled) {
+      checkSync();
+
+      let syncInterval = setInterval(() => {
+        checkSync();
+      }, SYNC_INTERVAL);
+
+      return () => {
+        clearInterval(syncInterval);
+      };
+    }
+  }, [hasVerifiedEmail, syncEnabled, checkSync, setSyncEnabled]);
 
   if (!user) {
     return null;

src/ui/component/syncToggle/index.js

@@ -0,0 +1,20 @@
+import * as SETTINGS from 'constants/settings';
+import { connect } from 'react-redux';
+import { selectUserVerifiedEmail } from 'lbryinc';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
+import { doSetClientSetting } from 'redux/actions/settings';
+import SyncToggle from './view';
+
+const select = state => ({
+  syncEnabled: makeSelectClientSetting(SETTINGS.ENABLE_SYNC)(state),
+  verifiedEmail: selectUserVerifiedEmail(state),
+});
+
+const perform = dispatch => ({
+  setSyncEnabled: value => dispatch(doSetClientSetting(SETTINGS.ENABLE_SYNC, value)),
+});
+
+export default connect(
+  select,
+  perform
+)(SyncToggle);

src/ui/component/syncToggle/view.jsx

@@ -0,0 +1,36 @@
+// @flow
+import React from 'react';
+import { FormField } from 'component/common/form';
+import Button from 'component/button';
+
+type Props = {
+  setSyncEnabled: boolean => void,
+  syncEnabled: boolean,
+  verifiedEmail: ?string,
+};
+
+function SyncToggle(props: Props) {
+  const { setSyncEnabled, syncEnabled, verifiedEmail } = props;
+
+  function handleChange() {
+    setSyncEnabled(!syncEnabled);
+  }
+
+  return (
+    <div>
+      {!verifiedEmail ? (
+        <Button requiresAuth button="primary" label={__('Start Syncing')} />
+      ) : (
+        <FormField
+          type="checkbox"
+          name="sync_toggle"
+          label={__('Sync your balance and preferences accross LBRY apps.')}
+          checked={syncEnabled}
+          onChange={handleChange}
+        />
+      )}
+    </div>
+  );
+}
+
+export default SyncToggle;

src/ui/component/userEmailNew/index.js

@@ -1,6 +1,5 @@
 import * as SETTINGS from 'constants/settings';
 import { connect } from 'react-redux';
-import { selectBalance } from 'lbry-redux';
 import { selectEmailNewIsPending, selectEmailNewErrorMessage, doUserEmailNew } from 'lbryinc';
 import { doSetClientSetting } from 'redux/actions/settings';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
@@ -10,7 +9,6 @@ const select = state => ({
   isPending: selectEmailNewIsPending(state),
   errorMessage: selectEmailNewErrorMessage(state),
   syncEnabled: makeSelectClientSetting(SETTINGS.ENABLE_SYNC)(state),
-  balance: selectBalance(state),
 });
 
 const perform = dispatch => ({

src/ui/component/userEmailNew/view.jsx

@@ -17,12 +17,13 @@ type Props = {
 };
 
 function UserEmailNew(props: Props) {
-  const { errorMessage, isPending, addUserEmail, syncEnabled, setSync, balance } = props;
+  const { errorMessage, isPending, addUserEmail, setSync } = props;
   const [newEmail, setEmail] = useState('');
-  const [ageConfirmation, setAgeConfirmation] = useState(true);
+  const [formSyncEnabled, setFormSyncEnabled] = useState(true);
   const valid = newEmail.match(EMAIL_REGEX);
 
   function handleSubmit() {
+    setSync(formSyncEnabled);
     addUserEmail(newEmail);
     analytics.emailProvidedEvent();
 
@@ -31,15 +32,8 @@ function UserEmailNew(props: Props) {
     // @endif
   }
 
-  React.useEffect(() => {
-    // Sync currently doesn't work for wallets with balances
-    if (syncEnabled && balance) {
-      setSync(false);
-    }
-  }, [balance, syncEnabled, setSync]);
-
   return (
-    <div>
+    <React.Fragment>
       <h1 className="section__title--large">{__('Welcome To LBRY')}</h1>
       <p className="section__subtitle">{__('Create a new account or sign in.')}</p>
       <Form onSubmit={handleSubmit} className="section__body">
@@ -54,60 +48,39 @@ function UserEmailNew(props: Props) {
           error={errorMessage}
           onChange={e => setEmail(e.target.value)}
         />
-        <div className="section">
+
+        {!IS_WEB && (
           <FormField
             type="checkbox"
-            name="age_checkbox"
+            name="sync_checkbox"
             label={
-              <I18nMessage
-                tokens={{
-                  terms: (
-                    <Button button="link" href="https://www.lbry.com/termsofservice" label={__('Terms of Service')} />
-                  ),
-                }}
-              >
-                I am over the age of 13 and agree to the %terms%.
-              </I18nMessage>
+              <React.Fragment>
+                {__('Sync balance and preferences across devices.')}{' '}
+                <Button button="link" href="https://lbry.com/faq/account-sync" label={__('Learn More')} />
+              </React.Fragment>
             }
-            checked={ageConfirmation}
-            onChange={() => setAgeConfirmation(!ageConfirmation)}
+            helper={
+              <React.Fragment>
+                <I18nMessage
+                  tokens={{
+                    terms: (
+                      <Button button="link" href="https://www.lbry.com/termsofservice" label={__('Terms of Service')} />
+                    ),
+                  }}
+                >
+                  By continuing, I agree to the %terms% and confirm I am over the age of 13.
+                </I18nMessage>
+              </React.Fragment>
+            }
+            checked={formSyncEnabled}
+            onChange={() => setFormSyncEnabled(!formSyncEnabled)}
           />
-          {!IS_WEB && (
-            <FormField
-              type="checkbox"
-              name="sync_checkbox"
-              label={__('Sync balance and preferences across devices')}
-              helper={
-                balance > 0 ? (
-                  __('This feature is not yet available for wallets with balances, but the gerbils are working on it.')
-                ) : (
-                  <I18nMessage
-                    tokens={{
-                      learn_more: (
-                        <Button button="link" href="https://lbry.com/faq/account-sync" label={__('Learn More')} />
-                      ),
-                    }}
-                  >
-                    Blockchain expert? %learn_more%
-                  </I18nMessage>
-                )
-              }
-              checked={syncEnabled}
-              onChange={() => setSync(!syncEnabled)}
-              disabled={balance > 0}
-            />
-          )}
-          <div className="card__actions">
-            <Button
-              button="primary"
-              type="submit"
-              label={__('Continue')}
-              disabled={!newEmail || !valid || !ageConfirmation || isPending}
-            />
-          </div>
+        )}
+        <div className="card__actions">
+          <Button button="primary" type="submit" label={__('Continue')} disabled={!newEmail || !valid || isPending} />
         </div>
       </Form>
-    </div>
+    </React.Fragment>
   );
 }
 

src/ui/page/settings/view.jsx

@@ -11,6 +11,7 @@ import I18nMessage from 'component/i18nMessage';
 import Page from 'component/page';
 import SettingLanguage from 'component/settingLanguage';
 import FileSelector from 'component/common/file-selector';
+import SyncToggle from 'component/syncToggle';
 import Card from 'component/common/card';
 import { getSavedPassword } from 'util/saved-passwords';
 
@@ -229,6 +230,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
         ) : (
           <div>
             <Card title={__('Language')} actions={<SettingLanguage />} />
+            <Card title={__('Sync')} actions={<SyncToggle />} />
             {/* @if TARGET='app' */}
             <Card
               title={__('Download Directory')}
@@ -639,11 +641,11 @@ class SettingsPage extends React.PureComponent<Props, State> {
             <Card
               title={__('Application Cache')}
               subtitle={
-                <p className="card__subtitle--status">
+                <span className="card__subtitle--status">
                   {__(
                     'This will clear the application cache. Your wallet will not be affected. Currently, followed tags and blocked channels will be cleared.'
                   )}
-                </p>
+                </span>
               }
               actions={
                 <Button

src/ui/redux/actions/app.js

@@ -7,7 +7,6 @@ import path from 'path';
 import * as ACTIONS from 'constants/action_types';
 import * as MODALS from 'constants/modal_types';
 import * as PAGES from 'constants/pages';
-import * as SETTINGS from 'constants/settings';
 import {
   Lbry,
   doBalanceSubscribe,
@@ -17,7 +16,6 @@ import {
   makeSelectClaimIsMine,
   doPopulateSharedUserState,
   doFetchChannelListMine,
-  selectBalance,
   doClearPublish,
   doPreferenceGet,
   doToast,
@@ -35,13 +33,12 @@ import {
   selectUpgradeTimer,
   selectModal,
 } from 'redux/selectors/app';
-import { doAuthenticate, doGetSync, selectSyncHash, doResetSync } from 'lbryinc';
+import { doAuthenticate, doGetSync, doResetSync } from 'lbryinc';
 import { lbrySettings as config, version as appVersion } from 'package.json';
 import { push } from 'connected-react-router';
 import analytics from 'analytics';
 import { deleteAuthToken, getSavedPassword } from 'util/saved-passwords';
 import cookie from 'cookie';
-import { makeSelectClientSetting } from 'redux/selectors/settings';
 
 // @if TARGET='app'
 const { autoUpdater } = remote.require('electron-updater');
@@ -439,53 +436,12 @@ export function doAnalyticsView(uri, timeToStart) {
 
 export function doSignIn() {
   return (dispatch, getState) => {
-    function handlePreferencesAfterSync() {
-      function successCb(savedPreferences) {
-        dispatch(doPopulateSharedUserState(savedPreferences));
-      }
-
-      function failCb() {
-        dispatch(
-          doToast({
-            isError: true,
-            message: __('Unable to load your saved preferences.'),
-          })
-        );
-      }
-
-      doPreferenceGet('shared', successCb, failCb);
-    }
-
-    // The balance is subscribed to on launch for desktop
     // @if TARGET='web'
     const { auth_token: authToken } = cookie.parse(document.cookie);
     Lbry.setApiHeader('X-Lbry-Auth-Token', authToken);
     dispatch(doBalanceSubscribe());
     dispatch(doFetchChannelListMine());
     // @endif
-
-    const state = getState();
-    const syncEnabled = makeSelectClientSetting(SETTINGS.ENABLE_SYNC)(state);
-
-    const hasSyncedBefore = selectSyncHash(state);
-    const balance = selectBalance(state);
-
-    // For existing users, check if they've synced before, or have 0 balance
-    // Always sync for web
-    const canSync = syncEnabled && (hasSyncedBefore || balance === 0 || IS_WEB);
-
-    if (canSync) {
-      getSavedPassword().then(password => {
-        const passwordArgument = password === null ? '' : password;
-
-        // Only set the default account if they have never synced before
-        dispatch(doGetSync(passwordArgument, handlePreferencesAfterSync));
-
-        setInterval(() => {
-          dispatch(doGetSync(passwordArgument, handlePreferencesAfterSync));
-        }, 1000 * 60 * 5);
-      });
-    }
   };
 }
 
@@ -508,3 +464,30 @@ export function doSignOut() {
       .catch(() => location.reload());
   };
 }
+
+export function doSyncWithPreferences() {
+  return dispatch => {
+    function handlePreferencesAfterSync() {
+      function successCb(savedPreferences) {
+        dispatch(doPopulateSharedUserState(savedPreferences));
+      }
+
+      function failCb() {
+        dispatch(
+          doToast({
+            isError: true,
+            message: __('Unable to load your saved preferences.'),
+          })
+        );
+      }
+
+      doPreferenceGet('shared', successCb, failCb);
+    }
+
+    return getSavedPassword().then(password => {
+      const passwordArgument = password === null ? '' : password;
+
+      dispatch(doGetSync(passwordArgument, handlePreferencesAfterSync));
+    });
+  };
+}

src/ui/scss/component/_form-field.scss

@@ -52,6 +52,11 @@ textarea {
   }
 }
 
+// @lbry/components specificityfixme
+checkbox-element input[type='checkbox']:checked + label {
+  color: lighten($lbry-black, 20%);
+}
+
 fieldset-section {
   margin-bottom: var(--spacing-small);
 

src/ui/util/saved-passwords.js

@@ -1,16 +1,24 @@
 import { ipcRenderer } from 'electron';
 
+let sessionPassword;
+
 export const setSavedPassword = value => {
   return new Promise(resolve => {
     ipcRenderer.once('set-password-response', (event, success) => {
       resolve(success);
     });
+
+    sessionPassword = value;
     ipcRenderer.send('set-password', value);
   });
 };
 
 export const getSavedPassword = () => {
   return new Promise(resolve => {
+    if (sessionPassword) {
+      resolve(sessionPassword);
+    }
+
     // @if TARGET='app'
     ipcRenderer.once('get-password-response', (event, password) => {
       resolve(password);

yarn.lock

@@ -6870,9 +6870,9 @@ lazy-val@^1.0.3, lazy-val@^1.0.4:
     yargs "^13.2.2"
     zstd-codec "^0.1.1"
 
-lbry-redux@lbryio/lbry-redux#6edcf747e10919605b05b905214fe1d3286898e3:
+lbry-redux@lbryio/lbry-redux#0090f195eb88f4620db7d038f7b01eaa76119836:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/6edcf747e10919605b05b905214fe1d3286898e3"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/0090f195eb88f4620db7d038f7b01eaa76119836"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"