Merge branch 'master' into newaichat

Author: joeizang

apps/remix-ide-e2e/src/tests/matomo.test.ts

@@ -222,12 +222,12 @@ class AppComponent {
     }
 
     _paq.push(['trackEvent', 'App', 'load']);
-    this.matomoConfAlreadySet = Registry.getInstance().get('config').api.exists('settings/matomo-analytics')
-    this.matomoCurrentSetting = Registry.getInstance().get('config').api.get('settings/matomo-analytics')
+    this.matomoConfAlreadySet = Registry.getInstance().get('config').api.exists('settings/matomo-perf-analytics')
+    this.matomoCurrentSetting = Registry.getInstance().get('config').api.get('settings/matomo-perf-analytics')
 
     const electronTracking = (window as any).electronAPI ? await (window as any).electronAPI.canTrackMatomo() : false
 
-    const lastMatomoCheck = window.localStorage.getItem('matomo-analytics-consent')
+    const lastMatomoCheck = window.localStorage.getItem('matomo-perf-analytics-consent')
     const sixMonthsAgo = new Date();
     sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6);
 

apps/remix-ide/src/app.ts

@@ -8,13 +8,24 @@
   "remixApp.enterText4": "Prototyping - trying out concepts and techniques",
   "remixApp.enterText5": "Developing  projects - Remix as your main dev tool",
   "remixApp.enterText6": "Production - only deployments",
-  "remixApp.matomoText1": "An Opt-in version of <a>Matomo</a>, an open source data analytics platform is being used to improve Remix IDE.",
-  "remixApp.matomoText2": "We realize that our users have sensitive information in their code and that their privacy - your privacy - must be protected.",
-  "remixApp.matomoText3": "All data collected through Matomo is stored on our own server - no data is ever given to third parties.",
-  "remixApp.matomoText4": "We do not collect nor store any personally identifiable information (PII).",
-  "remixApp.matomoText5": "For more info, see: <a>Matomo Analytics on Remix iDE</a>.",
-  "remixApp.matomoText6": "You can change your choice in the Settings panel anytime.",
-  "remixApp.matomoTitle": "Help us to improve Remix IDE",
+  "remixApp.matomoText1": "Remix features an AI coding assistant called <a>RemixAI</a>, that needs your approval to use.",
+  "remixApp.matomoText2": "We also use <a>Matomo</a>, an open-source analytics platform, that helps us improve your experience.",
+  "remixApp.matomoTitle": "AI and Analytics Preferences",
   "remixApp.accept": "Accept",
-  "remixApp.decline": "Decline"
+  "remixApp.managePreferences": "Manage Preferences",
+  "remixApp.savePreferences": "Save Preferences",
+  "remixApp.declineCookies": "Decline Cookies",
+  "remixApp.decline": "Decline",
+
+  "remixApp.mpOp1Title": "Matomo Anonymous Analytics (Necessary)",
+  "remixApp.mpOp1Details": "Our use of anonymous analytics data helps us improve your experience by identifying bug and important UX improvements. This data can also be used in overall statistics on Remix use in the wider Web3 ecosystem",
+  "remixApp.mpOp1Tooltip": "This is a necessary selection for a better experience of Remix IDE",
+
+  "remixApp.mpOp2Title": "Matomo Performance Analytics",
+  "remixApp.mpOp2Details": "Remix believes your privacy is of primary importance. Your help in making Remix the best possible open source public good toolset is also very important. Approval of performance analytics tracking greatly helps us refine and improve the toolset. Rest assured, we will never share this data with any third parties.",
+  "remixApp.mpOp2Link": "<a>Learn more about analytics</a>",
+
+  "remixApp.mpOp3Title": "RemixAI",
+  "remixApp.mpOp3Details": "RemixAI helps by offering code suggestions and improvements",
+  "remixApp.mpOp3Link": "<a>Learn more about RemixAI Copilot</a>"
 }

apps/remix-ide/src/app/tabs/locales/en/remixApp.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/locales/en/settings.json

