Basic receipt styling

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

@@ -0,0 +1,66 @@
+import React from 'react'
+import {SubmittedContract} from '../types/VerificationTypes'
+
+interface AccordionReceiptProps {
+  contract: SubmittedContract
+  index: number
+}
+
+export const AccordionReceipt: React.FC<AccordionReceiptProps> = ({contract, index}) => {
+  const [expanded, setExpanded] = React.useState(false)
+
+  const toggleAccordion = () => {
+    setExpanded(!expanded)
+  }
+
+  return (
+    <div key={contract.address + '-' + index} className={`bg-secondary accordion p-3 ${expanded ? 'open' : ''}`} id={contract.address + '-accordion-' + index}>
+      <div className="accordion-item">
+        <h3 className="d-flex flex-row" id={`heading${index}`}>
+          <button className={`accordion-button text-left`} type="button" onClick={toggleAccordion} aria-expanded={expanded} aria-controls={`collapse${index}`}>
+            {'>'}
+          </button>
+          <div>
+            {contract.address} on {contract.chainId} (Add chain name)
+          </div>
+        </h3>
+        <div id={`collapse${index}`} className={`accordion-collapse p-2 collapse ${expanded ? 'show' : ''}`} aria-labelledby={`heading${index}`} data-bs-parent="#accordionExample">
+          <div className="accordion-body">
+            <div>Chain ID: {contract.chainId}</div>
+            <div>
+              filePath: {contract.filePath} contractName: {contract.contractName}
+            </div>
+            <div>Submission Date: {contract.date.toLocaleString()}</div>
+            <div>
+              Receipts:
+              <div className="table-responsive">
+                <table className="table">
+                  <thead>
+                    <tr>
+                      <th>Verifier</th>
+                      <th>API Url</th>
+                      <th>Status</th>
+                      <th>Message</th>
+                      <th>ReceiptID</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {contract.receipts.map((receipt) => (
+                      <tr key={receipt.receiptId}>
+                        <td>{receipt.verifier.name}</td>
+                        <td>{receipt.verifier.apiUrl}</td>
+                        <td>{receipt.status}</td>
+                        <td>{receipt.message}</td>
+                        <td>{receipt.receiptId}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -1,36 +1,18 @@
 import React from 'react'
 import {AppContext} from '../AppContext'
+import example from './example.js'
+import {AccordionReceipt} from '../components/AccordionReceipt'
+import {SubmittedContract} from '../types/VerificationTypes'
 
 export const ReceiptsView = () => {
-  const {submittedContracts} = React.useContext(AppContext)
+  // const {submittedContracts} = React.useContext(AppContext);
 
+  const submittedContracts = example as unknown as SubmittedContract
+  console.log('submittedContracts', submittedContracts)
   return (
     <div className="my-4">
-      {Object.values(submittedContracts).map((contract) => (
+      {Object.values(submittedContracts).map((contract, index) => (
-        <div key={contract.address}>
+        <AccordionReceipt contract={contract} index={index} />
-          <div>Contract Address: {contract.address}</div>
-          <div>Chain ID: {contract.chainId}</div>
-          <div>
-            filePath: {contract.filePath} contractName: {contract.contractName}
-          </div>
-          <div>Submission Date: {contract.date.toLocaleString()}</div>
-          <div>
-            Receipts:{' '}
-            <ul>
-              {contract.receipts.map((receipt) => (
-                <li key={`${contract.address}-${receipt.verifier.name}`}>
-                  <ul>
-                    <li>Verifier: {receipt.verifier.name}</li>
-                    <li>API URL: {receipt.verifier.apiUrl}</li>
-                    <li>Status: {receipt.status}</li>
-                    <li>Receipt ID: {receipt.receiptId}</li>
-                    <li>Message: {receipt.message}</li>
-                  </ul>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
       ))}
     </div>
   )

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

@@ -39,6 +39,7 @@ export const VerifyView = () => {
   const handleVerify = async (e) => {
     e.preventDefault() // Don't change the page
 
+    console.log('selectedContractFileAndName', selectedContractFileAndName)
     const [triggerFilePath, filePath, contractName] = selectedContractFileAndName.split(':')
     const enabledVerifiers = verifiers.filter((verifier) => verifier.enabled)
     const compilerAbstract = compilationOutput[triggerFilePath]

apps/contract-verification/src/app/views/example.js

@@ -0,0 +1,34 @@
+const json = {
+  'undefined-0x2738d13E81e30bC615766A0410e7cF199FD59A83-Thu Jun 20 2024 22:32:36 GMT+0200 (Central European Summer Time)': {
+    id: 'undefined-0x2738d13E81e30bC615766A0410e7cF199FD59A83-Thu Jun 20 2024 22:32:36 GMT+0200 (Central European Summer Time)',
+    address: '0x2738d13E81e30bC615766A0410e7cF199FD59A83',
+    filePath: '@openzeppelin/contracts-upgradeable/proxy/utils/Initializable.sol',
+    contractName: 'Initializable',
+    date: '2024-06-20T20:32:36.361Z',
+    receipts: [
+      {
+        verifier: {
+          name: 'Sourcify Localhost',
+          apiUrl: 'http://localhost:5555/',
+          enabled: true,
+        },
+        status: 'error',
+        receiptId: null,
+        message: 'Failed to fetch',
+      },
+      {
+        verifier: {
+          name: 'Etherscan',
+          apiUrl: 'https://api.etherscan.io',
+          enabled: true,
+          apiKey: 'API_KEY',
+        },
+        status: 'error',
+        receiptId: null,
+        message: 'Failed to fetch',
+      },
+    ],
+  },
+}
+
+module.exports = json