Adapt AccordionReceipt to proxy receipts

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

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { SubmittedContract } from '../types'
+import { SubmittedContract, VerificationReceipt } from '../types'
 import { shortenAddress, CustomTooltip } from '@remix-ui/helper'
 import { AppContext } from '../AppContext'
 
@@ -36,15 +36,31 @@ export const AccordionReceipt: React.FC<AccordionReceiptProps> = ({ contract, in
       </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>
+            <span className="font-weight-bold">Chain ID: </span>
+            {contract.chainId}
+          </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>
+            {new Date(contract.date).toLocaleString()}
+          </div>
           {!contract.proxyAddress ? (
-            <ReceiptsBody contract={contract}></ReceiptsBody>
+            <ReceiptsBody receipts={contract.receipts}></ReceiptsBody>
           ) : (
             <>
               <div>
                 <span className="font-weight-bold" style={{ fontSize: '1.2rem' }}>
                   Implementation
                 </span>
-                <ReceiptsBody contract={contract}></ReceiptsBody>
+                <ReceiptsBody receipts={contract.receipts}></ReceiptsBody>
               </div>
               <div className="mt-3">
                 <span className="font-weight-bold" style={{ fontSize: '1.2rem' }}>
@@ -53,8 +69,7 @@ export const AccordionReceipt: React.FC<AccordionReceiptProps> = ({ contract, in
                 <CustomTooltip tooltipText={contract.proxyAddress}>
                   <span>{shortenAddress(contract.proxyAddress)}</span>
                 </CustomTooltip>
-                {/* TODO add body for proxies */}
-                {/* <ReceiptsBody contract={contract.proxy}></ReceiptsBody> */}
+                <ReceiptsBody receipts={contract.proxyReceipts}></ReceiptsBody>
               </div>
             </>
           )}
@@ -64,50 +79,32 @@ export const AccordionReceipt: React.FC<AccordionReceiptProps> = ({ contract, in
   )
 }
 
-const ReceiptsBody = ({ contract }: { contract: SubmittedContract }) => {
+const ReceiptsBody = ({ receipts }: { receipts: VerificationReceipt[] }) => {
   return (
-    <>
-      <div>
-        <span className="font-weight-bold">Chain ID: </span>
-        {contract.chainId}
-      </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>
-        {new Date(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>
-              {/*TODO add link*/}
+    <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>
+            {/*TODO add link*/}
+          </tr>
+        </thead>
+        <tbody>
+          {receipts.map((receipt) => (
+            <tr key={`${receipt.isProxyReceipt ? 'proxy' : ''}-${receipt.receiptId}-${receipt.verifierInfo.name}`}>
+              <td>{receipt.verifierInfo.name}</td>
+              <td>{receipt.verifierInfo.apiUrl}</td>
+              <td>{receipt.status}</td>
+              <td>{receipt.message}</td>
+              <td>{receipt.receiptId}</td>
             </tr>
-          </thead>
-          <tbody>
-            {contract.receipts.map((receipt) => (
-              <tr key={`${contract.id}-${receipt.verifierInfo.name}`}>
-                <td>{receipt.verifierInfo.name}</td>
-                <td>{receipt.verifierInfo.apiUrl}</td>
-                <td>{receipt.status}</td>
-                <td>{receipt.message}</td>
-                <td>{receipt.receiptId}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </>
+          ))}
+        </tbody>
+      </table>
+    </div>
   )
 }