Add grid view providers

apps/remix-ide/src/app.js

@@ -40,6 +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 { 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'
@@ -276,6 +277,8 @@ class AppComponent {
     const ganacheProvider = new GanacheProvider(blockchain)
     const foundryProvider = new FoundryProvider(blockchain)
     const externalHttpProvider = new ExternalHttpProvider(blockchain)
+
+    const environmentExplorer = new EnvironmentExplorer()
     // ----------------- convert offset to line/column service -----------
     const offsetToLineColumnConverter = new OffsetToLineColumnConverter()
     Registry.getInstance().put({
@@ -350,6 +353,7 @@ class AppComponent {
       ganacheProvider,
       foundryProvider,
       externalHttpProvider,
+      environmentExplorer,  
       this.walkthroughService,
       search,
       solidityumlgen,

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

@@ -0,0 +1,190 @@
+import React from 'react' // eslint-disable-line
+import { ViewPlugin } from '@remixproject/engine-web'
+import { PluginViewWrapper } from '@remix-ui/helper'
+import { RemixUIGridView } from '@remix-ui/remix-ui-grid-view'
+import { RemixUIGridSection } from '@remix-ui/remix-ui-grid-section'
+import { RemixUIGridCell } from '@remix-ui/remix-ui-grid-cell'
+import './style/environment-explorer.css'
+import type { Provider } from '../../blockchain/blockchain'
+
+import * as packageJson from '../../../../../package.json'
+
+const _paq = (window._paq = window._paq || [])
+
+const profile = {
+  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,
+  maintainedBy: 'Remix',
+  permission: true,
+  events: [],
+  methods: []
+}
+
+type ProvidersSection = `Injected` | 'Remix VMs' | 'Externals'
+
+export class EnvironmentExplorer extends ViewPlugin {
+  providers: { [key in ProvidersSection]: Provider[] }
+  providersFlat: { [key: string]: Provider }
+  pinnedProviders: string[]
+  dispatch: React.Dispatch<any> = () => {}
+
+  constructor() {
+    super(profile)
+    this.providersFlat = {}
+    this.providers = {
+      'Injected': [],
+      'Remix VMs': [],
+      'Externals': []
+    }
+  }
+
+  async onActivation(): Promise<void> {
+    this.providersFlat = await this.call('blockchain', 'getAllProviders')
+    this.pinnedProviders = await this.call('blockchain', 'getPinnedProviders')
+    this.renderComponent()
+  }
+
+  addProvider (provider: Provider) {
+    if (provider.isInjected) {
+      this.providers['Injected'].push(provider)
+    } else if (provider.isVM) {
+      this.providers['Remix VMs'].push(provider)
+    } else {
+      this.providers['Externals'].push(provider)
+    }
+  }
+
+  setDispatch(dispatch: React.Dispatch<any>): void {
+    this.dispatch = dispatch
+    this.renderComponent()
+  }
+  render() {
+    return (
+      <div className="bg-dark" id="environmentExplorer">
+        <PluginViewWrapper plugin={this} />
+      </div>
+    )
+  }
+
+  renderComponent() {
+    this.dispatch({
+      ...this
+    })
+  }
+
+  updateComponent(state: any) {
+    this.providers = {
+      'Injected': [],
+      'Remix VMs': [],
+      'Externals': []
+    }
+    console.log(this.providersFlat)
+    for (const [key, provider] of Object.entries(this.providersFlat)) {
+      this.addProvider(provider)
+    }
+    return (
+      <RemixUIGridView
+        plugin={this}
+        styleList={""}
+        logo={profile.icon}
+        enableFilter={true}
+        showUntagged={true}
+        showPin={true}
+        title={profile.description}
+        description="Choose how you would like to interact with a chain."
+      >
+        <RemixUIGridSection
+          plugin={this}
+          title='Injected'
+          hScrollable={true}
+        >
+          {this.providers['Injected'].map(provider => {
+            return <RemixUIGridCell
+              plugin={this}
+              title={provider.name}
+              classList='EECellStyle'
+              pinned={this.pinnedProviders.includes(provider.name)}
+              pinStateCallback={async (pinned: boolean) => {
+                if (pinned) {
+                  this.emit('providerPinned', provider.name, provider)
+                  return true
+                }
+                const providerName = await this.call('blockchain', 'getProvider')
+                if (providerName !== provider.name) {
+                  this.emit('providerUnpinned', provider.name, provider)
+                  return true
+                } else {
+                  this.call('notification', 'toast', 'Cannot unpin the current selected provider')
+                  return false
+                }
+              }}
+            >
+              <div>{provider.name}</div>
+            </RemixUIGridCell>
+          })}
+        </RemixUIGridSection>
+        <RemixUIGridSection
+          plugin={this}
+          title='Remix VMs'
+          hScrollable= {true}
+        >{this.providers['Remix VMs'].map(provider => {
+            return <RemixUIGridCell
+              plugin={this}
+              title={provider.name}
+              classList='EECellStyle'
+              pinned={this.pinnedProviders.includes(provider.name)}
+              pinStateCallback={async (pinned: boolean) => {
+                if (pinned) {
+                  this.emit('providerPinned', provider.name, provider)
+                  return true
+                }
+                const providerName = await this.call('blockchain', 'getProvider')
+                if (providerName !== provider.name) {
+                  this.emit('providerUnpinned', provider.name, provider)
+                  return true
+                } else {
+                  this.call('notification', 'toast', 'Cannot unpin the current selected provider')
+                  return false
+                }
+              }}
+            >
+              <div>{provider.name}</div>
+            </RemixUIGridCell>
+          })}</RemixUIGridSection>
+        <RemixUIGridSection
+          plugin={this}
+          title='Externals'
+          hScrollable= {true}
+        >{this.providers['Externals'].map(provider => {
+            return <RemixUIGridCell
+              plugin={this}
+              title={provider.name}
+              classList='EECellStyle'
+              pinned={this.pinnedProviders.includes(provider.name)}
+              pinStateCallback={async (pinned: boolean) => {
+                if (pinned) {
+                  this.emit('providerPinned', provider.name, provider)
+                  return true
+                }
+                const providerName = await this.call('blockchain', 'getProvider')
+                if (providerName !== provider.name) {
+                  this.emit('providerUnpinned', provider.name, provider)
+                  return true
+                } else {
+                  this.call('notification', 'toast', 'Cannot unpin the current selected provider')
+                  return false
+                }
+              }}
+            >
+              <div>{provider.name}</div>
+            </RemixUIGridCell>
+          })}</RemixUIGridSection>
+      </RemixUIGridView>
+    )
+  }
+}

apps/remix-ide/src/app/providers/style/environment-explorer.css

@@ -0,0 +1,6 @@
+.EECellStyle {
+  min-height: 4rem;
+  max-width: 10rem;
+  min-width: 9rem;
+  max-height: 5rem;
+}

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', 'getCurrentNetworkStatus'],
+  methods: ['getCode', 'getTransactionReceipt', 'addProvider', 'removeProvider', 'getCurrentFork', 'getAccounts', 'web3VM', 'web3', 'getProvider', 'getCurrentNetworkStatus', 'getAllProviders', 'getPinnedProviders'],
   version: packageJson.version
 }
 
@@ -44,6 +44,21 @@ export type Transaction = {
   timestamp?: number
 }
 
+export type Provider = {
+  options: { [key: string]: string }
+  dataId: string
+  name: string
+  displayName: string
+  fork: string
+  isInjected: boolean
+  isVM: boolean
+  title: string
+  init: () => Promise<void>
+  provider:{
+    sendAsync: (payload: any) => Promise<void>
+  }
+}
+
 export class Blockchain extends Plugin {
   active: boolean
   event: EventManager
@@ -62,6 +77,7 @@ export class Blockchain extends Plugin {
   providers: {[key: string]: VMProvider | InjectedProvider | NodeProvider}
   transactionContextAPI: TransactionContextAPI
   registeredPluginEvents: string[]
+  pinnedProviders: string[]
 
   // NOTE: the config object will need to be refactored out in remix-lib
   constructor(config: Config) {
@@ -93,6 +109,7 @@ export class Blockchain extends Plugin {
     this.networkcallid = 0
     this.networkStatus = { network: { name: ' - ', id: ' - ' } }
     this.registeredPluginEvents = []
+    this.pinnedProviders = ['vm-cancun', 'vm-shanghai', 'vm-mainnet-fork', 'vm-london', 'vm-berlin', 'vm-paris', 'walletconnect', 'injected-MetaMask', 'basic-http-provider', 'ganache-provider', 'hardhat-provider', 'foundry-provider']
     this.setupEvents()
     this.setupProviders()
   }
@@ -116,6 +133,14 @@ export class Blockchain extends Plugin {
         })
       }
     })
+
+    this.on('environmentExplorer', 'providerPinned', (name, provider) => {
+      this.emit('shouldAddProvidertoUdapp', name, provider)
+    })
+
+    this.on('environmentExplorer', 'providerUnpinned', (name, provider) => {
+      this.emit('shouldRemoveProviderFromUdapp', name, provider)
+    })
   }
 
   onDeactivation() {
@@ -136,12 +161,12 @@ export class Blockchain extends Plugin {
       })
     })
 
