@metamask/snaps-sdk 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -6,6 +6,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [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]
+### Fixed
+- Allow `null` in `FormSubmitEventStruct` form state ([#2333](https://github.com/MetaMask/snaps/pull/2333))
+
 ## [4.0.0]
 ### Removed
 - **BREAKING:** Remove broken `ethereum` properties ([#2296](https://github.com/MetaMask/snaps/pull/2296))
@@ -99,7 +118,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Initial release of this package.
 
-[Unreleased]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@4.0.0...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
 [4.0.0]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@3.2.0...@metamask/snaps-sdk@4.0.0
 [3.2.0]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@3.1.1...@metamask/snaps-sdk@3.2.0
 [3.1.1]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@3.1.0...@metamask/snaps-sdk@3.1.1

package/dist/index.js

@@ -45,6 +45,7 @@ __export(src_exports, {
   ButtonType: () => ButtonType,
   ButtonVariant: () => ButtonVariant,
   ChainDisconnectedError: () => ChainDisconnectedError,
+  ComponentOrElementStruct: () => ComponentOrElementStruct,
   ComponentStruct: () => ComponentStruct,
   CopyableStruct: () => CopyableStruct,
   DialogType: () => DialogType,
@@ -90,7 +91,7 @@ __export(src_exports, {
   UserInputEventType: () => UserInputEventType,
   UserRejectedRequestError: () => UserRejectedRequestError,
   address: () => address,
-  assert: () => import_utils7.assert,
+  assert: () => import_utils8.assert,
   assertIsComponent: () => assertIsComponent,
   button: () => button,
   copyable: () => copyable,
@@ -305,6 +306,11 @@ function enumValue(constant) {
   return literal(constant);
 }
 
+// src/internals/jsx.ts
+function nullUnion(structs) {
+  return union(structs);
+}
+
 // src/internals/svg.ts
 var import_utils2 = require("@metamask/utils");
 var import_fast_xml_parser = require("fast-xml-parser");
@@ -336,7 +342,7 @@ function isSvg(svg2) {
 }
 
 // src/index.ts
-var import_utils7 = require("@metamask/utils");
+var import_utils8 = require("@metamask/utils");
 
 // src/error-wrappers.ts
 var import_rpc_errors = require("@metamask/rpc-errors");
@@ -760,7 +766,7 @@ var FormSubmitEventStruct = (0, import_superstruct16.assign)(
   GenericEventStruct,
   (0, import_superstruct16.object)({
     type: (0, import_superstruct16.literal)("FormSubmitEvent" /* FormSubmitEvent */),
-    value: (0, import_superstruct16.record)((0, import_superstruct16.string)(), (0, import_superstruct16.string)()),
+    value: (0, import_superstruct16.record)((0, import_superstruct16.string)(), (0, import_superstruct16.nullable)((0, import_superstruct16.string)())),
     name: (0, import_superstruct16.string)()
   })
 );
@@ -810,10 +816,145 @@ var NotificationType = /* @__PURE__ */ ((NotificationType2) => {
 })(NotificationType || {});
 
 // 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