@metamask/snap-networks-utils 1.0.0 → 2.0.0

package/dist/ui/ActionHeader/ActionHeader.d.cts

@@ -0,0 +1,27 @@
+import type { ComponentOrElement } from "@metamask/snaps-sdk";
+export type ActionHeaderProps = {
+    title: string;
+    /** Muted text shown below the title. */
+    subtitle?: string;
+    /**
+     * Asset icon URL; when set, an extra-large asset icon is shown below the
+     * title. A blank URL shows the question-mark icon.
+     */
+    iconUrl?: string;
+};
+/**
+ * Renders the centered header at the top of a confirmation: a large title,
+ * then an optional subtitle and asset icon.
+ *
+ * @param props - The component props.
+ * @param props.title - The title.
+ * @param props.subtitle - The subtitle.
+ * @param props.iconUrl - The asset icon URL.
+ * @returns The header element.
+ * @example
+ * ```tsx
+ * <ActionHeader title={translate('confirmation.signMessage.title')} />;
+ * ```
+ */
+export declare const ActionHeader: ({ title, subtitle, iconUrl, }: ActionHeaderProps) => ComponentOrElement;
+//# sourceMappingURL=ActionHeader.d.cts.map

package/dist/ui/ActionHeader/ActionHeader.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionHeader.d.cts","sourceRoot":"","sources":["../../../src/ui/ActionHeader/ActionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,4BAA4B;AAK9D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY,GAAI,+BAI1B,iBAAiB,KAAG,kBAgBtB,CAAC"}

package/dist/ui/ActionHeader/ActionHeader.d.mts

@@ -0,0 +1,27 @@
+import type { ComponentOrElement } from "@metamask/snaps-sdk";
+export type ActionHeaderProps = {
+    title: string;
+    /** Muted text shown below the title. */
+    subtitle?: string;
+    /**
+     * Asset icon URL; when set, an extra-large asset icon is shown below the
+     * title. A blank URL shows the question-mark icon.
+     */
+    iconUrl?: string;
+};
+/**
+ * Renders the centered header at the top of a confirmation: a large title,
+ * then an optional subtitle and asset icon.
+ *
+ * @param props - The component props.
+ * @param props.title - The title.
+ * @param props.subtitle - The subtitle.
+ * @param props.iconUrl - The asset icon URL.
+ * @returns The header element.
+ * @example
+ * ```tsx
+ * <ActionHeader title={translate('confirmation.signMessage.title')} />;
+ * ```
+ */
+export declare const ActionHeader: ({ title, subtitle, iconUrl, }: ActionHeaderProps) => ComponentOrElement;
+//# sourceMappingURL=ActionHeader.d.mts.map

package/dist/ui/ActionHeader/ActionHeader.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionHeader.d.mts","sourceRoot":"","sources":["../../../src/ui/ActionHeader/ActionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,4BAA4B;AAK9D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY,GAAI,+BAI1B,iBAAiB,KAAG,kBAgBtB,CAAC"}

package/dist/ui/ActionHeader/ActionHeader.mjs

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@metamask/snaps-sdk/jsx-runtime";
+import { Box, Heading, Text as SnapText } from "@metamask/snaps-sdk/jsx";
+import { AssetIcon } from "../Asset/Asset.mjs";
+/**
+ * Renders the centered header at the top of a confirmation: a large title,
+ * then an optional subtitle and asset icon.
+ *
+ * @param props - The component props.
+ * @param props.title - The title.
+ * @param props.subtitle - The subtitle.
+ * @param props.iconUrl - The asset icon URL.
+ * @returns The header element.
+ * @example
+ * ```tsx
+ * <ActionHeader title={translate('confirmation.signMessage.title')} />;
+ * ```
+ */
+export const ActionHeader = ({ title, subtitle, iconUrl, }) => (_jsxs(Box, { alignment: "center", center: true, children: [_jsx(Box, { children: null }), _jsx(Heading, { size: "lg", children: title }), subtitle ? (_jsx(SnapText, { color: "muted", alignment: "center", children: subtitle })) : null, iconUrl === undefined ? null : (_jsx(Box, { children: _jsx(AssetIcon, { iconUrl: iconUrl, size: "xl" }) })), _jsx(Box, { children: null })] }));
+//# sourceMappingURL=ActionHeader.mjs.map

package/dist/ui/ActionHeader/ActionHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionHeader.mjs","sourceRoot":"","sources":["../../../src/ui/ActionHeader/ActionHeader.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,gCAAgC;AAEzE,OAAO,EAAE,SAAS,EAAE,2BAAuB;AAa3C;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,OAAO,GACW,EAAsB,EAAE,CAAC,CAC3C,MAAC,GAAG,IAAC,SAAS,EAAC,QAAQ,EAAC,MAAM,mBAC5B,KAAC,GAAG,cAAE,IAAI,GAAO,EACjB,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,YAAE,KAAK,GAAW,EACnC,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,QAAQ,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAC,QAAQ,YACvC,QAAQ,GACA,CACZ,CAAC,CAAC,CAAC,IAAI,EACP,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC9B,KAAC,GAAG,cACF,KAAC,SAAS,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,IAAI,GAAG,GACrC,CACP,EACD,KAAC,GAAG,cAAE,IAAI,GAAO,IACb,CACP,CAAC","sourcesContent":["import type { ComponentOrElement } from '@metamask/snaps-sdk';\nimport { Box, Heading, Text as SnapText } from '@metamask/snaps-sdk/jsx';\n\nimport { AssetIcon } from '../Asset/Asset';\n\nexport type ActionHeaderProps = {\n  title: string;\n  /** Muted text shown below the title. */\n  subtitle?: string;\n  /**\n   * Asset icon URL; when set, an extra-large asset icon is shown below the\n   * title. A blank URL shows the question-mark icon.\n   */\n  iconUrl?: string;\n};\n\n/**\n * Renders the centered header at the top of a confirmation: a large title,\n * then an optional subtitle and asset icon.\n *\n * @param props - The component props.\n * @param props.title - The title.\n * @param props.subtitle - The subtitle.\n * @param props.iconUrl - The asset icon URL.\n * @returns The header element.\n * @example\n * ```tsx\n * <ActionHeader title={translate('confirmation.signMessage.title')} />;\n * ```\n */\nexport const ActionHeader = ({\n  title,\n  subtitle,\n  iconUrl,\n}: ActionHeaderProps): ComponentOrElement => (\n  <Box alignment=\"center\" center>\n    <Box>{null}</Box>\n    <Heading size=\"lg\">{title}</Heading>\n    {subtitle ? (\n      <SnapText color=\"muted\" alignment=\"center\">\n        {subtitle}\n      </SnapText>\n    ) : null}\n    {iconUrl === undefined ? null : (\n      <Box>\n        <AssetIcon iconUrl={iconUrl} size=\"xl\" />\n      </Box>\n    )}\n    <Box>{null}</Box>\n  </Box>\n);\n"]}

