add tester

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()

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')
+  }
+}

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

@@ -9,7 +9,7 @@ const AppDialogs = () => {
 
   return (
     <>
-      <ModalWrapper id={'appDialog'} {...focusModal} handleHide={handleHideModal}></ModalWrapper>
+      <ModalWrapper {...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({ 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])
 

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<ModalDialogProps>()
+  const [modalInput, setModalInput] = useState<string>('')
   const ref = useRef()
 
   const onFinishPrompt = async () => {
@@ -21,11 +22,11 @@ const ModalWrapper = (props: ModalWrapperProps) => {
     }
   }
 
-  const createModalMessage = () => {
+  const createModalMessage = (defaultValue: string) => {
     return (
       <>
         {props.message}
-        <input type={props.modalType === ModalTypes.password ? 'password' : 'text'} value={props.defaultValue} data-id="modalDialogCustomPromp" ref={ref} className="form-control" /></>
+        <input type={props.modalType === ModalTypes.password ? 'password' : 'text'} defaultValue={defaultValue} data-id="modalDialogCustomPromp" ref={ref} className="form-control" /></>
     )
   }
 
@@ -37,7 +38,7 @@ const ModalWrapper = (props: ModalWrapperProps) => {
           setState({
             ...props,
             okFn: onFinishPrompt,
-            message: createModalMessage()
+            message: createModalMessage(props.defaultValue)
           })
           break
         default:

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])
 

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 = () => {

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,
 }

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,

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: '',