Add InputChangeEvent event (#2237)

Add an `InputChangeEvent` dynamic UI event to be triggered when an input in a form has changed. The event may be debounced in the client implementation and is not triggered instantly. --------- Co-authored-by: MetaMask Bot <[email protected]>
MetaMask · Mar 5, 2024 · 041533f · 041533f
1 parent e56eaf1
commit 041533f
Showing 18 changed files with 39 additions and 17 deletions.
diff --git a/packages/examples/packages/bip32/snap.manifest.json b/packages/examples/packages/bip32/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "jXB7m0SEAB1g2n8E23KElZVG6cipIB8bk7tMInGTGHE=",
+    "shasum": "DtqCkGevlAXjYPpejmh0PW3OXNVm4zYi/PHYVu1U+is=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/bip44/snap.manifest.json b/packages/examples/packages/bip44/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "C9TwxeFksZjLcFlkiee3rwbU075F10AIBrxp2B1Vc3A=",
+    "shasum": "lzjiI94y3QWSHvxvwWPJ3QiLoVpRoDK9aI0KfiFGaO0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/cronjobs/snap.manifest.json b/packages/examples/packages/cronjobs/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "OltG2NDvqyXlQ63rnYbgs3E04Jkp7xDfoERPYjivJoI=",
+    "shasum": "+RV6eu1bUJwI64Ia+87nzVt7w5hEvGG+DjvWRd1ds3E=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git 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": "sJFkvJ7Hw/mL7nsUV2zacpbXagg/vbaWrlwx6m3kZv8=",
+    "shasum": "HrY2Q07bwZLKbP7UYbLU2fVMVMjGWgwhmlTGUgEQNMo=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/ethers-js/snap.manifest.json b/packages/examples/packages/ethers-js/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "BrtFgMRty4l3lFai0ZRzvsOMi+GD35wU2L8e4rC4Pzs=",
+    "shasum": "75eFrFWMaWVoN+SB0Dx6zuMuW6wkW9TAyfTJ2pmkXxU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/get-entropy/snap.manifest.json b/packages/examples/packages/get-entropy/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "L5ZAAUcWucgTLY16I6pX7rzkhW/Am6eW8/6AtHQikuQ=",
+    "shasum": "Bk/N5TeC923rK569D6o7eEusaTZ4ENeqakMXPcAR/tY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/home-page/snap.manifest.json b/packages/examples/packages/home-page/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "c4TP0ESTAYG4AVILxhjNk8PfPNRZA+m1W+IF+8GIFiM=",
+    "shasum": "g97yy0ykpflNFVzBfFablH4DsLNr+eZKCEoDbLQpmgY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/images/snap.manifest.json b/packages/examples/packages/images/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "KZD5RWnfjvokfDoLsN3NDVZwmJ5VuhiBC9N8gOpLe48=",
+    "shasum": "AI+NqKyNjL6pvJv2CapYwFbHSm9EoTINoXl/ZLnZP0E=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/interactive-ui/snap.manifest.json b/packages/examples/packages/interactive-ui/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "HAaFlDfI6+0VX5v5GtYliD2l8PRw74OgSidyU31hdYI=",
+    "shasum": "PPCmPNzFzjg4596Rs/LnTuHAaJq3oAqv+XMSjpTjq0w=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/invoke-snap/packages/core-signer/snap.manifest.json b/packages/examples/packages/invoke-snap/packages/core-signer/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "2ZO74x0nI5E7je1hVrWFRbsACAuN5XAu6NSyiSnMZ5s=",
+    "shasum": "Af0qYFlaZB9ublbw/EdKs/zKfWsSXAG2Mi/XTRmAHOU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/lifecycle-hooks/snap.manifest.json b/packages/examples/packages/lifecycle-hooks/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "qliiMjjWRT7RkwORjS15Uhyfo5AJo3gCUIC+/z4qB5Q=",
+    "shasum": "DSVf2LLECYZqXVe8EInjs5uZ7Ey+UA/ANfbe+XYlCOs=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/manage-state/snap.manifest.json b/packages/examples/packages/manage-state/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "nPzGIoWTNhgD9GP8yM1jg8gQOR7LdDCXbfCiiQY6u6E=",
+    "shasum": "D1RxlgTDi5cCPn6Cf2hO2WzvBnn56ipuSGf6Z96HhIE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/notifications/snap.manifest.json b/packages/examples/packages/notifications/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "JaGuDtOA+RSa+rMvlvVgFG/oIy7o1BafN6WEIetbKqY=",
+    "shasum": "HcZ87SrdWWI7kPX5pId8h8wNMgltlMXqXjGnG+7nN8k=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/signature-insights/snap.manifest.json b/packages/examples/packages/signature-insights/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "z6FH7b1/dv0jY5p7EQ2TclzPjDAb3LGdGybVCK6N3AQ=",
+    "shasum": "yisG8u7h5r9IBpGfapBj8RM2wr5YQh5QA/3cjrBCklU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/transaction-insights/snap.manifest.json b/packages/examples/packages/transaction-insights/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "D9w45JEFlH+OlHKwOFPtNjBGX0d6rZPXMDnndk+zs0k=",
+    "shasum": "sV8xD5zSmYjW5L6L0cY7kZS3UyzlScEyk13lSkYCRhA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/snaps-execution-environments/src/common/validation.test.ts b/packages/snaps-execution-environments/src/common/validation.test.ts
@@ -165,6 +165,14 @@ describe('assertIsOnUserInputRequestArguments', () => {
         value: { foo: 'bar' },
       },
     },
+    {
+      id: 'foo',
+      event: {
+        type: UserInputEventType.InputChangeEvent,
+        name: 'input',
+        value: 'bar',
+      },
+    },
   ])('does not throw for a valid user input param object', (value) => {
     expect(() => assertIsOnUserInputRequestArguments(value)).not.toThrow();
   });

