UI changes in Env explorer

excluded some plugins from reload

apps/remix-ide/src/app.js

@@ -40,7 +40,7 @@ import {HardhatProvider} from './app/providers/hardhat-provider'
 import {GanacheProvider} from './app/providers/ganache-provider'
 import {FoundryProvider} from './app/providers/foundry-provider'
 import {ExternalHttpProvider} from './app/providers/external-http-provider'
-import { GridProviders } from './app/providers/grid-providers'
+import { EnvironmentExplorer } from './app/providers/environment-explorer'
 import { FileDecorator } from './app/plugins/file-decorator'
 import { CodeFormat } from './app/plugins/code-format'
 import { SolidityUmlGen } from './app/plugins/solidity-umlgen'
@@ -278,7 +278,7 @@ class AppComponent {
     const foundryProvider = new FoundryProvider(blockchain)
     const externalHttpProvider = new ExternalHttpProvider(blockchain)
 
-    const gridProviders = new GridProviders()
+    const environmentExplorer = new EnvironmentExplorer()
     // ----------------- convert offset to line/column service -----------
     const offsetToLineColumnConverter = new OffsetToLineColumnConverter()
     Registry.getInstance().put({
@@ -353,7 +353,7 @@ class AppComponent {
       ganacheProvider,
       foundryProvider,
       externalHttpProvider,
-      gridProviders,  
+      environmentExplorer,  
       this.walkthroughService,
       search,
       solidityumlgen,

apps/remix-ide/src/app/providers/environment-explorer.tsx

@@ -11,10 +11,10 @@ import * as packageJson from '../../../../../package.json'
 const _paq = (window._paq = window._paq || [])
 
 const profile = {
-  name: 'gridProviders',
-  displayName: 'Grid providers',
-  icon: 'assets/img/deployAndRun.webp',
-  description: 'Pin web3 providers',
+  name: 'environmentExplorer',
+  displayName: 'Environment Explorer',
+  icon: 'assets/img/EnvironmentExplorerLogo.webp',
+  description: 'Explore providers and customize web3 provider list',
   location: 'mainPanel',
   documentation: 'https://remix-ide.readthedocs.io/en/latest/run.html',
   version: packageJson.version,
@@ -26,7 +26,7 @@ const profile = {
 
 type ProvidersSection = `Injected` | 'Remix VMs' | 'Externals'
 
-export class GridProviders extends ViewPlugin {
+export class EnvironmentExplorer extends ViewPlugin {
   providers: { [key in ProvidersSection]: Provider[] }
   providersFlat: { [key: string]: Provider }
   pinnedProviders: string[]
@@ -64,7 +64,7 @@ export class GridProviders extends ViewPlugin {
   }
   render() {
     return (
-      <div className="bg-dark" id="gridproviders">
+      <div className="bg-dark" id="environmentExplorer">
         <PluginViewWrapper plugin={this} />
       </div>
     )
@@ -90,17 +90,17 @@ export class GridProviders extends ViewPlugin {
       <RemixUIGridView
         plugin={this}
         styleList={""}
-        logo='/assets/img/YouTubeLogo.webp'
+        logo={profile.icon}
         enableFilter={true}
         showUntagged={true}
         showPin={true}
-        title='Select a Web3 provider'
+        title={profile.description}
         description="Choose how you would like to interact with a chain."
       >
         <RemixUIGridSection
           plugin={this}
           title='Injected'
-          hScrollable= {true}
+          hScrollable={true}
         >
           {this.providers['Injected'].map(provider => {
             return <RemixUIGridCell

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

@@ -109,8 +109,7 @@ export class Blockchain extends Plugin {
     this.networkcallid = 0
     this.networkStatus = { network: { name: ' - ', id: ' - ' } }
     this.registeredPluginEvents = []
-    this.pinnedProviders = ['vm-cancun', 'vm-shanghai', 'vm-berlin', 'vm-paris', 'vm-london', 'vm-sepolia-fork', 'vm-mainnet-fork', 'vm-custom-fork', 'walletconnect', 'injected-MetaMask', 'basic-http-provider', 'ganache-provider', 'hardhat-provider', 'foundry-provider']
-
+    this.pinnedProviders = ['vm-cancun', 'vm-shanghai', 'vm-mainnet-fork', 'walletconnect', 'injected-MetaMask', 'basic-http-provider', 'ganache-provider', 'hardhat-provider', 'foundry-provider']
     this.setupEvents()
     this.setupProviders()
   }
@@ -135,11 +134,11 @@ export class Blockchain extends Plugin {
       }
     })
 
-    this.on('gridProviders', 'providerPinned', (name, provider) => {
+    this.on('environmentExplorer', 'providerPinned', (name, provider) => {
       this.emit('shouldAddProvidertoUdapp', name, provider)
     })
 
-    this.on('gridProviders', 'providerUnpinned', (name, provider) => {
+    this.on('environmentExplorer', 'providerUnpinned', (name, provider) => {
       this.emit('shouldRemoveProviderFromUdapp', name, provider)
     })
   }
@@ -531,7 +530,7 @@ export class Blockchain extends Plugin {
 
   changeExecutionContext(context, confirmCb, infoCb, cb) {
     if (context.context === 'item-another-chain') {
-      this.call('manager', 'activatePlugin', 'gridProviders').then(() => this.call('tabs', 'focus', 'gridProviders'))
+      this.call('manager', 'activatePlugin', 'environmentExplorer').then(() => this.call('tabs', 'focus', 'environmentExplorer'))
     } else {
       return this.executionContext.executionContextChange(context, null, confirmCb, infoCb, cb)
     }

apps/remix-ide/src/remixAppManager.js

@@ -82,7 +82,8 @@ let requiredModules = [ // services + layout views + system views
   'pinnedPanel',
   'pluginStateLogger',
   'remixGuide',
-  'matomo'
+  'matomo',
+  'walletconnect'
 ]
 
 
@@ -389,7 +390,16 @@ class PluginLoader {
 
   constructor() {
     const queryParams = new QueryParams()
-    this.donotAutoReload = ['remixd'] // that would be a bad practice to force loading some plugins at page load.
+    // some plugins should not be activated at page load.
+    this.donotAutoReload = [
+      'remixd',
+      'environmentExplorer',
+      'templateSelection',
+      'compilationDetails',
+      'walletconnect',
+      'dapp-draft',
+      'solidityumlgen'
+    ]
     this.loaders = {}
     this.loaders.localStorage = {
       set: (plugin, actives) => {

libs/remix-ui/run-tab/src/lib/components/environment.tsx

@@ -6,6 +6,11 @@ import { Dropdown } from 'react-bootstrap'
 import { CustomMenu, CustomToggle, CustomTooltip } from '@remix-ui/helper'
 
 export function EnvironmentUI(props: EnvironmentProps) {
+
+  Object.entries(props.providers.providerList.filter((provider) => { return provider.isVM }))
+  Object.entries(props.providers.providerList.filter((provider) => { return provider.isInjected }))
+  Object.entries(props.providers.providerList.filter((provider) => { return !(provider.isVM || provider.isInjected) }))
+
   const handleChangeExEnv = (env: string) => {
     const provider = props.providers.providerList.find((exEnv) => exEnv.name === env)
     const context = provider.name
@@ -23,7 +28,6 @@ export function EnvironmentUI(props: EnvironmentProps) {
     <div className="udapp_crow">
       <label id="selectExEnv" className="udapp_settingsLabel">
         <FormattedMessage id="udapp.environment" />
-
         <CustomTooltip placement={'auto-end'} tooltipClasses="text-nowrap" tooltipId="info-recorder" tooltipText={<FormattedMessage id="udapp.tooltipText2" />}>
           <a href="https://chainlist.org/" target="_blank">
             <i className={'ml-2 fas fa-plug'} aria-hidden="true"></i>
@@ -59,9 +63,39 @@ export function EnvironmentUI(props: EnvironmentProps) {
                 No provider pinned
               </span>
             </Dropdown.Item> : ''}
-            {props.providers.providerList.map(({ displayName, name }, index) => (
+            { (props.providers.providerList.filter((provider) => { return provider.isInjected })).map(({ name, displayName }) => (
+              <Dropdown.Item
+                key={name}
+                onClick={() => {
+                  handleChangeExEnv(name)
+                }}
+                data-id={`dropdown-item-${name}`}
+              >
+                <span className="">
+                  {isL2(displayName) && 'L2 - '}
+                  {displayName}
+                </span>
+              </Dropdown.Item>
+            ))}
+            { props.providers.providerList.filter((provider) => { return provider.isInjected }).length && <Dropdown.Divider className='border-secondary'></Dropdown.Divider> }
+            { (props.providers.providerList.filter((provider) => { return provider.isVM })).map(({ displayName, name }) => (
+              <Dropdown.Item
+                key={name}
+                onClick={() => {
+                  handleChangeExEnv(name)
+                }}
+                data-id={`dropdown-item-${name}`}
+              >
+                <span className="">
+                  {isL2(displayName) && 'L2 - '}
+                  {displayName}
+                </span>
+              </Dropdown.Item>
+            ))}
+            { props.providers.providerList.filter((provider) => { return provider.isVM }).length && <Dropdown.Divider className='border-secondary'></Dropdown.Divider> }
+            { (props.providers.providerList.filter((provider) => { return !(provider.isVM || provider.isInjected) })).map(({ displayName, name }) => (
               <Dropdown.Item
-                key={index}
+                key={name}
                 onClick={() => {
                   handleChangeExEnv(name)
                 }}
@@ -73,6 +107,7 @@ export function EnvironmentUI(props: EnvironmentProps) {
                 </span>
               </Dropdown.Item>
             ))}
+            <Dropdown.Divider className='border-secondary'></Dropdown.Divider>
             <Dropdown.Item
               key={10000}
               onClick={() => {