[System] grab "Wallet Security". [Appearance] grab "Show wallet balance in header"

I think it makes more sense to show "Show wallet balance in header" under [Appearance], especially for Web.

ui/component/settingAppearance/index.js

@@ -2,11 +2,14 @@ import { connect } from 'react-redux';
 import { SETTINGS } from 'lbry-redux';
 import { doSetClientSetting } from 'redux/actions/settings';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
+import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import SettingAppearance from './view';
 
 const select = (state) => ({
   clock24h: makeSelectClientSetting(SETTINGS.CLOCK_24H)(state),
   searchInLanguage: makeSelectClientSetting(SETTINGS.SEARCH_IN_LANGUAGE)(state),
+  isAuthenticated: selectUserVerifiedEmail(state),
+  hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),
 });
 
 const perform = (dispatch) => ({

ui/component/settingAppearance/view.jsx

@@ -13,12 +13,14 @@ import homepages from 'homepages';
 type Props = {
   clock24h: boolean,
   searchInLanguage: boolean,
+  isAuthenticated: boolean,
+  hideBalance: boolean,
   setClientSetting: (string, boolean | string | number) => void,
   setSearchInLanguage: (boolean) => void,
 };
 
 export default function SettingAppearance(props: Props) {
-  const { clock24h, searchInLanguage, setClientSetting, setSearchInLanguage } = props;
+  const { clock24h, searchInLanguage, isAuthenticated, hideBalance, setClientSetting, setSearchInLanguage } = props;
 
   return (
     <Card
@@ -58,6 +60,17 @@ export default function SettingAppearance(props: Props) {
               checked={clock24h}
             />
           </SettingsRow>
+
+          {(isAuthenticated || !IS_WEB) && (
+            <SettingsRow title={__('Hide wallet balance in header')}>
+              <FormField
+                type="checkbox"
+                name="hide_balance"
+                onChange={() => setClientSetting(SETTINGS.HIDE_BALANCE, !hideBalance)}
+                checked={hideBalance}
+              />
+            </SettingsRow>
+          )}
         </>
       }
     />

ui/component/settingSystem/index.js

@@ -1,13 +1,17 @@
 import { connect } from 'react-redux';
-import { doClearCache } from 'redux/actions/app';
+import { doWalletStatus, selectWalletIsEncrypted } from 'lbry-redux';
+import { doClearCache, doNotifyDecryptWallet, doNotifyEncryptWallet, doNotifyForgetPassword } from 'redux/actions/app';
 import { doSetDaemonSetting, doClearDaemonSetting, doFindFFmpeg } from 'redux/actions/settings';
 import { selectDaemonSettings, selectFfmpegStatus, selectFindingFFmpeg } from 'redux/selectors/settings';
+import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import SettingSystem from './view';
 
 const select = (state) => ({
   daemonSettings: selectDaemonSettings(state),
   ffmpegStatus: selectFfmpegStatus(state),
   findingFFmpeg: selectFindingFFmpeg(state),
+  walletEncrypted: selectWalletIsEncrypted(state),
+  isAuthenticated: selectUserVerifiedEmail(state),
 });
 
 const perform = (dispatch) => ({
@@ -15,6 +19,10 @@ const perform = (dispatch) => ({
   clearDaemonSetting: (key) => dispatch(doClearDaemonSetting(key)),
   clearCache: () => dispatch(doClearCache()),
   findFFmpeg: () => dispatch(doFindFFmpeg()),
+  encryptWallet: () => dispatch(doNotifyEncryptWallet()),
+  decryptWallet: () => dispatch(doNotifyDecryptWallet()),
+  updateWalletStatus: () => dispatch(doWalletStatus()),
+  confirmForgetPassword: (modalProps) => dispatch(doNotifyForgetPassword(modalProps)),
 });
 
 export default connect(select, perform)(SettingSystem);

ui/component/settingSystem/view.jsx

@@ -12,6 +12,7 @@ import SettingCommentsServer from 'component/settingCommentsServer';
 import SettingsRow from 'component/settingsRow';
 import SettingWalletServer from 'component/settingWalletServer';
 import Spinner from 'component/spinner';
+import { getPasswordFromCookie } from 'util/saved-passwords';
 
 // @if TARGET='app'
 const IS_MAC = process.platform === 'darwin';
@@ -39,11 +40,17 @@ type Props = {
   daemonSettings: DaemonSettings,
   ffmpegStatus: { available: boolean, which: string },
   findingFFmpeg: boolean,
+  walletEncrypted: boolean,
+  isAuthenticated: boolean,
   // --- perform ---
   setDaemonSetting: (string, ?SetDaemonSettingArg) => void,
   clearDaemonSetting: (string) => void,
   clearCache: () => Promise<any>,
   findFFmpeg: () => void,
+  encryptWallet: () => void,
+  decryptWallet: () => void,
+  updateWalletStatus: () => void,
+  confirmForgetPassword: ({}) => void,
 };
 
 export default function SettingSystem(props: Props) {
@@ -51,17 +58,38 @@ export default function SettingSystem(props: Props) {
     daemonSettings,
     ffmpegStatus,
     findingFFmpeg,
+    walletEncrypted,
+    isAuthenticated,
     setDaemonSetting,
     clearDaemonSetting,
     clearCache,
     findFFmpeg,
+    encryptWallet,
+    decryptWallet,
+    updateWalletStatus,
+    confirmForgetPassword,
   } = props;
+
   const [clearingCache, setClearingCache] = React.useState(false);
+  const [storedPassword, setStoredPassword] = React.useState(false);
 
   // @if TARGET='app'
   const { available: ffmpegAvailable, which: ffmpegPath } = ffmpegStatus;
   // @endif
 
+  function onChangeEncryptWallet() {
+    if (walletEncrypted) {
+      decryptWallet();
+    } else {
+      encryptWallet();
+    }
+  }
+
+  function onConfirmForgetPassword() {
+    confirmForgetPassword({ callback: () => setStoredPassword(false) });
+  }
+
+  // Update ffmpeg variables
   React.useEffect(() => {
     // @if TARGET='app'
     const { available } = ffmpegStatus;
@@ -75,6 +103,18 @@ export default function SettingSystem(props: Props) {
     // @endif
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Update storedPassword state
+  React.useEffect(() => {
+    if (isAuthenticated || !IS_WEB) {
+      updateWalletStatus();
+      getPasswordFromCookie().then((p) => {
+        if (typeof p === 'string') {
+          setStoredPassword(true);
+        }
+      });
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   return (
     <Card
       title={__('System')}
@@ -197,6 +237,47 @@ export default function SettingSystem(props: Props) {
           </SettingsRow>
           {/* @endif */}
 
+          {/* @if TARGET='app' */}
+          <SettingsRow title={__('Wallet security')}>
+            <FormField
+              disabled
+              type="checkbox"
+              name="encrypt_wallet"
+              onChange={() => onChangeEncryptWallet()}
+              checked={walletEncrypted}
+              label={__('Encrypt my wallet with a custom password')}
+              helper={
+                <React.Fragment>
+                  <I18nMessage
+                    tokens={{
+                      learn_more: (
+                        <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/account-sync" />
+                      ),
+                    }}
+                  >
+                    Wallet encryption is currently unavailable until it's supported for synced accounts. It will be
+                    added back soon. %learn_more%.
+                  </I18nMessage>
+                  {/* {__('Secure your local wallet data with a custom password.')}{' '}
+                         <strong>{__('Lost passwords cannot be recovered.')} </strong>
+                         <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/wallet-encryption" />. */}
+                </React.Fragment>
+              }
+            />
+
+            {walletEncrypted && storedPassword && (
+              <FormField
+                type="checkbox"
+                name="save_password"
+                onChange={onConfirmForgetPassword}
+                checked={storedPassword}
+                label={__('Save Password')}
+                helper={<React.Fragment>{__('Automatically unlock your wallet on startup')}</React.Fragment>}
+              />
+            )}
+          </SettingsRow>
+          {/* @endif */}
+
           {/* @if TARGET='app' */}
           <SettingsRow title={__('Experimental settings')} useVerticalSeparator>
             {/* Disabling below until we get downloads to work with shared subscriptions code */}

ui/page/settingsAdvanced/index.js

@@ -1,24 +1,20 @@
 import { connect } from 'react-redux';
 import { doClearCache, doNotifyEncryptWallet, doNotifyDecryptWallet, doNotifyForgetPassword } from 'redux/actions/app';
 import { selectAllowAnalytics } from 'redux/selectors/app';
-import { doSetClientSetting, doEnterSettingsPage, doExitSettingsPage } from 'redux/actions/settings';
+import { doEnterSettingsPage, doExitSettingsPage } from 'redux/actions/settings';
 import { makeSelectClientSetting, selectDaemonSettings } from 'redux/selectors/settings';
 import { doWalletStatus, selectWalletIsEncrypted, SETTINGS } from 'lbry-redux';
 import SettingsAdvancedPage from './view';
-import { selectUserVerifiedEmail } from 'redux/selectors/user';
 
 const select = (state) => ({
   daemonSettings: selectDaemonSettings(state),
   allowAnalytics: selectAllowAnalytics(state),
-  isAuthenticated: selectUserVerifiedEmail(state),
   walletEncrypted: selectWalletIsEncrypted(state),
-  hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),
   syncEnabled: makeSelectClientSetting(SETTINGS.ENABLE_SYNC)(state),
 });
 
 const perform = (dispatch) => ({
   clearCache: () => dispatch(doClearCache()),
-  setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
   encryptWallet: () => dispatch(doNotifyEncryptWallet()),
   decryptWallet: () => dispatch(doNotifyDecryptWallet()),
   updateWalletStatus: () => dispatch(doWalletStatus()),

ui/page/settingsAdvanced/view.jsx

@@ -1,13 +1,8 @@
 // @flow
 import * as React from 'react';
 
-import { FormField } from 'component/common/form';
-import Button from 'component/button';
-import I18nMessage from 'component/i18nMessage';
 import Page from 'component/page';
-import { SETTINGS } from 'lbry-redux';
 import Card from 'component/common/card';
-import { getPasswordFromCookie } from 'util/saved-passwords';
 
 type Price = {
   currency: string,
@@ -27,14 +22,11 @@ type DaemonSettings = {
 };
 
 type Props = {
-  setClientSetting: (string, SetDaemonSettingArg) => void,
   daemonSettings: DaemonSettings,
-  isAuthenticated: boolean,
   encryptWallet: () => void,
   decryptWallet: () => void,
   updateWalletStatus: () => void,
   walletEncrypted: boolean,
-  hideBalance: boolean,
   confirmForgetPassword: ({}) => void,
   syncEnabled: boolean,
   enterSettings: () => void,
@@ -43,7 +35,6 @@ type Props = {
 
 type State = {
   clearingCache: boolean,
-  storedPassword: boolean,
 };
 
 class SettingsAdvancedPage extends React.PureComponent<Props, State> {
@@ -52,25 +43,11 @@ class SettingsAdvancedPage extends React.PureComponent<Props, State> {
 
     this.state = {
       clearingCache: false,
-      storedPassword: false,
     };
-
-    (this: any).onThemeChange = this.onThemeChange.bind(this);
-    (this: any).onAutomaticDarkModeChange = this.onAutomaticDarkModeChange.bind(this);
-    (this: any).onConfirmForgetPassword = this.onConfirmForgetPassword.bind(this);
   }
 
   componentDidMount() {
-    const { isAuthenticated, enterSettings } = this.props;
+    const { enterSettings } = this.props;
-
-    if (isAuthenticated || !IS_WEB) {
-      this.props.updateWalletStatus();
-      getPasswordFromCookie().then((p) => {
-        if (typeof p === 'string') {
-          this.setState({ storedPassword: true });
-        }
-      });
-    }
     enterSettings();
   }
 
@@ -79,46 +56,12 @@ class SettingsAdvancedPage extends React.PureComponent<Props, State> {
     exitSettings();
   }
 
-  onThemeChange(event: SyntheticInputEvent<*>) {
-    const { value } = event.target;
-
-    if (value === 'dark') {
-      this.onAutomaticDarkModeChange(false);
-    }
-
-    this.props.setClientSetting(SETTINGS.THEME, value);
-  }
-
-  onAutomaticDarkModeChange(value: boolean) {
-    this.props.setClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED, value);
-  }
-
-  onChangeEncryptWallet() {
-    const { decryptWallet, walletEncrypted, encryptWallet } = this.props;
-    if (walletEncrypted) {
-      decryptWallet();
-    } else {
-      encryptWallet();
-    }
-  }
-
-  onConfirmForgetPassword() {
-    const { confirmForgetPassword } = this.props;
-    confirmForgetPassword({
-      callback: () => {
-        this.setState({ storedPassword: false });
-      },
-    });
-  }
-
   setDaemonSetting(name: string, value: ?SetDaemonSettingArg): void {
     // this.props.setDaemonSetting(name, value);
   }
 
   render() {
-    const { daemonSettings, isAuthenticated, walletEncrypted, setClientSetting, hideBalance } = this.props;
+    const { daemonSettings } = this.props;
-
-    const { storedPassword } = this.state;
     const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
 
     return (
@@ -137,65 +80,6 @@ class SettingsAdvancedPage extends React.PureComponent<Props, State> {
           </section>
         ) : (
           <div>
-            {(isAuthenticated || !IS_WEB) && (
-              <Card
-                title={__('Wallet security')}
-                actions={
-                  <React.Fragment>
-                    {/* @if TARGET='app' */}
-                    <FormField
-                      disabled
-                      type="checkbox"
-                      name="encrypt_wallet"
-                      onChange={() => this.onChangeEncryptWallet()}
-                      checked={walletEncrypted}
-                      label={__('Encrypt my wallet with a custom password')}
-                      helper={
-                        <React.Fragment>
-                          <I18nMessage
-                            tokens={{
-                              learn_more: (
-                                <Button
-                                  button="link"
-                                  label={__('Learn more')}
-                                  href="https://lbry.com/faq/account-sync"
-                                />
-                              ),
-                            }}
-                          >
-                            Wallet encryption is currently unavailable until it's supported for synced accounts. It will
-                            be added back soon. %learn_more%.
-                          </I18nMessage>
-                          {/* {__('Secure your local wallet data with a custom password.')}{' '}
-                        <strong>{__('Lost passwords cannot be recovered.')} </strong>
-                        <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/wallet-encryption" />. */}
-                        </React.Fragment>
-                      }
-                    />
-
-                    {walletEncrypted && storedPassword && (
-                      <FormField
-                        type="checkbox"
-                        name="save_password"
-                        onChange={this.onConfirmForgetPassword}
-                        checked={storedPassword}
-                        label={__('Save Password')}
-                        helper={<React.Fragment>{__('Automatically unlock your wallet on startup')}</React.Fragment>}
-                      />
-                    )}
-                    {/* @endif */}
-
-                    <FormField
-                      type="checkbox"
-                      name="hide_balance"
-                      onChange={() => setClientSetting(SETTINGS.HIDE_BALANCE, !hideBalance)}
-                      checked={hideBalance}
-                      label={__('Hide wallet balance in header')}
-                    />
-                  </React.Fragment>
-                }
-              />
-            )}
           </div>
         )}
       </Page>