BREAKING: Added new method to cronjob example snap to test durations (#3016)

Updated the cronjob example snap with a new method to test durations and
updated `test-snaps` accordingly.

Note: This PR breaks the `scheduleNotification` method in the example
snap, it is now `scheduleNotificationWithDate`.

Author: hmalik88

packages/examples/packages/cronjobs/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "B0eoXOpzU2Cts5d42w11AdvgClmS/une3zXQ9vHnJgU=",
+    "shasum": "UAyTtrfMx+qx9gS5oJzs9xHSUWHbftqIc0KbKq4JpQ0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/cronjobs/src/index.ts

@@ -6,7 +6,8 @@ import { panel, text, heading, MethodNotFoundError } from '@metamask/snaps-sdk';
 
 import type {
   CancelNotificationParams,
-  ScheduleNotificationParams,
+  ScheduleNotificationParamsWithDate,
+  ScheduleNotificationParamsWithDuration,
 } from './types';
 
 /**
@@ -56,9 +57,10 @@ export const onCronjob: OnCronjobHandler = async ({ request }) => {
 
 /**
  * Handle incoming JSON-RPC requests from the dapp, sent through the
- * `wallet_invokeSnap` method. This handler handles three methods:
+ * `wallet_invokeSnap` method. This handler handles four methods:
  *
- * - `scheduleNotification`: Schedule a notification in the future.
+ * - `scheduleNotificationWithDate`: Schedule a notification in the future with the `date` param.
+ * - `scheduleNotificationWithDuration`: Schedule a notification in the future with the `duration` param.
  * - `cancelNotification`: Cancel a notification.
  * - `getBackgroundEvents`: Get the Snap's background events.
  *
@@ -70,11 +72,22 @@ export const onCronjob: OnCronjobHandler = async ({ request }) => {
  */
 export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
   switch (request.method) {
-    case 'scheduleNotification':
+    case 'scheduleNotificationWithDate':
       return snap.request({
         method: 'snap_scheduleBackgroundEvent',
         params: {
-          date: (request.params as ScheduleNotificationParams).date,
+          date: (request.params as ScheduleNotificationParamsWithDate).date,
+          request: {
+            method: 'fireNotification',
+          },
+        },
+      });
+    case 'scheduleNotificationWithDuration':
+      return snap.request({
+        method: 'snap_scheduleBackgroundEvent',
+        params: {
+          duration: (request.params as ScheduleNotificationParamsWithDuration)
+            .duration,
           request: {
             method: 'fireNotification',
           },

packages/examples/packages/cronjobs/src/types.ts

@@ -1,12 +1,21 @@
 /**
- * The parameters for calling the `scheduleNotification` JSON-RPC method.
+ * The parameters for calling the `scheduleNotificationWithDate` JSON-RPC method.
  *
  * @property date - The ISO 8601 date of when the notification should be scheduled.
  */
-export type ScheduleNotificationParams = {
+export type ScheduleNotificationParamsWithDate = {
   date: string;
 };
 
+/**
+ * The parameters for calling the `scheduleNotificationWithDuration` JSON-RPC method.
+ *
+ * @property duration - The ISO 8601 duration of when the notification should be scheduled.
+ */
+export type ScheduleNotificationParamsWithDuration = {
+  duration: string;
+};
+
 /**
  * The parameters for calling the `cancelNotification` JSON-RPC method.
  *

packages/test-snaps/src/features/snaps/cronjobs/components/ScheduleBackgroundEvent.tsx

@@ -10,40 +10,82 @@ import { CRONJOBS_SNAP_PORT, CRONJOBS_SNAP_ID } from '../constants';
 
 export const ScheduleBackgroundEvent: FunctionComponent = () => {
   const [date, setDate] = useState('');
+  const [duration, setDuration] = useState('');
   const [invokeSnap, { isLoading, data, error }] = useInvokeMutation();
 
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+  const handleDateChange = (event: ChangeEvent<HTMLInputElement>) => {
     setDate(event.target.value);
   };
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+  const handleDurationChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setDuration(event.target.value);
+  };
+
+  const handleSubmitWithDate = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     invokeSnap({
       snapId: getSnapId(CRONJOBS_SNAP_ID, CRONJOBS_SNAP_PORT),
-      method: 'scheduleNotification',
+      method: 'scheduleNotificationWithDate',
       params: {
         date,
       },
     }).catch(logError);
   };
 
+  const handleSubmitWithDuration = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    invokeSnap({
+      snapId: getSnapId(CRONJOBS_SNAP_ID, CRONJOBS_SNAP_PORT),
+      method: 'scheduleNotificationWithDuration',
+      params: {
+        duration,
+      },
+    }).catch(logError);
+  };
+
   return (
     <>
-      <Form onSubmit={handleSubmit} className="mb-3">
+      <Form onSubmit={handleSubmitWithDate} className="mb-3">
         <Form.Group>
-          <Form.Label>Date (must be in IS8601 format)</Form.Label>
+          <Form.Label>Date (must be in ISO 8601 format)</Form.Label>
           <Form.Control
             type="text"
             placeholder={new Date().toISOString()}
             value={date}
-            onChange={handleChange}
+            onChange={handleDateChange}
             id="backgroundEventDate"
             className="mb-3"
           />
         </Form.Group>
 
-        <Button type="submit" id="scheduleBackgroundEvent" disabled={isLoading}>
-          Schedule background event (notification)
+        <Button
+          type="submit"
+          id="scheduleBackgroundEventWithDate"
+          disabled={isLoading}
+        >
+          Schedule background event with date (notification)
+        </Button>
+      </Form>
+
+      <Form onSubmit={handleSubmitWithDuration} className="mb-3">
+        <Form.Group>
+          <Form.Label>Duration (must be in ISO 8601 format)</Form.Label>
+          <Form.Control
+            type="text"
+            placeholder="PT30S"
+            value={duration}
+            onChange={handleDurationChange}
+            id="backgroundEventDuration"
+            className="mb-3"
+          />
+        </Form.Group>
+
+        <Button
+          type="submit"
+          id="scheduleBackgroundEventWithDuration"
+          disabled={isLoading}
+        >
+          Schedule background event with duration (notification)
         </Button>
       </Form>