Add retry button for failed verifications

Author: hsy822

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

@@ -1,16 +1,19 @@
 import React, { useMemo } from 'react'
-import { SubmittedContract, VerificationReceipt } from '../types'
+import { SubmittedContract, VerificationReceipt, VerificationStatus } from '../types'
 import { shortenAddress, CustomTooltip } from '@remix-ui/helper'
 import { AppContext } from '../AppContext'
 import { CopyToClipboard } from '@remix-ui/clipboard'
+import { getVerifier } from '../Verifiers'
+import { CompilerAbstract } from '@remix-project/remix-solidity'
+import { mergeChainSettingsWithDefaults } from '../utils'
 
 interface AccordionReceiptProps {
   contract: SubmittedContract
   index: number
 }
 
 export const AccordionReceipt: React.FC<AccordionReceiptProps> = ({ contract, index }) => {
-  const { chains } = React.useContext(AppContext)
+  const { chains, settings, compilationOutput, setSubmittedContracts } = React.useContext(AppContext)
 
   const [expanded, setExpanded] = React.useState(false)
 
@@ -25,6 +28,107 @@ export const AccordionReceipt: React.FC<AccordionReceiptProps> = ({ contract, in
     setExpanded(!expanded)
   }
 
+  const isRetryAvailable = useMemo(() => {
+    if (!compilationOutput) return false
+    
+    const compilerAbstract = Object.values(compilationOutput || {}).find(
+      (abstract: CompilerAbstract) => 
+        abstract.data.contracts[contract.filePath] &&
+        abstract.data.contracts[contract.filePath][contract.contractName]
+    )
+    return !!compilerAbstract
+  }, [compilationOutput, contract.filePath, contract.contractName])
+
+  const handleRetryVerification = async (receipt: VerificationReceipt) => {
+    setSubmittedContracts(prev => {
+      const currentContract = prev[contract.id]
+      if (!currentContract) return prev
+      
+      return {
+        ...prev,
+        [contract.id]: {
+          ...currentContract,
+          receipts: (currentContract.receipts || []).map(r =>
+            r === receipt ? { ...r, status: 'pending' as VerificationStatus, message: 'Retrying...' } : r
+          ),
+          proxyReceipts: (currentContract.proxyReceipts || []).map(r =>
+            r === receipt ? { ...r, status: 'pending' as VerificationStatus, message: 'Retrying...' } : r
+          )
+        }
+      }
+    })
+
+    try {
+      const chainSettings = mergeChainSettingsWithDefaults(contract.chainId, settings)
+      const verifierSettings = chainSettings.verifiers[receipt.verifierInfo.name]
+
+      if (!verifierSettings || !verifierSettings.apiUrl) {
+        throw new Error('Verifier settings or apiUrl not found.')
+      }
+      
+      const verifier = getVerifier(receipt.verifierInfo.name, verifierSettings)
+
+      let response
+
+      if (receipt.isProxyReceipt) {
+        if (!verifier.verifyProxy) {
+          throw new Error(`Proxy verification not supported by ${receipt.verifierInfo.name}`)
+        }
+        response = await verifier.verifyProxy(contract)
+      } else {
+        const compilerAbstract = Object.values(compilationOutput || {}).find(
+          (abstract: CompilerAbstract) => 
+            abstract.data.contracts[contract.filePath] &&
+            abstract.data.contracts[contract.filePath][contract.contractName]
+        )
+        
+        if (!compilerAbstract) {
+          const userMessage = `Compilation output not found. Please re-compile the contract file ('${contract.filePath}') and try again.`
+          console.error(`[Retry] ${userMessage}`)
+          throw new Error(userMessage) 
+        }
+
+        response = await verifier.verify(contract, compilerAbstract)
+      }
+
+      setSubmittedContracts(prev => {
+        const currentContract = prev[contract.id]
+        if (!currentContract) return prev
+        return {
+          ...prev,
+          [contract.id]: {
+            ...currentContract,
+            receipts: (currentContract.receipts || []).map(r =>
+              r === receipt ? { ...r, ...response, receiptId: response.receiptId || undefined, status: response.status, message: response.message } : r
+            ),
+            proxyReceipts: (currentContract.proxyReceipts || []).map(r =>
+              r === receipt ? { ...r, ...response, receiptId: response.receiptId || undefined, status: response.status, message: response.message } : r
+            )
+          }
+        }
+      })
+
+    } catch (e) {
+      console.error(e)
+      setSubmittedContracts(prev => {
+        const currentContract = prev[contract.id]
+        if (!currentContract) return prev
+        return {
+          ...prev,
+          [contract.id]: {
+            ...currentContract,
+            receipts: (currentContract.receipts || []).map(r =>
+              r === receipt ? { ...r, status: 'failed' as VerificationStatus, message: e.message } : r
+            ),
+            proxyReceipts: (currentContract.proxyReceipts || []).map(r =>
+              r === receipt ? { ...r, status: 'failed' as VerificationStatus, message: e.message } : r
+            )
+          }
+        }
+      })
+    }
+  }
+
   return (
     <div className={`${expanded ? 'bg-light' : 'border-bottom '}`}>
       <div className="d-flex flex-row align-items-center">
@@ -65,7 +169,7 @@ export const AccordionReceipt: React.FC<AccordionReceiptProps> = ({ contract, in
 
         <div>
           <span className="fw-bold">Verified at: </span>
-          <ReceiptsBody receipts={contract.receipts} />
+          <ReceiptsBody receipts={contract.receipts} handleRetry={handleRetryVerification} isRetryAvailable={isRetryAvailable} />
         </div>
 
         {hasProxy && (
@@ -79,7 +183,7 @@ export const AccordionReceipt: React.FC<AccordionReceiptProps> = ({ contract, in
             </div>
             <div>
               <span className="fw-bold">Proxy verified at: </span>
-              <ReceiptsBody receipts={contract.proxyReceipts} />
+              <ReceiptsBody receipts={contract.proxyReceipts} handleRetry={handleRetryVerification} isRetryAvailable={isRetryAvailable} />
             </div>
           </>
         )}
@@ -88,13 +192,17 @@ export const AccordionReceipt: React.FC<AccordionReceiptProps> = ({ contract, in
   )
 }
 
-const ReceiptsBody = ({ receipts }: { receipts: VerificationReceipt[] }) => {
+const ReceiptsBody = ({ receipts, handleRetry, isRetryAvailable }: { 
+  receipts: VerificationReceipt[], 
+  handleRetry: (receipt: VerificationReceipt) => void,
+  isRetryAvailable: boolean
+}) => {
   return (
     <ul className="list-group">
       {receipts.map((receipt) => (
         <li
           key={`${receipt.contractId}-${receipt.verifierInfo.name}${receipt.isProxyReceipt ? '-proxy' : ''}-${receipt.receiptId}`}
-          className="list-group-item d-flex flex-row align-items-center"
+          className="list-group-item d-flex flex-row align-items-baseline"
         >
           <CustomTooltip
             placement="top"
@@ -109,12 +217,23 @@ const ReceiptsBody = ({ receipts }: { receipts: VerificationReceipt[] }) => {
                   <i className="fas fa-check-double text-success px-1"></i> :
                   receipt.status === 'failed' ?
                     <i className="fas fa-xmark text-warning px-1"></i> :
-                    ['pending', 'awaiting implementation verification'].includes(receipt.status) ?
+                    ['pending', 'awaiting implementation verification', 'Retrying...'].includes(receipt.status) ?
                       <i className="fas fa-spinner fa-spin px-1"></i> :
                       <i className="fas fa-question px-1"></i>
               }
             </span>
           </CustomTooltip>
+          {receipt.status === 'failed' && isRetryAvailable && (
+            <CustomTooltip placement="top" tooltipText="Retry Verification">
+              <button
+                className="btn btn-sm p-0 me-2"
+                style={{ border: 'none', background: 'none', color: 'var(--primary)' }}
+                onClick={() => handleRetry(receipt)}
+              >
+                <i className="fas fa-redo" style={{ fontSize: '0.6rem' }}></i>
+              </button>
+            </CustomTooltip>
+          )}
           <div className="d-flex flex-row w-100 justify-content-between">
             <div>
               <CustomTooltip placement="top" tooltipClasses=" text-break" tooltipText={`API: ${receipt.verifierInfo.apiUrl}`}>