From f61eceb57c0c91776f6980b4e68b3a3763fa633e Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 22 Nov 2021 11:18:58 +0100 Subject: [PATCH] Add toaster to run-tab --- .../remix-ui/run-tab/src/lib/actions/index.ts | 16 +++++---- .../run-tab/src/lib/actions/payload.ts | 13 +++++++ .../run-tab/src/lib/reducers/runTab.ts | 22 ++++++++++-- libs/remix-ui/run-tab/src/lib/run-tab.tsx | 36 +++++++++++++++++-- 4 files changed, 77 insertions(+), 10 deletions(-) diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts index 4159ec33a0..f5a30c0cea 100644 --- a/libs/remix-ui/run-tab/src/lib/actions/index.ts +++ b/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 @@ -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`${network.name} provider added`) + 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()) +} diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts index ea21748146..09bedf03d9 100644 --- a/libs/remix-ui/run-tab/src/lib/actions/payload.ts +++ b/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' + } +} 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 aa318adb56..3362621b88 100644 --- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts +++ b/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 } diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx index edf41f8a68..272329d78d 100644 --- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx +++ b/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([]) + const [focusToaster, setFocusToaster] = useState('') + const [toasters, setToasters] = useState([]) 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 (
@@ -101,7 +133,7 @@ export function RunTabUI (props: RunTabProps) {
- {/* */} + ) }