Add JSX example to test-snaps (#2378)

This adds a section for the JSX example Snap to `test-snaps`. It just
has one button, which triggers the UI with JSX.

Author: Mrtenz

packages/test-snaps/package.json

@@ -43,6 +43,7 @@
     "@metamask/insights-example-snap": "workspace:^",
     "@metamask/interactive-ui-example-snap": "workspace:^",
     "@metamask/json-rpc-example-snap": "workspace:^",
+    "@metamask/jsx-example-snap": "workspace:^",
     "@metamask/lifecycle-hooks-example-snap": "workspace:^",
     "@metamask/localization-example-snap": "workspace:^",
     "@metamask/manage-state-example-snap": "workspace:^",

packages/test-snaps/src/features/snaps/index.ts

@@ -13,6 +13,7 @@ export * from './localization';
 export * from './home-page';
 export * from './images';
 export * from './json-rpc';
+export * from './jsx';
 export * from './lifecycle-hooks';
 export * from './manage-state';
 export * from './multi-install';

packages/test-snaps/src/features/snaps/jsx/Jsx.tsx

@@ -0,0 +1,45 @@
+import { logError } from '@metamask/snaps-utils';
+import type { FunctionComponent } from 'react';
+import { Button } from 'react-bootstrap';
+
+import { useInvokeMutation } from '../../../api';
+import { Result, Snap } from '../../../components';
+import { getSnapId } from '../../../utils';
+import { JSX_SNAP_ID, JSX_SNAP_PORT, JSX_VERSION } from './constants';
+
+export const Jsx: FunctionComponent = () => {
+  const [invokeSnap, { isLoading, data, error }] = useInvokeMutation();
+
+  const handleSubmit = () => {
+    invokeSnap({
+      snapId: getSnapId(JSX_SNAP_ID, JSX_SNAP_PORT),
+      method: 'display',
+    }).catch(logError);
+  };
+
+  return (
+    <Snap
+      name="JSX Snap"
+      snapId={JSX_SNAP_ID}
+      port={JSX_SNAP_PORT}
+      version={JSX_VERSION}
+      testId="jsx"
+    >
+      <Button
+        variant="primary"
+        id="displayJsx"
+        className="mb-3"
+        disabled={isLoading}
+        onClick={handleSubmit}
+      >
+        Show JSX dialog
+      </Button>
+      <Result>
+        <span id="rpcResult">
+          {JSON.stringify(data, null, 2)}
+          {JSON.stringify(error, null, 2)}
+        </span>
+      </Result>
+    </Snap>
+  );
+};

packages/test-snaps/src/features/snaps/jsx/constants.ts

@@ -0,0 +1,5 @@
+import packageJson from '@metamask/jsx-example-snap/package.json';
+
+export const JSX_SNAP_ID = 'npm:@metamask/jsx-example-snap';
+export const JSX_SNAP_PORT = 8029;
+export const JSX_VERSION = packageJson.version;

packages/test-snaps/src/features/snaps/jsx/index.ts

@@ -0,0 +1 @@
+export * from './Jsx';

yarn.lock

@@ -4910,7 +4910,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/jsx-example-snap@workspace:packages/examples/packages/jsx":
+"@metamask/jsx-example-snap@workspace:^, @metamask/jsx-example-snap@workspace:packages/examples/packages/jsx":
   version: 0.0.0-use.local
   resolution: "@metamask/jsx-example-snap@workspace:packages/examples/packages/jsx"
   dependencies:
@@ -6144,6 +6144,7 @@ __metadata:
     "@metamask/insights-example-snap": "workspace:^"
     "@metamask/interactive-ui-example-snap": "workspace:^"
     "@metamask/json-rpc-example-snap": "workspace:^"
+    "@metamask/jsx-example-snap": "workspace:^"
     "@metamask/lifecycle-hooks-example-snap": "workspace:^"
     "@metamask/localization-example-snap": "workspace:^"
     "@metamask/manage-state-example-snap": "workspace:^"