Add new method to dialogs snap

packages/examples/packages/dialogs/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "fCeqfbW1isFwXBPuM3RaAEtcR3J0Lv31fQ57rFNRwfs=",
+    "shasum": "A/1FVAisbJ1AzbmRBHL70p9QrviO9/30AwgUV2xLmgM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -1 +1,2 @@
 export * from './custom';
+export * from './require-scroll-content';

packages/examples/packages/dialogs/src/components/require-scroll-content.tsx

@@ -0,0 +1,38 @@
+import {
+  Box,
+  Button,
+  Container,
+  Footer,
+  Text,
+  type SnapComponent,
+} from '@metamask/snaps-sdk/jsx';
+
+/**
+ * Long content that requires scrolling.
+ *
+ * @returns The long content component.
+ */
+export const RequireScrollContent: SnapComponent = () => (
+  <Container>
+    <Box>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+    </Box>
+    <Footer>
+      <Button name="reject">Reject</Button>
+      <Button name="accept">Yes</Button>
+    </Footer>
+  </Container>
+);

packages/examples/packages/dialogs/src/index.tsx

@@ -11,17 +11,17 @@ import {
   UserInputEventType,
 } from '@metamask/snaps-sdk';
 
-import { CustomDialog } from './components';
+import { CustomDialog, RequireScrollContent } from './components';
 
 /**
  * Handle incoming JSON-RPC requests from the dapp, sent through the
- * `wallet_invokeSnap` method. This handler handles three methods, one for each
- * type of dialog:
+ * `wallet_invokeSnap` method. This handler handles four methods:
  *
  * - `showAlert`: Show an alert dialog.
  * - `showConfirmation`: Show a confirmation dialog.
  * - `showPrompt`: Show a prompt dialog.
  * - `showCustom`: Show a custom dialog with the resolution handled by the snap.
+ * - `showLongContent`: Show a custom dialog with content that requires scrolling.
  *
  * The dialogs are shown using the [`snap_dialog`](https://docs.metamask.io/snaps/reference/rpc-api/#snap_dialog)
  * method.
@@ -90,6 +90,12 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
         },
       });
 
+    case 'showLongContent':
+      return snap.request({
+        method: 'snap_dialog',
+        params: { content: <RequireScrollContent /> },
+      });
+
     default:
       throw new MethodNotFoundError({ method: request.method });
   }
@@ -136,6 +142,20 @@ export const onUserInput: OnUserInputHandler = async ({ id, event }) => {
         break;
       }
 
+      case 'accept':
+        await snap.request({
+          method: 'snap_resolveInterface',
+          params: { id, value: true },
+        });
+        break;
+
+      case 'reject':
+        await snap.request({
+          method: 'snap_resolveInterface',
+          params: { id, value: false },
+        });
+        break;
+
       default:
         break;
     }

packages/test-snaps/src/features/snaps/dialogs/Dialogs.tsx

@@ -43,6 +43,12 @@ export const Dialogs: FunctionComponent = () => {
     }).catch(logError);
   };
 
+  const handleSubmitLongContent = () => {
+    invokeSnap({
+      snapId,
+      method: 'showLongContent',
+    }).catch(logError);
+  };
   return (
     <Snap
       name="Dialogs Snap"
@@ -80,6 +86,13 @@ export const Dialogs: FunctionComponent = () => {
         >
           Custom
         </Button>
+        <Button
+          id="triggerLongContentButton"
+          onClick={handleSubmitLongContent}
+          disabled={isLoading}
+        >
+          Long Content
+        </Button>
       </ButtonGroup>
 
       <Result>