add forked chain in env explorer

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

@@ -25,7 +25,7 @@ const profile = {
   methods: []
 }
 
-type ProvidersSection = `Injected` | 'Remix VMs' | 'Externals'
+type ProvidersSection = `Injected` | 'Remix VMs' | 'Externals' | 'Remix forked VMs'
 
 export class EnvironmentExplorer extends ViewPlugin {
   providers: { [key in ProvidersSection]: Provider[] }
@@ -39,6 +39,7 @@ export class EnvironmentExplorer extends ViewPlugin {
     this.providers = {
       'Injected': [],
       'Remix VMs': [],
+      'Remix forked VMs': [],
       'Externals': []
     }
   }
@@ -52,6 +53,8 @@ export class EnvironmentExplorer extends ViewPlugin {
   addProvider (provider: Provider) {
     if (provider.isInjected) {
       this.providers['Injected'].push(provider)
+    } else if (provider.isForkedVM) {
+      this.providers['Remix forked VMs'].push(provider)
     } else if (provider.isVM) {
       this.providers['Remix VMs'].push(provider)
     } else {
@@ -81,7 +84,8 @@ export class EnvironmentExplorer extends ViewPlugin {
     this.providers = {
       'Injected': [],
       'Remix VMs': [],
-      'Externals': []
+      'Externals': [],
+      'Remix forked VMs': []
     }
     for (const [key, provider] of Object.entries(this.providersFlat)) {
       this.addProvider(provider)
@@ -167,6 +171,40 @@ export class EnvironmentExplorer extends ViewPlugin {
               <div>{provider.description}</div>
             </RemixUIGridCell>
           })}</RemixUIGridSection>
+        <RemixUIGridSection
+          plugin={this}
+          title='Deploy to an In-browser forked Virtual Machine.'
+          hScrollable={false}
+        >{this.providers['Remix forked VMs'].map(provider => {
+            return <RemixUIGridCell
+              plugin={this}
+              title={provider.displayName}
+              logos={provider.logos}
+              classList='EECellStyle'
+              searchKeywords={['Remix VMs', provider.name, provider.displayName, provider.title, provider.description]}
+              pinned={this.pinnedProviders.includes(provider.name)}
+              key={provider.name}
+              id={provider.name}
+              pinStateCallback={async (pinned: boolean) => {
+                if (pinned) {
+                  this.emit('providerPinned', provider.name, provider)
+                  this.call('notification', 'toast', `"${provider.displayName}" has been added to the Environment list of the Deploy & Run Transactions plugin.`)
+                  return true
+                }
+                const providerName = await this.call('blockchain', 'getProvider')
+                if (providerName !== provider.name) {
+                  this.emit('providerUnpinned', provider.name, provider)
+                  this.call('notification', 'toast', `"${provider.displayName}" has been removed from the Environment list of the Deploy & Run Transactions plugin.`)
+                  return true
+                } else {
+                  this.call('notification', 'toast', 'Cannot unpin the current selected provider')
+                  return false
+                }
+              }}
+            >
+              <div>{provider.description}</div>
+            </RemixUIGridCell>
+          })}</RemixUIGridSection>
         <RemixUIGridSection
           plugin={this}
           title='Deploy to an external Provider.'

apps/remix-ide/src/app/udapp/run-tab.js

@@ -165,7 +165,7 @@ export class RunTab extends ViewPlugin {
       'foundry-provider': ['assets/img/foundry.png']
     }
 
-    const addProvider = async (position, name, displayName, isInjected, isVM, fork = '', dataId = '', title = '') => {
+    const addProvider = async (position, name, displayName, isInjected, isVM, fork = '', dataId = '', title = '', forkedVM = false) => {
       await this.call('blockchain', 'addProvider', {
         position,
         options: {},
@@ -176,6 +176,7 @@ export class RunTab extends ViewPlugin {
         logos: logos[name],
         fork,
         isInjected,
+        isForkedVM: forkedVM,
         isVM,
         title,
         init: async function () {
@@ -237,9 +238,9 @@ export class RunTab extends ViewPlugin {
     await addProvider(51, 'vm-paris', 'Remix VM (Paris)', false, true, 'paris', 'settingsVMParisMode', titleVM)
     await addProvider(52, 'vm-london', 'Remix VM (London)', false, true, 'london', 'settingsVMLondonMode', titleVM)
     await addProvider(53, 'vm-berlin', 'Remix VM (Berlin)', false, true, 'berlin', 'settingsVMBerlinMode', titleVM)
-    await addProvider(2, 'vm-mainnet-fork', 'Remix VM - Mainnet fork', false, true, 'cancun', 'settingsVMMainnetMode', titleVM)
+    await addProvider(2, 'vm-mainnet-fork', 'Remix VM - Mainnet fork', false, true, 'cancun', 'settingsVMMainnetMode', titleVM, true)
-    await addProvider(3, 'vm-sepolia-fork', 'Remix VM - Sepolia fork', false, true, 'cancun', 'settingsVMSepoliaMode', titleVM)
+    await addProvider(3, 'vm-sepolia-fork', 'Remix VM - Sepolia fork', false, true, 'cancun', 'settingsVMSepoliaMode', titleVM, true)
-    await addProvider(4, 'vm-custom-fork', 'Remix VM - Custom fork', false, true, '', 'settingsVMCustomMode', titleVM)
+    await addProvider(4, 'vm-custom-fork', 'Remix VM - Custom fork', false, true, '', 'settingsVMCustomMode', titleVM, true)
 
     // wallet connect
     await addProvider(6, 'walletconnect', 'WalletConnect', false, false)

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

@@ -55,6 +55,7 @@ export type Provider = {
   description?: string
   isInjected: boolean
   isVM: boolean
+  isForkedVM: boolean
   title: string
   init: () => Promise<void>
   provider:{