package/dist/ui/Asset/Asset.cjs

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Asset = exports.AssetIcon = void 0;
+const jsx_runtime_1 = require("@metamask/snaps-sdk/jsx-runtime");
+const jsx_1 = require("@metamask/snaps-sdk/jsx");
+const question_mark_svg_1 = __importDefault(require("./question-mark.svg"));
+const IconSize = {
+    sm: 16,
+    md: 24,
+    lg: 32,
+    xl: 48,
+};
+/**
+ * Renders a round asset icon, falling back to a question mark.
+ *
+ * @param props - The component props.
+ * @param props.iconUrl - The icon URL.
+ * @param props.size - The icon size, `sm` (16px) by default.
+ * @returns The icon image.
+ */
+const AssetIcon = ({ iconUrl, size = 'sm', }) => ((0, jsx_runtime_1.jsx)(jsx_1.Image, { borderRadius: "full", src: iconUrl?.trim() ? iconUrl : question_mark_svg_1.default, height: IconSize[size], width: IconSize[size] }));
+exports.AssetIcon = AssetIcon;
+/**
+ * Renders an inline asset: optional fiat value (or a loading skeleton), the
+ * asset icon, then the amount and symbol, optionally as an explorer link.
+ *
+ * @param props - The component props.
+ * @param props.symbol - The asset symbol.
+ * @param props.amount - The display-ready amount.
+ * @param props.iconUrl - The icon URL.
+ * @param props.iconName - A Snaps icon shown instead of the image.
+ * @param props.hideIcon - Whether to render no icon.
+ * @param props.link - The explorer link.
+ * @param props.fiat - The display-ready fiat value.
+ * @param props.isFiatLoading - Whether the fiat value is loading.
+ * @returns The asset element.
+ * @example
+ * ```tsx
+ * const price = preferences.useExternalPricingData
+ *   ? tokenPrices[assetId]
+ *   : null;
+ *
+ * <Asset
+ *   symbol="XLM"
+ *   amount="1.5"
+ *   iconUrl={iconUrl}
+ *   fiat={
+ *     price
+ *       ? formatFiat(
+ *           tokenToFiat('1.5', price),
+ *           preferences.currency,
+ *           preferences.locale,
+ *         )
+ *       : null
+ *   }
+ *   isFiatLoading={tokenPricesFetchStatus === 'fetching'}
+ * />;
+ * ```
+ */
+const Asset = ({ symbol, amount, iconUrl, iconName, hideIcon = false, link, fiat, isFiatLoading = false, }) => {
+    const text = amount === undefined ? symbol : `${amount} ${symbol}`;
+    return ((0, jsx_runtime_1.jsxs)(jsx_1.Box, { direction: "horizontal", alignment: "end", children: [isFiatLoading ? (0, jsx_runtime_1.jsx)(jsx_1.Skeleton, { width: 80 }) : null, !isFiatLoading && fiat ? ((0, jsx_runtime_1.jsx)(jsx_1.Text, { color: "muted", children: fiat })) : null, hideIcon ? null : ((0, jsx_runtime_1.jsx)(jsx_1.Box, { alignment: "center", center: true, children: iconName ? ((0, jsx_runtime_1.jsx)(jsx_1.Icon, { name: iconName, size: "md" })) : ((0, jsx_runtime_1.jsx)(exports.AssetIcon, { iconUrl: iconUrl })) })), link ? (0, jsx_runtime_1.jsx)(jsx_1.Link, { href: link, children: text }) : (0, jsx_runtime_1.jsx)(jsx_1.Text, { children: text })] }));
+};
+exports.Asset = Asset;
+//# sourceMappingURL=Asset.cjs.map

