Adapt Layout

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

@@ -5,13 +5,22 @@ import { NavMenu } from '../components/NavMenu'
 interface Props {
   from: string
   title?: string
+  description?: string
 }
 
-export const DefaultLayout = ({ children }: PropsWithChildren<Props>) => {
+export const DefaultLayout = ({ children, title, description }: PropsWithChildren<Props>) => {
   return (
     <div>
       <NavMenu />
-      {children}
+      <div className="my-4">
+        <div>
+          <h2 className="text-center text-uppercase font-weight-bold">{title}</h2>
+          <p className="text-center" style={{ fontSize: '0.8rem' }}>
+            {description}
+          </p>
+        </div>
+        {children}
+      </div>
     </div>
   )
 }

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

@@ -11,7 +11,7 @@ const DisplayRoutes = () => (
       <Route
         path="/"
         element={
-          <DefaultLayout from="/" title="Verify Smart Contracts">
+          <DefaultLayout from="/" title="Verify" description="Verify compiled contracts on different verification services">
             <VerifyView />
           </DefaultLayout>
         }
@@ -20,7 +20,7 @@ const DisplayRoutes = () => (
       <Route
         path="/receipts"
         element={
-          <DefaultLayout from="/" title="Receipts">
+          <DefaultLayout from="/" title="Receipts" description="Check the verification statuses of contracts submitted for verification">
             <ReceiptsView />
           </DefaultLayout>
         }

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

@@ -7,13 +7,13 @@ import { SubmittedContract } from '../types/VerificationTypes'
 export const ReceiptsView = () => {
   // const {submittedContracts} = React.useContext(AppContext);
 
-  const submittedContracts = example as unknown as SubmittedContract
+  const submittedContracts = example as unknown as Record<string,SubmittedContract>
   console.log('submittedContracts', submittedContracts)
   return (
-    <div className="my-4">
+    <>
       {Object.values(submittedContracts).map((contract, index) => (
         <AccordionReceipt contract={contract} index={index} />
       ))}
-    </div>
+    </>
   )
 }

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

@@ -109,54 +109,46 @@ export const VerifyView = () => {
   console.log('sourcifyVerifiers:', verifiers)
 
   return (
-    <div className="my-4">
+    <form onSubmit={handleVerify}>
+      <SearchableDropdown label="Contract Chain" chains={dropdownChains} id="network-dropdown" setSelectedChain={setSelectedChain} selectedChain={selectedChain} />
+
+      <div className="form-group">
+        <label htmlFor="contract-address">Contract Address</label>
+        <div>{contractAddressError && <div className="text-danger">{contractAddressError}</div>}</div>
+        <input type="text" className="form-control" id="contract-address" placeholder="0x2738d13E81e..." value={contractAddress} onChange={handleAddressChange} />
+      </div>
+
+      <ContractDropdown label="Contract Name" id="contract-dropdown-1" />
+
+      <button type="submit" className="btn btn-primary">
+        {' '}
+        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
+                  setVerifiers([...verifiers])
+                }}
+              />
+              <label className="form-check-label" htmlFor={`verifier-${verifier.name}`}>
+                {verifier.name} ({verifier.apiUrl})
+              </label>
+            </div>
+          ))}
+      </div>
       <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>
+        <ConstructorArguments abiEncodedConstructorArgs={abiEncodedConstructorArgs} setAbiEncodedConstructorArgs={setAbiEncodedConstructorArgs} />
       </div>
-      <form onSubmit={handleVerify}>
-        <SearchableDropdown label="Contract Chain" chains={dropdownChains} id="network-dropdown" setSelectedChain={setSelectedChain} selectedChain={selectedChain} />
-
-        <div className="form-group">
-          <label htmlFor="contract-address">Contract Address</label>
-          <div>{contractAddressError && <div className="text-danger">{contractAddressError}</div>}</div>
-          <input type="text" className="form-control" id="contract-address" placeholder="0x2738d13E81e..." value={contractAddress} onChange={handleAddressChange} />
-        </div>
-
-        <ContractDropdown label="Contract Name" id="contract-dropdown-1" />
-
-        <button type="submit" className="btn btn-primary">
-          {' '}
-          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
-                    setVerifiers([...verifiers])
-                  }}
-                />
-                <label className="form-check-label" htmlFor={`verifier-${verifier.name}`}>
-                  {verifier.name} ({verifier.apiUrl})
-                </label>
-              </div>
-            ))}
-        </div>
-        <div>
-          <ConstructorArguments abiEncodedConstructorArgs={abiEncodedConstructorArgs} setAbiEncodedConstructorArgs={setAbiEncodedConstructorArgs} />
-        </div>
-      </form>
-    </div>
+    </form>
   )
 }