Turn off temp. strict. Dropdown to ContractDropdown. Style ContractDropdown

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

@@ -0,0 +1,3 @@
+.disabled-cursor {
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,33 @@
+import React from 'react'
+import './ContractDropdown.css'
+interface ContractDropdownItem {
+  value: string
+  name: string
+}
+
+interface ContractDropdownProps {
+  label: string
+  contractNames: ContractDropdownItem[]
+  id: string
+}
+
+export const ContractDropdown: React.FC<ContractDropdownProps> = ({label, contractNames, id}) => {
+  const hasContracts = contractNames && contractNames.length > 0
+  return (
+    <div className="form-group">
+      <label htmlFor={id}>{label}</label>
+
+      <select className={`form-control custom-select pr-4 ${!hasContracts ? 'disabled-cursor' : ''}`} id={id} disabled={!hasContracts}>
+        {hasContracts ? (
+          contractNames.map((item, index) => (
+            <option value={item.value} key={index}>
+              {item.name}
+            </option>
+          ))
+        ) : (
+          <option>No Compiled Contracts. Please compile and select a contract</option>
+        )}
+      </select>
+    </div>
+  )
+}

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

@@ -1,27 +0,0 @@
-import React from 'react'
-
-interface DropdownItem {
-  value: string
-  name: string
-}
-
-interface DropdownProps {
-  label: string
-  items: DropdownItem[]
-  id: string
-}
-
-export const Dropdown: React.FC<DropdownProps> = ({label, items, id}) => {
-  return (
-    <div className="form-group">
-      <label htmlFor={id}>{label}</label>
-      <select className="form-control custom-select pr-4" id={id}>
-        {items.map((item, index) => (
-          <option value={item.value} key={index}>
-            {item.name}
-          </option>
-        ))}
-      </select>
-    </div>
-  )
-}

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

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

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

@@ -1,8 +1,8 @@
 import React from 'react'
 
 import {AppContext} from '../AppContext'
-import {Dropdown} from '../components'
 import {SearchableDropdown} from '../components'
+import {ContractDropdown} from '../components/ContractDropdown'
 
 export const HomeView = () => {
   const {chains, selectedChain, setSelectedChain, compilationOutput} = React.useContext(AppContext)
@@ -41,7 +41,7 @@ export const HomeView = () => {
           <input type="text" className="form-control" id="contract-address" placeholder="0x2738d13E81e..." />
         </div>
 
-        {contractNames && contractNames.length > 0 ? <Dropdown label="Contract Name" items={contractNames.map((item) => ({value: item, name: item}))} id="contract-name-dropdown" /> : <div> No compiled contracts </div>}
+        <ContractDropdown label="Contract Name" contractNames={contractNames?.map((item) => ({value: item, name: item}))} id="contract-name-dropdown" />
         <div>
           <div>Constructor Arguments</div>
           {/* TODO: Add input fields for constructor arguments */}

apps/contract-verification/tsconfig.json

@@ -5,7 +5,7 @@
     "allowJs": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "strict": true
+    // "strict": true
   },
   "files": [],
   "include": [],