add home,terminal,search localeMessage

apps/remix-ide/src/app/tabs/locales/en-US.js

@@ -45,11 +45,46 @@ export default {
   'filePanel.uploadFile': 'Load a local file into current workspace',
   'filePanel.updateGist': 'Update the current [gist] explorer',
 
+  'home.scamAlert': 'Scam Alert: Beware of online videos promoting "liquidity front runner bots".',
+  'home.learnMore': 'Learn more',
+  'home.featuredPlugins': 'Featured Plugins',
+  'home.file': 'File',
+  'home.newFile': 'New File',
+  'home.openFiles': 'Open Files',
+  'home.connectToLocalhost': 'Connect to Localhost',
+  'home.loadFrom': 'LOAD FROM',
+  'home.resources': 'Resources',
+
+  'terminal.listen': 'listen on all transactions',
+  'terminal.search': 'Search with transaction hash or address',
+  'terminal.welcomeText1': 'Welcome to',
+  'terminal.welcomeText2': 'Your files are stored in',
+  'terminal.used': 'used',
+  'terminal.welcomeText3': 'You can use this terminal to',
+  'terminal.welcomeText4': 'Check transactions details and start debugging',
+  'terminal.welcomeText5': 'Execute JavaScript scripts',
+  'terminal.welcomeText6': 'Input a script directly in the command line interface',
+  'terminal.welcomeText7': 'Select a Javascript file in the file explorer and then run `remix.execute()` or `remix.exeCurrent()`  in the command line interface',
+  'terminal.welcomeText8': 'Right click on a JavaScript file in the file explorer and then click `Run`',
+  'terminal.welcomeText9': 'The following libraries are accessible',
+  'terminal.welcomeText10': 'Type the library name to see available commands',
+
   'debugger.displayName': 'Debugger',
 
   'udapp.displayName': 'Deploy & run transactions',
 
   'search.displayName': 'Search in files',
+  'search.replace': 'Replace',
+  'search.replaceAll': 'Replace All',
+  'search.placeholder1': 'Search ( Enter to search )',
+  'search.placeholder2': 'Include ie *.sol ( Enter to include )',
+  'search.placeholder3': 'Exclude ie .git/**/* ( Enter to exclude )',
+  'search.matchCase': 'Match Case',
+  'search.matchWholeWord': 'Match Whole Word',
+  'search.useRegularExpression': 'Use Regular Expression',
+  'search.replaceWithoutConfirmation': 'replace without confirmation',
+  'search.filesToInclude': 'Files to include',
+  'search.filesToExclude': 'Files to exclude',
 
   'solidity.displayName': 'Solidity compiler',
 

apps/remix-ide/src/app/tabs/locales/zh-CN.js

@@ -45,11 +45,46 @@ export default {
   'filePanel.uploadFile': '加载本地文件到当前工作空间',
   'filePanel.updateGist': '更新当前 [gist] 浏览',
 
+  'home.scamAlert': '诈骗警告: 当心在线视频推广“流动性领先者机器人”.',
+  'home.learnMore': '了解更多',
+  'home.featuredPlugins': '精选插件',
+  'home.file': '文件',
+  'home.newFile': '新建文件',
+  'home.openFiles': '上传本地文件',
+  'home.connectToLocalhost': '连接本地主机',
+  'home.loadFrom': '从以下来源导入',
+  'home.resources': '资源',
+
+  'terminal.listen': '监听所有交易',
+  'terminal.search': '按交易哈希或地址搜索',
+  'terminal.welcomeText1': '欢迎使用',
+  'terminal.welcomeText2': '您的文件储存在',
+  'terminal.used': '已使用',
+  'terminal.welcomeText3': '您可使用此终端',
+  'terminal.welcomeText4': '查看交易详情并启动调试',
+  'terminal.welcomeText5': '执行 JavaScript 脚本',
+  'terminal.welcomeText6': '直接在命令行界面输入脚本',
+  'terminal.welcomeText7': '在文件浏览器中选择一个 Javascript 文件，然后在命令行界面运行 `remix.execute()` 或 `remix.exeCurrent()` ',
+  'terminal.welcomeText8': '在文件浏览器中右键点击一个 JavaScript 文件，然后点击 `Run`',
+  'terminal.welcomeText9': '可以访问以下库',
+  'terminal.welcomeText10': '输入库名查看可用的指令',
+
   'debugger.displayName': '调试器',
 
   'udapp.displayName': '部署 & 发交易',
 
   'search.displayName': '全文搜索',
+  'search.replace': '替换',
+  'search.replaceAll': '替换所有',
+  'search.placeholder1': '搜索 ( 回车搜索 )',
+  'search.placeholder2': '包含 ie *.sol ( 回车包含 )',
+  'search.placeholder3': '排除 ie .git/**/* ( 回车排除 )',
+  'search.matchCase': '大小写匹配',
+  'search.matchWholeWord': '全字匹配',
+  'search.useRegularExpression': '使用正则表达式',
+  'search.replaceWithoutConfirmation': '替换无需确认',
+  'search.filesToInclude': '文件包含',
+  'search.filesToExclude': '文件排除',
 
   'solidity.displayName': '合约编译',
 

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useReducer } from 'react' // eslint-disable-line
-
+import { FormattedMessage } from 'react-intl'
 import './remix-ui-home-tab.css'
 import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
 import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
@@ -63,7 +63,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
             else {
               workspace.addExternal(type + '/' + cleanUrl, content, url)
               plugin.call('menuicons', 'select', 'filePanel')
-            }   
+            }
           } catch (e) {
             toast(e.message)
           }
