patch en locale messages for debugger

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

@@ -7,5 +7,19 @@
   "debugger.debugLocaNodeLabel": "Force using local node",
   "debugger.useGeneratedSources": "Use generated sources",
   "debugger.debugWithGeneratedSources": "When checked, debugger will also step through the compiled .yul file if it exists.",
-  "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"
+  "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",
+  "debugger.forceToUseCurrentLocalNode": "Force the debugger to use the current local node",
+  "debugger.sourceLocationStatus1": "Locating breakpoint, this might take a while...",
+  "debugger.sourceLocationStatus2": "Source location not available, neither in Sourcify nor in Etherscan. Please make sure the Etherscan api key is provided in the settings.",
+  "debugger.sourcifyDocs": "Sourcify docs",
+  "debugger.noDataAvailable": "No data available",
+  "debugger.loadMore": "Load more",
+  "debugger.copy": "Copy",
+  "debugger.stepOverBack": "Step over back",
+  "debugger.stepBack": "Step back",
+  "debugger.stepInto": "Step into",
+  "debugger.stepOverForward": "Step over forward",
+  "debugger.jumpPreviousBreakpoint": "Jump to the previous breakpoint",
+  "debugger.jumpOut": "Jump out",
+  "debugger.jumpNextBreakpoint": "Jump to the next breakpoint"
 }

libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx

@@ -1,5 +1,6 @@
 import {CustomTooltip} from '@remix-ui/helper'
 import React, {useState, useEffect} from 'react' // eslint-disable-line
