diff --git a/src/components/ParserOpenRPC/InteractiveBox/index.tsx b/src/components/ParserOpenRPC/InteractiveBox/index.tsx index f81303fa5b8..84e07e4de78 100644 --- a/src/components/ParserOpenRPC/InteractiveBox/index.tsx +++ b/src/components/ParserOpenRPC/InteractiveBox/index.tsx @@ -28,6 +28,7 @@ import { RemoveButton } from '@site/src/components/ParserOpenRPC/InteractiveBox/ import { AddButton } from '@site/src/components/ParserOpenRPC/InteractiveBox/buttonTemplates/AddButton' import ClearIcon from '@site/static/img/icons/clear-icon.svg' import ResetIcon from '@site/static/img/icons/reset-icon.svg' +import SubmitIcon from '@site/static/img/icons/submit-icon.svg' interface InteractiveBoxProps { params: MethodParam[] @@ -37,6 +38,7 @@ interface InteractiveBoxProps { drawerLabel?: string | null closeComplexTypeView?: () => void isOpen?: boolean + onModalClose?: () => void } type ObjectType = { [key: string]: any } @@ -90,6 +92,7 @@ export default function InteractiveBox({ drawerLabel, closeComplexTypeView, isOpen = false, + onModalClose, }: InteractiveBoxProps) { const [parsedSchema, setParsedSchema] = useState(null) const [defaultFormData, setDefaultFormData] = useState({}) @@ -203,6 +206,15 @@ export default function InteractiveBox({ formRef?.current?.reset() } } + const handleSubmitAndClose = (e: React.MouseEvent) => { + e.preventDefault() + onParamChange(currentFormData) + if (isComplexTypeView) { + closeComplexTypeView() + } else { + onModalClose?.() + } + } const isLightTheme = colorMode === 'light' useEffect(() => { @@ -333,6 +345,11 @@ export default function InteractiveBox({ + + + {isComplexTypeView ? (
diff --git a/src/components/ParserOpenRPC/InteractiveBox/styles.module.scss b/src/components/ParserOpenRPC/InteractiveBox/styles.module.scss index 7d028b2dc6f..7020c4a874b 100644 --- a/src/components/ParserOpenRPC/InteractiveBox/styles.module.scss +++ b/src/components/ParserOpenRPC/InteractiveBox/styles.module.scss @@ -308,21 +308,31 @@ display: flex; } .footerButtonsLeft { - width: 4.8rem; + display: flex; + gap: 1rem; align-items: center; - justify-content: space-between; - padding: 0.6rem 0; } .footerButtonLeft { display: flex; - width: 1.6rem; - height: 2.2rem; - padding: 0; align-items: center; - background: none; - border: none; - border-radius: 0; - cursor: pointer; + justify-content: center; + width: 3.2rem; + height: 3.2rem; + border-radius: 0.4rem; + background: var(--general-gray-light); + transition: background-color var(--ifm-transition-fast) ease; + + &:hover { + background: var(--general-gray); + } + + [data-theme='dark'] & { + background: var(--general-gray-dark); + + &:hover { + background: var(--general-gray); + } + } } .footerButtonRight { padding: 0.5rem 1.6rem !important; diff --git a/src/components/ParserOpenRPC/index.tsx b/src/components/ParserOpenRPC/index.tsx index 222ddaa9889..c9b253814a1 100644 --- a/src/components/ParserOpenRPC/index.tsx +++ b/src/components/ParserOpenRPC/index.tsx @@ -318,6 +318,7 @@ export default function ParserOpenRPC({ network, method, extraContent }: ParserP drawerLabel={drawerLabel} closeComplexTypeView={closeComplexTypeView} isOpen={isModalOpen} + onModalClose={onModalClose} />
diff --git a/static/img/icons/submit-icon.svg b/static/img/icons/submit-icon.svg new file mode 100644 index 00000000000..027eb7f6ccc --- /dev/null +++ b/static/img/icons/submit-icon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file