Add AbstractVerifier and enable/disable verifiers

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

@@ -15,7 +15,8 @@ type AppContextType = {
   targetFileName: string | undefined
   verifiedContracts: VerifiedContract[]
   setVerifiedContracts: (verifiedContracts: VerifiedContract[]) => void
-  sourcifyVerifiers: SourcifyVerifier[]
+  verifiers: SourcifyVerifier[]
+  setVerifiers: (verifiers: SourcifyVerifier[]) => void
 }
 
 // Provide a default value with the appropriate types
@@ -31,7 +32,8 @@ const defaultContextValue: AppContextType = {
   targetFileName: undefined,
   verifiedContracts: [],
   setVerifiedContracts: (verifiedContracts: VerifiedContract[]) => {},
-  sourcifyVerifiers: [],
+  verifiers: [],
+  setVerifiers: (verifiers: SourcifyVerifier[]) => {},
 }
 
 // Create the context with the type

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

@@ -0,0 +1,11 @@
+export abstract class AbstractVerifier {
+  name: string
+  apiUrl: string
+  enabled: boolean
+
+  constructor(apiUrl: string, name: string) {
+    this.apiUrl = apiUrl
+    this.name = name
+    this.enabled = true
+  }
+}

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

@@ -1,13 +1,9 @@
 import {SourcesCode} from '@remix-project/remix-solidity'
 import {AbstractVerifier} from './AbstractVerifier'
 
-export class SourcifyVerifier {
+export class SourcifyVerifier extends AbstractVerifier {
-  name: string
-  apiUrl: string
-
   constructor(apiUrl: string, name: string = 'Sourcify') {
-    this.apiUrl = apiUrl
+    super(apiUrl, name)
-    this.name = name
   }
 
   async verify(chainId: string, address: string, sources: SourcesCode, metadataStr: string): Promise<boolean> {

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

@@ -23,6 +23,7 @@ const App = () => {
   const [selectedContractFileAndName, setSelectedContractFileAndName] = useState<string | undefined>()
   const [verifiedContracts, setVerifiedContracts] = useState<VerifiedContract[]>([])
   const [sourcifyVerifiers, setSourcifyVerifiers] = useState<SourcifyVerifier[]>([])
+  const [verifiers, setVerifiers] = useState<SourcifyVerifier[]>([])
 
   useEffect(() => {
     console.log('Selected Contract File And Name Changed', selectedContractFileAndName)
@@ -31,7 +32,7 @@ const App = () => {
   useEffect(() => {
     // const sourcifyVerifier = new SourcifyVerifier('http://sourcify.dev/server/', 'Sourcify')
     const sourcifyVerifier = new SourcifyVerifier('http://localhost:5555/', 'Sourcify Localhost')
-    setSourcifyVerifiers([sourcifyVerifier])
+    setVerifiers([sourcifyVerifier])
     // TODO: Fix 'compilationFinished' event types. The interface is outdated at https://github.com/ethereum/remix-plugin/blob/master/packages/api/src/lib/compiler/api.ts. It does not include data, input, or version. See the current parameters: https://github.com/ethereum/remix-project/blob/9f6c5be882453a555055f07171701459e4ae88a4/libs/remix-solidity/src/compiler/compiler.ts#L189
 
     // Fetch compiler artefacts initially
@@ -63,7 +64,7 @@ const App = () => {
   }, [])
 
   return (
-    <AppContext.Provider value={{themeType, setThemeType, chains, compilationOutput, selectedContractFileAndName, setSelectedContractFileAndName, targetFileName, verifiedContracts, setVerifiedContracts, sourcifyVerifiers}}>
+    <AppContext.Provider value={{themeType, setThemeType, chains, compilationOutput, selectedContractFileAndName, setSelectedContractFileAndName, targetFileName, verifiedContracts, setVerifiedContracts, verifiers, setVerifiers}}>
       <DisplayRoutes />
     </AppContext.Provider>
   )

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

@@ -8,7 +8,7 @@ import {ethers} from 'ethers/'
 import {Chain} from '../types/VerificationTypes'
 
 export const VerifyView = () => {
-  const {chains, compilationOutput, sourcifyVerifiers, selectedContractFileAndName} = React.useContext(AppContext)
+  const {chains, compilationOutput, verifiers, setVerifiers, selectedContractFileAndName} = React.useContext(AppContext)
   const [contractAddress, setContractAddress] = useState('')
   const [contractAddressError, setContractAddressError] = useState('')
   const [selectedChain, setSelectedChain] = useState<Chain | undefined>()
@@ -40,11 +40,11 @@ export const VerifyView = () => {
     console.log('selectedContractName:', selectedContractName)
     console.log('selectedContractAbstract:', selectedContractAbstract)
     console.log('selectedContractMetadataStr:', selectedContractMetadataStr)
-    console.log('sourcifyVerifiers:', sourcifyVerifiers)
+    console.log('sourcifyVerifiers:', verifiers)
     console.log('selectedChain:', selectedChain)
     console.log('contractAddress:', contractAddress)
-    const sourcifyPromises = sourcifyVerifiers.map((sourcifyVerifier) => {
+    const sourcifyPromises = verifiers.map((verifier) => {
-      return sourcifyVerifier.verify(selectedChain.chainId.toString(), contractAddress, selectedContractAbstract.source.sources, selectedContractMetadataStr)
+      return verifier.verify(selectedChain.chainId.toString(), contractAddress, selectedContractAbstract.source.sources, selectedContractMetadataStr)
     })
 
     const results = await Promise.all(sourcifyPromises)
@@ -61,6 +61,9 @@ export const VerifyView = () => {
     }
     setContractAddressError('')
   }
+
+  console.log('sourcifyVerifiers:', verifiers)
+
   return (
     <div className="my-4">
       <div>
@@ -84,6 +87,29 @@ export const VerifyView = () => {
           {' '}
           Verify{' '}
         </button>
+
+        <div>
+          {verifiers?.length > 0 &&
+            verifiers.map((verifier) => (
+              <div key={verifier.name} className="form-check">
+                <input
+                  className="form-check-input"
+                  type="checkbox"
+                  id={`verifier-${verifier.name}`}
+                  checked={verifier.enabled}
+                  onChange={(e) => {
+                    verifier.enabled = e.target.checked
+                    // Trigger a re-render or state update if necessary
+                    // For example, you might need to update the state that holds the verifiers
+                    setVerifiers([...verifiers])
+                  }}
+                />
+                <label className="form-check-label" htmlFor={`verifier-${verifier.name}`}>
+                  {verifier.name} ({verifier.apiUrl})
+                </label>
+              </div>
+            ))}
+        </div>
       </form>
     </div>
   )