modal plugin

apps/remix-ide/src/app.js

@@ -20,6 +20,7 @@ import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, Fetch
 import migrateFileSystem from './migrateFileSystem'
 import Registry from './app/state/registry'
 import { ConfigPlugin } from './app/plugins/config'
+import { ModalPlugin } from './app/plugins/modal'
 
 const isElectron = require('is-electron')
 
@@ -158,9 +159,12 @@ class AppComponent {
     )
     const contextualListener = new EditorContextListener()
 
+    self.modal = new ModalPlugin()
+
     const configPlugin = new ConfigPlugin()
 
     self.engine.register([
+      self.modal,
       configPlugin,
       blockchain,
       contentImport,
@@ -266,6 +270,7 @@ class AppComponent {
       console.log('couldn\'t register iframe plugins', e.message)
     }
 
+    await self.appManager.activatePlugin(['modal'])
     await self.appManager.activatePlugin(['editor'])
     await self.appManager.activatePlugin(['theme', 'fileManager', 'compilerMetadata', 'compilerArtefacts', 'network', 'web3Provider', 'offsetToLineColumnConverter'])
     await self.appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs'])

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

@@ -0,0 +1,44 @@
+import { Plugin } from '@remixproject/engine'
+import { LibraryProfile, MethodApi, StatusEvents } from '@remixproject/plugin-utils'
+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 {
+  events: StatusEvents,
+  methods: {
+    modal: (args: AppModal) => void
+    alert: (args: AlertModal) => void
+    toast: (message: string) => void
+  }
+}
+
+const profile:LibraryProfile<IModalApi> = {
+  name: 'modal',
+  displayName: 'Modal',
+  description: 'Modal',
+  methods: ['modal', 'alert', 'toast']
+}
+
+export class ModalPlugin extends Plugin implements MethodApi<IModalApi> {
+  dispatcher: dispatchModalInterface
+  constructor () {
+    super(profile)
+  }
+
+  setDispatcher (dispatcher: dispatchModalInterface) {
+    this.dispatcher = dispatcher
+  }
+
+  async modal (args: AppModal) {
+    this.dispatcher.modal(args)
+  }
+
+  async alert (args: AlertModal) {
+    this.dispatcher.alert(args)
+  }
+
+  async toast (message: string) {
+    this.dispatcher.toast(message)
+  }
+}

libs/remix-ui/app/src/index.ts

@@ -1 +1,4 @@
 export { default as RemixApp } from './lib/remix-app/remix-app'
+export { dispatchModalContext } from './lib/remix-app/context/context'
+export { ModalProvider } from './lib/remix-app/context/provider'
+export { AppModal } from './lib/remix-app/interface/index'

libs/remix-ui/app/src/lib/remix-app/components/modals/dialogViewPlugin.tsx

@@ -0,0 +1,16 @@
+import React, { useContext, useEffect } from 'react'
+import { AppContext } from '../../context/context'
+import { useDialogDispatchers } from '../../context/provider'
+
+const DialogViewPlugin = () => {
+  const { modal, alert, toast } = useDialogDispatchers()
+  const app = useContext(AppContext)
+
+  useEffect(() => {
+    console.log(modal, app)
+    app.modal.setDispatcher({ modal, alert, toast })
+  }, [])
+  return <></>
+}
+
+export default DialogViewPlugin

libs/remix-ui/app/src/lib/remix-app/components/modals/dialogs.tsx

@@ -9,7 +9,7 @@ const AppDialogs = () => {
 
   return (
     <>
-      <ModalWrapper {...focusModal } handleHide={handleHideModal}></ModalWrapper>
+      <ModalWrapper id={'appDialog'} {...focusModal} handleHide={handleHideModal}></ModalWrapper>
       <Toaster message={focusToaster} handleHide={handleToaster} />
     </>)
 }

libs/remix-ui/app/src/lib/remix-app/components/modals/matomo.tsx

@@ -19,7 +19,7 @@ const MatomoDialog = (props) => {
 
   useEffect(() => {
     if (visible && showMatamo) {
-      modal('Help us to improve Remix IDE', message(), 'Accept', handleModalOkClick, 'Decline', declineModal)
+      modal({ title: 'Help us to improve Remix IDE', message: message(), okLabel: 'Accept', okFn: handleModalOkClick, cancelLabel: 'Decline', cancelFn: declineModal })
     }
   }, [visible])
 

libs/remix-ui/app/src/lib/remix-app/components/modals/modal-wrapper.tsx

@@ -50,7 +50,7 @@ const ModalWrapper = (props: ModalWrapperProps) => {
   }, [props])
 
   return (
-    <ModalDialog id='appDialog' {...state} handleHide={props.handleHide} />
+    <ModalDialog id={props.id} {...state} handleHide={props.handleHide} />
   )
 }
 export default ModalWrapper

libs/remix-ui/app/src/lib/remix-app/components/modals/origin-warning.tsx

@@ -20,12 +20,14 @@ 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(content)
+      alert({ title: null, message: content })
     }
   }, [content])
 

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

