Merge pull request #1901 from ethereum/awaitasyncmodals

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

@@ -31,11 +31,11 @@ export class ModalPlugin extends Plugin implements MethodApi<IModalApi> {
   }
 
   async modal (args: AppModal) {
-    this.dispatcher.modal(args)
+    return this.dispatcher.modal(args)
   }
 
   async alert (args: AlertModal) {
-    this.dispatcher.alert(args)
+    return this.dispatcher.alert(args)
   }
 
   async toast (message: string) {

apps/remix-ide/src/app/plugins/remixd-handle.tsx

@@ -30,7 +30,6 @@ enum State {
 export class RemixdHandle extends WebsocketPlugin {
   localhostProvider: any
   appManager: PluginManager
-  state: State
   constructor (localhostProvider, appManager) {
     super(profile)
     this.localhostProvider = localhostProvider
@@ -48,7 +47,8 @@ export class RemixdHandle extends WebsocketPlugin {
   }
 
   async activate () {
-    await this.connectToLocalhost()
+    this.connectToLocalhost()
+    return true
   }
 
   async canceled () {
@@ -95,13 +95,15 @@ export class RemixdHandle extends WebsocketPlugin {
       this.deactivate()
     } else if (!isElectron()) {
       // warn the user only if he/she is in the browser context
-      this.state = State.new
       const mod:AppModal = {
         id: 'remixdConnect',
         title: 'Connect to localhost',
         message: remixdDialog(),
-        okFn: () => {
-          this.state = State.ok
+        okLabel: 'Connect',
+        cancelLabel: 'Cancel',
+      }
+      const result =  await this.call('modal', 'modal', mod)
+      if(result) {
           try {
             this.localhostProvider.preInit()
             super.activate()
@@ -115,18 +117,10 @@ export class RemixdHandle extends WebsocketPlugin {
           } catch (error) {
             connection(error)
           }
-        },
-        cancelFn: async () => {
-          this.state = State.cancel
-          await this.canceled()
-        },
-        okLabel: 'Connect',
-        cancelLabel: 'Cancel',
-        hideFn: async () => {
-          if (this.state === State.new) await this.canceled()
-        }
       }
-      await this.call('modal', 'modal', mod)
+      else {
+        await this.canceled()
+      }
     } else {
       try {
         super.activate()

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

@@ -14,13 +14,21 @@ const ModalWrapper = (props: ModalWrapperProps) => {
 
   const onFinishPrompt = async () => {
     if (ref.current === undefined) {
-      props.okFn()
+      onOkFn()
     } else {
       // @ts-ignore: Object is possibly 'null'.
-      props.okFn(ref.current.value)
+      (props.okFn) ? props.okFn(ref.current.value) : props.resolve(ref.current.value)
     }
   }
 
+  const onOkFn = async () => {
+    (props.okFn) ? props.okFn() : props.resolve(true)
+  }
+
+  const onCancelFn = async () => {
+    (props.cancelFn) ? props.cancelFn() : props.resolve(false)
+  }
+
   const createModalMessage = (defaultValue: string) => {
     return (
       <>
@@ -37,15 +45,24 @@ const ModalWrapper = (props: ModalWrapperProps) => {
           setState({
             ...props,
             okFn: onFinishPrompt,
+            cancelFn: onCancelFn,
             message: createModalMessage(props.defaultValue)
           })
           break
         default:
-          setState({ ...props })
+          setState({
+            ...props,
+            okFn: (onOkFn),
+            cancelFn: onCancelFn
+          })
           break
       }
     } else {
-      setState({ ...props })
+      setState({
+        ...props,
+        okFn: onOkFn,
+        cancelFn: onCancelFn
+      })
     }
   }, [props])
 

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

@@ -11,14 +11,16 @@ export const ModalProvider = ({ children = [], reducer = modalReducer, initialSt
 
   const modal = (data: AppModal) => {
     const { id, title, message, okLabel, okFn, cancelLabel, cancelFn, modalType, defaultValue, hideFn } = data
-    dispatch({
-      type: modalActionTypes.setModal,
-      payload: { id, title, message, okLabel, okFn, cancelLabel, cancelFn, modalType: modalType || ModalTypes.default, defaultValue: defaultValue, hideFn }
+    return new Promise((resolve, reject) => {
+      dispatch({
+        type: modalActionTypes.setModal,
+        payload: { id, title, message, okLabel, okFn, cancelLabel, cancelFn, modalType: modalType || ModalTypes.default, defaultValue: defaultValue, hideFn, resolve }
+      })
     })
   }
 
   const alert = (data: AlertModal) => {
-    modal({ id: data.id, title: data.title || 'Alert', message: data.message || data.title, okLabel: 'OK', okFn: (value?:any) => {}, cancelLabel: '', cancelFn: () => {} })
+    return 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

@@ -7,12 +7,13 @@ export interface AppModal {
     // eslint-disable-next-line no-undef
     message: string | JSX.Element
     okLabel: string
-    okFn: (value?:any) => void
+    okFn?: (value?:any) => void
     cancelLabel: string
-    cancelFn: () => void,
+    cancelFn?: () => void,
     modalType?: ModalTypes,
     defaultValue?: string
-    hideFn?: () => void
+    hideFn?: () => void,
+    resolve?: (value?:any) => void
 }
 
 export interface AlertModal {

libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts

@@ -19,7 +19,8 @@ export const modalReducer = (state: ModalState = ModalInitialState, action: Moda
           cancelFn: modalList[0].cancelFn,
           modalType: modalList[0].modalType,
           defaultValue: modalList[0].defaultValue,
-          hideFn: modalList[0].hideFn
+          hideFn: modalList[0].hideFn,
+          resolve: modalList[0].resolve
         }
 
         modalList = modalList.slice()
@@ -31,6 +32,8 @@ export const modalReducer = (state: ModalState = ModalInitialState, action: Moda
     case modalActionTypes.handleHideModal:
       if (state.focusModal.hideFn) {
         state.focusModal.hideFn()
+      } else if (state.focusModal.resolve) {
+        state.focusModal.resolve(undefined)
       }
       state.focusModal = { ...state.focusModal, hide: true, message: null }
       return { ...state }

libs/remix-ui/modal-dialog/src/lib/types/index.ts

@@ -11,5 +11,6 @@ export interface ModalDialogProps {
   showCancelIcon?: boolean,
   hide?: boolean,
   handleHide: (hideState?: boolean) => void,
-  children?: React.ReactNode
+  children?: React.ReactNode,
+  resolve?: (value?:any) => void,
 }