Add logic for SettingsView

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from 'react'
+import React, { useEffect, useState } from 'react'
 import { ethers } from 'ethers/'
 
 interface ConfigInputProps {

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

@@ -1,12 +1,12 @@
 import { VerifierIdentifier } from './VerificationTypes'
 
 export interface VerifierSettings {
-  apiUrl: string
+  apiUrl?: string
   explorerUrl?: string
   apiKey?: string
 }
 
-export type SettingsForVerifier = Record<VerifierIdentifier, VerifierSettings>
+export type SettingsForVerifier = Partial<Record<VerifierIdentifier, VerifierSettings>>
 
 export interface ChainSettings {
   verifiers: SettingsForVerifier

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

@@ -18,6 +18,7 @@ export interface Chain {
 }
 
 export type VerifierIdentifier = 'Sourcify' | 'Etherscan' | 'Blockscout'
+export const VERIFIERS: VerifierIdentifier[] = ['Sourcify', 'Etherscan', 'Blockscout']
 
 export interface VerifierInfo {
   name: VerifierIdentifier

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

@@ -0,0 +1,41 @@
+import type { ChainSettings, ContractVerificationSettings, SettingsForVerifier, VerifierSettings } from './SettingsTypes'
+import { VERIFIERS } from './VerificationTypes'
+
+const DEFAULTS: SettingsForVerifier = {
+  Sourcify: {
+    apiUrl: 'https://sourcify.dev/server/',
+    explorerUrl: 'https://repo.sourcify.dev/',
+  },
+  Etherscan: {
+    apiUrl: 'https://api.etherscan.io/',
+    explorerUrl: 'https://etherscan.io/',
+    apiKey: undefined,
+  },
+  Blockscout: {
+    apiUrl: 'https://eth.blockscout.com/',
+  },
+}
+
+export function getSettingsForChain(chainId: string, userSettings: ContractVerificationSettings): ChainSettings {
+  const verifiers: SettingsForVerifier = {}
+
+  for (const verifierId in VERIFIERS) {
+    const userSetting: VerifierSettings = userSettings.chains[chainId]?.verifiers[verifierId]
+
+    if (userSetting) {
+      verifiers[verifierId] = { ...userSetting }
+      // Only apply default settings for Etherscan and Blockscout on mainnet
+      if (verifierId === 'Sourcify' || chainId === '1') {
+        for (const key of Object.keys(DEFAULTS[verifierId])) {
+          if (!verifiers[verifierId][key]) {
+            verifiers[verifierId][key] = DEFAULTS[verifierId][key]
+          }
+        }
+      }
+      // Only apply default settings for Etherscan and Blockscout on mainnet
+    } else if (verifierId === 'Sourcify' || chainId === '1') {
+      verifiers[verifierId] = DEFAULTS[verifierId]
+    }
+  }
+  return { verifiers }
+}

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

@@ -1,3 +1,4 @@
 export * from './ThemeType'
 export * from './SettingsTypes'
 export * from './VerificationTypes'
+export * from './defaults'

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

@@ -1,20 +1,53 @@
-import { useState } from 'react'
+import { useContext, useState } from 'react'
 import { SearchableChainDropdown, ConfigInput } from '../components'
-import type { Chain } from '../types'
+import type { VerifierIdentifier, Chain, VerifierSettings, ContractVerificationSettings } from '../types'
+import { getSettingsForChain as mergeChainSettingsWithDefaults } from '../types'
+import { AppContext } from '../AppContext'
 
 export const SettingsView = () => {
+  const { settings, setSettings } = useContext(AppContext)
   const [selectedChain, setSelectedChain] = useState<Chain | undefined>()
 
+  const chainSettings = selectedChain ? mergeChainSettingsWithDefaults(selectedChain.chainId.toString(), settings) : undefined
+
+  const handleChange = (verifier: VerifierIdentifier, key: keyof VerifierSettings, value: string) => {
+    const chainId = selectedChain.chainId.toString()
+    const changedSettings: ContractVerificationSettings = JSON.parse(JSON.stringify(settings))
+
+    if (!changedSettings.chains[chainId]) {
+      changedSettings.chains[chainId] = { verifiers: {} }
+    }
+    if (!changedSettings.chains[chainId].verifiers[verifier]) {
+      changedSettings.chains[chainId].verifiers[verifier] = {}
+    }
+
+    changedSettings.chains[chainId].verifiers[verifier][key] = value
+    setSettings(changedSettings)
+    console.log(changedSettings)
+  }
+
   return (
     <>
       <SearchableChainDropdown label="Chain" id="network-dropdown" setSelectedChain={setSelectedChain} selectedChain={selectedChain} />
 
       {selectedChain && (
+        <>
+          <div className="pt-2">
+            <span className="font-weight-bold">Sourcify</span>
+            <ConfigInput label="API URL" id="sourcify-api-url" secret={false} initialValue={chainSettings.verifiers['Sourcify']?.apiUrl ?? ''} saveResult={(result) => handleChange('Sourcify', 'apiUrl', result)} />
+            <ConfigInput label="Repo URL" id="sourcify-explorer-url" secret={false} initialValue={chainSettings.verifiers['Sourcify']?.explorerUrl ?? ''} saveResult={(result) => handleChange('Sourcify', 'explorerUrl', result)} />
+          </div>
           <div className="pt-2">
             <span className="font-weight-bold">Etherscan</span>
-          <ConfigInput label="API Key" id="etherscan-api-key" secret={true} initialValue="key" saveResult={() => {}} />
-          <ConfigInput label="API URL" id="etherscan-api-url" secret={false} initialValue="url" saveResult={() => {}} />
+            <ConfigInput label="API Key" id="etherscan-api-key" secret={true} initialValue={chainSettings.verifiers['Etherscan']?.apiKey ?? ''} saveResult={(result) => handleChange('Etherscan', 'apiKey', result)} />
+            <ConfigInput label="API URL" id="etherscan-api-url" secret={false} initialValue={chainSettings.verifiers['Etherscan']?.apiUrl ?? ''} saveResult={(result) => handleChange('Etherscan', 'apiUrl', result)} />
+            <ConfigInput label="Explorer URL" id="etherscan-explorer-url" secret={false} initialValue={chainSettings.verifiers['Etherscan']?.explorerUrl ?? ''} saveResult={(result) => handleChange('Etherscan', 'explorerUrl', result)} />
           </div>
+          <div className="pt-2">
+            <span className="font-weight-bold">Blockscout</span>
+            <ConfigInput label="Instance URL" id="blockscout-api-url" secret={false} initialValue={chainSettings.verifiers['Blockscout']?.apiUrl ?? ''} saveResult={(result) => handleChange('Blockscout', 'apiUrl', result)} />
+          </div>
+        </>
       )}
     </>
   )

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 
 import { AppContext } from '../AppContext'
 import { SearchableChainDropdown, ContractDropdown, ContractAddressInput } from '../components'
@@ -11,19 +11,18 @@ import { AbstractVerifier, getVerifier } from '../Verifiers'
 import { ContractDropdownSelection } from '../components/ContractDropdown'
 
 export const VerifyView = () => {
-  const { compilationOutput, setSubmittedContracts } = React.useContext(AppContext)
+  const { compilationOutput, setSubmittedContracts } = useContext(AppContext)
   const [contractAddress, setContractAddress] = useState('')
   const [selectedChain, setSelectedChain] = useState<Chain | undefined>()
-  const [abiEncodedConstructorArgs, setAbiEncodedConstructorArgs] = React.useState<string>('')
+  const [abiEncodedConstructorArgs, setAbiEncodedConstructorArgs] = useState<string>('')
   const [selectedContract, setSelectedContract] = useState<ContractDropdownSelection | undefined>()
   const navigate = useNavigate()
 
   // TODO
-  const [verifiers, setVerifiers] = useState<AbstractVerifier[]>([]) // Placeholder, to be derived from settings
   // const sourcifyVerifier = new SourcifyVerifier('http://sourcify.dev/server/', 'Sourcify')
   const sourcifyVerifier = new SourcifyVerifier('http://localhost:5555/', 'todo')
   const etherscanVerifier = new EtherscanVerifier('https://api.etherscan.io', 'todo', 'API_KEY')
-  setVerifiers([sourcifyVerifier, etherscanVerifier])
+  const verifiers = [sourcifyVerifier, etherscanVerifier] // Placeholder, to be derived from settings
 
   useEffect(() => {
     console.log('Selected chain changed', selectedChain)
@@ -120,7 +119,7 @@ export const VerifyView = () => {
                   onChange={(e) => {
                     verifier.enabled = e.target.checked
                     // Trigger a re-render
-                    setVerifiers([...verifiers])
+                    // setVerifiers([...verifiers])
                   }}
                 />
                 <label className="form-check-label" htmlFor={`verifier-${name}`}>