Update preinstalled example to make buttons actually work (#2829)

Previously the preinstalled example didn't have any logic, and since
it's set up to hide the header, there was no way to get out of the
dialog. I've added some basic logic now, so it has a working cancel
button, and a form with a submit button.

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 },
+        },
+      });
+    }
+  }
+};