to test

apps/contract-verification/src/app/ContractVerificationPluginClient.ts

@@ -11,4 +11,8 @@ export class ContractVerificationPluginClient extends PluginClient {
     createClient(this)
     this.onload()
   }
+
+  onActivation(): void {
+    this.internalEvents.emit('verification_activated')
+  }
 }

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

@@ -36,6 +36,7 @@ const App = () => {
   const timer = useRef(null)
 
   useEffect(() => {
+    plugin.internalEvents.on('verification_activated', () => {
       // Fetch compiler artefacts initially
       plugin.call('compilerArtefacts' as any, 'getAllCompilerAbstracts').then((obj: any) => {
         setCompilationOutput(obj)
@@ -46,13 +47,12 @@ const App = () => {
         setCompilationOutput((prev) => ({ ...(prev || {}), ...compilerAbstracts }))
       })
 
-    // TODO: Is there a way to get all compilations from the `build-info` files without having to compile again?
-
       // Fetch chains.json and update state
       fetch('https://chainid.network/chains.json')
         .then((response) => response.json())
         .then((data) => setChains(data))
         .catch((error) => console.error('Failed to fetch chains.json:', error))
+    })
 
     // Clean up on unmount
     return () => {

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

@@ -9,7 +9,7 @@ interface NavItemProps {
 
 const NavItem: React.FC<NavItemProps> = ({ to, icon, title }) => {
   return (
-    <NavLink to={to} className={({ isActive }) => 'text-decoration-none d-flex flex-column justify-content-center p-2 small ' + (isActive ? 'bg-light' : 'bg-transparent')}>
+    <NavLink to={to} className={({ isActive }) => 'text-decoration-none d-flex flex-column justify-content-center py-2 px-1 small ' + (isActive ? 'bg-light' : 'bg-transparent')}>
       <span>
         <span>{icon}</span>
         <span className="ml-2">{title}</span>

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

@@ -4,6 +4,7 @@ import type { Chain } from '../types'
 import { AppContext } from '../AppContext'
 
 function getChainDescriptor(chain: Chain): string {
+  if (!chain) return ''
   return `${chain.title || chain.name} (${chain.chainId})`
 }
 

apps/remix-ide/project.json

@@ -3,7 +3,7 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/remix-ide/src",
   "projectType": "application",
-  "implicitDependencies": ["doc-gen", "doc-viewer", "contract-verification", "etherscan", "vyper", "solhint", "walletconnect", "circuit-compiler", "learneth", "quick-dapp", "remix-dapp"],
+  "implicitDependencies": ["doc-gen", "doc-viewer", "etherscan", "contract-verification", "vyper", "solhint", "walletconnect", "circuit-compiler", "learneth", "quick-dapp", "remix-dapp"],
   "targets": {
     "build": {
       "executor": "@nrwl/webpack:webpack",

apps/remix-ide/src/remixAppManager.js

@@ -141,7 +141,8 @@ export function isNative(name) {
     //'remixGuide',
     'environmentExplorer',
     'templateSelection',
-    'walletconnect'
+    'walletconnect',
+    'contract-verification'
   ]
   return nativePlugins.includes(name) || requiredModules.includes(name) || isInjectedProvider(name) || isVM(name)
 }