Use plugin calls for toaster and modal.

apps/remix-ide/src/app.js

@@ -19,7 +19,7 @@ import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, Fetch
 import Registry from './app/state/registry'
 import { ConfigPlugin } from './app/plugins/config'
 import { Layout } from './app/panels/layout'
-import { ModalPlugin } from './app/plugins/modal'
+import { NotificationPlugin } from './app/plugins/notification'
 import { Blockchain } from './blockchain/blockchain.js'
 import { HardhatProvider } from './app/tabs/hardhat-provider'
 
@@ -187,7 +187,7 @@ class AppComponent {
     )
     const contextualListener = new EditorContextListener()
 
-    self.modal = new ModalPlugin()
+    self.notification = new NotificationPlugin()
 
     const configPlugin = new ConfigPlugin()
     self.layout = new Layout()
@@ -197,7 +197,7 @@ class AppComponent {
     self.engine.register([
       permissionHandler,
       self.layout,
-      self.modal,
+      self.notification,
       self.gistHandler,
       configPlugin,
       blockchain,

apps/remix-ide/src/app/plugins/notification.tsx

@@ -4,7 +4,7 @@ import { AppModal } from '@remix-ui/app'
 import { AlertModal } from 'libs/remix-ui/app/src/lib/remix-app/interface'
 import { dispatchModalInterface } from 'libs/remix-ui/app/src/lib/remix-app/context/context'
 
-interface IModalApi {
+interface INotificationApi {
   events: StatusEvents,
   methods: {
     modal: (args: AppModal) => void
@@ -13,14 +13,14 @@ interface IModalApi {
   }
 }
 
-const profile:LibraryProfile<IModalApi> = {
+const profile:LibraryProfile<INotificationApi> = {
   name: 'notification',
   displayName: 'Notification',
   description: 'Displays notifications',
   methods: ['modal', 'alert', 'toast']
 }
 
-export class ModalPlugin extends Plugin implements MethodApi<IModalApi> {
+export class NotificationPlugin extends Plugin implements MethodApi<INotificationApi> {
   dispatcher: dispatchModalInterface
   constructor () {
     super(profile)
@@ -38,7 +38,7 @@ export class ModalPlugin extends Plugin implements MethodApi<IModalApi> {
     return this.dispatcher.alert(args)
   }
 
-  async toast (message: string) {
+  async toast (message: string | JSX.Element) {
     this.dispatcher.toast(message)
   }
 }

libs/remix-ui/app/src/lib/remix-app/context/context.tsx

@@ -7,7 +7,7 @@ export const AppContext = React.createContext<any>(null)
 
 export interface dispatchModalInterface {
   modal: (data: AppModal) => void
-  toast: (message: string) => void
+  toast: (message: string | JSX.Element) => void
   alert: (data: AlertModal) => void
   handleHideModal: () => void,
   handleToaster: () => void
@@ -15,7 +15,7 @@ export interface dispatchModalInterface {
 
 export const dispatchModalContext = React.createContext<dispatchModalInterface>({
   modal: (data: AppModal) => { },
-  toast: (message: string) => {},
+  toast: (message: string | JSX.Element) => {},
   alert: (data: AlertModal) => {},
   handleHideModal: () => {},
   handleToaster: () => {}

libs/remix-ui/app/src/lib/remix-app/remix-app.tsx

@@ -83,7 +83,7 @@ const RemixApp = (props: IRemixAppUi) => {
     settings: props.app.settings,
     showMatamo: props.app.showMatamo,
     appManager: props.app.appManager,
-    modal: props.app.modal,
+    modal: props.app.notification,
     layout: props.app.layout
   }
 

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

@@ -1,4 +1,5 @@
 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>
@@ -52,3 +53,19 @@ export const sourceVerificationNotAvailableToastMsg = () => (
     <b>Source verification plugin not activated or not available.</b> continuing <i>without</i> source code debugging.
   </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>
+    <span>
+      { from + ' '}
+      <span className="font-weight-bold text-warning">
+        is changing your environment to
+      </span> {env && env.context}
+    </span>
+  </div>
+)

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

@@ -2,8 +2,8 @@
 import React from 'react'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
-import { addressToString, createNonClashingNameAsync, extractNameFromKey, shortenAddress } from '@remix-ui/helper'
-import { addNewInstance, addProvider, clearAllInstances, clearRecorderCount, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeExistingInstance, removeProvider, resetUdapp, setBaseFeePerGas, setConfirmSettings, setCurrentFile, setDecodedResponse, setEnvToasterContent, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setGasPrice, setGasPriceStatus, setLoadType, setMatchPassphrase, setMaxFee, setMaxPriorityFee, setNetworkName, setPassphrase, setPathToScenario, setRecorderCount, setSelectedAccount, setSendUnit, setSendValue, setTxFeeContent, setWeb3Dialog } from './payload'
+import { addressToString, createNonClashingNameAsync, envChangeNotification, extractNameFromKey, shortenAddress, web3Dialog } from '@remix-ui/helper'
+import { addNewInstance, addProvider, clearAllInstances, clearRecorderCount, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeExistingInstance, removeProvider, resetUdapp, setBaseFeePerGas, setConfirmSettings, setCurrentFile, setDecodedResponse, setEnvToasterContent, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setGasPrice, setGasPriceStatus, setLoadType, setMatchPassphrase, setMaxFee, setMaxPriorityFee, setNetworkName, setPassphrase, setPathToScenario, setRecorderCount, setSelectedAccount, setSendUnit, setSendValue, setTxFeeContent } from './payload'
 import { RunTab } from '../types/run-tab'
 import { CompilerAbstract } from '@remix-project/remix-solidity'
 import * as remixLib from '@remix-project/remix-lib'
@@ -75,8 +75,8 @@ const setupEvents = () => {
   plugin.on('yulp', '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.call('notification', 'toast', envChangeNotification(env, from))
+    setExecutionContext(env)
   })
 
   plugin.on('filePanel', 'setWorkspace', () => {
@@ -106,11 +106,6 @@ 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(web3Dialog))
-}
-
 const updateAccountBalances = () => {
   const accounts = plugin.REACT_API.accounts.loadedAccounts
 
@@ -225,16 +220,28 @@ const removeExternalProvider = (name) => {
   dispatch(removeProvider(name))
 }
 
-export const setExecutionContext = (executionContext: { context: string, fork: string }, displayContent: JSX.Element) => {
+export const setExecutionContext = (executionContext: { context: string, fork: string }) => {
+  const displayContent = web3Dialog(plugin.REACT_API.externalEndpoint, setWeb3Endpoint)
+
   plugin.blockchain.changeExecutionContext(executionContext, () => {
-    dispatch(displayNotification('External node request', displayContent, 'OK', 'Cancel', () => {
-      plugin.blockchain.setProviderFromEndpoint(plugin.REACT_API.externalEndpoint, executionContext, (alertMsg) => {
-        if (alertMsg) dispatch(displayPopUp(alertMsg))
+    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()
+        })
+      },
+      cancelFn: () => {
         setFinalContext()
-      })
-    }, () => { setFinalContext() }))
+      }
+    })
   }, (alertMsg) => {
-    dispatch(displayPopUp(alertMsg))
+    plugin.call('notification', 'toast', alertMsg)
   }, () => { setFinalContext() })
 }
 

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

@@ -278,13 +278,6 @@ export const setEnvToasterContent = (content: (env: { context: string, fork: str
   }
 }
 
-export const setWeb3Dialog = (web3Dialog: () => void) => {
-  return {
-    type: 'SET_WEB3_DIALOG',
-    payload: web3Dialog
-  }
-}
-
 export const resetUdapp = () => {
   return {
     type: 'RESET_STATE'

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

@@ -9,9 +9,8 @@ export function EnvironmentUI (props: EnvironmentProps) {
     let context = provider.value
 
     context = context.startsWith('vm') ? 'vm' : context // context has to be 'vm', 'web3' or 'injected'
-    const displayContent = props.web3ProviderDialog()
 
-    props.setExecutionContext({ context, fork }, displayContent)
+    props.setExecutionContext({ context, fork })
   }
 
   return (

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 selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} web3ProviderDialog={props.web3ProviderDialog} />
+      <EnvironmentUI selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} />
       <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/reducers/runTab.ts

@@ -78,9 +78,7 @@ 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 = {
@@ -166,9 +164,7 @@ export const runTabInitialState: RunTabState = {
   recorder: {
     pathToScenario: 'scenario.json',
     transactionCount: 0
-  },
-  envToasterContent: null,
-  web3Dialog: null
+  }
 }
 
 type AddProvider = {
@@ -650,24 +646,6 @@ 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
-      }
-    }
-
     case 'RESET_STATE': {
       return {
         ...runTabInitialState,

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

@@ -24,15 +24,14 @@ import {
   removeInstance, getContext,
   runTransactions, loadAddress,
   storeScenario, runCurrentScenario,
-  updateScenarioPath, initWebDialogs,
-  getFuncABIInputs, setNetworkNameFromProvider
+  updateScenarioPath, getFuncABIInputs,
+  setNetworkNameFromProvider
 } 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'
 import { setIpfsCheckedState } from './actions/payload'
 
 export function RunTabUI (props: RunTabProps) {
@@ -61,7 +60,6 @@ export function RunTabUI (props: RunTabProps) {
 
   useEffect(() => {
     initRunTab(plugin)(dispatch)
-    initWebDialogs(envChangeNotification, web3Dialog)(dispatch)
   }, [plugin])
 
   useEffect(() => {
@@ -197,24 +195,6 @@ 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 && env.context}
-        </span>
-      </div>
-    )
-  }
-
-  const web3Dialog = () => {
-    return <Web3ProviderDialog externalEndpoint={runTab.externalEndpoint} setWeb3Endpoint={setWeb3Endpoint} />
-  }
-
   return (
     <Fragment>
       <div className="udapp_runTabView run-tab" id="runTabView" data-id="runTabView">
@@ -241,7 +221,6 @@ 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

@@ -34,7 +34,7 @@ export interface SettingsProps {
     isSuccessful: boolean,
     error: string
   },
-  setExecutionContext: (executionContext: { context: string, fork: string }, displayContent: JSX.Element) => void,
+  setExecutionContext: (executionContext: { context: string, fork: string }) => void,
   createNewBlockchainAccount: (cbMessage: JSX.Element) => void,
   setPassphrase: (passphrase: string) => void,
   setMatchPassphrase: (passphrase: string) => void,
@@ -42,7 +42,6 @@ export interface SettingsProps {
   tooltip: (toasterMsg: string) => void,
   signMessageWithAddress: (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => void,
   passphrase: string,
-  web3ProviderDialog: () => JSX.Element,
   setSendValue: (value: string) => void
 }
 
@@ -61,8 +60,7 @@ export interface EnvironmentProps {
     isSuccessful: boolean,
     error: string
   },
-  setExecutionContext: (executionContext: { context: string, fork: string }, displayContent: JSX.Element) => void,
-  web3ProviderDialog: () => JSX.Element
+  setExecutionContext: (executionContext: { context: string, fork: string }) => void
 }
 
 export interface NetworkProps {