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