package/dist/ui/Asset/Asset.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Asset.cjs","sourceRoot":"","sources":["../../../src/ui/Asset/Asset.tsx"],"names":[],"mappings":";;;;;;;AACA,iDAOiC;AAGjC,4EAAmD;AAEnD,MAAM,QAAQ,GAAG;IACf,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;CACE,CAAC;AA8BX;;;;;;;GAOG;AACI,MAAM,SAAS,GAAG,CAAC,EACxB,OAAO,EACP,IAAI,GAAG,IAAI,GACI,EAAsB,EAAE,CAAC,CACxC,uBAAC,WAAK,IACJ,YAAY,EAAC,MAAM,EACnB,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,2BAAgB,EACjD,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,EACtB,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,GACrB,CACH,CAAC;AAVW,QAAA,SAAS,aAUpB;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACI,MAAM,KAAK,GAAG,CAAC,EACpB,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,IAAI,EACJ,aAAa,GAAG,KAAK,GACV,EAAsB,EAAE;IACnC,MAAM,IAAI,GAAG,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,MAAM,EAAE,CAAC;IAEnE,OAAO,CACL,wBAAC,SAAG,IAAC,SAAS,EAAC,YAAY,EAAC,SAAS,EAAC,KAAK,aACxC,aAAa,CAAC,CAAC,CAAC,uBAAC,cAAQ,IAAC,KAAK,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,IAAI,EAC9C,CAAC,aAAa,IAAI,IAAI,CAAC,CAAC,CAAC,CACxB,uBAAC,UAAQ,IAAC,KAAK,EAAC,OAAO,YAAE,IAAI,GAAY,CAC1C,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACjB,uBAAC,SAAG,IAAC,SAAS,EAAC,QAAQ,EAAC,MAAM,kBAC3B,QAAQ,CAAC,CAAC,CAAC,CACV,uBAAC,UAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,IAAI,GAAG,CACnC,CAAC,CAAC,CAAC,CACF,uBAAC,iBAAS,IAAC,OAAO,EAAE,OAAO,GAAI,CAChC,GACG,CACP,EACA,IAAI,CAAC,CAAC,CAAC,uBAAC,UAAI,IAAC,IAAI,EAAE,IAAI,YAAG,IAAI,GAAQ,CAAC,CAAC,CAAC,uBAAC,UAAQ,cAAE,IAAI,GAAY,IACjE,CACP,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,KAAK,SA8BhB","sourcesContent":["import type { ComponentOrElement } from '@metamask/snaps-sdk';\nimport {\n  Box,\n  Icon,\n  Image,\n  Link,\n  Skeleton,\n  Text as SnapText,\n} from '@metamask/snaps-sdk/jsx';\nimport type { IconProps } from '@metamask/snaps-sdk/jsx';\n\nimport questionMarkIcon from './question-mark.svg';\n\nconst IconSize = {\n  sm: 16,\n  md: 24,\n  lg: 32,\n  xl: 48,\n} as const;\n\nexport type AssetIconProps = {\n  /** Icon URL; a question-mark icon is shown when missing or blank. */\n  iconUrl?: string | null;\n  size?: keyof typeof IconSize;\n};\n\nexport type AssetProps = {\n  symbol: string;\n  /** Display-ready amount shown before the symbol; omit to show the symbol only. */\n  amount?: string;\n  /** Icon URL; a question-mark icon is shown when missing or blank. */\n  iconUrl?: string | null;\n  /** Snaps icon shown instead of the image, e.g. for network resources. */\n  iconName?: IconProps['name'];\n  /** Whether to render the asset without any icon. */\n  hideIcon?: boolean;\n  /** Explorer link; when set, the asset text is rendered as a link. */\n  link?: string;\n  /**\n   * Display-ready fiat value shown before the asset. The caller decides whether\n   * fiat applies (e.g. `useExternalPricingData`) and formats it with the user's\n   * currency and locale; pass `null` to show no fiat.\n   */\n  fiat?: string | null;\n  /** Whether the fiat value is loading; shows a skeleton in its place. */\n  isFiatLoading?: boolean;\n};\n\n/**\n * Renders a round asset icon, falling back to a question mark.\n *\n * @param props - The component props.\n * @param props.iconUrl - The icon URL.\n * @param props.size - The icon size, `sm` (16px) by default.\n * @returns The icon image.\n */\nexport const AssetIcon = ({\n  iconUrl,\n  size = 'sm',\n}: AssetIconProps): ComponentOrElement => (\n  <Image\n    borderRadius=\"full\"\n    src={iconUrl?.trim() ? iconUrl : questionMarkIcon}\n    height={IconSize[size]}\n    width={IconSize[size]}\n  />\n);\n\n/**\n * Renders an inline asset: optional fiat value (or a loading skeleton), the\n * asset icon, then the amount and symbol, optionally as an explorer link.\n *\n * @param props - The component props.\n * @param props.symbol - The asset symbol.\n * @param props.amount - The display-ready amount.\n * @param props.iconUrl - The icon URL.\n * @param props.iconName - A Snaps icon shown instead of the image.\n * @param props.hideIcon - Whether to render no icon.\n * @param props.link - The explorer link.\n * @param props.fiat - The display-ready fiat value.\n * @param props.isFiatLoading - Whether the fiat value is loading.\n * @returns The asset element.\n * @example\n * ```tsx\n * const price = preferences.useExternalPricingData\n *   ? tokenPrices[assetId]\n *   : null;\n *\n * <Asset\n *   symbol=\"XLM\"\n *   amount=\"1.5\"\n *   iconUrl={iconUrl}\n *   fiat={\n *     price\n *       ? formatFiat(\n *           tokenToFiat('1.5', price),\n *           preferences.currency,\n *           preferences.locale,\n *         )\n *       : null\n *   }\n *   isFiatLoading={tokenPricesFetchStatus === 'fetching'}\n * />;\n * ```\n */\nexport const Asset = ({\n  symbol,\n  amount,\n  iconUrl,\n  iconName,\n  hideIcon = false,\n  link,\n  fiat,\n  isFiatLoading = false,\n}: AssetProps): ComponentOrElement => {\n  const text = amount === undefined ? symbol : `${amount} ${symbol}`;\n\n  return (\n    <Box direction=\"horizontal\" alignment=\"end\">\n      {isFiatLoading ? <Skeleton width={80} /> : null}\n      {!isFiatLoading && fiat ? (\n        <SnapText color=\"muted\">{fiat}</SnapText>\n      ) : null}\n      {hideIcon ? null : (\n        <Box alignment=\"center\" center>\n          {iconName ? (\n            <Icon name={iconName} size=\"md\" />\n          ) : (\n            <AssetIcon iconUrl={iconUrl} />\n          )}\n        </Box>\n      )}\n      {link ? <Link href={link}>{text}</Link> : <SnapText>{text}</SnapText>}\n    </Box>\n  );\n};\n"]}

package/dist/ui/Asset/Asset.d.cts

@@ -0,0 +1,83 @@
+import type { ComponentOrElement } from "@metamask/snaps-sdk";
+import type { IconProps } from "@metamask/snaps-sdk/jsx";
+declare const IconSize: {
+    readonly sm: 16;
+    readonly md: 24;
+    readonly lg: 32;
+    readonly xl: 48;
+};
+export type AssetIconProps = {
+    /** Icon URL; a question-mark icon is shown when missing or blank. */
+    iconUrl?: string | null;
+    size?: keyof typeof IconSize;
+};
+export type AssetProps = {
+    symbol: string;
+    /** Display-ready amount shown before the symbol; omit to show the symbol only. */
+    amount?: string;
+    /** Icon URL; a question-mark icon is shown when missing or blank. */
+    iconUrl?: string | null;
+    /** Snaps icon shown instead of the image, e.g. for network resources. */
+    iconName?: IconProps['name'];
+    /** Whether to render the asset without any icon. */
+    hideIcon?: boolean;
+    /** Explorer link; when set, the asset text is rendered as a link. */
+    link?: string;
+    /**
+     * Display-ready fiat value shown before the asset. The caller decides whether
+     * fiat applies (e.g. `useExternalPricingData`) and formats it with the user's
+     * currency and locale; pass `null` to show no fiat.
+     */
+    fiat?: string | null;
+    /** Whether the fiat value is loading; shows a skeleton in its place. */
+    isFiatLoading?: boolean;
+};
+/**
+ * Renders a round asset icon, falling back to a question mark.
+ *
+ * @param props - The component props.
+ * @param props.iconUrl - The icon URL.
+ * @param props.size - The icon size, `sm` (16px) by default.
+ * @returns The icon image.
+ */
+export declare const AssetIcon: ({ iconUrl, size, }: AssetIconProps) => ComponentOrElement;
+/**
+ * Renders an inline asset: optional fiat value (or a loading skeleton), the
+ * asset icon, then the amount and symbol, optionally as an explorer link.
+ *
+ * @param props - The component props.
+ * @param props.symbol - The asset symbol.
+ * @param props.amount - The display-ready amount.
+ * @param props.iconUrl - The icon URL.
+ * @param props.iconName - A Snaps icon shown instead of the image.
+ * @param props.hideIcon - Whether to render no icon.
+ * @param props.link - The explorer link.
+ * @param props.fiat - The display-ready fiat value.
+ * @param props.isFiatLoading - Whether the fiat value is loading.
+ * @returns The asset element.
+ * @example
+ * ```tsx
+ * const price = preferences.useExternalPricingData
+ *   ? tokenPrices[assetId]
+ *   : null;
+ *
+ * <Asset
+ *   symbol="XLM"
+ *   amount="1.5"
+ *   iconUrl={iconUrl}
+ *   fiat={
+ *     price
+ *       ? formatFiat(
+ *           tokenToFiat('1.5', price),
+ *           preferences.currency,
+ *           preferences.locale,
+ *         )
+ *       : null
+ *   }
+ *   isFiatLoading={tokenPricesFetchStatus === 'fetching'}
+ * />;
+ * ```
+ */
+export declare const Asset: ({ symbol, amount, iconUrl, iconName, hideIcon, link, fiat, isFiatLoading, }: AssetProps) => ComponentOrElement;
+export {};
+//# sourceMappingURL=Asset.d.cts.map

