patch i18n for remixApp

Author: drafish

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

@@ -7,5 +7,14 @@
   "remixApp.enterText3": "Learning - discovering web3 development",
   "remixApp.enterText4": "Prototyping - trying out concepts and techniques",
   "remixApp.enterText5": "Developing  projects - Remix as your main dev tool",
-  "remixApp.enterText6": "Production - only deployments"
+  "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.accept": "Accept",
+  "remixApp.decline": "Decline"
 }

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

@@ -1,4 +1,5 @@
 import React, {useContext, useEffect, useState} from 'react'
+import {FormattedMessage} from 'react-intl'
 import {AppContext} from '../../context/context'
 import {useDialogDispatchers} from '../../context/provider'
 declare global {
@@ -9,7 +10,7 @@ declare global {
 const _paq = (window._paq = window._paq || [])
 
 interface MatomoDialogProps {
-  okFn: () => void,
+  okFn: () => void
   hide: boolean
 }
 
@@ -22,25 +23,41 @@ const MatomoDialog = (props: MatomoDialogProps) => {
     return (
       <>
         <p>
-          An Opt-in version of{' '}
-          <a href="https://matomo.org" target="_blank" rel="noreferrer">
-            Matomo
-          </a>
-          , an open source data analytics platform is being used to improve Remix IDE.
+          <FormattedMessage
+            id="remixApp.matomoText1"
+            values={{
+              a: (chunks) => (
+                <a href="https://matomo.org" target="_blank" rel="noreferrer">
+                  {chunks}
+                </a>
+              ),
+            }}
+          />
         </p>
-        <p>We realize that our users have sensitive information in their code and that their privacy - your privacy - must be protected.</p>
         <p>
-          All data collected through Matomo is stored on our own server - no data is ever given to third parties.
+          <FormattedMessage id="remixApp.matomoText2" />
         </p>
-        <p>We do not collect nor store any personally identifiable information (PII).</p>
         <p>
-          For more info, see:{' '}
-          <a href="https://medium.com/p/66ef69e14931/" target="_blank" rel="noreferrer">
-            Matomo Analytics on Remix iDE
-          </a>
-          .
+          <FormattedMessage id="remixApp.matomoText3" />
+        </p>
+        <p>
+          <FormattedMessage id="remixApp.matomoText4" />
+        </p>
+        <p>
+          <FormattedMessage
+            id="remixApp.matomoText5"
+            values={{
+              a: (chunks) => (
+                <a href="https://medium.com/p/66ef69e14931/" target="_blank" rel="noreferrer">
+                  {chunks}
+                </a>
+              ),
+            }}
+          />
+        </p>
+        <p>
+          <FormattedMessage id="remixApp.matomoText6" />
         </p>
-        <p>You can change your choice in the Settings panel anytime.</p>
       </>
     )
   }
@@ -49,26 +66,26 @@ const MatomoDialog = (props: MatomoDialogProps) => {
     if (visible && showMatamo) {
       modal({
         id: 'matomoModal',
-        title: 'Help us to improve Remix IDE',
+        title: <FormattedMessage id="remixApp.matomoTitle" />,
         message: message(),
-        okLabel: 'Accept',
+        okLabel: <FormattedMessage id="remixApp.accept" />,
         okFn: handleModalOkClick,
-        cancelLabel: 'Decline',
-        cancelFn: declineModal
+        cancelLabel: <FormattedMessage id="remixApp.decline" />,
+        cancelFn: declineModal,
       })
     }
   }, [visible])
 
   const declineModal = async () => {
     settings.updateMatomoAnalyticsChoice(false)
     // revoke tracking consent
-    _paq.push(['forgetConsentGiven']);
+    _paq.push(['forgetConsentGiven'])
     setVisible(false)
   }
 
   const handleModalOkClick = async () => {
     // user has given consent to process their data
-    _paq.push(['setConsentGiven']);
+    _paq.push(['setConsentGiven'])
     settings.updateMatomoAnalyticsChoice(true)
     setVisible(false)
     props.okFn()