+import {useIntl} from 'react-intl'
 import './button-navigator.css'
 
 export const ButtonNavigation = ({
@@ -15,6 +16,7 @@ export const ButtonNavigation = ({
   stepState,
   jumpOutDisabled
 }) => {
+  const intl = useIntl()
   const [state, setState] = useState({
     intoBackDisabled: true,
     overBackDisabled: true,
@@ -90,7 +92,7 @@ export const ButtonNavigation = ({
       ),
       placement: 'top-start',
       tagId: 'overbackTooltip',
-      tooltipMsg: 'Step over back'
+      tooltipMsg: intl.formatMessage({id: 'debugger.stepOverBack'})
     },
     stepBackJSX: {
       markup: (
@@ -118,7 +120,7 @@ export const ButtonNavigation = ({
       ),
       placement: 'top-start',
       tagId: 'intobackTooltip',
-      tooltipMsg: 'Step back'
+      tooltipMsg: intl.formatMessage({id: 'debugger.stepBack'})
     },
 
     stepIntoJSX: {
@@ -147,7 +149,7 @@ export const ButtonNavigation = ({
       ),
       placement: 'top-start',
       tagId: 'intoforwardTooltip',
-      tooltipMsg: 'Step into'
+      tooltipMsg: intl.formatMessage({id: 'debugger.stepInto'})
     },
     stepOverForwardJSX: {
       markup: (
@@ -174,7 +176,7 @@ export const ButtonNavigation = ({
       ),
       placement: 'top-end',
       tagId: 'overbackTooltip',
-      tooltipMsg: 'Step over forward'
+      tooltipMsg: intl.formatMessage({id: 'debugger.stepOverForward'})
     }
   }
   const jumpMarkupStructure = {
@@ -208,7 +210,7 @@ export const ButtonNavigation = ({
       ),
       placement: 'bottom-start',
       tagId: 'jumppreviousbreakpointTooltip',
-      tooltipMsg: 'Jump to the previous breakpoint'
+      tooltipMsg: intl.formatMessage({id: 'debugger.jumpPreviousBreakpoint'})
     },
     jumpOutJSX: {
       markup: (
@@ -240,7 +242,7 @@ export const ButtonNavigation = ({
       ),
       placement: 'bottom-end',
       tagId: 'jumpoutTooltip',
-      tooltipMsg: 'Jump out'
+      tooltipMsg: intl.formatMessage({id: 'debugger.jumpOut'})
     },
     jumpNextBreakpointJSX: {
       markup: (
@@ -268,7 +270,7 @@ export const ButtonNavigation = ({
       ),
       placement: 'bottom-end',
       tagId: 'jumpnextbreakpointTooltip',
-      tooltipMsg: 'Jump to the next breakpoint'
+      tooltipMsg: intl.formatMessage({id: 'debugger.jumpNextBreakpoint'})
     }
   }
 

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

@@ -1,5 +1,5 @@
 import React, {useState, useEffect, useRef} from 'react' // eslint-disable-line
-import {FormattedMessage} from 'react-intl'
+import {FormattedMessage, useIntl} 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
@@ -13,6 +13,7 @@ import './debugger-ui.css'
 const _paq = ((window as any)._paq = (window as any)._paq || [])
 
 export const DebuggerUI = (props: DebuggerUIProps) => {
+  const intl = useIntl()
   const debuggerModule = props.debuggerAPI
   const [state, setState] = useState({
     isActive: false,
@@ -128,7 +129,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       setState((prevState) => {
         return {
           ...prevState,
-          sourceLocationStatus: 'Locating breakpoint, this might take a while...'
+          sourceLocationStatus: intl.formatMessage({id: 'debugger.sourceLocationStatus1'})
         }
       })
     })
@@ -145,7 +146,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
         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.'
+            sourceLocationStatus: intl.formatMessage({id: 'debugger.sourceLocationStatus2'})
           }
         })
         return
@@ -408,7 +409,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
           </div>
           {state.isLocalNodeUsed && (
             <div className="mb-2 debuggerConfig custom-control custom-checkbox">
-              <CustomTooltip tooltipId="debuggerGenSourceInput" tooltipText="Force the debugger to use the current local node" placement="right">
+              <CustomTooltip tooltipId="debuggerGenSourceInput" tooltipText={<FormattedMessage id="debugger.forceToUseCurrentLocalNode" />} placement="right">
                 <input
                   className="custom-control-input"
                   id="debugWithLocalNodeInput"
@@ -448,7 +449,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
             <span>
               <FormattedMessage id="debugger.introduction" />:{' '}
               <a href="https://docs.sourcify.dev/docs/chains/" target="__blank">
-                Sourcify docs
+                <FormattedMessage id="debugger.sourcifyDocs" />
               </a>{' '}
               &{' '}
               <a href="https://etherscan.io/contractsVerified" target="__blank">

libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx

@@ -1,4 +1,5 @@
 import React, {useState, useRef, useEffect, useReducer} from 'react' // eslint-disable-line
+import {FormattedMessage} from 'react-intl'
 import {initialState, reducer} from '../../reducers/assembly-items'
 import './styles/assembly-items.css'
 
@@ -145,7 +146,11 @@ export const AssemblyItems = ({registerEvent}) => {
     <div className="h-100 border rounded px-1 mt-1 bg-light">
       <div className="dropdownpanel">
         <div className="dropdowncontent pb-2">
-          {assemblyItems.display.length == 0 && <div>No data available</div>}
+          {assemblyItems.display.length == 0 && (
+            <div>
+              <FormattedMessage id="debugger.noDataAvailable" />
+            </div>
+          )}
           <div className="pl-2 my-1 small instructions" data-id="asmitems" id="asmitems" ref={asmItemsRef}>
             {assemblyItems.display.map((item, i) => {
               return (

libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx

@@ -1,4 +1,5 @@
 import React, {useState, useEffect, useReducer} from 'react' // eslint-disable-line
+import {useIntl} from 'react-intl'
 import {TreeView, TreeViewItem} from '@remix-ui/tree-view' // eslint-disable-line
 import {DropdownPanelProps, ExtractData, ExtractFunc} from '../../types' // eslint-disable-line
 import {CopyToClipboard} from '@remix-ui/clipboard' // eslint-disable-line
@@ -6,6 +7,7 @@ import {initialState, reducer} from '../../reducers/calldata'
 import './styles/dropdown-panel.css'
 
 export const DropdownPanel = (props: DropdownPanelProps) => {
+  const intl = useIntl()
   const [calldataObj, dispatch] = useReducer(reducer, initialState)
   const {
     dropdownName,
@@ -84,7 +86,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
     header: '',
     toggleDropdown: true,
     message: {
-      innerText: 'No data available.',
+      innerText: intl.formatMessage({id: 'debugger.noDataAvailable'}),
       display: 'block'
     },
     dropdownContent: {
@@ -189,7 +191,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
         // replace 0xNaN with 0x0
         copiableContent: JSON.stringify(calldata, null, '\t').replace(/0xNaN/g, '0x0'),
         message: {
-          innerText: isEmpty ? 'No data available' : '',
+          innerText: isEmpty ? intl.formatMessage({id: 'debugger.noDataAvailable'}) : '',
           display: isEmpty ? 'block' : 'none'
         },
         updating: false,
@@ -221,7 +223,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
                 id={'treeViewLoadMore'}
                 data-id={'treeViewLoadMore'}
                 className="cursor_pointer"
-                label="Load more"
+                label={intl.formatMessage({id: 'debugger.loadMore'})}
                 onClick={() => {
                   triggerEvent(loadMoreEvent, [data.cursor])
                 }}
@@ -255,7 +257,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
         <span className="nameDetail" onClick={handleToggle}>
           {header}
         </span>
-        <CopyToClipboard content={state.copiableContent} data-id={`dropdownPanelCopyToClipboard${uniquePanelName}`} />
+        <CopyToClipboard tip={intl.formatMessage({id: 'debugger.copy'})} content={state.copiableContent} data-id={`dropdownPanelCopyToClipboard${uniquePanelName}`} />
       </div>
       <div className="dropdownpanel" style={{display: state.toggleDropdown ? 'block' : 'none'}}>
         <i className="refresh fas fa-sync" style={{display: state.updating ? 'inline-block' : 'none'}} aria-hidden="true"></i>