@velora-dex/widget 0.5.0 → 0.6.0

package/dist/components/widget/TradeOverview/TradeDetails.js

@@ -1,379 +1,179 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { d as distExports } from '../../../_virtual/index.js';
-import { TokenBadge } from '../TokenBadge/TokenBadge.js';
-import { formatTokenAmount } from '../../../lib/utils/formatTokenBalance.js';
-import { useTradeFlowContext } from './tradeFlowContext.js';
-import { TradeDetailsDisplay } from './TradeDetailsDisplay.js';
-import { isSwapTradeFlowType } from '../../../hooks/swap/tradeFlow/common/utils.js';
-import { WarningWithTitle } from '../Warning/Warning.js';
-import { useTokenPrice } from '../../../hooks/tokens/prices/useTokenPrices.js';
-import { PayReceiveInfo } from '../PayReceiveInfo/PayReceiveInfo.js';
-import { InfoIcon } from 'lucide-react';
-import { SwapRate } from '../SwapRate/SwapRate.js';
-import { parseUnits } from 'viem';
-
-const badgeClasses = {
-  root: "text-xs text-contrast-1 dark:text-contrast-8 font-medium"
-};
-const TradeAnimatedProgressDetailsBase = (t0) => {
-  const $ = distExports.c(46);
-  const {
-    fromToken,
-    toToken,
-    fromAmount,
-    toAmount,
-    tradeFlowType,
-    swapSide: t1
-  } = t0;
-  const swapSide = t1 === void 0 ? "SELL" : t1;
-  let t2;
-  if ($[0] !== tradeFlowType) {
-    t2 = isSwapTradeFlowType(tradeFlowType);
-    $[0] = tradeFlowType;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
-  const isSwapFlow = t2;
-  const isSell = swapSide === "SELL";
-  let fromTokenLabel;
-  let toTokenLabel;
-  if (isSwapFlow) {
-    fromTokenLabel = isSell ? "Swap" : "For (at most)";
-    toTokenLabel = isSell ? "For (at least)" : "Buy";
-  } else {
-    fromTokenLabel = "Pay";
-    toTokenLabel = "Receive";
-  }
-  let T0;
-  let t10;
-  let t11;
-  let t12;
-  let t13;
-  let t14;
-  let t15;
-  let t3;
-  let t4;
-  let t5;
-  let t6;
-  let t7;
-  let t8;
-  let t9;
-  if ($[2] !== fromAmount || $[3] !== fromToken || $[4] !== fromTokenLabel || $[5] !== isSell || $[6] !== isSwapFlow || $[7] !== toAmount || $[8] !== toToken || $[9] !== toTokenLabel) {
-    const fromTokenObj = {
-      token: fromToken,
-      label: fromTokenLabel,
-      amount: fromAmount
-    };
-    const toTokenObj = {
-      token: toToken,
-      label: toTokenLabel,
-      amount: toAmount
-    };
-    const [firstToken, secondToken] = isSell || !isSwapFlow ? [fromTokenObj, toTokenObj] : [toTokenObj, fromTokenObj];
-    t14 = "flex flex-col bg-contrast-8 dark:bg-contrast-3 rounded-sm shadow-card-1 text-contrast-5 dark:text-contrast-5";
-    if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-      t15 = /* @__PURE__ */ jsx(TradeDetailsDisplay, {});
-      $[24] = t15;
-    } else {
-      t15 = $[24];
-    }
-    t12 = "flex items-center justify-between gap-2 py-[8px] px-[16px]";
-    t13 = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-xs", children: firstToken.label }),
-      /* @__PURE__ */ jsx(TokenBadge, { address: firstToken.token.address, chainId: firstToken.token.network, img: firstToken.token.img, symbol: firstToken.token.symbol, showNetworkIcon: true, explorerLink: true, amount: formatTokenAmount(firstToken.amount, 5), classes: badgeClasses })
-    ] });
-    t10 = "flex items-center gap-1";
-    t11 = /* @__PURE__ */ jsx("span", { className: "text-xs", children: secondToken.label });
-    T0 = TokenBadge;
-    t3 = secondToken.token.address;
-    t4 = secondToken.token.network;
-    t5 = secondToken.token.img;
-    t6 = secondToken.token.symbol;
-    t7 = true;
-    t8 = true;
-    t9 = formatTokenAmount(secondToken.amount, 5);
-    $[2] = fromAmount;
-    $[3] = fromToken;
-    $[4] = fromTokenLabel;
-    $[5] = isSell;
-    $[6] = isSwapFlow;
-    $[7] = toAmount;
-    $[8] = toToken;
-    $[9] = toTokenLabel;
-    $[10] = T0;
-    $[11] = t10;
-    $[12] = t11;
-    $[13] = t12;
-    $[14] = t13;
-    $[15] = t14;
-    $[16] = t15;
-    $[17] = t3;
-    $[18] = t4;
-    $[19] = t5;
-    $[20] = t6;
-    $[21] = t7;
-    $[22] = t8;
-    $[23] = t9;
-  } else {
-    T0 = $[10];
-    t10 = $[11];
-    t11 = $[12];
-    t12 = $[13];
-    t13 = $[14];
-    t14 = $[15];
-    t15 = $[16];
-    t3 = $[17];
-    t4 = $[18];
-    t5 = $[19];
-    t6 = $[20];
-    t7 = $[21];
-    t8 = $[22];
-    t9 = $[23];
-  }
-  let t16;
-  if ($[25] !== T0 || $[26] !== t3 || $[27] !== t4 || $[28] !== t5 || $[29] !== t6 || $[30] !== t7 || $[31] !== t8 || $[32] !== t9) {
-    t16 = /* @__PURE__ */ jsx(T0, { address: t3, chainId: t4, img: t5, symbol: t6, showNetworkIcon: t7, explorerLink: t8, amount: t9, classes: badgeClasses });
-    $[25] = T0;
-    $[26] = t3;
-    $[27] = t4;
-    $[28] = t5;
-    $[29] = t6;
-    $[30] = t7;
-    $[31] = t8;
-    $[32] = t9;
-    $[33] = t16;
-  } else {
-    t16 = $[33];
-  }
-  let t17;
-  if ($[34] !== t10 || $[35] !== t11 || $[36] !== t16) {
-    t17 = /* @__PURE__ */ jsxs("div", { className: t10, children: [
-      t11,
-      t16
-    ] });
-    $[34] = t10;
-    $[35] = t11;
-    $[36] = t16;
-    $[37] = t17;
-  } else {
-    t17 = $[37];
-  }
-  let t18;
-  if ($[38] !== t12 || $[39] !== t13 || $[40] !== t17) {
-    t18 = /* @__PURE__ */ jsxs("div", { className: t12, children: [
-      t13,
-      t17
-    ] });
-    $[38] = t12;
-    $[39] = t13;
-    $[40] = t17;
-    $[41] = t18;
-  } else {
-    t18 = $[41];
-  }
-  let t19;
-  if ($[42] !== t14 || $[43] !== t15 || $[44] !== t18) {
-    t19 = /* @__PURE__ */ jsxs("div", { className: t14, children: [
-      t15,
-      t18
-    ] });
-    $[42] = t14;
-    $[43] = t15;
-    $[44] = t18;
-    $[45] = t19;
-  } else {
-    t19 = $[45];
-  }
-  return t19;
-};
-const tokenBadgeClasses = {
-  amount: "dark:text-contrast-9",
-  symbol: "dark:text-contrast-9",
-  logo: "size-[18px]"
+import { TokenBadge as e } from "../TokenBadge/TokenBadge.js";
+import { useTokenPrice as t } from "../../../hooks/tokens/prices/useTokenPrices.js";
+import { SwapRate as n } from "../SwapRate/SwapRate.js";
+import { WarningWithTitle as r } from "../Warning/Warning.js";
+import { formatTokenAmount as i } from "../../../lib/utils/formatTokenBalance.js";
+import { PayReceiveInfo as a } from "../PayReceiveInfo/PayReceiveInfo.js";
+import { useTradeFlowContext as o } from "./tradeFlowContext.js";
+import { TradeDetailsDisplay as s } from "./TradeDetailsDisplay.js";
+import { isSwapTradeFlowType as c } from "../../../hooks/swap/tradeFlow/common/utils.js";
+import { c as l } from "react-compiler-runtime";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { parseUnits as f } from "viem";
+import { InfoIcon as p } from "lucide-react";
+//#region src/components/widget/TradeOverview/TradeDetails.tsx
+var m = { root: "text-xs text-contrast-1 dark:text-contrast-8 font-medium" }, h = (t) => {
+	let n = l(46), { fromToken: r, toToken: a, fromAmount: o, toAmount: f, tradeFlowType: p, swapSide: h } = t, g = h === void 0 ? "SELL" : h, _;
+	n[0] === p ? _ = n[1] : (_ = c(p), n[0] = p, n[1] = _);
+	let v = _, y = g === "SELL", b, x;
+	v ? (b = y ? "Swap" : "For (at most)", x = y ? "For (at least)" : "Buy") : (b = "Pay", x = "Receive");
+	let S, C, w, T, E, D, O, k, A, j, M, N, P, F;
+	if (n[2] !== o || n[3] !== r || n[4] !== b || n[5] !== y || n[6] !== v || n[7] !== f || n[8] !== a || n[9] !== x) {
+		let t = {
+			token: r,
+			label: b,
+			amount: o
+		}, c = {
+			token: a,
+			label: x,
+			amount: f
+		}, [l, p] = y || !v ? [t, c] : [c, t];
+		D = "flex flex-col bg-contrast-8 dark:bg-contrast-3 rounded-sm shadow-card-1 text-contrast-5 dark:text-contrast-5", n[24] === Symbol.for("react.memo_cache_sentinel") ? (O = /* @__PURE__ */ u(s, {}), n[24] = O) : O = n[24], T = "flex items-center justify-between gap-2 py-[8px] px-[16px]", E = /* @__PURE__ */ d("div", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ u("span", {
+				className: "text-xs",
+				children: l.label
+			}), /* @__PURE__ */ u(e, {
+				address: l.token.address,
+				chainId: l.token.network,
+				img: l.token.img,
+				symbol: l.token.symbol,
+				showNetworkIcon: !0,
+				explorerLink: !0,
+				amount: i(l.amount, 5),
+				classes: m
+			})]
+		}), C = "flex items-center gap-1", w = /* @__PURE__ */ u("span", {
+			className: "text-xs",
+			children: p.label
+		}), S = e, k = p.token.address, A = p.token.network, j = p.token.img, M = p.token.symbol, N = !0, P = !0, F = i(p.amount, 5), n[2] = o, n[3] = r, n[4] = b, n[5] = y, n[6] = v, n[7] = f, n[8] = a, n[9] = x, n[10] = S, n[11] = C, n[12] = w, n[13] = T, n[14] = E, n[15] = D, n[16] = O, n[17] = k, n[18] = A, n[19] = j, n[20] = M, n[21] = N, n[22] = P, n[23] = F;
+	} else S = n[10], C = n[11], w = n[12], T = n[13], E = n[14], D = n[15], O = n[16], k = n[17], A = n[18], j = n[19], M = n[20], N = n[21], P = n[22], F = n[23];
+	let I;
+	n[25] !== S || n[26] !== k || n[27] !== A || n[28] !== j || n[29] !== M || n[30] !== N || n[31] !== P || n[32] !== F ? (I = /* @__PURE__ */ u(S, {
+		address: k,
+		chainId: A,
+		img: j,
+		symbol: M,
+		showNetworkIcon: N,
+		explorerLink: P,
+		amount: F,
+		classes: m
+	}), n[25] = S, n[26] = k, n[27] = A, n[28] = j, n[29] = M, n[30] = N, n[31] = P, n[32] = F, n[33] = I) : I = n[33];
+	let L;
+	n[34] !== C || n[35] !== w || n[36] !== I ? (L = /* @__PURE__ */ d("div", {
+		className: C,
+		children: [w, I]
+	}), n[34] = C, n[35] = w, n[36] = I, n[37] = L) : L = n[37];
+	let R;
+	n[38] !== T || n[39] !== E || n[40] !== L ? (R = /* @__PURE__ */ d("div", {
+		className: T,
+		children: [E, L]
+	}), n[38] = T, n[39] = E, n[40] = L, n[41] = R) : R = n[41];
+	let z;
+	return n[42] !== D || n[43] !== O || n[44] !== R ? (z = /* @__PURE__ */ d("div", {
+		className: D,
+		children: [O, R]
+	}), n[42] = D, n[43] = O, n[44] = R, n[45] = z) : z = n[45], z;
+}, g = {
+	amount: "dark:text-contrast-9",
+	symbol: "dark:text-contrast-9",
+	logo: "size-[18px]"
 };
