chore: Revamp interactive UI example using JSX

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": "WCcrRcQpQpNuWEmyN5TQuX1ckpHF/5JIsdkgMLCvjO0=",
+    "shasum": "ENUxWrgZruvIFCLM2uCYYFIjyBxp6vHYK7L1ZhiZDJA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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';