From bbfc497a68773ef9e612946d72b657fcf423d313 Mon Sep 17 00:00:00 2001
From: Manuel Wedler <manuel@wedler.dev>
Date: Fri, 2 Aug 2024 15:56:33 +0200
Subject: [PATCH] Add lookup links to AccordionReceipt

---
 .../src/app/Verifiers/EtherscanVerifier.ts          |  3 ++-
 .../src/app/Verifiers/SourcifyVerifier.ts           |  5 ++++-
 apps/contract-verification/src/app/app.tsx          |  5 ++++-
 .../src/app/components/AccordionReceipt.tsx         | 13 +++++++++----
 .../src/app/types/VerificationTypes.ts              |  2 ++
 .../src/app/views/VerifyView.tsx                    |  5 ++++-
 6 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/apps/contract-verification/src/app/Verifiers/EtherscanVerifier.ts b/apps/contract-verification/src/app/Verifiers/EtherscanVerifier.ts
index 526de822e2..f3a845fc71 100644
--- a/apps/contract-verification/src/app/Verifiers/EtherscanVerifier.ts
+++ b/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> {
diff --git a/apps/contract-verification/src/app/Verifiers/SourcifyVerifier.ts b/apps/contract-verification/src/app/Verifiers/SourcifyVerifier.ts
index fba0c77c36..ab5235e2aa 100644
--- a/apps/contract-verification/src/app/Verifiers/SourcifyVerifier.ts
+++ b/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> {
diff --git a/apps/contract-verification/src/app/app.tsx b/apps/contract-verification/src/app/app.tsx
index b1c81f6b32..b732e15af7 100644
--- a/apps/contract-verification/src/app/app.tsx
+++ b/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
diff --git a/apps/contract-verification/src/app/components/AccordionReceipt.tsx b/apps/contract-verification/src/app/components/AccordionReceipt.tsx
index 9d9b88ed7a..c0e357a6a6 100644
--- a/apps/contract-verification/src/app/components/AccordionReceipt.tsx
+++ b/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>
           ))}
diff --git a/apps/contract-verification/src/app/types/VerificationTypes.ts b/apps/contract-verification/src/app/types/VerificationTypes.ts
index 2b7d1aa9aa..f58df26381 100644
--- a/apps/contract-verification/src/app/types/VerificationTypes.ts
+++ b/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 {
diff --git a/apps/contract-verification/src/app/views/VerifyView.tsx b/apps/contract-verification/src/app/views/VerifyView.tsx
index 5f4c58fd50..d2f47201b6 100644
--- a/apps/contract-verification/src/app/views/VerifyView.tsx
+++ b/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
         }