@metamask/snaps-sdk 1.2.0 → 1.3.1

package/CHANGELOG.md

@@ -6,6 +6,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.1]
+### Fixed
+- Export error wrappers ([#2043](https://github.com/MetaMask/snaps/pull/2043))
+
+## [1.3.0]
+### Added
+- Add image fetching utility functions ([#1995](https://github.com/MetaMask/snaps/pull/1995))
+  - This adds two functions:
+    - `getImageComponent` to get an `image` component from a PNG or JPEG URL.
+    - `getImageData` to get a base64 data string, which can be embedded in an SVG image.
+
 ## [1.2.0]
 ### Added
 - Add `row` and `address` component ([#1968](https://github.com/MetaMask/snaps/pull/1968))
@@ -22,7 +33,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@1.2.0...HEAD
+[Unreleased]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@1.3.1...HEAD
+[1.3.1]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@1.3.0...@metamask/snaps-sdk@1.3.1
+[1.3.0]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@1.2.0...@metamask/snaps-sdk@1.3.0
 [1.2.0]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@1.1.0...@metamask/snaps-sdk@1.2.0
 [1.1.0]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@1.0.0...@metamask/snaps-sdk@1.1.0
 [1.0.0]: https://github.com/MetaMask/snaps/releases/tag/@metamask/snaps-sdk@1.0.0

package/dist/cjs/images.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getImageData: function() {
+        return getImageData;
+    },
+    getImageComponent: function() {
+        return getImageComponent;
+    }
+});
+const _utils = require("@metamask/utils");
+const _ui = require("./ui");
+/**
+ * Get raw image data from a URL.
+ *
+ * @param url - The URL to get the image data from.
+ * @param options - The options to use when fetching the image data. This is
+ * passed directly to `fetch`.
+ * @returns A promise that resolves to the image data as a blob.
+ */ async function getRawImageData(url, options) {
+    if (typeof fetch !== 'function') {
+        throw new Error(`Failed to fetch image data from "${url}": Using this function requires the "endowment:network-access" permission.`);
+    }
+    return fetch(url, options).then(async (response)=>{
+        if (!response.ok) {
+            throw new Error(`Failed to fetch image data from "${url}": ${response.status} ${response.statusText}`);
+        }
+        const blob = await response.blob();
+        (0, _utils.assert)(blob.type === 'image/jpeg' || blob.type === 'image/png', 'Expected image data to be a JPEG or PNG image.');
+        return blob;
+    });
+}
+async function getImageData(url, options) {
+    const blob = await getRawImageData(url, options);
+    const bytes = new Uint8Array(await blob.arrayBuffer());
+    return `data:${blob.type};base64,${(0, _utils.bytesToBase64)(bytes)}`;
+}
+async function getImageComponent(url, { width, height = width, request }) {
+    (0, _utils.assert)(typeof width === 'number' && width > 0, 'Expected width to be a number greater than 0.');
+    (0, _utils.assert)(typeof height === 'number' && height > 0, 'Expected height to be a number greater than 0.');
+    const imageData = await getImageData(url, request);
+    const size = `width="${width}" height="${height}"`;
+    return (0, _ui.image)(`<svg ${size.trim()} xmlns="http://www.w3.org/2000/svg"><image ${size.trim()} href="${imageData}" /></svg>`);
+}
+
+//# sourceMappingURL=images.js.map

package/dist/cjs/images.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/images.ts"],"sourcesContent":["import { assert, bytesToBase64 } from '@metamask/utils';\n\nimport { image } from './ui';\n\n/**\n * Get raw image data from a URL.\n *\n * @param url - The URL to get the image data from.\n * @param options - The options to use when fetching the image data. This is\n * passed directly to `fetch`.\n * @returns A promise that resolves to the image data as a blob.\n */\nasync function getRawImageData(url: string, options?: RequestInit) {\n  if (typeof fetch !== 'function') {\n    throw new Error(\n      `Failed to fetch image data from \"${url}\": Using this function requires the \"endowment:network-access\" permission.`,\n    );\n  }\n\n  return fetch(url, options).then(async (response) => {\n    if (!response.ok) {\n      throw new Error(\n        `Failed to fetch image data from \"${url}\": ${response.status} ${response.statusText}`,\n      );\n    }\n\n    const blob = await response.blob();\n    assert(\n      blob.type === 'image/jpeg' || blob.type === 'image/png',\n      'Expected image data to be a JPEG or PNG image.',\n    );\n\n    return blob;\n  });\n}\n\n/**\n * Get image data as data-string from a URL. This is useful for embedding images\n * inside of SVGs. Only JPEG and PNG images are supported.\n *\n * Note: This function uses `fetch` to get the image data. This means that using\n * it requires the `endowment:network-access` permission.\n *\n * @example\n * const imageData = await getImageData('https://cataas.com/cat');\n * const svg = `\n *   <svg width=\"100\" height=\"100\" xmlns=\"http://www.w3.org/2000/svg\">\n *     <image href=\"${imageData}\" />\n *   </svg>\n * `;\n *\n * // Render the SVG in a Snap UI.\n * const ui = image(svg);\n * @param url - The URL to get the image data from.\n * @param options - The options to use when fetching the image data. This is\n * passed directly to `fetch`.\n * @returns A promise that resolves to the image data as a data-string.\n */\nexport async function getImageData(url: string, options?: RequestInit) {\n  const blob = await getRawImageData(url, options);\n  const bytes = new Uint8Array(await blob.arrayBuffer());\n\n  return `data:${blob.type};base64,${bytesToBase64(bytes)}`;\n}\n\n/**\n * Options for getting an SVG image element from a URL.\n *\n * @property width - The width of the image.\n * @property height - The height of the image. If this is not provided, the\n * width will be used as the height.\n * @property request - The options to use when fetching the image data. This is\n * passed directly to `fetch`.\n */\nexport type ImageOptions = {\n  width: number;\n  height?: number;\n  request?: RequestInit;\n};\n\n/**\n * Get an image component from a URL. This is useful for embedding images inside\n * Snap UIs. Only JPEG and PNG images are supported.\n *\n * Note: This function uses `fetch` to get the image data. This means that using\n * it requires the `endowment:network-access` permission.\n *\n * @example\n * const component = await getImage('https://cataas.com/cat');\n *\n * return await snap.request({\n *   method: 'snap_dialog',\n *   params: {\n *     type: 'alert',\n *     content: panel([\n *       component,\n *     ]),\n *   },\n * });\n * @param url - The URL to get the image data from.\n * @param options - The options to use when fetching and rendering the image.\n * @param options.width - The width of the image.\n * @param options.height - The height of the image. If this is not provided, the\n * width will be used as the height.\n * @param options.request - The options to use when fetching the image data.\n * This is passed directly to `fetch`.\n * @returns A promise that resolves to the image data as an image component.\n */\nexport async function getImageComponent(\n  url: string,\n  { width, height = width, request }: ImageOptions,\n) {\n  assert(\n    typeof width === 'number' && width > 0,\n    'Expected width to be a number greater than 0.',\n  );\n\n  assert(\n    typeof height === 'number' && height > 0,\n    'Expected height to be a number greater than 0.',\n  );\n\n  const imageData = await getImageData(url, request);\n  const size = `width=\"${width}\" height=\"${height}\"`;\n\n  return image(\n    `<svg ${size.trim()} xmlns=\"http://www.w3.org/2000/svg\"><image ${size.trim()} href=\"${imageData}\" /></svg>`,\n  );\n}\n"],"names":["getImageData","getImageComponent","getRawImageData","url","options","fetch","Error","then","response","ok","status","statusText","blob","assert","type","bytes","Uint8Array","arrayBuffer","bytesToBase64","width","height","request","imageData","size","image","trim"],"mappings":";;;;;;;;;;;IA0DsBA,YAAY;eAAZA;;IAkDAC,iBAAiB;eAAjBA;;;uBA5GgB;oBAEhB;AAEtB;;;;;;;CAOC,GACD,eAAeC,gBAAgBC,GAAW,EAAEC,OAAqB;IAC/D,IAAI,OAAOC,UAAU,YAAY;QAC/B,MAAM,IAAIC,MACR,CAAC,iCAAiC,EAAEH,IAAI,0EAA0E,CAAC;IAEvH;IAEA,OAAOE,MAAMF,KAAKC,SAASG,IAAI,CAAC,OAAOC;QACrC,IAAI,CAACA,SAASC,EAAE,EAAE;YAChB,MAAM,IAAIH,MACR,CAAC,iCAAiC,EAAEH,IAAI,GAAG,EAAEK,SAASE,MAAM,CAAC,CAAC,EAAEF,SAASG,UAAU,CAAC,CAAC;QAEzF;QAEA,MAAMC,OAAO,MAAMJ,SAASI,IAAI;QAChCC,IAAAA,aAAM,EACJD,KAAKE,IAAI,KAAK,gBAAgBF,KAAKE,IAAI,KAAK,aAC5C;QAGF,OAAOF;IACT;AACF;AAwBO,eAAeZ,aAAaG,GAAW,EAAEC,OAAqB;IACnE,MAAMQ,OAAO,MAAMV,gBAAgBC,KAAKC;IACxC,MAAMW,QAAQ,IAAIC,WAAW,MAAMJ,KAAKK,WAAW;IAEnD,OAAO,CAAC,KAAK,EAAEL,KAAKE,IAAI,CAAC,QAAQ,EAAEI,IAAAA,oBAAa,EAACH,OAAO,CAAC;AAC3D;AA6CO,eAAed,kBACpBE,GAAW,EACX,EAAEgB,KAAK,EAAEC,SAASD,KAAK,EAAEE,OAAO,EAAgB;IAEhDR,IAAAA,aAAM,EACJ,OAAOM,UAAU,YAAYA,QAAQ,GACrC;IAGFN,IAAAA,aAAM,EACJ,OAAOO,WAAW,YAAYA,SAAS,GACvC;IAGF,MAAME,YAAY,MAAMtB,aAAaG,KAAKkB;IAC1C,MAAME,OAAO,CAAC,OAAO,EAAEJ,MAAM,UAAU,EAAEC,OAAO,CAAC,CAAC;IAElD,OAAOI,IAAAA,SAAK,EACV,CAAC,KAAK,EAAED,KAAKE,IAAI,GAAG,2CAA2C,EAAEF,KAAKE,IAAI,GAAG,OAAO,EAAEH,UAAU,UAAU,CAAC;AAE/G"}

package/dist/cjs/index.js

@@ -33,10 +33,16 @@ _export(exports, {
     },
     enumValue: function() {
         return _internals.enumValue;
+    },
+    assert: function() {
+        return _utils.assert;
     }
 });
 const _internals = require("./internals");
+const _utils = require("@metamask/utils");
 _export_star(require("./errors"), exports);
+_export_star(require("./error-wrappers"), exports);
+_export_star(require("./images"), exports);
 _export_star(require("./types"), exports);
 _export_star(require("./ui"), exports);
 function _export_star(from, to) {

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["// Only internals that are used by other Snaps packages should be exported here.\nexport type { EnumToUnion } from './internals';\nexport {\n  getErrorData,\n  getErrorMessage,\n  getErrorStack,\n  SNAP_ERROR_CODE,\n  SNAP_ERROR_MESSAGE,\n  literal,\n  union,\n  enumValue,\n} from './internals';\n\n// Re-exported from `@metamask/utils` for convenience.\nexport type {\n  Json,\n  JsonRpcError,\n  JsonRpcRequest,\n  JsonRpcParams,\n} from '@metamask/utils';\n\nexport * from './errors';\nexport * from './types';\nexport * from './ui';\n"],"names":["getErrorData","getErrorMessage","getErrorStack","SNAP_ERROR_CODE","SNAP_ERROR_MESSAGE","literal","union","enumValue"],"mappings":"AAAA,gFAAgF;;;;;;;;;;;;IAG9EA,YAAY;eAAZA,uBAAY;;IACZC,eAAe;eAAfA,0BAAe;;IACfC,aAAa;eAAbA,wBAAa;;IACbC,eAAe;eAAfA,0BAAe;;IACfC,kBAAkB;eAAlBA,6BAAkB;;IAClBC,OAAO;eAAPA,kBAAO;;IACPC,KAAK;eAALA,gBAAK;;IACLC,SAAS;eAATA,oBAAS;;;2BACJ;qBAUO;qBACA;qBACA"}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["// Only internals that are used by other Snaps packages should be exported here.\nexport type { EnumToUnion } from './internals';\nexport {\n  getErrorData,\n  getErrorMessage,\n  getErrorStack,\n  SNAP_ERROR_CODE,\n  SNAP_ERROR_MESSAGE,\n  literal,\n  union,\n  enumValue,\n} from './internals';\n\n// Re-exported from `@metamask/utils` for convenience.\nexport type {\n  Json,\n  JsonRpcError,\n  JsonRpcRequest,\n  JsonRpcParams,\n} from '@metamask/utils';\nexport { assert } from '@metamask/utils';\n\nexport * from './errors';\nexport * from './error-wrappers';\nexport * from './images';\nexport * from './types';\nexport * from './ui';\n"],"names":["getErrorData","getErrorMessage","getErrorStack","SNAP_ERROR_CODE","SNAP_ERROR_MESSAGE","literal","union","enumValue","assert"],"mappings":"AAAA,gFAAgF;;;;;;;;;;;;IAG9EA,YAAY;eAAZA,uBAAY;;IACZC,eAAe;eAAfA,0BAAe;;IACfC,aAAa;eAAbA,wBAAa;;IACbC,eAAe;eAAfA,0BAAe;;IACfC,kBAAkB;eAAlBA,6BAAkB;;IAClBC,OAAO;eAAPA,kBAAO;;IACPC,KAAK;eAALA,gBAAK;;IACLC,SAAS;eAATA,oBAAS;;IAUFC,MAAM;eAANA,aAAM;;;2BATR;uBASgB;qBAET;qBACA;qBACA;qBACA;qBACA"}

package/dist/esm/images.js

@@ -0,0 +1,84 @@
+import { assert, bytesToBase64 } from '@metamask/utils';
+import { image } from './ui';
+/**
+ * Get raw image data from a URL.
+ *
+ * @param url - The URL to get the image data from.
+ * @param options - The options to use when fetching the image data. This is
+ * passed directly to `fetch`.
+ * @returns A promise that resolves to the image data as a blob.
+ */ async function getRawImageData(url, options) {
+    if (typeof fetch !== 'function') {
+        throw new Error(`Failed to fetch image data from "${url}": Using this function requires the "endowment:network-access" permission.`);
+    }
+    return fetch(url, options).then(async (response)=>{
+        if (!response.ok) {
+            throw new Error(`Failed to fetch image data from "${url}": ${response.status} ${response.statusText}`);
+        }
+        const blob = await response.blob();
+        assert(blob.type === 'image/jpeg' || blob.type === 'image/png', 'Expected image data to be a JPEG or PNG image.');
+        return blob;
+    });
+}
+/**
+ * Get image data as data-string from a URL. This is useful for embedding images
+ * inside of SVGs. Only JPEG and PNG images are supported.
+ *
+ * Note: This function uses `fetch` to get the image data. This means that using
+ * it requires the `endowment:network-access` permission.
+ *
+ * @example
+ * const imageData = await getImageData('https://cataas.com/cat');
+ * const svg = `
+ *   <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+ *     <image href="${imageData}" />
+ *   </svg>
+ * `;
+ *
+ * // Render the SVG in a Snap UI.
+ * const ui = image(svg);
+ * @param url - The URL to get the image data from.
+ * @param options - The options to use when fetching the image data. This is
+ * passed directly to `fetch`.
+ * @returns A promise that resolves to the image data as a data-string.
+ */ export async function getImageData(url, options) {
+    const blob = await getRawImageData(url, options);
+    const bytes = new Uint8Array(await blob.arrayBuffer());
+    return `data:${blob.type};base64,${bytesToBase64(bytes)}`;
+}
+/**
+ * Get an image component from a URL. This is useful for embedding images inside
+ * Snap UIs. Only JPEG and PNG images are supported.
+ *
+ * Note: This function uses `fetch` to get the image data. This means that using
+ * it requires the `endowment:network-access` permission.
+ *
+ * @example
+ * const component = await getImage('https://cataas.com/cat');
+ *
+ * return await snap.request({
+ *   method: 'snap_dialog',
+ *   params: {
+ *     type: 'alert',
+ *     content: panel([
+ *       component,
+ *     ]),
+ *   },
+ * });
+ * @param url - The URL to get the image data from.
+ * @param options - The options to use when fetching and rendering the image.
+ * @param options.width - The width of the image.
+ * @param options.height - The height of the image. If this is not provided, the
+ * width will be used as the height.
+ * @param options.request - The options to use when fetching the image data.
+ * This is passed directly to `fetch`.
+ * @returns A promise that resolves to the image data as an image component.
+ */ export async function getImageComponent(url, { width, height = width, request }) {
+    assert(typeof width === 'number' && width > 0, 'Expected width to be a number greater than 0.');
+    assert(typeof height === 'number' && height > 0, 'Expected height to be a number greater than 0.');
+    const imageData = await getImageData(url, request);
+    const size = `width="${width}" height="${height}"`;
+    return image(`<svg ${size.trim()} xmlns="http://www.w3.org/2000/svg"><image ${size.trim()} href="${imageData}" /></svg>`);
+}
+
+//# sourceMappingURL=images.js.map

package/dist/esm/images.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/images.ts"],"sourcesContent":["import { assert, bytesToBase64 } from '@metamask/utils';\n\nimport { image } from './ui';\n\n/**\n * Get raw image data from a URL.\n *\n * @param url - The URL to get the image data from.\n * @param options - The options to use when fetching the image data. This is\n * passed directly to `fetch`.\n * @returns A promise that resolves to the image data as a blob.\n */\nasync function getRawImageData(url: string, options?: RequestInit) {\n  if (typeof fetch !== 'function') {\n    throw new Error(\n      `Failed to fetch image data from \"${url}\": Using this function requires the \"endowment:network-access\" permission.`,\n    );\n  }\n\n  return fetch(url, options).then(async (response) => {\n    if (!response.ok) {\n      throw new Error(\n        `Failed to fetch image data from \"${url}\": ${response.status} ${response.statusText}`,\n      );\n    }\n\n    const blob = await response.blob();\n    assert(\n      blob.type === 'image/jpeg' || blob.type === 'image/png',\n      'Expected image data to be a JPEG or PNG image.',\n    );\n\n    return blob;\n  });\n}\n\n/**\n * Get image data as data-string from a URL. This is useful for embedding images\n * inside of SVGs. Only JPEG and PNG images are supported.\n *\n * Note: This function uses `fetch` to get the image data. This means that using\n * it requires the `endowment:network-access` permission.\n *\n * @example\n * const imageData = await getImageData('https://cataas.com/cat');\n * const svg = `\n *   <svg width=\"100\" height=\"100\" xmlns=\"http://www.w3.org/2000/svg\">\n *     <image href=\"${imageData}\" />\n *   </svg>\n * `;\n *\n * // Render the SVG in a Snap UI.\n * const ui = image(svg);\n * @param url - The URL to get the image data from.\n * @param options - The options to use when fetching the image data. This is\n * passed directly to `fetch`.\n * @returns A promise that resolves to the image data as a data-string.\n */\nexport async function getImageData(url: string, options?: RequestInit) {\n  const blob = await getRawImageData(url, options);\n  const bytes = new Uint8Array(await blob.arrayBuffer());\n\n  return `data:${blob.type};base64,${bytesToBase64(bytes)}`;\n}\n\n/**\n * Options for getting an SVG image element from a URL.\n *\n * @property width - The width of the image.\n * @property height - The height of the image. If this is not provided, the\n * width will be used as the height.\n * @property request - The options to use when fetching the image data. This is\n * passed directly to `fetch`.\n */\nexport type ImageOptions = {\n  width: number;\n  height?: number;\n  request?: RequestInit;\n};\n\n/**\n * Get an image component from a URL. This is useful for embedding images inside\n * Snap UIs. Only JPEG and PNG images are supported.\n *\n * Note: This function uses `fetch` to get the image data. This means that using\n * it requires the `endowment:network-access` permission.\n *\n * @example\n * const component = await getImage('https://cataas.com/cat');\n *\n * return await snap.request({\n *   method: 'snap_dialog',\n *   params: {\n *     type: 'alert',\n *     content: panel([\n *       component,\n *     ]),\n *   },\n * });\n * @param url - The URL to get the image data from.\n * @param options - The options to use when fetching and rendering the image.\n * @param options.width - The width of the image.\n * @param options.height - The height of the image. If this is not provided, the\n * width will be used as the height.\n * @param options.request - The options to use when fetching the image data.\n * This is passed directly to `fetch`.\n * @returns A promise that resolves to the image data as an image component.\n */\nexport async function getImageComponent(\n  url: string,\n  { width, height = width, request }: ImageOptions,\n) {\n  assert(\n    typeof width === 'number' && width > 0,\n    'Expected width to be a number greater than 0.',\n  );\n\n  assert(\n    typeof height === 'number' && height > 0,\n    'Expected height to be a number greater than 0.',\n  );\n\n  const imageData = await getImageData(url, request);\n  const size = `width=\"${width}\" height=\"${height}\"`;\n\n  return image(\n    `<svg ${size.trim()} xmlns=\"http://www.w3.org/2000/svg\"><image ${size.trim()} href=\"${imageData}\" /></svg>`,\n  );\n}\n"],"names":["assert","bytesToBase64","image","getRawImageData","url","options","fetch","Error","then","response","ok","status","statusText","blob","type","getImageData","bytes","Uint8Array","arrayBuffer","getImageComponent","width","height","request","imageData","size","trim"],"mappings":"AAAA,SAASA,MAAM,EAAEC,aAAa,QAAQ,kBAAkB;AAExD,SAASC,KAAK,QAAQ,OAAO;AAE7B;;;;;;;CAOC,GACD,eAAeC,gBAAgBC,GAAW,EAAEC,OAAqB;IAC/D,IAAI,OAAOC,UAAU,YAAY;QAC/B,MAAM,IAAIC,MACR,CAAC,iCAAiC,EAAEH,IAAI,0EAA0E,CAAC;IAEvH;IAEA,OAAOE,MAAMF,KAAKC,SAASG,IAAI,CAAC,OAAOC;QACrC,IAAI,CAACA,SAASC,EAAE,EAAE;YAChB,MAAM,IAAIH,MACR,CAAC,iCAAiC,EAAEH,IAAI,GAAG,EAAEK,SAASE,MAAM,CAAC,CAAC,EAAEF,SAASG,UAAU,CAAC,CAAC;QAEzF;QAEA,MAAMC,OAAO,MAAMJ,SAASI,IAAI;QAChCb,OACEa,KAAKC,IAAI,KAAK,gBAAgBD,KAAKC,IAAI,KAAK,aAC5C;QAGF,OAAOD;IACT;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,eAAeE,aAAaX,GAAW,EAAEC,OAAqB;IACnE,MAAMQ,OAAO,MAAMV,gBAAgBC,KAAKC;IACxC,MAAMW,QAAQ,IAAIC,WAAW,MAAMJ,KAAKK,WAAW;IAEnD,OAAO,CAAC,KAAK,EAAEL,KAAKC,IAAI,CAAC,QAAQ,EAAEb,cAAce,OAAO,CAAC;AAC3D;AAiBA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,eAAeG,kBACpBf,GAAW,EACX,EAAEgB,KAAK,EAAEC,SAASD,KAAK,EAAEE,OAAO,EAAgB;IAEhDtB,OACE,OAAOoB,UAAU,YAAYA,QAAQ,GACrC;IAGFpB,OACE,OAAOqB,WAAW,YAAYA,SAAS,GACvC;IAGF,MAAME,YAAY,MAAMR,aAAaX,KAAKkB;IAC1C,MAAME,OAAO,CAAC,OAAO,EAAEJ,MAAM,UAAU,EAAEC,OAAO,CAAC,CAAC;IAElD,OAAOnB,MACL,CAAC,KAAK,EAAEsB,KAAKC,IAAI,GAAG,2CAA2C,EAAED,KAAKC,IAAI,GAAG,OAAO,EAAEF,UAAU,UAAU,CAAC;AAE/G"}

package/dist/esm/index.js

@@ -1,6 +1,9 @@
 // Only internals that are used by other Snaps packages should be exported here.
 export { getErrorData, getErrorMessage, getErrorStack, SNAP_ERROR_CODE, SNAP_ERROR_MESSAGE, literal, union, enumValue } from './internals';
+export { assert } from '@metamask/utils';
 export * from './errors';
+export * from './error-wrappers';
+export * from './images';
 export * from './types';
 export * from './ui';
 

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["// Only internals that are used by other Snaps packages should be exported here.\nexport type { EnumToUnion } from './internals';\nexport {\n  getErrorData,\n  getErrorMessage,\n  getErrorStack,\n  SNAP_ERROR_CODE,\n  SNAP_ERROR_MESSAGE,\n  literal,\n  union,\n  enumValue,\n} from './internals';\n\n// Re-exported from `@metamask/utils` for convenience.\nexport type {\n  Json,\n  JsonRpcError,\n  JsonRpcRequest,\n  JsonRpcParams,\n} from '@metamask/utils';\n\nexport * from './errors';\nexport * from './types';\nexport * from './ui';\n"],"names":["getErrorData","getErrorMessage","getErrorStack","SNAP_ERROR_CODE","SNAP_ERROR_MESSAGE","literal","union","enumValue"],"mappings":"AAAA,gFAAgF;AAEhF,SACEA,YAAY,EACZC,eAAe,EACfC,aAAa,EACbC,eAAe,EACfC,kBAAkB,EAClBC,OAAO,EACPC,KAAK,EACLC,SAAS,QACJ,cAAc;AAUrB,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,OAAO"}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["// Only internals that are used by other Snaps packages should be exported here.\nexport type { EnumToUnion } from './internals';\nexport {\n  getErrorData,\n  getErrorMessage,\n  getErrorStack,\n  SNAP_ERROR_CODE,\n  SNAP_ERROR_MESSAGE,\n  literal,\n  union,\n  enumValue,\n} from './internals';\n\n// Re-exported from `@metamask/utils` for convenience.\nexport type {\n  Json,\n  JsonRpcError,\n  JsonRpcRequest,\n  JsonRpcParams,\n} from '@metamask/utils';\nexport { assert } from '@metamask/utils';\n\nexport * from './errors';\nexport * from './error-wrappers';\nexport * from './images';\nexport * from './types';\nexport * from './ui';\n"],"names":["getErrorData","getErrorMessage","getErrorStack","SNAP_ERROR_CODE","SNAP_ERROR_MESSAGE","literal","union","enumValue","assert"],"mappings":"AAAA,gFAAgF;AAEhF,SACEA,YAAY,EACZC,eAAe,EACfC,aAAa,EACbC,eAAe,EACfC,kBAAkB,EAClBC,OAAO,EACPC,KAAK,EACLC,SAAS,QACJ,cAAc;AASrB,SAASC,MAAM,QAAQ,kBAAkB;AAEzC,cAAc,WAAW;AACzB,cAAc,mBAAmB;AACjC,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,OAAO"}

