Add open in remix button to LookupView

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

@@ -1,11 +1,13 @@
 import React from 'react'
 import type { ThemeType, Chain, SubmittedContracts, ContractVerificationSettings } from './types'
 import { CompilerAbstract } from '@remix-project/remix-solidity'
+import { ContractVerificationPluginClient } from './ContractVerificationPluginClient'
 
 // Define the type for the context
 type AppContextType = {
   themeType: ThemeType
   setThemeType: (themeType: ThemeType) => void
+  clientInstance: ContractVerificationPluginClient
   settings: ContractVerificationSettings
   setSettings: React.Dispatch<React.SetStateAction<ContractVerificationSettings>>
   chains: Chain[]
@@ -20,6 +22,7 @@ const defaultContextValue: AppContextType = {
   setThemeType: (themeType: ThemeType) => {
     console.log('Calling Set Theme Type')
   },
+  clientInstance: {} as ContractVerificationPluginClient,
   settings: { chains: {} },
   setSettings: () => {},
   chains: [],

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

@@ -3,8 +3,6 @@ import { AbstractVerifier } from './AbstractVerifier'
 import type { LookupResponse, SourceFile, SubmittedContract, VerificationResponse, VerificationStatus } from '../types'
 import { ethers } from 'ethers'
 
-const SOURCIFY_DIR = 'sourcify-verified'
-
 interface SourcifyVerificationRequest {
   address: string
   chain: string
@@ -45,6 +43,8 @@ interface SourcifyLookupResponse {
 }
 
 export class SourcifyVerifier extends AbstractVerifier {
+  SOURCIFY_DIR = 'sourcify-verified'
+
   async verify(submittedContract: SubmittedContract, compilerAbstract: CompilerAbstract): Promise<VerificationResponse> {
     const metadataStr = compilerAbstract.data.contracts[submittedContract.filePath][submittedContract.contractName].metadata
     const sources = compilerAbstract.source.sources
@@ -145,7 +145,7 @@ export class SourcifyVerifier extends AbstractVerifier {
   processReceivedFiles(files: SourcifyFile[], contractAddress: string): { sourceFiles: SourceFile[]; targetFilePath?: string } {
     const result: SourceFile[] = []
     let targetFilePath: string
-    const filePrefix = `/${SOURCIFY_DIR}/${contractAddress}`
+    const filePrefix = `/${this.SOURCIFY_DIR}/${contractAddress}`
 
     for (const file of files) {
       let filePath: string

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

@@ -134,7 +134,7 @@ const App = () => {
   }, [submittedContracts])
 
   return (
-    <AppContext.Provider value={{ themeType, setThemeType, settings, setSettings, chains, compilationOutput, submittedContracts, setSubmittedContracts }}>
+    <AppContext.Provider value={{ themeType, setThemeType, clientInstance: plugin, settings, setSettings, chains, compilationOutput, submittedContracts, setSubmittedContracts }}>
       <DisplayRoutes />
     </AppContext.Provider>
   )

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

@@ -8,7 +8,7 @@ import { CustomTooltip } from '@remix-ui/helper'
 import { getVerifier } from '../Verifiers'
 
 export const LookupView = () => {
-  const { settings } = useContext(AppContext)
+  const { settings, clientInstance } = useContext(AppContext)
   const [selectedChain, setSelectedChain] = useState<Chain | undefined>()
   const [contractAddress, setContractAddress] = useState('')
   const [contractAddressError, setContractAddressError] = useState('')
@@ -42,6 +42,21 @@ export const LookupView = () => {
     }
   }
 
+  const handleOpenInRemix = async (lookupResponse: LookupResponse) => {
+    for (const source of lookupResponse.sourceFiles ?? []) {
+      try {
+        await clientInstance.call('fileManager', 'setFile', source.path, source.content)
+      } catch (err) {
+        console.error(`Error while creating file ${source.path}: ${err.message}`)
+      }
+    }
+    try {
+      await clientInstance.call('fileManager', 'open', lookupResponse.targetFilePath)
+    } catch (err) {
+      console.error(`Error focusing file ${lookupResponse.targetFilePath}: ${err.message}`)
+    }
+  }
+
   return (
     <>
       <form onSubmit={handleLookup}>
@@ -57,9 +72,8 @@ export const LookupView = () => {
         {chainSettings &&
           VERIFIERS.map((verifierId) => {
             if (!validConfiguration(chainSettings, verifierId)) {
-              const tooltipText = 'Configure API in the settings'
               return (
-                <div key={verifierId} className="pt-2">
+                <div key={verifierId} className="pt-4">
                   <div>
                     <span className="font-weight-bold text-secondary">{verifierId}</span>{' '}
                     <CustomTooltip tooltipText="Configure the API in the settings">
@@ -73,7 +87,7 @@ export const LookupView = () => {
             }
 
             return (
-              <div key={verifierId} className="pt-2">
+              <div key={verifierId} className="pt-4">
                 <div>
                   <span className="font-weight-bold">{verifierId}</span> <span className="text-secondary">{chainSettings.verifiers[verifierId].apiUrl}</span>
                 </div>
@@ -84,11 +98,20 @@ export const LookupView = () => {
                 )}
                 {!loadingVerifiers[verifierId] && !!lookupResults[verifierId] && (
                   <div>
-                    Status:{' '}
+                    <div className="pt-2">
-                    <span className="font-weight-bold" style={{ textTransform: 'capitalize' }}>
+                      Status:{' '}
-                      {lookupResults[verifierId].status}
+                      <span className="font-weight-bold" style={{ textTransform: 'capitalize' }}>
-                    </span>{' '}
+                        {lookupResults[verifierId].status}
-                    {!!lookupResults[verifierId].lookupUrl && <a href={lookupResults[verifierId].lookupUrl} target="_blank" className="fa fas fa-arrow-up-right-from-square"></a>}
+                      </span>{' '}
+                      {!!lookupResults[verifierId].lookupUrl && <a href={lookupResults[verifierId].lookupUrl} target="_blank" className="fa fas fa-arrow-up-right-from-square"></a>}
+                    </div>
+                    {!!lookupResults[verifierId].sourceFiles && lookupResults[verifierId].sourceFiles.length > 0 && (
+                      <div className="pt-2 d-flex flex-row justify-content-center">
+                        <button className="btn btn-secondary bg-transparent text-body" onClick={() => handleOpenInRemix(lookupResults[verifierId])}>
+                          <i className="fas fa-download"></i> Open in Remix
+                        </button>
+                      </div>
+                    )}
                   </div>
                 )}
               </div>