-    this.executionContext.event.register('addProvider', (network) => {
-      this._triggerEvent('addProvider', [network])
+    this.executionContext.event.register('providerAdded', (network) => {
+      this._triggerEvent('providerAdded', [network])
     })
 
-    this.executionContext.event.register('removeProvider', (name) => {
-      this._triggerEvent('removeProvider', [name])
+    this.executionContext.event.register('providerRemoved', (name) => {
+      this._triggerEvent('providerRemoved', [name])
     })
 
     setInterval(() => {
@@ -504,7 +529,11 @@ export class Blockchain extends Plugin {
   }
 
   changeExecutionContext(context, confirmCb, infoCb, cb) {
-    return this.executionContext.executionContextChange(context, null, confirmCb, infoCb, cb)
+    if (context.context === 'item-another-chain') {
+      this.call('manager', 'activatePlugin', 'environmentExplorer').then(() => this.call('tabs', 'focus', 'environmentExplorer'))
+    } else {
+      return this.executionContext.executionContextChange(context, null, confirmCb, infoCb, cb)
+    }
   }
 
   detectNetwork(cb) {
@@ -611,14 +640,23 @@ export class Blockchain extends Plugin {
     this.executionContext.listenOnLastBlock()
   }
 
-  addProvider(provider) {
+  addProvider(provider: Provider) {
+    if (this.pinnedProviders.includes(provider.name)) this.emit('shouldAddProvidertoUdapp', provider.name, provider)
     this.executionContext.addProvider(provider)
   }
 
   removeProvider(name) {
     this.executionContext.removeProvider(name)
   }
 
+  getAllProviders() {
+    return this.executionContext.getAllProviders()
+  }
+
+  getPinnedProviders() {
+    return this.pinnedProviders
+  }
+
   // TODO : event should be triggered by Udapp instead of TxListener
   /** Listen on New Transaction. (Cannot be done inside constructor because txlistener doesn't exist yet) */
   startListening(txlistener) {

apps/remix-ide/src/blockchain/execution-context.js

@@ -123,10 +123,13 @@ export class ExecutionContext {
   addProvider (network) {
     if (network && network.name && !this.customNetWorks[network.name]) {
       this.customNetWorks[network.name] = network
-      this.event.trigger('addProvider', [network])
     }
   }
 
+  getAllProviders () {
+    return this.customNetWorks
+  }
+
   internalWeb3 () {
     return web3
   }

apps/remix-ide/src/remixAppManager.js

@@ -82,11 +82,10 @@ let requiredModules = [ // services + layout views + system views
   'pinnedPanel',
   'pluginStateLogger',
   'remixGuide',
-  'matomo'
+  'matomo',
+  'walletconnect'
 ]
 
-
-
 // dependentModules shouldn't be manually activated (e.g hardhat is activated by remixd)
 const dependentModules = ['foundry', 'hardhat', 'truffle', 'slither']
 
@@ -133,7 +132,7 @@ export function isNative(name) {
     'circuit-compiler',
     'compilationDetails',
     'vyperCompilationDetails',
-    'remixGuide',
+    //'remixGuide',
     'walletconnect'
   ]
   return nativePlugins.includes(name) || requiredModules.includes(name) || isInjectedProvider(name) || isVM(name)
@@ -389,7 +388,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) => {