Tracker Matomo Refactor

.circleci/config.yml

@@ -15,6 +15,12 @@ parameters:
   run_flaky_tests:
     type: boolean
     default: false
+  run_lint_only:
+    type: boolean
+    default: false
+  run_build_only:
+    type: boolean
+    default: false
   resource_class:
     type: enum
     enum: ["small", "medium", "medium+", "large", "xlarge", "2xlarge"]
@@ -367,7 +373,7 @@ workflows:
               job: ["nogroup"]
               jobsize: ["1"]
               parallelism: [1]
-              scriptparameter: ["\\.pr"]
+              scriptparameter: ["\\.pr\\.js$"]
 
   run_flaky_tests:
     when: << pipeline.parameters.run_flaky_tests >>
@@ -508,4 +514,14 @@ workflows:
             branches:
               only: remix_beta
 
+  lint_only:
+    when: << pipeline.parameters.run_lint_only >>
+    jobs:
+      - lint
+
+  build_only:
+    when: << pipeline.parameters.run_build_only >>
+    jobs:
+      - build
+
 # VS Code Extension Version: 1.5.1

.eslintrc.json

@@ -60,7 +60,24 @@
         "object-curly-spacing": ["error", "always", { "arraysInObjects": false }],
         "no-trailing-spaces": "error",
         "no-multi-spaces": "error",
