From 2d8662d99a2a01ee475f6b244f6bb0d252974844 Mon Sep 17 00:00:00 2001 From: yann300 Date: Tue, 28 Jun 2022 12:13:03 +0200 Subject: [PATCH] refactor web provider as a provider plugin --- apps/remix-ide/src/app.js | 3 ++ .../src/app/tabs/basic-http-provider.tsx | 45 +++++++++++++++++++ apps/remix-ide/src/app/udapp/run-tab.js | 14 ++++++ .../src/blockchain/execution-context.js | 3 -- apps/remix-ide/src/remixAppManager.js | 2 +- .../helper/src/lib/helper-components.tsx | 5 --- .../run-tab/src/lib/actions/account.ts | 25 +---------- .../src/lib/components/environment.tsx | 2 +- .../run-tab/src/lib/reducers/runTab.ts | 6 --- 9 files changed, 66 insertions(+), 39 deletions(-) create mode 100644 apps/remix-ide/src/app/tabs/basic-http-provider.tsx diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js index 1b7c7b483a..0fd4ebae2f 100644 --- a/apps/remix-ide/src/app.js +++ b/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 ]) diff --git a/apps/remix-ide/src/app/tabs/basic-http-provider.tsx b/apps/remix-ide/src/app/tabs/basic-http-provider.tsx new file mode 100644 index 0000000000..5acd2a5200 --- /dev/null +++ b/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 = '' + return ( + <> +
+ Note: To use Geth & https://remix.ethereum.org, configure it to allow requests from Remix:(see Geth Docs on rpc server) +
geth --http --http.corsdomain https://remix.ethereum.org
+
+ To run Remix & a local Geth test node, use this command: (see Geth Docs on Dev mode) +
geth --http --http.corsdomain="{window.origin}" --http.api web3,eth,debug,personal,net --vmdebug --datadir {thePath} --dev console
+
+
+ WARNING: It is not safe to use the --http.corsdomain flag with a wildcard: --http.corsdomain * +
+
For more info: Remix Docs on Web3 Provider +
+
+ Web3 Provider Endpoint +
+ + ) + } +} \ No newline at end of file diff --git a/apps/remix-ide/src/app/udapp/run-tab.js b/apps/remix-ide/src/app/udapp/run-tab.js index 8a1e30324e..b1d6d31290 100644 --- a/apps/remix-ide/src/app/udapp/run-tab.js +++ b/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) { diff --git a/apps/remix-ide/src/blockchain/execution-context.js b/apps/remix-ide/src/blockchain/execution-context.js index e570b25056..95b4abe45d 100644 --- a/apps/remix-ide/src/blockchain/execution-context.js +++ b/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) => { diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js index bf8c5dccd3..9c00f8ab46 100644 --- a/apps/remix-ide/src/remixAppManager.js +++ b/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) } diff --git a/libs/remix-ui/helper/src/lib/helper-components.tsx b/libs/remix-ui/helper/src/lib/helper-components.tsx index 7cf79c9a46..206fbec926 100644 --- a/libs/remix-ui/helper/src/lib/helper-components.tsx +++ b/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) => (
@@ -54,10 +53,6 @@ export const sourceVerificationNotAvailableToastMsg = () => (
) -export const web3Dialog = (externalEndpoint: string, setWeb3Endpoint: (value: string) => void) => ( - -) - export const envChangeNotification = (env: { context: string, fork: string }, from: string) => (
diff --git a/libs/remix-ui/run-tab/src/lib/actions/account.ts b/libs/remix-ui/run-tab/src/lib/actions/account.ts index 9fba9a0723..12b05bec2b 100644 --- a/libs/remix-ui/run-tab/src/lib/actions/account.ts +++ b/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, 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) }) } diff --git a/libs/remix-ui/run-tab/src/lib/components/environment.tsx b/libs/remix-ui/run-tab/src/lib/components/environment.tsx index c63f1ba88f..be6b4a3f94 100644 --- a/libs/remix-ui/run-tab/src/lib/components/environment.tsx +++ b/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 }) } diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts index 010ebf31c5..2a0ff1c855 100644 --- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts +++ b/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,