added translations in some missed elements

Author: joeizang

apps/contract-verification/src/app/components/ConfigInput.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { CustomTooltip } from '@remix-ui/helper'
-import { FormattedMessage } from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 
 interface ConfigInputProps {
   label: string
@@ -14,6 +14,7 @@ interface ConfigInputProps {
 export const ConfigInput: React.FC<ConfigInputProps> = ({ label, id, secret, initialValue, saveResult }) => {
   const [value, setValue] = useState(initialValue)
   const [enabled, setEnabled] = useState(false)
+  const intl = useIntl()
 
   // Reset state when initialValue changes
   useEffect(() => {
@@ -43,10 +44,7 @@ export const ConfigInput: React.FC<ConfigInputProps> = ({ label, id, secret, ini
           type={secret ? 'password' : 'text'}
           className={`form-control small w-100 ${!enabled ? 'bg-transparent pl-0 border-0' : ''}`}
           id={id}
-          placeholder={`${<FormattedMessage id="contract-verification.configInputPlaceholder" defaultMessage="Enter API Key"
-            values={{
-              label: label
-            }} />}`}
+          placeholder={intl.formatMessage({ id: "contract-verification.configInputPlaceholder", defaultMessage: "Enter API Key" }, { label })}
           value={value}
           onChange={(e) => setValue(e.target.value)}
           disabled={!enabled}

apps/contract-verification/src/app/components/ConstructorArguments.tsx

@@ -3,6 +3,7 @@ import { ethers } from 'ethers'
 
 import { AppContext } from '../AppContext'
 import { ContractDropdownSelection } from './ContractDropdown'
+import { FormattedMessage } from 'react-intl'
 
 interface ConstructorArgumentsProps {
   abiEncodedConstructorArgs: string
@@ -102,7 +103,10 @@ export const ConstructorArguments: React.FC<ConstructorArgumentsProps> = ({ abiE
       <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
         <input className="form-check-input custom-control-input" type="checkbox" id="toggleRawInputSwitch" checked={toggleRawInput} onChange={() => setToggleRawInput(!toggleRawInput)} />
         <label className="m-0 form-check-label custom-control-label" style={{ paddingTop: '2px' }} htmlFor="toggleRawInputSwitch">
-          Enter raw ABI-encoded constructor arguments
+          <FormattedMessage
+            id="contract-verification.constructorArgumentsToggleRawInput"
+            defaultMessage="Enter raw ABI-encoded constructor arguments"
+          />
         </label>
       </div>
       {toggleRawInput ? (
@@ -122,7 +126,10 @@ export const ConstructorArguments: React.FC<ConstructorArgumentsProps> = ({ abiE
           {abiEncodedConstructorArgs && (
             <div>
               <label className="form-check-label" htmlFor="rawAbiEncodingResult">
-                ABI-encoded constructor arguments:
+                <FormattedMessage
+                  id="contract-verification.constructorArgumentsRawAbiEncodingResult"
+                  defaultMessage="ABI-encoded constructor arguments"
+                /> :
               </label>
               <textarea className="form-control" rows={5} disabled value={abiEncodedConstructorArgs} id="rawAbiEncodingResult" style={{ opacity: 0.5 }} />
             </div>

apps/contract-verification/src/app/components/ContractDropdown.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useContext, Fragment } from 'react'
 import './ContractDropdown.css'
 import { AppContext } from '../AppContext'
+import { FormattedMessage } from 'react-intl'
 
 export interface ContractDropdownSelection {
   triggerFilePath: string
@@ -42,7 +43,7 @@ export const ContractDropdown: React.FC<ContractDropdownProps> = ({ label, id, s
 
   return (
     <div className="form-group">
-      <label htmlFor={id}>{label}</label>
+      <label htmlFor={id}><FormattedMessage id="contract-verification.contractDropdownLabel" defaultMessage={label} values={{ label }} /></label>
       <select value={selectedContract ? JSON.stringify(selectedContract) : ''}
         className={`form-control custom-select pr-4 ${!hasContracts ? 'disabled-cursor text-warning' : ''}`}
         id={id}

apps/contract-verification/src/app/components/SearchableChainDropdown.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, useMemo } from 'react'
 import Fuse from 'fuse.js'
 import type { Chain } from '../types'
 import { AppContext } from '../AppContext'
+import { useIntl } from 'react-intl'
 
 function getChainDescriptor(chain: Chain): string {
   if (!chain) return ''
@@ -18,6 +19,7 @@ interface DropdownProps {
 export const SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, setSelectedChain, selectedChain }) => {
   const { chains } = React.useContext(AppContext)
   const ethereumChainIds = [1, 11155111, 17000]
+  const intl = useIntl()
 
   // Add Ethereum chains to the head of the chains list. Sort the rest alphabetically
   const dropdownChains = useMemo(
@@ -90,7 +92,7 @@ export const SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, se
       {' '}
       {/* Add ref here */}
       <label htmlFor={id}>{label}</label>
-      <input type="text" value={searchTerm} onChange={handleInputChange} onClick={openDropdown} data-id="chainDropdownbox" placeholder="Select a chain" className="form-control" />
+      <input type="text" value={searchTerm} onChange={handleInputChange} onClick={openDropdown} data-id="chainDropdownbox" placeholder={intl.formatMessage({ id: "contract-verification.searchableChainDropdown", defaultMessage: "Select a chain" })} className="form-control" />
       <ul className="dropdown-menu show w-100 bg-light" style={{ maxHeight: '400px', overflowY: 'auto', display: isOpen ? 'initial' : 'none' }}>
         {filteredOptions.map((chain) => (
           <li key={chain.chainId} onClick={() => handleOptionClick(chain)} data-id={chain.chainId} className={`dropdown-item text-dark ${selectedChain?.chainId === chain.chainId ? 'active' : ''}`} style={{ cursor: 'pointer', whiteSpace: 'normal' }}>

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

@@ -20,7 +20,10 @@
   "contract-verification.settingsDefaultLayout.description": "Customize settings for each verification service and chain",
   "contract-verification.configInputPlaceholderText": "Add {label}",
   "contract-verification.configInputSaveButton": "Save",
-  "contract-verification.configInputCancelButton": "Cancel"
+  "contract-verification.configInputCancelButton": "Cancel",
+  "contract-verification.constructorArgumentsToggleRawInput": "Enter raw ABI-encoded constructor arguments",
+  "contract-verification.constructorArgumentsRawAbiEncodingResult": "ABI-encoded constructor arguments",
+  "contract-verification.contractDropdownLabel": "{label}"
 }