@@ -1,13 +1,22 @@
 import React from 'react'
+import { AlertModal, AppModal } from '../interface'
 import { ModalInitialState } from '../state/modals'
 import { ModalTypes } from '../types'
 
-export const AppContext = React.createContext(null)
+export const AppContext = React.createContext<any>(null)
 
-export const dispatchModalContext = React.createContext({
-  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: (value?:any) => void, cancelLabel?: string, cancelFn?: () => void, modalType?: ModalTypes, defaultValue?: string) => { },
+export interface dispatchModalInterface {
+  modal: (data: AppModal) => void
+  toast: (message: string) => void
+  alert: (data: AlertModal) => void
+  handleHideModal: () => void,
+  handleToaster: () => void
+}
+
+export const dispatchModalContext = React.createContext<dispatchModalInterface>({
+  modal: (data: AppModal) => { },
   toast: (message: string) => {},
-  alert: (title: string, message?: string | JSX.Element) => {},
+  alert: (data: AlertModal) => {},
   handleHideModal: () => {},
   handleToaster: () => {}
 })

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

@@ -1,5 +1,6 @@
 import React, { useReducer } from 'react'
 import { modalActionTypes } from '../actions/modals'
+import { AlertModal, AppModal } from '../interface'
 import { modalReducer } from '../reducer/modals'
 import { ModalInitialState } from '../state/modals'
 import { ModalTypes } from '../types'
@@ -8,15 +9,16 @@ import { AppContext, dispatchModalContext, modalContext } from './context'
 export const ModalProvider = ({ children = [], reducer = modalReducer, initialState = ModalInitialState } = {}) => {
   const [{ modals, toasters, focusModal, focusToaster }, dispatch] = useReducer(reducer, initialState)
 
-  const modal = (title: string, message: string | JSX.Element, okLabel: string, okFn: (value?:any) => void, cancelLabel?: string, cancelFn?: () => void, modalType?: ModalTypes, defaultValue?: string) => {
+  const modal = (data: AppModal) => {
+    const { 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 }
     })
   }
 
-  const alert = (title: string, message?: string | JSX.Element) => {
-    modal(message ? title : 'Alert', message || title, 'OK', null, null, null)
+  const alert = (data: AlertModal) => {
+    modal({ title: data.title || 'Alert', message: data.message || data.title, okLabel: 'OK', okFn: (value?:any) => {}, cancelLabel: '', cancelFn: () => {} })
   }
 
   const handleHideModal = () => {

libs/remix-ui/app/src/lib/remix-app/interface/index.ts

@@ -13,6 +13,11 @@ export interface AppModal {
     defaultValue?: string
 }
 
+export interface AlertModal {
+    title?: string,
+    message: string | JSX.Element,
+}
+
 export interface ModalState {
     modals: AppModal[],
     toasters: string[],

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

@@ -6,6 +6,7 @@ import OriginWarning from './components/modals/origin-warning'
 import DragBar from './components/dragbar/dragbar'
 import { AppProvider } from './context/provider'
 import AppDialogs from './components/modals/dialogs'
+import DialogViewPlugin from './components/modals/dialogViewPlugin'
 
 interface IRemixAppUi {
   app: any
@@ -73,7 +74,8 @@ const RemixApp = (props: IRemixAppUi) => {
   const value = {
     settings: props.app.settings,
     showMatamo: props.app.showMatamo,
-    appManager: props.app.appManager
+    appManager: props.app.appManager,
+    modal: props.app.modal
   }
 
   return (
@@ -91,6 +93,7 @@ const RemixApp = (props: IRemixAppUi) => {
       </div>
       {components.hiddenPanel}
       <AppDialogs></AppDialogs>
+      <DialogViewPlugin></DialogViewPlugin>
     </AppProvider>
   )
 }