-function constructPayReceiveInfoProps({
-  extra,
-  srcTokenPrice,
-  destTokenPrice
-}) {
-  const {
-    srcToken,
-    destToken,
-    srcAmountUnit,
-    destAmountUnit
-  } = extra;
-  const formattedSrcAmount = formatTokenAmount(srcAmountUnit);
-  const formattedDestAmount = formatTokenAmount(destAmountUnit);
-  const srcUsdAmount = srcTokenPrice !== void 0 ? parseFloat(srcAmountUnit) * srcTokenPrice : void 0;
-  const destUsdAmount = destTokenPrice !== void 0 ? parseFloat(destAmountUnit) * destTokenPrice : void 0;
-  const isCrossChain = srcToken.network !== destToken.network;
-  const topTokenBadgeProps = {
-    address: srcToken.address,
-    symbol: srcToken.symbol,
-    chainId: srcToken.network,
-    img: srcToken.img,
-    amount: formattedSrcAmount,
-    amountPosition: "right",
-    classes: tokenBadgeClasses,
-    showNetworkIcon: isCrossChain
-  };
-  const bottomTokenBadgeProps = {
-    address: destToken.address,
-    symbol: destToken.symbol,
-    chainId: destToken.network,
-    img: destToken.img,
-    amount: formattedDestAmount,
-    amountPosition: "right",
-    classes: tokenBadgeClasses,
-    showNetworkIcon: isCrossChain
-  };
-  const srcAmountWei = parseUnits(srcAmountUnit, srcToken.decimals);
-  const destAmountWei = parseUnits(destAmountUnit, destToken.decimals);
-  return {
-    topToken: {
-      tokenBadgeProps: topTokenBadgeProps,
-      label: "Pay",
-      usdAmount: srcUsdAmount,
-      showNetwork: false,
-      classes: {
-        section: "p-4"
-      }
-    },
-    bottomToken: {
-      tokenBadgeProps: bottomTokenBadgeProps,
-      label: "Receive",
-      usdAmount: destUsdAmount,
-      showNetwork: false,
-      extraLabel: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs font-normal text-secondary-orange-peel-1", children: [
-        /* @__PURE__ */ jsx(InfoIcon, { size: 16 }),
-        /* @__PURE__ */ jsx(SwapRate, { srcAmountWei: srcAmountWei.toString(), destAmountWei: destAmountWei.toString(), srcToken, destToken })
-      ] }),
-      classes: {
-        section: "p-4"
-      }
-    },
-    classes: {
-      root: "bg-contrast-9 dark:bg-contrast-3",
-      line: "bg-contrast-7 dark:bg-contrast-2"
-    }
-  };
+function _({ extra: e, srcTokenPrice: t, destTokenPrice: r }) {
+	let { srcToken: a, destToken: o, srcAmountUnit: s, destAmountUnit: c } = e, l = i(s), m = i(c), h = t === void 0 ? void 0 : parseFloat(s) * t, _ = r === void 0 ? void 0 : parseFloat(c) * r, v = a.network !== o.network, y = {
+		address: a.address,
+		symbol: a.symbol,
+		chainId: a.network,
+		img: a.img,
+		amount: l,
+		amountPosition: "right",
+		classes: g,
+		showNetworkIcon: v
+	}, b = {
+		address: o.address,
+		symbol: o.symbol,
+		chainId: o.network,
+		img: o.img,
+		amount: m,
+		amountPosition: "right",
+		classes: g,
+		showNetworkIcon: v
+	}, x = f(s, a.decimals), S = f(c, o.decimals);
+	return {
+		topToken: {
+			tokenBadgeProps: y,
+			label: "Pay",
+			usdAmount: h,
+			showNetwork: !1,
+			classes: { section: "p-4" }
+		},
+		bottomToken: {
+			tokenBadgeProps: b,
+			label: "Receive",
+			usdAmount: _,
+			showNetwork: !1,
+			extraLabel: /* @__PURE__ */ d("div", {
+				className: "flex items-center gap-1.5 text-xs font-normal text-secondary-orange-peel-1",
+				children: [/* @__PURE__ */ u(p, { size: 16 }), /* @__PURE__ */ u(n, {
+					srcAmountWei: x.toString(),
+					destAmountWei: S.toString(),
+					srcToken: a,
+					destToken: o
+				})]
+			}),
+			classes: { section: "p-4" }
+		},
+		classes: {
+			root: "bg-contrast-9 dark:bg-contrast-3",
+			line: "bg-contrast-7 dark:bg-contrast-2"
+		}
+	};
 }