package/dist/ui/Asset/Asset.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Asset.d.cts","sourceRoot":"","sources":["../../../src/ui/Asset/Asset.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,4BAA4B;AAS9D,OAAO,KAAK,EAAE,SAAS,EAAE,gCAAgC;AAIzD,QAAA,MAAM,QAAQ;;;;;CAKJ,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG;IAC3B,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC7B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,wEAAwE;IACxE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,GAAI,oBAGvB,cAAc,KAAG,kBAOnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,KAAK,GAAI,6EASnB,UAAU,KAAG,kBAqBf,CAAC"}

package/dist/ui/Asset/Asset.d.mts

@@ -0,0 +1,83 @@
+import type { ComponentOrElement } from "@metamask/snaps-sdk";
+import type { IconProps } from "@metamask/snaps-sdk/jsx";
+declare const IconSize: {
+    readonly sm: 16;
+    readonly md: 24;
+    readonly lg: 32;
+    readonly xl: 48;
+};
+export type AssetIconProps = {
+    /** Icon URL; a question-mark icon is shown when missing or blank. */
+    iconUrl?: string | null;
+    size?: keyof typeof IconSize;
+};
+export type AssetProps = {
+    symbol: string;
+    /** Display-ready amount shown before the symbol; omit to show the symbol only. */
+    amount?: string;
+    /** Icon URL; a question-mark icon is shown when missing or blank. */
+    iconUrl?: string | null;
+    /** Snaps icon shown instead of the image, e.g. for network resources. */
+    iconName?: IconProps['name'];
+    /** Whether to render the asset without any icon. */
+    hideIcon?: boolean;
+    /** Explorer link; when set, the asset text is rendered as a link. */
+    link?: string;
+    /**
+     * Display-ready fiat value shown before the asset. The caller decides whether
+     * fiat applies (e.g. `useExternalPricingData`) and formats it with the user's
+     * currency and locale; pass `null` to show no fiat.
+     */
+    fiat?: string | null;
+    /** Whether the fiat value is loading; shows a skeleton in its place. */
+    isFiatLoading?: boolean;
+};
+/**
+ * Renders a round asset icon, falling back to a question mark.
+ *
+ * @param props - The component props.
+ * @param props.iconUrl - The icon URL.
+ * @param props.size - The icon size, `sm` (16px) by default.
+ * @returns The icon image.
+ */
+export declare const AssetIcon: ({ iconUrl, size, }: AssetIconProps) => ComponentOrElement;
+/**
+ * Renders an inline asset: optional fiat value (or a loading skeleton), the
+ * asset icon, then the amount and symbol, optionally as an explorer link.
+ *
+ * @param props - The component props.
+ * @param props.symbol - The asset symbol.
+ * @param props.amount - The display-ready amount.
+ * @param props.iconUrl - The icon URL.
+ * @param props.iconName - A Snaps icon shown instead of the image.
+ * @param props.hideIcon - Whether to render no icon.
+ * @param props.link - The explorer link.
+ * @param props.fiat - The display-ready fiat value.
+ * @param props.isFiatLoading - Whether the fiat value is loading.
+ * @returns The asset element.
+ * @example
+ * ```tsx
+ * const price = preferences.useExternalPricingData
+ *   ? tokenPrices[assetId]
+ *   : null;
+ *
+ * <Asset
+ *   symbol="XLM"
+ *   amount="1.5"
+ *   iconUrl={iconUrl}
+ *   fiat={
+ *     price
+ *       ? formatFiat(
+ *           tokenToFiat('1.5', price),
+ *           preferences.currency,
+ *           preferences.locale,
+ *         )
+ *       : null
+ *   }
+ *   isFiatLoading={tokenPricesFetchStatus === 'fetching'}
+ * />;
+ * ```
+ */
+export declare const Asset: ({ symbol, amount, iconUrl, iconName, hideIcon, link, fiat, isFiatLoading, }: AssetProps) => ComponentOrElement;
+export {};
+//# sourceMappingURL=Asset.d.mts.map

package/dist/ui/Asset/Asset.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Asset.d.mts","sourceRoot":"","sources":["../../../src/ui/Asset/Asset.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,4BAA4B;AAS9D,OAAO,KAAK,EAAE,SAAS,EAAE,gCAAgC;AAIzD,QAAA,MAAM,QAAQ;;;;;CAKJ,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG;IAC3B,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC7B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,wEAAwE;IACxE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,GAAI,oBAGvB,cAAc,KAAG,kBAOnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,KAAK,GAAI,6EASnB,UAAU,KAAG,kBAqBf,CAAC"}

