i18n for remixd-handle

apps/remix-ide/src/app/plugins/remixd-handle.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React, {useRef, useState, useEffect} from 'react' // eslint-disable-line
+import {FormattedMessage} from 'react-intl'
 import {WebsocketPlugin} from '@remixproject/engine-web'
 import * as packageJson from '../../../../../package.json'
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
@@ -84,7 +85,7 @@ export class RemixdHandle extends WebsocketPlugin {
         console.log(error)
         const alert: AlertModal = {
           id: 'connectionAlert',
-          message: 'Cannot connect to the remixd daemon. Please make sure you have the remixd running in the background.'
+          message: window._intl.formatMessage({id: 'remixd.connectionAlert1'}),
         }
         this.call('notification', 'alert', alert)
         this.canceled()
@@ -95,7 +96,7 @@ export class RemixdHandle extends WebsocketPlugin {
             clearInterval(intervalId)
             const alert: AlertModal = {
               id: 'connectionAlert',
-              message: 'Connection to remixd terminated. Please make sure remixd is still running in the background.'
+              message: window._intl.formatMessage({id: 'remixd.connectionAlert2'}),
             }
             this.call('notification', 'alert', alert)
             this.canceled()
@@ -115,10 +116,10 @@ export class RemixdHandle extends WebsocketPlugin {
       // warn the user only if he/she is in the browser context
       const mod: AppModal = {
         id: 'remixdConnect',
-        title: 'Access file system using remixd',
+        title: window._intl.formatMessage({id: 'remixd.remixdConnect'}),
         message: remixdDialog(),
-        okLabel: 'Connect',
+        okLabel: window._intl.formatMessage({id: 'remixd.connect'}),
-        cancelLabel: 'Cancel'
+        cancelLabel: window._intl.formatMessage({id: 'remixd.cancel'}),
       }
       const result = await this.call('notification', 'modal', mod)
       if (result) {
@@ -159,45 +160,62 @@ function remixdDialog() {
     <>
       <div className="">
         <div className="mb-2 text-break">
-          Access your local file system from Remix IDE using{' '}
+          <FormattedMessage
-          <a target="_blank" href="https://www.npmjs.com/package/@remix-project/remixd">
+            id="remixd.text1"
-            Remixd NPM package
+            values={{
-          </a>
+              a: (chunks) => (
-          .
+                <a target="_blank" href="https://www.npmjs.com/package/@remix-project/remixd">
+                  {chunks}
+                </a>
+              ),
+            }}
+          />
         </div>
         <div className="mb-2 text-break">
-          Remixd{' '}
+          <FormattedMessage
-          <a target="_blank" href="https://remix-ide.readthedocs.io/en/latest/remixd.html">
+            id="remixd.text2"
-            documentation
+            values={{
-          </a>
+              a: (chunks) => (
-          .
+                <a target="_blank" href="https://remix-ide.readthedocs.io/en/latest/remixd.html">
+                  {chunks}
+                </a>
+              ),
+            }}
+          />
         </div>
         <div className="mb-2 text-break">
-          The remixd command is:
+          <FormattedMessage id="remixd.text3" />
           <br />
           <b>{commandText}</b>
         </div>
         <div className="mb-2 text-break">
-          The remixd command without options uses the terminal's current directory as the shared directory and the shared Remix domain can only be https://remix.ethereum.org,
+          <FormattedMessage id="remixd.text4" />
-          https://remix-alpha.ethereum.org, or https://remix-beta.ethereum.org
         </div>
         <div className="mb-2 text-break">
-          Example command with flags: <br />
+          <FormattedMessage id="remixd.text5" /> <br />
           <b>{fullCommandText}</b>
         </div>
         <div className="mb-2 text-break">
-          For info about ports, see{' '}
+          <FormattedMessage
-          <a target="_blank" href="https://remix-ide.readthedocs.io/en/latest/remixd.html#ports-usage">
+            id="remixd.text6"
-            Remixd ports usage
+            values={{
-          </a>
+              a: (chunks) => (
+                <a target="_blank" href="https://remix-ide.readthedocs.io/en/latest/remixd.html#ports-usage">
+                  {chunks}
+                </a>
+              ),
+            }}
+          />
+        </div>
+        <div className="mb-2 text-break">
+          <FormattedMessage id="remixd.text7" />
         </div>
-        <div className="mb-2 text-break">This feature is still in Alpha. We recommend to keep a backup of the shared folder.</div>
         <div className="mb-2 text-break">
           <h6 className="text-danger">
-            Before using, make sure remixd version is latest i.e. <b>v{remixdVersion}</b>
+            <FormattedMessage id="remixd.text8" /> <b>v{remixdVersion}</b>
             <br></br>
             <a target="_blank" href="https://remix-ide.readthedocs.io/en/latest/remixd.html#update-to-the-latest-remixd">
-              Read here how to update it
+              <FormattedMessage id="remixd.text9" />
             </a>
           </h6>
         </div>

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

@@ -1,3 +1,5 @@
 {
-  "remixApp.scrollToSeeAllTabs": "Scroll to see all tabs"
+  "remixApp.scrollToSeeAllTabs": "Scroll to see all tabs",
+  "remixApp.alert": "Alert",
+  "remixApp.ok": "OK"
 }

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

@@ -0,0 +1,16 @@
+{
+  "remixd.connectionAlert1": "Cannot connect to the remixd daemon. Please make sure you have the remixd running in the background.",
+  "remixd.connectionAlert2": "Connection to remixd terminated. Please make sure remixd is still running in the background.",
+  "remixd.remixdConnect": "Access file system using remixd",
+  "remixd.connect": "Connect",
+  "remixd.cancel": "Cancel",
+  "remixd.text1": "Access your local file system from Remix IDE using <a>Remixd NPM package</a>.",
+  "remixd.text2": "Remixd <a>documentation</a>.",
+  "remixd.text3": "The remixd command is:",
+  "remixd.text4": "The remixd command without options uses the terminal's current directory as the shared directory and the shared Remix domain can only be https://remix.ethereum.org, https://remix-alpha.ethereum.org, or https://remix-beta.ethereum.org",
+  "remixd.text5": "Example command with flags:",
+  "remixd.text6": "For info about ports, see <a>Remixd ports usage</a>",
+  "remixd.text7": "This feature is still in Alpha. We recommend to keep a backup of the shared folder.",
+  "remixd.text8": "Before using, make sure remixd version is latest i.e.",
+  "remixd.text9": "Read here how to update it"
+}

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

@@ -1,4 +1,5 @@
 import React, {useReducer} from 'react'
+import {useIntl, IntlShape} from 'react-intl'
 import {modalActionTypes} from '../actions/modals'
 import {AlertModal, AppModal} from '../interface'
 import {modalReducer} from '../reducer/modals'
@@ -6,6 +7,12 @@ import {ModalInitialState} from '../state/modals'
 import {ModalTypes} from '../types'
 import {AppContext, dispatchModalContext, modalContext, platformContext, onLineContext} from './context'
 
+declare global {
+  interface Window {
+    _intl: IntlShape
+  }
+}
+
 export const ModalProvider = ({children = [], reducer = modalReducer, initialState = ModalInitialState} = {}) => {
   const [{modals, toasters, focusModal, focusToaster}, dispatch] = useReducer(reducer, initialState)
 
@@ -43,9 +50,9 @@ export const ModalProvider = ({children = [], reducer = modalReducer, initialSta
   const alert = (modalData: AlertModal) => {
     return modal({
       id: modalData.id,
-      title: modalData.title || 'Alert',
+      title: modalData.title || window._intl.formatMessage({id: 'remixApp.alert'}),
       message: modalData.message || modalData.title,
-      okLabel: 'OK',
+      okLabel: window._intl.formatMessage({id: 'remixApp.ok'}),
       okFn: (value?: any) => {},
       cancelLabel: '',
       cancelFn: () => {}
@@ -81,6 +88,7 @@ export const ModalProvider = ({children = [], reducer = modalReducer, initialSta
 }
 
 export const AppProvider = ({children = [], value = {}} = null) => {
+  window._intl = useIntl()
   return (
     <AppContext.Provider value={value}>
       <ModalProvider>