From 690f48b7e13729581804b2ee3e7ea9bde9f59f30 Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Sun, 8 Aug 2021 10:26:40 +0800 Subject: [PATCH] [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 | 3 + ui/component/settingAppearance/view.jsx | 15 ++- ui/component/settingSystem/index.js | 10 +- ui/component/settingSystem/view.jsx | 81 ++++++++++++++++ ui/page/settingsAdvanced/index.js | 6 +- ui/page/settingsAdvanced/view.jsx | 120 +----------------------- 6 files changed, 110 insertions(+), 125 deletions(-) diff --git a/ui/component/settingAppearance/index.js b/ui/component/settingAppearance/index.js index 54db43d7f..d00c404e8 100644 --- 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) => ({ diff --git a/ui/component/settingAppearance/view.jsx b/ui/component/settingAppearance/view.jsx index f9f674da9..4300719f3 100644 --- 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 ( + + {(isAuthenticated || !IS_WEB) && ( + + setClientSetting(SETTINGS.HIDE_BALANCE, !hideBalance)} + checked={hideBalance} + /> + + )} } /> diff --git a/ui/component/settingSystem/index.js b/ui/component/settingSystem/index.js index a8b195d78..712a8af41 100644 --- 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); diff --git a/ui/component/settingSystem/view.jsx b/ui/component/settingSystem/view.jsx index e0ff6e775..1824e3ddf 100644 --- 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, 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 ( {/* @endif */} + {/* @if TARGET='app' */} + + onChangeEncryptWallet()} + checked={walletEncrypted} + label={__('Encrypt my wallet with a custom password')} + helper={ + + + ), + }} + > + Wallet encryption is currently unavailable until it's supported for synced accounts. It will be + added back soon. %learn_more%. + + {/* {__('Secure your local wallet data with a custom password.')}{' '} + {__('Lost passwords cannot be recovered.')} +