adding i18n to contract verification

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

@@ -13,6 +13,7 @@ import { CompilerAbstract } from '@remix-project/remix-solidity'
 import { useLocalStorage } from './hooks/useLocalStorage'
 import { getVerifier } from './Verifiers'
 import { ContractDropdownSelection } from './components/ContractDropdown'
+import { IntlProvider } from 'react-intl'
 
 const plugin = new ContractVerificationPluginClient()
 
@@ -32,11 +33,25 @@ const App = () => {
   const [proxyAddressError, setProxyAddressError] = useState('')
   const [abiEncodedConstructorArgs, setAbiEncodedConstructorArgs] = useState<string>('')
   const [abiEncodingError, setAbiEncodingError] = useState<string>('')
+  const [locale, setLocale] = useState<{ code: string; messages: any }>({
+    code: 'en',
+    messages: {}
+  })
 
   const timer = useRef(null)
 
   useEffect(() => {
     plugin.internalEvents.on('verification_activated', () => {
+
+      // @ts-ignore
+      plugin.call('locale', 'currentLocale').then((locale: any) => {
+        setLocale(locale)
+      })
+
+      // @ts-ignore
+      plugin.on('locale', 'localeChanged', (locale: any) => {
+        setLocale(locale)
+      })
       // Fetch compiler artefacts initially
       plugin.call('compilerArtefacts' as any, 'getAllCompilerAbstracts').then((obj: any) => {
         setCompilationOutput(obj)
@@ -143,11 +158,13 @@ const App = () => {
   }, [submittedContracts])
 
   return (
+    <IntlProvider locale={locale.code} messages={locale.messages}>
       <AppContext.Provider value={{ themeType, setThemeType, clientInstance: plugin, settings, setSettings, chains, compilationOutput, submittedContracts, setSubmittedContracts }}>
         <VerifyFormContext.Provider value={{ selectedChain, setSelectedChain, contractAddress, setContractAddress, contractAddressError, setContractAddressError, selectedContract, setSelectedContract, proxyAddress, setProxyAddress, proxyAddressError, setProxyAddressError, abiEncodedConstructorArgs, setAbiEncodedConstructorArgs, abiEncodingError, setAbiEncodingError }}>
           <DisplayRoutes />
         </VerifyFormContext.Provider>
       </AppContext.Provider>
+    </IntlProvider>
   )
 }
 

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

@@ -2,11 +2,11 @@ import React, { useEffect, useState, useContext } from 'react'
 import { ethers } from 'ethers/'
 
 interface ContractAddressInputProps {
-  label: string
+  label: string | any
   id: string
   contractAddress: string
   setContractAddress: (address: string) => void
-  contractAddressError: string
+  contractAddressError: string | any
   setContractAddressError: (error: string) => void
 }
 

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

@@ -1,13 +1,15 @@
 import React from 'react'
 import { NavLink } from 'react-router-dom'
+import { useIntl, FormattedMessage } from 'react-intl'
 
 interface NavItemProps {
   to: string
   icon: JSX.Element
-  title: string
+  title: string | any
 }
 
 const NavItem: React.FC<NavItemProps> = ({ to, icon, title }) => {
+  const intl = useIntl()
   return (
     <NavLink
       data-id={`${title}Tab`}
@@ -24,11 +26,11 @@ const NavItem: React.FC<NavItemProps> = ({ to, icon, title }) => {
 
 export const NavMenu = () => {
   return (
-    <nav className="d-flex medium flex-row w-100" style={{backgroundColor: 'var(--body-bg)!important'}}>
+    <nav className="d-flex medium flex-row w-100" style={{ backgroundColor: 'var(--body-bg)!important' }}>
-      <NavItem to="/" icon={<i className="fas fa-home"></i>} title="Verify" />
+      <NavItem to="/" icon={<i className="fas fa-home"></i>} title={ <FormattedMessage id="contractverification.verifyNavTitle" /> } />
-      <NavItem to="/receipts" icon={<i className="fas fa-receipt"></i>} title="Receipts" />
+      <NavItem to="/receipts" icon={<i className="fas fa-receipt"></i>} title={ <FormattedMessage id="contractverification.receiptsNavTitle" /> } />
-      <NavItem to="/lookup" icon={<i className="fas fa-search"></i>} title="Lookup" />
+      <NavItem to="/lookup" icon={<i className="fas fa-search"></i>} title={ <FormattedMessage id="contractverification.lookupNavTitle" /> } />
-      <NavItem to="/settings" icon={<i className="fas fa-cog"></i>} title="Settings" />
+      <NavItem to="/settings" icon={<i className="fas fa-cog"></i>} title={ <FormattedMessage id="contractverification.settingsNavTitle" /> } />
     </nav>
   )
 }

apps/contract-verification/src/app/layouts/Default.tsx

@@ -4,8 +4,8 @@ import { NavMenu } from '../components/NavMenu'
 
 interface Props {
   from: string
-  title?: string
+  title?: string | any
-  description?: string
+  description?: string | any
 }
 
 export const DefaultLayout = ({ children, title, description }: PropsWithChildren<Props>) => {

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

@@ -0,0 +1,6 @@
+{
+  "contractverification.verifyNavTitle": "Verify",
+  "contractverification.receiptsNavTitle": "Receipts",
+  "contractverification.lookupNavTitle": "Lookup",
+  "contractverification.settingsNavTitle": "Settings"
+}

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

@@ -0,0 +1,6 @@
+{
+  "contractverification.verifyNavTitle": "Verificar",
+  "contractverification.receiptsNavTitle": "Receipts",
+  "contractverification.lookupNavTitle": "Lookups",
+  "contractverification.settingsNavTitle": "Settings"
+}

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

@@ -0,0 +1,6 @@
+{
+  "contractverification.verifyNavTitle": "Verifiers",
+  "contractverification.receiptsNavTitle": "Receipts",
+  "contractverification.lookupNavTitle": "Lookups",
+  "contractverification.settingsNavTitle": "Settings"
+}

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

@@ -0,0 +1,6 @@
+{
+  "contractverification.verifyNavTitle": "Verifiers",
+  "contractverification.receiptsNavTitle": "Receipts",
+  "contractverification.lookupNavTitle": "Lookups",
+  "contractverification.settingsNavTitle": "Settings"
+}

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

@@ -0,0 +1,6 @@
+{
+  "contractverification.verifyNavTitle": "Verifiers",
+  "contractverification.receiptsNavTitle": "Receipts",
+  "contractverification.lookupNavTitle": "Lookups",
+  "contractverification.settingsNavTitle": "Settings"
+}

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

@@ -0,0 +1,6 @@
+{
+  "contractverification.verifyNavTitle": "Verifiers",
+  "contractverification.receiptsNavTitle": "Receipts",
+  "contractverification.lookupNavTitle": "Lookups",
+  "contractverification.settingsNavTitle": "Settings"
+}

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

@@ -0,0 +1,6 @@
+{
+  "contractverification.verifyNavTitle": "Verifiers",
+  "contractverification.receiptsNavTitle": "Receipts",
+  "contractverification.lookupNavTitle": "Lookups",
+  "contractverification.settingsNavTitle": "Settings"
+}

apps/vyper/src/app/app.tsx

@@ -137,7 +137,7 @@ const App = () => {
             <div className="border-0">
               <div className="">
                 <CustomAccordionToggle eventKey="0">
-                <label style={{fontSize: "1REM"}}>Configurations</label>
+                  <label style={{ fontSize: "1REM" }}>Configurations</label>
                 </CustomAccordionToggle>
               </div>
               <Accordion.Collapse eventKey="0">