Make receipts view prettier

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

@@ -1,12 +1,14 @@
 import React from 'react'
 import { SubmittedContract } from '../types/VerificationTypes'
+import { shortenAddress, CustomTooltip } from '@remix-ui/helper'
 
 interface AccordionReceiptProps {
   contract: SubmittedContract
+  chainName: string
   index: number
 }
 
-export const AccordionReceipt: React.FC<AccordionReceiptProps> = ({ contract, index }) => {
+export const AccordionReceipt: React.FC<AccordionReceiptProps> = ({ contract, index, chainName }) => {
   const [expanded, setExpanded] = React.useState(false)
 
   const toggleAccordion = () => {
@@ -14,50 +16,59 @@ export const AccordionReceipt: React.FC<AccordionReceiptProps> = ({ contract, in
   }
 
   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 key={contract.address + '-' + index} className="bg-secondary p-3 accordion-item" id={contract.address + '-accordion-' + index}>
+      <h3 className="accordion-header" id={`heading${index}`}>
+        <button className="accordion-button d-flex flex-row align-items-center text-left w-100 border-0" type="button" onClick={toggleAccordion} aria-expanded={expanded} aria-controls={`collapse${index}`}>
+          <span className={`accordion-arrow ${expanded ? 'fa-angle-down' : 'fa-angle-right'} fa w-0`} style={{ width: '0' }}></span>
+          <span className="pl-4" style={{ fontSize: '1rem' }}>
+            <CustomTooltip tooltipText={contract.address}>
+              <span>{shortenAddress(contract.address)}</span>
+            </CustomTooltip>{' '}
+            on {chainName}
+          </span>
+        </button>
+      </h3>
+      <div id={`collapse${index}`} className={`accordion-collapse p-2 collapse ${expanded ? 'show' : ''}`} aria-labelledby={`heading${index}`} data-bs-parent="#receiptsAccordion">
+        <div className="accordion-body">
           <div>
-            {contract.address} on {contract.chainId} (Add chain name)
+            <span className="font-weight-bold">Chain ID: </span>
+            {contract.chainId}
           </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>
+            <span className="font-weight-bold">File: </span>
+            {contract.filePath}
+          </div>
+          <div>
+            <span className="font-weight-bold">Contract: </span>
+            {contract.contractName}
+          </div>
+          <div>
+            <span className="font-weight-bold">Submission: </span>
+            {contract.date.toLocaleString()}
+          </div>
+          <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>

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

@@ -5,15 +5,23 @@ import { AccordionReceipt } from '../components/AccordionReceipt'
 import { SubmittedContract } from '../types/VerificationTypes'
 
 export const ReceiptsView = () => {
+  const { chains } = React.useContext(AppContext)
   // const {submittedContracts} = React.useContext(AppContext);
 
+  const getChainName = (chainId: string) => {
+    return chains.find((chain) => chain.chainId === parseInt(chainId))?.name ?? 'Unknown Chain'
+  }
+
   const submittedContracts = example as unknown as Record<string,SubmittedContract>
   console.log('submittedContracts', submittedContracts)
   return (
-    <>
+    <div className="accordion" id="receiptsAccordion">
+      {Object.values(submittedContracts).map((contract, index) => (
+        <AccordionReceipt contract={contract} index={index} chainName={getChainName(contract.chainId)} />
+      ))}
       {Object.values(submittedContracts).map((contract, index) => (
-        <AccordionReceipt contract={contract} index={index} />
+        <AccordionReceipt contract={contract} index={index+1} chainName={getChainName(contract.chainId)} />
       ))}
-    </>
+    </div>
   )
 }

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

@@ -28,6 +28,7 @@ const json = {
         message: 'Failed to fetch',
       },
     ],
+    chainId: "1"
   },
 }