package/dist/ui/Asset/Asset.mjs

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@metamask/snaps-sdk/jsx-runtime";
+import { Box, Icon, Image, Link, Skeleton, Text as SnapText } from "@metamask/snaps-sdk/jsx";
+import questionMarkIcon from "./question-mark.svg";
+const IconSize = {
+    sm: 16,
+    md: 24,
+    lg: 32,
+    xl: 48,
+};
+/**
+ * Renders a round asset icon, falling back to a question mark.
+ *
+ * @param props - The component props.
+ * @param props.iconUrl - The icon URL.
+ * @param props.size - The icon size, `sm` (16px) by default.
+ * @returns The icon image.
+ */
+export const AssetIcon = ({ iconUrl, size = 'sm', }) => (_jsx(Image, { borderRadius: "full", src: iconUrl?.trim() ? iconUrl : questionMarkIcon, height: IconSize[size], width: IconSize[size] }));
+/**
+ * Renders an inline asset: optional fiat value (or a loading skeleton), the
+ * asset icon, then the amount and symbol, optionally as an explorer link.
+ *
+ * @param props - The component props.
+ * @param props.symbol - The asset symbol.
+ * @param props.amount - The display-ready amount.
+ * @param props.iconUrl - The icon URL.
+ * @param props.iconName - A Snaps icon shown instead of the image.
+ * @param props.hideIcon - Whether to render no icon.
+ * @param props.link - The explorer link.
+ * @param props.fiat - The display-ready fiat value.
+ * @param props.isFiatLoading - Whether the fiat value is loading.
+ * @returns The asset element.
+ * @example
+ * ```tsx
+ * const price = preferences.useExternalPricingData
+ *   ? tokenPrices[assetId]
+ *   : null;
+ *
+ * <Asset
+ *   symbol="XLM"
+ *   amount="1.5"
+ *   iconUrl={iconUrl}
+ *   fiat={
+ *     price
+ *       ? formatFiat(
+ *           tokenToFiat('1.5', price),
+ *           preferences.currency,
+ *           preferences.locale,
+ *         )
+ *       : null
+ *   }
+ *   isFiatLoading={tokenPricesFetchStatus === 'fetching'}
+ * />;
+ * ```
+ */
+export const Asset = ({ symbol, amount, iconUrl, iconName, hideIcon = false, link, fiat, isFiatLoading = false, }) => {
+    const text = amount === undefined ? symbol : `${amount} ${symbol}`;
+    return (_jsxs(Box, { direction: "horizontal", alignment: "end", children: [isFiatLoading ? _jsx(Skeleton, { width: 80 }) : null, !isFiatLoading && fiat ? (_jsx(SnapText, { color: "muted", children: fiat })) : null, hideIcon ? null : (_jsx(Box, { alignment: "center", center: true, children: iconName ? (_jsx(Icon, { name: iconName, size: "md" })) : (_jsx(AssetIcon, { iconUrl: iconUrl })) })), link ? _jsx(Link, { href: link, children: text }) : _jsx(SnapText, { children: text })] }));
+};
+//# sourceMappingURL=Asset.mjs.map

package/dist/ui/Asset/Asset.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Asset.mjs","sourceRoot":"","sources":["../../../src/ui/Asset/Asset.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,IAAI,IAAI,QAAQ,EACjB,gCAAgC;AAGjC,OAAO,gBAAgB,4BAA4B;AAEnD,MAAM,QAAQ,GAAG;IACf,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;CACE,CAAC;AA8BX;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,OAAO,EACP,IAAI,GAAG,IAAI,GACI,EAAsB,EAAE,CAAC,CACxC,KAAC,KAAK,IACJ,YAAY,EAAC,MAAM,EACnB,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,EACjD,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,EACtB,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,GACrB,CACH,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,IAAI,EACJ,aAAa,GAAG,KAAK,GACV,EAAsB,EAAE;IACnC,MAAM,IAAI,GAAG,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,MAAM,EAAE,CAAC;IAEnE,OAAO,CACL,MAAC,GAAG,IAAC,SAAS,EAAC,YAAY,EAAC,SAAS,EAAC,KAAK,aACxC,aAAa,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,IAAI,EAC9C,CAAC,aAAa,IAAI,IAAI,CAAC,CAAC,CAAC,CACxB,KAAC,QAAQ,IAAC,KAAK,EAAC,OAAO,YAAE,IAAI,GAAY,CAC1C,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACjB,KAAC,GAAG,IAAC,SAAS,EAAC,QAAQ,EAAC,MAAM,kBAC3B,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,IAAI,GAAG,CACnC,CAAC,CAAC,CAAC,CACF,KAAC,SAAS,IAAC,OAAO,EAAE,OAAO,GAAI,CAChC,GACG,CACP,EACA,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,YAAG,IAAI,GAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,cAAE,IAAI,GAAY,IACjE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { ComponentOrElement } from '@metamask/snaps-sdk';\nimport {\n  Box,\n  Icon,\n  Image,\n  Link,\n  Skeleton,\n  Text as SnapText,\n} from '@metamask/snaps-sdk/jsx';\nimport type { IconProps } from '@metamask/snaps-sdk/jsx';\n\nimport questionMarkIcon from './question-mark.svg';\n\nconst IconSize = {\n  sm: 16,\n  md: 24,\n  lg: 32,\n  xl: 48,\n} as const;\n\nexport type AssetIconProps = {\n  /** Icon URL; a question-mark icon is shown when missing or blank. */\n  iconUrl?: string | null;\n  size?: keyof typeof IconSize;\n};\n\nexport type AssetProps = {\n  symbol: string;\n  /** Display-ready amount shown before the symbol; omit to show the symbol only. */\n  amount?: string;\n  /** Icon URL; a question-mark icon is shown when missing or blank. */\n  iconUrl?: string | null;\n  /** Snaps icon shown instead of the image, e.g. for network resources. */\n  iconName?: IconProps['name'];\n  /** Whether to render the asset without any icon. */\n  hideIcon?: boolean;\n  /** Explorer link; when set, the asset text is rendered as a link. */\n  link?: string;\n  /**\n   * Display-ready fiat value shown before the asset. The caller decides whether\n   * fiat applies (e.g. `useExternalPricingData`) and formats it with the user's\n   * currency and locale; pass `null` to show no fiat.\n   */\n  fiat?: string | null;\n  /** Whether the fiat value is loading; shows a skeleton in its place. */\n  isFiatLoading?: boolean;\n};\n\n/**\n * Renders a round asset icon, falling back to a question mark.\n *\n * @param props - The component props.\n * @param props.iconUrl - The icon URL.\n * @param props.size - The icon size, `sm` (16px) by default.\n * @returns The icon image.\n */\nexport const AssetIcon = ({\n  iconUrl,\n  size = 'sm',\n}: AssetIconProps): ComponentOrElement => (\n  <Image\n    borderRadius=\"full\"\n    src={iconUrl?.trim() ? iconUrl : questionMarkIcon}\n    height={IconSize[size]}\n    width={IconSize[size]}\n  />\n);\n\n/**\n * Renders an inline asset: optional fiat value (or a loading skeleton), the\n * asset icon, then the amount and symbol, optionally as an explorer link.\n *\n * @param props - The component props.\n * @param props.symbol - The asset symbol.\n * @param props.amount - The display-ready amount.\n * @param props.iconUrl - The icon URL.\n * @param props.iconName - A Snaps icon shown instead of the image.\n * @param props.hideIcon - Whether to render no icon.\n * @param props.link - The explorer link.\n * @param props.fiat - The display-ready fiat value.\n * @param props.isFiatLoading - Whether the fiat value is loading.\n * @returns The asset element.\n * @example\n * ```tsx\n * const price = preferences.useExternalPricingData\n *   ? tokenPrices[assetId]\n *   : null;\n *\n * <Asset\n *   symbol=\"XLM\"\n *   amount=\"1.5\"\n *   iconUrl={iconUrl}\n *   fiat={\n *     price\n *       ? formatFiat(\n *           tokenToFiat('1.5', price),\n *           preferences.currency,\n *           preferences.locale,\n *         )\n *       : null\n *   }\n *   isFiatLoading={tokenPricesFetchStatus === 'fetching'}\n * />;\n * ```\n */\nexport const Asset = ({\n  symbol,\n  amount,\n  iconUrl,\n  iconName,\n  hideIcon = false,\n  link,\n  fiat,\n  isFiatLoading = false,\n}: AssetProps): ComponentOrElement => {\n  const text = amount === undefined ? symbol : `${amount} ${symbol}`;\n\n  return (\n    <Box direction=\"horizontal\" alignment=\"end\">\n      {isFiatLoading ? <Skeleton width={80} /> : null}\n      {!isFiatLoading && fiat ? (\n        <SnapText color=\"muted\">{fiat}</SnapText>\n      ) : null}\n      {hideIcon ? null : (\n        <Box alignment=\"center\" center>\n          {iconName ? (\n            <Icon name={iconName} size=\"md\" />\n          ) : (\n            <AssetIcon iconUrl={iconUrl} />\n          )}\n        </Box>\n      )}\n      {link ? <Link href={link}>{text}</Link> : <SnapText>{text}</SnapText>}\n    </Box>\n  );\n};\n"]}

