From a08c8dde716a8334de5308b92d43c4e48d014021 Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Fri, 28 Feb 2025 08:07:06 -0500
Subject: [PATCH 1/6] added new method to dialogs snap to show require scroll
 content

---
 .../packages/dialogs/src/components/index.ts  |  1 +
 .../src/components/require-scroll-content.tsx | 39 +++++++++++++++++++
 .../examples/packages/dialogs/src/index.tsx   |  8 +++-
 .../src/features/snaps/dialogs/Dialogs.tsx    | 13 +++++++
 4 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 packages/examples/packages/dialogs/src/components/require-scroll-content.tsx

diff --git a/packages/examples/packages/dialogs/src/components/index.ts b/packages/examples/packages/dialogs/src/components/index.ts
index c7226ae4e2..c939e66b48 100644
--- a/packages/examples/packages/dialogs/src/components/index.ts
+++ b/packages/examples/packages/dialogs/src/components/index.ts
@@ -1 +1,2 @@
 export * from './custom';
+export * from './require-scroll-content';
diff --git a/packages/examples/packages/dialogs/src/components/require-scroll-content.tsx b/packages/examples/packages/dialogs/src/components/require-scroll-content.tsx
new file mode 100644
index 0000000000..45adcf8799
--- /dev/null
+++ b/packages/examples/packages/dialogs/src/components/require-scroll-content.tsx
@@ -0,0 +1,39 @@
+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 direction="vertical">
+      <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>
+      <Text>lorem ipsum dolor sit amet</Text>
+    </Box>
+    <Footer requireScroll>
+      <Button name="reject">Reject</Button>
+      <Button name="accept">Yes</Button>
+    </Footer>
+  </Container>
+);
diff --git a/packages/examples/packages/dialogs/src/index.tsx b/packages/examples/packages/dialogs/src/index.tsx
index a1849576e3..db2b5b2bdc 100644
--- a/packages/examples/packages/dialogs/src/index.tsx
+++ b/packages/examples/packages/dialogs/src/index.tsx
@@ -11,7 +11,7 @@ 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
@@ -90,6 +90,12 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
         },
       });
 
+    case 'showRequireScrollContent':
+      return snap.request({
+        method: 'snap_dialog',
+        params: { content: <RequireScrollContent /> },
+      });
+
     default:
       throw new MethodNotFoundError({ method: request.method });
   }
diff --git a/packages/test-snaps/src/features/snaps/dialogs/Dialogs.tsx b/packages/test-snaps/src/features/snaps/dialogs/Dialogs.tsx
index b808772078..48ed6397f7 100644
--- a/packages/test-snaps/src/features/snaps/dialogs/Dialogs.tsx
+++ b/packages/test-snaps/src/features/snaps/dialogs/Dialogs.tsx
@@ -43,6 +43,12 @@ export const Dialogs: FunctionComponent = () => {
     }).catch(logError);
   };
 