@@ -36,6 +36,7 @@ export default class SettingsTab extends ViewPlugin {
   }
   element: HTMLDivElement
   public useMatomoAnalytics: any
+  public useMatomoPerfAnalytics: boolean
   public useCopilot: any
   dispatch: React.Dispatch<any> = () => {}
   constructor(config, editor) {
@@ -52,6 +53,7 @@ export default class SettingsTab extends ViewPlugin {
     this.element = document.createElement('div')
     this.element.setAttribute('id', 'settingsTab')
     this.useMatomoAnalytics = null
+    this.useMatomoPerfAnalytics = null
     this.useCopilot = this.get('settings/copilot/suggest/activate')
   }
 
@@ -78,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}
@@ -123,4 +125,21 @@ export default class SettingsTab extends ViewPlugin {
       ...this
     })
   }
+
+  updateMatomoPerfAnalyticsChoice(isChecked) {
+    this.config.set('settings/matomo-perf-analytics', isChecked)
+    // set timestamp to local storage to track when the user has given consent
+    localStorage.setItem('matomo-perf-analytics-consent', Date.now().toString())
+    this.useMatomoPerfAnalytics = isChecked
+    if (!isChecked) {
+      // revoke tracking consent for performance data
+      _paq.push(['forgetMatomoPerfConsentGiven'])
+    } else {
+      // user has given consent to process their performance data
+      _paq.push(['setMatomoPerfConsentGiven'])
+    }
+    this.dispatch({
+      ...this
+    })
+  }
 }

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

@@ -0,0 +1,135 @@
+import React, { useContext, useEffect, useRef, useState } from 'react'
+import { FormattedMessage } from 'react-intl'
+import { useDialogDispatchers } from '../../context/provider'
+import { ToggleSwitch } from '@remix-ui/toggle'
+import { AppContext } from '../../context/context'
+declare global {
+  interface Window {
+    _paq: any
+  }
+}
+const _paq = (window._paq = window._paq || [])
+
+const ManagePreferencesSwitcher = (prop: {
+  setParentState: (state: any) => void
+}) => {
+  const [remixAISwitch, setRemixAISwitch] = useState(true)
+  const [matPerfSwitch, setMatPerfSwitch] = useState(true)
+
+  useEffect(() => {
+    prop.setParentState({
+      remixAISwitch,
+      matPerfSwitch
+    })
+  }, [remixAISwitch, matPerfSwitch])
+
+  return (
+    <>
+      <div data-id="matomoAnonAnalytics" className='justify-content-between d-flex'>
+        <div className='mt-2'>
+          <h6 className='text-secondary'><FormattedMessage id="remixApp.mpOp1Title" /></h6>
+          <p className='form-check-label text-secondary'><FormattedMessage id="remixApp.mpOp1Details" /></p>
+        </div>
+        <div>
+          <ToggleSwitch
+            id = "matomoAnonAnalyticsToggle"
+            size = "2xl"
+            tooltipTextId = "remixApp.mpOp1Tooltip"
+            disabled = {true}
+          ></ToggleSwitch>
+        </div>
+      </div>
+      <div data-id="matomoPerfAnalytics" className='justify-content-between d-flex'>
+        <div className='mt-3'>
+          <h6><FormattedMessage id="remixApp.mpOp2Title" /></h6>
+          <p className='form-check-label'><FormattedMessage id="remixApp.mpOp2Details" /></p>
+          <p className='mt-1'><FormattedMessage
+            id="remixApp.mpOp2Link"
+            values={{
+              a: (chunks) => (
+                <a className="text-primary" href="https://matomo.org" target="_blank" rel="noreferrer">
+                  {chunks}
+                </a>
+              ),
+            }}
+          /></p>
+        </div>
+        <div>
+          <ToggleSwitch
+            id = "matomoPerfAnalyticsToggle"
+            size = "2xl"
+            isOn = {matPerfSwitch}
+            onClick = {() => setMatPerfSwitch(!matPerfSwitch)}
+          ></ToggleSwitch>
+        </div>
+      </div>
+      <div data-id="remixAI" className='justify-content-between d-flex'>
+        <div className='mt-2'>
+          <h6><FormattedMessage id="remixApp.mpOp3Title" /></h6>
+          <p className='form-check-label'><FormattedMessage id="remixApp.mpOp3Details" /></p>
+          <p className='mt-1'><FormattedMessage
+            id="remixApp.mpOp3Link"
+            values={{
+              a: (chunks) => (
+                <a className="text-primary" href="https://remix-ide.readthedocs.io/en/latest/ai.html" target="_blank" rel="noreferrer">
+                  {chunks}
+                </a>
+              ),
+            }}
+          /></p>
+        </div>
+        <div>
+          <ToggleSwitch
+            id = "remixAIToggle"
+            size = "2xl"
+            isOn = {remixAISwitch}
+            onClick = {() => setRemixAISwitch(!remixAISwitch)}
+          ></ToggleSwitch>
+        </div>
+      </div>
+    </>
+  )
+}
+
+const ManagePreferencesDialog = (props) => {
+  const { modal } = useDialogDispatchers()
+  const { settings } = useContext(AppContext)
+  const [visible, setVisible] = useState<boolean>(true)
+  const switcherState = useRef<Record<string, any>>(null)
+
+  useEffect(() => {
+    if (visible) {
+      modal({
+        id: 'managePreferencesModal',
+        title: <FormattedMessage id="remixApp.managePreferences" />,
+        message: <ManagePreferencesSwitcher setParentState={(state)=>{
+          switcherState.current = state
+        }} />,
+        okLabel: <FormattedMessage id="remixApp.savePreferences" />,
+        okFn: savePreferences,
+        showCancelIcon: true,
+        preventBlur: true
+      })
+    }
+  }, [visible])
+
+  const savePreferences = async () => {
+    _paq.push(['setConsentGiven']) // default consent to process their anonymous data
+    settings.updateMatomoAnalyticsChoice(true) // Always true for matomo Anonymous analytics
+    settings.updateMatomoPerfAnalyticsChoice(switcherState.current.matPerfSwitch) // Enable/Disable Matomo Performance analytics
+    if (switcherState.current.matPerfSwitch) {
+      // user has given consent to process their performance data
+      _paq.push(['setMatomoPerfConsentGiven'])
+    } else {
+      // revoke tracking consent for performance data
+      _paq.push(['forgetMatomoPerfConsentGiven'])
+    }
+    settings.updateCopilotChoice(switcherState.current.remixAISwitch) // Enable/Disable RemixAI copilot
+    setVisible(false)
+    props.savePreferencesFn()
+  }
+
+  return <></>
+}
+
+export default ManagePreferencesDialog

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