package/dist/ui/Asset/question-mark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="16" height="16">
+  <path fill="#999999" d="M42.75 24c0 10.59375-8.53125 19.21875-19.125 19.21875-10.6875 0-19.21875-8.625-19.21875-19.21875 0-10.59375 8.53125-19.21875 19.21875-19.21875 10.59375 0 19.125 8.625 19.125 19.21875zM23.625 14.0625c-3.09375 0-5.90625 2.25-5.90625 5.4375 0 0.84375 0.75 1.59375 1.59375 1.59375 0.84375 0 1.59375-0.75 1.59375-1.59375 0-1.125 1.03125-2.25 2.71875-2.25 1.59375 0 2.625 1.125 2.625 2.25 0 0.5625-0.375 1.03125-1.3125 1.59375l0 0c-1.125 0.75-3 1.96875-3 4.5l0 0.46875c0 0.84375 0.75 1.59375 1.6875 1.59375 0.84375 0 1.59375-0.75 1.59375-1.59375l0-0.46875c0-0.65625 0.28125-1.125 1.40625-1.78125 1.03125-0.65625 2.8125-1.875 2.8125-4.3125 0-3.1875-2.8125-5.4375-5.8125-5.4375zM23.53125 31.875c-0.84375 0-1.59375 0.65625-1.59375 1.59375 0 0.84375 0.75 1.59375 1.59375 1.59375l0.09375 0c0.84375 0 1.59375-0.75 1.59375-1.59375 0-0.9375-0.75-1.59375-1.59375-1.59375z"/>
+</svg>