diff --git a/packages/snaps-sdk/src/types/handlers/user-input.test.ts b/packages/snaps-sdk/src/types/handlers/user-input.test.ts
@@ -2,8 +2,9 @@ import { UserInputEventType } from './user-input';
 
 describe('UserInputEventType', () => {
   it('has the correct values', () => {
-    expect(Object.values(UserInputEventType)).toHaveLength(2);
+    expect(Object.values(UserInputEventType)).toHaveLength(3);
     expect(UserInputEventType.ButtonClickEvent).toBe('ButtonClickEvent');
     expect(UserInputEventType.FormSubmitEvent).toBe('FormSubmitEvent');
+    expect(UserInputEventType.InputChangeEvent).toBe('InputChangeEvent');
   });
 });
diff --git a/packages/snaps-sdk/src/types/handlers/user-input.ts b/packages/snaps-sdk/src/types/handlers/user-input.ts
@@ -11,14 +11,16 @@ import {
 
 /**
  * The type of user input event fired.
- * Currently only two events are supported:
+ * Currently only three events are supported:
  *
  * - `ButtonClickEvent` - A button has been clicked in the UI.
  * - `FormSubmitEvent` - A Form has been submitted in the UI.
+ * - `InputChangeEvent` - The value of an input field has changed in the UI.
  */
 export enum UserInputEventType {
   ButtonClickEvent = 'ButtonClickEvent',
   FormSubmitEvent = 'FormSubmitEvent',
+  InputChangeEvent = 'InputChangeEvent',
 }
 
 export const GenericEventStruct = object({
@@ -30,6 +32,7 @@ export const ButtonClickEventStruct = assign(
   GenericEventStruct,
   object({
     type: literal(UserInputEventType.ButtonClickEvent),
+    name: optional(string()),
   }),
 );
 
@@ -42,9 +45,19 @@ export const FormSubmitEventStruct = assign(
   }),
 );
 
+export const InputChangeEventStruct = assign(
+  GenericEventStruct,
+  object({
+    type: literal(UserInputEventType.InputChangeEvent),
+    name: string(),
+    value: string(),
+  }),
+);
+
 export const UserInputEventStruct = union([
   ButtonClickEventStruct,
   FormSubmitEventStruct,
+  InputChangeEventStruct,
 ]);
 
 /**