-        "no-multiple-empty-lines": ["error" , { "max": 1}]
+        "no-multiple-empty-lines": ["error" , { "max": 1}],
+        "no-restricted-syntax": [
+          "error",
+          {
+            "selector": "MemberExpression[object.type='Identifier'][object.name='window'][property.type='Identifier'][property.name='_paq']",
+            "message": "Direct usage of window._paq is not allowed. Use one of these alternatives instead:\n  1. TrackingContext: track(eventBuilder)\n  2. MatomoManager: matomoManager.trackEvent(...)\n  3. Matomo Plugin: plugin.call('matomo', 'track', ...)\n  4. Helper: trackMatomoEvent(plugin, eventBuilder)"
+          },
+          {
+            "selector": "MemberExpression[object.type='MemberExpression'][object.object.type='Identifier'][object.object.name='window'][object.property.type='Identifier'][object.property.name='_paq']",
+            "message": "Direct usage of window._paq methods is not allowed. Use one of these alternatives instead:\n  1. TrackingContext: track(eventBuilder)\n  2. MatomoManager: matomoManager.trackEvent(...)\n  3. Matomo Plugin: plugin.call('matomo', 'track', ...)\n  4. Helper: trackMatomoEvent(plugin, eventBuilder)"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["**/src/app/matomo/*.ts", "**/src/assets/js/**/*.js"],
+      "rules": {
+        "no-restricted-syntax": "off"
       }
     },
     {

.gitignore

@@ -82,3 +82,4 @@ apps/remix-ide-e2e/tmp/
 
 # IDE - Cursor
 .cursor/
+PR_MESSAGE.md

apps/circuit-compiler/src/app/services/circomPluginClient.ts

@@ -1,5 +1,6 @@
 import { PluginClient } from '@remixproject/plugin'
 import { createClient } from '@remixproject/plugin-webview'
+import { trackMatomoEvent, CircuitCompilerEvents } from '@remix-api'
 import EventManager from 'events'
 import pathModule from 'path'
 import { compiler_list, parse, compile, generate_r1cs, generate_witness } from 'circom_wasm'
@@ -22,11 +23,23 @@ export class CircomPluginClient extends PluginClient {
   private lastCompiledFile: string = ''
   private compiler: typeof compilerV215 & typeof compilerV216 & typeof compilerV217 & typeof compilerV218
   public _paq = {
-    push: (args) => {
-      this.call('matomo' as any, 'track', args)
+    push: (args: any[]) => {
+      if (args[0] === 'trackEvent' && args.length >= 3) {
+        // Convert legacy _paq.push(['trackEvent', 'category', 'action', 'name'])
+        // to matomo plugin call with legacy string signature
+        const [, category, action, name, value] = args;
+        this.call('matomo' as any, 'trackEvent', category, action, name, value);
+      } else {
+        // For other _paq commands, pass through as-is
+        console.warn('CircuitCompiler: Unsupported _paq command:', args);
+      }
     }
   }
 
+  private trackCircuitEvent = (event: ReturnType<typeof CircuitCompilerEvents[keyof typeof CircuitCompilerEvents]>) => {
+    trackMatomoEvent(this, event);
+  }
+
   constructor() {
     super()
     this.methods = ['init', 'parse', 'compile', 'generateR1cs', 'resolveDependencies']
@@ -175,7 +188,7 @@ export class CircomPluginClient extends PluginClient {
         const circuitErrors = circuitApi.report()
 
         this.logCompilerReport(circuitErrors)
-        this._paq.push(['trackEvent', 'circuit-compiler', 'compile', 'Compilation failed'])
+        this.trackCircuitEvent(CircuitCompilerEvents.compile('Compilation failed'))
         throw new Error(circuitErrors)
       } else {
         this.lastCompiledFile = path
@@ -204,7 +217,7 @@ export class CircomPluginClient extends PluginClient {
           this.internalEvents.emit('circuit_parsing_done', parseErrors, filePathToId)
           this.emit('statusChanged', { key: 'succeed', title: 'circuit compiled successfully', type: 'success' })
         }
-        this._paq.push(['trackEvent', 'circuit-compiler', 'compile', 'Compilation successful'])
+        this.trackCircuitEvent(CircuitCompilerEvents.compile('Compilation successful'))
         circuitApi.log().map(log => {
           log && this.call('terminal', 'log', { type: 'log', value: log })
         })
@@ -286,15 +299,15 @@ export class CircomPluginClient extends PluginClient {
         const r1csErrors = r1csApi.report()
 
         this.logCompilerReport(r1csErrors)
-        this._paq.push(['trackEvent', 'circuit-compiler', 'generateR1cs', 'R1CS Generation failed'])
+        this.trackCircuitEvent(CircuitCompilerEvents.generateR1cs('R1CS Generation failed'))
         throw new Error(r1csErrors)
       } else {
         const fileName = extractNameFromKey(path)
         const writePath = extractParentFromKey(path) + "/.bin/" + fileName.replace('.circom', '.r1cs')
 
         // @ts-ignore
         await this.call('fileManager', 'writeFile', writePath, r1csProgram, true)
-        this._paq.push(['trackEvent', 'circuit-compiler', 'generateR1cs', 'R1CS Generation successful'])
+        this.trackCircuitEvent(CircuitCompilerEvents.generateR1cs('R1CS Generation successful'))
         r1csApi.log().map(log => {
           log && this.call('terminal', 'log', { type: 'log', value: log })
         })
@@ -342,7 +355,7 @@ export class CircomPluginClient extends PluginClient {
     const witness = this.compiler ? await this.compiler.generate_witness(dataRead, input) : await generate_witness(dataRead, input)
     // @ts-ignore
     await this.call('fileManager', 'writeFile', wasmPath.replace('.wasm', '.wtn'), witness, { encoding: null })
-    this._paq.push(['trackEvent', 'circuit-compiler', 'computeWitness', 'compiler.generate_witness', wasmPath.replace('.wasm', '.wtn')])
+    this.trackCircuitEvent(CircuitCompilerEvents.computeWitness(wasmPath.replace('.wasm', '.wtn')))
     this.internalEvents.emit('circuit_computing_witness_done')
     this.emit('statusChanged', { key: 'succeed', title: 'witness computed successfully', type: 'success' })
     return witness

apps/contract-verification/src/app/views/LookupView.tsx

@@ -1,4 +1,5 @@
 import { useContext, useEffect, useMemo, useState } from 'react'
+import { trackMatomoEvent, ContractVerificationEvents } from '@remix-api'
 import { SearchableChainDropdown, ContractAddressInput } from '../components'
 import { mergeChainSettingsWithDefaults, validConfiguration } from '../utils'
 import type { LookupResponse, VerifierIdentifier } from '../types'
@@ -59,14 +60,14 @@ export const LookupView = () => {
     }
   }
 
-  const sendToMatomo = async (eventAction: string, eventName: string) => {
-    await clientInstance.call('matomo' as any, 'track', ['trackEvent', 'ContractVerification', eventAction, eventName])
+  const sendToMatomo = async (eventName: string) => {
+    await trackMatomoEvent(clientInstance, ContractVerificationEvents.lookup(eventName));
   }
 
   const handleOpenInRemix = async (lookupResponse: LookupResponse) => {
     try {
       await clientInstance.saveToRemix(lookupResponse)
-      await sendToMatomo('lookup', 'openInRemix On: ' + selectedChain)
+      await sendToMatomo('openInRemix On: ' + selectedChain)
     } catch (err) {
       console.error(`Error while trying to open in Remix: ${err.message}`)
     }

apps/contract-verification/src/app/views/VerifyView.tsx

@@ -1,4 +1,5 @@
 import { useContext, useEffect, useMemo, useState } from 'react'
+import { trackMatomoEvent, ContractVerificationEvents } from '@remix-api'
 
 import { AppContext } from '../AppContext'
 import { SearchableChainDropdown, ContractDropdown, ContractAddressInput } from '../components'
@@ -42,8 +43,8 @@ export const VerifyView = () => {
     setEnabledVerifiers({ ...enabledVerifiers, [verifierId]: checked })
   }
 
-  const sendToMatomo = async (eventAction: string, eventName: string) => {
-    await clientInstance.call("matomo" as any, 'track', ['trackEvent', 'ContractVerification', eventAction, eventName]);
+  const sendToMatomo = async (eventName: string) => {
+    await trackMatomoEvent(clientInstance, ContractVerificationEvents.verify(eventName));
   }
 
   const handleVerify = async (e) => {
@@ -68,7 +69,7 @@ export const VerifyView = () => {
         name: verifierId as VerifierIdentifier,
       }
       receipts.push({ verifierInfo, status: 'pending', contractId, isProxyReceipt: false, failedChecks: 0 })
-      await sendToMatomo('verify', `verifyWith${verifierId} On: ${selectedChain?.chainId} IsProxy: ${!!(hasProxy && proxyAddress)}`)
+      await sendToMatomo(`verifyWith${verifierId} On: ${selectedChain?.chainId} IsProxy: ${!!(hasProxy && proxyAddress)}`)
     }
 
     const newSubmittedContract: SubmittedContract = {

apps/learneth/src/redux/models/remixide.ts

@@ -2,6 +2,7 @@ import { toast } from 'react-toastify'
 import { type ModelType } from '../store'
 import remixClient from '../../remix-client'
 import { router } from '../../App'
+import { trackMatomoEvent, LearnethEvents } from '@remix-api'
 
 function getFilePath(file: string): string {
   const name = file.split('/')
@@ -46,11 +47,28 @@ const Model: ModelType = {
         },
       });
 
+      // Type-safe Matomo tracking helper
+      const trackLearnethEvent = (event: ReturnType<typeof LearnethEvents[keyof typeof LearnethEvents]>) => {
+        trackMatomoEvent(remixClient, event);
+      };
+
+      // Legacy _paq compatibility layer for existing learneth tracking calls
       (window as any)._paq = {
-        push: (args) => {
-          remixClient.call('matomo' as any, 'track', args)
+        push: (args: any[]) => {
+          if (args[0] === 'trackEvent' && args.length >= 3) {
+            // Convert legacy _paq.push(['trackEvent', 'category', 'action', 'name'])
+            // to matomo plugin call with legacy string signature
+            const [, category, action, name, value] = args;
+            remixClient.call('matomo' as any, 'trackEvent', category, action, name, value);
+          } else {
+            // For other _paq commands, pass through as-is
+            console.warn('Learneth: Unsupported _paq command:', args);
+          }
         }
-      }
+      };
+
+      // Make trackLearnethEvent available globally for the effects
+      (window as any).trackLearnethEvent = trackLearnethEvent;
 
       yield router.navigate('/home')
     },
@@ -74,7 +92,7 @@ const Model: ModelType = {
         return
       }
 
-      (<any>window)._paq.push(['trackEvent', 'learneth', 'display_file', `${(step && step.name)}/${path}`])
+      (<any>window).trackLearnethEvent(LearnethEvents.displayFile(`${(step && step.name)}/${path}`))
 
       toast.info(`loading ${path} into IDE`)
       yield put({
@@ -101,7 +119,7 @@ const Model: ModelType = {
         })
         toast.dismiss()
       } catch (error) {
-        (<any>window)._paq.push(['trackEvent', 'learneth', 'display_file_error', error.message])
+        (<any>window).trackLearnethEvent(LearnethEvents.displayFileError(error.message))
         toast.dismiss()
         toast.error('File could not be loaded. Please try again.')
         yield put({
@@ -151,7 +169,7 @@ const Model: ModelType = {
             type: 'remixide/save',
             payload: { errors: ['Compiler failed to test this file']},
           });
-          (<any>window)._paq.push(['trackEvent', 'learneth', 'test_step_error', 'Compiler failed to test this file'])
+          (<any>window).trackLearnethEvent(LearnethEvents.testStepError('Compiler failed to test this file'))
         } else {
           const success = result.totalFailing === 0;
           if (success) {
@@ -167,14 +185,14 @@ const Model: ModelType = {
               },
             })
           }
-          (<any>window)._paq.push(['trackEvent', 'learneth', 'test_step', success])
+          (<any>window).trackLearnethEvent(LearnethEvents.testStep(String(success)))
         }
       } catch (err) {
         yield put({
           type: 'remixide/save',
           payload: { errors: [String(err)]},
         });
-        (<any>window)._paq.push(['trackEvent', 'learneth', 'test_step_error', err])
+        (<any>window).trackLearnethEvent(LearnethEvents.testStepError(String(err)))
       }
       yield put({
         type: 'loading/save',
@@ -204,13 +222,13 @@ const Model: ModelType = {
         yield remixClient.call('fileManager', 'setFile', path, content)
         yield remixClient.call('fileManager', 'switchFile', `${path}`);
 
-        (<any>window)._paq.push(['trackEvent', 'learneth', 'show_answer', path])
+        (<any>window).trackLearnethEvent(LearnethEvents.showAnswer(path))
       } catch (err) {
         yield put({
           type: 'remixide/save',
           payload: { errors: [String(err)]},
         });
-        (<any>window)._paq.push(['trackEvent', 'learneth', 'show_answer_error', err.message])
+        (<any>window).trackLearnethEvent(LearnethEvents.showAnswerError(err.message))
       }
 
       toast.dismiss()
@@ -224,7 +242,7 @@ const Model: ModelType = {
     *testSolidityCompiler(_, { put, select }) {
       try {
         yield remixClient.call('solidity', 'getCompilationResult');
-        (<any>window)._paq.push(['trackEvent', 'learneth', 'test_solidity_compiler'])
+        (<any>window).trackLearnethEvent(LearnethEvents.testSolidityCompiler())
       } catch (err) {
         const errors = yield select((state) => state.remixide.errors)
         yield put({
@@ -233,7 +251,7 @@ const Model: ModelType = {
             errors: [...errors, "The `Solidity Compiler` is not yet activated.<br>Please activate it using the `SOLIDITY` button in the `Featured Plugins` section of the homepage.<img class='img-thumbnail mt-3' src='assets/activatesolidity.png'>"],
           },
         });
-        (<any>window)._paq.push(['trackEvent', 'learneth', 'test_solidity_compiler_error', err.message])
+        (<any>window).trackLearnethEvent(LearnethEvents.testSolidityCompilerError(err.message))
       }
     }
   },