Add lookup links to AccordionReceipt

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

@@ -80,7 +80,8 @@ export class EtherscanVerifier extends AbstractVerifier {
       throw new Error(verificationResponse.result)
     }
 
-    return { status: 'pending', receiptId: verificationResponse.result }
+    const lookupUrl = this.getContractCodeUrl(submittedContract.address)
+    return { status: 'pending', receiptId: verificationResponse.result, lookupUrl }
   }
 
   async verifyProxy(submittedContract: SubmittedContract): Promise<VerificationResponse> {

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

@@ -87,13 +87,16 @@ export class SourcifyVerifier extends AbstractVerifier {
 
     // Map to a user-facing status message
     let status: VerificationStatus = 'unknown'
+    let lookupUrl: string | undefined = undefined
     if (verificationResponse.result[0].status === 'perfect' || verificationResponse.result[0].status === 'full') {
       status = 'fully verified'
+      lookupUrl = this.getContractCodeUrl(submittedContract.address, submittedContract.chainId, true)
     } else if (verificationResponse.result[0].status === 'partial') {
       status = 'partially verified'
+      lookupUrl = this.getContractCodeUrl(submittedContract.address, submittedContract.chainId, false)
     }
 
-    return { status, receiptId: null }
+    return { status, receiptId: null, lookupUrl }
   }
 
   async lookup(contractAddress: string, chainId: string): Promise<LookupResponse> {

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

@@ -103,9 +103,12 @@ const App = () => {
               } else {
                 response = await verifier.checkVerificationStatus(receiptId)
               }
-              const { status, message } = response
+              const { status, message, lookupUrl } = response
               receipt.status = status
               receipt.message = message
+              if (lookupUrl) {
+                receipt.lookupUrl = lookupUrl
+              }
             } catch (e) {
               receipt.failedChecks++
               // Only retry 5 times

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

@@ -42,11 +42,11 @@ export const AccordionReceipt: React.FC<AccordionReceiptProps> = ({ contract, in
           </div>
           <div>
             <span className="font-weight-bold">File: </span>
-            {contract.filePath}
+            <span style={{ wordBreak: 'break-word' }}>{contract.filePath}</span>
           </div>
           <div>
             <span className="font-weight-bold">Contract: </span>
-            {contract.contractName}
+            <span style={{ wordBreak: 'break-word' }}>{contract.contractName}</span>
           </div>
           <div>
             <span className="font-weight-bold">Submission: </span>
@@ -89,8 +89,8 @@ const ReceiptsBody = ({ receipts }: { receipts: VerificationReceipt[] }) => {
             <th>API URL</th>
             <th>Status</th>
             <th>Message</th>
+            <th>Link</th>
             <th>ReceiptID</th>
-            {/*TODO add link*/}
           </tr>
         </thead>
         <tbody>
@@ -98,8 +98,13 @@ const ReceiptsBody = ({ receipts }: { receipts: VerificationReceipt[] }) => {
             <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>
+                <span className="font-weight-bold" style={{ textTransform: 'capitalize' }}>
+                  {receipt.status}
+                </span>
+              </td>
               <td>{receipt.message}</td>
+              <td>{!!receipt.lookupUrl && <a href={receipt.lookupUrl} target="_blank" className="fa fas fa-arrow-up-right-from-square"></a>}</td>
               <td>{receipt.receiptId}</td>
             </tr>
           ))}

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

@@ -30,6 +30,7 @@ export interface VerificationReceipt {
   verifierInfo: VerifierInfo
   status: VerificationStatus
   message?: string
+  lookupUrl?: string
   contractId: string
   isProxyReceipt: boolean
   failedChecks: number
@@ -62,6 +63,7 @@ export interface VerificationResponse {
   status: VerificationStatus
   receiptId: string | null
   message?: string
+  lookupUrl?: string
 }
 
 export interface SourceFile {

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

@@ -134,9 +134,12 @@ export const VerifyView = () => {
         } else {
           response = await verifier.verify(newSubmittedContract, compilerAbstract)
         }
-        const { status, message, receiptId } = response
+        const { status, message, receiptId, lookupUrl } = response
         receipt.status = status
         receipt.message = message
+        if (lookupUrl) {
+          receipt.lookupUrl = lookupUrl
+        }
         if (receiptId) {
           receipt.receiptId = receiptId
         }