package/dist/types/images.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Get image data as data-string from a URL. This is useful for embedding images
+ * inside of SVGs. Only JPEG and PNG images are supported.
+ *
+ * Note: This function uses `fetch` to get the image data. This means that using
+ * it requires the `endowment:network-access` permission.
+ *
+ * @example
+ * const imageData = await getImageData('https://cataas.com/cat');
+ * const svg = `
+ *   <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+ *     <image href="${imageData}" />
+ *   </svg>
+ * `;
+ *
+ * // Render the SVG in a Snap UI.
+ * const ui = image(svg);
+ * @param url - The URL to get the image data from.
+ * @param options - The options to use when fetching the image data. This is
+ * passed directly to `fetch`.
+ * @returns A promise that resolves to the image data as a data-string.
+ */
+export declare function getImageData(url: string, options?: RequestInit): Promise<string>;
+/**
+ * Options for getting an SVG image element from a URL.
+ *
+ * @property width - The width of the image.
+ * @property height - The height of the image. If this is not provided, the
+ * width will be used as the height.
+ * @property request - The options to use when fetching the image data. This is
+ * passed directly to `fetch`.
+ */
+export declare type ImageOptions = {
+    width: number;
+    height?: number;
+    request?: RequestInit;
+};
+/**
+ * Get an image component from a URL. This is useful for embedding images inside
+ * Snap UIs. Only JPEG and PNG images are supported.
+ *
+ * Note: This function uses `fetch` to get the image data. This means that using
+ * it requires the `endowment:network-access` permission.
+ *
+ * @example
+ * const component = await getImage('https://cataas.com/cat');
+ *
+ * return await snap.request({
+ *   method: 'snap_dialog',
+ *   params: {
+ *     type: 'alert',
+ *     content: panel([
+ *       component,
+ *     ]),
+ *   },
+ * });
+ * @param url - The URL to get the image data from.
+ * @param options - The options to use when fetching and rendering the image.
+ * @param options.width - The width of the image.
+ * @param options.height - The height of the image. If this is not provided, the
+ * width will be used as the height.
+ * @param options.request - The options to use when fetching the image data.
+ * This is passed directly to `fetch`.
+ * @returns A promise that resolves to the image data as an image component.
+ */
+export declare function getImageComponent(url: string, { width, height, request }: ImageOptions): Promise<{
+    value: string;
+    type: import("./ui").NodeType.Image;
+}>;