+  const handleSubmitRequireScrollContent = () => {
+    invokeSnap({
+      snapId,
+      method: 'showRequireScrollContent',
+    }).catch(logError);
+  };
   return (
     <Snap
       name="Dialogs Snap"
@@ -80,6 +86,13 @@ export const Dialogs: FunctionComponent = () => {
         >
           Custom
         </Button>
+        <Button
+          id="triggerRequireScrollContentButton"
+          onClick={handleSubmitRequireScrollContent}
+          disabled={isLoading}
+        >
+          Require Scroll Content
+        </Button>
       </ButtonGroup>
 
       <Result>

From cb06ad05bf09743a559dbfa904a70b4360ef985f Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Mon, 3 Mar 2025 13:28:21 -0500
Subject: [PATCH 2/6] apply code review

---
 .../src/components/require-scroll-content.tsx | 33 +++++++++----------
 .../examples/packages/dialogs/src/index.tsx   |  4 +--
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/packages/examples/packages/dialogs/src/components/require-scroll-content.tsx b/packages/examples/packages/dialogs/src/components/require-scroll-content.tsx
index 45adcf8799..4164fb6308 100644
--- a/packages/examples/packages/dialogs/src/components/require-scroll-content.tsx
+++ b/packages/examples/packages/dialogs/src/components/require-scroll-content.tsx
@@ -14,24 +14,23 @@ import {
  */
 export const RequireScrollContent: SnapComponent = () => (
   <Container>
-    <Box direction="vertical">
-      <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>
-      <Text>lorem ipsum dolor sit amet</Text>
+    <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 requireScroll>
+    <Footer>
       <Button name="reject">Reject</Button>
       <Button name="accept">Yes</Button>
     </Footer>
diff --git a/packages/examples/packages/dialogs/src/index.tsx b/packages/examples/packages/dialogs/src/index.tsx
index db2b5b2bdc..2549c3a2fb 100644
--- a/packages/examples/packages/dialogs/src/index.tsx
+++ b/packages/examples/packages/dialogs/src/index.tsx
@@ -15,13 +15,13 @@ 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.
+ * - `showRequireScrollContent`: 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.

From 62ec4239a0e489737db968aa323f3f6f547f0147 Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Thu, 27 Mar 2025 11:26:54 -0400
Subject: [PATCH 3/6] hook up accept/reject buttons

---
 packages/examples/packages/dialogs/src/index.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/examples/packages/dialogs/src/index.tsx b/packages/examples/packages/dialogs/src/index.tsx
index 2549c3a2fb..e3bb525e22 100644
--- a/packages/examples/packages/dialogs/src/index.tsx
+++ b/packages/examples/packages/dialogs/src/index.tsx
@@ -142,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;
     }

From 3ce325148f6e7041883aeda19e9118ff3cbd6dfb Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Thu, 27 Mar 2025 11:27:46 -0400
Subject: [PATCH 4/6] rebuild

---
 packages/examples/packages/dialogs/snap.manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/examples/packages/dialogs/snap.manifest.json b/packages/examples/packages/dialogs/snap.manifest.json
index f8fe7debe8..3232daea45 100644
--- a/packages/examples/packages/dialogs/snap.manifest.json
+++ b/packages/examples/packages/dialogs/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "fCeqfbW1isFwXBPuM3RaAEtcR3J0Lv31fQ57rFNRwfs=",
+    "shasum": "1ulFPvHJ5MZY1FhkQjie7usEyduFBbxDXglDXTceFa8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

From 98d49647fb09fd9e8ec5411f554cc59f30be6d95 Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Mon, 31 Mar 2025 06:30:03 -0400
Subject: [PATCH 5/6] apply code review

---
 packages/examples/packages/dialogs/src/index.tsx       |  4 ++--
 .../test-snaps/src/features/snaps/dialogs/Dialogs.tsx  | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/examples/packages/dialogs/src/index.tsx b/packages/examples/packages/dialogs/src/index.tsx
index e3bb525e22..40d3902814 100644
--- a/packages/examples/packages/dialogs/src/index.tsx
+++ b/packages/examples/packages/dialogs/src/index.tsx
@@ -21,7 +21,7 @@ import { CustomDialog, RequireScrollContent } from './components';
  * - `showConfirmation`: Show a confirmation dialog.
  * - `showPrompt`: Show a prompt dialog.
  * - `showCustom`: Show a custom dialog with the resolution handled by the snap.
- * - `showRequireScrollContent`: Show a custom dialog with content that requires scrolling.
+ * - `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,7 +90,7 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
         },
       });
 
-    case 'showRequireScrollContent':
+    case 'showLongContent':
       return snap.request({
         method: 'snap_dialog',
         params: { content: <RequireScrollContent /> },
diff --git a/packages/test-snaps/src/features/snaps/dialogs/Dialogs.tsx b/packages/test-snaps/src/features/snaps/dialogs/Dialogs.tsx
index 48ed6397f7..ea5d5068b3 100644
--- a/packages/test-snaps/src/features/snaps/dialogs/Dialogs.tsx
+++ b/packages/test-snaps/src/features/snaps/dialogs/Dialogs.tsx
@@ -43,10 +43,10 @@ export const Dialogs: FunctionComponent = () => {
     }).catch(logError);
   };
 
-  const handleSubmitRequireScrollContent = () => {
+  const handleSubmitLongContent = () => {
     invokeSnap({
       snapId,
-      method: 'showRequireScrollContent',
+      method: 'showLongContent',
     }).catch(logError);
   };
   return (
@@ -87,11 +87,11 @@ export const Dialogs: FunctionComponent = () => {
           Custom
         </Button>
         <Button
-          id="triggerRequireScrollContentButton"
-          onClick={handleSubmitRequireScrollContent}
+          id="triggerLongContentButton"
+          onClick={handleSubmitLongContent}
           disabled={isLoading}
         >
-          Require Scroll Content
+          Long Content
         </Button>
       </ButtonGroup>
 

From ef523a697a0c0fe0e7497276fcd6af8e71158012 Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Mon, 31 Mar 2025 06:42:07 -0400
Subject: [PATCH 6/6] rebuild

---
 packages/examples/packages/dialogs/snap.manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/examples/packages/dialogs/snap.manifest.json b/packages/examples/packages/dialogs/snap.manifest.json
index 3232daea45..dfe7198ebe 100644
--- a/packages/examples/packages/dialogs/snap.manifest.json
+++ b/packages/examples/packages/dialogs/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "1ulFPvHJ5MZY1FhkQjie7usEyduFBbxDXglDXTceFa8=",
+    "shasum": "A/1FVAisbJ1AzbmRBHL70p9QrviO9/30AwgUV2xLmgM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",