matomo options

Author: Aniket-Engg

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

@@ -19,5 +19,12 @@
 
   "remixApp.mpOp1Title": "RemixAI",
   "remixApp.mpOp1Details": "RemixAI helps by offering code suggestions and improvements",
-  "remixApp.mpOp1Link": "<a>Learn more about RemixAI Copilot</a>"
+  "remixApp.mpOp1Link": "<a>Learn more about RemixAI Copilot</a>",
+
+  "remixApp.mpOp2Title": "Matomo Anonymous Analytics",
+  "remixApp.mpOp2Details": "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.mpOp2Link": "<a>Learn more about analytics</a>",
+
+  "remixApp.mpOp3Title": "Matomo Performance Analytics",
+  "remixApp.mpOp3Details": "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."
 }

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

@@ -20,8 +20,8 @@ const ManagePreferencesDialog = (props: ManagePreferencesDialogProps) => {
   const message = () => {
     return (
       <>
-        <div data-id="remixAI" className='justify-content-between align-items-center d-flex'>
-          <div>
+        <div data-id="remixAI" className='justify-content-between d-flex'>
+          <div className='mt-2'>
             <h6><FormattedMessage id="remixApp.mpOp1Title" /></h6>
             <p className='form-check-label'><FormattedMessage id="remixApp.mpOp1Details" /></p>
             <p className='mt-1'><FormattedMessage
@@ -37,15 +37,57 @@ const ManagePreferencesDialog = (props: ManagePreferencesDialogProps) => {
           </div>
           <div>
             <button
-              data-id="remixAIswitch"
-              id='remixAIswitch'
+              data-id="remixAISwitch"
+              id='remixAISwitch'
               className="btn text-ai"
               onClick={() => {}}
             >
               <i className="fas fa-toggle-on fa-2xl"></i>
             </button>
           </div>
         </div>
+        <div data-id="matomoAnonAnalytics" className='justify-content-between d-flex'>
+          <div className='mt-2'>
+            <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>
+            <button
+              data-id="matomoAnonAnalyticsSwitch"
+              id='matomoAnonAnalyticsSwitch'
+              className="btn text-ai"
+              onClick={() => {}}
+            >
+              <i className="fas fa-toggle-off fa-2xl"></i>
+            </button>
+          </div>
+        </div>
+        <div data-id="matomoPerfAnalytics" className='justify-content-between d-flex'>
+          <div className='mt-2'>
+            <h6 className='text-secondary'><FormattedMessage id="remixApp.mpOp3Title" /></h6>
+            <p className='form-check-label text-secondary'><FormattedMessage id="remixApp.mpOp3Details" /></p>
+          </div>
+          <div>
+            <button
+              data-id="matomoPerfAnalyticsSwitch"
+              id='matomoPerfAnalyticsSwitch'
+              className="btn text-secondary"
+              onClick={() => {}}
+            >
+              <i className="fas fa-toggle-off fa-2xl"></i>
+            </button>
+          </div>
+        </div>
       </>
     )
   }