Add Verify form items. Fetch and format chains form chainid.network/chains.json

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

@@ -6,4 +6,5 @@ export const AppContext = React.createContext({
   setThemeType: (themeType: ThemeType) => {
     console.log('Calling Set Theme Type')
   },
+  chains: [],
 })

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

@@ -13,9 +13,18 @@ const plugin = new ContractVerificationPluginClient()
 
 const App = () => {
   const [themeType, setThemeType] = useState<ThemeType>('dark')
+  const [chains, setChains] = useState([]) // State to hold the chains data
+
+  useEffect(() => {
+    // Fetch chains.json and update state
+    fetch('https://chainid.network/chains.json')
+      .then((response) => response.json())
+      .then((data) => setChains(data))
+      .catch((error) => console.error('Failed to fetch chains.json:', error))
+  }, [])
 
   return (
-    <AppContext.Provider value={{themeType, setThemeType}}>
+    <AppContext.Provider value={{themeType, setThemeType, chains}}>
       <DisplayRoutes />
     </AppContext.Provider>
   )

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

@@ -0,0 +1,27 @@
+import React from 'react'
+
+interface DropdownItem {
+  value: string
+  text: 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.text}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}

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

@@ -13,11 +13,10 @@ const NavItem = ({to, icon, title}: NavItemProps) => {
     <NavLink
       // data-id="home"
       to={to}
-      className={({isActive}) => (isActive ? 'border border-secondary shadow-none btn p-1 m-0' : 'border-0 shadow-none btn p-1 m-0')}
-      style={({isActive}) => (!isActive ? {width: '1.8rem', filter: 'contrast(0.5)'} : {width: '1.8rem'})}
+      className={({isActive}) => 'p-2 ' + (isActive ? 'bg-primary text-white' : 'bg-secondary')}
       // state={from}
     >
-      <div>
+      <div className="d-flex flex-column align-items-center justify-content-center">
         <div>{icon}</div>
         <div>{title}</div>
       </div>
@@ -27,7 +26,7 @@ const NavItem = ({to, icon, title}: NavItemProps) => {
 
 export const NavMenu = () => {
   return (
-    <nav className="d-flex flex-row justify-content-between">
+    <nav className="d-flex flex-row justify-content-around">
       <NavItem to="/" icon={<i className="fas fa-home"></i>} title="Verify" />
       <NavItem to="/receipts" icon={<i className="fas fa-receipt"></i>} title="Receipts" />
       <NavItem to="/lookup" icon={<i className="fas fa-search"></i>} title="Lookup" />

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

@@ -1,9 +1,55 @@
 import React from 'react'
 
 import {AppContext} from '../AppContext'
+import {Dropdown} from '../components/Input/Dropdown'
 
 export const HomeView = () => {
-  const context = React.useContext(AppContext)
+  const {chains} = React.useContext(AppContext)
 
-  return <div>HOME</div>
+  const ethereumChainIds = [1, 11155111, 17000]
+
+  // Add Ethereum chains to the head of the chains list. Sort the rest alphabetically
+  const dropdownChains = chains
+    .map((chain) => ({value: chain.chainId, text: `${chain.name} (${chain.chainId})`}))
+    .sort((a, b) => {
+      const isAInEthereum = ethereumChainIds.includes(a.value)
+      const isBInEthereum = ethereumChainIds.includes(b.value)
+
+      if (isAInEthereum && !isBInEthereum) return -1
+      if (!isAInEthereum && isBInEthereum) return 1
+      if (isAInEthereum && isBInEthereum) return ethereumChainIds.indexOf(a.value) - ethereumChainIds.indexOf(b.value)
+
+      return a.text.localeCompare(b.text)
+    })
+
+  return (
+    <div className="my-4">
+      <div>
+        <h2 className="text-center text-uppercase font-weight-bold">Verify</h2>
+        <p className="text-center" style={{fontSize: '0.8rem'}}>
+          Verify compiled contracts on different verification services
+        </p>
+      </div>
+      <div>
+        <Dropdown label="Network" items={dropdownChains} id="network-dropdown" />
+        <div className="form-group">
+          <label htmlFor="contract-address">Contract Address</label>
+          <input type="text" className="form-control" id="contract-address" placeholder="0x2738d13E81e..." />
+        </div>
+        <Dropdown
+          label="Contract Name"
+          items={[
+            {value: 'ERC20', text: 'ERC20'},
+            {value: 'ERC721', text: 'ERC721'},
+            {value: 'ERC1155', text: 'ERC1155'},
+          ]}
+          id="contract-name-dropdown"
+        />
+        <div>
+          <div>Constructor Arguments</div>
+          {/* TODO: Add input fields for constructor arguments */}
+        </div>
+      </div>
+    </div>
+  )
 }