Added modal to runTab

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

@@ -126,7 +126,7 @@ export class RunTab extends ViewPlugin {
         Currently you have no contract instances to interact with.
       </span>`
 
-    this.event.register('clearInstance', () => {
+    this.event.register('clearInstance', () => { // setFinalContext calls this
       this.instanceContainer.innerHTML = '' // clear the instances list
       this.instanceContainer.appendChild(instanceContainerTitle)
       this.instanceContainer.appendChild(this.noInstancesText)

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

@@ -10,6 +10,29 @@ export function useRunTabPlugin (plugin) {
   const [runTab, dispatch] = React.useReducer(runTabReducer, runTabInitialState)
 
   const setupEvents = () => {
+    plugin.blockchain.resetAndInit(plugin.config, {
+      getAddress: (cb) => {
+        cb(null, runTab.accounts.selectedAccount)
+      },
+      getValue: (cb) => {
+        try {
+          const number = runTab.sendValue
+          const unit = runTab.sendUnit
+
+          cb(null, Web3.utils.toWei(number, unit))
+        } catch (e) {
+          cb(e)
+        }
+      },
+      getGasLimit: (cb) => {
+        try {
+          cb(null, '0x' + new ethJSUtil.BN(runTab.gasLimit, 10).toString(16))
+        } catch (e) {
+          cb(e.message)
+        }
+      }
+    })
+  
     plugin.blockchain.events.on('newTransaction', (tx, receipt) => {
       plugin.emit('newTransaction', tx, receipt)
     })
@@ -39,29 +62,16 @@ export function useRunTabPlugin (plugin) {
 
     plugin.blockchain.event.register('addProvider', provider => addExternalProvider(provider))
     plugin.blockchain.event.register('removeProvider', name => removeExternalProvider(name))
-
+    plugin.on('manager', 'pluginActivated', addPluginProvider.bind(plugin))
-    plugin.blockchain.resetAndInit(plugin.config, {
+    plugin.on('manager', 'pluginDeactivated', removePluginProvider.bind(plugin))
-      getAddress: (cb) => {
+
-        cb(null, runTab.accounts.selectedAccount)
+    // setInterval(() => {
-      },
+    //   fillAccountsList()
-      getValue: (cb) => {
+    // }, 1000)
-        try {
+    // fillAccountsList()
-          const number = runTab.sendValue
+    setTimeout(() => {
-          const unit = runTab.sendUnit
+      fillAccountsList()
-
+    }, 0)
-          cb(null, Web3.utils.toWei(number, unit))
-        } catch (e) {
-          cb(e)
-        }
-      },
-      getGasLimit: (cb) => {
-        try {
-          cb(null, '0x' + new ethJSUtil.BN(runTab.gasLimit, 10).toString(16))
-        } catch (e) {
-          cb(e.message)
-        }
-      }
-    })
   }
 
   const updateAccountBalances = () => {
@@ -183,5 +193,5 @@ export function useRunTabPlugin (plugin) {
     }, setFinalContext())
   }
 
-  return { runTab, setupEvents, fillAccountsList, setAccount, setUnit, setGasFee, addPluginProvider, removePluginProvider, setExecEnv, setFinalContext, setExecutionContext }
+  return { runTab, setupEvents, fillAccountsList, setAccount, setUnit, setGasFee, setExecEnv, setFinalContext, setExecutionContext }
 }

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

@@ -81,3 +81,16 @@ export const removeProvider = (provider: string) => {
     payload: provider
   }
 }
+
+export const displayNotification = (title: string, message: string, labelOk: string, labelCancel: string, actionOk?: (...args) => void, actionCancel?: (...args) => void) => {
+  return {
+    type: 'DISPLAY_NOTIFICATION',
+    payload: { title, message, labelOk, labelCancel, actionOk, actionCancel }
+  }
+}
+
+export const hideNotification = () => {
+  return {
+    type: 'HIDE_NOTIFICATION'
+  }
+}

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

@@ -3,47 +3,14 @@ import React from 'react'
 import { EnvironmentProps } from '../types'
 
 export function EnvironmentUI (props: EnvironmentProps) {
-  // setDropdown (selectExEnv) {
-  //   this.selectExEnv = selectExEnv
-
-  //   const addProvider = (network) => {
-  //     selectExEnv.appendChild(yo`<option
-  //       title="provider name: ${network.name}"
-  //       value="${network.name}"
-  //       name="executionContext"
-  //     >
-  //       ${network.name}
-  //     </option>`)
-  //     addTooltip(yo`<span><b>${network.name}</b> provider added</span>`)
-  //   }
-
-  //   const removeProvider = (name) => {
-  //     var env = selectExEnv.querySelector(`option[value="${name}"]`)
-  //     if (env) {
-  //       selectExEnv.removeChild(env)
-  //       addTooltip(yo`<span><b>${name}</b> provider removed</span>`)
-  //     }
-  //   }
-  //   this.blockchain.event.register('addProvider', provider => addProvider(provider))
-  //   this.blockchain.event.register('removeProvider', name => removeProvider(name))
-
-  //   selectExEnv.addEventListener('change', (event) => {
-  //     const provider = selectExEnv.options[selectExEnv.selectedIndex]
-  //     const fork = provider.getAttribute('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'
-  //     this.setExecutionContext({ context, fork })
-  //   })
-
-  //   selectExEnv.value = this._getProviderDropdownValue()
-  // }
-
   const handleChangeExEnv = (env: string) => {
-    props.setExecEnv(env)
+    const provider = props.providers.providerList.find(exEnv => exEnv.value === env)
-    const fork = provider.getAttribute('fork') // can be undefined if connected to an external source (web3 provider / injected)
+    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'
-    this.setExecutionContext({ context, fork })
+    props.setExecutionContext({ context, fork })
+    props.setExecEnv(env)
   }
 
   return (
@@ -54,10 +21,10 @@ export function EnvironmentUI (props: EnvironmentProps) {
       <div className="udapp_environment">
         <select id="selectExEnvOptions" data-id="settingsSelectEnvOptions" className="form-control udapp_select custom-select" value={props.selectedEnv} onChange={(e) => { handleChangeExEnv(e.target.value) }}>
           {
-            props.providerList.map((provider) =>
+            props.providers.providerList.map((provider, index) =>
-              <option id={provider.id} data-id={provider.dataId}
+              <option id={provider.id} key={index} data-id={provider.dataId}
                 title={provider.title}
-                value={provider.value}> Web3 Provider
+                value={provider.value}> { provider.content }
               </option>
             )
           }

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

@@ -87,7 +87,7 @@ export function SettingsUI (props: SettingsProps) {
 
   return (
     <div className="udapp_settings">
-      <EnvironmentUI setExecEnv={props.setExecEnv} selectedEnv={props.selectExEnv} />
+      <EnvironmentUI setExecEnv={props.setExecEnv} 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} />
       <GasPriceUI gasLimit={props.gasLimit} setGasFee={props.setGasFee} />

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

@@ -29,6 +29,14 @@ export interface RunTabState {
     isRequesting: boolean,
     isSuccessful: boolean,
     error: string
+  },
+  notification: {
+    title: string,
+    message: string,
+    actionOk: () => void,
+    actionCancel: (() => void) | null,
+    labelOk: string,
+    labelCancel: string
   }
 }
 
@@ -78,6 +86,14 @@ export const runTabInitialState: RunTabState = {
     isRequesting: false,
     isSuccessful: false,
     error: null
+  },
+  notification: {
+    title: '',
+    message: '',
+    actionOk: () => {},
+    actionCancel: () => {},
+    labelOk: '',
+    labelCancel: ''
   }
 }
 
@@ -203,7 +219,7 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
     }
 
     case 'FETCH_PROVIDER_LIST_SUCCESS': {
-      const payload: Record<string, string> = action.payload
+      const payload: { id?: string, dataId?: string, title?: string, value: string, fork?: string, content: string }[] = action.payload
 
       return {
         ...state,
@@ -255,6 +271,29 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
 
+    case 'DISPLAY_NOTIFICATION': {
+      const payload = action.payload as { title: string, message: string, actionOk: () => void, actionCancel: () => void, labelOk: string, labelCancel: string }
+
+      return {
+        ...state,
+        notification: {
+          title: payload.title,
+          message: payload.message,
+          actionOk: payload.actionOk || runTabInitialState.notification.actionOk,
+          actionCancel: payload.actionCancel || runTabInitialState.notification.actionCancel,
+          labelOk: payload.labelOk,
+          labelCancel: payload.labelCancel
+        }
+      }
+    }
+
+    case 'HIDE_NOTIFICATION': {
+      return {
+        ...state,
+        notification: runTabInitialState.notification
+      }
+    }
+
     default:
       return state
   }

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

@@ -1,38 +1,86 @@
 // eslint-disable-next-line no-use-before-define
-import React, { useEffect } from 'react'
+import React, { Fragment, useEffect, useState } from 'react'
+import { ModalDialog } from '@remix-ui/modal-dialog'
+// eslint-disable-next-line no-unused-vars
+import { Toaster } from '@remix-ui/toaster'
 import { useRunTabPlugin } from './actions/custom'
 import { ContractDropdownUI } from './components/contractDropdownUI'
 import { InstanceContainerUI } from './components/instanceContainerUI'
 import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
 import './css/run-tab.css'
-import { RunTabProps } from './types'
+import { Modal, RunTabProps } from './types'
 
 export function RunTabUI (props: RunTabProps) {
-  const { runTab, setupEvents, fillAccountsList, setAccount, setUnit, setGasFee, addPluginProvider, removePluginProvider, setExecEnv, setExecutionContext } = useRunTabPlugin(props.plugin)
+  const { runTab, setupEvents, setAccount, setUnit, setGasFee, setExecEnv, setExecutionContext } = useRunTabPlugin(props.plugin)
+  const [focusModal, setFocusModal] = useState<Modal>({
+    hide: true,
+    title: '',
+    message: '',
+    okLabel: '',
+    okFn: () => {},
+    cancelLabel: '',
+    cancelFn: () => {}
+  })
+  const [modals, setModals] = useState<Modal[]>([])
 
   useEffect(() => {
     setupEvents()
-    // setInterval(() => {
-    //   fillAccountsList()
-    // }, 1000)
-    // fillAccountsList()
-    setTimeout(() => {
-      fillAccountsList()
-    }, 0)
-
-    props.plugin.on('manager', 'pluginActivated', addPluginProvider.bind(props.plugin))
-    props.plugin.on('manager', 'pluginDeactivated', removePluginProvider.bind(props.plugin))
   }, [])
 
+  useEffect(() => {
+    if (modals.length > 0) {
+      setFocusModal(() => {
+        const focusModal = {
+          hide: false,
+          title: modals[0].title,
+          message: modals[0].message,
+          okLabel: modals[0].okLabel,
+          okFn: modals[0].okFn,
+          cancelLabel: modals[0].cancelLabel,
+          cancelFn: modals[0].cancelFn
+        }
+        return focusModal
+      })
+      const modalList = modals.slice()
+
+      modalList.shift()
+      setModals(modalList)
+    }
+  }, [modals])
+
+  useEffect(() => {
+    if (runTab.notification.title) {
+      modal(runTab.notification.title, runTab.notification.message, runTab.notification.labelOk, runTab.notification.actionOk, runTab.notification.labelCancel, runTab.notification.actionCancel)
+    }
+  }, [runTab.notification])
+
+  // eslint-disable-next-line no-undef
+  const modal = (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => {
+    setModals(modals => {
+      modals.push({ message, title, okLabel, okFn, cancelLabel, cancelFn })
+      return [...modals]
+    })
+  }
+
+  const handleHideModal = () => {
+    setFocusModal(modal => {
+      return { ...modal, hide: true, message: null }
+    })
+  }
+
   return (
-    <div className="udapp_runTabView run-tab" id="runTabView" data-id="runTabView">
+    <Fragment>
-      <div className="list-group list-group-flush">
+      <div className="udapp_runTabView run-tab" id="runTabView" data-id="runTabView">
-        <SettingsUI networkName={runTab.networkName} personalMode={runTab.personalMode} selectExEnv={runTab.selectExEnv} setExecEnv={setExecEnv} accounts={runTab.accounts} setAccount={setAccount} setUnit={setUnit} sendValue={runTab.sendValue} sendUnit={runTab.sendUnit} gasLimit={runTab.gasLimit} setGasFee={setGasFee} />
+        <div className="list-group list-group-flush">
-        <ContractDropdownUI exEnvironment={runTab.selectExEnv} />
+          <SettingsUI networkName={runTab.networkName} personalMode={runTab.personalMode} selectExEnv={runTab.selectExEnv} setExecEnv={setExecEnv} accounts={runTab.accounts} setAccount={setAccount} setUnit={setUnit} sendValue={runTab.sendValue} sendUnit={runTab.sendUnit} gasLimit={runTab.gasLimit} setGasFee={setGasFee} providers={runTab.providers} setExecutionContext={setExecutionContext} />
-        <RecorderUI />
+          <ContractDropdownUI exEnvironment={runTab.selectExEnv} />
-        <InstanceContainerUI />
+          <RecorderUI />
+          <InstanceContainerUI />
+        </div>
       </div>
-    </div>
+      <ModalDialog id='fileSystem' { ...focusModal } handleHide={ handleHideModal } />
+      {/* <Toaster message={focusToaster} handleHide={handleToaster} /> */}
+    </Fragment>
   )
 }

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

@@ -19,12 +19,40 @@ export interface SettingsProps {
   setGasFee: (value: number) => void,
   setExecEnv: (env: string) => void,
   personalMode: boolean,
-  networkName: string
+  networkName: string,
+  providers: {
+    providerList: {
+      id?: string,
+      dataId?: string,
+      title?: string,
+      value: string,
+      fork?: string
+      content: string
+    }[],
+    isRequesting: boolean,
+    isSuccessful: boolean,
+    error: string
+  },
+  setExecutionContext: (executionContext: { context: string, fork: string }) => void
 }
 
 export interface EnvironmentProps {
   setExecEnv: (env: string) => void,
-  selectedEnv: string
+  selectedEnv: string,
+  providers: {
+    providerList: {
+      id?: string,
+      dataId?: string,
+      title?: string,
+      value: string,
+      fork?: string
+      content: string
+    }[],
+    isRequesting: boolean,
+    isSuccessful: boolean,
+    error: string
+  },
+  setExecutionContext: (executionContext: { context: string, fork: string }) => void
 }
 
 export interface NetworkProps {
@@ -66,3 +94,14 @@ export interface RecorderProps {
 export interface InstanceContainerProps {
 
 }
+
+export interface Modal {
+  hide?: boolean
+  title: string
+  // eslint-disable-next-line no-undef
+  message: string | JSX.Element
+  okLabel: string
+  okFn: () => void
+  cancelLabel: string
+  cancelFn: () => void
+}