feat: Add DateTimePicker component

packages/examples/packages/interactive-ui/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "lQJxp8tdELhy1AOIMHwlI4P9XDuQk/HGd6sRn17aHAs=",
+    "shasum": "FnPgPqF+ikILx3j78midkBr2Yvqr6vsszAYm4DpeqMc=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/interactive-ui/src/components/InteractiveForm.tsx

@@ -16,6 +16,7 @@ import {
   Checkbox,
   Container,
   Footer,
+  DateTimePicker,
 } from '@metamask/snaps-sdk/jsx';
 
 /**
@@ -46,6 +47,21 @@ export type InteractiveFormState = {
    * The value of the example Selector.
    */
   'example-selector': string;
+
+  /**
+   * The value of the example DateTimePicker.
+   */
+  'example-datetime'?: string;
+
+  /**
+   * The value of the example DatePicker.
+   */
+  'example-date'?: string;
+
+  /**
+   * The value of the example TimePicker.
+   */
+  'example-time'?: string;
 };
 
 export const InteractiveForm: SnapComponent<{ disabled?: boolean }> = ({
@@ -102,6 +118,28 @@ export const InteractiveForm: SnapComponent<{ disabled?: boolean }> = ({
               </SelectorOption>
             </Selector>
           </Field>
+          <Field label="Example DateTimePicker">
+            <DateTimePicker
+              name="example-datetime"
+              placeholder="Select a date and time"
+            />
+          </Field>
+          <Field label="Example DatePicker">
+            <DateTimePicker
+              name="example-date"
+              type="date"
+              placeholder="Select a date"
+              disableFuture={true}
+            />
+          </Field>
+          <Field label="Example TimePicker">
+            <DateTimePicker
+              name="example-time"
+              type="time"
+              placeholder="Select a time"
+              disablePast={true}
+            />
+          </Field>
         </Form>
       </Box>
       <Footer>

packages/examples/packages/interactive-ui/src/index.test.tsx

@@ -35,6 +35,14 @@ describe('onRpcRequest', () => {
         method: 'dialog',
       });
 
+      const presentDate = new Date();
+
+      const futureDate = new Date();
+      futureDate.setFullYear(futureDate.getFullYear() + 1);
+
+      const pastDate = new Date();
+      pastDate.setFullYear(pastDate.getFullYear() - 1);
+
       const formScreen = await response.getInterface();
 
       expect(formScreen).toRender(<InteractiveForm />);
@@ -49,6 +57,12 @@ describe('onRpcRequest', () => {
 
       await formScreen.clickElement('example-checkbox');
 
+      await formScreen.pickDateTime('example-datetime', presentDate);
+
+      await formScreen.pickDateTime('example-date', pastDate);
+
+      await formScreen.pickDateTime('example-time', futureDate);
+
       await formScreen.clickElement('submit');
 
       const resultScreen = await response.getInterface();
@@ -62,6 +76,9 @@ describe('onRpcRequest', () => {
             'example-radiogroup': 'option3',
             'example-checkbox': true,
             'example-selector': 'option2',
+            'example-datetime': presentDate.toISOString(),
+            'example-date': pastDate.toISOString(),
+            'example-time': futureDate.toISOString(),
           }}
         />,
       );
@@ -94,6 +111,9 @@ describe('onRpcRequest', () => {
             'example-radiogroup': 'option1',
             'example-checkbox': false,
             'example-selector': 'option1',
+            'example-datetime': '',
+            'example-date': '',
+            'example-time': '',
           }}
         />,
       );
@@ -106,6 +126,14 @@ describe('onRpcRequest', () => {
 
 describe('onHomePage', () => {
   it('returns custom UI', async () => {
+    const presentDate = new Date();
+
+    const futureDate = new Date();
+    futureDate.setFullYear(futureDate.getFullYear() + 1);
+
+    const pastDate = new Date();
+    pastDate.setFullYear(pastDate.getFullYear() - 1);
+
     const { onHomePage } = await installSnap();
 
     const response = await onHomePage();
@@ -122,6 +150,12 @@ describe('onHomePage', () => {
 
     await formScreen.selectFromSelector('example-selector', 'option2');
 
+    await formScreen.pickDateTime('example-datetime', presentDate);
+
+    await formScreen.pickDateTime('example-date', pastDate);
+
+    await formScreen.pickDateTime('example-time', futureDate);
+
     await formScreen.clickElement('submit');
 
     const resultScreen = response.getInterface();
@@ -134,6 +168,9 @@ describe('onHomePage', () => {
           'example-radiogroup': 'option3',
           'example-checkbox': false,
           'example-selector': 'option2',
+          'example-datetime': presentDate.toISOString(),
+          'example-date': pastDate.toISOString(),
+          'example-time': futureDate.toISOString(),
         }}
       />,
     );

packages/snaps-controllers/src/interface/utils.test.tsx

@@ -18,6 +18,7 @@ import {
   AssetSelector,
   AddressInput,
   AccountSelector,
+  DateTimePicker,
 } from '@metamask/snaps-sdk/jsx';
 import type { CaipAccountId } from '@metamask/utils';
 import { parseCaipAccountId } from '@metamask/utils';
@@ -352,6 +353,66 @@ describe('constructState', () => {
     });
   });
 
+  it('sets default value for root level DateTimePicker', () => {
+    const element = (
+      <Box>
+        <DateTimePicker name="foo" />
+      </Box>
+    );
+
+    const result = constructState({}, element, elementDataGetters);
+    expect(result).toStrictEqual({
+      foo: null,
+    });
+  });
+
+  it('supports root level DateTimePicker', () => {
+    const element = (
+      <Box>
+        <DateTimePicker name="foo" value="2022-01-01T00:00:00Z" />
+      </Box>
+    );
+
+    const result = constructState({}, element, elementDataGetters);
+    expect(result).toStrictEqual({
+      foo: '2022-01-01T00:00:00Z',
+    });
+  });
+
+  it('sets default value for DateTimePicker in forms', () => {
+    const element = (
+      <Box>
+        <Form name="form">
+          <Field label="foo">
+            <DateTimePicker name="foo" />
+          </Field>
+        </Form>
+      </Box>
+    );
+
+    const result = constructState({}, element, elementDataGetters);
+    expect(result).toStrictEqual({
+      form: { foo: null },
+    });
+  });
+
+  it('supports DateTimePicker in forms', () => {
+    const element = (
+      <Box>
+        <Form name="form">
+          <Field label="foo">
+            <DateTimePicker name="foo" value="2022-01-01T00:00:00Z" />
+          </Field>
+        </Form>
+      </Box>
+    );
+
+    const result = constructState({}, element, elementDataGetters);
+    expect(result).toStrictEqual({
+      form: { foo: '2022-01-01T00:00:00Z' },
+    });
+  });
+
   it('sets default value for root level dropdown', () => {
     const element = (
       <Box>

packages/snaps-controllers/src/interface/utils.ts

@@ -23,6 +23,7 @@ import type {
   AssetSelectorElement,
   AddressInputElement,
   AccountSelectorElement,
+  DateTimePickerElement,
 } from '@metamask/snaps-sdk/jsx';
 import { isJSXElementUnsafe } from '@metamask/snaps-sdk/jsx';
 import type { InternalAccount } from '@metamask/snaps-utils';
@@ -57,6 +58,7 @@ const STATEFUL_COMPONENT_TYPES = [
   'AssetSelector',
   'AddressInput',
   'AccountSelector',
+  'DateTimePicker',
 ] as const;
 
 /**
@@ -342,7 +344,8 @@ function constructComponentSpecificDefaultState(
     | SelectorElement
     | AssetSelectorElement
     | AddressInputElement
-    | AccountSelectorElement,
+    | AccountSelectorElement
+    | DateTimePickerElement,
   elementDataGetters: ElementDataGetters,
 ) {
   switch (element.type) {
@@ -459,7 +462,8 @@ function getComponentStateValue(
     | SelectorElement
     | AssetSelectorElement
     | AddressInputElement
-    | AccountSelectorElement,
+    | AccountSelectorElement
+    | DateTimePickerElement,
   elementDataGetters: ElementDataGetters,
 ) {
   switch (element.type) {
@@ -510,7 +514,8 @@ function constructInputState(
     | SelectorElement
     | AssetSelectorElement
     | AddressInputElement
-    | AccountSelectorElement,
+    | AccountSelectorElement
+    | DateTimePickerElement,
   elementDataGetters: ElementDataGetters,
   form?: string,
 ) {

packages/snaps-execution-environments/lavamoat/webpack/iframe/policy.json

@@ -74,7 +74,8 @@
     "@metamask/snaps-sdk": {
       "packages": {
         "@metamask/superstruct": true,
-        "@metamask/utils": true
+        "@metamask/utils": true,
+        "@metamask/snaps-sdk>luxon": true
       }
     },
     "@metamask/snaps-utils": {
@@ -143,6 +144,11 @@
         "define": true
       }
     },
+    "@metamask/snaps-sdk>luxon": {
+      "globals": {
+        "Intl": true
+      }
+    },
     "@metamask/object-multiplex>once": {
       "packages": {
         "@metamask/object-multiplex>once>wrappy": true

packages/snaps-execution-environments/lavamoat/webpack/node-process/policy.json

@@ -81,7 +81,8 @@
     "@metamask/snaps-sdk": {
       "packages": {
         "@metamask/superstruct": true,
-        "@metamask/utils": true
+        "@metamask/utils": true,
+        "@metamask/snaps-sdk>luxon": true
       }
     },
     "@metamask/snaps-utils": {
@@ -156,6 +157,11 @@
         "define": true
       }
     },
+    "@metamask/snaps-sdk>luxon": {
+      "globals": {
+        "Intl": true
+      }
+    },
     "@metamask/object-multiplex>once": {
       "packages": {
         "@metamask/object-multiplex>once>wrappy": true

packages/snaps-execution-environments/lavamoat/webpack/node-thread/policy.json

@@ -81,7 +81,8 @@
     "@metamask/snaps-sdk": {
       "packages": {
         "@metamask/superstruct": true,
-        "@metamask/utils": true
+        "@metamask/utils": true,
+        "@metamask/snaps-sdk>luxon": true
       }
     },
     "@metamask/snaps-utils": {
@@ -156,6 +157,11 @@
         "define": true
       }
     },
+    "@metamask/snaps-sdk>luxon": {
+      "globals": {
+        "Intl": true
+      }
+    },
     "@metamask/object-multiplex>once": {
       "packages": {
         "@metamask/object-multiplex>once>wrappy": true

packages/snaps-execution-environments/lavamoat/webpack/webview/policy.json

@@ -74,7 +74,8 @@
     "@metamask/snaps-sdk": {
       "packages": {
         "@metamask/superstruct": true,
-        "@metamask/utils": true
+        "@metamask/utils": true,
+        "@metamask/snaps-sdk>luxon": true
       }
     },
     "@metamask/snaps-utils": {
@@ -143,6 +144,11 @@
         "define": true
       }
     },
+    "@metamask/snaps-sdk>luxon": {
+      "globals": {
+        "Intl": true
+      }
+    },
     "@metamask/object-multiplex>once": {
       "packages": {
         "@metamask/object-multiplex>once>wrappy": true

packages/snaps-jest/src/helpers.test.tsx

@@ -411,6 +411,7 @@ describe('installSnap', () => {
         type: DialogType.Prompt,
         content: <Text>Hello, world!</Text>,
         clickElement: expect.any(Function),
+        pickDateTime: expect.any(Function),
         typeInField: expect.any(Function),
         selectInDropdown: expect.any(Function),
         selectFromRadioGroup: expect.any(Function),
@@ -475,6 +476,7 @@ describe('installSnap', () => {
         type: DialogType.Confirmation,
         content: <Text>Hello, world!</Text>,
         clickElement: expect.any(Function),
+        pickDateTime: expect.any(Function),
         typeInField: expect.any(Function),
         selectInDropdown: expect.any(Function),
         selectFromRadioGroup: expect.any(Function),
@@ -539,6 +541,7 @@ describe('installSnap', () => {
         type: DialogType.Alert,
         content: <Text>Hello, world!</Text>,
         clickElement: expect.any(Function),
+        pickDateTime: expect.any(Function),
         typeInField: expect.any(Function),
         selectInDropdown: expect.any(Function),
         selectFromRadioGroup: expect.any(Function),

packages/snaps-jest/src/test-utils/response.ts

@@ -57,6 +57,7 @@ export function getMockInterfaceResponse(
   return {
     content,
     clickElement: jest.fn(),
+    pickDateTime: jest.fn(),
     typeInField: jest.fn(),
     selectInDropdown: jest.fn(),
     selectFromRadioGroup: jest.fn(),