Add visual SettingsView

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

@@ -0,0 +1,40 @@
+import React, { useEffect, useState, useContext } from 'react'
+import { ethers } from 'ethers/'
+
+interface ConfigInputProps {
+  label: string
+  id: string
+  secret: boolean
+  initialValue: string
+  saveResult: (result: string) => void
+}
+
+// Chooses one contract from the compilation output.
+export const ConfigInput: React.FC<ConfigInputProps> = ({ label, id, secret, initialValue, saveResult }) => {
+  const [value, setValue] = useState(initialValue)
+  const [enabled, setEnabled] = useState(false)
+
+  const handleChange = () => {
+    setEnabled(true)
+  }
+
+  const handleSave = () => {
+    setEnabled(false)
+    saveResult(value)
+  }
+
+  return (
+    <div className="form-group">
+      <label htmlFor={id}>{label}</label>
+      <input type={secret ? 'password' : 'text'} className="form-control mb-2" id={id} placeholder="0x2738d13E81e..." value={value} onChange={(e) => setValue(e.target.value)} disabled={!enabled} />
+      <div className="d-flex flex-row justify-content-start">
+        <button type="button" className="btn btn-secondary mr-3" disabled={enabled} onClick={handleChange}>
+          Change
+        </button>
+        <button type="button" className="btn btn-secondary" disabled={!enabled} onClick={handleSave}>
+          Save
+        </button>
+      </div>
+    </div>
+  )
+}

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

@@ -88,7 +88,7 @@ export const SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, se
   }
 
   return (
-    <div className="dropdown" ref={dropdownRef}>
+    <div className="dropdown mb-3" ref={dropdownRef}>
       {' '}
       {/* Add ref here */}
       <label htmlFor={id}>{label}</label>

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

@@ -2,3 +2,4 @@ export { NavMenu } from './NavMenu'
 export { ContractDropdown } from './ContractDropdown'
 export { SearchableChainDropdown } from './SearchableChainDropdown'
 export { ContractAddressInput } from './ContractAddressInput'
+export { ConfigInput } from './ConfigInput'

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

@@ -1,10 +1,8 @@
 import React from 'react'
 import { HashRouter as Router, Route, Routes } from 'react-router-dom'
 
-import { VerifyView } from './views'
+import { VerifyView, ReceiptsView, LookupView, SettingsView } from './views'
 import { DefaultLayout } from './layouts'
-import { ReceiptsView } from './views/ReceiptsView'
-import { LookupView } from './views/LookupView'
 
 const DisplayRoutes = () => (
   <Router>
@@ -35,6 +33,15 @@ const DisplayRoutes = () => (
           </DefaultLayout>
         }
       />
+
+      <Route
+        path="/settings"
+        element={
+          <DefaultLayout from="/" title="Settings" description="Customize settings for each verification service and chain">
+            <SettingsView />
+          </DefaultLayout>
+        }
+      />
     </Routes>
   </Router>
 )

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

@@ -0,0 +1,21 @@
+import { useState } from 'react'
+import { SearchableChainDropdown, ConfigInput } from '../components'
+import { Chain } from '../types/VerificationTypes'
+
+export const SettingsView = () => {
+  const [selectedChain, setSelectedChain] = useState<Chain | undefined>()
+
+  return (
+    <>
+      <SearchableChainDropdown label="Chain" id="network-dropdown" setSelectedChain={setSelectedChain} selectedChain={selectedChain} />
+
+      {selectedChain && (
+        <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={() => {}} />
+        </div>
+      )}
+    </>
+  )
+}

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

@@ -124,7 +124,7 @@ export const VerifyView = () => {
           })}
       </div>
       <div>
-        <ConstructorArguments abiEncodedConstructorArgs={abiEncodedConstructorArgs} setAbiEncodedConstructorArgs={setAbiEncodedConstructorArgs} selectedContract={selectedContract} />
+        {/* <ConstructorArguments abiEncodedConstructorArgs={abiEncodedConstructorArgs} setAbiEncodedConstructorArgs={setAbiEncodedConstructorArgs} selectedContract={selectedContract} /> */}
       </div>
     </form>
   )

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

@@ -1 +1,4 @@
 export { VerifyView } from './VerifyView'
+export { SettingsView } from './SettingsView'
+export { LookupView } from './LookupView'
+export { ReceiptsView } from './ReceiptsView'