From bbe2bff0667007eaa78e9e4c4e60aaf22b652883 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Mon, 21 Oct 2024 17:32:48 +0200
Subject: [PATCH] fixing buid

---
 .../src/app/components/ContractDropdown.tsx   |  7 +-
 .../src/app/components/NavMenu.tsx            |  3 +-
 .../src/app/views/LookupView.tsx              | 23 ++++--
 .../src/app/views/VerifyView.tsx              | 77 +++++++++++++++----
 apps/contract-verification/src/profile.json   |  2 +-
 apps/remix-ide/src/app/plugins/matomo.ts      |  2 +-
 6 files changed, 86 insertions(+), 28 deletions(-)

diff --git a/apps/contract-verification/src/app/components/ContractDropdown.tsx b/apps/contract-verification/src/app/components/ContractDropdown.tsx
index 99a1363cf1..b307aad1e4 100644
--- a/apps/contract-verification/src/app/components/ContractDropdown.tsx
+++ b/apps/contract-verification/src/app/components/ContractDropdown.tsx
@@ -43,7 +43,12 @@ export const ContractDropdown: React.FC<ContractDropdownProps> = ({ label, id, s
   return (
     <div className="form-group">
       <label htmlFor={id}>{label}</label>
-      <select value={selectedContract ? JSON.stringify(selectedContract) : ''} className={`form-control custom-select pr-4 ${!hasContracts ? 'disabled-cursor' : ''} ${!hasContracts ? 'text-muted' : ''}`} id={id} disabled={!hasContracts} onChange={handleSelectContract}>
+      <select value={selectedContract ? JSON.stringify(selectedContract) : ''}
+        className={`form-control custom-select pr-4 ${!hasContracts ? 'disabled-cursor text-warning' : ''}`}
+        id={id}
+        disabled={!hasContracts}
+        onChange={handleSelectContract}
+      >
         {hasContracts ? (
           Object.keys(compilationOutput).map((compilationTriggerFileName) => (
             <optgroup key={compilationTriggerFileName} label={`Compilation trigger: ${compilationTriggerFileName}`}>
diff --git a/apps/contract-verification/src/app/components/NavMenu.tsx b/apps/contract-verification/src/app/components/NavMenu.tsx
index 73e40d4bff..8cc9099ca9 100644
--- a/apps/contract-verification/src/app/components/NavMenu.tsx
+++ b/apps/contract-verification/src/app/components/NavMenu.tsx
@@ -23,12 +23,11 @@ const NavItem: React.FC<NavItemProps> = ({ to, icon, title }) => {
 
 export const NavMenu = () => {
   return (
-    <nav className="d-flex flex-row justify-start w-100">
+    <nav className="d-flex flex-row justify-content-between w-100">
       <NavItem to="/" icon={<i className="fas fa-home"></i>} title="Verify" />
       <NavItem to="/receipts" icon={<i className="fas fa-receipt"></i>} title="Receipts" />
       <NavItem to="/lookup" icon={<i className="fas fa-search"></i>} title="Lookup" />
       <NavItem to="/settings" icon={<i className="fas fa-cog"></i>} title="Settings" />
-      <div className="flex-grow-1"></div>
     </nav>
   )
 }
diff --git a/apps/contract-verification/src/app/views/LookupView.tsx b/apps/contract-verification/src/app/views/LookupView.tsx
index 14d9118c23..de09888718 100644
--- a/apps/contract-verification/src/app/views/LookupView.tsx
+++ b/apps/contract-verification/src/app/views/LookupView.tsx
@@ -60,6 +60,10 @@ export const LookupView = () => {
     }
   }
 
+  const sendToMatomo = async (eventAction: string, eventName: string) => {
+    await clientInstance.call('matomo' as any, 'track', ['trackEvent', 'ContractVerification', eventAction, eventName]);
+  }
+  
   const handleOpenInRemix = async (lookupResponse: LookupResponse) => {
     for (const source of lookupResponse.sourceFiles ?? []) {
       try {
@@ -70,6 +74,7 @@ export const LookupView = () => {
     }
     try {
       await clientInstance.call('fileManager', 'open', lookupResponse.targetFilePath)
+      await sendToMatomo('lookup', "openInRemix On: " + selectedChain)
     } catch (err) {
       console.error(`Error focusing file ${lookupResponse.targetFilePath}: ${err.message}`)
     }
@@ -79,15 +84,20 @@ export const LookupView = () => {
     <>
       <form onSubmit={handleLookup}>
         <SearchableChainDropdown label="Chain" id="network-dropdown" selectedChain={selectedChain} setSelectedChain={setSelectedChain} />
-
-        <ContractAddressInput label="Contract Address" id="contract-address" contractAddress={contractAddress} setContractAddress={setContractAddress} contractAddressError={contractAddressError} setContractAddressError={setContractAddressError} />
-
-        <button type="submit" className="btn btn-primary" disabled={submitDisabled}>
+        <ContractAddressInput
+          label="Contract Address"
+          id="contract-address"
+          contractAddress={contractAddress}
+          setContractAddress={setContractAddress}
+          contractAddressError={contractAddressError}
+          setContractAddressError={setContractAddressError}
+        />
+        <button type="submit" className="btn w-100 btn-primary" disabled={submitDisabled}>
           Lookup
         </button>
       </form>
       <div className="pt-3">
-        {chainSettings &&
+        { chainSettings &&
           VERIFIERS.map((verifierId) => {
             if (!validConfiguration(chainSettings, verifierId)) {
               return (
@@ -149,7 +159,8 @@ export const LookupView = () => {
                 )}
               </div>
             )
-          })}
+          })
+        }
       </div>
     </>
   )
diff --git a/apps/contract-verification/src/app/views/VerifyView.tsx b/apps/contract-verification/src/app/views/VerifyView.tsx
index ff76b31a5b..20a0022d47 100644
--- a/apps/contract-verification/src/app/views/VerifyView.tsx
+++ b/apps/contract-verification/src/app/views/VerifyView.tsx
@@ -13,7 +13,7 @@ import { VerifyFormContext } from '../VerifyFormContext'
 import { useSourcifySupported } from '../hooks/useSourcifySupported'
 
 export const VerifyView = () => {
-  const { compilationOutput, setSubmittedContracts, settings } = useContext(AppContext)
+  const { compilationOutput, setSubmittedContracts, settings, clientInstance } = useContext(AppContext)
   const { selectedChain, setSelectedChain, contractAddress, setContractAddress, contractAddressError, setContractAddressError, selectedContract, setSelectedContract, proxyAddress, setProxyAddress, proxyAddressError, setProxyAddressError, abiEncodedConstructorArgs, setAbiEncodedConstructorArgs, abiEncodingError, setAbiEncodingError } = useContext(VerifyFormContext)
   const [enabledVerifiers, setEnabledVerifiers] = useState<Partial<Record<VerifierIdentifier, boolean>>>({})
   const [hasProxy, setHasProxy] = useState(!!proxyAddress)
@@ -41,9 +41,14 @@ export const VerifyView = () => {
     setEnabledVerifiers({ ...enabledVerifiers, [verifierId]: checked })
   }
 
+
+  const sendToMatomo = async (eventAction: string, eventName: string) => {
+    await clientInstance.call("matomo" as any, 'track', ['trackEvent', 'ContractVerification', eventAction, eventName]);
+  }
+
   const handleVerify = async (e) => {
     e.preventDefault()
-
+    
     const { triggerFilePath, filePath, contractName } = selectedContract
     const compilerAbstract = compilationOutput[triggerFilePath]
     if (!compilerAbstract) {
@@ -63,6 +68,9 @@ export const VerifyView = () => {
         name: verifierId as VerifierIdentifier,
       }
       receipts.push({ verifierInfo, status: 'pending', contractId, isProxyReceipt: false, failedChecks: 0 })
+      if (enabledVerifiers.Blockscout) await sendToMatomo('verify', "verifyWith: Blockscout On: " + selectedChain + " IsProxy: " + (hasProxy && !proxyAddress))
+      if (enabledVerifiers.Etherscan) await sendToMatomo('verify', "verifyWithEtherscan On: " + selectedChain + " IsProxy: " + (hasProxy && !proxyAddress))
+      if (enabledVerifiers.Sourcify) await sendToMatomo('verify', "verifyWithSourcify On: " + selectedChain + " IsProxy: " + (hasProxy && !proxyAddress))
     }
 
     const newSubmittedContract: SubmittedContract = {
@@ -173,13 +181,24 @@ export const VerifyView = () => {
   return (
     <form onSubmit={handleVerify}>
       <SearchableChainDropdown label="Chain" id="network-dropdown" selectedChain={selectedChain} setSelectedChain={setSelectedChain} />
-
-      <ContractAddressInput label="Contract Address" id="contract-address" contractAddress={contractAddress} setContractAddress={setContractAddress} contractAddressError={contractAddressError} setContractAddressError={setContractAddressError} />
-
-      <ContractDropdown label="Contract Name" id="contract-dropdown-1" selectedContract={selectedContract} setSelectedContract={setSelectedContract} />
-
-      {selectedContract && <ConstructorArguments abiEncodedConstructorArgs={abiEncodedConstructorArgs} setAbiEncodedConstructorArgs={setAbiEncodedConstructorArgs} selectedContract={selectedContract} abiEncodingError={abiEncodingError} setAbiEncodingError={setAbiEncodingError} />}
-
+      <ContractAddressInput
+        label="Contract Address"
+        id="contract-address"
+        contractAddress={contractAddress}
+        setContractAddress={setContractAddress}
+        contractAddressError={contractAddressError}
+        setContractAddressError={setContractAddressError}
+      />
+      <CustomTooltip tooltipText="Please compile and select the solidity contract you need to verify.">
+        <ContractDropdown label="Contract Name" id="contract-dropdown-1" selectedContract={selectedContract} setSelectedContract={setSelectedContract} />
+      </CustomTooltip>
+      {selectedContract && <ConstructorArguments
+        abiEncodedConstructorArgs={abiEncodedConstructorArgs}
+        setAbiEncodedConstructorArgs={setAbiEncodedConstructorArgs}
+        selectedContract={selectedContract}
+        abiEncodingError={abiEncodingError}
+        setAbiEncodingError={setAbiEncodingError}
+      />}
       <div className="pt-3">
         <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
           <input id="has-proxy" className="form-check-input custom-control-input" type="checkbox" checked={!!hasProxy} onChange={(e) => setHasProxy(e.target.checked)} />
@@ -187,7 +206,14 @@ export const VerifyView = () => {
             The deployed contract is behind a proxy
           </label>
         </div>
-        {hasProxy && <ContractAddressInput label="Proxy Address" id="proxy-address" contractAddress={proxyAddress} setContractAddress={setProxyAddress} contractAddressError={proxyAddressError} setContractAddressError={setProxyAddressError} />}
+        {hasProxy && <ContractAddressInput
+          label="Proxy Address"
+          id="proxy-address"
+          contractAddress={proxyAddress}
+          setContractAddress={setProxyAddress}
+          contractAddressError={proxyAddressError}
+          setContractAddressError={setProxyAddressError}
+        />}
       </div>
 
       <div className="pt-3">
@@ -198,9 +224,19 @@ export const VerifyView = () => {
           return (
             <div key={verifierId} className="pt-2">
               <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
-                <input className="form-check-input custom-control-input" type="checkbox" id={`verifier-${verifierId}`} checked={!!enabledVerifiers[verifierId]} onChange={(e) => handleVerifierCheckboxClick(verifierId, e.target.checked)} disabled={disabledVerifier} />
-
-                <label htmlFor={`verifier-${verifierId}`} className={`m-0 form-check-label custom-control-label large  font-weight-bold${!disabledVerifier ? '' : ' text-secondary'}`} style={{ fontSize: '1rem', lineHeight: '1.5', color: 'var(--text)' }}>
+                <input
+                  className="form-check-input custom-control-input"
+                  type="checkbox"
+                  id={`verifier-${verifierId}`}
+                  checked={!!enabledVerifiers[verifierId]}
+                  onChange={(e) => handleVerifierCheckboxClick(verifierId, e.target.checked)}
+                  disabled={disabledVerifier}
+                />
+                <label
+                  htmlFor={`verifier-${verifierId}`}
+                  className={`m-0 form-check-label custom-control-label large  font-weight-bold${!disabledVerifier ? '' : ' text-secondary'}`}
+                  style={{ fontSize: '1rem', lineHeight: '1.5', color: 'var(--text)' }}
+                >
                   {verifierId}
                 </label>
               </div>
@@ -227,10 +263,17 @@ export const VerifyView = () => {
           )
         })}
       </div>
-
-      <button type="submit" className="btn btn-primary mt-3" disabled={submitDisabled}>
-        Verify
-      </button>
+      <CustomTooltip tooltipText={submitDisabled ? (
+        (!!contractAddressError || !contractAddress) ? "Please provide a valid contract address." :
+          !selectedChain ? "Please select the chain." :
+            !selectedContract ? "Please select the contract (compile if needed)." :
+              ((hasProxy && !!proxyAddressError) || (hasProxy && !proxyAddress)) ? "Please provide a valid proxy contract address." :
+                "Please provide all necessary data to verify") // Is not expected to be a case
+         : "Verify with selected tools"}>
+        <button type="submit" className="w-100 btn btn-primary mt-3" disabled={submitDisabled}>
+          Verify
+        </button>
+      </CustomTooltip>
     </form>
   )
 }
diff --git a/apps/contract-verification/src/profile.json b/apps/contract-verification/src/profile.json
index 6ac25db04a..f56f684c71 100644
--- a/apps/contract-verification/src/profile.json
+++ b/apps/contract-verification/src/profile.json
@@ -13,4 +13,4 @@
   "documentation": "https://remix-ide.readthedocs.io/en/latest/contract_verification.html",
   "maintainedBy": "Remix",
   "authorContact": "remix@ethereum.org"
-}
\ No newline at end of file
+}
diff --git a/apps/remix-ide/src/app/plugins/matomo.ts b/apps/remix-ide/src/app/plugins/matomo.ts
index 8aa8f61f70..e6af25655c 100644
--- a/apps/remix-ide/src/app/plugins/matomo.ts
+++ b/apps/remix-ide/src/app/plugins/matomo.ts
@@ -11,7 +11,7 @@ const profile = {
   version: '1.0.0'
 }
 
-const allowedPlugins = ['LearnEth', 'etherscan', 'vyper', 'circuit-compiler', 'doc-gen', 'doc-viewer', 'solhint', 'walletconnect', 'scriptRunner', 'dgit']
+const allowedPlugins = ['LearnEth', 'etherscan', 'vyper', 'circuit-compiler', 'doc-gen', 'doc-viewer', 'solhint', 'walletconnect', 'scriptRunner', 'dgit', 'contract-verification']
 
 export class Matomo extends Plugin {