forms

apps/remix-ide/src/remixEngine.js

@@ -15,7 +15,7 @@ export class RemixEngine extends Engine {
     if (name === 'hardhat') return { queueTimeout: 60000 * 4 }
     if (name === 'truffle') return { queueTimeout: 60000 * 4 }
     if (name === 'localPlugin') return { queueTimeout: 60000 * 4 }
-    if (name === 'notification') return { queueTimeout: 60000 * 4 }
+    if (name === 'notification') return { queueTimeout: 60000 * 10 }
     if (name === 'sourcify') return { queueTimeout: 60000 * 4 }
     if (name === 'fetchAndCompile') return { queueTimeout: 60000 * 4 }
     if (name === 'walletconnect') return { queueTimeout: 60000 * 4 }

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

@@ -3,19 +3,33 @@ import { ModalDialog, ModalDialogProps, ValidationResult } from '@remix-ui/modal
 import { ModalTypes } from '../../types'
 
 interface ModalWrapperProps extends ModalDialogProps {
-    modalType?: ModalTypes
-    defaultValue?: string
+  modalType?: ModalTypes
+  defaultValue?: string
 }
 
 const ModalWrapper = (props: ModalWrapperProps) => {
   const [state, setState] = useState<ModalDialogProps>()
   const ref = useRef()
+  const formRef = useRef()
   const data = useRef()
 
+  const getFormData = () => {
+    if (formRef.current) {
+      const formData = new FormData(formRef.current)
+      const data = {}
+      for (const pair of formData.entries()) {
+        data[pair[0]] = pair[1]
+      }
+      return data
+    }
+  }
+
   const onFinishPrompt = async () => {
-    if (ref.current === undefined) {
+    if (ref.current === undefined && formRef.current === undefined) {
       onOkFn()
-    } else {
+    } else if (formRef.current) {
+      (props.okFn) ? props.okFn(getFormData()) : props.resolve(getFormData())
+    } else if(ref.current) {
       // @ts-ignore: Object is possibly 'null'.
       (props.okFn) ? props.okFn(ref.current.value) : props.resolve(ref.current.value)
     }
@@ -43,9 +57,29 @@ const ModalWrapper = (props: ModalWrapperProps) => {
       <>
         {props.message}
         <input onChange={onInputChanged} type={props.modalType === ModalTypes.password ? 'password' : 'text'} defaultValue={defaultValue} data-id="modalDialogCustomPromp" ref={ref} className="form-control" />
-        {!validation.valid && <span className='text-warning'>{validation.message}</span>}
-        </>
-      )
+        {validation && !validation.valid && <span className='text-warning'>{validation.message}</span>}
+      </>
+    )
+  }
+
+  const onFormChanged = () => {
+    if (props.validationFn) {
+      const validation = props.validationFn(getFormData())
+      setState(prevState => {
+        return { ...prevState, message: createForm(validation), validation }
+      })
+    }
+  }
+
+  const createForm = (validation: ValidationResult) => {
+    return (
+      <>
+         <form onChange={onFormChanged} ref={formRef}>
+          {props.message}
+          </form>
+          {validation && !validation.valid && <span className='text-warning'>{validation.message}</span>}
+      </>
+    )
   }
 
   useEffect(() => {
@@ -61,6 +95,14 @@ const ModalWrapper = (props: ModalWrapperProps) => {
             message: createModalMessage(props.defaultValue, { valid: true })
           })
           break
+        case ModalTypes.form:
+          setState({
+            ...props,
+            okFn: onFinishPrompt,
+            cancelFn: onCancelFn,
+            message: createForm({ valid: true })
+          })
+          break
         default:
           setState({
             ...props,

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

@@ -4,4 +4,5 @@ export const enum ModalTypes {
     prompt = 'prompt',
     password = 'password',
     default = 'default',
+    form = 'form',
 }

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

@@ -9,7 +9,7 @@ export interface ModalDialogProps {
   timestamp?: number,
   title?: string | JSX.Element,
   validation?: ValidationResult
-  validationFn?: (value: string) => ValidationResult
+  validationFn?: (value: any) => ValidationResult
   message?: string | JSX.Element,
   okLabel?: string | JSX.Element,
   okFn?: (value?:any) => void,

tsconfig.base.json

@@ -19,7 +19,7 @@
     "target": "ES2015",
     "module": "ES2020",
     "typeRoots": ["node_modules/@types", "libs/**/*.d.ts"],
-    "lib": ["es2017", "es2019", "dom"],
+    "lib": ["es2017", "es2019", "dom", "dom.iterable"],
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "baseUrl": "."

tsconfig.json

@@ -15,7 +15,8 @@
     "module": "CommonJS",
     "lib": [
       "es2017",
-      "dom"
+      "dom",
+      "dom.iterable"
     ],
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,