diff --git a/apps/remix-ide/src/remixEngine.js b/apps/remix-ide/src/remixEngine.js index 9d34b58bf5..64fd918227 100644 --- a/apps/remix-ide/src/remixEngine.js +++ b/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 } 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 17c6f604d6..450d59f1de 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 @@ -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() 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} - {!validation.valid && {validation.message}} - - ) + {validation && !validation.valid && {validation.message}} + + ) + } + + const onFormChanged = () => { + if (props.validationFn) { + const validation = props.validationFn(getFormData()) + setState(prevState => { + return { ...prevState, message: createForm(validation), validation } + }) + } + } + + const createForm = (validation: ValidationResult) => { + return ( + <> +
+ {props.message} +
+ {validation && !validation.valid && {validation.message}} + + ) } 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, diff --git a/libs/remix-ui/app/src/lib/remix-app/types/index.ts b/libs/remix-ui/app/src/lib/remix-app/types/index.ts index edca9e147c..6822dbe73e 100644 --- a/libs/remix-ui/app/src/lib/remix-app/types/index.ts +++ b/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', } diff --git a/libs/remix-ui/modal-dialog/src/lib/types/index.ts b/libs/remix-ui/modal-dialog/src/lib/types/index.ts index 44300ef135..ac189a30ef 100644 --- a/libs/remix-ui/modal-dialog/src/lib/types/index.ts +++ b/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, diff --git a/tsconfig.base.json b/tsconfig.base.json index a65a8a891c..4948920428 100644 --- a/tsconfig.base.json +++ b/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": "." diff --git a/tsconfig.json b/tsconfig.json index 995e7c6e38..904022e081 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,7 +15,8 @@ "module": "CommonJS", "lib": [ "es2017", - "dom" + "dom", + "dom.iterable" ], "skipLibCheck": true, "skipDefaultLibCheck": true,