Add a Submit and close icon to the Customize component.

[bgravenorst]

Description

Add "Submit and close" functionality to Customize Request component

Problem

The Customize Request component had "Reset fields" and "Clear fields" actions, but lacked a quick way to indicate to the user to submit changes and close the component in one action. Clicking close (X) does this, but it's not obvious.
The term "Submit" is superficial, because the request is updated without needing to click anything. But this does improve the UI.

Solution

Added a new "Submit and close" button to the Customize Request component that:

1. Submits the current form data
2. Closes the component (either the complex type view or the entire modal)
3. Matches the existing UI design with a checkmark icon

Changes

• Added new submit-icon.svg with a checkmark design
• Added "Submit and close" button to the footer buttons section
• Implemented handleSubmitAndClose function that:
  • Submits the current form data
  • Closes the appropriate view based on context
• Added proper spacing between footer buttons (1rem gap)
• Added hover states and dark theme support for the new button

Testing

1. Open the Customize Request component for any method
2. Make some changes to the parameters
3. Click the "Submit and close" button (checkmark icon)
4. Verify that:
   • The changes are submitted
   • The component closes properly
   • The changes are reflected in the request preview
5. Test in both light and dark themes
6. Test with complex type views to ensure proper closing behavior

Checklist

Complete this checklist before merging your PR:

• If this PR contains a major change to the documentation content, I have added an entry to the top of the "What's new?" page.
• The proposed changes have been reviewed and approved by a member of the documentation team.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
metamask-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 17, 2025 11:09pm

[Copilot]

Pull Request Overview

Adds a “Submit and close” button (checkmark icon) to the Customize Request component, enabling users to submit form data and close the modal in one action.

• Introduced onModalClose prop in the parent component to propagate closing logic.
• Imported and wired up a new SubmitIcon and handleSubmitAndClose handler in InteractiveBox.
• Updated footer button styles for spacing, consistent sizing, hover states, and dark-theme support.

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
src/components/ParserOpenRPC/index.tsx	Passes onModalClose into InteractiveBox to enable modal closing.
src/components/ParserOpenRPC/InteractiveBox/styles.module.scss	Adjusts .footerButtonsLeft and .footerButtonLeft: adds flex gap, sizes, hover, and theme styles.
src/components/ParserOpenRPC/InteractiveBox/index.tsx	Imports SubmitIcon, extends props with onModalClose, adds handleSubmitAndClose, and inserts the new button.

Comments suppressed due to low confidence (1)

src/components/ParserOpenRPC/InteractiveBox/index.tsx:348

• There’s no existing test to cover the new "Submit and close" button. Consider adding a unit or integration test that simulates a click and verifies both onParamChange and the correct close callback are invoked.

<Tooltip message="Submit and close">

[alexandratran]

LGTM