Support JSX and Interactive UI in simulator

[GuillaumeRx]

Description

This PR allows the simulator to consume the new JSX components from Snaps custom UI.

It also enable interactive interfaces to work in the simulator.

Breakdown:

• Renderer:

  • Swap the old component format to the JSX format
  • Create a Context provider to provide interaction handlers to the components

• OnRpcRequest and OnTransaction:

  • Add the missing hooks and handlers to the simulation backend and Redux Store
  • Create a dupe of the interface in the redux store to enable reactive re-rendering of the interface.
  • Interfaces now all go through the SnapInterfaceController

• UI Builder:

  • Refactor the code generation methods
  • Refactor the component extraction methods
  • Adds the Field component

[socket-security]

New dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@types/[email protected]	None	0	7.29 kB	types
npm/@types/[email protected]	None	0	3.2 kB	types
npm/@types/[email protected]	None	0	3.19 kB	types
npm/@types/[email protected]	None	0	3.2 kB	types
npm/[email protected]	None	0	16.5 kB	jdalton

View full report↗︎

[socket-security]

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report↗︎

[Mrtenz]

Fields can also take dropdowns and soon file inputs. Can we make this more generic somehow?

[Mrtenz]

We may be able to share some code between this and snaps-jest here.

[GuillaumeRx]

Can you point me to what part you were thinking we could reuse ? I've searched in snaps-jest but nothing seems relevant.

[Mrtenz]

I mean this part:

snaps/packages/snaps-jest/src/matchers.ts

Lines 187 to 248 in 3866525

	/**
	* Serialise a JSX prop to a string.
	*
	* @param prop - The JSX prop.
	* @returns The serialised JSX prop.
	*/
	function serialiseProp(prop: unknown): string {
	if (typeof prop === 'string') {
	return `"${prop}"`;
	}
	return `{${JSON.stringify(prop)}}`;
	}
	/**
	* Serialise JSX props to a string.
	*
	* @param props - The JSX props.
	* @returns The serialised JSX props.
	*/
	function serialiseProps(props: Record<string, unknown>): string {
	return Object.entries(props)
	.filter(([key]) => key !== 'children')
	.sort(([a], [b]) => a.localeCompare(b))
	.map(([key, value]) => ` ${key}=${serialiseProp(value)}`)
	.join('');
	}
	/**
	* Serialise a JSX node to a string.
	*
	* @param node - The JSX node.
	* @param indentation - The indentation level. Defaults to `0`. This should not
	* be set by the caller, as it is used for recursion.
	* @returns The serialised JSX node.
	*/
	export function serialiseJsx(node: SnapNode, indentation = 0): string {
	if (Array.isArray(node)) {
	return node.map((child) => serialiseJsx(child, indentation)).join('');
	}
	const indent = ' '.repeat(indentation);
	if (typeof node === 'string') {
	return `${indent}${node}\n`;
	}
	if (!node) {
	return '';
	}
	const { type, props } = node;
	const trailingNewline = indentation > 0 ? '\n' : '';
	if (hasProperty(props, 'children')) {
	const children = serialiseJsx(props.children as SnapNode, indentation + 1);
	return `${indent}<${type}${serialiseProps(
	props,
	)}>\n${children}${indent}</${type}>${trailingNewline}`;
	}
	return `${indent}<${type}${serialiseProps(props)} />${trailingNewline}`;
	}

It turns a rendered JSX node into code.