Modify .prettierrc and prettify `contract-verification-plugin` folder

.prettierrc.json

@@ -1,9 +1,7 @@
 {
   "tabWidth": 2,
   "printWidth": 500,
-  "bracketSpacing": false,
   "useTabs": false,
   "semi": false,
-  "singleQuote": true,
+  "singleQuote": true
-  "bracketSpacing": false
 }

apps/contract-verification/.babelrc

@@ -1,9 +1,5 @@
 {
-  "presets": ["@babel/preset-env", ["@babel/preset-react", 
+  "presets": ["@babel/preset-env", ["@babel/preset-react", { "runtime": "automatic" }]],
-    {"runtime": "automatic"}
-  ]],
   "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime", "@babel/plugin-proposal-nullish-coalescing-operator"],
-  "ignore": [
+  "ignore": ["**/node_modules/**"]
-    "**/node_modules/**"
+}
-  ]
-}

apps/contract-verification/.eslintrc

@@ -1,3 +1,3 @@
 {
-  "extends": "../../.eslintrc.json",
+  "extends": "../../.eslintrc.json"
-}
+}

apps/contract-verification/src/app/App.css

@@ -4,4 +4,4 @@ body {
 
 #root {
   padding: 8px 14px;
-}
+}

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

@@ -1,15 +1,15 @@
 import React from 'react'