-const warningClasses = {
-  root: "bg-[rgba(255,153,0,0.05)]"
-};
-const PriceChangedWarning = () => {
-  const $ = distExports.c(1);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = /* @__PURE__ */ jsx(WarningWithTitle, { title: "Price changed", message: /* @__PURE__ */ jsx("div", { children: "The price changed since your last attempt. Token amounts may differ. Please review before submitting again." }), classes: warningClasses });
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  return t0;
-};
-const TradeReviewDetailsBase = () => {
-  const $ = distExports.c(12);
-  const {
-    fromToken,
-    toToken,
-    fromAmount,
-    toAmount
-  } = useTradeFlowContext();
-  const {
-    data: srcTokenPrice
-  } = useTokenPrice(fromToken);
-  const {
-    data: destTokenPrice
-  } = useTokenPrice(toToken);
-  let t0;
-  if ($[0] !== destTokenPrice?.price || $[1] !== fromAmount || $[2] !== fromToken || $[3] !== srcTokenPrice?.price || $[4] !== toAmount || $[5] !== toToken) {
-    t0 = constructPayReceiveInfoProps({
-      extra: {
-        srcToken: fromToken,
-        destToken: toToken,
-        srcAmountUnit: fromAmount,
-        destAmountUnit: toAmount
-      },
-      srcTokenPrice: srcTokenPrice?.price,
-      destTokenPrice: destTokenPrice?.price
-    });
-    $[0] = destTokenPrice?.price;
-    $[1] = fromAmount;
-    $[2] = fromToken;
-    $[3] = srcTokenPrice?.price;
-    $[4] = toAmount;
-    $[5] = toToken;
-    $[6] = t0;
-  } else {
-    t0 = $[6];
-  }
-  const payReceiveInfoProps = t0;
-  let t1;
-  if ($[7] !== payReceiveInfoProps) {
-    t1 = /* @__PURE__ */ jsx(PayReceiveInfo, { ...payReceiveInfoProps });
-    $[7] = payReceiveInfoProps;
-    $[8] = t1;
-  } else {
-    t1 = $[8];
-  }
-  let t2;
-  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = /* @__PURE__ */ jsx(PriceChangedWarning, {});
-    $[9] = t2;
-  } else {
-    t2 = $[9];
-  }
-  let t3;
-  if ($[10] !== t1) {
-    t3 = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 rounded-sm shadow-card-1 text-contrast-5 dark:text-contrast-5", children: [
-      t1,
-      t2
-    ] });
-    $[10] = t1;
-    $[11] = t3;
-  } else {
-    t3 = $[11];
-  }
-  return t3;
-};
-const TradeDetails = () => {
-  const $ = distExports.c(8);
-  const {
-    fromToken,
-    toToken,
-    fromAmount,
-    toAmount,
-    swapSide,
-    tradeFlowType,
-    derivedStep
-  } = useTradeFlowContext();
-  if (derivedStep === "prepare-swap") {
-    let t02;
-    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-      t02 = /* @__PURE__ */ jsx(TradeReviewDetailsBase, {});
-      $[0] = t02;
-    } else {
-      t02 = $[0];
-    }
-    return t02;
-  }
-  let t0;
-  if ($[1] !== fromAmount || $[2] !== fromToken || $[3] !== swapSide || $[4] !== toAmount || $[5] !== toToken || $[6] !== tradeFlowType) {
-    t0 = /* @__PURE__ */ jsx(TradeAnimatedProgressDetailsBase, { fromToken, toToken, fromAmount, toAmount, swapSide, tradeFlowType });
-    $[1] = fromAmount;
-    $[2] = fromToken;
-    $[3] = swapSide;
-    $[4] = toAmount;
-    $[5] = toToken;
-    $[6] = tradeFlowType;
-    $[7] = t0;
-  } else {
-    t0 = $[7];
-  }
-  return t0;
+var v = { root: "bg-[rgba(255,153,0,0.05)]" }, y = () => {
+	let e = l(1), t;
+	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ u(r, {
+		title: "Price changed",
+		message: /* @__PURE__ */ u("div", { children: "The price changed since your last attempt. Token amounts may differ. Please review before submitting again." }),
+		classes: v
+	}), e[0] = t) : t = e[0], t;
+}, b = () => {
+	let e = l(12), { fromToken: n, toToken: r, fromAmount: i, toAmount: s } = o(), { data: c } = t(n), { data: f } = t(r), p;
+	e[0] !== f?.price || e[1] !== i || e[2] !== n || e[3] !== c?.price || e[4] !== s || e[5] !== r ? (p = _({
+		extra: {
+			srcToken: n,
+			destToken: r,
+			srcAmountUnit: i,
+			destAmountUnit: s
+		},
+		srcTokenPrice: c?.price,
+		destTokenPrice: f?.price
+	}), e[0] = f?.price, e[1] = i, e[2] = n, e[3] = c?.price, e[4] = s, e[5] = r, e[6] = p) : p = e[6];
+	let m = p, h;
+	e[7] === m ? h = e[8] : (h = /* @__PURE__ */ u(a, { ...m }), e[7] = m, e[8] = h);
+	let g;
+	e[9] === Symbol.for("react.memo_cache_sentinel") ? (g = /* @__PURE__ */ u(y, {}), e[9] = g) : g = e[9];
+	let v;
+	return e[10] === h ? v = e[11] : (v = /* @__PURE__ */ d("div", {
+		className: "flex flex-col gap-4 rounded-sm shadow-card-1 text-contrast-5 dark:text-contrast-5",
+		children: [h, g]
+	}), e[10] = h, e[11] = v), v;
+}, x = () => {
+	let e = l(8), { fromToken: t, toToken: n, fromAmount: r, toAmount: i, swapSide: a, tradeFlowType: s, derivedStep: c } = o();
+	if (c === "prepare-swap") {
+		let t;
+		return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ u(b, {}), e[0] = t) : t = e[0], t;
+	}
+	let d;
+	return e[1] !== r || e[2] !== t || e[3] !== a || e[4] !== i || e[5] !== n || e[6] !== s ? (d = /* @__PURE__ */ u(h, {
+		fromToken: t,
+		toToken: n,
+		fromAmount: r,
+		toAmount: i,
+		swapSide: a,
+		tradeFlowType: s
+	}), e[1] = r, e[2] = t, e[3] = a, e[4] = i, e[5] = n, e[6] = s, e[7] = d) : d = e[7], d;
 };
+//#endregion
+export { x as TradeDetails };
 
-export { TradeDetails };
-//# sourceMappingURL=TradeDetails.js.map
+//# sourceMappingURL=TradeDetails.js.map