@@ -2,7 +2,6 @@ import React, { useContext, useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { AppContext } from '../../context/context'
 import { useDialogDispatchers } from '../../context/provider'
-import { AppModalCancelTypes } from '../../types'
 declare global {
   interface Window {
     _paq: any
@@ -11,12 +10,13 @@ declare global {
 const _paq = (window._paq = window._paq || [])
 
 interface MatomoDialogProps {
-  okFn: () => void
+  acceptAllFn: () => void
+  managePreferencesFn: () => void
   hide: boolean
 }
 
 const MatomoDialog = (props: MatomoDialogProps) => {
-  const { settings, showMatomo, appManager } = useContext(AppContext)
+  const { settings, showMatomo } = useContext(AppContext)
   const { modal } = useDialogDispatchers()
   const [visible, setVisible] = useState<boolean>(props.hide)
 
@@ -28,37 +28,23 @@ const MatomoDialog = (props: MatomoDialogProps) => {
             id="remixApp.matomoText1"
             values={{
               a: (chunks) => (
-                <a href="https://matomo.org" target="_blank" rel="noreferrer">
+                <a href="https://remix-ide.readthedocs.io/en/latest/ai.html" target="_blank" rel="noreferrer">
                   {chunks}
                 </a>
               ),
             }}
-          />
-        </p>
-        <p>
-          <FormattedMessage id="remixApp.matomoText2" />
-        </p>
-        <p>
-          <FormattedMessage id="remixApp.matomoText3" />
-        </p>
-        <p>
-          <FormattedMessage id="remixApp.matomoText4" />
-        </p>
-        <p>
+          /><br/>
           <FormattedMessage
-            id="remixApp.matomoText5"
+            id="remixApp.matomoText2"
             values={{
               a: (chunks) => (
-                <a href="https://medium.com/p/66ef69e14931/" target="_blank" rel="noreferrer">
+                <a href="https://matomo.org" target="_blank" rel="noreferrer">
                   {chunks}
                 </a>
               ),
             }}
           />
         </p>
-        <p>
-          <FormattedMessage id="remixApp.matomoText6" />
-        </p>
       </>
     )
   }
@@ -70,30 +56,28 @@ const MatomoDialog = (props: MatomoDialogProps) => {
         title: <FormattedMessage id="remixApp.matomoTitle" />,
         message: message(),
         okLabel: <FormattedMessage id="remixApp.accept" />,
-        okFn: handleModalOkClick,
-        cancelLabel: <FormattedMessage id="remixApp.decline" />,
-        cancelFn: declineModal,
+        okFn: handleAcceptAllClick,
+        cancelLabel: <FormattedMessage id="remixApp.managePreferences" />,
+        cancelFn: handleManagePreferencesClick,
+        showCancelIcon: true,
         preventBlur: true
       })
     }
   }, [visible])
 