-import {ThemeType} from './types'
+import { ThemeType } from './types'
-import {Chain, SubmittedContracts} from './types/VerificationTypes'
+import { Chain, SubmittedContracts } from './types/VerificationTypes'
-import {CompilerAbstract} from '@remix-project/remix-solidity'
+import { CompilerAbstract } from '@remix-project/remix-solidity'
-import {AbstractVerifier} from './Verifiers/AbstractVerifier'
+import { AbstractVerifier } from './Verifiers/AbstractVerifier'
 
 // Define the type for the context
 type AppContextType = {
   themeType: ThemeType
   setThemeType: (themeType: ThemeType) => void
   chains: Chain[]
-  compilationOutput: {[key: string]: CompilerAbstract} | undefined
+  compilationOutput: { [key: string]: CompilerAbstract } | undefined
   selectedContractFileAndName: string | undefined
   setSelectedContractFileAndName: React.Dispatch<React.SetStateAction<string>>
   targetFileName: string | undefined

apps/contract-verification/src/app/ContractVerificationPluginClient.ts

@@ -1,5 +1,5 @@
-import {PluginClient} from '@remixproject/plugin'
+import { PluginClient } from '@remixproject/plugin'
-import {createClient} from '@remixproject/plugin-webview'
+import { createClient } from '@remixproject/plugin-webview'
 import EventManager from 'events'
 
 export class ContractVerificationPluginClient extends PluginClient {

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

@@ -1,8 +1,8 @@
-import React, {useState, useEffect} from 'react'
+import React, { useState, useEffect } from 'react'
-import {EtherscanVerifier} from '../Verifiers/EtherscanVerifier'
+import { EtherscanVerifier } from '../Verifiers/EtherscanVerifier'
-import {ReceiptProps} from './props'
+import { ReceiptProps } from './props'
 
-export const EtherscanReceipt: React.FC<ReceiptProps> = ({verifyPromise, address, chainId, verifier}) => {
+export const EtherscanReceipt: React.FC<ReceiptProps> = ({ verifyPromise, address, chainId, verifier }) => {
   const [status, setStatus] = useState<string | null>(null)
   const [submissionDate] = useState(new Date())
 

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

@@ -1,10 +1,10 @@
-import React, {useState, useEffect} from 'react'
+import React, { useState, useEffect } from 'react'
-import {SourcifyVerifier} from '../Verifiers/SourcifyVerifier'
+import { SourcifyVerifier } from '../Verifiers/SourcifyVerifier'
-import {SourcifyVerificationStatus} from '../types/VerificationTypes'
+import { SourcifyVerificationStatus } from '../types/VerificationTypes'
-import {ReceiptProps} from './props'
+import { ReceiptProps } from './props'
 
 // A receipt is something to be rendered
-export const SourcifyReceipt: React.FC<ReceiptProps> = ({verifyPromise, address, chainId, verifier}) => {
+export const SourcifyReceipt: React.FC<ReceiptProps> = ({ verifyPromise, address, chainId, verifier }) => {
   const [status, setStatus] = useState<SourcifyVerificationStatus | null>(null)
   const [submissionDate] = useState(new Date()) // This will be set once and not change
 

apps/contract-verification/src/app/Receipts/props.ts

@@ -1,5 +1,5 @@
-import {EtherscanVerifier} from '../Verifiers/EtherscanVerifier'
+import { EtherscanVerifier } from '../Verifiers/EtherscanVerifier'
-import {SourcifyVerifier} from '../Verifiers/SourcifyVerifier'
+import { SourcifyVerifier } from '../Verifiers/SourcifyVerifier'
 
 export interface ReceiptProps {
   verifyPromise: Promise<any>

apps/contract-verification/src/app/Verifiers/AbstractVerifier.ts

@@ -1,6 +1,6 @@
-import {CompilerAbstract} from '@remix-project/remix-solidity'
+import { CompilerAbstract } from '@remix-project/remix-solidity'
-import {SourcifyReceipt} from '../Receipts/SourcifyReceipt'
+import { SourcifyReceipt } from '../Receipts/SourcifyReceipt'
-import {EtherscanReceipt} from '../Receipts/EtherscanReceipt'
+import { EtherscanReceipt } from '../Receipts/EtherscanReceipt'
 
 export abstract class AbstractVerifier {
   name: string

apps/contract-verification/src/app/Verifiers/EtherscanVerifier.ts

@@ -1,7 +1,7 @@
-import {CompilerAbstract} from '@remix-project/remix-solidity'
+import { CompilerAbstract } from '@remix-project/remix-solidity'
-import {AbstractVerifier} from './AbstractVerifier'
+import { AbstractVerifier } from './AbstractVerifier'
-import {EtherscanReceipt} from '../Receipts/EtherscanReceipt'
+import { EtherscanReceipt } from '../Receipts/EtherscanReceipt'
-import {EtherscanRequest, EtherscanResponse} from '../types/VerificationTypes'
+import { EtherscanRequest, EtherscanResponse } from '../types/VerificationTypes'
 
 export class EtherscanVerifier extends AbstractVerifier {
   apiKey: string

apps/contract-verification/src/app/Verifiers/SourcifyVerifier.ts

@@ -1,7 +1,7 @@
-import {CompilerAbstract, SourcesCode} from '@remix-project/remix-solidity'
+import { CompilerAbstract, SourcesCode } from '@remix-project/remix-solidity'
-import {AbstractVerifier} from './AbstractVerifier'
+import { AbstractVerifier } from './AbstractVerifier'
-import {SourcifyReceipt} from '../Receipts/SourcifyReceipt'
+import { SourcifyReceipt } from '../Receipts/SourcifyReceipt'
-import {SourcifyVerificationError, SourcifyVerificationResponse} from '../types/VerificationTypes'
+import { SourcifyVerificationError, SourcifyVerificationResponse } from '../types/VerificationTypes'
 
 export class SourcifyVerifier extends AbstractVerifier {
   constructor(apiUrl: string, name: string = 'Sourcify') {
@@ -21,7 +21,7 @@ export class SourcifyVerifier extends AbstractVerifier {
 
     // from { "filename.sol": {content: "contract MyContract { ... }"} }
     // to { "filename.sol": "contract MyContract { ... }" }
-    const formattedSources = Object.entries(sources).reduce((acc, [fileName, {content}]) => {
+    const formattedSources = Object.entries(sources).reduce((acc, [fileName, { content }]) => {
       acc[fileName] = content
       return acc
     }, {})

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

@@ -1,17 +1,17 @@
-import React, {useState, useEffect, useRef} from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 
-import {ContractVerificationPluginClient} from './ContractVerificationPluginClient'
+import { ContractVerificationPluginClient } from './ContractVerificationPluginClient'
 
-import {AppContext} from './AppContext'
+import { AppContext } from './AppContext'
 import DisplayRoutes from './routes'
-import {ThemeType} from './types'
+import { ThemeType } from './types'
 
 import './App.css'
-import {Chain, SubmittedContracts} from './types/VerificationTypes'
+import { Chain, SubmittedContracts } from './types/VerificationTypes'
-import {CompilerAbstract} from '@remix-project/remix-solidity'
+import { CompilerAbstract } from '@remix-project/remix-solidity'
-import {SourcifyVerifier} from './Verifiers/SourcifyVerifier'
+import { SourcifyVerifier } from './Verifiers/SourcifyVerifier'
-import {EtherscanVerifier} from './Verifiers/EtherscanVerifier'
+import { EtherscanVerifier } from './Verifiers/EtherscanVerifier'
-import {AbstractVerifier} from './Verifiers/AbstractVerifier'
+import { AbstractVerifier } from './Verifiers/AbstractVerifier'
 
 const plugin = new ContractVerificationPluginClient()
 
@@ -20,7 +20,7 @@ const App = () => {
   // TODO: Types for chains
   const [chains, setChains] = useState<Chain[]>([]) // State to hold the chains data
   const [targetFileName, setTargetFileName] = useState('')
-  const [compilationOutput, setCompilationOutput] = useState<{[key: string]: CompilerAbstract} | undefined>()
+  const [compilationOutput, setCompilationOutput] = useState<{ [key: string]: CompilerAbstract } | undefined>()
   // Contract file and name in format contracts/Storage.sol:contracts/Owner.sol:Owner
   // TODO: What happens if contract or filepath contains ":"" ?
   const [selectedContractFileAndName, setSelectedContractFileAndName] = useState<string | undefined>()
@@ -46,10 +46,10 @@ const App = () => {
     })
 
     // Subscribe to compilations
-    plugin.on('compilerArtefacts' as any, 'compilationSaved', (compilerAbstract: {[key: string]: CompilerAbstract}) => {
+    plugin.on('compilerArtefacts' as any, 'compilationSaved', (compilerAbstract: { [key: string]: CompilerAbstract }) => {
       console.log('compilerArtefacts.compilationSaved')
       console.log(compilerAbstract)
-      setCompilationOutput((prev) => ({...(prev || {}), ...compilerAbstract}))
+      setCompilationOutput((prev) => ({ ...(prev || {}), ...compilerAbstract }))
     })
 
     // TODO: Is there a way to get all compilations from the `build-info` files without having to compile again?
@@ -67,7 +67,7 @@ const App = () => {
   }, [])
 
   return (
-    <AppContext.Provider value={{themeType, setThemeType, chains, compilationOutput, selectedContractFileAndName, setSelectedContractFileAndName, targetFileName, verifiers, setVerifiers, submittedContracts, setSubmittedContracts}}>
+    <AppContext.Provider value={{ themeType, setThemeType, chains, compilationOutput, selectedContractFileAndName, setSelectedContractFileAndName, targetFileName, verifiers, setVerifiers, submittedContracts, setSubmittedContracts }}>
       <DisplayRoutes />
     </AppContext.Provider>
   )

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

@@ -1,12 +1,12 @@
 import React from 'react'
-import {SubmittedContract} from '../types/VerificationTypes'
+import { SubmittedContract } from '../types/VerificationTypes'
 
 interface AccordionReceiptProps {
   contract: SubmittedContract
   index: number
 }
 
-export const AccordionReceipt: React.FC<AccordionReceiptProps> = ({contract, index}) => {
+export const AccordionReceipt: React.FC<AccordionReceiptProps> = ({ contract, index }) => {
   const [expanded, setExpanded] = React.useState(false)
 
   const toggleAccordion = () => {

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

@@ -1,7 +1,7 @@
-import React, {useEffect} from 'react'
+import React, { useEffect } from 'react'
-import {ethers} from 'ethers'
+import { ethers } from 'ethers'
 
-import {AppContext} from '../AppContext'
+import { AppContext } from '../AppContext'
 
 const abiCoder = new ethers.utils.AbiCoder()
 
@@ -10,8 +10,8 @@ interface ConstructorArgumentsProps {
   setAbiEncodedConstructorArgs: React.Dispatch<React.SetStateAction<string>>
 }
 
-export const ConstructorArguments: React.FC<ConstructorArgumentsProps> = ({abiEncodedConstructorArgs, setAbiEncodedConstructorArgs}) => {
+export const ConstructorArguments: React.FC<ConstructorArgumentsProps> = ({ abiEncodedConstructorArgs, setAbiEncodedConstructorArgs }) => {
-  const {selectedContractFileAndName, compilationOutput} = React.useContext(AppContext)
+  const { selectedContractFileAndName, compilationOutput } = React.useContext(AppContext)
   const [constructorArgsValues, setConstructorArgsValues] = React.useState<string[]>([])
   const [abiEncodingError, setAbiEncodingError] = React.useState<string | null>('')
   const [toggleRawInput, setToggleRawInput] = React.useState<boolean>(false)
@@ -101,7 +101,7 @@ export const ConstructorArguments: React.FC<ConstructorArgumentsProps> = ({abiEn
               <label className="form-check-label" htmlFor="rawAbiEncodingResult">
                 ABI Encoded contructor arguments:
               </label>
-              <textarea className="form-control" rows={5} disabled value={abiEncodedConstructorArgs} id="rawAbiEncodingResult" style={{opacity: 0.5}} />
+              <textarea className="form-control" rows={5} disabled value={abiEncodedConstructorArgs} id="rawAbiEncodingResult" style={{ opacity: 0.5 }} />
             </div>
           )}
           {abiEncodingError && <div className="text-danger small">{abiEncodingError}</div>}

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

@@ -1,6 +1,6 @@
-import React, {useEffect, useState, useContext} from 'react'
+import React, { useEffect, useState, useContext } from 'react'
 import './ContractDropdown.css'
-import {AppContext} from '../AppContext'
+import { AppContext } from '../AppContext'
 interface ContractDropdownItem {
   value: string
   name: string
@@ -12,8 +12,8 @@ interface ContractDropdownProps {
 }
 
 // Chooses one contract from the compilation output.
-export const ContractDropdown: React.FC<ContractDropdownProps> = ({label, id}) => {
+export const ContractDropdown: React.FC<ContractDropdownProps> = ({ label, id }) => {
-  const {setSelectedContractFileAndName, compilationOutput} = useContext(AppContext)
+  const { setSelectedContractFileAndName, compilationOutput } = useContext(AppContext)
 
   useEffect(() => {
     console.log('CompiilationOutput chainged', compilationOutput)
@@ -47,7 +47,7 @@ export const ContractDropdown: React.FC<ContractDropdownProps> = ({label, id}) =
             <optgroup key={compilationTriggerFileName} label={`[Compilation Trigger File]: ${compilationTriggerFileName}`}>
               {Object.keys(compilationOutput[compilationTriggerFileName].data.contracts).map((fileName2) => (
                 <>
-                  <option disabled style={{fontWeight: 'bold'}}>
+                  <option disabled style={{ fontWeight: 'bold' }}>
                     [File]: {fileName2}
                   </option>
                   {Object.keys(compilationOutput[compilationTriggerFileName].data.contracts[fileName2]).map((contractName) => (

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

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import {NavLink} from 'react-router-dom'
+import { NavLink } from 'react-router-dom'
 
 interface NavItemProps {
   to: string
@@ -8,12 +8,12 @@ interface NavItemProps {
   title: string
 }
 
-const NavItem = ({to, icon, title}: NavItemProps) => {
+const NavItem = ({ to, icon, title }: NavItemProps) => {
   return (
     <NavLink
       // data-id="home"
       to={to}
-      className={({isActive}) => 'p-2 ' + (isActive ? 'bg-primary text-white' : 'bg-secondary')}
+      className={({ isActive }) => 'p-2 ' + (isActive ? 'bg-primary text-white' : 'bg-secondary')}
       // state={from}
     >
       <div className="d-flex flex-column align-items-center justify-content-center">

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

@@ -1,6 +1,6 @@
-import React, {useState, useEffect, useRef} from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import Fuse from 'fuse.js'
-import {Chain} from '../types/VerificationTypes'
+import { Chain } from '../types/VerificationTypes'
 
 interface DropdownProps {
   label: string
@@ -10,7 +10,7 @@ interface DropdownProps {
   selectedChain: Chain
 }
 
-export const SearchableDropdown: React.FC<DropdownProps> = ({chains, label, id, setSelectedChain, selectedChain}) => {
+export const SearchableDropdown: React.FC<DropdownProps> = ({ chains, label, id, setSelectedChain, selectedChain }) => {
   const [searchTerm, setSearchTerm] = useState('')
   const [isOpen, setIsOpen] = useState(false)
   const [filteredOptions, setFilteredOptions] = useState<Chain[]>(chains)
@@ -26,7 +26,7 @@ export const SearchableDropdown: React.FC<DropdownProps> = ({chains, label, id,
       setFilteredOptions(chains)
     } else {
       const result = fuse.search(searchTerm)
-      setFilteredOptions(result.map(({item}) => item))
+      setFilteredOptions(result.map(({ item }) => item))
     }
   }, [searchTerm, chains])
 
@@ -75,9 +75,9 @@ export const SearchableDropdown: React.FC<DropdownProps> = ({chains, label, id,
       <label htmlFor={id}>{label}</label>
       <input type="text" value={searchTerm} onChange={handleInputChange} onClick={openDropdown} placeholder="Select a chain" className="form-control" />
       {isOpen && (
-        <ul className="dropdown-menu show w-100" style={{maxHeight: '400px', overflowY: 'auto'}}>
+        <ul className="dropdown-menu show w-100" style={{ maxHeight: '400px', overflowY: 'auto' }}>
           {filteredOptions.map((chain) => (
-            <li key={chain.chainId} onClick={() => handleOptionClick(chain)} className={`dropdown-item ${selectedChain?.chainId === chain.chainId ? 'active' : ''}`} style={{cursor: 'pointer', whiteSpace: 'normal'}}>
+            <li key={chain.chainId} onClick={() => handleOptionClick(chain)} className={`dropdown-item ${selectedChain?.chainId === chain.chainId ? 'active' : ''}`} style={{ cursor: 'pointer', whiteSpace: 'normal' }}>
               {chain.title || chain.name} ({chain.chainId})
             </li>
           ))}

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

@@ -1,3 +1,3 @@
-export {NavMenu} from './NavMenu'
+export { NavMenu } from './NavMenu'
-export {ContractDropdown} from './ContractDropdown'
+export { ContractDropdown } from './ContractDropdown'
-export {SearchableDropdown} from './SearchableDropdown'
+export { SearchableDropdown } from './SearchableDropdown'

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

@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import { useState } from 'react'
 
 export function useLocalStorage(key: string, initialValue: any) {
   // State to store our value

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

@@ -1,13 +1,13 @@
-import React, {PropsWithChildren} from 'react'
+import React, { PropsWithChildren } from 'react'
 
-import {NavMenu} from '../components/NavMenu'
+import { NavMenu } from '../components/NavMenu'
 
 interface Props {
   from: string
   title?: string
 }
 
-export const DefaultLayout = ({children}: PropsWithChildren<Props>) => {
+export const DefaultLayout = ({ children }: PropsWithChildren<Props>) => {
   return (
     <div>
       <NavMenu />

apps/contract-verification/src/app/layouts/index.ts

@@ -1 +1 @@
-export { DefaultLayout } from "./Default"
+export { DefaultLayout } from './Default'

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

@@ -1,9 +1,9 @@
 import React from 'react'
-import {HashRouter as Router, Route, Routes} from 'react-router-dom'
+import { HashRouter as Router, Route, Routes } from 'react-router-dom'
 
-import {VerifyView} from './views'
+import { VerifyView } from './views'
-import {DefaultLayout} from './layouts'
+import { DefaultLayout } from './layouts'
-import {ReceiptsView} from './views/ReceiptsView'
+import { ReceiptsView } from './views/ReceiptsView'
 
 const DisplayRoutes = () => (
   <Router>

apps/contract-verification/src/app/types/ThemeType.ts

@@ -1 +1 @@
-export type ThemeType = "dark" | "light"
+export type ThemeType = 'dark' | 'light'

apps/contract-verification/src/app/types/VerificationTypes.ts

@@ -1,7 +1,7 @@
-import {CompilerAbstract} from '@remix-project/remix-solidity'
+import { CompilerAbstract } from '@remix-project/remix-solidity'
-import {AbstractVerifier} from '../Verifiers/AbstractVerifier'
+import { AbstractVerifier } from '../Verifiers/AbstractVerifier'
-import {SourcifyVerifier} from '../Verifiers/SourcifyVerifier'
+import { SourcifyVerifier } from '../Verifiers/SourcifyVerifier'
-import {EtherscanVerifier} from '../Verifiers/EtherscanVerifier'
+import { EtherscanVerifier } from '../Verifiers/EtherscanVerifier'
 
 export type SourcifyVerificationStatus = 'perfect' | 'partial' | null
 

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

@@ -1,8 +1,8 @@
 import React from 'react'
-import {AppContext} from '../AppContext'
+import { AppContext } from '../AppContext'
 import example from './example.js'
-import {AccordionReceipt} from '../components/AccordionReceipt'
+import { AccordionReceipt } from '../components/AccordionReceipt'
-import {SubmittedContract} from '../types/VerificationTypes'
+import { SubmittedContract } from '../types/VerificationTypes'
 
 export const ReceiptsView = () => {
   // const {submittedContracts} = React.useContext(AppContext);

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

@@ -1,17 +1,17 @@
-import React, {useEffect, useState} from 'react'
+import React, { useEffect, useState } from 'react'
-
+
-import {AppContext} from '../AppContext'
+import { AppContext } from '../AppContext'
-import {SearchableDropdown} from '../components'
+import { SearchableDropdown } from '../components'
-import {ContractDropdown} from '../components/ContractDropdown'
+import { ContractDropdown } from '../components/ContractDropdown'
-import {ethers} from 'ethers/'
+import { ethers } from 'ethers/'
-import {Chain, SubmittedContract, VerificationReceipt} from '../types/VerificationTypes'
+import { Chain, SubmittedContract, VerificationReceipt } from '../types/VerificationTypes'
-import {SourcifyVerifier} from '../Verifiers/SourcifyVerifier'
+import { SourcifyVerifier } from '../Verifiers/SourcifyVerifier'
-import {EtherscanVerifier} from '../Verifiers/EtherscanVerifier'
+import { EtherscanVerifier } from '../Verifiers/EtherscanVerifier'
-import {useNavigate} from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
-import {ConstructorArguments} from '../components/ConstructorArguments'
+import { ConstructorArguments } from '../components/ConstructorArguments'
 
 export const VerifyView = () => {
-  const {chains, compilationOutput, verifiers, setVerifiers, selectedContractFileAndName, setSubmittedContracts} = React.useContext(AppContext)
+  const { chains, compilationOutput, verifiers, setVerifiers, selectedContractFileAndName, setSubmittedContracts } = React.useContext(AppContext)
   const [contractAddress, setContractAddress] = useState('')
   const [contractAddressError, setContractAddressError] = useState('')
   const [selectedChain, setSelectedChain] = useState<Chain | undefined>()
@@ -49,7 +49,7 @@ export const VerifyView = () => {
 
     const date = new Date()
     // A receipt for each verifier
-    const receipts: VerificationReceipt[] = enabledVerifiers.map((verifier) => ({verifier, status: null, receiptId: null, message: null}))
+    const receipts: VerificationReceipt[] = enabledVerifiers.map((verifier) => ({ verifier, status: null, receiptId: null, message: null }))
     const newSubmittedContract: SubmittedContract = {
       id: selectedChain?.chainId + '-' + contractAddress + '-' + date.toString(),
       address: contractAddress,
@@ -60,7 +60,7 @@ export const VerifyView = () => {
       date,
       receipts,
     }
-    setSubmittedContracts((prev) => ({...prev, [newSubmittedContract.id]: newSubmittedContract}))
+    setSubmittedContracts((prev) => ({ ...prev, [newSubmittedContract.id]: newSubmittedContract }))
 
     console.log('newSubmittedContract:', newSubmittedContract)
 
@@ -69,7 +69,7 @@ export const VerifyView = () => {
 
     // Verify for each verifier. forEach does not wait for await and each promise will execute in parallel
     receipts.forEach(async (receipt) => {
-      const {verifier} = receipt
+      const { verifier } = receipt
       if (verifier instanceof SourcifyVerifier) {
         try {
           const response = await verifier.verify(selectedChain?.chainId.toString(), contractAddress, compilerAbstract, selectedContractFileAndName)
@@ -91,7 +91,7 @@ export const VerifyView = () => {
       }
 
       // Update the UI
-      setSubmittedContracts((prev) => ({...prev, [newSubmittedContract.id]: newSubmittedContract}))
+      setSubmittedContracts((prev) => ({ ...prev, [newSubmittedContract.id]: newSubmittedContract }))
     })
   }
 
@@ -112,7 +112,7 @@ export const VerifyView = () => {
     <div className="my-4">
       <div>
         <h2 className="text-center text-uppercase font-weight-bold">Verify</h2>
-        <p className="text-center" style={{fontSize: '0.8rem'}}>
+        <p className="text-center" style={{ fontSize: '0.8rem' }}>
           Verify compiled contracts on different verification services
         </p>
       </div>

apps/contract-verification/src/app/views/index.ts

@@ -1 +1 @@
-export {VerifyView} from './VerifyView'
+export { VerifyView } from './VerifyView'

apps/contract-verification/src/environments/environment.prod.ts

@@ -1,3 +1,3 @@
 export const environment = {
-  production: true
+  production: true,
-};
+}

apps/contract-verification/src/environments/environment.ts

@@ -2,5 +2,5 @@
 // When building for production, this file is replaced with `environment.prod.ts`.
 
 export const environment = {
-  production: false
+  production: false,
-};
+}

apps/contract-verification/src/index.html

@@ -7,8 +7,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <link rel="stylesheet" integrity="ha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
+    <link rel="stylesheet" integrity="ha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
-		crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
   </head>
   <body>
     <div id="root"></div>

apps/contract-verification/src/main.tsx

@@ -1,14 +1,10 @@
 import React from 'react'
 import * as ReactDOM from 'react-dom'
-import { createRoot } from 'react-dom/client';
+import { createRoot } from 'react-dom/client'
 import App from './app/app'
 
-
+const container = document.getElementById('root')
-const container = document.getElementById('root');
 
 if (container) {
-  createRoot(container).render(
+  createRoot(container).render(<App />)
-    <App />
-  );
 }
-

apps/contract-verification/src/polyfills.ts

@@ -3,5 +3,5 @@
  *
  * See: https://github.com/zloirock/core-js#babel
  */
-import 'core-js/stable';
+import 'core-js/stable'
-import 'regenerator-runtime/runtime';
+import 'regenerator-runtime/runtime'

apps/contract-verification/webpack.config.js

@@ -1,11 +1,11 @@
-const {composePlugins, withNx} = require('@nrwl/webpack')
+const { composePlugins, withNx } = require('@nrwl/webpack')
 const webpack = require('webpack')
 const TerserPlugin = require('terser-webpack-plugin')
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 
 const versionData = {
   timestamp: Date.now(),
-  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
 }
 // Nx plugins for webpack.
 module.exports = composePlugins(withNx(), (config) => {
@@ -31,13 +31,13 @@ module.exports = composePlugins(withNx(), (config) => {
     readline: false,
     child_process: false,
     buffer: require.resolve('buffer/'),
-    vm: require.resolve('vm-browserify')
+    vm: require.resolve('vm-browserify'),
   }
 
   // add externals
   config.externals = {
     ...config.externals,
-    solc: 'solc'
+    solc: 'solc',
   }
 
   // add public path
@@ -52,7 +52,7 @@ module.exports = composePlugins(withNx(), (config) => {
     new webpack.ProvidePlugin({
       Buffer: ['buffer', 'Buffer'],
       url: ['url', 'URL'],
-      process: 'process/browser'
+      process: 'process/browser',
     })
   )
 
@@ -60,7 +60,7 @@ module.exports = composePlugins(withNx(), (config) => {
   config.module.rules.push({
     test: /\.js$/,
     use: ['source-map-loader'],
-    enforce: 'pre'
+    enforce: 'pre',
   })
 
   config.ignoreWarnings = [/Failed to parse source map/] // ignore source-map-loader warnings
@@ -74,16 +74,16 @@ module.exports = composePlugins(withNx(), (config) => {
         compress: false,
         mangle: false,
         format: {
-          comments: false
+          comments: false,
-        }
+        },
       },
-      extractComments: false
+      extractComments: false,
     }),
-    new CssMinimizerPlugin()
+    new CssMinimizerPlugin(),
   ]
 
   config.watchOptions = {
-    ignored: /node_modules/
+    ignored: /node_modules/,
   }
 
   return config