patch en locale messages for udapp

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

@@ -1,7 +1,13 @@
 {
   "udapp.displayName": "Deploy & run transactions",
+
+  "udapp._comment_gasPrice.tsx": "libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx",
   "udapp.gasLimit": "Gas limit",
+  "udapp.tooltipText4": "The default gas limit is 3M. Adjust as needed.",
+
+  "udapp._comment_value.tsx": "libs/remix-ui/run-tab/src/lib/components/value.tsx",
   "udapp.value": "Value",
+  "udapp.tooltipText5": "Enter an amount and choose its unit",
 
   "udapp._comment_contractDropdownUI.tsx": "libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx",
   "udapp.contract": "Contract",
@@ -31,6 +37,9 @@
   "udapp.alert": "Alert",
   "udapp.proceed": "Proceed",
   "udapp.cancel": "Cancel",
+  "udapp.abiFileSelected": "ABI file selected",
+  "udapp.evmVersion": "evm version",
+  "udapp.addressNotValid": "The address is not valid",
 
   "udapp._comment_account.tsx": "libs/remix-ui/run-tab/src/lib/components/account.tsx",
   "udapp.account": "Account",
@@ -52,11 +61,14 @@
   "udapp._comment_environment.tsx": "libs/remix-ui/run-tab/src/lib/components/environment.tsx",
   "udapp.environment": "Environment",
   "udapp.environmentDocs": "Click for docs about Environment",
+  "udapp.tooltipText2": "Open chainlist.org and get the connection specs of the chain you want to interact with.",
+  "udapp.tooltipText3": "Click to open a bridge for converting L1 mainnet ETH to the selected network currency.",
 
   "udapp._comment_instanceContainerUI.tsx": "libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx",
   "udapp.deployedContracts": "Deployed Contracts",
   "udapp.deployAndRunClearInstances": "Clear instances list and reset recorder",
   "udapp.deployAndRunNoInstanceText": "Currently you have no contract instances to interact with.",
+  "udapp.tooltipText6": "Autogenerated generic user interfaces for interaction with deployed contracts",
 
   "udapp._comment_recorderCardUI.tsx": "libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx",
   "udapp.transactionsRecorded": "Transactions recorded",
@@ -76,5 +88,46 @@
   "udapp.copyParameters": "Copy encoded input parameters to clipboard",
   "udapp.copyCalldata": "Copy calldata to clipboard",
   "udapp.deployWithProxy": "Deploy with Proxy",
-  "udapp.upgradeWithProxy": "Upgrade with Proxy"
+  "udapp.upgradeWithProxy": "Upgrade with Proxy",
+  "udapp.getEncodedCallError": "cannot encode empty arguments",
+  "udapp.proxyAddressError1": "proxy address cannot be empty",
+  "udapp.proxyAddressError2": "not a valid contract address",
+  "udapp.tooltipText11": "Proxy address cannot be empty",
+  "udapp.tooltipText12": "Input required",
+  "udapp.tooltipText13": "Deployed {date}",
+
+  "udapp._comment_universalDappUI.tsx": "libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx",
+  "udapp.tooltipText7": "Remove from the list",
+  "udapp.tooltipText8": "Click for docs about using 'receive'/'fallback'",
+  "udapp.tooltipText9": "The Calldata to send to fallback function of the contract.",
+  "udapp.tooltipText10": "Send data to contract.",
+  "udapp.balance": "Balance",
+  "udapp.lowLevelInteractions": "Low level interactions",
+  "udapp.llIError1": "Value to send should be a number",
+  "udapp.llIError2": "In order to receive Ether transfer the contract should have either 'receive' or payable 'fallback' function",
+  "udapp.llIError3": "The calldata should be a valid hexadecimal value with size of at least one byte.",
+  "udapp.llIError4": "The calldata should be a valid hexadecimal value.",
+  "udapp.llIError5": "'Fallback' function is not defined",
+  "udapp.llIError6": "Both 'receive' and 'fallback' functions are not defined",
+  "udapp.llIError7": "Please define a 'Fallback' function to send calldata and a either 'Receive' or payable 'Fallback' to send ethers",
+  "udapp.copy": "Copy",
+
+  "udapp._comment_mainnet.tsx": "libs/remix-ui/run-tab/src/lib/components/mainnet.tsx",
+  "udapp.mainnetText1": "You are about to create a transaction on {name} Network. Confirm the details to send the info to your provider.",
+  "udapp.mainnetText2": "The provider for many users is MetaMask. The provider will ask you to sign the transaction before it is sent to {name} Network.",
+  "udapp.amount": "Amount",
+  "udapp.gasEstimation": "Gas estimation",
+  "udapp.maxPriorityFee": "Max Priority fee",
+  "udapp.maxFee": "Max fee (Not less than base fee {baseFeePerGas} Gwei)",
+  "udapp.contractCreation": "Contract Creation",
+  "udapp.transactionFee": "Transaction is invalid. Max fee should not be less than Base fee",
+  "udapp.title1": "Represents the part of the tx fee that goes to the miner.",
+  "udapp.title2": "Represents the maximum amount of fee that you will pay for this transaction. The minimun needs to be set to base fee.",
+  "udapp.gasPrice": "Gas price",
+  "udapp.gweiText": "visit {a} for current gas price info.",
+  "udapp.maxTransactionFee": "Max transaction fee",
+  "udapp.mainnetText3": "Do not show this warning again.",
+
+  "udapp._comment_run-tab.tsx": "/libs/remix-ui/run-tab/src/lib/run-tab.tsx",
+  "udapp.gasEstimationPromptText": "Gas estimation errored with the following message (see below). The transaction execution will likely fail. Do you want to force sending?"
 }

libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx

@@ -50,7 +50,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
     enableAtAddress(false)
     setAbiLabel({
       display: 'none',
-      content: 'ABI file selected',
+      content: intl.formatMessage({ id: 'udapp.abiFileSelected' }),
     })
   }, [])
 
@@ -427,7 +427,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
             }}
           >
             <option value="" disabled hidden>
-              No compiled contracts
+              {intl.formatMessage({ id: 'udapp.noCompiledContracts' })}
             </option>
             {(contractList[currentFile] || []).map((contract, index) => {
               return (
@@ -453,7 +453,9 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
             </span>
           }
         >
-          <span className="udapp_evmVersion badge alert-warning">evm version: {evmVersion}</span>
+          <span className="udapp_evmVersion badge alert-warning">
+            <FormattedMessage id="udapp.evmVersion" />: {evmVersion}
+          </span>
         </CustomTooltip>
       )}
       <div>
@@ -538,7 +540,11 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
               />
             </CustomTooltip>
           </div>
-          {!addressIsValid && <span className="text-danger text-right">The address is not valid</span>}
+          {!addressIsValid && (
+            <span className="text-danger text-right">
+              <FormattedMessage id="udapp.addressNotValid" />
+            </span>
+          )}
         </div>
       </div>
     </div>

libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx

@@ -87,7 +87,7 @@ export function ContractGUI(props: ContractGUIProps) {
     const multiString = getMultiValsString(multiFields.current)
     // copy-to-clipboard icon is only visible for method requiring input params
     if (!multiString) {
-      return 'cannot encode empty arguments'
+      return intl.formatMessage({id: 'udapp.getEncodedCallError'})
     }
     const multiJSON = JSON.parse('[' + multiString + ']')
 
@@ -106,7 +106,7 @@ export function ContractGUI(props: ContractGUIProps) {
       const multiString = getMultiValsString(multiFields.current)
       // copy-to-clipboard icon is only visible for method requiring input params
       if (!multiString) {
-        return 'cannot encode empty arguments'
+        return intl.formatMessage({id: 'udapp.getEncodedCallError'})
       }
       const multiJSON = JSON.parse('[' + multiString + ']')
       return txHelper.encodeParams(props.funcABI, multiJSON)
@@ -178,7 +178,7 @@ export function ContractGUI(props: ContractGUIProps) {
       props.clickCallBack(props.initializerOptions.inputs.inputs, proxyInitializeString, ['Deploy with Proxy'])
     } else if (deployState.upgrade) {
       if (proxyAddress === '') {
-        setProxyAddressError('proxy address cannot be empty')
+        setProxyAddressError(intl.formatMessage({id: 'udapp.proxyAddressError1'}))
       } else {
         const isValidProxyAddress = await props.isValidProxyAddress(proxyAddress)
         if (isValidProxyAddress) {
@@ -216,7 +216,7 @@ export function ContractGUI(props: ContractGUIProps) {
             }
           }
         } else {
-          setProxyAddressError('not a valid contract address')
+          setProxyAddressError(intl.formatMessage({id: 'udapp.proxyAddressError2'}))
         }
       }
     } else {
@@ -288,7 +288,13 @@ export function ContractGUI(props: ContractGUIProps) {
           placement={'right'}
           tooltipClasses="text-wrap"
           tooltipId="remixUdappInstanceButtonTooltip"
-          tooltipText={toggleUpgradeImp && !proxyAddress ? 'Proxy address cannot be empty' : props.inputs !== '' && basicInput === '' ? 'Input required' : buttonOptions.title}
+          tooltipText={
+            toggleUpgradeImp && !proxyAddress
+              ? intl.formatMessage({id: 'udapp.tooltipText11'})
+              : props.inputs !== '' && basicInput === ''
+                ? intl.formatMessage({id: 'udapp.tooltipText12'})
+                : buttonOptions.title
+          }
         >
           <div className="d-flex wrapperElement" onClick={handleActionClick} data-id={buttonOptions.dataId} data-title={buttonOptions.title}>
             <button
@@ -462,7 +468,7 @@ export function ContractGUI(props: ContractGUIProps) {
                         placement={'right'}
                         tooltipClasses="text-nowrap"
                         tooltipId={`proxyAddressTooltip${index}`}
-                        tooltipText={'Deployed ' + shortenDate(deployment.date)}
+                        tooltipText={<FormattedMessage id="udapp.tooltipText13" values={{date: shortenDate(deployment.date)}} />}
                         key={index}
                       >
                         <Dropdown.Item

libs/remix-ui/run-tab/src/lib/components/deployButton.tsx

@@ -1,10 +1,11 @@
 import React, {useState} from 'react'
-import {FormattedMessage} from 'react-intl'
+import {FormattedMessage, useIntl} from 'react-intl'
 import {DeployButtonProps} from '../types'
 import {ButtonGroup, Dropdown} from 'react-bootstrap'
 import {CustomTooltip} from '@remix-ui/helper'
 
 export function DeployButton(props: DeployButtonProps) {
+  const intl = useIntl()
   const [showOptions, setShowOptions] = useState<boolean>(false)
 
   const toggleOptions = () => {
@@ -21,7 +22,7 @@ export function DeployButton(props: DeployButtonProps) {
             className={`udapp_instanceButton ${props.buttonOptions.widthClass} btn btn-sm ${props.buttonOptions.classList}`}
             data-id={props.buttonOptions.dataId}
           >
-            {props.deployOptions[props.selectedIndex] ? props.deployOptions[props.selectedIndex].title : 'Deploy'}
+            {props.deployOptions[props.selectedIndex] ? props.deployOptions[props.selectedIndex].title : intl.formatMessage({id: 'udapp.deploy'})}
           </button>
           <Dropdown.Toggle
             split

libs/remix-ui/run-tab/src/lib/components/environment.tsx

@@ -24,12 +24,7 @@ export function EnvironmentUI(props: EnvironmentProps) {
       <label id="selectExEnv" className="udapp_settingsLabel">
         <FormattedMessage id="udapp.environment" />
 
-        <CustomTooltip
-          placement={'right'}
-          tooltipClasses="text-nowrap"
-          tooltipId="info-recorder"
-          tooltipText="Open chainlist.org and get the connection specs of the chain you want to interact with."
-        >
+        <CustomTooltip placement={'right'} tooltipClasses="text-nowrap" tooltipId="info-recorder" tooltipText={<FormattedMessage id="udapp.tooltipText2" />}>
           <a href="https://chainlist.org/" target="_blank">
             <i style={{fontSize: 'medium'}} className={'ml-2 fad fa-plug'} aria-hidden="true"></i>
           </a>
@@ -41,12 +36,7 @@ export function EnvironmentUI(props: EnvironmentProps) {
             {isL2(currentProvider) && 'L2 - '}
             {currentProvider && currentProvider.content}
             {currentProvider && bridges[currentProvider.value] && (
-              <CustomTooltip
-                placement={'right'}
-                tooltipClasses="text-nowrap"
-                tooltipId="info-recorder"
-                tooltipText="Click to open a bridge for converting L1 mainnet ETH to the selected network currency."
-              >
+              <CustomTooltip placement={'right'} tooltipClasses="text-nowrap" tooltipId="info-recorder" tooltipText={<FormattedMessage id="udapp.tooltipText3" />}>
                 <i
                   style={{fontSize: 'medium'}}
                   className={'ml-2 fa fa-rocket-launch'}

libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx

@@ -14,7 +14,7 @@ export function GasPriceUI(props: GasPriceProps) {
       <label className="udapp_settingsLabel">
         <FormattedMessage id="udapp.gasLimit" />
       </label>
-      <CustomTooltip placement={'right'} tooltipClasses="text-nowrap" tooltipId="remixGasPriceTooltip" tooltipText={'The default gas limit is 3M. Adjust as needed.'}>
+      <CustomTooltip placement={'right'} tooltipClasses="text-nowrap" tooltipId="remixGasPriceTooltip" tooltipText={<FormattedMessage id="udapp.tooltipText4" />}>
         <input type="number" className="form-control udapp_gasNval udapp_col2" id="gasLimit" value={props.gasLimit} onChange={handleGasLimit} />
       </CustomTooltip>
     </div>

libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx

@@ -17,12 +17,7 @@ export function InstanceContainerUI(props: InstanceContainerProps) {
   return (
     <div className="udapp_instanceContainer mt-3 border-0 list-group-item">
       <div className="d-flex justify-content-between align-items-center pl-2 mb-2">
-        <CustomTooltip
-          placement="top-start"
-          tooltipClasses="text-nowrap"
-          tooltipId="deployAndRunClearInstancesTooltip"
-          tooltipText={'Autogenerated generic user interfaces for interaction with deployed contracts'}
-        >
+        <CustomTooltip placement="top-start" tooltipClasses="text-nowrap" tooltipId="deployAndRunClearInstancesTooltip" tooltipText={<FormattedMessage id="udapp.tooltipText6" />}>
           <label className="udapp_deployedContracts">
             <FormattedMessage id="udapp.deployedContracts" />
           </label>

libs/remix-ui/run-tab/src/lib/components/mainnet.tsx

@@ -1,10 +1,12 @@
 // eslint-disable-next-line no-use-before-define
 import React, {useEffect, useState} from 'react'
+import {FormattedMessage, useIntl} from 'react-intl'
 import {CopyToClipboard} from '@remix-ui/clipboard'
 import Web3 from 'web3'
 import {MainnetProps} from '../types'
 
 export function MainnetPrompt(props: MainnetProps) {
+  const intl = useIntl()
   const [baseFee, setBaseFee] = useState<string>('')
   const [transactionFee, setTransactionFee] = useState<string>('')
 
@@ -26,7 +28,7 @@ export function MainnetPrompt(props: MainnetProps) {
     const maxFee = value
     // @ts-ignore
     if (Web3.utils.toBN(props.network.lastBlock.baseFeePerGas).gt(Web3.utils.toBN(Web3.utils.toWei(maxFee, 'Gwei')))) {
-      setTransactionFee('Transaction is invalid. Max fee should not be less than Base fee')
+      setTransactionFee(intl.formatMessage({id: 'udapp.transactionFeeText'}))
       props.updateGasPriceStatus(false)
       props.updateConfirmSettings(true)
       return
@@ -65,9 +67,9 @@ export function MainnetPrompt(props: MainnetProps) {
   return (
     <div>
       <div className="text-dark">
-        You are about to create a transaction on {props.network.name} Network. Confirm the details to send the info to your provider.
+        <FormattedMessage id="udapp.mainnetText1" values={{name: props.network.name}} />
         <br />
-        The provider for many users is MetaMask. The provider will ask you to sign the transaction before it is sent to {props.network.name} Network.
+        <FormattedMessage id="udapp.mainnetText2" values={{name: props.network.name}} />
       </div>
       <div className="mt-3">
         <div>
@@ -76,32 +78,40 @@ export function MainnetPrompt(props: MainnetProps) {
         </div>
         <div>
           <span className="text-dark mr-2">To:</span>
-          <span>{props.tx.to ? props.tx.to : '(Contract Creation)'}</span>
+          <span>{props.tx.to ? props.tx.to : `(${intl.formatMessage({id: 'udapp.contractCreation'})})`}</span>
         </div>
         <div className="d-flex align-items-center">
           <span className="text-dark mr-2">Data:</span>
           <pre className="udapp_wrapword mb-0">
             {props.tx.data && props.tx.data.length > 50 ? props.tx.data.substring(0, 49) + '...' : props.tx.data}
-            <CopyToClipboard content={props.tx.data} />
+            <CopyToClipboard tip={intl.formatMessage({id: 'udapp.copy'})} content={props.tx.data} />
           </pre>
         </div>
         <div className="mb-3">
-          <span className="text-dark mr-2">Amount:</span>
+          <span className="text-dark mr-2">
+            <FormattedMessage id="udapp.amount" />:
+          </span>
           <span>{props.amount} Ether</span>
         </div>
         <div>
-          <span className="text-dark mr-2">Gas estimation:</span>
+          <span className="text-dark mr-2">
+            <FormattedMessage id="udapp.gasEstimation" />:
+          </span>
           <span>{props.gasEstimation}</span>
         </div>
         <div>
-          <span className="text-dark mr-2">Gas limit:</span>
+          <span className="text-dark mr-2">
+            <FormattedMessage id="udapp.gasLimit" />:
+          </span>
           <span>{props.tx.gas}</span>
         </div>
         {props.network.lastBlock.baseFeePerGas ? (
           <div>
-            <div className="align-items-center my-1" title="Represents the part of the tx fee that goes to the miner.">
+            <div className="align-items-center my-1" title={intl.formatMessage({id: 'udapp.title1'})}>
               <div className="d-flex">
-                <span className="text-dark mr-2 text-nowrap">Max Priority fee:</span>
+                <span className="text-dark mr-2 text-nowrap">
+                  <FormattedMessage id="udapp.maxPriorityFee" />:
+                </span>
                 <input
                   className="form-control mr-1 text-right"
                   style={{height: '1.2rem', width: '6rem'}}
@@ -112,10 +122,10 @@ export function MainnetPrompt(props: MainnetProps) {
                 <span title="visit https://ethgasstation.info for current gas price info.">Gwei</span>
               </div>
             </div>
-            <div className="align-items-center my-1" title="Represents the maximum amount of fee that you will pay for this transaction. The minimun needs to be set to base fee.">
+            <div className="align-items-center my-1" title={intl.formatMessage({id: 'udapp.title2'})}>
               <div className="d-flex">
                 <span className="text-dark mr-2 text-nowrap">
-                  Max fee (Not less than base fee {Web3.utils.fromWei(Web3.utils.toBN(props.network.lastBlock.baseFeePerGas), 'Gwei')} Gwei):
+                  <FormattedMessage id="udapp.maxFee" values={{baseFeePerGas: Web3.utils.fromWei(Web3.utils.toBN(props.network.lastBlock.baseFeePerGas), 'Gwei')}} />:
                 </span>
                 <input
                   className="form-control mr-1 text-right"
@@ -131,19 +141,30 @@ export function MainnetPrompt(props: MainnetProps) {
           </div>
         ) : (
           <div className="d-flex align-items-center my-1">
-            <span className="text-dark mr-2 text-nowrap">Gas price:</span>
+            <span className="text-dark mr-2 text-nowrap">
+              <FormattedMessage id="udapp.gasPrice" />:
+            </span>
             <input className="form-control mr-1 text-right" style={{width: '40px', height: '28px'}} id="gasprice" onInput={(e: any) => onGasPriceChange(e.target.value)} />
             <span>
-              Gwei (visit{' '}
-              <a target="_blank" href="https://ethgasstation.info" rel="noreferrer">
-                ethgasstation.info
-              </a>{' '}
-              for current gas price info.)
+              Gwei (
+              <FormattedMessage
+                id="udapp.gweiText"
+                values={{
+                  a: (
+                    <a target="_blank" href="https://ethgasstation.info" rel="noreferrer">
+                      ethgasstation.info
+                    </a>
+                  )
+                }}
+              />
+              )
             </span>
           </div>
         )}
         <div className="mb-3">
-          <span className="text-dark mr-2">Max transaction fee:</span>
+          <span className="text-dark mr-2">
+            <FormattedMessage id="udapp.maxTransactionFee" />:
+          </span>
           <span className="text-warning" id="txfee">
             {transactionFee}
           </span>
@@ -152,7 +173,7 @@ export function MainnetPrompt(props: MainnetProps) {
       <div className="d-flex py-1 align-items-center custom-control custom-checkbox remixui_checkbox">
         <input className="form-check-input custom-control-input" id="confirmsetting" type="checkbox" />
         <label className="m-0 form-check-label custom-control-label" htmlFor="confirmsetting">
-          Do not show this warning again.
+          <FormattedMessage id="udapp.mainnetText3" />
         </label>
       </div>
     </div>

libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx

@@ -1,4 +1,5 @@
 import {CustomTooltip} from '@remix-ui/helper'
+import {FormattedMessage} from 'react-intl'
 import React, {useRef} from 'react'
 import {MultiDeployInputProps} from '../types'
 import {DeployButton} from './deployButton'
@@ -10,7 +11,9 @@ export function MultiDeployInput(props: MultiDeployInputProps) {
     <div className="udapp_contractActionsContainerMulti" style={{display: 'flex'}}>
       <div className="udapp_contractActionsContainerMultiInner text-dark">
         <div className="pt-2 udapp_multiHeader">
-          <div className="udapp_multiTitle run-instance-multi-title">Deploy</div>
+          <div className="udapp_multiTitle run-instance-multi-title">
+            <FormattedMessage id="udapp.deploy" />
+          </div>
         </div>
         <div>
           {props.inputs.map((inp, index) => {

libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx

@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-use-before-define
 import React, {useEffect, useState} from 'react'
+import {FormattedMessage, useIntl} from 'react-intl'
 import {UdappProps} from '../types'
 import {FuncABI} from '@remix-project/core-plugin'
 import {CopyToClipboard} from '@remix-ui/clipboard'
@@ -13,6 +14,7 @@ import {CustomTooltip, is0XPrefixed, isHexadecimal, isNumeric, shortenAddress} f
 const txHelper = remixLib.execution.txHelper
 
 export function UniversalDappUI(props: UdappProps) {
+  const intl = useIntl()
   const [toggleExpander, setToggleExpander] = useState<boolean>(true)
   const [contractABI, setContractABI] = useState<FuncABI[]>(null)
   const [address, setAddress] = useState<string>('')
@@ -68,30 +70,30 @@ export function UniversalDappUI(props: UdappProps) {
     if (amount !== '0') {
       // check for numeric and receive/fallback
       if (!isNumeric(amount)) {
-        return setLlIError('Value to send should be a number')
+        return setLlIError(intl.formatMessage({id: 'udapp.llIError1'}))
       } else if (!receive && !(fallback && fallback.stateMutability === 'payable')) {
-        return setLlIError("In order to receive Ether transfer the contract should have either 'receive' or payable 'fallback' function")
+        return setLlIError(intl.formatMessage({id: 'udapp.llIError2'}))
       }
     }
     let calldata = calldataValue
 
     if (calldata) {
       if (calldata.length < 4 && is0XPrefixed(calldata)) {
-        return setLlIError('The calldata should be a valid hexadecimal value with size of at least one byte.')
+        return setLlIError(intl.formatMessage({id: 'udapp.llIError3'}))
       } else {
         if (is0XPrefixed(calldata)) {
           calldata = calldata.substr(2, calldata.length)
         }
         if (!isHexadecimal(calldata)) {
-          return setLlIError('The calldata should be a valid hexadecimal value.')
+          return setLlIError(intl.formatMessage({id: 'udapp.llIError4'}))
         }
       }
       if (!fallback) {
-        return setLlIError("'Fallback' function is not defined")
+        return setLlIError(intl.formatMessage({id: 'udapp.llIError5'}))
       }
     }
 
-    if (!receive && !fallback) return setLlIError("Both 'receive' and 'fallback' functions are not defined")
+    if (!receive && !fallback) return setLlIError(intl.formatMessage({id: 'udapp.llIError6'}))
 
     // we have to put the right function ABI:
     // if receive is defined and that there is no calldata => receive function is called
@@ -99,7 +101,7 @@ export function UniversalDappUI(props: UdappProps) {
     if (receive && !calldata) args.funcABI = receive
     else if (fallback) args.funcABI = fallback
 
-    if (!args.funcABI) return setLlIError("Please define a 'Fallback' function to send calldata and a either 'Receive' or payable 'Fallback' to send ethers")
+    if (!args.funcABI) return setLlIError(intl.formatMessage({id: 'udapp.llIError7'}))
     runTransaction(false, args.funcABI, null, calldataValue)
   }
 
@@ -224,17 +226,19 @@ export function UniversalDappUI(props: UdappProps) {
             </span>
           </div>
           <div className="btn">
-            <CopyToClipboard content={address} direction={'top'} />
+            <CopyToClipboard tip={intl.formatMessage({id: 'udapp.copy'})} content={address} direction={'top'} />
           </div>
         </div>
-        <CustomTooltip placement="right" tooltipClasses="text-nowrap" tooltipId="udapp_udappCloseTooltip" tooltipText="Remove from the list">
+        <CustomTooltip placement="right" tooltipClasses="text-nowrap" tooltipId="udapp_udappCloseTooltip" tooltipText={<FormattedMessage id="udapp.tooltipText7" />}>
           <i className="udapp_closeIcon m-1 fas fa-times align-self-center" aria-hidden="true" data-id="universalDappUiUdappClose" onClick={remove}></i>
         </CustomTooltip>
       </div>
       <div className="udapp_cActionsWrapper" data-id="universalDappUiContractActionWrapper">
         <div className="udapp_contractActionsContainer">
           <div className="d-flex" data-id="instanceContractBal">
-            <label>Balance: {instanceBalance} ETH</label>
+            <label>
+              <FormattedMessage id="udapp.balance" />: {instanceBalance} ETH
+            </label>
           </div>
           {contractABI &&
             contractABI.map((funcABI, index) => {
@@ -277,8 +281,10 @@ export function UniversalDappUI(props: UdappProps) {
         </div>
         <div className="d-flex flex-column">
           <div className="d-flex flex-row justify-content-between mt-2">
-            <div className="py-2 border-top d-flex justify-content-start flex-grow-1">Low level interactions</div>
-            <CustomTooltip placement={'bottom-end'} tooltipClasses="text-wrap" tooltipId="receiveEthDocstoolTip" tooltipText={"Click for docs about using 'receive'/'fallback'"}>
+            <div className="py-2 border-top d-flex justify-content-start flex-grow-1">
+              <FormattedMessage id="udapp.lowLevelInteractions" />
+            </div>
+            <CustomTooltip placement={'bottom-end'} tooltipClasses="text-wrap" tooltipId="receiveEthDocstoolTip" tooltipText={<FormattedMessage id="udapp.tooltipText8" />}>
               <a href="https://solidity.readthedocs.io/en/v0.6.2/contracts.html#receive-ether-function" target="_blank" rel="noreferrer">
                 <i aria-hidden="true" className="fas fa-info my-2 mr-1"></i>
               </a>
@@ -291,11 +297,11 @@ export function UniversalDappUI(props: UdappProps) {
                 placement="bottom"
                 tooltipClasses="text-nowrap"
                 tooltipId="deployAndRunLLTxCalldataInputTooltip"
-                tooltipText="The Calldata to send to fallback function of the contract."
+                tooltipText={<FormattedMessage id="udapp.tooltipText9" />}
               >
                 <input id="deployAndRunLLTxCalldata" onChange={handleCalldataChange} className="udapp_calldataInput form-control" />
               </CustomTooltip>
-              <CustomTooltip placement="right" tooltipClasses="text-nowrap" tooltipId="deployAndRunLLTxCalldataTooltip" tooltipText="Send data to contract.">
+              <CustomTooltip placement="right" tooltipClasses="text-nowrap" tooltipId="deployAndRunLLTxCalldataTooltip" tooltipText={<FormattedMessage id="udapp.tooltipText10" />}>
                 <button
                   id="deployAndRunLLTxSendTransaction"
                   data-id="pluginManagerSettingsDeployAndRunLLTxSendTransaction"

libs/remix-ui/run-tab/src/lib/components/value.tsx

@@ -51,7 +51,7 @@ export function ValueUI(props: ValueProps) {
         <FormattedMessage id="udapp.value" />
       </label>
       <div className="udapp_gasValueContainer">
-        <CustomTooltip placement={'top-start'} tooltipClasses="text-nowrap" tooltipId="remixValueTooltip" tooltipText="Enter an amount and choose its unit">
+        <CustomTooltip placement={'top-start'} tooltipClasses="text-nowrap" tooltipId="remixValueTooltip" tooltipText={<FormattedMessage id="udapp.tooltipText5" />}>
           <input
             ref={inputValue}
             type="number"

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

@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-use-before-define
 import React, {Fragment, useEffect, useReducer, useState} from 'react'
+import {FormattedMessage} from 'react-intl'
 import {ModalDialog} from '@remix-ui/modal-dialog'
 // eslint-disable-next-line no-unused-vars
 import {Toaster} from '@remix-ui/toaster'
@@ -205,7 +206,7 @@ export function RunTabUI(props: RunTabProps) {
   const gasEstimationPrompt = (msg: string) => {
     return (
       <div>
-        Gas estimation errored with the following message (see below). The transaction execution will likely fail. Do you want to force sending? <br />
+        <FormattedMessage id="udapp.gasEstimationPromptText" /> <br />
         {msg}
       </div>
     )