setting section update

Author: Aniket-Engg

apps/remix-ide/src/app/tabs/locales/en/settings.json

@@ -10,6 +10,7 @@
   "settings.useShowGasInEditorText": "Display gas estimates in editor",
   "settings.displayErrorsText": "Display errors in editor while typing",
   "settings.matomoAnalytics": "Enable Matomo Analytics. See",
+  "settings.matomoPerfAnalytics": "Enable Matomo Performance Analytics",
   "settings.matomoAnalyticsTooltip": "We do not collect personally identifiable information (PII). The info is used to improve the site’s UX & UI.",
   "settings.enablePersonalModeText": " Enable Personal Mode for web3 provider",
   "settings.enablePersonalModeTooltip": "Transaction sent over Web3 will use the web3.personal API. Be sure the endpoint is opened before enabling it.  This mode allows a user to provide a passphrase in the Remix interface without having to unlock the account. Although this is very convenient, you should completely trust the backend you are connected to (Geth, Parity, ...). Remix never persists any passphrase",

apps/remix-ide/src/app/tabs/settings-tab.tsx

@@ -80,7 +80,7 @@ export default class SettingsTab extends ViewPlugin {
         config={state.config}
         editor={state.editor}
         _deps={state._deps}
-        useMatomoAnalytics={state.useMatomoAnalytics}
+        useMatomoPerfAnalytics={state.useMatomoPerfAnalytics}
         useCopilot={state.useCopilot}
         themeModule={state._deps.themeModule}
         localeModule={state._deps.localeModule}
@@ -132,11 +132,11 @@ export default class SettingsTab extends ViewPlugin {
     localStorage.setItem('matomo-perf-analytics-consent', Date.now().toString())
     this.useMatomoPerfAnalytics = isChecked
     if (!isChecked) {
-      // revoke tracking consent , need to be updated
-      _paq.push(['forgetConsentGiven']);
+      // revoke tracking consent for performance data
+      _paq.push(['forgetMatomoPerfConsentGiven'])
     } else {
-      // user has given consent to process their data, need to be updated
-      _paq.push(['setConsentGiven']);
+      // user has given consent to process their performance data
+      _paq.push(['setMatomoPerfConsentGiven'])
     }
     this.dispatch({
       ...this

libs/remix-ui/app/src/lib/remix-app/components/modals/matomo.tsx

@@ -67,8 +67,8 @@ const MatomoDialog = (props: MatomoDialogProps) => {
   }, [visible])
 
   const handleAcceptAllClick = async () => {
-    // user has given all consent to process their data
-    _paq.push(['setConsentGiven'])
+    _paq.push(['setConsentGiven']) // default consent to process their anonymous data
+    _paq.push(['setMatomoPerfConsentGiven']) // user has given consent to process their performance data
     settings.updateMatomoAnalyticsChoice(true) // Enable Matomo Anonymous analytics
     settings.updateMatomoPerfAnalyticsChoice(true) // Enable Matomo Performance analytics
     settings.updateCopilotChoice(true) // Enable RemixAI copilot

libs/remix-ui/settings/src/lib/remix-ui-settings.tsx

@@ -14,7 +14,7 @@ import {
   copilotMaxNewToken,
   copilotTemperature,
   textWrapEventAction,
-  useMatomoAnalytics,
+  useMatomoPerfAnalytics,
   saveTokenToast,
   removeTokenToast,
   saveSwarmSettingsToast,
@@ -39,7 +39,7 @@ export interface RemixUiSettingsProps {
   config: any
   editor: any
   _deps: any
-  useMatomoAnalytics: boolean
+  useMatomoPerfAnalytics: boolean
   useCopilot: boolean
   themeModule: ThemeModule
   localeModule: LocaleModule
@@ -125,8 +125,8 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
   }, [themeName, state.message])
 
   useEffect(() => {
-    if (props.useMatomoAnalytics !== null) useMatomoAnalytics(props.config, props.useMatomoAnalytics, dispatch)
-  }, [props.useMatomoAnalytics])
+    if (props.useMatomoPerfAnalytics !== null) useMatomoPerfAnalytics(props.config, props.useMatomoPerfAnalytics, dispatch)
+  }, [props.useMatomoPerfAnalytics])
 
   const onchangeGenerateContractMetadata = (event) => {
     generateContractMetadat(props.config, event.target.checked, dispatch)
@@ -167,7 +167,7 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
   }
 
   const onchangeMatomoAnalytics = (event) => {
-    useMatomoAnalytics(props.config, event.target.checked, dispatch)
+    useMatomoPerfAnalytics(props.config, event.target.checked, dispatch)
   }
 
   const onchangeUseAutoComplete = (event) => {
@@ -197,7 +197,7 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     const isMetadataChecked = props.config.get('settings/generate-contract-metadata') || false
     const isEditorWrapChecked = props.config.get('settings/text-wrap') || false
     const isPersonalChecked = props.config.get('settings/personal-mode') || false
-    const isMatomoChecked = props.config.get('settings/matomo-analytics') || false
+    const isMatomoChecked = props.config.get('settings/matomo-perf-analytics') || false
 
     const isAutoCompleteChecked = props.config.get('settings/auto-completion') || false
     const isShowGasInEditorChecked = props.config.get('settings/show-gas') || false
@@ -315,25 +315,10 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
           </div>
           <div className="custom-control custom-checkbox mb-1">
             <input onChange={onchangeMatomoAnalytics} id="settingsMatomoAnalytics" type="checkbox" className="custom-control-input" checked={isMatomoChecked} />
-            <label data-id="label-matomo-settings" className={`form-check-label custom-control-label align-middle ${getTextClass('settings/matomo-analytics')}`} htmlFor="settingsMatomoAnalytics">
+            <label data-id="label-matomo-settings" className={`form-check-label custom-control-label align-middle ${getTextClass('settings/matomo-perf-analytics')}`} htmlFor="settingsMatomoAnalytics">
               <span>
-                <FormattedMessage id="settings.matomoAnalytics" />
+                <FormattedMessage id="settings.matomoPerfAnalytics" />
               </span>
-              <a href="https://medium.com/remix-ide/help-us-improve-remix-ide-66ef69e14931" target="_blank">
-                {' '}
-                <FormattedMessage id="settings.analyticsInRemix" />
-              </a>{' '}
-              <span>&</span>{' '}
-              <a target="_blank" href="https://matomo.org/free-software">
-                Matomo
-              </a>
-              <CustomTooltip
-                placement="auto"
-                tooltipId="settings-tooltip-matomo"
-                tooltipText={intl.formatMessage({ id: 'settings.matomoAnalyticsTooltip' })}
-              >
-                <i className="ml-1 far fa-info-circle"></i>
-              </CustomTooltip>
             </label>
           </div>
           <div className="custom-control custom-checkbox mb-1">

libs/remix-ui/settings/src/lib/settingsAction.ts

@@ -39,16 +39,16 @@ export const copilotTemperature = (config, checked, dispatch) => {
   dispatch({ type: 'copilot/suggest/temperature', payload: { isChecked: checked, textClass: checked ? textDark : textSecondary } })
 }
 
-export const useMatomoAnalytics = (config, checked, dispatch) => {
-  config.set('settings/matomo-analytics', checked)
-  localStorage.setItem('matomo-analytics-consent', Date.now().toString())
-  dispatch({ type: 'useMatomoAnalytics', payload: { isChecked: checked, textClass: checked ? textDark : textSecondary } })
+export const useMatomoPerfAnalytics = (config, checked, dispatch) => {
+  config.set('settings/matomo-perf-analytics', checked)
+  localStorage.setItem('matomo-perf-analytics-consent', Date.now().toString())
+  dispatch({ type: 'useMatomoPerfAnalytics', payload: { isChecked: checked, textClass: checked ? textDark : textSecondary } })
   if (checked) {
-    // user has given consent to process their data
-    _paq.push(['setConsentGiven']);
+    // user has given consent to process their performance data
+    _paq.push(['setMatomoPerfConsentGiven'])
   } else {
-    // revoke tracking consent
-    _paq.push(['forgetConsentGiven']);
+    // revoke tracking consent for performance data
+    _paq.push(['forgetMatomoPerfConsentGiven'])
   }
 }
 

libs/remix-ui/settings/src/lib/settingsReducer.ts

@@ -23,7 +23,7 @@ export const initialState = {
       textClass: textSecondary
     },
     {
-      name: 'useMatomoAnalytics',
+      name: 'useMatomoPerfAnalytics',
       isChecked: false,
       textClass: textSecondary
     },
@@ -107,9 +107,9 @@ export const settingReducer = (state, action) => {
     return {
       ...state
     }
-  case 'useMatomoAnalytics':
+  case 'useMatomoPerfAnalytics':
     state.elementState.map(element => {
-      if (element.name === 'useMatomoAnalytics') {
+      if (element.name === 'useMatomoPerfAnalytics') {
         element.isChecked = action.payload.isChecked
         element.textClass = action.payload.textClass
       }