[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.
2021-08-08 10:26:40 +08:00 · 2021-08-08 10:26:40 +08:00 · 690f48b7e1
commit 690f48b7e1
parent 96ac5a8997
6 changed files with 110 additions and 125 deletions
--- a/ui/component/settingAppearance/index.js
+++ b/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) => ({
--- a/ui/component/settingAppearance/view.jsx
+++ b/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>
+          )}
        </>
      }
    />
--- a/ui/component/settingSystem/index.js
+++ b/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);
--- a/ui/component/settingSystem/view.jsx
+++ b/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 */}
--- a/ui/page/settingsAdvanced/index.js
+++ b/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()),
--- a/ui/page/settingsAdvanced/view.jsx
+++ b/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;
-
-    if (isAuthenticated || !IS_WEB) {
-      this.props.updateWalletStatus();
-      getPasswordFromCookie().then((p) => {
-        if (typeof p === 'string') {
-          this.setState({ storedPassword: true });
-        }
-      });
-    }
+    const { enterSettings } = this.props;
    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 { storedPassword } = this.state;
+    const { daemonSettings } = this.props;
    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>