Move network event to app root

apps/etherscan/src/app/AppContext.tsx

@@ -20,5 +20,6 @@ export const AppContext = React.createContext({
   themeType: 'dark' as ThemeType,
   setThemeType: (themeType: ThemeType) => {
     console.log('Calling Set Theme Type')
-  }
+  },
+  networkName: ''
 })

apps/etherscan/src/app/app.tsx

@@ -16,13 +16,12 @@ import './App.css'
 
 export const getNewContractNames = (compilationResult: CompilationResult) => {
   const compiledContracts = compilationResult.contracts
-  const result: string[] = []
+  let result: string[] = []
 
   for (const file of Object.keys(compiledContracts)) {
-    const filePathArray = file.split('/')
-    const newContractNames = filePathArray[filePathArray.length - 1]
+    const newContractNames = Object.keys(compiledContracts[file])
 
-    result.push(newContractNames)
+    result = [...result, ...newContractNames]
   }
 
   return result
@@ -35,6 +34,7 @@ const App = () => {
   const [receipts, setReceipts] = useLocalStorage('receipts', []) 
   const [contracts, setContracts] = useState<string[]>([])
   const [themeType, setThemeType] = useState<ThemeType>('dark')
+  const [networkName, setNetworkName] = useState('Loading...')
   const timer = useRef(null)
   const contractsRef = useRef(contracts)
 
@@ -51,6 +51,11 @@ const App = () => {
 
         setContracts(uniqueContracts)
       })
+      plugin.on('blockchain' as any, 'networkStatus', (result) => {
+        setNetworkName(`${result.network.name} ${result.network.id !== '-' ? `(Chain id: ${result.network.id})` : '(Not supported)'}`)
+      })
+      // @ts-ignore
+      plugin.call('blockchain', 'getCurrentNetworkStatus').then((result: any) => setNetworkName(`${result.network.name} ${result.network.id !== '-' ? `(Chain id: ${result.network.id})` : '(Not supported)'}`))
     })
   }, [])
 
@@ -114,10 +119,11 @@ const App = () => {
         contracts,
         setContracts,
         themeType,
-        setThemeType
+        setThemeType,
+        networkName
       }}
     >
-      <DisplayRoutes />
+      { plugin && <DisplayRoutes /> }
     </AppContext.Provider>
   )
 }

apps/etherscan/src/app/views/HomeView.tsx

@@ -10,7 +10,7 @@ import {VerifyView} from './VerifyView'
 export const HomeView: React.FC = () => {
   return (
     <AppContext.Consumer>
-      {({apiKey, clientInstance, setReceipts, receipts, contracts}) => {
+      {({apiKey, clientInstance, setReceipts, receipts, contracts, networkName}) => {
         return !apiKey ? (
           <Navigate
             to={{
@@ -26,6 +26,7 @@ export const HomeView: React.FC = () => {
               const newReceipts = [...receipts, receipt]
               setReceipts(newReceipts)
             }}
+            networkName={networkName}
           />
         )
       }}

apps/etherscan/src/app/views/VerifyView.tsx

@@ -14,7 +14,8 @@ interface Props {
   client: PluginClient
   apiKey: string
   onVerifiedContract: (receipt: Receipt) => void
-  contracts: string[]
+  contracts: string[],
+  networkName: string
 }
 
 interface FormValues {
@@ -23,27 +24,14 @@ interface FormValues {
   expectedImplAddress?: string
 }
 
-export const VerifyView: React.FC<Props> = ({apiKey, client, contracts, onVerifiedContract}) => {
+export const VerifyView: React.FC<Props> = ({apiKey, client, contracts, onVerifiedContract, networkName}) => {
   const [results, setResults] = useState('')
-  const [networkName, setNetworkName] = useState('Loading...')
   const [selectedContract, setSelectedContract] = useState('')
   const [showConstructorArgs, setShowConstructorArgs] = useState(false)
   const [isProxyContract, setIsProxyContract] = useState(false)
   const [constructorInputs, setConstructorInputs] = useState([])
   const verificationResult = useRef({})
 
-  useEffect(() => {
-    if (client && client.on) {
-      client.on('blockchain' as any, 'networkStatus', (result) => {
-        setNetworkName(`${result.network.name} ${result.network.id !== '-' ? `(Chain id: ${result.network.id})` : '(Not supported)'}`)
-      })
-    }
-    return () => {
-      // To fix memory leak
-      if (client && client.off) client.off('blockchain' as any, 'networkStatus')
-    }
-  }, [client])
-
   useEffect(() => {
     if (contracts.includes(selectedContract)) updateConsFields(selectedContract)
   }, [contracts])

apps/remix-ide/src/blockchain/blockchain.tsx

@@ -23,7 +23,7 @@ const profile = {
   name: 'blockchain',
   displayName: 'Blockchain',
   description: 'Blockchain - Logic',
-  methods: ['getCode', 'getTransactionReceipt', 'addProvider', 'removeProvider', 'getCurrentFork', 'getAccounts', 'web3VM', 'web3', 'getProvider'],
+  methods: ['getCode', 'getTransactionReceipt', 'addProvider', 'removeProvider', 'getCurrentFork', 'getAccounts', 'web3VM', 'web3', 'getProvider', 'getCurrentNetworkStatus'],
   version: packageJson.version
 }