refactor web provider as a provider plugin

apps/remix-ide/src/app.js

@@ -28,6 +28,7 @@ import { Blockchain } from './blockchain/blockchain.js'
 import { HardhatProvider } from './app/tabs/hardhat-provider'
 import { GanacheProvider } from './app/tabs/ganache-provider'
 import { FoundryProvider } from './app/tabs/foundry-provider'
+import { BasicHttpProvider } from './app/tabs/basic-http-provider'
 
 const isElectron = require('is-electron')
 
@@ -179,6 +180,7 @@ class AppComponent {
     const hardhatProvider = new HardhatProvider(blockchain)
     const ganacheProvider = new GanacheProvider(blockchain)
     const foundryProvider = new FoundryProvider(blockchain)
+    const basicHttpProvider = new BasicHttpProvider(blockchain)
     // ----------------- convert offset to line/column service -----------
     const offsetToLineColumnConverter = new OffsetToLineColumnConverter()
     Registry.getInstance().put({
@@ -236,6 +238,7 @@ class AppComponent {
       hardhatProvider,
       ganacheProvider,
       foundryProvider,
+      basicHttpProvider,
       this.walkthroughService,
       search
     ])

apps/remix-ide/src/app/tabs/basic-http-provider.tsx

@@ -0,0 +1,45 @@
+import * as packageJson from '../../../../../package.json'
+import { Plugin } from '@remixproject/engine'
+import { AppModal, AlertModal, ModalTypes } from '@remix-ui/app'
+import React from 'react' // eslint-disable-line
+import { Blockchain } from '../../blockchain/blockchain'
+import { ethers } from 'ethers'
+import { AbstractProvider } from './abstract-provider'
+
+const profile = {
+  name: 'basic-http-provider',
+  displayName: 'Basic Http Provider',
+  kind: 'provider',
+  description: 'Anvil',
+  methods: ['sendAsync'],
+  version: packageJson.version
+}
+
+export class BasicHttpProvider extends AbstractProvider {
+  constructor (blockchain) {
+    super(profile, blockchain, 'http://127.0.0.1:8545')
+  }
+
+  body (): JSX.Element {
+    const thePath = '<path/to/local/folder/for/test/chain>'
+    return (
+      <>
+        <div className="">
+            Note: To use Geth & https://remix.ethereum.org, configure it to allow requests from Remix:(see <a href="https://geth.ethereum.org/docs/rpc/server" target="_blank" rel="noreferrer">Geth Docs on rpc server</a>)
+          <div className="border p-1">geth --http --http.corsdomain https://remix.ethereum.org</div>
+          <br />
+          To run Remix & a local Geth test node, use this command: (see <a href="https://geth.ethereum.org/getting-started/dev-mode" target="_blank" rel="noreferrer">Geth Docs on Dev mode</a>)
+          <div className="border p-1">geth --http --http.corsdomain="{window.origin}" --http.api web3,eth,debug,personal,net --vmdebug --datadir {thePath} --dev console</div>
+          <br />
+          <br />
+          <b>WARNING:</b> It is not safe to use the --http.corsdomain flag with a wildcard: <b>--http.corsdomain *</b>
+          <br />
+          <br />For more info: <a href="https://remix-ide.readthedocs.io/en/latest/run.html#more-about-web3-provider" target="_blank" rel="noreferrer">Remix Docs on Web3 Provider</a>
+          <br />
+          <br />
+          Web3 Provider Endpoint
+        </div>
+      </>
+    )
+  }
+}

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

@@ -155,6 +155,20 @@ export class RunTab extends ViewPlugin {
         }
       }
     })
+
+    await this.call('blockchain', 'addProvider', {
+      name: 'Web3 Provider',
+      provider: {
+        async sendAsync (payload, callback) {
+          try {
+            const result = await udapp.call('basic-http-provider', 'sendAsync', payload)
+            callback(null, result)
+          } catch (e) {
+            callback(e)
+          }
+        }
+      }
+    })
   }
 
   writeFile (fileName, content) {

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

@@ -164,9 +164,6 @@ export class ExecutionContext {
       }
     }
 
