Merge branch 'master' into workspace-selection-fixes

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

@@ -361,18 +361,16 @@ module.exports = {
         Resolver resolver = ens.resolver(node);
         console.log(resolver.addr(node));
     }
-    `
+    `    
     if (runMasterTests) {
+      const path = "//*[@class='view-line' and contains(.,'resolveENS') and contains(.,'view')]//span//span[contains(.,'(')]"
+
       browser
         // .clickLaunchIcon('udapp')
         .switchEnvironment('vm-mainnet-fork')
         .clickLaunchIcon('filePanel')
         .addFile('test_mainnet.sol', { content: script })
-
-      const path = "//*[@class='view-line' and contains(.,'resolveENS') and contains(.,'view')]//span//span[contains(.,'(')]"
-      const pathRunFunction = `//li//*[@aria-label='Run the free function "resolveENS"']`
-      browser.waitForElementVisible('#editorView')
-        //.waitForElementPresent(pathRunFunction)
+        .waitForElementVisible('#editorView')
         .pause(10000) // the parser need to parse the code
         .useXpath()
         .scrollToLine(16)
@@ -396,15 +394,15 @@ module.exports = {
         console.log("test running free function");
     }
     `
+
+    const path = "//*[@class='view-line' and contains(.,'runSomething') and contains(.,'view')]//span//span[contains(.,'(')]"
     browser
       .addFile('test.sol', { content: script })
-      .scrollToLine(3)
-    const path = "//*[@class='view-line' and contains(.,'runSomething') and contains(.,'view')]//span//span[contains(.,'(')]"
-    const pathRunFunction = `//li//*[@aria-label='Run the free function "runSomething"']`
-    browser.waitForElementVisible('#editorView')
+      .waitForElementVisible('#editorView')
+      .pause(10000) // the parser need to parse the code
       .useXpath()
-      .click(path)
-      .pause(3000) // the parser need to parse the code
+      .scrollToLine(3)      
+      .click(path)      
       .perform(function () {
         const actions = this.actions({ async: true });
         return actions

apps/remix-ide/src/app.js

@@ -103,6 +103,7 @@ const Editor = require('./app/editor/editor')
 const Terminal = require('./app/panels/terminal')
 const { TabProxy } = require('./app/panels/tab-proxy.js')
 
+const _paq = (window._paq = window._paq || [])
 
 export class platformApi {
   get name() {
@@ -178,16 +179,24 @@ class AppComponent {
       '6fd22d6fe5549ad4c4d8fd3ca0b7816b.mod': 35 // remix desktop
     }
 
+    _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')
 
-    let electronTracking = false
+    let electronTracking = window.electronAPI ? await window.electronAPI.canTrackMatomo() : false
 
-    if (window.electronAPI) {
-      electronTracking = await window.electronAPI.canTrackMatomo()
-    }
+    const lastMatomoCheck = window.localStorage.getItem('matomo-analytics-consent')
+    const sixMonthsAgo = new Date();
+    sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6);
+
+    const e2eforceMatomoToShow = window.localStorage.getItem('showMatomo') && window.localStorage.getItem('showMatomo') === 'true'
+    const contextShouldShowMatomo = matomoDomains[window.location.hostname] || e2eforceMatomoToShow || electronTracking
+    const shouldRenewConsent = this.matomoCurrentSetting === false && (!lastMatomoCheck || new Date(Number(lastMatomoCheck)) < sixMonthsAgo) // it is set to false for more than 6 months.
+    this.showMatomo = contextShouldShowMatomo && (!this.matomoConfAlreadySet || shouldRenewConsent)        
 
-    this.showMatamo = (matomoDomains[window.location.hostname] || electronTracking) && !this.matomoConfAlreadySet
+    if (this.showMatomo && shouldRenewConsent) {
+      _paq.push(['trackEvent', 'Matomo', 'refreshMatomoPermissions']);
+    }    
 
     this.walkthroughService = new WalkthroughService(appManager)
 

apps/remix-ide/src/app/components/preload.tsx

@@ -10,6 +10,8 @@ import './styles/preload.css'
 import isElectron from 'is-electron'
 const _paq = (window._paq = window._paq || [])
 
+_paq.push(['trackEvent', 'Preload', 'start'])
+
 export const Preload = (props: any) => {
   const [tip, setTip] = useState<string>('')
   const [supported, setSupported] = useState<boolean>(true)

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

@@ -109,6 +109,8 @@ module.exports = class SettingsTab extends ViewPlugin {
 
   updateMatomoAnalyticsChoice(isChecked) {
     this.config.set('settings/matomo-analytics', isChecked)
+    // set timestamp to local storage to track when the user has given consent
+    localStorage.setItem('matomo-analytics-consent', Date.now().toString())
     this.useMatomoAnalytics = isChecked
     if (!isChecked) {
       // revoke tracking consent

apps/remix-ide/src/assets/js/loader.js

@@ -18,14 +18,26 @@ function trackDomain(domainToTrack) {
   _paq.push(['trackPageView']);
   _paq.push(['enableLinkTracking']);
   _paq.push(['enableHeartBeatTimer']);
-  if (!window.localStorage.getItem('config-v0.8:.remix.config') ||
-    (window.localStorage.getItem('config-v0.8:.remix.config') && !window.localStorage.getItem('config-v0.8:.remix.config').includes('settings/matomo-analytics'))) {
+  const remixConfig = window.localStorage.getItem('config-v0.8:.remix.config');
+  if (!remixConfig || (remixConfig && !remixConfig.includes('settings/matomo-analytics'))) {
     // require user tracking consent before processing data
     _paq.push(['requireConsent']);
   } else {
-    // user has given consent to process their data
-    _paq.push(['setConsentGiven'])
+    try {
+      const config = JSON.parse(remixConfig);
+      if (config['settings/matomo-analytics'] === true) {
+        // user has given consent to process their data
+        _paq.push(['setConsentGiven']);
+      } else {
+        // user has not given consent to process their data
+        _paq.push(['requireConsent']);
+      }
+    } catch (e) {
+      console.error('Error parsing remix config:', e);
+      _paq.push(['requireConsent']);
+    }
   }
+  _paq.push(['trackEvent', 'loader', 'load']);
   (function () {
     var u = "https://ethereumfoundation.matomo.cloud/";
     _paq.push(['setTrackerUrl', u + 'matomo.php?debug=1']);

libs/remix-ui/app/src/index.ts

@@ -3,5 +3,5 @@ export { dispatchModalContext, dispatchModalInterface, AppContext, appProviderCo
 export { ModalProvider, useDialogDispatchers } from './lib/remix-app/context/provider'
 export { AppModal } from './lib/remix-app/interface/index'
 export { AlertModal } from './lib/remix-app/interface/index'
-export { ModalTypes } from './lib/remix-app/types/index'
+export { ModalTypes, AppModalCancelTypes } from './lib/remix-app/types/index'
 export { AppAction, appActionTypes } from './lib/remix-app/actions/app'

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

@@ -2,6 +2,7 @@ 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
@@ -15,7 +16,7 @@ interface MatomoDialogProps {
 }
 
 const MatomoDialog = (props: MatomoDialogProps) => {
-  const { settings, showMatamo, appManager } = useContext(AppContext)
+  const { settings, showMatomo, appManager } = useContext(AppContext)
   const { modal } = useDialogDispatchers()
   const [visible, setVisible] = useState<boolean>(props.hide)
 
@@ -63,7 +64,7 @@ const MatomoDialog = (props: MatomoDialogProps) => {
   }
 
   useEffect(() => {
-    if (visible && showMatamo) {
+    if (visible && showMatomo) {
       modal({
         id: 'matomoModal',
         title: <FormattedMessage id="remixApp.matomoTitle" />,
@@ -72,18 +73,22 @@ const MatomoDialog = (props: MatomoDialogProps) => {
         okFn: handleModalOkClick,
         cancelLabel: <FormattedMessage id="remixApp.decline" />,
         cancelFn: declineModal,
+        preventBlur: true
       })
     }
   }, [visible])
 
-  const declineModal = async () => {
-    settings.updateMatomoAnalyticsChoice(false)
-    // revoke tracking consent
-    _paq.push(['forgetConsentGiven'])
-    setVisible(false)
+  const declineModal = async (reason: AppModalCancelTypes) => {
+    if (reason === AppModalCancelTypes.click || reason === AppModalCancelTypes.enter) {
+      settings.updateMatomoAnalyticsChoice(false)
+      // revoke tracking consent
+      _paq.push(['forgetConsentGiven'])
+      setVisible(false)
+    }
   }
 
   const handleModalOkClick = async () => {
+
     // user has given consent to process their data
     _paq.push(['setConsentGiven'])
     settings.updateMatomoAnalyticsChoice(true)

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { ModalDialog, ModalDialogProps, ValidationResult } from '@remix-ui/modal-dialog'
-import { ModalTypes } from '../../types'
+import { AppModalCancelTypes, ModalTypes } from '../../types'
 
 interface ModalWrapperProps extends ModalDialogProps {
   modalType?: ModalTypes
@@ -42,8 +42,8 @@ const ModalWrapper = (props: ModalWrapperProps) => {
     props.okFn ? props.okFn(data.current) : props.resolve(data.current || true)
   }
 
-  const onCancelFn = async () => {
-    props.cancelFn ? props.cancelFn() : props.resolve(false)
+  const onCancelFn = async (reason?: AppModalCancelTypes) => {
+    props.cancelFn ? props.cancelFn(reason) : props.resolve(false)
   }
 
   const onInputChanged = (event) => {
@@ -142,6 +142,8 @@ const ModalWrapper = (props: ModalWrapperProps) => {
     props.handleHide()
   }
 
+  if (!props.id || props.id === '') return null
+
   return <ModalDialog id={props.id} {...state} handleHide={handleHide} />
 }
 export default ModalWrapper

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

@@ -5,7 +5,7 @@ import { AppAction } from '../actions/app'
 
 export type appProviderContextType = {
   settings: any,
-  showMatamo: boolean,
+  showMatomo: boolean,
   showEnter: boolean,
   appManager: any
   modal: any

libs/remix-ui/app/src/lib/remix-app/context/provider.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 } = modalData
+    const { id, title, message, validationFn, okLabel, okFn, cancelLabel, cancelFn, modalType, modalParentClass, defaultValue, hideFn, data, preventBlur } = modalData
     return new Promise((resolve, reject) => {
       dispatch({
         type: modalActionTypes.setModal,
@@ -42,7 +42,8 @@ export const ModalProvider = ({ children = [], reducer = modalReducer, initialSt
           hideFn,
           resolve,
           next: onNextFn,
-          data
+          data,
+          preventBlur
         }
       })
     })

libs/remix-ui/app/src/lib/remix-app/interface/index.ts

@@ -1,5 +1,5 @@
 import { GitHubUser } from '@remix-api'
-import { ModalTypes } from '../types'
+import { AppModalCancelTypes, ModalTypes } from '../types'
 
 export type ValidationResult = {
     valid: boolean,
@@ -17,14 +17,15 @@ export interface AppModal {
     okLabel: string | JSX.Element
     okFn?: (value?:any) => void
     cancelLabel?: string | JSX.Element
-    cancelFn?: () => void,
+    cancelFn?: (reason?: AppModalCancelTypes) => void,
     modalType?: ModalTypes,
     modalParentClass?: string
     defaultValue?: string
     hideFn?: () => void,
     resolve?: (value?:any) => void,
     next?: () => void,
-    data?: any
+    data?: any,
+    preventBlur?: boolean
 }
 
 export interface AlertModal {

libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts

@@ -23,7 +23,8 @@ export const modalReducer = (state: ModalState = ModalInitialState, action: Moda
       hideFn: action.payload.hideFn,
       resolve: action.payload.resolve,
       next: action.payload.next,
-      data: action.payload.data
+      data: action.payload.data,
+      preventBlur: action.payload.preventBlur
     }
 
     const modalList: AppModal[] = state.modals.slice()

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

@@ -60,7 +60,7 @@ const RemixApp = (props: IRemixAppUi) => {
       activateApp()
     }
     const hadUsageTypeAsked = localStorage.getItem('hadUsageTypeAsked')
-    if (props.app.showMatamo) {
+    if (props.app.showMatomo) {
       // if matomo dialog is displayed, it will take care of calling "setShowEnterDialog",
       // if the user approves matomo tracking.
       // so "showEnterDialog" stays false
@@ -149,7 +149,7 @@ const RemixApp = (props: IRemixAppUi) => {
 
   const value: appProviderContextType = {
     settings: props.app.settings,
-    showMatamo: props.app.showMatamo,
+    showMatomo: props.app.showMatomo,
     appManager: props.app.appManager,
     showEnter: props.app.showEnter,
     modal: props.app.notification,

libs/remix-ui/app/src/lib/remix-app/types/index.ts

@@ -8,6 +8,15 @@ export const enum ModalTypes {
   forceChoice = 'forceChoice'
 }
 
+export const enum AppModalCancelTypes {
+  close = 'close',
+  cancel = 'cancel',
+  blur = 'blur',
+  escape = 'escape',
+  enter = 'enter',
+  click = 'click'
+}
+
 export const enum UsageTypes {
   Beginner = 1,
   Prototyper,

libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx

@@ -2,6 +2,7 @@ import React, {useRef, useState, useEffect} from 'react' // eslint-disable-line
 import {ModalDialogProps} from './types' // eslint-disable-line
 
 import './remix-ui-modal-dialog.css'
+import { AppModalCancelTypes } from '@remix-ui/app'
 
 declare global {
   // eslint-disable-next-line no-unused-vars
@@ -24,32 +25,34 @@ export const ModalDialog = (props: ModalDialogProps) => {
   }
 
   useEffect(() => {
+    if (!props.id) return
     calledHideFunctionOnce.current = props.hide
-    modal.current.focus()
-
-    if (modal.current) {
+    if (!props.hide) {
+      modal.current.focus()
       modal.current.removeEventListener('blur', handleBlur)
-      modal.current.addEventListener('blur', handleBlur)
+      if (modal.current && !props.preventBlur) {
+        modal.current.addEventListener('blur', handleBlur)
+      }
     }
     return () => {
       modal.current && modal.current.removeEventListener('blur', handleBlur)
     }
   }, [props.hide])
 
   function handleBlur(e) {
-    if (!e.currentTarget.contains(e.relatedTarget)) {
+    if (e.currentTarget && !e.currentTarget.contains(e.relatedTarget)) {
       e.stopPropagation()
       if (document.activeElement !== this) {
         !window.testmode && handleHide()
-        !window.testmode && props.cancelFn && props.cancelFn()
+        !window.testmode && props.cancelFn && props.cancelFn(AppModalCancelTypes.blur)
       }
     }
   }
 
   const modalKeyEvent = (keyCode) => {
     if (keyCode === 27) {
       // Esc
-      if (props.cancelFn) props.cancelFn()
+      if (props.cancelFn) props.cancelFn(AppModalCancelTypes.escape)
       handleHide()
     } else if (keyCode === 13) {
       // Enter
@@ -71,7 +74,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
     if (state.toggleBtn) {
       if (props.okFn) props.okFn()
     } else {
-      if (props.cancelFn) props.cancelFn()
+      if (props.cancelFn) props.cancelFn(AppModalCancelTypes.enter)
     }
     handleHide()
   }
@@ -99,7 +102,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
               {props.title && props.title}
             </h6>
             {!props.showCancelIcon && (
-              <span className="modal-close" onClick={() => handleHide()}>
+              <span data-id={`${props.id}-modal-close`} className="modal-close" onClick={() => handleHide()}>
                 <i className="fas fa-times" aria-hidden="true"></i>
               </span>
             )}
@@ -130,7 +133,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
                 className={'modal-cancel btn btn-sm ' + (props.cancelBtnClass ? props.cancelBtnClass : state.toggleBtn ? 'border-secondary' : 'border-primary')}
                 data-dismiss="modal"
                 onClick={() => {
-                  if (props.cancelFn) props.cancelFn()
+                  if (props.cancelFn) props.cancelFn(AppModalCancelTypes.click)
                   handleHide()
                 }}
               >