[System] grab "Share usage and diagnostic data"

ui/component/settingSystem/index.js

@@ -1,7 +1,14 @@
 import { connect } from 'react-redux';
 import { doWalletStatus, selectWalletIsEncrypted } from 'lbry-redux';
-import { doClearCache, doNotifyDecryptWallet, doNotifyEncryptWallet, doNotifyForgetPassword } from 'redux/actions/app';
+import {
+  doClearCache,
+  doNotifyDecryptWallet,
+  doNotifyEncryptWallet,
+  doNotifyForgetPassword,
+  doToggle3PAnalytics,
+} from 'redux/actions/app';
 import { doSetDaemonSetting, doClearDaemonSetting, doFindFFmpeg } from 'redux/actions/settings';
+import { selectAllowAnalytics } from 'redux/selectors/app';
 import { selectDaemonSettings, selectFfmpegStatus, selectFindingFFmpeg } from 'redux/selectors/settings';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import SettingSystem from './view';
@@ -12,6 +19,7 @@ const select = (state) => ({
   findingFFmpeg: selectFindingFFmpeg(state),
   walletEncrypted: selectWalletIsEncrypted(state),
   isAuthenticated: selectUserVerifiedEmail(state),
+  allowAnalytics: selectAllowAnalytics(state),
 });
 
 const perform = (dispatch) => ({
@@ -23,6 +31,7 @@ const perform = (dispatch) => ({
   decryptWallet: () => dispatch(doNotifyDecryptWallet()),
   updateWalletStatus: () => dispatch(doWalletStatus()),
   confirmForgetPassword: (modalProps) => dispatch(doNotifyForgetPassword(modalProps)),
+  toggle3PAnalytics: (allow) => dispatch(doToggle3PAnalytics(allow)),
 });
 
 export default connect(select, perform)(SettingSystem);

ui/component/settingSystem/view.jsx

@@ -42,6 +42,7 @@ type Props = {
   findingFFmpeg: boolean,
   walletEncrypted: boolean,
   isAuthenticated: boolean,
+  allowAnalytics: boolean,
   // --- perform ---
   setDaemonSetting: (string, ?SetDaemonSettingArg) => void,
   clearDaemonSetting: (string) => void,
@@ -51,6 +52,7 @@ type Props = {
   decryptWallet: () => void,
   updateWalletStatus: () => void,
   confirmForgetPassword: ({}) => void,
+  toggle3PAnalytics: (boolean) => void,
 };
 
 export default function SettingSystem(props: Props) {
@@ -60,6 +62,7 @@ export default function SettingSystem(props: Props) {
     findingFFmpeg,
     walletEncrypted,
     isAuthenticated,
+    allowAnalytics,
     setDaemonSetting,
     clearDaemonSetting,
     clearCache,
@@ -68,6 +71,7 @@ export default function SettingSystem(props: Props) {
     decryptWallet,
     updateWalletStatus,
     confirmForgetPassword,
+    toggle3PAnalytics,
   } = props;
 
   const [clearingCache, setClearingCache] = React.useState(false);
@@ -166,6 +170,43 @@ export default function SettingSystem(props: Props) {
           </SettingsRow>
           {/* @endif */}
 
+          {/* @if TARGET='app' */}
+          <SettingsRow
+            title={__('Share usage and diagnostic data')}
+            subtitle={
+              <React.Fragment>
+                {__(
+                  `This is information like error logging, performance tracking, and usage statistics. It includes your IP address and basic system details, but no other identifying information (unless you sign in to lbry.tv)`
+                )}{' '}
+                <Button button="link" label={__('Learn more')} href="https://lbry.com/privacypolicy" />
+              </React.Fragment>
+            }
+            useVerticalSeparator
+          >
+            <FormField
+              type="checkbox"
+              name="share_internal"
+              onChange={() => setDaemonSetting('share_usage_data', !daemonSettings.share_usage_data)}
+              checked={daemonSettings.share_usage_data}
+              label={<React.Fragment>{__('Allow the app to share data to LBRY.inc')}</React.Fragment>}
+              helper={
+                isAuthenticated
+                  ? __('Internal sharing is required while signed in.')
+                  : __('Internal sharing is required to participate in rewards programs.')
+              }
+              disabled={isAuthenticated && daemonSettings.share_usage_data}
+            />
+            <FormField
+              type="checkbox"
+              name="share_third_party"
+              onChange={(e) => toggle3PAnalytics(e.target.checked)}
+              checked={allowAnalytics}
+              label={__('Allow the app to access third party analytics platforms')}
+              helper={__('We use detailed analytics to improve all aspects of the LBRY experience.')}
+            />
+          </SettingsRow>
+          {/* @endif */}
+
           {/* @if TARGET='app' */}
           {/* Auto launch in a hidden state doesn't work on mac https://github.com/Teamwork/node-auto-launch/issues/81 */}
           {!IS_MAC && (

ui/page/settings/index.js

@@ -1,7 +1,5 @@
 import { connect } from 'react-redux';
-import { doToggle3PAnalytics } from 'redux/actions/app';
-import { selectAllowAnalytics } from 'redux/selectors/app';
-import { doSetDaemonSetting, doEnterSettingsPage, doExitSettingsPage } from 'redux/actions/settings';
+import { doEnterSettingsPage, doExitSettingsPage } from 'redux/actions/settings';
 import { makeSelectClientSetting, selectDaemonSettings } from 'redux/selectors/settings';
 import { SETTINGS } from 'lbry-redux';
 import SettingsPage from './view';
@@ -9,15 +7,12 @@ import { selectUserVerifiedEmail } from 'redux/selectors/user';
 
 const select = (state) => ({
   daemonSettings: selectDaemonSettings(state),
-  allowAnalytics: selectAllowAnalytics(state),
   isAuthenticated: selectUserVerifiedEmail(state),
   autoDownload: makeSelectClientSetting(SETTINGS.AUTO_DOWNLOAD)(state),
   hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),
 });
 
 const perform = (dispatch) => ({
-  setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)),
-  toggle3PAnalytics: (allow) => dispatch(doToggle3PAnalytics(allow)),
   enterSettings: () => dispatch(doEnterSettingsPage()),
   exitSettings: () => dispatch(doExitSettingsPage()),
 });

ui/page/settings/view.jsx

@@ -2,7 +2,6 @@
 import * as PAGES from 'constants/pages';
 import * as ICONS from 'constants/icons';
 import * as React from 'react';
-import { FormField } from 'component/common/form';
 import Button from 'component/button';
 import Page from 'component/page';
 import SettingAccount from 'component/settingAccount';
@@ -18,18 +17,13 @@ type Price = {
   amount: number,
 };
 
-type SetDaemonSettingArg = boolean | string | number;
-
 type DaemonSettings = {
   download_dir: string,
   share_usage_data: boolean,
 };
 
 type Props = {
-  setDaemonSetting: (string, ?SetDaemonSettingArg) => void,
-  toggle3PAnalytics: (boolean) => void,
   daemonSettings: DaemonSettings,
-  allowAnalytics: boolean,
   isAuthenticated: boolean,
   instantPurchaseEnabled: boolean,
   instantPurchaseMax: Price,
@@ -49,18 +43,11 @@ class SettingsPage extends React.PureComponent<Props> {
     exitSettings();
   }
 
-  setDaemonSetting(name: string, value: ?SetDaemonSettingArg): void {
-    this.props.setDaemonSetting(name, value);
-  }
-
   render() {
     const {
       daemonSettings,
-      allowAnalytics,
       isAuthenticated,
       // autoDownload,
-      setDaemonSetting,
-      toggle3PAnalytics,
     } = this.props;
     const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
 
@@ -103,45 +90,6 @@ class SettingsPage extends React.PureComponent<Props> {
           </section>
         ) : (
           <div className={classnames('card-stack', { 'card--disabled': IS_WEB && !isAuthenticated })}>
-            {/* @if TARGET='app' */}
-            <Card
-              title={__('Share usage and diagnostic data')}
-              subtitle={
-                <React.Fragment>
-                  {__(
-                    `This is information like error logging, performance tracking, and usage statistics. It includes your IP address and basic system details, but no other identifying information (unless you sign in to lbry.tv)`
-                  )}{' '}
-                  <Button button="link" label={__('Learn more')} href="https://lbry.com/privacypolicy" />
-                </React.Fragment>
-              }
-              actions={
-                <>
-                  <FormField
-                    type="checkbox"
-                    name="share_internal"
-                    onChange={() => setDaemonSetting('share_usage_data', !daemonSettings.share_usage_data)}
-                    checked={daemonSettings.share_usage_data}
-                    label={<React.Fragment>{__('Allow the app to share data to LBRY.inc')}</React.Fragment>}
-                    helper={
-                      isAuthenticated
-                        ? __('Internal sharing is required while signed in.')
-                        : __('Internal sharing is required to participate in rewards programs.')
-                    }
-                    disabled={isAuthenticated && daemonSettings.share_usage_data}
-                  />
-                  <FormField
-                    type="checkbox"
-                    name="share_third_party"
-                    onChange={(e) => toggle3PAnalytics(e.target.checked)}
-                    checked={allowAnalytics}
-                    label={__('Allow the app to access third party analytics platforms')}
-                    helper={__('We use detailed analytics to improve all aspects of the LBRY experience.')}
-                  />
-                </>
-              }
-            />
-            {/* @endif */}
-
             {(isAuthenticated || !IS_WEB) && (
               <>
                 <Card