patch en locale messages for udapp and filePanel

1 year ago · 8293ab458a
parent 7a41cfb2db
commit 8293ab458a
8 changed files with 132 additions and 58 deletions
--- a/apps/remix-ide/src/app/providers/custom-vm-fork-provider.tsx
+++ b/apps/remix-ide/src/app/providers/custom-vm-fork-provider.tsx
@ -1,4 +1,5 @@
 import React, {useRef} from 'react' // eslint-disable-line
+import {FormattedMessage} from 'react-intl'
 import * as packageJson from '../../../../../package.json'
 import {AppModal, ModalTypes} from '@remix-ui/app'
 import {BasicVMProvider} from './vm-provider'
@ -32,13 +33,19 @@ export class CustomForkVMProvider extends BasicVMProvider {
    const body = () => {
      return (
        <div>
-          <span>Please provide information about the custom fork. If the node URL is not provided, the VM will start with an empty state.</span>
+          <span>
+            <FormattedMessage id="udapp.customVmForkProviderText" />
+          </span>
          <div>
-            <label className="mt-3 mb-1">Node URL</label>
+            <label className="mt-3 mb-1">
+              <FormattedMessage id="udapp.nodeUrl" />
+            </label>
            <input data-id="CustomForkNodeUrl" name="nodeUrl" type="text" className="border form-control border-right-0" />
          </div>
          <div>
-            <label className="mt-3 mb-1">Block number (or "latest")</label>
+            <label className="mt-3 mb-1">
+              <FormattedMessage id="udapp.blockNumber" />
+            </label>
            <input
              data-id="CustomForkBlockNumber"
              name="blockNumber"
--- a/apps/remix-ide/src/app/providers/external-http-provider.tsx
+++ b/apps/remix-ide/src/app/providers/external-http-provider.tsx
@ -1,5 +1,6 @@
 import * as packageJson from '../../../../../package.json'
 import React from 'react' // eslint-disable-line
+import {FormattedMessage} from 'react-intl'
 import {AbstractProvider} from './abstract-provider'

 const profile = {
@ -21,29 +22,46 @@ export class ExternalHttpProvider extends AbstractProvider {
    return (
      <>
        <div className="">
-          Note: To use Geth & https://remix.ethereum.org, configure it to allow requests from Remix:(see{' '}
+          <FormattedMessage
+            id="udapp.externalHttpProviderText1"
+            values={{
+              a: (chunks) => (
                <a href="https://geth.ethereum.org/docs/rpc/server" target="_blank" rel="noreferrer">
-            Geth Docs on rpc server
+                  {chunks}
                </a>
-          )<div className="border p-1">geth --http --http.corsdomain https://remix.ethereum.org</div>
+              )
+            }}
+          />
+          <div className="border p-1">geth --http --http.corsdomain https://remix.ethereum.org</div>
          <br />
-          To run Remix & a local Geth test node, use this command: (see{' '}
+          <FormattedMessage
+            id="udapp.externalHttpProviderText2"
+            values={{
+              a: (chunks) => (
                <a href="https://geth.ethereum.org/getting-started/dev-mode" target="_blank" rel="noreferrer">
-            Geth Docs on Dev mode
+                  {chunks}
                </a>
              )
+            }}
+          />
          <div className="border p-1">
            geth --http --http.corsdomain="{window.origin}" --http.api web3,eth,debug,personal,net --vmdebug --datadir {thePath} --dev console
          </div>
          <br />
          <br />
-          <b>WARNING:</b> It is not safe to use the --http.corsdomain flag with a wildcard: <b>--http.corsdomain *</b>
+          <FormattedMessage id="udapp.externalHttpProviderText3" values={{b: (chunks) => <b>{chunks}</b>}} />
          <br />
          <br />
-          For more info:{' '}
+          <FormattedMessage
+            id="udapp.externalHttpProviderText4"
+            values={{
+              a: (chunks) => (
                <a href="https://remix-ide.readthedocs.io/en/latest/run.html#more-about-web3-provider" target="_blank" rel="noreferrer">
-            Remix Docs on External HTTP Provider
+                  {chunks}
                </a>
+              )
+            }}
+          />
          <br />
          <br />
          External HTTP Provider Endpoint
--- a/apps/remix-ide/src/app/providers/foundry-provider.tsx
+++ b/apps/remix-ide/src/app/providers/foundry-provider.tsx
@ -1,5 +1,6 @@
 import * as packageJson from '../../../../../package.json'
 import React from 'react' // eslint-disable-line
+import {FormattedMessage} from 'react-intl'
 import {AbstractProvider} from './abstract-provider'

 const profile = {
@ -20,7 +21,7 @@ export class FoundryProvider extends AbstractProvider {
    return (
      <div>
        {' '}
-        Note: To run Anvil on your system, run:
+        <FormattedMessage id="udapp.foundryProviderText1" />
        <div className="p-1 pl-3">
          <b>curl -L https://foundry.paradigm.xyz | bash</b>
        </div>
@ -28,10 +29,16 @@ export class FoundryProvider extends AbstractProvider {
          <b>anvil</b>
        </div>
        <div className="pt-2 pb-4">
-          For more info, visit:{' '}
+          <FormattedMessage
+            id="udapp.foundryProviderText2"
+            values={{
+              a: (chunks) => (
                <a href="https://github.com/foundry-rs/foundry" target="_blank">
-            Foundry Documentation
+                  {chunks}
                </a>
+              )
+            }}
+          />
        </div>
        <div>Anvil JSON-RPC Endpoint:</div>
      </div>
--- a/apps/remix-ide/src/app/providers/ganache-provider.tsx
+++ b/apps/remix-ide/src/app/providers/ganache-provider.tsx
@ -1,5 +1,6 @@
 import * as packageJson from '../../../../../package.json'
 import React from 'react' // eslint-disable-line
+import {FormattedMessage} from 'react-intl'
 import {AbstractProvider} from './abstract-provider'

 const profile = {
@ -20,7 +21,7 @@ export class GanacheProvider extends AbstractProvider {
    return (
      <div>
        {' '}
-        Note: To run Ganache on your system, run:
+        <FormattedMessage id="udapp.ganacheProviderText1" />
        <div className="p-1 pl-3">
          <b>yarn global add ganache</b>
        </div>
@ -28,10 +29,16 @@ export class GanacheProvider extends AbstractProvider {
          <b>ganache</b>
        </div>
        <div className="pt-2 pb-4">
-          For more info, visit:{' '}
+          <FormattedMessage
+            id="udapp.ganacheProviderText2"
+            values={{
+              a: (chunks) => (
                <a href="https://github.com/trufflesuite/ganache" target="_blank">
-            Ganache Documentation
+                  {chunks}
                </a>
+              )
+            }}
+          />
        </div>
        <div>Ganache JSON-RPC Endpoint:</div>
      </div>
--- a/apps/remix-ide/src/app/providers/hardhat-provider.tsx
+++ b/apps/remix-ide/src/app/providers/hardhat-provider.tsx
@ -1,5 +1,6 @@
 import * as packageJson from '../../../../../package.json'
 import React from 'react' // eslint-disable-line
+import {FormattedMessage} from 'react-intl'
 import {AbstractProvider} from './abstract-provider'

 const profile = {
@ -20,15 +21,21 @@ export class HardhatProvider extends AbstractProvider {
    return (
      <div>
        {' '}
-        Note: To run Hardhat network node on your system, go to hardhat project folder and run command:
+        <FormattedMessage id="udapp.hardhatProviderText1" />
        <div className="p-1 pl-3">
          <b>npx hardhat node</b>
        </div>
        <div className="pt-2 pb-4">
-          For more info, visit:{' '}
+          <FormattedMessage
+            id="udapp.hardhatProviderText2"
+            values={{
+              a: (chunks) => (
                <a href="https://hardhat.org/getting-started/#connecting-a-wallet-or-dapp-to-hardhat-network" target="_blank">
-            Hardhat Documentation
+                  {chunks}
                </a>
+              )
+            }}
+          />
        </div>
        <div>Hardhat JSON-RPC Endpoint:</div>
      </div>
--- a/apps/remix-ide/src/app/tabs/locales/en/filePanel.json
+++ b/apps/remix-ide/src/app/tabs/locales/en/filePanel.json
@ -118,5 +118,6 @@
  "filePanel.movingFileFailed": "Moving File Failed",
  "filePanel.movingFileFailedMsg": "Unexpected error while moving file: {src}",
  "filePanel.movingFolderFailed": "Moving Folder Failed",
-  "filePanel.movingFolderFailedMsg": "Unexpected error while moving folder: {src}"
+  "filePanel.movingFolderFailedMsg": "Unexpected error while moving folder: {src}",
+  "filePanel.workspaceActions": "Workspace actions"
 }
--- a/apps/remix-ide/src/app/tabs/locales/en/udapp.json
+++ b/apps/remix-ide/src/app/tabs/locales/en/udapp.json
@ -128,6 +128,24 @@
  "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?"
+  "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?",
+
+  "udapp._comment_custom-dropdown.tsx": "libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx",
+  "udapp.enterProxyAddress": "Enter Proxy Address",
+
+  "udapp._comment_provider": "apps/remix-ide/src/app/providers",
+  "udapp.customVmForkProviderText": "Please provide information about the custom fork. If the node URL is not provided, the VM will start with an empty state.",
+  "udapp.nodeUrl": "Node URL",
+  "udapp.blockNumber": "Block number (or \"latest\")",
+  "udapp.externalHttpProviderText1": "Note: To use Geth & https://remix.ethereum.org, configure it to allow requests from Remix:(see <a>Geth Docs on rpc server</a>)",
+  "udapp.externalHttpProviderText2": "To run Remix & a local Geth test node, use this command: (see <a>Geth Docs on Dev mode</a>)",
+  "udapp.externalHttpProviderText3": "<b>WARNING:</b> It is not safe to use the --http.corsdomain flag with a wildcard: <b>--http.corsdomain *</b>",
+  "udapp.externalHttpProviderText4": "For more info: <a>Remix Docs on External HTTP Provider</a>",
+  "udapp.foundryProviderText1": "Note: To run Anvil on your system, run:",
+  "udapp.foundryProviderText2": "For more info, visit: <a>Foundry Documentation</a>",
+  "udapp.ganacheProviderText1": "Note: To run Ganache on your system, run:",
+  "udapp.ganacheProviderText2": "For more info, visit: <a>Ganache Documentation</a>",
+  "udapp.hardhatProviderText1": "Note: To run Hardhat network node on your system, go to hardhat project folder and run command:",
+  "udapp.hardhatProviderText2": "For more info, visit: <a>Hardhat Documentation</a>"
 }
--- a/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx
+++ b/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx
@ -1,6 +1,7 @@
 // The forwardRef is important!!

 import React, {Ref} from 'react'
+import {FormattedMessage, useIntl} from 'react-intl'
 import {CustomTooltip} from '@remix-ui/helper'

 // Dropdown needs access to the DOM node in order to position the Menu
@ -66,7 +67,12 @@ export const CustomIconsToggle = React.forwardRef(
      data-id="workspaceMenuDropdown"
    >
      {icon && (
-        <CustomTooltip placement={'top'} tooltipClasses="text-nowrap text-left" tooltipId="remixHamburgerTooltip" tooltipText="Workspace actions">
+        <CustomTooltip
+          placement={'top'}
+          tooltipClasses="text-nowrap text-left"
+          tooltipId="remixHamburgerTooltip"
+          tooltipText={<FormattedMessage id="filePanel.workspaceActions" />}
+        >
          <i style={{fontSize: 'large'}} className={`${icon}`} data-id="workspaceDropdownMenuIcon"></i>
        </CustomTooltip>
      )}
@ -118,7 +124,9 @@ export const ProxyAddressToggle = React.forwardRef(
      onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
    },
    ref: Ref<HTMLDivElement>
-  ) => (
+  ) => {
+    const intl = useIntl()
+    return (
      <div
        ref={ref}
        onClick={(e) => {
@ -135,12 +143,13 @@ export const ProxyAddressToggle = React.forwardRef(
          }}
          className="udapp_input form-control"
          value={address}
-        placeholder="Enter Proxy Address"
+          placeholder={intl.formatMessage({id: 'udapp.enterProxyAddress'})}
          style={{width: '100%'}}
          data-id="ERC1967AddressInput"
        />
      </div>
    )
+  }
 )

 export const ProxyDropdownMenu = React.forwardRef(