Add toaster to run-tab

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 { shortenAddress } from '@remix-ui/helper'
-import { addProvider, displayNotification, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, removeProvider, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setNetworkName, setSelectedAccount, setSendUnit, setSendValue } from './payload'
+import { addProvider, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, hidePopUp, removeProvider, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setNetworkName, setSelectedAccount, setSendUnit, setSendValue } from './payload'
 import { RunTab } from '../types/run-tab'
 
 let plugin: RunTab, dispatch: React.Dispatch<any>
@@ -115,7 +115,7 @@ const fillAccountsList = async () => {
       dispatch(fetchAccountsListFailed(e.message))
     })
   } catch (e) {
-    // addTooltip(`Cannot get account list: ${e}`)
+    dispatch(displayPopUp(`Cannot get account list: ${e}`))
   }
 }
 
@@ -158,7 +158,7 @@ const setFinalContext = () => {
   const value = _getProviderDropdownValue()
 
   setExecEnv(value)
-  // this.event.trigger('clearInstance', [])
+  // this.event.trigger('clearInstance', []) //check cleaIinstance event in run-tab.js
 }
 
 const _getProviderDropdownValue = (): string => {
@@ -178,7 +178,7 @@ const setNetworkNameFromProvider = (networkName: string) => {
 
 const addExternalProvider = (network) => {
   dispatch(addProvider(network))
-  // addTooltip(yo`<span><b>${network.name}</b> provider added</span>`)
+  dispatch(displayPopUp(`${network.name} provider added`))
 }
 
 const removeExternalProvider = (name) => {
@@ -190,15 +190,19 @@ export const setExecutionContext = (executionContext: { context: string, fork: s
   plugin.blockchain.changeExecutionContext(executionContext, () => {
     dispatch(displayNotification('External node request', displayContent, 'OK', 'Cancel', () => {
       plugin.blockchain.setProviderFromEndpoint(plugin.REACT_API.externalEndpoint, executionContext, (alertMsg) => {
-        // if (alertMsg) addTooltip(alertMsg)
+        if (alertMsg) dispatch(displayPopUp(alertMsg))
         setFinalContext()
       })
     }, () => { setFinalContext() }))
   }, (alertMsg) => {
-    // addTooltip(alertMsg)
+    dispatch(displayPopUp(alertMsg))
   }, setFinalContext())
 }
 
 export const setWeb3Endpoint = (endpoint: string) => {
   dispatch(setExternalEndpoint(endpoint))
 }
+
+export const clearPopUp = async () => {
+  dispatch(hidePopUp())
+}

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

@@ -102,3 +102,16 @@ export const setExternalEndpoint = (endpoint: string) => {
     payload: endpoint
   }
 }
+
+export const displayPopUp = (message: string) => {
+  return {
+    type: 'DISPLAY_POPUP_MESSAGE',
+    payload: message
+  }
+}
+
+export const hidePopUp = () => {
+  return {
+    type: 'HIDE_POPUP_MESSAGE'
+  }
+}

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

@@ -38,7 +38,8 @@ export interface RunTabState {
     labelOk: string,
     labelCancel: string
   },
-  externalEndpoint: string
+  externalEndpoint: string,
+  popup: string
 }
 
 export const runTabInitialState: RunTabState = {
@@ -96,7 +97,8 @@ export const runTabInitialState: RunTabState = {
     labelOk: '',
     labelCancel: ''
   },
-  externalEndpoint: 'http://127.0.0.1:8545'
+  externalEndpoint: 'http://127.0.0.1:8545',
+  popup: ''
 }
 
 export const runTabReducer = (state: RunTabState = runTabInitialState, action: Action) => {
@@ -305,6 +307,22 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
 
+    case 'DISPLAY_POPUP_MESSAGE': {
+      const payload = action.payload as string
+
+      return {
+        ...state,
+        popup: payload
+      }
+    }
+
+    case 'HIDE_POPUP_MESSAGE': {
+      return {
+        ...state,
+        popup: ''
+      }
+    }
+
     default:
       return state
   }

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

@@ -9,7 +9,7 @@ import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
 import { Modal, RunTabProps } from './types'
 import { runTabInitialState, runTabReducer } from './reducers/runTab'
-import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint } from './actions'
+import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint, clearPopUp } from './actions'
 import './css/run-tab.css'
 
 export function RunTabUI (props: RunTabProps) {
@@ -24,6 +24,8 @@ export function RunTabUI (props: RunTabProps) {
     cancelFn: () => {}
   })
   const [modals, setModals] = useState<Modal[]>([])
+  const [focusToaster, setFocusToaster] = useState<string>('')
+  const [toasters, setToasters] = useState<string[]>([])
   const [runTab, dispatch] = useReducer(runTabReducer, runTabInitialState)
   const REACT_API = { runTab }
 
@@ -62,6 +64,24 @@ export function RunTabUI (props: RunTabProps) {
     }
   }, [runTab.notification])
 
+  useEffect(() => {
+    if (toasters.length > 0) {
+      setFocusToaster(() => {
+        return toasters[0]
+      })
+      const toasterList = toasters.slice()
+
+      toasterList.shift()
+      setToasters(toasterList)
+    }
+  }, [toasters])
+
+  useEffect(() => {
+    if (runTab.popup) {
+      toast(runTab.popup)
+    }
+  }, [runTab.popup])
+
   // eslint-disable-next-line no-undef
   const modal = (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => {
     setModals(modals => {
@@ -76,6 +96,18 @@ export function RunTabUI (props: RunTabProps) {
     })
   }
 
+  const handleToaster = () => {
+    setFocusToaster('')
+    clearPopUp()
+  }
+
+  const toast = (toasterMsg: string) => {
+    setToasters(messages => {
+      messages.push(toasterMsg)
+      return [...messages]
+    })
+  }
+
   return (
     <Fragment>
       <div className="udapp_runTabView run-tab" id="runTabView" data-id="runTabView">
@@ -101,7 +133,7 @@ export function RunTabUI (props: RunTabProps) {
         </div>
       </div>
       <ModalDialog id='fileSystem' { ...focusModal } handleHide={ handleHideModal } />
-      {/* <Toaster message={focusToaster} handleHide={handleToaster} /> */}
+      <Toaster message={focusToaster} handleHide={handleToaster} />
     </Fragment>
   )
 }