fix switch back to injected when chain id changes

Author: yann300

apps/remix-ide/src/app/providers/injected-custom-provider.tsx

@@ -8,15 +8,22 @@ export class InjectedCustomProvider extends InjectedProviderDefault {
   rpcUrls: Array<string>
   nativeCurrency: Record<string, any>
   blockExplorerUrls: Array<string>
+  parent: string
 
-  constructor(provider: any, pluginName: string, chainName: string, chainId: string, rpcUrls: Array<string>, nativeCurrency?: Record<string, any>, blockExplorerUrls?: Array<string>) {
+  constructor(provider: any, pluginName: string, chainName: string, chainId: string, rpcUrls: Array<string>, nativeCurrency?: Record<string, any>, blockExplorerUrls?: Array<string>, parent?: string) {
     super(provider, pluginName)
+    this.parent = parent
     this.pluginName = pluginName
     this.chainName = chainName
     this.chainId = chainId
     this.rpcUrls = rpcUrls
     this.nativeCurrency = nativeCurrency
     this.blockExplorerUrls = blockExplorerUrls
+    this.listenerChainChanged = (chainId: number) => {
+      if (chainId !== parseInt(this.chainId)) {
+        this.call('blockchain', 'changeExecutionContext', { context: this.parent })
+      }     
+    }
   }
 
   async init() {

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

@@ -208,7 +208,8 @@ export class RunTab extends ViewPlugin {
 
     const addCustomInjectedProvider = async (position, event, name, displayName, networkId, urls, nativeCurrency?) => {
       // name = `${name} through ${event.detail.info.name}`
-      await this.engine.register([new InjectedCustomProvider(event.detail.provider, name, displayName, networkId, urls, nativeCurrency)])
+      const parent = 'injected-' + event.detail.info.name
+      await this.engine.register([new InjectedCustomProvider(event.detail.provider, name, displayName, networkId, urls, nativeCurrency, [], parent)])
       await addProvider(position, name, displayName + ' - ' + event.detail.info.name, { isInjected: true, isVM: false, isRpcForkedState: false, fork: '' })
     }
     const registerInjectedProvider = async (event) => {

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

@@ -25,7 +25,7 @@ const profile = {
   name: 'blockchain',
   displayName: 'Blockchain',
   description: 'Blockchain - Logic',
-  methods: ['getCode', 'getTransactionReceipt', 'addProvider', 'removeProvider', 'getCurrentFork', 'getAccounts', 'web3VM', 'web3', 'getProvider', 'getCurrentProvider', 'getCurrentNetworkStatus', 'getAllProviders', 'getPinnedProviders'],
+  methods: ['getCode', 'getTransactionReceipt', 'addProvider', 'removeProvider', 'getCurrentFork', 'getAccounts', 'web3VM', 'web3', 'getProvider', 'getCurrentProvider', 'getCurrentNetworkStatus', 'getAllProviders', 'getPinnedProviders', 'changeExecutionContext'],
   version: packageJson.version
 }
 
@@ -545,6 +545,10 @@ export class Blockchain extends Plugin {
   }
 
   changeExecutionContext(context, confirmCb, infoCb, cb) {
+    if (this.currentRequest && this.currentRequest.from && !this.currentRequest.from.startsWith('injected')) {
+      // only injected provider can update the provider.
+      return
+    }
     if (context.context === 'item-another-chain') {
       this.call('manager', 'activatePlugin', 'environmentExplorer').then(() => this.call('tabs', 'focus', 'environmentExplorer'))
     } else {

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

@@ -1,9 +1,7 @@
-import { Provider } from '@remix-ui/environment-explorer'
 import { CustomTooltip } from '@remix-ui/helper'
 import React, { useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
-import { EnvDropdownLabelStateType, RunTabState } from '../types'
-import { current } from '@reduxjs/toolkit'
+import { RunTabState } from '../types'
 
 export type DropDownLabelProps = {
   label: string