@@ -237,15 +237,15 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
           <div>
             <i className="pl-4 text-danger fas fa-exclamation-triangle"></i>
             <span className="px-2 remixui_home_text text-danger mt-4 pt-4">
-              Scam Alert: Beware of online videos promoting "liquidity front runner bots".
+              <FormattedMessage id='home.scamAlert' defaultMessage='Scam Alert: Beware of online videos promoting "liquidity front runner bots".' />
             </span>
-            <a className="remixui_home_text" target="__blank" href="https://medium.com/remix-ide/remix-in-youtube-crypto-scams-71c338da32d">Learn more</a>
+            <a className="remixui_home_text" target="__blank" href="https://medium.com/remix-ide/remix-in-youtube-crypto-scams-71c338da32d"><FormattedMessage id='home.learnMore' defaultMessage='Learn more' /></a>
           </div>
         </div>
         <div className="row mx-2 mr-4" data-id="landingPageHpSections">
           <div className="ml-3">
             <div className="mb-3">
-              <h4>Featured Plugins</h4>
+              <h4><FormattedMessage id='home.featuredPlugins' defaultMessage='Featured Plugins' /></h4>
               <div className="d-flex flex-row pt-2">
                 <ThemeContext.Provider value={ state.themeQuality }>
                   <PluginButton imgPath="assets/img/solidityLogo.webp" envID="solidityLogo" envText="Solidity" callback={() => startSolidity()} />
@@ -259,15 +259,15 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
             </div>
             <div className="d-flex">
               <div className="file">
-                <h4>File</h4>
+                <h4><FormattedMessage id='home.file' defaultMessage='File' /></h4>
                 <p className="mb-1">
                   <i className="mr-2 far fa-file"></i>
-                  <label className="ml-1 mb-1 remixui_home_text" onClick={() => createNewFile()}>New File</label>
+                  <label className="ml-1 mb-1 remixui_home_text" onClick={() => createNewFile()}><FormattedMessage id='home.newFile' defaultMessage='New File' /></label>
                 </p>
                 <p className="mb-1">
                   <i className="mr-2 far fa-file-alt"></i>
                   <label className="ml-1 remixui_home_labelIt remixui_home_bigLabelSize remixui_home_text" htmlFor="openFileInput">
