From cd9e717afb5744640d8cba41f111a35a57413e86 Mon Sep 17 00:00:00 2001
From: Maarten Zuidhoorn <maarten@zuidhoorn.com>
Date: Wed, 1 May 2024 15:27:56 +0200
Subject: [PATCH] Add JSX example to test-snaps

---
 packages/test-snaps/package.json              |  1 +
 .../test-snaps/src/features/snaps/index.ts    |  1 +
 .../test-snaps/src/features/snaps/jsx/Jsx.tsx | 45 +++++++++++++++++++
 .../src/features/snaps/jsx/constants.ts       |  5 +++
 .../src/features/snaps/jsx/index.ts           |  1 +
 yarn.lock                                     |  3 +-
 6 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 packages/test-snaps/src/features/snaps/jsx/Jsx.tsx
 create mode 100644 packages/test-snaps/src/features/snaps/jsx/constants.ts
 create mode 100644 packages/test-snaps/src/features/snaps/jsx/index.ts

diff --git a/packages/test-snaps/package.json b/packages/test-snaps/package.json
index 15e2c2b195..47ad25e468 100644
--- a/packages/test-snaps/package.json
+++ b/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:^",
diff --git a/packages/test-snaps/src/features/snaps/index.ts b/packages/test-snaps/src/features/snaps/index.ts
index 0f3b8a1915..ccd5b0a871 100644
--- a/packages/test-snaps/src/features/snaps/index.ts
+++ b/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';
diff --git a/packages/test-snaps/src/features/snaps/jsx/Jsx.tsx b/packages/test-snaps/src/features/snaps/jsx/Jsx.tsx
new file mode 100644
index 0000000000..9dc4a7aba1
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/test-snaps/src/features/snaps/jsx/constants.ts b/packages/test-snaps/src/features/snaps/jsx/constants.ts
new file mode 100644
index 0000000000..5ed0d3bb46
--- /dev/null
+++ b/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;
diff --git a/packages/test-snaps/src/features/snaps/jsx/index.ts b/packages/test-snaps/src/features/snaps/jsx/index.ts
new file mode 100644
index 0000000000..b94817c72e
--- /dev/null
+++ b/packages/test-snaps/src/features/snaps/jsx/index.ts
@@ -0,0 +1 @@
+export * from './Jsx';
diff --git a/yarn.lock b/yarn.lock
index e974f70181..158861c7cb 100644
--- a/yarn.lock
+++ b/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:^"