From a2c45ee6905cca657b4412ad3d5097e3d26bc5db Mon Sep 17 00:00:00 2001 From: drafish Date: Thu, 21 Dec 2023 17:00:21 +0800 Subject: [PATCH] i18n for remixd-handle --- .../src/app/plugins/remixd-handle.tsx | 70 ++++++++++++------- .../src/app/tabs/locales/en/remixApp.json | 4 +- .../src/app/tabs/locales/en/remixd.json | 16 +++++ .../src/lib/remix-app/context/provider.tsx | 12 +++- 4 files changed, 73 insertions(+), 29 deletions(-) create mode 100644 apps/remix-ide/src/app/tabs/locales/en/remixd.json diff --git a/apps/remix-ide/src/app/plugins/remixd-handle.tsx b/apps/remix-ide/src/app/plugins/remixd-handle.tsx index dd31537378..cb627cb4b7 100644 --- a/apps/remix-ide/src/app/plugins/remixd-handle.tsx +++ b/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', - cancelLabel: 'Cancel' + okLabel: window._intl.formatMessage({id: 'remixd.connect'}), + cancelLabel: window._intl.formatMessage({id: 'remixd.cancel'}), } const result = await this.call('notification', 'modal', mod) if (result) { @@ -159,45 +160,62 @@ function remixdDialog() { <>
- Access your local file system from Remix IDE using{' '} - - Remixd NPM package - - . + ( + + {chunks} + + ), + }} + />
- Remixd{' '} - - documentation - - . + ( + + {chunks} + + ), + }} + />
- The remixd command is: +
{commandText}
- 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 +
- Example command with flags:
+
{fullCommandText}
- For info about ports, see{' '} - - Remixd ports usage - + ( + + {chunks} + + ), + }} + /> +
+
+
-
This feature is still in Alpha. We recommend to keep a backup of the shared folder.
- Before using, make sure remixd version is latest i.e. v{remixdVersion} + v{remixdVersion}

- Read here how to update it +
diff --git a/apps/remix-ide/src/app/tabs/locales/en/remixApp.json b/apps/remix-ide/src/app/tabs/locales/en/remixApp.json index a67504f413..870905b2a0 100644 --- a/apps/remix-ide/src/app/tabs/locales/en/remixApp.json +++ b/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" } diff --git a/apps/remix-ide/src/app/tabs/locales/en/remixd.json b/apps/remix-ide/src/app/tabs/locales/en/remixd.json new file mode 100644 index 0000000000..41dc822faa --- /dev/null +++ b/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 Remixd NPM package.", + "remixd.text2": "Remixd documentation.", + "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 Remixd ports usage", + "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" +} diff --git a/libs/remix-ui/app/src/lib/remix-app/context/provider.tsx b/libs/remix-ui/app/src/lib/remix-app/context/provider.tsx index 0732e2cb40..54a3c1d1b4 100644 --- a/libs/remix-ui/app/src/lib/remix-app/context/provider.tsx +++ b/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 (