restrict DateTimePicker values to ISO Date strings

Author: GuillaumeRx

packages/snaps-sdk/package.json

@@ -95,13 +95,15 @@
     "@metamask/providers": "^22.1.1",
     "@metamask/rpc-errors": "^7.0.3",
     "@metamask/superstruct": "^3.2.1",
-    "@metamask/utils": "^11.8.1"
+    "@metamask/utils": "^11.8.1",
+    "luxon": "^3.5.0"
   },
   "devDependencies": {
     "@lavamoat/allow-scripts": "^3.4.0",
     "@metamask/auto-changelog": "^5.0.2",
     "@ts-bridge/cli": "^0.6.1",
     "@types/jest": "^27.5.1",
+    "@types/luxon": "^3",
     "deepmerge": "^4.2.2",
     "depcheck": "^1.4.7",
     "eslint": "^9.11.0",

packages/snaps-sdk/src/internals/index.ts

@@ -4,3 +4,4 @@ export type * from './helpers';
 export * from './structs';
 export * from './jsx';
 export * from './svg';
+export * from './time';

packages/snaps-sdk/src/internals/time.test.ts

@@ -0,0 +1,35 @@
+import { create, is } from '@metamask/superstruct';
+import { DateTime } from 'luxon';
+
+import { ISO8601DateStruct } from './time';
+
+describe('ISO8601DateStruct', () => {
+  it('should return true for a valid ISO 8601 date', () => {
+    const value = DateTime.now().toISO();
+    expect(is(value, ISO8601DateStruct)).toBe(true);
+  });
+
+  it('should return false for an invalid ISO 8601 date', () => {
+    const value = 'Mon Mar 31 2025';
+    expect(is(value, ISO8601DateStruct)).toBe(false);
+  });
+
+  it('should return false for an ISO 8601 date without timezone information', () => {
+    const value = '2025-03-31T12:00:00';
+    expect(is(value, ISO8601DateStruct)).toBe(false);
+  });
+
+  it('should return an error message for invalid ISO 8601 date', () => {
+    const value = 'Mon Mar 31 2025';
+    expect(() => create(value, ISO8601DateStruct)).toThrow(
+      'Not a valid ISO 8601 date',
+    );
+  });
+
+  it('should return an error message for ISO 8601 date without timezone information', () => {
+    const value = '2025-03-31T12:00:00';
+    expect(() => create(value, ISO8601DateStruct)).toThrow(
+      'ISO 8601 date must have timezone information',
+    );
+  });
+});

packages/snaps-sdk/src/internals/time.ts

@@ -0,0 +1,25 @@
+import { refine, string } from '@metamask/superstruct';
+import { DateTime } from 'luxon';
+
+/**
+ * Regex to match the offset part of an ISO 8601 date.
+ */
+const offsetRegex = /Z|([+-]\d{2}:?\d{2})$/u;
+
+/**
+ * Refines a string as an ISO 8601 date.
+ */
+export const ISO8601DateStruct = refine(string(), 'ISO 8601 date', (value) => {
+  const parsedDate = DateTime.fromISO(value);
+
+  if (!parsedDate.isValid) {
+    return 'Not a valid ISO 8601 date';
+  }
+
+  if (!offsetRegex.test(value)) {
+    // Luxon doesn't have a reliable way to check if timezone info was not provided
+    return 'ISO 8601 date must have timezone information';
+  }
+
+  return true;
+});

packages/snaps-sdk/src/jsx/components/form/DateTimePicker.test.tsx

@@ -47,7 +47,7 @@ describe('DateTimePicker', () => {
         type="datetime"
         placeholder="Select date and time"
         disabled={true}
-        value="2024-01-01T12:00"
+        value="2024-01-01T12:00Z"
       />
     );
 
@@ -58,7 +58,7 @@ describe('DateTimePicker', () => {
         type: 'datetime',
         placeholder: 'Select date and time',
         disabled: true,
-        value: '2024-01-01T12:00',
+        value: '2024-01-01T12:00Z',
       },
       key: null,
     });

packages/snaps-sdk/src/jsx/components/form/DateTimePicker.ts

@@ -5,7 +5,8 @@ import { createSnapComponent } from '../../component';
  *
  * @property name - The name of the date/time picker field. This is used to identify the
  * date/time picker field in the form data.
- * @property value - The value of the date/time picker field.
+ * @property value - The value of the date/time picker field. Must be an ISO 8601 date string with
+ * timezone information.
  * @property type - The type of the date/time picker field. Can be 'date', 'time', or 'datetime'.
  * Defaults to 'datetime'.
  * @property placeholder - The placeholder text of the date/time picker field.

packages/snaps-sdk/src/jsx/validation.ts

@@ -90,6 +90,7 @@ import {
   selectiveUnion,
   svg,
   typedUnion,
+  ISO8601DateStruct,
 } from '../internals';
 import {
   NonEip155AssetTypeStruct,
@@ -393,7 +394,7 @@ export const DateTimePickerStruct: Describe<DateTimePickerElement> = element(
     ),
     placeholder: optional(string()),
     disabled: optional(boolean()),
-    value: optional(string()),
+    value: optional(ISO8601DateStruct),
   },
 );
 

yarn.lock

@@ -4518,6 +4518,7 @@ __metadata:
     "@metamask/utils": "npm:^11.8.1"
     "@ts-bridge/cli": "npm:^0.6.1"
     "@types/jest": "npm:^27.5.1"
+    "@types/luxon": "npm:^3"
     deepmerge: "npm:^4.2.2"
     depcheck: "npm:^1.4.7"
     eslint: "npm:^9.11.0"
@@ -4526,6 +4527,7 @@ __metadata:
     jest-fetch-mock: "npm:^3.0.3"
     jest-it-up: "npm:^2.0.0"
     jest-silent-reporter: "npm:^0.6.0"
+    luxon: "npm:^3.5.0"
     prettier: "npm:^3.3.3"
     ts-jest: "npm:^29.1.1"
     typescript: "npm:~5.3.3"