[Tech Task] Implement info subsection for advanced view in contract interaction

[pedronfigueiredo]

Important

Question for @bschorchit: When the user toggles the advanced nonce controls setting we:
a) Make the nonce visible or
b) Make the nonce editable (and it's always visible)

Important

@SayaGT to supply tooltip wireframes and copy

Important

@SayaGT to supply wireframes for nonce edit behavior and validation. What happens if the user inputs -1?

Progresses #23905

Context

Toggle:

SubSection:

(source: Figma design file)

Approach

The section appears after clicking the icon in the header

Create a dedicated component inside the confirm/info folder. The component will be imported inside the contract-interaction info component.

This component will include the ability to edit the nonce. We can reuse this action:

https://github.com/MetaMask/metamask-extension/blob/develop/ui/store/actions.ts#L762-L767

Acceptance Criteria

• Implement a new component that includes the described functionality.
• Use that component in the info section for contract interaction.
• Add the icon to the header.
• Create a hook at the info component level to expand and collapse the section. Pass down the setter to the header component and the value to the info component and into this subsection of the contract interaction component.

[bschorchit]

Important

Question for @bschorchit: When the user toggles the advanced nonce controls setting we:
a) Make the nonce visible or
b) Make the nonce editable (and it's always visible)

a). When the user toggles the advanced nonce controls setting we make the nonce visible and editable. If the toggle is off, the nonce should not visible.