@metamask/snaps-sdk - npm Package Compare versions

Comparing version 4.0.1 to 4.1.0

CHANGELOG.md

@@ -9,2 +9,17 @@ # Changelog
 
+## [4.1.0]
+### Added
+- Add JSX support for custom UI ([#2258](https://github.com/MetaMask/snaps/pull/2258), [#2379](https://github.com/MetaMask/snaps/pull/2379))
+  - It's now possible to use JSX components from this package to build user
+    interfaces for Snaps.
+  - This package now exports a custom JSX runtime that can be used to render
+    JSX components in Snaps. It can be used with the `react-jsx` and
+    `react-jsxdev` JSX pragmas, using `@metamask/snaps-sdk` as import source.
+    - When using `@metamask/snaps-cli` to build Snaps, the Snaps JSX runtime
+      will be used automatically.
+
+### Changed
+- Deprecate legacy UI components ([#2388](https://github.com/MetaMask/snaps/pull/2388))
+- Bump `@metamask/providers` from `16.0.0` to `16.1.0` ([#2386](https://github.com/MetaMask/snaps/pull/2386))
+
 ## [4.0.1]
@@ -107,3 +122,4 @@ ### Fixed
 
-[Unreleased]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@4.0.1...HEAD
+[Unreleased]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@4.1.0...HEAD
+[4.1.0]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@4.0.1...@metamask/snaps-sdk@4.1.0
 [4.0.1]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@4.0.0...@metamask/snaps-sdk@4.0.1
@@ -110,0 +126,0 @@ [4.0.0]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@3.2.0...@metamask/snaps-sdk@4.0.0

dist/index.js

@@ -48,2 +48,3 @@ "use strict";
   ChainDisconnectedError: () => ChainDisconnectedError,
+  ComponentOrElementStruct: () => ComponentOrElementStruct,
   ComponentStruct: () => ComponentStruct,
@@ -94,3 +95,3 @@ CopyableStruct: () => CopyableStruct,
   address: () => address,
-  assert: () => import_utils7.assert,
+  assert: () => import_utils8.assert,
   assertIsComponent: () => assertIsComponent,
@@ -310,2 +311,7 @@ button: () => button,
 
+// src/internals/jsx.ts
+function nullUnion(structs) {
+  return union(structs);
+}
+
 // src/internals/svg.ts
@@ -342,3 +348,3 @@ var import_utils2 = require("@metamask/utils");
 // src/index.ts
-var import_utils7 = require("@metamask/utils");
+var import_utils8 = require("@metamask/utils");
 
@@ -817,8 +823,143 @@ // src/error-wrappers.ts
 // src/types/interface.ts
+var import_superstruct18 = require("superstruct");
+
+// src/jsx/validation.ts
+var import_utils7 = require("@metamask/utils");
 var import_superstruct17 = require("superstruct");
-var FormStateStruct = (0, import_superstruct17.record)((0, import_superstruct17.string)(), (0, import_superstruct17.nullable)((0, import_superstruct17.string)()));
-var InterfaceStateStruct = (0, import_superstruct17.record)(
-  (0, import_superstruct17.string)(),
-  (0, import_superstruct17.union)([FormStateStruct, (0, import_superstruct17.nullable)((0, import_superstruct17.string)())])
+var KeyStruct = nullUnion([(0, import_superstruct17.string)(), (0, import_superstruct17.number)()]);
+var StringElementStruct = maybeArray(
+  (0, import_superstruct17.string)()
 );
+var ElementStruct = (0, import_superstruct17.object)({
+  type: (0, import_superstruct17.string)(),
+  props: (0, import_superstruct17.record)((0, import_superstruct17.string)(), import_utils7.JsonStruct),
+  key: (0, import_superstruct17.nullable)(KeyStruct)
+});
+function maybeArray(struct) {
+  return nullUnion([struct, (0, import_superstruct17.array)(struct)]);
+}
+function element(name, props = {}) {
+  return (0, import_superstruct17.object)({
+    type: literal(name),
+    props: (0, import_superstruct17.object)(props),
+    key: (0, import_superstruct17.nullable)(KeyStruct)
+  });
+}
+var ButtonStruct2 = element("Button", {
+  children: StringElementStruct,
+  name: (0, import_superstruct17.optional)((0, import_superstruct17.string)()),
+  type: (0, import_superstruct17.optional)(nullUnion([literal("button"), literal("submit")])),
+  variant: (0, import_superstruct17.optional)(nullUnion([literal("primary"), literal("destructive")])),
+  disabled: (0, import_superstruct17.optional)((0, import_superstruct17.boolean)())
+});
+var InputStruct2 = element("Input", {
+  name: (0, import_superstruct17.string)(),
+  type: (0, import_superstruct17.optional)(
+    nullUnion([literal("text"), literal("password"), literal("number")])
+  ),
+  value: (0, import_superstruct17.optional)((0, import_superstruct17.string)()),
+  placeholder: (0, import_superstruct17.optional)((0, import_superstruct17.string)())
+});
+var FieldStruct = element("Field", {
+  label: (0, import_superstruct17.optional)((0, import_superstruct17.string)()),
+  error: (0, import_superstruct17.optional)((0, import_superstruct17.string)()),
+  children: InputStruct2
+});
+var FormStruct2 = element("Form", {
+  children: maybeArray(nullUnion([FieldStruct, ButtonStruct2])),
+  name: (0, import_superstruct17.string)()
+});
+var BoldStruct = element("Bold", {
+  children: maybeArray(
+    (0, import_superstruct17.nullable)(
+      nullUnion([
+        (0, import_superstruct17.string)(),
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        (0, import_superstruct17.lazy)(() => ItalicStruct)
+      ])
+    )
+  )
+});
+var ItalicStruct = element("Italic", {
+  children: maybeArray(
+    (0, import_superstruct17.nullable)(
+      nullUnion([
+        (0, import_superstruct17.string)(),
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        (0, import_superstruct17.lazy)(() => BoldStruct)
+      ])
+    )
+  )
+});
+var FormattingStruct = nullUnion([
+  BoldStruct,
+  ItalicStruct
+]);
+var AddressStruct2 = element("Address", {
+  address: import_utils7.HexChecksumAddressStruct
+});
+var BoxStruct = element("Box", {
+  children: maybeArray(
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    (0, import_superstruct17.nullable)((0, import_superstruct17.lazy)(() => JSXElementStruct))
+  )
+});
+var CopyableStruct2 = element("Copyable", {
+  value: (0, import_superstruct17.string)(),
+  sensitive: (0, import_superstruct17.optional)((0, import_superstruct17.boolean)())
+});
+var DividerStruct2 = element("Divider");
+var HeadingStruct2 = element("Heading", {
+  children: StringElementStruct
+});
+var ImageStruct2 = element("Image", {
+  src: (0, import_superstruct17.string)(),
+  alt: (0, import_superstruct17.optional)((0, import_superstruct17.string)())
+});
+var LinkStruct = element("Link", {
+  href: (0, import_superstruct17.string)(),
+  children: maybeArray((0, import_superstruct17.nullable)(nullUnion([FormattingStruct, (0, import_superstruct17.string)()])))
+});
+var TextStruct2 = element("Text", {
+  children: maybeArray(
+    (0, import_superstruct17.nullable)(nullUnion([(0, import_superstruct17.string)(), BoldStruct, ItalicStruct, LinkStruct]))
+  )
+});
+var RowStruct2 = element("Row", {
+  label: (0, import_superstruct17.string)(),
+  children: nullUnion([AddressStruct2, ImageStruct2, TextStruct2]),
+  variant: (0, import_superstruct17.optional)(
+    nullUnion([literal("default"), literal("warning"), literal("error")])
+  )
+});
+var SpinnerStruct2 = element("Spinner");
+var JSXElementStruct = nullUnion([
+  ButtonStruct2,
+  InputStruct2,
+  FieldStruct,
+  FormStruct2,
+  BoldStruct,
+  ItalicStruct,
+  AddressStruct2,
+  BoxStruct,
+  CopyableStruct2,
+  DividerStruct2,
+  HeadingStruct2,
+  ImageStruct2,
+  LinkStruct,
+  RowStruct2,
+  SpinnerStruct2,
+  TextStruct2
+]);
+
+// src/types/interface.ts
+var FormStateStruct = (0, import_superstruct18.record)((0, import_superstruct18.string)(), (0, import_superstruct18.nullable)((0, import_superstruct18.string)()));
+var InterfaceStateStruct = (0, import_superstruct18.record)(
+  (0, import_superstruct18.string)(),
+  (0, import_superstruct18.union)([FormStateStruct, (0, import_superstruct18.nullable)((0, import_superstruct18.string)())])
+);
+var ComponentOrElementStruct = (0, import_superstruct18.union)([
+  ComponentStruct,
+  JSXElementStruct
+]);
 //# sourceMappingURL=index.js.map

dist/types/internals/index.d.ts

@@ -5,2 +5,3 @@ export * from './error-wrappers';
 export * from './structs';
+export * from './jsx';
 export * from './svg';

dist/types/types/handlers/home-page.d.ts

@@ -1,2 +0,2 @@
-import type { Component } from '../../ui';
+import type { ComponentOrElement } from '..';
 /**
@@ -19,5 +19,5 @@ * The `onHomePage` handler. This is called when the user navigates to the
 export declare type OnHomePageResponse = {
-    content: Component;
+    content: ComponentOrElement;
 } | {
     id: string;
 };

dist/types/types/handlers/transaction.d.ts

@@ -0,3 +1,3 @@
+import type { ComponentOrElement } from '..';
 import type { EnumToUnion } from '../../internals';
-import type { Component } from '../../ui';
 import type { ChainId } from '../caip';
@@ -109,3 +109,3 @@ /**
 export declare type OnTransactionResponse = {
-    content: Component;
+    content: ComponentOrElement;
     severity?: EnumToUnion<SeverityLevel>;
@@ -112,0 +112,0 @@ } | {

dist/types/types/interface.d.ts

 import type { Infer } from 'superstruct';
+import type { JSXElement } from '../jsx';
+import type { Component } from '../ui';
 /**
@@ -11,1 +13,71 @@ * To avoid typing problems with the interface state when manipulating it we have to differentiate the state of
 export declare type InterfaceState = Infer<typeof InterfaceStateStruct>;
+export declare type ComponentOrElement = Component | JSXElement;
+export declare const ComponentOrElementStruct: import("superstruct").Struct<JSXElement | {
+    value: string;
+    type: import("../ui").NodeType.Copyable;
+    sensitive?: boolean | undefined;
+} | {
+    type: import("../ui").NodeType.Divider;
+} | {
+    value: string;
+    type: import("../ui").NodeType.Heading;
+} | {
+    value: string;
+    type: import("../ui").NodeType.Image;
+} | import("../ui").Panel | {
+    type: import("../ui").NodeType.Spinner;
+} | {
+    value: string;
+    type: import("../ui").NodeType.Text;
+    markdown?: boolean | undefined;
+} | {
+    value: `0x${string}`;
+    type: import("../ui").NodeType.Address;
+} | {
+    value: {
+        value: string;
+        type: import("../ui").NodeType.Image;
+    } | {
+        value: string;
+        type: import("../ui").NodeType.Text;
+        markdown?: boolean | undefined;
+    } | {
+        value: `0x${string}`;
+        type: import("../ui").NodeType.Address;
+    };
+    type: import("../ui").NodeType.Row;
+    label: string;
+    variant?: "default" | "warning" | "critical" | undefined;
+} | {
+    type: import("../ui").NodeType.Input;
+    name: string;
+    value?: string | undefined;
+    error?: string | undefined;
+    placeholder?: string | undefined;
+    label?: string | undefined;
+    inputType?: "number" | "text" | "password" | undefined;
+} | {
+    value: string;
+    type: import("../ui").NodeType.Button;
+    name?: string | undefined;
+    variant?: "primary" | "secondary" | undefined;
+    buttonType?: "button" | "submit" | undefined;
+} | {
+    type: import("../ui").NodeType.Form;
+    name: string;
+    children: ({
+        type: import("../ui").NodeType.Input;
+        name: string;
+        value?: string | undefined;
+        error?: string | undefined;
+        placeholder?: string | undefined;
+        label?: string | undefined;
+        inputType?: "number" | "text" | "password" | undefined;
+    } | {
+        value: string;
+        type: import("../ui").NodeType.Button;
+        name?: string | undefined;
+        variant?: "primary" | "secondary" | undefined;
+        buttonType?: "button" | "submit" | undefined;
+    })[];
+}, null>;

dist/types/types/methods/create-interface.d.ts

@@ -1,2 +0,2 @@
-import type { Component } from '../../ui';
+import type { ComponentOrElement } from '..';
 /**
@@ -8,3 +8,3 @@ * The request parameters for the `snap_createInterface` method.
 export declare type CreateInterfaceParams = {
-    ui: Component;
+    ui: ComponentOrElement;
 };
@@ -11,0 +11,0 @@ /**

dist/types/types/methods/dialog.d.ts

@@ -0,3 +1,3 @@
+import type { ComponentOrElement } from '..';
 import type { EnumToUnion } from '../../internals';
-import type { Component } from '../../ui';
 /**
@@ -25,3 +25,3 @@ * The type of dialog to display.
     type: EnumToUnion<DialogType.Alert>;
-    content: Component;
+    content: ComponentOrElement;
 } | {
@@ -40,3 +40,3 @@ type: EnumToUnion<DialogType.Alert>;
     type: EnumToUnion<DialogType.Confirmation>;
-    content: Component;
+    content: ComponentOrElement;
 } | {
@@ -57,3 +57,3 @@ type: EnumToUnion<DialogType.Confirmation>;
     type: EnumToUnion<DialogType.Prompt>;
-    content: Component;
+    content: ComponentOrElement;
     placeholder?: string;
@@ -60,0 +60,0 @@ } | {

dist/types/types/methods/update-interface.d.ts

@@ -1,2 +0,2 @@
-import type { Component } from '../../ui';
+import type { ComponentOrElement } from '..';
 /**
@@ -10,3 +10,3 @@ * The request parameters for the `snap_createInterface` method.
     id: string;
-    ui: Component;
+    ui: ComponentOrElement;
 };
@@ -13,0 +13,0 @@ /**

dist/types/ui/components/address.d.ts

@@ -24,2 +24,4 @@ import type { Infer } from 'superstruct';
  * @returns The address node as an object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
@@ -26,0 +28,0 @@ * const node = address({ value: '0x4bbeeb066ed09b7aed07bf39eee0460dfa261520' });

dist/types/ui/components/button.d.ts

@@ -43,2 +43,4 @@ import type { Infer } from 'superstruct';
  * @returns The text node as object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
@@ -45,0 +47,0 @@ * ```typescript

dist/types/ui/components/copyable.d.ts

@@ -34,2 +34,4 @@ import type { Infer } from 'superstruct';
  * @returns A {@link Copyable} component.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
@@ -36,0 +38,0 @@ * const node = copyable('Hello, world!');

dist/types/ui/components/divider.d.ts

@@ -16,2 +16,4 @@ import type { Infer } from 'superstruct';
  * @returns The divider node as object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
@@ -18,0 +20,0 @@ * const node = divider();

dist/types/ui/components/form.d.ts

@@ -8,5 +8,5 @@ import type { Infer } from 'superstruct';
     error?: string | undefined;
-    inputType?: "number" | "text" | "password" | undefined;
     placeholder?: string | undefined;
     label?: string | undefined;
+    inputType?: "number" | "text" | "password" | undefined;
 } | {
@@ -31,5 +31,5 @@ value: string;
         error?: string | undefined;
-        inputType?: "number" | "text" | "password" | undefined;
         placeholder?: string | undefined;
         label?: string | undefined;
+        inputType?: "number" | "text" | "password" | undefined;
     } | {
@@ -49,5 +49,5 @@ value: string;
         error?: string | undefined;
-        inputType?: "number" | "text" | "password" | undefined;
         placeholder?: string | undefined;
         label?: string | undefined;
+        inputType?: "number" | "text" | "password" | undefined;
     } | {
@@ -64,5 +64,5 @@ value: string;
         error?: string | undefined;
-        inputType?: "number" | "text" | "password" | undefined;
         placeholder?: string | undefined;
         label?: string | undefined;
+        inputType?: "number" | "text" | "password" | undefined;
     } | {
@@ -94,2 +94,4 @@ value: string;
  * @returns The form node as object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
@@ -114,5 +116,5 @@ * const node = form({
         error?: string | undefined;
-        inputType?: "number" | "text" | "password" | undefined;
         placeholder?: string | undefined;
         label?: string | undefined;
+        inputType?: "number" | "text" | "password" | undefined;
     } | {
@@ -130,5 +132,5 @@ value: string;
     error?: string | undefined;
-    inputType?: "number" | "text" | "password" | undefined;
     placeholder?: string | undefined;
     label?: string | undefined;
+    inputType?: "number" | "text" | "password" | undefined;
 } | {
@@ -148,5 +150,5 @@ value: string;
         error?: string | undefined;
-        inputType?: "number" | "text" | "password" | undefined;
         placeholder?: string | undefined;
         label?: string | undefined;
+        inputType?: "number" | "text" | "password" | undefined;
     } | {
@@ -153,0 +155,0 @@ value: string;

dist/types/ui/components/heading.d.ts

@@ -26,2 +26,4 @@ import type { Infer } from 'superstruct';
  * @returns The heading node as object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
@@ -28,0 +30,0 @@ * const node = heading({ value: 'Hello, world!' });

dist/types/ui/components/image.d.ts

@@ -32,2 +32,4 @@ import type { Infer } from 'superstruct';
  * embedding them as data URLs in the SVG.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
@@ -34,0 +36,0 @@ * const node = image({ value: '<svg />' });

dist/types/ui/components/input.d.ts

@@ -17,5 +17,5 @@ import type { Infer } from 'superstruct';
     error?: string | undefined;
-    inputType?: "number" | "text" | "password" | undefined;
     placeholder?: string | undefined;
     label?: string | undefined;
+    inputType?: "number" | "text" | "password" | undefined;
 }, {
@@ -54,2 +54,4 @@ type: import("superstruct").Struct<NodeType.Input, NodeType.Input>;
  * @returns The input node as an object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
@@ -66,5 +68,5 @@ * const node = input('myInput');
     error?: string | undefined;
-    inputType?: "number" | "text" | "password" | undefined;
     placeholder?: string | undefined;
     label?: string | undefined;
+    inputType?: "number" | "text" | "password" | undefined;
 }, "type">]) => {
@@ -75,5 +77,5 @@ type: NodeType.Input;
     error?: string | undefined;
-    inputType?: "number" | "text" | "password" | undefined;
     placeholder?: string | undefined;
     label?: string | undefined;
+    inputType?: "number" | "text" | "password" | undefined;
 };

dist/types/ui/components/panel.d.ts

@@ -8,36 +8,4 @@ import type { Infer, Struct } from 'superstruct';
     type: string;
-    children: (Panel | {
-        type: NodeType.Input;
-        name: string;
-        value?: string | undefined;
-        error?: string | undefined;
-        inputType?: "number" | "text" | "password" | undefined;
-        placeholder?: string | undefined;
-        label?: string | undefined;
-    } | {
+    children: ({
         value: string;
-        type: NodeType.Button;
-        name?: string | undefined;
-        variant?: "primary" | "secondary" | undefined;
-        buttonType?: "button" | "submit" | undefined;
-    } | {
-        type: NodeType.Form;
-        name: string;
-        children: ({
-            type: NodeType.Input;
-            name: string;
-            value?: string | undefined;
-            error?: string | undefined;
-            inputType?: "number" | "text" | "password" | undefined;
-            placeholder?: string | undefined;
-            label?: string | undefined;
-        } | {
-            value: string;
-            type: NodeType.Button;
-            name?: string | undefined;
-            variant?: "primary" | "secondary" | undefined;
-            buttonType?: "button" | "submit" | undefined;
-        })[];
-    } | {
-        value: string;
         type: NodeType.Copyable;
@@ -53,3 +21,3 @@ sensitive?: boolean | undefined;
         type: NodeType.Image;
-    } | {
+    } | Panel | {
         type: NodeType.Spinner;
@@ -78,5 +46,3 @@ } | {
         variant?: "default" | "warning" | "critical" | undefined;
-    })[];
-}, {
-    children: Struct<(Panel | {
+    } | {
         type: NodeType.Input;
@@ -86,5 +52,5 @@ name: string;
         error?: string | undefined;
-        inputType?: "number" | "text" | "password" | undefined;
         placeholder?: string | undefined;
         label?: string | undefined;
+        inputType?: "number" | "text" | "password" | undefined;
     } | {
@@ -104,5 +70,5 @@ value: string;
             error?: string | undefined;
-            inputType?: "number" | "text" | "password" | undefined;
             placeholder?: string | undefined;
             label?: string | undefined;
+            inputType?: "number" | "text" | "password" | undefined;
         } | {
@@ -115,3 +81,5 @@ value: string;
         })[];
-    } | {
+    })[];
+}, {
+    children: Struct<({
         value: string;
@@ -128,3 +96,3 @@ type: NodeType.Copyable;
         type: NodeType.Image;
-    } | {
+    } | Panel | {
         type: NodeType.Spinner;
@@ -153,3 +121,3 @@ } | {
         variant?: "default" | "warning" | "critical" | undefined;
-    })[], Struct<Panel | {
+    } | {
         type: NodeType.Input;
@@ -159,5 +127,5 @@ name: string;
         error?: string | undefined;
-        inputType?: "number" | "text" | "password" | undefined;
         placeholder?: string | undefined;
         label?: string | undefined;
+        inputType?: "number" | "text" | "password" | undefined;
     } | {
@@ -177,5 +145,5 @@ value: string;
             error?: string | undefined;
-            inputType?: "number" | "text" | "password" | undefined;
             placeholder?: string | undefined;
             label?: string | undefined;
+            inputType?: "number" | "text" | "password" | undefined;
         } | {
@@ -188,3 +156,3 @@ value: string;
         })[];
-    } | {
+    })[], Struct<{
         value: string;
@@ -201,3 +169,3 @@ type: NodeType.Copyable;
         type: NodeType.Image;
-    } | {
+    } | Panel | {
         type: NodeType.Spinner;
@@ -226,2 +194,34 @@ } | {
         variant?: "default" | "warning" | "critical" | undefined;
+    } | {
+        type: NodeType.Input;
+        name: string;
+        value?: string | undefined;
+        error?: string | undefined;
+        placeholder?: string | undefined;
+        label?: string | undefined;
+        inputType?: "number" | "text" | "password" | undefined;
+    } | {
+        value: string;
+        type: NodeType.Button;
+        name?: string | undefined;
+        variant?: "primary" | "secondary" | undefined;
+        buttonType?: "button" | "submit" | undefined;
+    } | {
+        type: NodeType.Form;
+        name: string;
+        children: ({
+            type: NodeType.Input;
+            name: string;
+            value?: string | undefined;
+            error?: string | undefined;
+            placeholder?: string | undefined;
+            label?: string | undefined;
+            inputType?: "number" | "text" | "password" | undefined;
+        } | {
+            value: string;
+            type: NodeType.Button;
+            name?: string | undefined;
+            variant?: "primary" | "secondary" | undefined;
+            buttonType?: "button" | "submit" | undefined;
+        })[];
     }, null>>;
@@ -262,2 +262,4 @@ type: Struct<string, null>;
  * @returns The panel node as object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
@@ -276,36 +278,4 @@ * const node = panel({
  */
-export declare const panel: (...args: [Omit<Panel, "type">] | (Panel | {
-    type: NodeType.Input;
-    name: string;
-    value?: string | undefined;
-    error?: string | undefined;
-    inputType?: "number" | "text" | "password" | undefined;
-    placeholder?: string | undefined;
-    label?: string | undefined;
-} | {
+export declare const panel: (...args: [Omit<Panel, "type">] | ({
     value: string;
-    type: NodeType.Button;
-    name?: string | undefined;
-    variant?: "primary" | "secondary" | undefined;
-    buttonType?: "button" | "submit" | undefined;
-} | {
-    type: NodeType.Form;
-    name: string;
-    children: ({
-        type: NodeType.Input;
-        name: string;
-        value?: string | undefined;
-        error?: string | undefined;
-        inputType?: "number" | "text" | "password" | undefined;
-        placeholder?: string | undefined;
-        label?: string | undefined;
-    } | {
-        value: string;
-        type: NodeType.Button;
-        name?: string | undefined;
-        variant?: "primary" | "secondary" | undefined;
-        buttonType?: "button" | "submit" | undefined;
-    })[];
-} | {
-    value: string;
     type: NodeType.Copyable;
@@ -321,3 +291,3 @@ sensitive?: boolean | undefined;
     type: NodeType.Image;
-} | {
+} | Panel | {
     type: NodeType.Spinner;
@@ -346,4 +316,3 @@ } | {
     variant?: "default" | "warning" | "critical" | undefined;
-})[][]) => Panel;
-export declare const ComponentStruct: Struct<Panel | {
+} | {
     type: NodeType.Input;
@@ -353,5 +322,5 @@ name: string;
     error?: string | undefined;
-    inputType?: "number" | "text" | "password" | undefined;
     placeholder?: string | undefined;
     label?: string | undefined;
+    inputType?: "number" | "text" | "password" | undefined;
 } | {
@@ -371,5 +340,5 @@ value: string;
         error?: string | undefined;
-        inputType?: "number" | "text" | "password" | undefined;
         placeholder?: string | undefined;
         label?: string | undefined;
+        inputType?: "number" | "text" | "password" | undefined;
     } | {
@@ -382,3 +351,4 @@ value: string;
     })[];
-} | {
+})[][]) => Panel;
+export declare const ComponentStruct: Struct<{
     value: string;
@@ -395,3 +365,3 @@ type: NodeType.Copyable;
     type: NodeType.Image;
-} | {
+} | Panel | {
     type: NodeType.Spinner;
@@ -420,2 +390,34 @@ } | {
     variant?: "default" | "warning" | "critical" | undefined;
+} | {
+    type: NodeType.Input;
+    name: string;
+    value?: string | undefined;
+    error?: string | undefined;
+    placeholder?: string | undefined;
+    label?: string | undefined;
+    inputType?: "number" | "text" | "password" | undefined;
+} | {
+    value: string;
+    type: NodeType.Button;
+    name?: string | undefined;
+    variant?: "primary" | "secondary" | undefined;
+    buttonType?: "button" | "submit" | undefined;
+} | {
+    type: NodeType.Form;
+    name: string;
+    children: ({
+        type: NodeType.Input;
+        name: string;
+        value?: string | undefined;
+        error?: string | undefined;
+        placeholder?: string | undefined;
+        label?: string | undefined;
+        inputType?: "number" | "text" | "password" | undefined;
+    } | {
+        value: string;
+        type: NodeType.Button;
+        name?: string | undefined;
+        variant?: "primary" | "secondary" | undefined;
+        buttonType?: "button" | "submit" | undefined;
+    })[];
 }, null>;
@@ -422,0 +424,0 @@ /**

dist/types/ui/components/row.d.ts

@@ -58,2 +58,4 @@ import type { Infer } from 'superstruct';
  * @returns The row node as an object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
@@ -60,0 +62,0 @@ * const node = row({ label: 'Address', value: address('0x4bbeeb066ed09b7aed07bf39eee0460dfa261520') });

dist/types/ui/components/spinner.d.ts

@@ -17,2 +17,4 @@ import type { Infer } from 'superstruct';
  * @returns The spinner node as object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
@@ -19,0 +21,0 @@ * const node = spinner();

dist/types/ui/components/text.d.ts

@@ -32,2 +32,4 @@ import type { Infer } from 'superstruct';
  * @returns The text node as object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
@@ -34,0 +36,0 @@ * const node = text({ value: 'Hello, world!' });

dist/types/ui/index.d.ts

 export * from './components';
 export * from './component';
-export type { NodeWithChildren } from './nodes';
 export { NodeType } from './nodes';

dist/types/ui/nodes.d.ts

 import type { Infer } from 'superstruct';
-import type { Form, Panel } from './components';
 /**
@@ -23,6 +22,2 @@ * The supported node types. This is based on SIP-7.
 /**
- * The nodes with a children.
- */
-export declare type NodeWithChildren = Panel | Form;
-/**
  * @internal
@@ -29,0 +24,0 @@ */

package.json

 {
   "name": "@metamask/snaps-sdk",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "repository": {
@@ -11,6 +11,21 @@ "type": "git",
     ".": {
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/types/index.d.ts"
+      "require": "./dist/index.js"
     },
+    "./jsx": {
+      "types": "./dist/types/jsx/index.d.ts",
+      "import": "./dist/jsx/index.mjs",
+      "require": "./dist/jsx/index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/types/jsx/jsx-runtime.d.ts",
+      "import": "./dist/jsx/jsx-runtime.mjs",
+      "require": "./dist/jsx/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/types/jsx/jsx-dev-runtime.d.ts",
+      "import": "./dist/jsx/jsx-dev-runtime.mjs",
+      "require": "./dist/jsx/jsx-dev-runtime.js"
+    },
     "./package.json": "./package.json"
@@ -22,3 +37,6 @@ },
   "files": [
-    "dist"
+    "dist",
+    "jsx.js",
+    "jsx-dev-runtime.js",
+    "jsx-runtime.js"
   ],
@@ -44,3 +62,3 @@ "scripts": {
     "@metamask/key-tree": "^9.0.0",
-    "@metamask/providers": "^16.0.0",
+    "@metamask/providers": "^16.1.0",
     "@metamask/rpc-errors": "^6.2.1",
@@ -47,0 +65,0 @@ "@metamask/utils": "^8.3.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

671247

increased by58.91%

Number of package files

114

increased by54.05%

Lines of code

7408

increased by44.94%

Dependency changes

• Updated@metamask/providers@^16.1.0