Update preinstalled example to make buttons actually work

packages/examples/packages/preinstalled/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "NzLP9BfbhyGMuOG5TgjxLkvOUQUKJI58t+dTOoY+ylE=",
+    "shasum": "J3zJc64oz6LDVQKp/KAQwlhsW+e1aiiyD4UPJn5gKu4=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/preinstalled/src/components/dialog.tsx

@@ -1,5 +1,7 @@
 import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
 import {
+  Field,
+  Form,
   Box,
   Container,
   Heading,
@@ -19,14 +21,20 @@ export const Dialog: SnapComponent = () => (
     <Box>
       <Heading>Custom Dialog</Heading>
       <Text>
-        This is a custom dialog. It has a custom Footer and can be resolved to
+        This is a custom dialog. It has a custom footer and can be resolved to
         any value.
       </Text>
-      <Input name="custom-input" placeholder="Enter something..." />
+      <Form name="form">
+        <Field label="Field">
+          <Input name="custom-input" placeholder="Enter something..." />
+        </Field>
+      </Form>
     </Box>
     <Footer>
       <Button name="cancel">Cancel</Button>
-      <Button name="confirm">Confirm</Button>
+      <Button name="confirm" type="submit" form="form">
+        Confirm
+      </Button>
     </Footer>
   </Container>
 );

packages/examples/packages/preinstalled/src/components/index.ts

@@ -1 +1,2 @@
 export * from './dialog';
+export * from './result';

packages/examples/packages/preinstalled/src/components/result.tsx

@@ -0,0 +1,34 @@
+import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
+import {
+  Copyable,
+  Box,
+  Container,
+  Heading,
+  Text,
+  Footer,
+  Button,
+} from '@metamask/snaps-sdk/jsx';
+
+export type ResultProps = {
+  value: string;
+};
+
+/**
+ * A result component.
+ *
+ * @param props - The props of the component.
+ * @param props.value - The value to display.
+ * @returns The result component.
+ */
+export const Result: SnapComponent<ResultProps> = ({ value }) => (
+  <Container>
+    <Box>
+      <Heading>Custom Dialog</Heading>
+      <Text>The form was submitted with the following value:</Text>
+      <Copyable value={value} />
+    </Box>
+    <Footer>
+      <Button name="ok">Ok</Button>
+    </Footer>
+  </Container>
+);

packages/examples/packages/preinstalled/src/index.test.tsx

@@ -0,0 +1,64 @@
+import { expect } from '@jest/globals';
+import { installSnap } from '@metamask/snaps-jest';
+
+import { Dialog, Result } from './components';
+
+describe('onRpcRequest', () => {
+  it('throws an error if the requested method does not exist', async () => {
+    const { request } = await installSnap();
+
+    const response = await request({
+      method: 'foo',
+    });
+
+    expect(response).toRespondWithError({
+      code: -32601,
+      message: 'The method does not exist / is not available.',
+      stack: expect.any(String),
+      data: {
+        method: 'foo',
+        cause: null,
+      },
+    });
+  });
+
+  describe('showDialog', () => {
+    it('closes the dialog when clicking cancel, and resolves with `null`', async () => {
+      const { request } = await installSnap();
+
+      const response = request({
+        method: 'showDialog',
+      });
+
+      const formScreen = await response.getInterface();
+      expect(formScreen).toRender(<Dialog />);
+
+      await formScreen.clickElement('cancel');
+
+      const result = await response;
+      expect(result).toRespondWith(null);
+    });
+
+    it('shows the result when clicking confirm, and resolves with the result', async () => {
+      const { request } = await installSnap();
+
+      const response = request({
+        method: 'showDialog',
+      });
+
+      const formScreen = await response.getInterface();
+      expect(formScreen).toRender(<Dialog />);
+
+      await formScreen.typeInField('custom-input', 'foo bar');
+      await formScreen.clickElement('confirm');
+
+      const resultScreen = await response.getInterface();
+      expect(resultScreen).toRender(<Result value="foo bar" />);
+
+      await resultScreen.clickElement('ok');
+
+      const result = await response;
+      expect(result).toRespondWith('foo bar');
+    });
+  });
+});

packages/examples/packages/preinstalled/src/index.tsx

@@ -1,7 +1,10 @@
 import { MethodNotFoundError } from '@metamask/snaps-sdk';
-import type { OnRpcRequestHandler } from '@metamask/snaps-sdk';
+import type {
+  OnRpcRequestHandler,
+  OnUserInputHandler,
+} from '@metamask/snaps-sdk';
 
-import { Dialog } from './components';
+import { Dialog, Result } from './components';
 
 /**
  * Handle incoming JSON-RPC requests from the dapp, sent through the
@@ -31,3 +34,45 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
       throw new MethodNotFoundError({ method: request.method });
   }
 };
+
+export const onUserInput: OnUserInputHandler = async ({
+  event,
+  id,
+  context,
+}) => {
+  if (event.type === 'ButtonClickEvent') {
+    if (event.name === 'cancel') {
+      await snap.request({
+        method: 'snap_resolveInterface',
+        params: {
+          id,
+          value: null,
+        },
+      });
+    }
+
+    if (event.name === 'ok') {
+      await snap.request({
+        method: 'snap_resolveInterface',
+        params: {
+          id,
+          value: String(context?.value),
+        },
+      });
+    }
+  }
+
+  if (event.type === 'FormSubmitEvent') {
+    if (event.name === 'form') {
+      const value = String(event.value['custom-input']);
+      await snap.request({
+        method: 'snap_updateInterface',
+        params: {
+          id,
+          ui: <Result value={value} />,
+          context: { value },
+        },
+      });
+    }
+  }
+};