package/dist/ui/EstimatedChanges/EstimatedChanges.cjs

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EstimatedChanges = void 0;
+const jsx_runtime_1 = require("@metamask/snaps-sdk/jsx-runtime");
+const jsx_1 = require("@metamask/snaps-sdk/jsx");
+const Header = ({ labels, }) => ((0, jsx_runtime_1.jsxs)(jsx_1.Box, { direction: "horizontal", alignment: "start", children: [(0, jsx_runtime_1.jsx)(jsx_1.Text, { fontWeight: "medium", children: labels.title }), (0, jsx_runtime_1.jsx)(jsx_1.Tooltip, { content: labels.tooltip, children: (0, jsx_runtime_1.jsx)(jsx_1.Icon, { name: "info" }) })] }));
+const MessageSection = ({ labels, message, }) => ((0, jsx_runtime_1.jsxs)(jsx_1.Section, { direction: "vertical", children: [(0, jsx_runtime_1.jsx)(Header, { labels: labels }), (0, jsx_runtime_1.jsx)(jsx_1.Text, { color: "alternative", children: message })] }));
+const AssetRow = ({ asset, }) => {
+    const isOut = asset.type === 'out';
+    const isUnknownValue = asset.value === null;
+    let label;
+    if (isUnknownValue) {
+        label = `– ${asset.symbol}`;
+    }
+    else {
+        const sign = isOut ? '-' : '+';
+        label = `${sign}${asset.value} ${asset.symbol}`;
+    }
+    const successOrError = isOut ? 'error' : 'success';
+    return ((0, jsx_runtime_1.jsxs)(jsx_1.Box, { direction: "vertical", crossAlignment: "end", children: [(0, jsx_runtime_1.jsxs)(jsx_1.Box, { direction: "horizontal", alignment: "end", center: true, children: [asset.logo ? ((0, jsx_runtime_1.jsx)(jsx_1.Image, { src: asset.logo, borderRadius: "full", height: 16, width: 16 })) : null, (0, jsx_runtime_1.jsx)(jsx_1.Text, { color: isUnknownValue ? 'alternative' : successOrError, children: label })] }), asset.fiat ? (0, jsx_runtime_1.jsx)(jsx_1.Text, { color: "muted", children: asset.fiat }) : null] }));
+};
+const AssetGroup = ({ title, assets, }) => assets.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_1.Box, { alignment: "space-between", direction: "horizontal", children: [(0, jsx_runtime_1.jsx)(jsx_1.Text, { fontWeight: "medium", color: "alternative", children: title }), (0, jsx_runtime_1.jsx)(jsx_1.Box, { direction: "vertical", alignment: "end", children: assets.map((asset, index) => ((0, jsx_runtime_1.jsx)(jsx_1.Box, { children: (0, jsx_runtime_1.jsx)(AssetRow, { asset: asset }) }, `${asset.type}-${asset.symbol}-${index}`))) })] })) : null;
+/**
+ * Renders the estimated balance changes of a transaction, grouped into
+ * "send" and "receive" rows, with loading, error and empty states.
+ *
+ * The header is always rendered. The body depends on the props:
+ *
+ * 1. No assets and `isFetching` → loading skeleton (takes precedence over
+ * `isUnavailable`).
+ * 2. No assets and `isUnavailable` → "not available" message.
+ * 3. No assets otherwise → "no changes" message (an empty result means the
+ * transaction does not change any balance).
+ * 4. Assets present → "send" and/or "receive" groups; a group with no assets
+ * is omitted. `isFetching` and `isUnavailable` are ignored in this case, as
+ * rows seeded locally by the caller are final.
+ *
+ * @param props - The component props.
+ * @param props.assets - The display-ready asset changes.
+ * @param props.labels - The translated labels.
+ * @param props.isFetching - Whether the estimate is still being fetched.
+ * @param props.isUnavailable - Whether the estimate could not be produced.
+ * @returns The estimated changes section.
+ */
+const EstimatedChanges = ({ assets, labels, isFetching, isUnavailable, }) => {
+    // Rows seeded locally by the caller are final, so they are never replaced by
+    // the loading/unavailable states.
+    if (assets.length === 0) {
+        if (isFetching) {
+            return ((0, jsx_runtime_1.jsxs)(jsx_1.Section, { direction: "vertical", children: [(0, jsx_runtime_1.jsx)(Header, { labels: labels }), (0, jsx_runtime_1.jsxs)(jsx_1.Box, { alignment: "space-between", direction: "horizontal", children: [(0, jsx_runtime_1.jsx)(jsx_1.Skeleton, { width: 60 }), (0, jsx_runtime_1.jsx)(jsx_1.Skeleton, { width: 100 })] })] }));
+        }
+        return ((0, jsx_runtime_1.jsx)(MessageSection, { labels: labels, message: isUnavailable ? labels.notAvailable : labels.noChanges }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_1.Section, { children: [(0, jsx_runtime_1.jsx)(Header, { labels: labels }), (0, jsx_runtime_1.jsx)(AssetGroup, { title: labels.send, assets: assets.filter((asset) => asset.type === 'out') }), (0, jsx_runtime_1.jsx)(AssetGroup, { title: labels.receive, assets: assets.filter((asset) => asset.type === 'in') })] }));
+};
+exports.EstimatedChanges = EstimatedChanges;
+//# sourceMappingURL=EstimatedChanges.cjs.map

package/dist/ui/EstimatedChanges/EstimatedChanges.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EstimatedChanges.cjs","sourceRoot":"","sources":["../../../src/ui/EstimatedChanges/EstimatedChanges.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentOrElement } from '@metamask/snaps-sdk';\nimport {\n  Box,\n  Icon,\n  Image,\n  Section,\n  Skeleton,\n  Text as SnapText,\n  Tooltip,\n} from '@metamask/snaps-sdk/jsx';\n\nexport type EstimatedChangesAsset = {\n  type: 'in' | 'out';\n  /** Display-ready amount, or `null` when the amount is unknown. */\n  value: string | null;\n  symbol: string;\n  logo: string | null;\n  /** Display-ready fiat value shown under the amount. */\n  fiat?: string | null;\n};\n\nexport type EstimatedChangesLabels = {\n  title: string;\n  tooltip: string;\n  send: string;\n  receive: string;\n  notAvailable: string;\n  noChanges: string;\n};\n\nexport type EstimatedChangesProps = {\n  assets: EstimatedChangesAsset[];\n  labels: EstimatedChangesLabels;\n  /** Whether the estimate is still being fetched. */\n  isFetching: boolean;\n  /** Whether the estimate could not be produced (e.g. fetch or simulation failure). */\n  isUnavailable: boolean;\n};\n\nconst Header = ({\n  labels,\n}: {\n  labels: EstimatedChangesLabels;\n}): ComponentOrElement => (\n  <Box direction=\"horizontal\" alignment=\"start\">\n    <SnapText fontWeight=\"medium\">{labels.title}</SnapText>\n    <Tooltip content={labels.tooltip}>\n      <Icon name=\"info\" />\n    </Tooltip>\n  </Box>\n);\n\nconst MessageSection = ({\n  labels,\n  message,\n}: {\n  labels: EstimatedChangesLabels;\n  message: string;\n}): ComponentOrElement => (\n  <Section direction=\"vertical\">\n    <Header labels={labels} />\n    <SnapText color=\"alternative\">{message}</SnapText>\n  </Section>\n);\n\nconst AssetRow = ({\n  asset,\n}: {\n  asset: EstimatedChangesAsset;\n}): ComponentOrElement => {\n  const isOut = asset.type === 'out';\n  const isUnknownValue = asset.value === null;\n  let label: string;\n  if (isUnknownValue) {\n    label = `– ${asset.symbol}`;\n  } else {\n    const sign = isOut ? '-' : '+';\n    label = `${sign}${asset.value} ${asset.symbol}`;\n  }\n  const successOrError = isOut ? 'error' : 'success';\n\n  return (\n    <Box direction=\"vertical\" crossAlignment=\"end\">\n      <Box direction=\"horizontal\" alignment=\"end\" center>\n        {asset.logo ? (\n          <Image src={asset.logo} borderRadius=\"full\" height={16} width={16} />\n        ) : null}\n        <SnapText color={isUnknownValue ? 'alternative' : successOrError}>\n          {label}\n        </SnapText>\n      </Box>\n      {asset.fiat ? <SnapText color=\"muted\">{asset.fiat}</SnapText> : null}\n    </Box>\n  );\n};\n\nconst AssetGroup = ({\n  title,\n  assets,\n}: {\n  title: string;\n  assets: EstimatedChangesAsset[];\n}): ComponentOrElement | null =>\n  assets.length > 0 ? (\n    <Box alignment=\"space-between\" direction=\"horizontal\">\n      <SnapText fontWeight=\"medium\" color=\"alternative\">\n        {title}\n      </SnapText>\n      <Box direction=\"vertical\" alignment=\"end\">\n        {assets.map((asset, index) => (\n          <Box key={`${asset.type}-${asset.symbol}-${index}`}>\n            <AssetRow asset={asset} />\n          </Box>\n        ))}\n      </Box>\n    </Box>\n  ) : null;\n\n/**\n * Renders the estimated balance changes of a transaction, grouped into\n * \"send\" and \"receive\" rows, with loading, error and empty states.\n *\n * The header is always rendered. The body depends on the props:\n *\n * 1. No assets and `isFetching` → loading skeleton (takes precedence over\n * `isUnavailable`).\n * 2. No assets and `isUnavailable` → \"not available\" message.\n * 3. No assets otherwise → \"no changes\" message (an empty result means the\n * transaction does not change any balance).\n * 4. Assets present → \"send\" and/or \"receive\" groups; a group with no assets\n * is omitted. `isFetching` and `isUnavailable` are ignored in this case, as\n * rows seeded locally by the caller are final.\n *\n * @param props - The component props.\n * @param props.assets - The display-ready asset changes.\n * @param props.labels - The translated labels.\n * @param props.isFetching - Whether the estimate is still being fetched.\n * @param props.isUnavailable - Whether the estimate could not be produced.\n * @returns The estimated changes section.\n */\nexport const EstimatedChanges = ({\n  assets,\n  labels,\n  isFetching,\n  isUnavailable,\n}: EstimatedChangesProps): ComponentOrElement => {\n  // Rows seeded locally by the caller are final, so they are never replaced by\n  // the loading/unavailable states.\n  if (assets.length === 0) {\n    if (isFetching) {\n      return (\n        <Section direction=\"vertical\">\n          <Header labels={labels} />\n          <Box alignment=\"space-between\" direction=\"horizontal\">\n            <Skeleton width={60} />\n            <Skeleton width={100} />\n          </Box>\n        </Section>\n      );\n    }\n\n    return (\n      <MessageSection\n        labels={labels}\n        message={isUnavailable ? labels.notAvailable : labels.noChanges}\n      />\n    );\n  }\n\n  return (\n    <Section>\n      <Header labels={labels} />\n      <AssetGroup\n        title={labels.send}\n        assets={assets.filter((asset) => asset.type === 'out')}\n      />\n      <AssetGroup\n        title={labels.receive}\n        assets={assets.filter((asset) => asset.type === 'in')}\n      />\n    </Section>\n  );\n};\n"]}

