Remove yo-yo dependency in run-tab

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

@@ -4,10 +4,8 @@ import { RunTabUI } from '@remix-ui/run-tab'
 import { ViewPlugin } from '@remixproject/engine-web'
 import * as packageJson from '../../../../../package.json'
 
-const yo = require('yo-yo')
 const EventManager = require('../../lib/events')
 const Recorder = require('../tabs/runTab/model/recorder.js')
-const toaster = require('../ui/tooltip')
 const _paq = window._paq = window._paq || []
 
 const profile = {
@@ -65,18 +63,8 @@ export class RunTab extends ViewPlugin {
   async setEnvironmentMode (env) {
     const canCall = await this.askUserPermission('setEnvironmentMode', 'change the environment used')
     if (canCall) {
-      toaster(yo`
-        <div>
-          <i class="fas fa-exclamation-triangle text-danger mr-1"></i>
-          <span>
-            ${this.currentRequest.from}
-            <span class="font-weight-bold text-warning">
-              is changing your environment to
-            </span> ${env}
-          </span>
-        </div>
-      `, '', { time: 3000 })
-      this.settingsUI.setExecutionContext(env)
+      env = typeof env === 'string' ? { context: env } : env
+      this.emit('setEnvironmentModeReducer', env, this.currentRequest.from)
     }
   }
 

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

@@ -3,7 +3,7 @@ import React from 'react'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
 import { addressToString, createNonClashingNameAsync, shortenAddress } from '@remix-ui/helper'
-import { addNewInstance, addProvider, clearAllInstances, clearRecorderCount, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeExistingInstance, removeProvider, setBaseFeePerGas, setConfirmSettings, setCurrentFile, setDecodedResponse, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setGasPrice, setGasPriceStatus, setIpfsCheckedState, setLoadType, setMatchPassphrase, setMaxFee, setMaxPriorityFee, setNetworkName, setPassphrase, setPathToScenario, setRecorderCount, setSelectedAccount, setSendUnit, setSendValue, setTxFeeContent } from './payload'
+import { addNewInstance, addProvider, clearAllInstances, clearRecorderCount, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeExistingInstance, removeProvider, setBaseFeePerGas, setConfirmSettings, setCurrentFile, setDecodedResponse, setEnvToasterContent, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setGasPrice, setGasPriceStatus, setIpfsCheckedState, setLoadType, setMatchPassphrase, setMaxFee, setMaxPriorityFee, setNetworkName, setPassphrase, setPathToScenario, setRecorderCount, setSelectedAccount, setSendUnit, setSendValue, setTxFeeContent, setWeb3Dialog } from './payload'
 import { RunTab } from '../types/run-tab'
 import { CompilerAbstract } from '@remix-project/remix-solidity'
 import * as remixLib from '@remix-project/remix-lib'
@@ -102,6 +102,11 @@ const setupEvents = () => {
 
   plugin.on('optimism-compiler', 'compilationFinished', (file, source, languageVersion, data) => broadcastCompilationResult(file, source, languageVersion, data))
 
+  plugin.on('udapp', 'setEnvironmentModeReducer', (env: { context: string, fork: string }, from: string) => {
+    dispatch(displayPopUp(plugin.REACT_API.envToasterContent(env, from)))
+    setExecutionContext(env, plugin.REACT_API.web3Dialog())
+  })
+
   plugin.fileManager.events.on('currentFileChanged', (currentFile: string) => {
     if (/.(.abi)$/.exec(currentFile)) {
       dispatch(setLoadType('abi'))
@@ -124,6 +129,11 @@ const setupEvents = () => {
   })
 }
 
+export const initWebDialogs = (envToasterContent: (env: { context: string, fork: string }, from: string) => void, web3Dialog: () => void) => async (dispatch: React.Dispatch<any>) => {
+  dispatch(setEnvToasterContent(envToasterContent))
+  dispatch(setWeb3Dialog)
+}
+
 const updateAccountBalances = () => {
   const accounts = plugin.REACT_API.accounts.loadedAccounts
 

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

@@ -104,7 +104,7 @@ export const setExternalEndpoint = (endpoint: string) => {
   }
 }
 
-export const displayPopUp = (message: string) => {
+export const displayPopUp = (message: string | JSX.Element) => {
   return {
     type: 'DISPLAY_POPUP_MESSAGE',
     payload: message
@@ -269,3 +269,16 @@ export const clearRecorderCount = () => {
     type: 'CLEAR_RECORDER_COUNT'
   }
 }
+
+export const setEnvToasterContent = (content: (env: { context: string, fork: string }, from: string) => void) => {
+  return {
+    type: 'SET_ENV_TOASTER_CONTENT',
+    payload: content
+  }
+}
+
+export const setWeb3Dialog = () => {
+  return {
+    type: 'SET_WEB3_DIALOG'
+  }
+}

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

@@ -3,55 +3,17 @@ import React from 'react'
 import { EnvironmentProps } from '../types'
 
 export function EnvironmentUI (props: EnvironmentProps) {
-  const handleInputEndpoint = (e: any) => {
-    props.setWeb3Endpoint(e.target.value)
-  }
-
   const handleChangeExEnv = (env: string) => {
     const provider = props.providers.providerList.find(exEnv => exEnv.value === env)
     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'
-    const displayContent = web3ProviderDialogBody()
+    const displayContent = props.web3ProviderDialog()
 
     props.setExecutionContext({ context, fork }, displayContent)
   }
 
-  const web3ProviderDialogBody = () => {
-    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">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">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">Remix Docs on Web3 Provider</a>
-          <br />
-          <br />
-          Web3 Provider Endpoint
-        </div>
-        <input
-          onInput={handleInputEndpoint}
-          type='text'
-          name='prompt_text'
-          id='prompt_text'
-          style={{ width: '100%' }}
-          className="form-control"
-          defaultValue={props.externalEndpoint}
-          data-id="modalDialogCustomPromptText"
-        />
-      </>
-    )
-  }
-
   return (
     <div className="udapp_crow">
       <label id="selectExEnv" className="udapp_settingsLabel">

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

@@ -12,7 +12,7 @@ export function SettingsUI (props: SettingsProps) {
 
   return (
     <div className="udapp_settings">
-      <EnvironmentUI setWeb3Endpoint={props.setWeb3Endpoint} selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} externalEndpoint={props.externalEndpoint} />
+      <EnvironmentUI selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} web3ProviderDialog={props.web3ProviderDialog} />
       <NetworkUI networkName={props.networkName} />
       <AccountUI personalMode={props.personalMode} selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} createNewBlockchainAccount={props.createNewBlockchainAccount} setPassphrase={props.setPassphrase} setMatchPassphrase={props.setMatchPassphrase} tooltip={props.tooltip} modal={props.modal} signMessageWithAddress={props.signMessageWithAddress} passphrase={props.passphrase} />
       <GasPriceUI gasLimit={props.gasLimit} setGasFee={props.setGasFee} />

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

@@ -0,0 +1,44 @@
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+
+interface web3ProviderDialogProps {
+  setWeb3Endpoint: (value: string) => void,
+  externalEndpoint: string
+}
+const thePath = '<path/to/local/folder/for/test/chain>'
+
+export function Web3ProviderDialog (props: web3ProviderDialogProps) {
+  const handleInputEndpoint = (e) => {
+    props.setWeb3Endpoint(e.target.value)
+  }
+
+  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">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">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">Remix Docs on Web3 Provider</a>
+        <br />
+        <br />
+        Web3 Provider Endpoint
+      </div>
+      <input
+        onInput={handleInputEndpoint}
+        type='text'
+        name='prompt_text'
+        id='prompt_text'
+        style={{ width: '100%' }}
+        className="form-control"
+        defaultValue={props.externalEndpoint}
+        data-id="modalDialogCustomPromptText"
+      />
+    </>
+  )
+}

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

@@ -77,7 +77,9 @@ export interface RunTabState {
   recorder: {
     pathToScenario: string,
     transactionCount: number
-  }
+  },
+  envToasterContent: (env: { context: string, fork: string }, from: string) => JSX.Element
+  web3Dialog: () => JSX.Element
 }
 
 export const runTabInitialState: RunTabState = {
@@ -162,7 +164,9 @@ export const runTabInitialState: RunTabState = {
   recorder: {
     pathToScenario: 'scenario.json',
     transactionCount: 0
-  }
+  },
+  envToasterContent: null,
+  web3Dialog: null
 }
 
 export const runTabReducer = (state: RunTabState = runTabInitialState, action: Action) => {
@@ -625,6 +629,24 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
 
+    case 'SET_ENV_TOASTER_CONTENT': {
+      const payload: (env: string, from: string) => JSX.Element = action.payload
+
+      return {
+        ...state,
+        envToasterContent: payload
+      }
+    }
+
+    case 'SET_WEB3_DIALOG': {
+      const payload: () => JSX.Element = action.payload
+
+      return {
+        ...state,
+        web3Dialog: payload
+      }
+    }
+
     default:
       return state
   }

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

@@ -24,13 +24,14 @@ import {
   removeInstance, getContext,
   runTransactions, loadAddress,
   storeScenario, runCurrentScenario,
-  updateScenarioPath
+  updateScenarioPath, initWebDialogs
 } from './actions'
 import './css/run-tab.css'
 import { PublishToStorage } from '@remix-ui/publish-to-storage'
 import { PassphrasePrompt } from './components/passphrase'
 import { MainnetPrompt } from './components/mainnet'
 import { ScenarioPrompt } from './components/scenario'
+import { Web3ProviderDialog } from './components/web3Dialog'
 
 export function RunTabUI (props: RunTabProps) {
   const { plugin } = props
@@ -58,6 +59,7 @@ export function RunTabUI (props: RunTabProps) {
 
   useEffect(() => {
     initRunTab(plugin)(dispatch)
+    initWebDialogs(envChangeNotification, web3Dialog)(dispatch)
   }, [plugin])
 
   useEffect(() => {
@@ -189,6 +191,24 @@ export function RunTabUI (props: RunTabProps) {
     />
   }
 
+  const envChangeNotification = (env: { context: string, fork: string }, from: string) => {
+    return (
+      <div>
+        <i className="fas fa-exclamation-triangle text-danger mr-1"></i>
+        <span>
+          {from}
+          <span className="font-weight-bold text-warning">
+            is changing your environment to
+          </span> {env}
+        </span>
+      </div>
+    )
+  }
+
+  const web3Dialog = () => {
+    return <Web3ProviderDialog externalEndpoint={runTab.externalEndpoint} setWeb3Endpoint={setWeb3Endpoint} />
+  }
+
   return (
     <Fragment>
       <div className="udapp_runTabView run-tab" id="runTabView" data-id="runTabView">
@@ -197,7 +217,6 @@ export function RunTabUI (props: RunTabProps) {
             networkName={runTab.networkName}
             personalMode={runTab.personalMode}
             selectExEnv={runTab.selectExEnv}
-            externalEndpoint={runTab.externalEndpoint}
             setWeb3Endpoint={setWeb3Endpoint}
             accounts={runTab.accounts}
             setAccount={setAccount}
@@ -215,6 +234,7 @@ export function RunTabUI (props: RunTabProps) {
             tooltip={toast}
             signMessageWithAddress={signMessageWithAddress}
             passphrase={runTab.passphrase}
+            web3ProviderDialog={web3Dialog}
           />
           <ContractDropdownUI
             exEnvironment={runTab.selectExEnv}

libs/remix-ui/run-tab/src/lib/types/index.ts

@@ -35,18 +35,17 @@ export interface SettingsProps {
     error: string
   },
   setExecutionContext: (executionContext: { context: string, fork: string }, displayContent: JSX.Element) => void,
-  externalEndpoint: string,
   createNewBlockchainAccount: (cbMessage: JSX.Element) => void,
   setPassphrase: (passphrase: string) => void,
   setMatchPassphrase: (passphrase: string) => void,
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   tooltip: (toasterMsg: string) => void,
   signMessageWithAddress: (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => void,
-  passphrase: string
+  passphrase: string,
+  web3ProviderDialog: () => JSX.Element
 }
 
 export interface EnvironmentProps {
-  setWeb3Endpoint: (endpoint: string) => void,
   selectedEnv: string,
   providers: {
     providerList: {
@@ -62,7 +61,7 @@ export interface EnvironmentProps {
     error: string
   },
   setExecutionContext: (executionContext: { context: string, fork: string }, displayContent: JSX.Element) => void,
-  externalEndpoint: string
+  web3ProviderDialog: () => JSX.Element
 }
 
 export interface NetworkProps {