chore: Revamp interactive UI example using JSX (#2427)

Revamps the interactive UI example, rewriting most of the UI logic in
JSX and removing the `getState` functionality.

This will let us more easily test different types of inputs once added
as well, e.g. `Dropdown`.

This also uses the new `context` property and lets us remove the usage
of `manageState` entirely from the Snap.

packages/examples/packages/interactive-ui/README.md

@@ -11,8 +11,6 @@ JSON-RPC methods:
 
 - `dialog`: Create a `snap_dialog` with an interactive interface. This demonstrates that a snap can show an interactive `snap_dialog` that the user can interact with.
 
-- `getState`: Get the state of a given interface. This demonstrates that a snap can retrieve an interface state.
-
 ### onTransaction
 
 This snap exposes an `onTransaction` handler, which is called when a transaction  

packages/examples/packages/interactive-ui/snap.config.ts

@@ -2,7 +2,7 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
-  input: resolve(__dirname, 'src/index.ts'),
+  input: resolve(__dirname, 'src/index.tsx'),
   server: {
     port: 8028,
   },

packages/examples/packages/interactive-ui/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "qncrmZIAEJwYtq/76wIPvUCiTJ4uY1v+kpmJroamns8=",
+    "shasum": "2WrIpZaJtZdS9P0tcQn5pB5IvK61XLCArZVJtTRBfJo=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
@@ -23,8 +23,7 @@
     },
     "snap_dialog": {},
     "endowment:transaction-insight": {},
-    "endowment:page-home": {},
-    "snap_manageState": {}
+    "endowment:page-home": {}
   },
   "manifestVersion": "0.1"
 }

packages/examples/packages/interactive-ui/src/components/Insight.tsx

@@ -0,0 +1,21 @@
+import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
+import { Button, Box, Text, Row, Address } from '@metamask/snaps-sdk/jsx';
+
+type InsightProps = {
+  from: string;
+  to?: string;
+};
+
+export const Insight: SnapComponent<InsightProps> = ({ from, to }) => {
+  return (
+    <Box>
+      <Row label="From">
+        <Address address={from as `0x${string}`} />
+      </Row>
+      <Row label="To">
+        {to ? <Address address={from as `0x${string}`} /> : <Text>None</Text>}
+      </Row>
+      <Button name="transaction-type">See transaction type</Button>
+    </Box>
+  );
+};

packages/examples/packages/interactive-ui/src/components/InteractiveForm.tsx

@@ -0,0 +1,25 @@
+import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
+import {
+  Button,
+  Box,
+  Field,
+  Heading,
+  Form,
+  Input,
+} from '@metamask/snaps-sdk/jsx';
+
+export const InteractiveForm: SnapComponent = () => {
+  return (
+    <Box>
+      <Heading>Interactive UI Example Snap</Heading>
+      <Form name="example-form">
+        <Field label="Example Input">
+          <Input name="example-input" placeholder="Enter something..." />
+        </Field>
+        <Button type="submit" name="submit">
+          Submit
+        </Button>
+      </Form>
+    </Box>
+  );
+};

packages/examples/packages/interactive-ui/src/components/Result.tsx

@@ -0,0 +1,21 @@
+import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
+import { Heading, Button, Box, Text, Copyable } from '@metamask/snaps-sdk/jsx';
+
+type ResultProps = {
+  values: Record<string, string>;
+};
+
+export const Result: SnapComponent<ResultProps> = ({ values }) => {
+  return (
+    <Box>
+      <Heading>Interactive UI Example Snap</Heading>
+      <Text>You submitted the following values:</Text>
+      <Box>
+        {Object.values(values).map((value) => (
+          <Copyable value={value ?? ''} />
+        ))}
+      </Box>
+      <Button name="back">Back</Button>
+    </Box>
+  );
+};

packages/examples/packages/interactive-ui/src/components/TransactionType.tsx

@@ -0,0 +1,21 @@
+import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
+import { Bold, Box, Row, Button, Text } from '@metamask/snaps-sdk/jsx';
+
+type TransactionTypeProps = {
+  type: string;
+};
+
+export const TransactionType: SnapComponent<TransactionTypeProps> = ({
+  type,
+}) => {
+  return (
+    <Box>
+      <Row label="Transaction Type">
+        <Text>
+          <Bold>{type}</Bold>
+        </Text>
+      </Row>
+      <Button name="go-back">Back</Button>
+    </Box>
+  );
+};

packages/examples/packages/interactive-ui/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from './InteractiveForm';
+export * from './Insight';
+export * from './Result';
+export * from './TransactionType';