package/dist/ui/EstimatedChanges/EstimatedChanges.d.cts

@@ -0,0 +1,50 @@
+import type { ComponentOrElement } from "@metamask/snaps-sdk";
+export type EstimatedChangesAsset = {
+    type: 'in' | 'out';
+    /** Display-ready amount, or `null` when the amount is unknown. */
+    value: string | null;
+    symbol: string;
+    logo: string | null;
+    /** Display-ready fiat value shown under the amount. */
+    fiat?: string | null;
+};
+export type EstimatedChangesLabels = {
+    title: string;
+    tooltip: string;
+    send: string;
+    receive: string;
+    notAvailable: string;
+    noChanges: string;
+};
+export type EstimatedChangesProps = {
+    assets: EstimatedChangesAsset[];
+    labels: EstimatedChangesLabels;
+    /** Whether the estimate is still being fetched. */
+    isFetching: boolean;
+    /** Whether the estimate could not be produced (e.g. fetch or simulation failure). */
+    isUnavailable: boolean;
+};
+/**
+ * Renders the estimated balance changes of a transaction, grouped into
+ * "send" and "receive" rows, with loading, error and empty states.
+ *
+ * The header is always rendered. The body depends on the props:
+ *
+ * 1. No assets and `isFetching` → loading skeleton (takes precedence over
+ * `isUnavailable`).
+ * 2. No assets and `isUnavailable` → "not available" message.
+ * 3. No assets otherwise → "no changes" message (an empty result means the
+ * transaction does not change any balance).
+ * 4. Assets present → "send" and/or "receive" groups; a group with no assets
+ * is omitted. `isFetching` and `isUnavailable` are ignored in this case, as
+ * rows seeded locally by the caller are final.
+ *
+ * @param props - The component props.
+ * @param props.assets - The display-ready asset changes.
+ * @param props.labels - The translated labels.
+ * @param props.isFetching - Whether the estimate is still being fetched.
+ * @param props.isUnavailable - Whether the estimate could not be produced.
+ * @returns The estimated changes section.
+ */
+export declare const EstimatedChanges: ({ assets, labels, isFetching, isUnavailable, }: EstimatedChangesProps) => ComponentOrElement;
+//# sourceMappingURL=EstimatedChanges.d.cts.map

package/dist/ui/EstimatedChanges/EstimatedChanges.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EstimatedChanges.d.cts","sourceRoot":"","sources":["../../../src/ui/EstimatedChanges/EstimatedChanges.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,4BAA4B;AAW9D,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,IAAI,GAAG,KAAK,CAAC;IACnB,kEAAkE;IAClE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,EAAE,qBAAqB,EAAE,CAAC;IAChC,MAAM,EAAE,sBAAsB,CAAC;IAC/B,mDAAmD;IACnD,UAAU,EAAE,OAAO,CAAC;IACpB,qFAAqF;IACrF,aAAa,EAAE,OAAO,CAAC;CACxB,CAAC;AAiFF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,gBAAgB,GAAI,gDAK9B,qBAAqB,KAAG,kBAqC1B,CAAC"}

package/dist/ui/EstimatedChanges/EstimatedChanges.d.mts

@@ -0,0 +1,50 @@
+import type { ComponentOrElement } from "@metamask/snaps-sdk";
+export type EstimatedChangesAsset = {
+    type: 'in' | 'out';
+    /** Display-ready amount, or `null` when the amount is unknown. */
+    value: string | null;
+    symbol: string;
+    logo: string | null;
+    /** Display-ready fiat value shown under the amount. */
+    fiat?: string | null;
+};
+export type EstimatedChangesLabels = {
+    title: string;
+    tooltip: string;
+    send: string;
+    receive: string;
+    notAvailable: string;
+    noChanges: string;
+};
+export type EstimatedChangesProps = {
+    assets: EstimatedChangesAsset[];
+    labels: EstimatedChangesLabels;
+    /** Whether the estimate is still being fetched. */
+    isFetching: boolean;
+    /** Whether the estimate could not be produced (e.g. fetch or simulation failure). */
+    isUnavailable: boolean;
+};
+/**
+ * Renders the estimated balance changes of a transaction, grouped into
+ * "send" and "receive" rows, with loading, error and empty states.
+ *
+ * The header is always rendered. The body depends on the props:
+ *
+ * 1. No assets and `isFetching` → loading skeleton (takes precedence over
+ * `isUnavailable`).
+ * 2. No assets and `isUnavailable` → "not available" message.
+ * 3. No assets otherwise → "no changes" message (an empty result means the
+ * transaction does not change any balance).
+ * 4. Assets present → "send" and/or "receive" groups; a group with no assets
+ * is omitted. `isFetching` and `isUnavailable` are ignored in this case, as
+ * rows seeded locally by the caller are final.
+ *
+ * @param props - The component props.
+ * @param props.assets - The display-ready asset changes.
+ * @param props.labels - The translated labels.
+ * @param props.isFetching - Whether the estimate is still being fetched.
+ * @param props.isUnavailable - Whether the estimate could not be produced.
+ * @returns The estimated changes section.
+ */
+export declare const EstimatedChanges: ({ assets, labels, isFetching, isUnavailable, }: EstimatedChangesProps) => ComponentOrElement;
+//# sourceMappingURL=EstimatedChanges.d.mts.map

package/dist/ui/EstimatedChanges/EstimatedChanges.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EstimatedChanges.d.mts","sourceRoot":"","sources":["../../../src/ui/EstimatedChanges/EstimatedChanges.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,4BAA4B;AAW9D,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,IAAI,GAAG,KAAK,CAAC;IACnB,kEAAkE;IAClE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,EAAE,qBAAqB,EAAE,CAAC;IAChC,MAAM,EAAE,sBAAsB,CAAC;IAC/B,mDAAmD;IACnD,UAAU,EAAE,OAAO,CAAC;IACpB,qFAAqF;IACrF,aAAa,EAAE,OAAO,CAAC;CACxB,CAAC;AAiFF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,gBAAgB,GAAI,gDAK9B,qBAAqB,KAAG,kBAqC1B,CAAC"}