Add link to verification details in ReceiptsView and fix compatibility with legacy data

Author: manuelwedler

apps/contract-verification/src/app/Verifiers/SourcifyVerifier.ts

@@ -56,6 +56,10 @@ interface SourcifyLookupResponse {
 export class SourcifyVerifier extends AbstractVerifier {
   LOOKUP_STORE_DIR = 'sourcify-verified'
 
+  constructor(apiUrl: string, explorerUrl: string, protected receiptsUrl?: string) {
+    super(apiUrl, explorerUrl)
+  }
+
   async verify(submittedContract: SubmittedContract, compilerAbstract: CompilerAbstract): Promise<VerificationResponse> {
     const metadata = JSON.parse(compilerAbstract.data.contracts[submittedContract.filePath][submittedContract.contractName].metadata)
     const compilerVersion = `v${metadata.compiler.version}`
@@ -92,10 +96,15 @@ export class SourcifyVerifier extends AbstractVerifier {
     return {
       status: 'pending',
       receiptId: verificationResponse.verificationId,
+      receiptLookupUrl: this.receiptLookupUrl(verificationResponse.verificationId),
       lookupUrl: this.getContractCodeUrl(submittedContract.address, submittedContract.chainId),
     }
   }
 
+  receiptLookupUrl(receiptId: string): string {
+    return `${this.receiptsUrl}/${receiptId}`
+  }
+
   async checkVerificationStatus(receiptId: string, chainId: string): Promise<VerificationResponse> {
     const response = await fetch(`${this.apiUrl}/v2/verify/${receiptId}`, {
       method: 'GET',

apps/contract-verification/src/app/Verifiers/index.ts

@@ -22,7 +22,7 @@ export function getVerifier(identifier: VerifierIdentifier, settings: VerifierSe
     if (settings?.useV1API) {
       return new SourcifyV1Verifier(settings.apiUrl, settings.explorerUrl)
     }
-    return new SourcifyVerifier(settings.apiUrl, settings.explorerUrl)
+    return new SourcifyVerifier(settings.apiUrl, settings.explorerUrl, settings.receiptsUrl)
   case 'Etherscan':
     if (!settings?.explorerUrl) {
       throw new Error('The Etherscan verifier requires an explorer URL.')

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

@@ -105,20 +105,27 @@ const ReceiptsBody = ({ receipts }: { receipts: VerificationReceipt[] }) => {
             <span className="mr-2">
               {['verified', 'partially verified', 'already verified'].includes(receipt.status) ?
                 <i className="fas fa-check text-success px-1"></i> :
-                receipt.status === 'exactly verified' ?
+                receipt.status === 'exactly verified' || receipt.status === 'fully verified' ?
                   <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) ?
-                      <i className="fas fa-spinner fa-spin"></i> :
-                      <i className="fas fa-question"></i>
+                      <i className="fas fa-spinner fa-spin px-1"></i> :
+                      <i className="fas fa-question px-1"></i>
               }
             </span>
           </CustomTooltip>
           <div className="d-flex flex-row w-100 justify-content-between">
-            <CustomTooltip placement="top" tooltipClasses=" text-break" tooltipText={`API: ${receipt.verifierInfo.apiUrl}`}>
-              <span className="font-weight-bold pr-2">{receipt.verifierInfo.name}</span>
-            </CustomTooltip>
+            <div>
+              <CustomTooltip placement="top" tooltipClasses=" text-break" tooltipText={`API: ${receipt.verifierInfo.apiUrl}`}>
+                <span className="font-weight-bold pr-2">{receipt.verifierInfo.name}</span>
+              </CustomTooltip>
+              {
+                !!receipt.receiptLookupUrl && <CustomTooltip placement="top" tooltipClasses=" text-break" tooltipText="View verification details">
+                  <a href={receipt.receiptLookupUrl} target="_blank" className="fa fas fa-receipt" rel="noreferrer"></a>
+                </CustomTooltip>
+              }
+            </div>
             <div className="ml-1">
               {!!receipt.lookupUrl && receipt.verifierInfo.name === 'Blockscout' ?
                 <CopyToClipboard classList="pr-0 py-0" tip="Copy code URL" content={receipt.lookupUrl} direction="top" /> :

apps/contract-verification/src/app/types/SettingsTypes.ts

@@ -5,6 +5,7 @@ export interface VerifierSettings {
   explorerUrl?: string
   apiKey?: string
   useV1API?: boolean // For Sourcify, whether to use the v1 API
+  receiptsUrl?: string
 }
 
 export type SettingsForVerifier = Partial<Record<VerifierIdentifier, VerifierSettings>>

apps/contract-verification/src/app/types/VerificationTypes.ts

@@ -31,6 +31,7 @@ export interface VerificationReceipt {
   status: VerificationStatus
   message?: string
   lookupUrl?: string
+  receiptLookupUrl?: string
   contractId: string
   isProxyReceipt: boolean
   failedChecks: number
@@ -55,13 +56,17 @@ export interface SubmittedContracts {
   [id: string]: SubmittedContract
 }
 
-export type VerificationStatus = 'exactly verified' | 'verified' | 'already verified' | 'failed' | 'pending' | 'awaiting implementation verification' | 'not verified' | 'lookup failed' | 'unknown'
+// Keep fully and partially verified for compatibility with old data in local storage
+type SourcifyStatus = 'exactly verified' | 'verified' | 'fully verified' | 'partially verified'
+type EtherscanStatus = 'verified' | 'already verified'
+export type VerificationStatus = SourcifyStatus | EtherscanStatus | 'failed' | 'pending' | 'awaiting implementation verification' | 'not verified' | 'lookup failed' | 'unknown'
 
 export interface VerificationResponse {
   status: VerificationStatus
   receiptId: string | null
   message?: string
   lookupUrl?: string
+  receiptLookupUrl?: string
 }
 
 export interface SourceFile {

apps/contract-verification/src/app/utils/default-apis.json

@@ -1,7 +1,8 @@
 {
   "Sourcify": {
     "apiUrl": "https://sourcify.dev/server",
-    "explorerUrl": "https://repo.sourcify.dev"
+    "explorerUrl": "https://repo.sourcify.dev",
+    "receiptsUrl": "https://verify.sourcify.dev/jobs"
   },
   "Etherscan": {
     "apiUrl": "https://api.etherscan.io/v2",

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

@@ -53,6 +53,7 @@ export const SettingsView = () => {
               </div>
             </CustomTooltip>
             <ConfigInput label="Repo URL" id="sourcify-explorer-url" secret={false} initialValue={chainSettings.verifiers['Sourcify']?.explorerUrl ?? ''} saveResult={(result) => handleChange('Sourcify', 'explorerUrl', result)} />
+            <ConfigInput label="Jobs URL" id="sourcify-receipts-url" secret={false} initialValue={chainSettings.verifiers['Sourcify']?.receiptsUrl ?? ''} saveResult={(result) => handleChange('Sourcify', 'receiptsUrl', result)} />
           </div>
           <div className="p-2 my-2 border">
             <span className="font-weight-bold">Etherscan - {selectedChain.name}</span>

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

@@ -152,7 +152,7 @@ export const VerifyView = () => {
         } else {
           response = await verifier.verify(newSubmittedContract, compilerAbstract)
         }
-        const { status, message, receiptId, lookupUrl } = response
+        const { status, message, receiptId, lookupUrl, receiptLookupUrl } = response
         receipt.status = status
         receipt.message = message
         if (lookupUrl) {
@@ -161,6 +161,9 @@ export const VerifyView = () => {
         if (receiptId) {
           receipt.receiptId = receiptId
         }
+        if (receiptLookupUrl) {
+          receipt.receiptLookupUrl = receiptLookupUrl
+        }
       } catch (e) {
         const err = e as Error
         receipt.status = 'failed'