@metamask/snaps-sdk/dist/images.mjs.map

A library containing the core functionality for building MetaMask Snaps

{"version":3,"file":"images.mjs","sourceRoot":"","sources":["../src/images.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,wBAAwB;AAExD,OAAO,EAAE,KAAK,EAAE,uBAAa;AAE7B;;;;;;;GAOG;AACH,KAAK,UAAU,eAAe,CAAC,GAAW,EAAE,OAAqB;IAC/D,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,KAAK,CACb,oCAAoC,GAAG,4EAA4E,CACpH,CAAC;IACJ,CAAC;IAED,OAAO,KAAK,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE;QACjD,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CACb,oCAAoC,GAAG,MAAM,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,UAAU,EAAE,CACtF,CAAC;QACJ,CAAC;QAED,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QACnC,MAAM,CACJ,IAAI,CAAC,IAAI,KAAK,YAAY,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,EACvD,gDAAgD,CACjD,CAAC;QAEF,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,GAAW,EAAE,OAAqB;IACnE,MAAM,IAAI,GAAG,MAAM,eAAe,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,IAAI,UAAU,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;IAEvD,OAAO,QAAQ,IAAI,CAAC,IAAI,WAAW,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;AAC5D,CAAC;AAiBD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,KAAK,UAAU,iBAAiB,CACrC,GAAW,EACX,EAAE,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,OAAO,EAAgB;IAEhD,MAAM,CACJ,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,GAAG,CAAC,EACtC,+CAA+C,CAChD,CAAC;IAEF,MAAM,CACJ,OAAO,MAAM,KAAK,QAAQ,IAAI,MAAM,GAAG,CAAC,EACxC,gDAAgD,CACjD,CAAC;IAEF,MAAM,SAAS,GAAG,MAAM,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IACnD,MAAM,IAAI,GAAG,UAAU,KAAK,aAAa,MAAM,GAAG,CAAC;IAEnD,OAAO,KAAK,CACV,QAAQ,IAAI,CAAC,IAAI,EAAE,8CAA8C,IAAI,CAAC,IAAI,EAAE,UAAU,SAAS,YAAY,CAC5G,CAAC;AACJ,CAAC","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"]}