From 71b7764ff9f93706731e805ecb35c9c545ff1774 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Wed, 29 Jun 2022 16:46:54 +0800
Subject: [PATCH] add udapp,debugger localeMessage

---
 apps/remix-ide/src/app/tabs/locales/en-US.js  | 29 +++++++++++++++++++
 apps/remix-ide/src/app/tabs/locales/zh-CN.js  | 29 +++++++++++++++++++
 .../debugger-ui/src/lib/debugger-ui.tsx       | 15 ++++++----
 .../src/lib/tx-browser/tx-browser.tsx         | 10 +++++--
 .../run-tab/src/lib/components/account.tsx    | 15 ++++++----
 .../src/lib/components/contractDropdownUI.tsx | 22 +++++++++-----
 .../src/lib/components/deployButton.tsx       |  7 +++--
 .../src/lib/components/environment.tsx        | 12 ++++++--
 .../run-tab/src/lib/components/gasPrice.tsx   |  3 +-
 .../lib/components/instanceContainerUI.tsx    |  9 ++++--
 .../src/lib/components/recorderCardUI.tsx     | 12 ++++++--
 .../run-tab/src/lib/components/value.tsx      |  3 +-
 12 files changed, 131 insertions(+), 35 deletions(-)

diff --git a/apps/remix-ide/src/app/tabs/locales/en-US.js b/apps/remix-ide/src/app/tabs/locales/en-US.js
index 0f99659069..4d6fc7dd28 100644
--- a/apps/remix-ide/src/app/tabs/locales/en-US.js
+++ b/apps/remix-ide/src/app/tabs/locales/en-US.js
@@ -70,8 +70,37 @@ export default {
   'terminal.welcomeText10': 'Type the library name to see available commands',
 
   'debugger.displayName': 'Debugger',
+  'debugger.debuggerConfiguration': 'Debugger Configuration',
+  'debugger.stopDebugging': 'Stop debugging',
+  'debugger.startDebugging': 'Start debugging',
+  'debugger.placeholder': 'Transaction hash, should start with 0x',
+  'debugger.introduction': `When Debugging with a transaction hash,
+                  if the contract is verified, Remix will try to fetch the source code from Sourcify or Etherscan. Put in your Etherscan API key in the Remix settings.
+                  For supported networks, please see`,
 
   'udapp.displayName': 'Deploy & run transactions',
+  'udapp.gasLimit': 'Gas limit',
+  'udapp.account': 'Account',
+  'udapp.value': 'Value',
+  'udapp.contract': 'Contract',
+  'udapp.signAMessage': 'Sign a message',
+  'udapp.enterAMessageToSign': 'Enter a message to sign',
+  'udapp.hash': 'hash',
+  'udapp.signature': 'signature',
+  'udapp.signedMessage': 'Signed Message',
+  'udapp.environment': 'Environment',
+  'udapp.setupEnvironmentDocs': 'check out docs to setup Environment',
+  'udapp.deploy': 'Deploy',
+  'udapp.publishTo': 'Publish to',
+  'udapp.or': 'or',
+  'udapp.atAddress': 'At Address',
+  'udapp.noCompiledContracts': 'No compiled contracts',
+  'udapp.loadContractFromAddress': 'Load contract from Address',
+  'udapp.deployedContracts': 'Deployed Contracts',
+  'udapp.deployAndRunClearInstances': 'Clear instances list and reset recorder',
+  'udapp.deployAndRunNoInstanceText': 'Currently you have no contract instances to interact with.',
+  'udapp.transactionsRecorded': 'Transactions recorded',
+  'udapp.transactionsRecordedText': 'All transactions (deployed contracts and function executions) can be saved and replayed inanother environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3.',
 
   'search.displayName': 'Search in files',
   'search.replace': 'Replace',
diff --git a/apps/remix-ide/src/app/tabs/locales/zh-CN.js b/apps/remix-ide/src/app/tabs/locales/zh-CN.js
index 58a0f515da..67065403f4 100644
--- a/apps/remix-ide/src/app/tabs/locales/zh-CN.js
+++ b/apps/remix-ide/src/app/tabs/locales/zh-CN.js
@@ -70,8 +70,37 @@ export default {
   'terminal.welcomeText10': '输入库名查看可用的指令',
 
   'debugger.displayName': '调试器',
+  'debugger.debuggerConfiguration': '调试器配置',
+  'debugger.stopDebugging': '停止调试',
+  'debugger.startDebugging': '开始调试',
+  'debugger.placeholder': '交易哈希, 应该以 0x 开头',
+  'debugger.introduction': `当使用交易哈希调试时,
+                  如果该合约已被验证, Remix 会试图从 Sourcify 或 Etherscan 获取源码. 在 Remix 中设置您的 Etherscan API key.
+                  有关受支持的网络，请参阅`,
 
   'udapp.displayName': '部署 & 发交易',
+  'udapp.gasLimit': 'Gas 上限',
+  'udapp.account': '账户',
+  'udapp.value': '以太币数量',
+  'udapp.contract': '合约',
+  'udapp.signAMessage': '给一个消息签名',
+  'udapp.enterAMessageToSign': '输入一个需要签名的消息',
+  'udapp.hash': '哈希',
+  'udapp.signature': '签名',
+  'udapp.signedMessage': '已签名的消息',
+  'udapp.environment': '环境',
+  'udapp.setupEnvironmentDocs': '查看环境设置文档',
+  'udapp.deploy': '部署',
+  'udapp.publishTo': '发布到',
+  'udapp.or': '或',
+  'udapp.atAddress': '合约地址',
+  'udapp.noCompiledContracts': '没有已编译的合约',
+  'udapp.loadContractFromAddress': '加载此地址的合约',
+  'udapp.deployedContracts': '已部署的合约',
+  'udapp.deployAndRunClearInstances': '清空合约实例并重置交易记录',
+  'udapp.deployAndRunNoInstanceText': '当前您没有可交互的合约实例.',
+  'udapp.transactionsRecorded': '已记录交易',
+  'udapp.transactionsRecordedText': '可以记录一个环境中的所有交易 (包括合约部署和函数调用）并在另一个环境中重放。 例如在Javascript虚拟机环境中记录的交易可以在注入的Web3环境中重放。',
 
   'search.displayName': '全文搜索',
   'search.replace': '替换',
diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
index 25dd08705b..9d30bfdc3e 100644
--- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react' // eslint-disable-line
+import { FormattedMessage } from 'react-intl'
 import TxBrowser from './tx-browser/tx-browser' // eslint-disable-line
 import StepManager from './step-manager/step-manager' // eslint-disable-line
 import VmDebugger from './vm-debugger/vm-debugger' // eslint-disable-line
@@ -100,7 +101,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     })
 
     debuggerInstance.event.register('newSourceLocation', async (lineColumnPos, rawLocation, generatedSources, address) => {
-      if (!lineColumnPos) {        
+      if (!lineColumnPos) {
         await debuggerModule.discardHighlight()
         setState(prevState => {
           return { ...prevState, sourceLocationStatus: 'Source location not available, neither in Sourcify nor in Etherscan. Please make sure the Etherscan api key is provided in the settings.' }
@@ -324,7 +325,9 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       <Toaster message={state.toastMessage} />
       <div className="px-2">
         <div>
-          <p className="my-2 debuggerLabel">Debugger Configuration</p>
+          <p className="my-2 debuggerLabel">
+            <FormattedMessage id='debugger.debuggerConfiguration' defaultMessage='Debugger Configuration' />
+          </p>
           <div className="mt-2 mb-2 debuggerConfig custom-control custom-checkbox">
             <input className="custom-control-input" id="debugGeneratedSourcesInput" onChange={({ target: { checked } }) => {
               setState(prevState => {
@@ -346,13 +349,13 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
         </div>
         <TxBrowser requestDebug={ requestDebug } unloadRequested={ unloadRequested } updateTxNumberFlag={ updateTxNumberFlag } transactionNumber={ state.txNumber } debugging={ state.debugging } />
         { state.debugging && state.sourceLocationStatus && <div className="text-warning"><i className="fas fa-exclamation-triangle" aria-hidden="true"></i> {state.sourceLocationStatus}</div> }
-        { !state.debugging && 
+        { !state.debugging &&
         <div>
           <i className="fas fa-info-triangle" aria-hidden="true"></i>
           <span>
-            When Debugging with a transaction hash, 
-            if the contract is verified, Remix will try to fetch the source code from Sourcify or Etherscan. Put in your Etherscan API key in the Remix settings.
-            For supported networks, please see: <a href="https://sourcify.dev" target="__blank" >https://sourcify.dev</a> & <a href="https://sourcify.dev" target="__blank">https://etherscan.io/contractsVerified</a>
+            <FormattedMessage id='debugger.introduction' defaultMessage='When Debugging with a transaction hash,
+              if the contract is verified, Remix will try to fetch the source code from Sourcify or Etherscan. Put in your Etherscan API key in the Remix settings.
+              For supported networks, please see' />: <a href="https://sourcify.dev" target="__blank" >https://sourcify.dev</a> & <a href="https://sourcify.dev" target="__blank">https://etherscan.io/contractsVerified</a>
           </span>
         </div> }
         { state.debugging && <StepManager stepManager={ stepManager } /> }
diff --git a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx
index 00b241c38a..8baa4b8a1a 100644
--- a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'  //eslint-disable-line
+import { useIntl } from 'react-intl'
 import './tx-browser.css'
 
 export const TxBrowser = ({ requestDebug, updateTxNumberFlag, unloadRequested, transactionNumber, debugging }) => {
@@ -7,6 +8,9 @@ export const TxBrowser = ({ requestDebug, updateTxNumberFlag, unloadRequested, t
   })
 
   const inputValue = useRef(null)
+
+  const intl = useIntl()
+
   useEffect(() => {
     setState(prevState => {
       return {
@@ -58,7 +62,7 @@ export const TxBrowser = ({ requestDebug, updateTxNumberFlag, unloadRequested, t
             type='text'
             onChange={({ target: { value } }) => txInputChanged(value)}
             onInput={txInputOnInput}
-            placeholder={'Transaction hash, should start with 0x'}
+            placeholder={intl.formatMessage({id: 'debugger.placeholder', defaultMessage: 'Transaction hash, should start with 0x'})}
             data-id='debuggerTransactionInput'
             disabled={debugging}
           />
@@ -67,12 +71,12 @@ export const TxBrowser = ({ requestDebug, updateTxNumberFlag, unloadRequested, t
           <button
             className='btn btn-primary btn-sm txbutton'
             id='load'
-            title={debugging ? 'Stop debugging' : 'Start debugging'}
+            title={intl.formatMessage({id: `debugger.${debugging ? 'stopDebugging' : 'startDebugging'}`, defaultMessage: debugging ? 'Stop debugging' : 'Start debugging'})}
             onClick={handleSubmit}
             data-id='debuggerTransactionStartButton'
             disabled={!state.txNumber }
           >
-            { debugging ? 'Stop' : 'Start' } debugging
+            { intl.formatMessage({id: `debugger.${debugging ? 'stopDebugging' : 'startDebugging'}`, defaultMessage: debugging ? 'Stop debugging' : 'Start debugging'}) }
           </button>
         </div>
       </div>
diff --git a/libs/remix-ui/run-tab/src/lib/components/account.tsx b/libs/remix-ui/run-tab/src/lib/components/account.tsx
index f8a74a1a34..d0fac49990 100644
--- a/libs/remix-ui/run-tab/src/lib/components/account.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/account.tsx
@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-use-before-define
 import React, { useEffect, useState, useRef } from 'react'
+import { FormattedMessage, useIntl } from 'react-intl'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { AccountProps } from '../types'
 import { PassphrasePrompt } from './passphrase'
@@ -13,6 +14,8 @@ export function AccountUI (props: AccountProps) {
   })
   const messageRef = useRef('')
 
+  const intl = useIntl()
+
   useEffect(() => {
     if (!selectedAccount && accounts.length > 0) props.setAccount(accounts[0])
   }, [accounts, selectedAccount])
@@ -78,7 +81,7 @@ export function AccountUI (props: AccountProps) {
           message='Enter your passphrase for this account to sign the message'
           setPassphrase={props.setPassphrase}
         />, 'OK', () => {
-          props.modal('Sign a message', signMessagePrompt(), 'OK', () => {
+          props.modal(intl.formatMessage({id: 'udapp.signAMessage', defaultMessage: 'Sign a message'}), signMessagePrompt(), 'OK', () => {
             props.signMessageWithAddress(selectedAccount, messageRef.current, signedMessagePrompt, props.passphrase)
             props.setPassphrase('')
           }, 'Cancel', null)
@@ -87,7 +90,7 @@ export function AccountUI (props: AccountProps) {
         })
     }
 
-    props.modal('Sign a message', signMessagePrompt(), 'OK', () => {
+    props.modal(intl.formatMessage({id: 'udapp.signAMessage', defaultMessage: 'Sign a message'}), signMessagePrompt(), 'OK', () => {
       props.signMessageWithAddress(selectedAccount, messageRef.current, signedMessagePrompt)
     }, 'Cancel', null)
   }
@@ -119,7 +122,7 @@ export function AccountUI (props: AccountProps) {
 
   const signMessagePrompt = () => {
     return (
-      <div> Enter a message to sign
+      <div> <FormattedMessage id='udapp.enterAMessageToSign' defaultMessage='Enter a message to sign' />
         <div>
           <textarea
             id="prompt_text"
@@ -138,9 +141,9 @@ export function AccountUI (props: AccountProps) {
   const signedMessagePrompt = (msgHash: string, signedData: string) => {
     return (
       <div>
-        <b>hash:</b><br />
+        <b><FormattedMessage id='udapp.hash' defaultMessage='hash' />:</b><br />
         <span id="remixRunSignMsgHash" data-id="settingsRemixRunSignMsgHash">{msgHash}</span>
-        <br /><b>signature:</b><br />
+        <br /><b><FormattedMessage id='udapp.signature' defaultMessage='signature' />:</b><br />
         <span id="remixRunSignMsgSignature" data-id="settingsRemixRunSignMsgSignature">{signedData}</span>
       </div>
     )
@@ -149,7 +152,7 @@ export function AccountUI (props: AccountProps) {
   return (
     <div className="udapp_crow">
       <label className="udapp_settingsLabel">
-        Account
+        <FormattedMessage id='udapp.value' defaultMessage='Account' />
         <span id="remixRunPlusWraper" title={plusOpt.title}>
           <i id="remixRunPlus" className={`fas fa-plus-circle udapp_icon ${plusOpt.classList}`} aria-hidden="true" onClick={newAccount}></i>
         </span>
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
index df1831deaa..f8ceae3a25 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -1,11 +1,13 @@
 // eslint-disable-next-line no-use-before-define
 import React, { useEffect, useRef, useState } from 'react'
+import { FormattedMessage, useIntl } from 'react-intl'
 import { ContractDropdownProps, DeployMode } from '../types'
 import { ContractData, FuncABI } from '@remix-project/core-plugin'
 import * as ethJSUtil from 'ethereumjs-util'
 import { ContractGUI } from './contractGUI'
 
 export function ContractDropdownUI (props: ContractDropdownProps) {
+  const intl = useIntl()
   const [abiLabel, setAbiLabel] = useState<{
     display: string,
     content: string
@@ -105,7 +107,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
 
   const initSelectedContract = () => {
     const contracts = contractList[currentFile]
-  
+
     if (contracts && contracts.length > 0) {
       const contract = contracts.find(contract => contract.alias === currentContract)
 
@@ -212,7 +214,9 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
 
   return (
     <div className="udapp_container" data-id="contractDropdownContainer">
-      <label className="udapp_settingsLabel">Contract</label>
+      <label className="udapp_settingsLabel">
+        <FormattedMessage id='udapp.contract' defaultMessage='Contract' />
+      </label>
       <div className="udapp_subcontainer">
         <select ref={contractsRef} value={currentContract} onChange={handleContractChange} className="udapp_contractNames custom-select" disabled={contractOptions.disabled} title={contractOptions.title} style={{ display: loadType === 'abi' ? 'none' : 'block' }}>
           { (contractList[currentFile] || []).map((contract, index) => {
@@ -223,7 +227,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
       </div>
       <div>
         <div className="udapp_deployDropdown">
-          { ((contractList[currentFile] && contractList[currentFile].filter(contract => contract)) || []).length <= 0 ? 'No compiled contracts'
+          { ((contractList[currentFile] && contractList[currentFile].filter(contract => contract)) || []).length <= 0 ? intl.formatMessage({id: 'udapp.noCompiledContracts', defaultMessage: 'No compiled contracts'})
             : loadedContractData ? <div>
               <ContractGUI
                 title='Deploy'
@@ -252,18 +256,22 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
                   className="m-0 form-check-label custom-control-label udapp_checkboxAlign"
                   title="Publishing the source code and metadata to IPFS facilitates source code verification using Sourcify and will greatly foster contract adoption (auditing, debugging, calling it, etc...)"
                 >
-                  Publish to IPFS
+                  <FormattedMessage id='udapp.publishTo' defaultMessage='Publish to' /> IPFS
                 </label>
               </div>
             </div> : ''
           }
         </div>
-        <div className="udapp_orLabel mt-2" style={{ display: loadType === 'abi' ? 'none' : 'block' }}>or</div>
+        <div className="udapp_orLabel mt-2" style={{ display: loadType === 'abi' ? 'none' : 'block' }}>
+          <FormattedMessage id='udapp.or' defaultMessage='or' />
+        </div>
         <div className="udapp_button udapp_atAddressSect">
-          <button className="udapp_atAddress btn btn-sm btn-info" id="runAndDeployAtAdressButton" disabled={atAddressOptions.disabled} title={atAddressOptions.title} onClick={loadFromAddress}>At Address</button>
+          <button className="udapp_atAddress btn btn-sm btn-info" id="runAndDeployAtAdressButton" disabled={atAddressOptions.disabled} title={atAddressOptions.title} onClick={loadFromAddress}>
+            <FormattedMessage id='udapp.atAddress' defaultMessage='At Address' />
+          </button>
           <input
             className="udapp_input udapp_ataddressinput ataddressinput form-control"
-            placeholder="Load contract from Address"
+            placeholder={intl.formatMessage({id: 'udapp.loadContractFromAddress', defaultMessage: "Load contract from Address"})}
             title="address of contract"
             onChange={atAddressChanged}
           />
diff --git a/libs/remix-ui/run-tab/src/lib/components/deployButton.tsx b/libs/remix-ui/run-tab/src/lib/components/deployButton.tsx
index ced72344d5..5cc3f69b97 100644
--- a/libs/remix-ui/run-tab/src/lib/components/deployButton.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/deployButton.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { FormattedMessage } from 'react-intl'
 import { DeployButtonProps } from '../types'
 import { ButtonGroup, Dropdown } from 'react-bootstrap'
 
@@ -8,7 +9,7 @@ export function DeployButton (props: DeployButtonProps) {
   const toggleOptions = () => {
     setShowOptions(!showOptions)
   }
-  
+
   return (
     <>
     { props.deployOptions && (props.deployOptions || []).length > 0 ?
@@ -23,9 +24,9 @@ export function DeployButton (props: DeployButtonProps) {
             }} key={index}> { props.selectedIndex === index ? <span>&#10003; {title} </span> : <span className="pl-3">{title}</span> }</Dropdown.Item>)
           }
         </Dropdown.Menu>
-      </Dropdown> : 
+      </Dropdown> :
       <button onClick={props.handleActionClick} title={props.buttonOptions.title} className={`udapp_instanceButton ${props.buttonOptions.widthClass} btn btn-sm ${props.buttonOptions.classList}`} data-id={props.buttonOptions.dataId}>
-        Deploy
+        <FormattedMessage id='udapp.deploy' defaultMessage='Deploy' />
       </button>
     }
     </>
diff --git a/libs/remix-ui/run-tab/src/lib/components/environment.tsx b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
index 4853f6f12b..9f24c1d56f 100644
--- a/libs/remix-ui/run-tab/src/lib/components/environment.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
+import { FormattedMessage, useIntl } from 'react-intl'
 import { EnvironmentProps } from '../types'
 
 export function EnvironmentUI (props: EnvironmentProps) {
@@ -13,10 +14,12 @@ export function EnvironmentUI (props: EnvironmentProps) {
     props.setExecutionContext({ context, fork })
   }
 
+  const intl = useIntl()
+
   return (
     <div className="udapp_crow">
       <label id="selectExEnv" className="udapp_settingsLabel">
-        Environment
+        <FormattedMessage id='udapp.environment' defaultMessage='Environment' />
       </label>
       <div className="udapp_environment">
         <select id="selectExEnvOptions" data-id="settingsSelectEnvOptions" className="form-control udapp_select custom-select" value={props.selectedEnv || ''} onChange={(e) => { handleChangeExEnv(e.target.value) }}>
@@ -29,7 +32,12 @@ export function EnvironmentUI (props: EnvironmentProps) {
             )
           }
         </select>
-        <a href="https://remix-ide.readthedocs.io/en/latest/run.html#run-setup" target="_blank" rel="noreferrer"><i className="udapp_infoDeployAction ml-2 fas fa-info" title="check out docs to setup Environment"></i></a>
+        <a href="https://remix-ide.readthedocs.io/en/latest/run.html#run-setup" target="_blank" rel="noreferrer">
+          <i
+            className="udapp_infoDeployAction ml-2 fas fa-info"
+            title={intl.formatMessage({id: 'udapp.setupEnvironmentDocs', defaultMessage: "check out docs to setup Environment"})}>
+          </i>
+        </a>
       </div>
     </div>
   )
diff --git a/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx b/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx
index 19e7876a75..31c58903a8 100644
--- a/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx
@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
+import { FormattedMessage } from 'react-intl'
 import { GasPriceProps } from '../types'
 
 export function GasPriceUI (props: GasPriceProps) {
@@ -9,7 +10,7 @@ export function GasPriceUI (props: GasPriceProps) {
 
   return (
     <div className="udapp_crow">
-      <label className="udapp_settingsLabel">Gas limit</label>
+      <label className="udapp_settingsLabel"><FormattedMessage id='udapp.gasLimit' defaultMessage='Gas limit' /></label>
       <input type="number" className="form-control udapp_gasNval udapp_col2" id="gasLimit" value={props.gasLimit} onChange={handleGasLimit} />
     </div>
   )
diff --git a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
index 5c2800ef4d..09aa84b3d3 100644
--- a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
+import { FormattedMessage, useIntl } from 'react-intl'
 import { InstanceContainerProps } from '../types'
 import { UniversalDappUI } from './universalDappUI'
 
@@ -10,14 +11,16 @@ export function InstanceContainerUI (props: InstanceContainerProps) {
     props.clearInstances()
   }
 
+  const intl = useIntl()
+
   return (
     <div className="udapp_instanceContainer mt-3 border-0 list-group-item">
       <label className="udapp_deployedContracts d-flex justify-content-between align-items-center pl-2 mb-1"
         title="Autogenerated generic user interfaces for interaction with deployed contracts">
-        Deployed Contracts
+        <FormattedMessage id='udapp.deployedContracts' defaultMessage='Deployed Contracts' />
         { instanceList.length > 0
           ? <i className="mr-2 udapp_icon far fa-trash-alt" data-id="deployAndRunClearInstances" onClick={clearInstance}
-            title="Clear instances list and reset recorder" aria-hidden="true">
+            title={intl.formatMessage({id: 'udapp.deployAndRunClearInstances', defaultMessage: "Clear instances list and reset recorder"})} aria-hidden="true">
           </i> : null
         }
       </label>
@@ -39,7 +42,7 @@ export function InstanceContainerUI (props: InstanceContainerProps) {
         }) }
         </div>
         : <span className="mx-2 mt-3 alert alert-warning" data-id="deployAndRunNoInstanceText" role="alert">
-          Currently you have no contract instances to interact with.
+          <FormattedMessage id='udapp.deployAndRunNoInstanceText' defaultMessage='Currently you have no contract instances to interact with.' />
         </span>
       }
     </div>
diff --git a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
index 36e355e4b7..c63724aa5d 100644
--- a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-use-before-define
 import React, {useState} from 'react'
+import { FormattedMessage } from 'react-intl'
 import { RecorderProps } from '../types'
 
 export function RecorderUI (props: RecorderProps) {
@@ -20,7 +21,9 @@ export function RecorderUI (props: RecorderProps) {
     <div className="udapp_cardContainer list-group-item border border-bottom">
       <div className="udapp_recorderSection d-flex justify-content-between" onClick={toggleClass}>
         <div className="d-flex">
-          <label className="mt-1 udapp_recorderSectionLabel">Transactions recorded</label>
+          <label className="mt-1 udapp_recorderSectionLabel">
+            <FormattedMessage id='udapp.transactionsRecorded' defaultMessage='Transactions recorded' />
+          </label>
           <div className="ml-2 mb-2 badge badge-pill badge-primary" title="The number of recorded transactions">{props.count}</div>
         </div>
         <div>
@@ -31,8 +34,11 @@ export function RecorderUI (props: RecorderProps) {
       </div>
       <div className={`border-bottom flex-column ${toggleExpander ? "d-flex" : "d-none"}`}>
         <div className="p-2 mt-2">
-          All transactions (deployed contracts and function executions) can be saved and replayed in
-          another environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3.
+          <FormattedMessage
+            id='udapp.transactionsRecordedText'
+            defaultMessage='All transactions (deployed contracts and function executions) can be saved and replayed in
+              another environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3.'
+          />
         </div>
         <div className="mb-2 udapp_transactionActions">
           <i className="fas fa-save savetransaction udapp_recorder udapp_icon"
diff --git a/libs/remix-ui/run-tab/src/lib/components/value.tsx b/libs/remix-ui/run-tab/src/lib/components/value.tsx
index 3b2008a5f1..f143161d9a 100644
--- a/libs/remix-ui/run-tab/src/lib/components/value.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/value.tsx
@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-use-before-define
 import React, { useEffect, useRef, useState } from 'react'
+import { FormattedMessage } from 'react-intl'
 import { BN } from 'ethereumjs-util'
 import { isNumeric } from '@remix-ui/helper'
 import { ValueProps } from '../types'
@@ -47,7 +48,7 @@ export function ValueUI (props: ValueProps) {
 
   return (
     <div className="udapp_crow">
-      <label className="udapp_settingsLabel" data-id="remixDRValueLabel">Value</label>
+      <label className="udapp_settingsLabel" data-id="remixDRValueLabel"><FormattedMessage id='udapp.value' defaultMessage='Value' /></label>
       <div className="udapp_gasValueContainer">
         <input
           ref={inputValue}