-                    Open Files
+                    <FormattedMessage id='home.openFiles' defaultMessage='Open Files' />
                   </label>
                   <input title="open file" type="file" id="openFileInput" onChange={(event) => {
                     event.stopPropagation()
@@ -277,9 +277,9 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                 </p>
                 <p className="mb-1">
                   <i className="mr-1 far fa-hdd"></i>
-                  <label className="ml-1 remixui_home_text" onClick={() => connectToLocalhost()}>Connect to Localhost</label>
+                  <label className="ml-1 remixui_home_text" onClick={() => connectToLocalhost()}><FormattedMessage id='home.connectToLocalhost' defaultMessage='Connect to Localhost' /></label>
                 </p>
-                <p className="mt-3 mb-0"><label>LOAD FROM:</label></p>
+                <p className="mt-3 mb-0"><label><FormattedMessage id='home.loadFrom' defaultMessage='LOAD FROM' />:</label></p>
                 <div className="btn-group">
                   <button className="btn mr-1 btn-secondary" data-id="landingPageImportFromGistButton" onClick={() => importFromGist()}>Gist</button>
                   <button className="btn mx-1 btn-secondary" data-id="landingPageImportFromGitHubButton" onClick={() => showFullMessage('GitHub', 'github URL', ['https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol', 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol'])}>GitHub</button>
@@ -288,7 +288,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                 </div>
               </div>
               <div className="ml-4 pl-4">
-                <h4>Resources</h4>
+                <h4><FormattedMessage id='home.resources' defaultMessage='Resources' /></h4>
                 <p className="mb-1">
                   <i className="mr-2 fas fa-book"></i>
                   <a className="remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#">Documentation</a>

libs/remix-ui/search/src/lib/components/Exclude.tsx

@@ -1,10 +1,13 @@
 import React, { useContext, useEffect, useRef, useState } from 'react'
+import { FormattedMessage, useIntl } from 'react-intl'
 import { SearchContext } from '../context/context'
 
 export const Exclude = props => {
   const { setExclude, cancelSearch, startSearch } = useContext(SearchContext)
   const [excludeInput, setExcludeInput] = useState<string>('.*/**/*')
 
+  const intl = useIntl()
+
   const change = async e => {
     setExcludeInput(e.target.value)
     await cancelSearch()
@@ -24,10 +27,10 @@ export const Exclude = props => {
   return (
     <>
       <div className="search_plugin_find-part pl-3">
-        <label className='mt-2'>Files to exclude</label>
+        <label className='mt-2'><FormattedMessage id='search.filesToExclude' defaultMessage='Files to exclude' /></label>
         <input
           id='search_exclude'
-          placeholder="Exclude ie .git/**/* ( Enter to exclude )"
+          placeholder={intl.formatMessage({id: 'search.placeholder3', defaultMessage: "Exclude ie .git/**/* ( Enter to exclude )"})}
           className="form-control"
           onKeyUp={handleKeypress}
           onChange={async (e) => change(e)}

libs/remix-ui/search/src/lib/components/Find.tsx

@@ -1,4 +1,5 @@
 import React, { useContext, useEffect, useRef, useState } from 'react'
+import { useIntl } from 'react-intl'
 import { SearchContext } from '../context/context'
 
 export const Find = () => {
@@ -12,6 +13,8 @@ export const Find = () => {
     toggleUseRegex
   } = useContext(SearchContext)
 
+  const intl = useIntl()
+
   const [inputValue, setInputValue] = useState('')
   const change = async e => {
     setInputValue(e.target.value)
@@ -35,7 +38,7 @@ export const Find = () => {
         <div className="search_plugin_search-input">
           <input
             id="search_input"
-            placeholder="Search ( Enter to search )"
+            placeholder={intl.formatMessage({id: 'search.placeholder1', defaultMessage: "Search ( Enter to search )"})}
             className="form-control"
             value={inputValue}
             onChange={async e => await change(e)}
@@ -44,7 +47,7 @@ export const Find = () => {
           <div className="search_plugin_controls">
             <div
               data-id="search_case_sensitive"
-              title="Match Case"
+              title={intl.formatMessage({id: 'search.matchCase', defaultMessage: "Match Case"})}
               className={`monaco-custom-checkbox codicon codicon-case-sensitive ${
                 state.casesensitive ? 'checked' : ''
               }`}
@@ -58,7 +61,7 @@ export const Find = () => {
             ></div>
             <div
               data-id="search_whole_word"
-              title="Match Whole Word"
+              title={intl.formatMessage({id: 'search.matchWholeWord', defaultMessage: "Match Whole Word"})}
               className={`monaco-custom-checkbox codicon codicon-whole-word ${
                 state.matchWord ? 'checked' : ''
               }`}
@@ -72,7 +75,7 @@ export const Find = () => {
             ></div>
             <div
               data-id="search_use_regex"
-              title="Use Regular Expression"
+              title={intl.formatMessage({id: 'search.useRegularExpression', defaultMessage: "Use Regular Expression"})}
               className={`monaco-custom-checkbox codicon codicon-regex ${
                 state.useRegExp ? 'checked' : ''
               }`}

libs/remix-ui/search/src/lib/components/Include.tsx

@@ -1,9 +1,13 @@
 import React, { useContext, useEffect, useRef, useState } from 'react'
+import { FormattedMessage, useIntl } from 'react-intl'
 import { SearchContext } from '../context/context'
 
 export const Include = props => {
   const { setInclude, cancelSearch, startSearch } = useContext(SearchContext)
   const [includeInput, setIncludeInput] = useState<string>('*.sol, *.js')
+
+  const intl = useIntl()
+
   const change = async e => {
     setIncludeInput(e.target.value)
     await cancelSearch()
@@ -22,10 +26,10 @@ export const Include = props => {
   return (
     <>
       <div className="search_plugin_find-part pl-3">
-        <label className='mt-2'>Files to include</label>
+        <label className='mt-2'><FormattedMessage id='search.filesToInclude' defaultMessage='Files to include' /></label>
         <input
           id='search_include'
-          placeholder="Include ie *.sol ( Enter to include )"
+          placeholder={intl.formatMessage({id: 'search.placeholder2', defaultMessage: "Include ie *.sol ( Enter to include )"})}
           className="form-control"
           onChange={async(e) => change(e)}
           onKeyUp={handleKeypress}

libs/remix-ui/search/src/lib/components/OverWriteCheck.tsx

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react'
+import { FormattedMessage } from 'react-intl'
 import { SearchContext } from '../context/context'
 
 export const OverWriteCheck = props => {
@@ -24,7 +25,7 @@ export const OverWriteCheck = props => {
               data-id="confirm_replace_label"
               className="form-check-label custom-control-label"
             >
-              replace without confirmation
+              <FormattedMessage id='search.replaceWithoutConfirmation' defaultMessage='replace without confirmation' />
             </label>
           </div>
         </div>

libs/remix-ui/search/src/lib/components/Replace.tsx

@@ -1,4 +1,5 @@
 import React, { useContext, useRef } from 'react'
+import { useIntl } from 'react-intl'
 import { SearchContext } from '../context/context'
 
 export const Replace = props => {
@@ -9,13 +10,15 @@ export const Replace = props => {
     timeOutId.current = setTimeout(() => setReplace(e.target.value), 500)
   }
 
+  const intl = useIntl()
+
   return (
     <>
       <div className="search_plugin_find-part ">
       <label className='d-none'>replace in files</label>
         <input
           id='search_replace'
-          placeholder="Replace"
+          placeholder={intl.formatMessage({id: 'search.replace', defaultMessage: "Replace"})}
           className="form-control"
           onChange={change}
         ></input>

libs/remix-ui/search/src/lib/components/results/ResultItem.tsx

@@ -1,5 +1,6 @@
 import { useDialogDispatchers } from '@remix-ui/app'
 import React, { useContext, useEffect, useRef, useState } from 'react'
+import { FormattedMessage } from 'react-intl'
 import { SearchContext } from '../../context/context'
 import { SearchResult, SearchResultLine } from '../../types'
 import { ResultFileName } from './ResultFileName'
@@ -123,12 +124,14 @@ export const ResultItem = (props: ResultItemProps) => {
           {loading ? <div className="loading">Loading...</div> : null}
           {!toggleExpander && !loading ? (
             <div className="search_plugin_wrap_summary">
-              {state.replaceEnabled? 
+              {state.replaceEnabled?
                 <div className="search_plugin_wrap_summary_replace">
-                  <div data-id={`replace-all-${props.file.filename}`} onClick={async() => replace()} className='btn btn-secondary mb-2 btn-sm'>Replace all</div>
+                  <div data-id={`replace-all-${props.file.filename}`} onClick={async() => replace()} className='btn btn-secondary mb-2 btn-sm'>
+                  <FormattedMessage id='search.replaceAll' defaultMessage='Replace all' />
+                  </div>
                 </div>
               :null}
-              {lines.map((line, index) => (   
+              {lines.map((line, index) => (
                 <ResultSummary
                   setLoading={setLoading}
                   key={index}

libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useState, useEffect, useReducer, useRef, SyntheticEvent, MouseEvent } from 'react' // eslint-disable-line
+import { FormattedMessage, useIntl } from 'react-intl'
 import { registerCommandAction, registerLogScriptRunnerAction, registerInfoScriptRunnerAction, registerErrorScriptRunnerAction, registerWarnScriptRunnerAction, listenOnNetworkAction, initListeningOnNetwork } from './actions/terminalAction'
 import { initialState, registerCommandReducer, addCommandHistoryReducer, registerScriptRunnerReducer } from './reducers/terminalReducer'
 import { getKeyOf, getValueOf, Objectfilter, matched } from './utils/utils'
@@ -76,6 +77,8 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   const panelRef = useRef(null)
   const terminalMenu = useRef(null)
 
+  const intl = useIntl ()
+
   const scrollToBottom = () => {
     messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
   }
@@ -430,7 +433,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
       setIsOpen(!panels.terminal.minimized)
     })
 
-    
+
 
     return () => {
       props.plugin.off('layout', 'change')
@@ -462,7 +465,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
               title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
               htmlFor="listenNetworkCheck"
             >
-              listen on all transactions
+              <FormattedMessage id='terminal.listen' defaultMessage='listen on all transactions' />
             </label>
           </div>
           <div className="remix_ui_terminal_search d-flex align-items-center h-100">
@@ -475,7 +478,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
               type="text"
               className="remix_ui_terminal_filter border form-control"
               id="searchInput"
-              placeholder="Search with transaction hash or address"
+              placeholder={intl.formatMessage({id: 'terminal.search', defaultMessage: "Search with transaction hash or address"})}
               data-id="terminalInputSearch" />
           </div>
         </div>

libs/remix-ui/terminal/src/lib/terminalWelcome.tsx

@@ -1,30 +1,31 @@
 import React, { useEffect } from 'react' // eslint-disable-line
+import { FormattedMessage } from 'react-intl'
 
 const TerminalWelcomeMessage = ({ packageJson, storage }) => {
   return (
     <div className="remix_ui_terminal_block px-4 " data-id="block_null">
-      <div className="remix_ui_terminal_welcome"> Welcome to Remix {packageJson} </div><br />
+      <div className="remix_ui_terminal_welcome"> <FormattedMessage id='terminal.welcomeText1' defaultMessage='Welcome to' /> Remix {packageJson} </div><br />
-      <div className="">Your files are stored in {(window as any).remixFileSystem.name}, {storage} used</div><br />
+      <div className=""><FormattedMessage id='terminal.welcomeText2' defaultMessage='Your files are stored in' /> {(window as any).remixFileSystem.name}, {storage} <FormattedMessage id='terminal.used' defaultMessage='used' /></div><br />
-      <div>You can use this terminal to: </div>
+      <div><FormattedMessage id='terminal.welcomeText3' defaultMessage='You can use this terminal to' />: </div>
       <ul className='ml-0 mr-4'>
-        <li>Check transactions details and start debugging.</li>
+        <li><FormattedMessage id='terminal.welcomeText4' defaultMessage='Check transactions details and start debugging' />.</li>
-        <li>Execute JavaScript scripts:
+        <li><FormattedMessage id='terminal.welcomeText5' defaultMessage='Execute JavaScript scripts' />:
           <br />
-          <i> - Input a script directly in the command line interface </i>
+          <i> - <FormattedMessage id='terminal.welcomeText6' defaultMessage='Input a script directly in the command line interface' /> </i>
           <br />
-          <i> - Select a Javascript file in the file explorer and then run \`remix.execute()\` or \`remix.exeCurrent()\`  in the command line interface  </i>
+          <i> - <FormattedMessage id='terminal.welcomeText7' defaultMessage='Select a Javascript file in the file explorer and then run \`remix.execute()\` or \`remix.exeCurrent()\`  in the command line interface' />  </i>
           <br />
-          <i> - Right click on a JavaScript file in the file explorer and then click \`Run\` </i>
+          <i> - <FormattedMessage id='terminal.welcomeText8' defaultMessage='Right click on a JavaScript file in the file explorer and then click \`Run\`' /> </i>
         </li>
       </ul>
 
-      <div>The following libraries are accessible:</div>
+      <div><FormattedMessage id='terminal.welcomeText9' defaultMessage='The following libraries are accessible' />:</div>
       <ul className='ml-0 mr-4'>
         <li><a target="_blank" href="https://web3js.readthedocs.io/en/1.0/">web3 version 1.5.2</a></li>
         <li><a target="_blank" href="https://docs.ethers.io">ethers.js</a> </li>
         <li>remix</li>
       </ul>
-      <div>Type the library name to see available commands.</div>
+      <div><FormattedMessage id='terminal.welcomeText10' defaultMessage='Type the library name to see available commands' />.</div>
     </div>
   )
 }