-  const declineModal = async (reason: AppModalCancelTypes) => {
-    if (reason === AppModalCancelTypes.click || reason === AppModalCancelTypes.enter) {
-      settings.updateMatomoAnalyticsChoice(false)
-      // revoke tracking consent
-      _paq.push(['forgetConsentGiven'])
-      setVisible(false)
-    }
+  const handleAcceptAllClick = async () => {
+    _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
+    setVisible(false)
+    props.acceptAllFn()
   }
 
-  const handleModalOkClick = async () => {
-
-    // user has given consent to process their data
-    _paq.push(['setConsentGiven'])
-    settings.updateMatomoAnalyticsChoice(true)
+  const handleManagePreferencesClick = async () => {
     setVisible(false)
-    props.okFn()
+    props.managePreferencesFn()
   }
 
   return <></>

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

@@ -8,6 +8,7 @@ interface ModalWrapperProps extends ModalDialogProps {
 }
 
 const ModalWrapper = (props: ModalWrapperProps) => {
+
   const [state, setState] = useState<ModalDialogProps>()
   const ref = useRef()
   const formRef = useRef()
@@ -144,6 +145,6 @@ const ModalWrapper = (props: ModalWrapperProps) => {
 
   if (!props.id || props.id === '') return null
 
-  return <ModalDialog id={props.id} {...state} handleHide={handleHide} />
+  return <ModalDialog id={props.id} {...state} handleHide={handleHide} showCancelIcon={props.showCancelIcon} />
 }
 export default ModalWrapper

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

@@ -23,7 +23,7 @@ export const ModalProvider = ({ children = [], reducer = modalReducer, initialSt
   }
 
   const modal = (modalData: AppModal) => {
-    const { id, title, message, validationFn, okLabel, okFn, cancelLabel, cancelFn, modalType, modalParentClass, defaultValue, hideFn, data, preventBlur } = modalData
+    const { id, title, message, validationFn, okLabel, okFn, cancelLabel, cancelFn, modalType, modalParentClass, defaultValue, hideFn, data, showCancelIcon, preventBlur } = modalData
     return new Promise((resolve, reject) => {
       dispatch({
         type: modalActionTypes.setModal,
@@ -43,6 +43,7 @@ export const ModalProvider = ({ children = [], reducer = modalReducer, initialSt
           resolve,
           next: onNextFn,
           data,
+          showCancelIcon,
           preventBlur
         }
       })

libs/remix-ui/app/src/lib/remix-app/context/provider.tsx

@@ -25,6 +25,7 @@ export interface AppModal {
     resolve?: (value?:any) => void,
     next?: () => void,
     data?: any,
+    showCancelIcon?: boolean,
     preventBlur?: boolean
 }