package/dist/types/index.d.ts

@@ -1,6 +1,9 @@
 export type { EnumToUnion } from './internals';
 export { getErrorData, getErrorMessage, getErrorStack, SNAP_ERROR_CODE, SNAP_ERROR_MESSAGE, literal, union, enumValue, } from './internals';
 export type { Json, JsonRpcError, JsonRpcRequest, JsonRpcParams, } from '@metamask/utils';
+export { assert } from '@metamask/utils';
 export * from './errors';
+export * from './error-wrappers';
+export * from './images';
 export * from './types';
 export * from './ui';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask/snaps-sdk",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/MetaMask/snaps.git"
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@metamask/key-tree": "^9.0.0",
-    "@metamask/providers": "^14.0.1",
+    "@metamask/providers": "^14.0.2",
     "@metamask/rpc-errors": "^6.1.0",
     "@metamask/utils": "^8.2.1",
     "is-svg": "^4.4.0",
@@ -66,6 +66,7 @@
     "eslint-plugin-promise": "^6.1.1",
     "expect-type": "^0.17.3",
     "jest": "^29.0.2",
+    "jest-fetch-mock": "^3.0.3",
     "jest-it-up": "^2.0.0",
     "prettier": "^2.7.1",
     "prettier-plugin-packagejson": "^2.2.11",