diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js index e09c6bf3c9..d1868b20ba 100644 --- a/apps/remix-ide/src/app.js +++ b/apps/remix-ide/src/app.js @@ -12,6 +12,7 @@ import { VerticalIcons } from './app/components/vertical-icons' import { LandingPage } from './app/ui/landing-page/landing-page' import { MainPanel } from './app/components/main-panel' import { FramingService } from './framingService' +import { ModalPluginTester } from './app/plugins/test' import { WalkthroughService } from './walkthroughService' @@ -242,7 +243,10 @@ class AppComponent { contentImport ) + + const testplugin = new ModalPluginTester() self.engine.register([ + testplugin, compileTab, run, debug, @@ -280,6 +284,7 @@ class AppComponent { await self.appManager.activatePlugin(['hiddenPanel', 'pluginManager', 'contextualListener', 'terminal', 'blockchain', 'fetchAndCompile', 'contentImport']) await self.appManager.activatePlugin(['settings']) await self.appManager.activatePlugin(['walkthrough']) + await self.appManager.activatePlugin(['testerplugin']) self.appManager.on('filePanel', 'workspaceInitializationCompleted', async () => { await self.appManager.registerContextMenuItems() diff --git a/apps/remix-ide/src/app/plugins/test.ts b/apps/remix-ide/src/app/plugins/test.ts new file mode 100644 index 0000000000..cf24a4171d --- /dev/null +++ b/apps/remix-ide/src/app/plugins/test.ts @@ -0,0 +1,53 @@ +import { Plugin } from '@remixproject/engine' +import { Profile } from '@remixproject/plugin-utils' +import { AlertModal } from 'libs/remix-ui/app/src/lib/remix-app/interface' +import { ModalTypes } from 'libs/remix-ui/app/src/lib/remix-app/types' +import { AppModal } from '../../../../../libs/remix-ui/app/src' + +const profile:Profile = { + name: 'testerplugin', + displayName: 'testerplugin', + description: 'testerplugin', + methods: [] +} + +export class ModalPluginTester extends Plugin { + constructor () { + super(profile) + } + + handleMessage (message: any): void { + console.log(message) + } + + onActivation (): void { + // just a modal + let mod:AppModal = { + id: 'modal1', + title: 'test', + message: 'test', + okFn: this.handleMessage, + okLabel: 'yes', + cancelFn: null, + cancelLabel: 'no' + } + // this.call('modal', 'modal', mod) + + // modal with callback + mod = { ...mod, message: 'gist url', modalType: ModalTypes.prompt, defaultValue: 'prompting' } + // this.call('modal', 'modal', mod) + + // modal with password + mod = { ...mod, message: 'enter password to give me eth', modalType: ModalTypes.password, defaultValue: 'pass' } + // this.call('modal', 'modal', mod) + + const al:AlertModal = { + id: 'myalert', + message: 'alert message' + } + this.call('modal', 'alert', al) + + // set toaster + this.call('modal', 'toast', 'toast message') + } +} diff --git a/libs/remix-ui/app/src/lib/remix-app/components/modals/dialogs.tsx b/libs/remix-ui/app/src/lib/remix-app/components/modals/dialogs.tsx index f68cc6127f..7aba74f73b 100644 --- a/libs/remix-ui/app/src/lib/remix-app/components/modals/dialogs.tsx +++ b/libs/remix-ui/app/src/lib/remix-app/components/modals/dialogs.tsx @@ -9,7 +9,7 @@ const AppDialogs = () => { return ( <> - + ) } diff --git a/libs/remix-ui/app/src/lib/remix-app/components/modals/matomo.tsx b/libs/remix-ui/app/src/lib/remix-app/components/modals/matomo.tsx index 83106e75fc..4d4daaed3e 100644 --- a/libs/remix-ui/app/src/lib/remix-app/components/modals/matomo.tsx +++ b/libs/remix-ui/app/src/lib/remix-app/components/modals/matomo.tsx @@ -19,7 +19,7 @@ const MatomoDialog = (props) => { useEffect(() => { if (visible && showMatamo) { - modal({ title: 'Help us to improve Remix IDE', message: message(), okLabel: 'Accept', okFn: handleModalOkClick, cancelLabel: 'Decline', cancelFn: declineModal }) + modal({ id: 'matomoModal', title: 'Help us to improve Remix IDE', message: message(), okLabel: 'Accept', okFn: handleModalOkClick, cancelLabel: 'Decline', cancelFn: declineModal }) } }, [visible]) diff --git a/libs/remix-ui/app/src/lib/remix-app/components/modals/modal-wrapper.tsx b/libs/remix-ui/app/src/lib/remix-app/components/modals/modal-wrapper.tsx index 3eb819c8f9..04e3971cf0 100644 --- a/libs/remix-ui/app/src/lib/remix-app/components/modals/modal-wrapper.tsx +++ b/libs/remix-ui/app/src/lib/remix-app/components/modals/modal-wrapper.tsx @@ -10,6 +10,7 @@ interface ModalWrapperProps extends ModalDialogProps { const ModalWrapper = (props: ModalWrapperProps) => { const [state, setState] = useState() + const [modalInput, setModalInput] = useState('') const ref = useRef() const onFinishPrompt = async () => { @@ -21,11 +22,11 @@ const ModalWrapper = (props: ModalWrapperProps) => { } } - const createModalMessage = () => { + const createModalMessage = (defaultValue: string) => { return ( <> {props.message} - + ) } @@ -37,7 +38,7 @@ const ModalWrapper = (props: ModalWrapperProps) => { setState({ ...props, okFn: onFinishPrompt, - message: createModalMessage() + message: createModalMessage(props.defaultValue) }) break default: diff --git a/libs/remix-ui/app/src/lib/remix-app/components/modals/origin-warning.tsx b/libs/remix-ui/app/src/lib/remix-app/components/modals/origin-warning.tsx index 0c6fb70f4f..61d25db2f6 100644 --- a/libs/remix-ui/app/src/lib/remix-app/components/modals/origin-warning.tsx +++ b/libs/remix-ui/app/src/lib/remix-app/components/modals/origin-warning.tsx @@ -20,14 +20,12 @@ const OriginWarning = () => { setContent(`The Remix IDE has moved to http://remix.ethereum.org.\n This instance of Remix you are visiting WILL NOT BE UPDATED.\n Please make a backup of your contracts and start using http://remix.ethereum.org`) - } else { - setContent('testing') } }, []) useEffect(() => { if (content) { - alert({ title: null, message: content }) + alert({ id: 'warningOriging', title: null, message: content }) } }, [content]) diff --git a/libs/remix-ui/app/src/lib/remix-app/context/provider.tsx b/libs/remix-ui/app/src/lib/remix-app/context/provider.tsx index 5cc8fb3322..cc25c381fd 100644 --- a/libs/remix-ui/app/src/lib/remix-app/context/provider.tsx +++ b/libs/remix-ui/app/src/lib/remix-app/context/provider.tsx @@ -10,15 +10,15 @@ export const ModalProvider = ({ children = [], reducer = modalReducer, initialSt const [{ modals, toasters, focusModal, focusToaster }, dispatch] = useReducer(reducer, initialState) const modal = (data: AppModal) => { - const { title, message, okLabel, okFn, cancelLabel, cancelFn, modalType, defaultValue } = data + const { id, title, message, okLabel, okFn, cancelLabel, cancelFn, modalType, defaultValue } = data dispatch({ type: modalActionTypes.setModal, - payload: { title, message, okLabel, okFn, cancelLabel, cancelFn, modalType: modalType || ModalTypes.default, defaultValue: defaultValue } + payload: { id, title, message, okLabel, okFn, cancelLabel, cancelFn, modalType: modalType || ModalTypes.default, defaultValue: defaultValue } }) } const alert = (data: AlertModal) => { - modal({ title: data.title || 'Alert', message: data.message || data.title, okLabel: 'OK', okFn: (value?:any) => {}, cancelLabel: '', cancelFn: () => {} }) + modal({ id: data.id, title: data.title || 'Alert', message: data.message || data.title, okLabel: 'OK', okFn: (value?:any) => {}, cancelLabel: '', cancelFn: () => {} }) } const handleHideModal = () => { diff --git a/libs/remix-ui/app/src/lib/remix-app/interface/index.ts b/libs/remix-ui/app/src/lib/remix-app/interface/index.ts index dcf1291d2d..feb7c5761f 100644 --- a/libs/remix-ui/app/src/lib/remix-app/interface/index.ts +++ b/libs/remix-ui/app/src/lib/remix-app/interface/index.ts @@ -1,6 +1,7 @@ import { ModalTypes } from '../types' export interface AppModal { + id: string hide?: boolean title: string // eslint-disable-next-line no-undef @@ -14,6 +15,7 @@ export interface AppModal { } export interface AlertModal { + id: string title?: string, message: string | JSX.Element, } diff --git a/libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts b/libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts index 0cb84d4d32..951b547f16 100644 --- a/libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts +++ b/libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts @@ -9,6 +9,7 @@ export const modalReducer = (state: ModalState = ModalInitialState, action: Moda modalList.push(action.payload) if (state.modals.length === 1 && state.focusModal.hide === true) { // if it's the first one show it const focusModal: AppModal = { + id: modalList[0].id, hide: false, title: modalList[0].title, message: modalList[0].message, diff --git a/libs/remix-ui/app/src/lib/remix-app/state/modals.ts b/libs/remix-ui/app/src/lib/remix-app/state/modals.ts index f824b42136..8332d60120 100644 --- a/libs/remix-ui/app/src/lib/remix-app/state/modals.ts +++ b/libs/remix-ui/app/src/lib/remix-app/state/modals.ts @@ -4,6 +4,7 @@ export const ModalInitialState: ModalState = { modals: [], toasters: [], focusModal: { + id: '', hide: true, title: '', message: '',