-    if (context === 'web3') {
-      confirmCb(cb)
-    }
     if (this.customNetWorks[context]) {
       var network = this.customNetWorks[context]
       this.setProviderFromEndpoint(network.provider, { context: network.name }, (error) => {

apps/remix-ide/src/remixAppManager.js

@@ -19,7 +19,7 @@ const sensitiveCalls = {
 }
 
 export function isNative(name) {
-  const nativePlugins = ['vyper', 'workshops', 'debugger', 'remixd', 'menuicons', 'solidity', 'solidity-logic', 'solidityStaticAnalysis', 'solidityUnitTesting', 'layout', 'notification', 'hardhat-provider', 'ganache-provider']
+  const nativePlugins = ['vyper', 'workshops', 'debugger', 'remixd', 'menuicons', 'solidity', 'solidity-logic', 'solidityStaticAnalysis', 'solidityUnitTesting', 'layout', 'notification', 'hardhat-provider', 'ganache-provider', 'foundry-provider', 'basic-http-provider']
   return nativePlugins.includes(name) || requiredModules.includes(name)
 }
 

libs/remix-ui/helper/src/lib/helper-components.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { Web3ProviderDialog } from './components/web3Dialog'
 
 export const fileChangedToastMsg = (from: string, path: string) => (
   <div><i className="fas fa-exclamation-triangle text-danger mr-1"></i>
@@ -54,10 +53,6 @@ export const sourceVerificationNotAvailableToastMsg = () => (
   </div>
 )
 
-export const web3Dialog = (externalEndpoint: string, setWeb3Endpoint: (value: string) => void) => (
-  <Web3ProviderDialog externalEndpoint={externalEndpoint} setWeb3Endpoint={setWeb3Endpoint} />
-)
-
 export const envChangeNotification = (env: { context: string, fork: string }, from: string) => (
   <div>
     <i className="fas fa-exclamation-triangle text-danger mr-1"></i>

libs/remix-ui/run-tab/src/lib/actions/account.ts

@@ -1,4 +1,4 @@
-import { shortenAddress, web3Dialog } from "@remix-ui/helper"
+import { shortenAddress } from "@remix-ui/helper"
 import { RunTab } from "../types/run-tab"
 import { clearInstances, setAccount, setExecEnv } from "./actions"
 import { displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, setExternalEndpoint, setMatchPassphrase, setPassphrase } from "./payload"
@@ -74,28 +74,7 @@ const _getProviderDropdownValue = (plugin: RunTab): string => {
 }
 
 export const setExecutionContext = (plugin: RunTab, dispatch: React.Dispatch<any>, executionContext: { context: string, fork: string }) => {
-  const displayContent = web3Dialog(plugin.REACT_API.externalEndpoint, (endpoint: string) => {
-    dispatch(setExternalEndpoint(endpoint))
-  })
-
-  plugin.blockchain.changeExecutionContext(executionContext, () => {
-    plugin.call('notification', 'modal', {
-      id: 'envNotification',
-      title: 'External node request',
-      message: displayContent,
-      okLabel: 'OK',
-      cancelLabel: 'Cancel',
-      okFn: () => {
-        plugin.blockchain.setProviderFromEndpoint(plugin.REACT_API.externalEndpoint, executionContext, (alertMsg) => {
-          if (alertMsg) plugin.call('notification', 'toast', alertMsg)
-          setFinalContext(plugin, dispatch)
-        })
-      },
-      cancelFn: () => {
-        setFinalContext(plugin, dispatch)
-      }
-    })
-  }, (alertMsg) => {
+  plugin.blockchain.changeExecutionContext(executionContext, null, (alertMsg) => {
     plugin.call('notification', 'toast', alertMsg)
   }, () => { setFinalContext(plugin, dispatch) })
 }

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

@@ -8,7 +8,7 @@ export function EnvironmentUI (props: EnvironmentProps) {
     const fork = provider.fork // can be undefined if connected to an external source (web3 provider / injected)
     let context = provider.value
 
-    context = context.startsWith('vm') ? 'vm' : context // context has to be 'vm', 'web3' or 'injected'
+    context = context.startsWith('vm') ? 'vm' : context
 
     props.setExecutionContext({ context, fork })
   }

libs/remix-ui/run-tab/src/lib/reducers/runTab.ts

@@ -135,12 +135,6 @@ export const runTabInitialState: RunTabState = {
       title: 'Execution environment has been provided by Metamask or similar provider.',
       value: 'injected',
       content: `Injected Provider${(window && window.ethereum && window.ethereum.isMetaMask) ? ' - Metamask' : ''}`
-    }, {
-      id: 'web3-mode',
-      dataId: 'settingsWeb3Mode',
-      title: `Execution environment connects to an external node. For security, only connect to trusted networks. If Remix is served via https and your node is accessed via http, it might not work. In this case, try cloning the repository and serving it via http.`,
-      value: 'web3',
-      content: 'External HTTP Provider'
     }],
     isRequesting: false,
     isSuccessful: false,