@aori/mega-swap-widget 0.1.0

package/dist/WidgetWalletPanel-D7I5TAU3.js

@@ -0,0 +1,789 @@
+"use client";
+"use client";
+import {
+  require_main
+} from "./chunk-LTA7IG3J.js";
+import {
+  useSwapFormContext,
+  useWidgetSwapUIStore
+} from "./chunk-TMC4SUEV.js";
+import {
+  ChainIcon_default,
+  CopyText_default,
+  Skeleton_default,
+  TokenImage_default,
+  TruncateString,
+  formatNumber,
+  getChainConfig,
+  getChainNames,
+  isGasToken,
+  useBulkBalances,
+  useChainData,
+  useEnabledChainIds,
+  useTokenData,
+  useTokenWithLazyLoad,
+  useWidgetConfig
+} from "./chunk-6Q7MSCKS.js";
+import {
+  useWalletState
+} from "./chunk-7AWG6OWF.js";
+import {
+  __toESM
+} from "./chunk-GGM3MDFM.js";
+
+// src/components/WidgetWalletPanel.tsx
+import { useCallback as useCallback4, useState as useState5 } from "react";
+import { useDisconnect } from "wagmi";
+
+// src/hooks/useWidgetWalletData.ts
+import { useCallback, useEffect, useMemo, useRef } from "react";
+function useWidgetWalletData(isActive) {
+  const { address, isConnected } = useWalletState();
+  const { chainDataMap } = useChainData();
+  const availableChainIds = useEnabledChainIds();
+  const { getToken, tokenRegistry } = useTokenData();
+  const { supportedInputTokens, supportedOutputTokens } = useWidgetConfig();
+  const allSupportedTokens = useMemo(() => {
+    if (!supportedInputTokens.length && !supportedOutputTokens.length) return [];
+    const seen = /* @__PURE__ */ new Set();
+    const result = [];
+    for (const t of [...supportedInputTokens, ...supportedOutputTokens]) {
+      const key = `${t.chainId}-${t.address.toLowerCase()}`;
+      if (!seen.has(key)) {
+        seen.add(key);
+        result.push(t);
+      }
+    }
+    return result;
+  }, [supportedInputTokens, supportedOutputTokens]);
+  const { balances, isLoading: balancesLoading, isError: balancesError, refetch } = useBulkBalances(
+    address,
+    availableChainIds,
+    {
+      enabled: isConnected && isActive && !!address,
+      refetchOnWindowFocus: false
+    },
+    allSupportedTokens.length > 0 ? allSupportedTokens : void 0
+  );
+  const supportedSet = useMemo(() => {
+    if (!allSupportedTokens.length) return null;
+    return new Set(allSupportedTokens.map((t) => `${t.chainId}-${t.address.toLowerCase()}`));
+  }, [allSupportedTokens]);
+  const groupedAssets = useMemo(() => {
+    if (!balances || balances.length === 0) return {};
+    const filtered = balances.filter((b) => {
+      if (!b.assetInfo) return false;
+      if (!b.balance || b.balance === "0") return false;
+      if (supportedSet) {
+        return supportedSet.has(`${b.chainId}-${b.address.toLowerCase()}`);
+      }
+      if (isGasToken(b.assetInfo)) return true;
+      if (tokenRegistry.length === 0) return true;
+      return tokenRegistry.some(
+        (t) => t.address.toLowerCase() === b.address.toLowerCase() && t.chainId === b.chainId
+      );
+    });
+    return filtered.reduce((acc, b) => {
+      const key = String(b.chainId);
+      if (!acc[key]) acc[key] = [];
+      acc[key].push({
+        token: b.address,
+        amount: b.balance,
+        decimals: b.decimals,
+        assetInfo: b.assetInfo
+      });
+      return acc;
+    }, {});
+  }, [balances, tokenRegistry, supportedSet]);
+  const totalBalance = useMemo(() => {
+    if (!balances || balances.length === 0) return 0;
+    return balances.reduce((total, b) => {
+      if (!b.assetInfo || b.decimals === void 0) return total;
+      return total + parseFloat(b.balance) / 10 ** b.decimals * (b.assetInfo.price || 0);
+    }, 0);
+  }, [balances]);
+  const chains = useMemo(() => {
+    if (availableChainIds.length === 0) return {};
+    return availableChainIds.reduce(
+      (acc, chainId) => {
+        const apiData = chainDataMap[chainId];
+        const staticConfig = getChainConfig(chainId);
+        acc[chainId.toString()] = {
+          chainId,
+          name: staticConfig?.displayName || apiData?.chainKey || `Chain ${chainId}`
+        };
+        return acc;
+      },
+      {}
+    );
+  }, [availableChainIds, chainDataMap]);
+  const tokenRegistryForPanel = useMemo(
+    () => tokenRegistry.map((t) => ({ address: t.address, chainId: t.chainId })),
+    [tokenRegistry]
+  );
+  const refetchTimerRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (refetchTimerRef.current) clearTimeout(refetchTimerRef.current);
+    };
+  }, []);
+  const refetchBalances = useCallback(() => {
+    if (refetchTimerRef.current) clearTimeout(refetchTimerRef.current);
+    refetchTimerRef.current = setTimeout(() => refetch(), 2e3);
+  }, [refetch]);
+  return {
+    address,
+    isConnected,
+    groupedAssets,
+    totalBalance,
+    balancesLoading,
+    balancesError,
+    chains,
+    getToken,
+    useTokenWithLazyLoad,
+    tokenRegistry: tokenRegistryForPanel,
+    refetchBalances
+  };
+}
+
+// src/components/wallet/WidgetWalletCard.tsx
+var import_ethereum_gradient_base64 = __toESM(require_main(), 1);
+import { jsx, jsxs } from "react/jsx-runtime";
+var WidgetWalletCard = ({
+  address,
+  totalBalance,
+  isLoading = false
+}) => {
+  const formatBalance = (balance) => new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(balance);
+  return /* @__PURE__ */ jsx("div", { className: "p-2 w-full flex justify-center", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative w-full h-[140px] overflow-hidden",
+      style: {
+        borderRadius: "var(--widget-radius)",
+        border: "1px var(--widget-border-style) var(--widget-border)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-0", children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              className: "w-full h-full object-cover opacity-60",
+              src: (0, import_ethereum_gradient_base64.makeGradient)(address),
+              alt: "address gradient"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex h-full flex-col justify-between p-3", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-2xs uppercase mono", style: { color: "var(--widget-muted-foreground)", opacity: 0.7 }, children: "Token Balance:" }),
+            isLoading ? /* @__PURE__ */ jsx(Skeleton_default, { className: "h-8 w-28 bg-white/10 rounded mt-1" }) : /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold mt-0.5", style: { color: "var(--widget-foreground)" }, children: formatBalance(totalBalance) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(CopyText_default, { text: address, type: "address", children: /* @__PURE__ */ jsx("p", { className: "mono text-2xs", style: { color: "var(--widget-foreground)", opacity: 0.7 }, children: address }) }) })
+        ] })
+      ]
+    }
+  ) });
+};
+
+// src/components/wallet/WidgetWalletPortfolio.tsx
+import { useCallback as useCallback2, useMemo as useMemo2, useState as useState2 } from "react";
+
+// src/components/wallet/WidgetWalletAssetItem.tsx
+import { useState } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var WidgetWalletAssetItem = ({
+  asset,
+  balanceAmount,
+  balanceDecimals,
+  price,
+  onSelect,
+  getToken,
+  useTokenWithLazyLoad: useTokenWithLazyLoad2
+}) => {
+  const [hovered, setHovered] = useState(false);
+  const balance = balanceDecimals !== void 0 ? parseFloat(balanceAmount) / 10 ** balanceDecimals : 0;
+  const lazyLoadResult = useTokenWithLazyLoad2?.(asset.chainId, asset.address);
+  const lazyToken = lazyLoadResult?.token;
+  let finalPrice = price ?? null;
+  if (isGasToken(asset) && finalPrice == null) {
+    if (lazyToken?.price != null) {
+      finalPrice = lazyToken.price;
+    } else if (getToken) {
+      finalPrice = getToken(asset.chainId, asset.address)?.price ?? null;
+    }
+  }
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      className: "flex h-[52px] w-full flex-row items-center p-3 cursor-pointer transition-colors",
+      style: {
+        borderBottom: "1px var(--widget-border-style) var(--widget-border)",
+        backgroundColor: hovered ? "var(--widget-secondary)" : "transparent"
+      },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      onClick: () => onSelect?.(asset),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect?.(asset);
+        }
+      },
+      children: /* @__PURE__ */ jsxs2("div", { className: "flex h-full w-full flex-row items-center justify-between", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex h-full flex-row items-center gap-2", children: [
+          /* @__PURE__ */ jsx2(TokenImage_default, { asset, size: "sm" }),
+          /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-start", children: [
+            /* @__PURE__ */ jsx2("p", { className: "text-sm font-medium uppercase", style: { color: "var(--widget-foreground)" }, children: asset.symbol }),
+            balance > 0 && /* @__PURE__ */ jsx2("p", { className: "mono text-xs", style: { color: "var(--widget-muted-foreground)" }, children: balance.toFixed(4) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2("p", { className: "text-sm font-medium", style: { color: "var(--widget-foreground)" }, children: finalPrice != null ? `$${(finalPrice * balance).toFixed(2)}` : "\u2014" })
+      ] })
+    }
+  );
+};
+
+// src/components/wallet/WidgetWalletPortfolio.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var usdFormat = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  minimumFractionDigits: 2
+});
+var CHAIN_NAMES = getChainNames();
+var WidgetWalletPortfolio = ({
+  groupedAssets,
+  chains,
+  tokenRegistry = [],
+  getToken,
+  useTokenWithLazyLoad: useTokenWithLazyLoad2,
+  onAssetSelect
+}) => {
+  const [expandedChains, setExpandedChains] = useState2(/* @__PURE__ */ new Set());
+  const getChainName = useCallback2(
+    (chainId) => chains?.[chainId]?.name || CHAIN_NAMES[chainId] || `Chain ${chainId}`,
+    [chains]
+  );
+  const registrySet = useMemo2(() => {
+    const s = /* @__PURE__ */ new Set();
+    for (const t of tokenRegistry) {
+      s.add(`${t.chainId}-${t.address.toLowerCase()}`);
+    }
+    return s;
+  }, [tokenRegistry]);
+  const calculateDollarizedBalance = useCallback2((asset) => {
+    if (asset.decimals === void 0 || !asset.assetInfo?.price) return 0;
+    return parseFloat(asset.amount) / 10 ** asset.decimals * asset.assetInfo.price;
+  }, []);
+  const { filteredGroupedAssets, chainTotals } = useMemo2(() => {
+    const entries = Object.entries(groupedAssets).map(([chainId, assets]) => {
+      const filtered = assets.filter((asset) => {
+        if (!asset.assetInfo) return false;
+        if (isGasToken(asset.assetInfo)) return true;
+        if (registrySet.size > 0) {
+          return registrySet.has(
+            `${asset.assetInfo.chainId}-${asset.assetInfo.address?.toLowerCase() ?? ""}`
+          );
+        }
+        return true;
+      });
+      return [chainId, filtered];
+    }).filter(([, assets]) => assets.length > 0);
+    const totals = {};
+    for (const [chainId, assets] of entries) {
+      totals[chainId] = assets.reduce((sum, asset) => sum + calculateDollarizedBalance(asset), 0);
+    }
+    const sorted = [...entries].sort((a, b) => (totals[b[0]] ?? 0) - (totals[a[0]] ?? 0));
+    return { filteredGroupedAssets: sorted, chainTotals: totals };
+  }, [groupedAssets, registrySet, calculateDollarizedBalance]);
+  const toggleChain = useCallback2((chainId) => {
+    setExpandedChains((prev) => {
+      const next = new Set(prev);
+      if (next.has(chainId)) next.delete(chainId);
+      else next.add(chainId);
+      return next;
+    });
+  }, []);
+  const formatUSD = (v) => usdFormat.format(v);
+  if (filteredGroupedAssets.length === 0) {
+    return /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center p-6", children: /* @__PURE__ */ jsx3("p", { className: "text-sm", style: { color: "var(--widget-muted-foreground)" }, children: "No token balances found" }) });
+  }
+  return /* @__PURE__ */ jsx3("div", { className: "pb-2 pt-1", children: filteredGroupedAssets.map(([chainId, assets]) => {
+    const chainIdNum = parseInt(chainId);
+    const chainName = getChainName(chainIdNum);
+    const totalChainValue = chainTotals[chainId] || 0;
+    const isExpanded = expandedChains.has(chainId);
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "mx-2 mb-2",
+        style: {
+          border: "1px var(--widget-border-style) var(--widget-border)",
+          borderRadius: "var(--widget-radius)",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              onClick: () => toggleChain(chainId),
+              className: "flex w-full flex-row items-center justify-between p-2 cursor-pointer transition-colors hover:bg-(--widget-secondary)",
+              style: { backgroundColor: "transparent" },
+              children: [
+                /* @__PURE__ */ jsxs3("div", { className: "inline-flex flex-row items-center gap-2", children: [
+                  /* @__PURE__ */ jsx3(ChainIcon_default, { chain: chainIdNum, size: "sm" }),
+                  /* @__PURE__ */ jsx3("p", { className: "text-sm font-medium capitalize", style: { color: "var(--widget-foreground)" }, children: chainName })
+                ] }),
+                /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx3("p", { className: "text-sm font-semibold", style: { color: "var(--widget-foreground)" }, children: formatUSD(totalChainValue) }),
+                  /* @__PURE__ */ jsx3(
+                    "span",
+                    {
+                      className: `transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}`,
+                      style: { color: "var(--widget-muted-foreground)" },
+                      children: /* @__PURE__ */ jsx3("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx3(
+                        "path",
+                        {
+                          d: "M2.5 4.5L6 8L9.5 4.5",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      ) })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: `overflow-hidden transition-all duration-200 ease-out ${isExpanded ? "max-h-[2000px] opacity-100" : "max-h-0 opacity-0"}`,
+              children: /* @__PURE__ */ jsx3("div", { style: { borderTop: "1px var(--widget-border-style) var(--widget-border)" }, children: assets.map((asset) => {
+                if (!asset.assetInfo) return null;
+                return /* @__PURE__ */ jsx3(
+                  WidgetWalletAssetItem,
+                  {
+                    asset: asset.assetInfo,
+                    balanceAmount: asset.amount,
+                    balanceDecimals: asset.decimals,
+                    price: asset.assetInfo?.price ?? null,
+                    onSelect: onAssetSelect,
+                    getToken,
+                    useTokenWithLazyLoad: useTokenWithLazyLoad2
+                  },
+                  `${asset.assetInfo.chainId}-${asset.token}`
+                );
+              }) })
+            }
+          )
+        ]
+      },
+      chainId
+    );
+  }) });
+};
+
+// src/components/wallet/WidgetWalletTradeHistory.tsx
+import { useCallback as useCallback3, useRef as useRef2, useState as useState4 } from "react";
+
+// src/hooks/useWidgetOrderHistory.ts
+function useWidgetOrderHistory(_userAddress, _enabled) {
+  return {
+    orders: [],
+    isLoading: false,
+    error: null,
+    hasMore: false,
+    loadMore: async () => {
+    },
+    totalOrders: 0
+  };
+}
+
+// src/components/wallet/WidgetWalletTradeItem.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var IconCheck = () => /* @__PURE__ */ jsxs4("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: [
+  /* @__PURE__ */ jsx4("circle", { cx: "5", cy: "5", r: "4", stroke: "currentColor", strokeWidth: "1.2" }),
+  /* @__PURE__ */ jsx4("path", { d: "M3 5.2L4.3 6.5L7 3.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var IconX = () => /* @__PURE__ */ jsxs4("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: [
+  /* @__PURE__ */ jsx4("circle", { cx: "5", cy: "5", r: "4", stroke: "currentColor", strokeWidth: "1.2" }),
+  /* @__PURE__ */ jsx4("path", { d: "M3.5 3.5L6.5 6.5M6.5 3.5L3.5 6.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" })
+] });
+var IconClock = () => /* @__PURE__ */ jsxs4("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: [
+  /* @__PURE__ */ jsx4("circle", { cx: "5", cy: "5", r: "4", stroke: "currentColor", strokeWidth: "1.2" }),
+  /* @__PURE__ */ jsx4("path", { d: "M5 3V5.5L6.5 6.5", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })
+] });
+var IconDot = () => /* @__PURE__ */ jsxs4("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: [
+  /* @__PURE__ */ jsx4("circle", { cx: "5", cy: "5", r: "4", stroke: "currentColor", strokeWidth: "1.2" }),
+  /* @__PURE__ */ jsx4("circle", { cx: "5", cy: "5", r: "1.5", fill: "currentColor" })
+] });
+var getEventTypeIcon = (eventType) => {
+  switch ((eventType || "").toLowerCase()) {
+    case "completed":
+    case "settled":
+    case "success":
+    case "swapped":
+    case "swap":
+      return { icon: /* @__PURE__ */ jsx4(IconCheck, {}), color: "var(--widget-primary)" };
+    case "received":
+      return { icon: /* @__PURE__ */ jsx4(IconDot, {}), color: "var(--widget-accent)" };
+    case "failed":
+    case "error":
+    case "expired":
+      return { icon: /* @__PURE__ */ jsx4(IconX, {}), color: "var(--widget-destructive)" };
+    case "pending":
+    case "created":
+    case "placed":
+      return { icon: /* @__PURE__ */ jsx4(IconClock, {}), color: "var(--widget-muted-foreground)" };
+    default:
+      return { icon: /* @__PURE__ */ jsx4(IconDot, {}), color: "var(--widget-muted-foreground)" };
+  }
+};
+var getEventTypeHoverBg = (eventType) => {
+  switch ((eventType || "").toLowerCase()) {
+    case "completed":
+    case "settled":
+    case "success":
+    case "swapped":
+    case "swap":
+      return "color-mix(in srgb, var(--widget-primary) 5%, transparent)";
+    case "failed":
+    case "error":
+    case "expired":
+      return "color-mix(in srgb, var(--widget-destructive) 5%, transparent)";
+    case "pending":
+    case "created":
+    case "placed":
+      return "color-mix(in srgb, var(--widget-accent) 5%, transparent)";
+    default:
+      return "var(--widget-secondary)";
+  }
+};
+var formatAmountSafe = (rawAmount, tokenData) => {
+  try {
+    const numAmount = parseFloat(rawAmount || "0");
+    if (isNaN(numAmount) || numAmount === 0) return "0";
+    const decimals = tokenData?.decimals ?? 18;
+    return formatNumber(numAmount / 10 ** decimals);
+  } catch {
+    return "0";
+  }
+};
+var WidgetWalletTradeItem = ({
+  order,
+  baseToken,
+  quoteToken
+}) => {
+  const [hovered, setHovered] = useState3(false);
+  const eventType = order?.status || order?.eventType || "unknown";
+  const { icon: eventIcon, color: eventColor } = getEventTypeIcon(eventType);
+  const formatDateTime = (timestamp) => {
+    if (!timestamp) return { date: "", time: "" };
+    const d = new Date(typeof timestamp === "number" ? timestamp : Number(timestamp) || timestamp);
+    return {
+      date: d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }),
+      time: d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", timeZone: "UTC", hour12: false }) + " UTC"
+    };
+  };
+  const dateTime = formatDateTime(order?.timestamp || order?.createdAt || "");
+  const inputDisplay = baseToken ? { asset: baseToken, symbol: baseToken.symbol, amount: formatAmountSafe(order?.inputAmount, baseToken) } : { asset: null, symbol: (order?.inputToken || "").slice(0, 6) + "...", amount: formatAmountSafe(order?.inputAmount, null) };
+  const outputDisplay = quoteToken ? { asset: quoteToken, symbol: quoteToken.symbol, amount: formatAmountSafe(order?.outputAmount, quoteToken) } : { asset: null, symbol: (order?.outputToken || "").slice(0, 6) + "...", amount: formatAmountSafe(order?.outputAmount, null) };
+  return /* @__PURE__ */ jsxs4(
+    "a",
+    {
+      href: order?.explorerUrl || "#",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "group flex flex-col cursor-pointer transition-all duration-200 ease-in-out no-underline",
+      style: {
+        border: "1px var(--widget-border-style) var(--widget-border)",
+        backgroundColor: hovered ? getEventTypeHoverBg(eventType) : "transparent",
+        marginBottom: "0.5rem",
+        padding: "0.25rem"
+      },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex flex-row items-center justify-between space-x-1", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex flex-row items-center space-x-1", children: [
+            /* @__PURE__ */ jsx4("div", { className: "-translate-y-px", style: { color: eventColor }, children: eventIcon }),
+            /* @__PURE__ */ jsx4("p", { className: "text-2xs mono uppercase", style: { color: eventColor }, children: eventType })
+          ] }),
+          /* @__PURE__ */ jsxs4("div", { className: "flex flex-row items-center space-x-2", children: [
+            /* @__PURE__ */ jsxs4("span", { className: "text-2xs mono", style: { color: hovered ? "var(--widget-foreground)" : "var(--widget-muted-foreground)" }, children: [
+              "\xAC ",
+              TruncateString(order?.quoteId || order?.orderHash || "")
+            ] }),
+            /* @__PURE__ */ jsx4(
+              "svg",
+              {
+                className: "w-2.5 -translate-y-px opacity-70 group-hover:rotate-[-45deg] group-hover:opacity-100 duration-200",
+                style: { color: "var(--widget-foreground)" },
+                viewBox: "0 0 684 684",
+                fill: "none",
+                children: /* @__PURE__ */ jsx4(
+                  "path",
+                  {
+                    d: "M0.666687 384.667L519.92 384.667L281.627 622.96L342 683.333L683.333 342L342 0.666687L281.627 61.04L519.92 299.333L0.666687 299.333V384.667Z",
+                    fill: "currentColor"
+                  }
+                )
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: "flex flex-row items-center justify-between pr-2",
+            style: { backgroundColor: hovered ? "transparent" : "var(--widget-secondary)" },
+            children: [
+              /* @__PURE__ */ jsx4("div", { className: "flex flex-col w-full h-full p-2", children: /* @__PURE__ */ jsx4("div", { className: "flex h-8 w-full items-center justify-between px-2", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center space-x-1", children: [
+                /* @__PURE__ */ jsx4(TokenImage_default, { asset: inputDisplay.asset, size: "xs", className: "h-3 w-3" }),
+                /* @__PURE__ */ jsxs4("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsx4("span", { className: "text-sm h-4", style: { color: "var(--widget-muted-foreground)" }, children: inputDisplay.amount }),
+                  /* @__PURE__ */ jsx4("span", { className: "text-xs", style: { color: "var(--widget-foreground)" }, children: inputDisplay.symbol })
+                ] }),
+                /* @__PURE__ */ jsx4("span", { className: "px-1", style: { color: "var(--widget-muted-foreground)" }, children: "\u2192" }),
+                /* @__PURE__ */ jsx4(TokenImage_default, { asset: outputDisplay.asset, size: "xs", className: "h-3 w-3" }),
+                /* @__PURE__ */ jsxs4("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsx4("span", { className: "text-sm h-4", style: { color: "var(--widget-muted-foreground)" }, children: outputDisplay.amount }),
+                  /* @__PURE__ */ jsx4("span", { className: "text-xs", style: { color: "var(--widget-foreground)" }, children: outputDisplay.symbol })
+                ] })
+              ] }) }) }),
+              /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-end text-right shrink-0", children: [
+                /* @__PURE__ */ jsx4("span", { className: "text-2xs mono whitespace-nowrap", style: { color: "var(--widget-muted-foreground)" }, children: dateTime.date }),
+                dateTime.time && /* @__PURE__ */ jsx4("span", { className: "text-2xs mono whitespace-nowrap", style: { color: "var(--widget-muted-foreground)", opacity: 0.6 }, children: dateTime.time })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/wallet/WidgetWalletTradeHistory.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var TradeSkeleton = () => /* @__PURE__ */ jsxs5(
+  "div",
+  {
+    className: "mt-2 flex flex-col",
+    style: {
+      height: "4rem",
+      border: "1px var(--widget-border-style) var(--widget-border)",
+      backgroundColor: "var(--widget-secondary)"
+    },
+    children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center space-x-2 p-2", children: [
+        /* @__PURE__ */ jsx5("div", { className: "h-4 w-4 rounded", style: { backgroundColor: "var(--widget-muted)" } }),
+        /* @__PURE__ */ jsx5("div", { className: "h-3 w-24 rounded", style: { backgroundColor: "var(--widget-muted)" } })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex h-8 w-full items-center justify-between px-4", children: [
+        /* @__PURE__ */ jsx5("div", { className: "flex items-center space-x-1", children: [4, 16, 10, 4, 16, 10].map((w, i) => /* @__PURE__ */ jsx5("div", { className: "h-3 rounded", style: { width: `${w * 4}px`, backgroundColor: "var(--widget-muted)" } }, i)) }),
+        /* @__PURE__ */ jsx5("div", { className: "h-3 w-10 rounded", style: { backgroundColor: "var(--widget-muted)" } })
+      ] })
+    ]
+  }
+);
+var WidgetWalletTradeHistory = ({ isActive }) => {
+  const { address: userAddress } = useWalletState();
+  const { orders, isLoading, error, hasMore, loadMore } = useWidgetOrderHistory(userAddress, isActive);
+  const [isFetching, setIsFetching] = useState4(false);
+  const scrollRef = useRef2(null);
+  const handleScroll = useCallback3(
+    async (e) => {
+      const target = e.currentTarget;
+      const isNearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 100;
+      if (isNearBottom && !isLoading && !isFetching && hasMore) {
+        setIsFetching(true);
+        try {
+          await loadMore();
+        } finally {
+          setIsFetching(false);
+        }
+      }
+    },
+    [isLoading, isFetching, hasMore, loadMore]
+  );
+  if (!userAddress) {
+    return /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-center p-4", children: /* @__PURE__ */ jsx5("p", { className: "text-sm", style: { color: "var(--widget-muted-foreground)" }, children: "Connect your wallet to view activity" }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-center p-4", children: /* @__PURE__ */ jsx5("p", { className: "text-sm", style: { color: "var(--widget-destructive)" }, children: "Error loading activity" }) });
+  }
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ref: scrollRef,
+      className: "flex flex-col flex-1 min-h-0 overflow-y-auto p-2",
+      onScroll: handleScroll,
+      style: { backgroundColor: "transparent" },
+      children: isLoading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx5(TradeSkeleton, {}, i)) : orders.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "flex flex-col items-center justify-center h-full p-6", children: /* @__PURE__ */ jsx5("p", { className: "text-sm", style: { color: "var(--widget-muted-foreground)" }, children: "No Activity" }) }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
+        orders.map((order) => /* @__PURE__ */ jsx5(
+          WidgetWalletTradeItem,
+          {
+            order,
+            baseToken: order.enrichedTokens?.base ?? null,
+            quoteToken: order.enrichedTokens?.quote ?? null
+          },
+          order.orderHash
+        )),
+        isFetching && /* @__PURE__ */ jsx5(TradeSkeleton, {})
+      ] })
+    }
+  );
+};
+
+// src/components/WidgetWalletPanel.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var WidgetWalletSkeleton = () => /* @__PURE__ */ jsxs6("div", { className: "flex flex-col w-full h-full overflow-hidden", children: [
+  /* @__PURE__ */ jsx6("div", { className: "p-2 w-full flex justify-center", children: /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: "relative w-full h-[140px] animate-pulse",
+      style: {
+        borderRadius: "var(--widget-radius)",
+        border: "1px var(--widget-border-style) var(--widget-border)",
+        backgroundColor: "var(--widget-secondary)"
+      }
+    }
+  ) }),
+  /* @__PURE__ */ jsx6("div", { className: "px-2 flex flex-col gap-1.5 mt-1", children: [80, 60, 72, 55, 65].map((w, i) => /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between py-1.5", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx6(
+        "div",
+        {
+          className: "h-6 w-6 rounded-full animate-pulse shrink-0",
+          style: { backgroundColor: "var(--widget-secondary)" }
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        "div",
+        {
+          className: "h-3.5 animate-pulse",
+          style: { width: `${w}px`, backgroundColor: "var(--widget-secondary)", borderRadius: "0.25rem" }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: "h-3.5 w-14 animate-pulse",
+        style: { backgroundColor: "var(--widget-secondary)", opacity: 0.5, borderRadius: "0.25rem" }
+      }
+    )
+  ] }, i)) }),
+  /* @__PURE__ */ jsx6("div", { className: "mt-auto shrink-0 p-2", style: { borderTop: "1px var(--widget-border-style) var(--widget-border)" }, children: /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: "w-full animate-pulse",
+      style: {
+        height: "34px",
+        backgroundColor: "var(--widget-secondary)",
+        opacity: 0.35,
+        borderRadius: "var(--widget-radius)"
+      }
+    }
+  ) })
+] });
+var WidgetWalletPanel = () => {
+  const walletTab = useWidgetSwapUIStore((state) => state.walletTab);
+  const [signOutHovered, setSignOutHovered] = useState5(false);
+  const { disconnect } = useDisconnect();
+  const { setQuoteToken } = useSwapFormContext();
+  const handleAssetSelect = useCallback4(
+    async (asset) => {
+      await setQuoteToken(asset);
+      useWidgetSwapUIStore.getState().setView("swap");
+    },
+    [setQuoteToken]
+  );
+  const {
+    address,
+    groupedAssets,
+    totalBalance,
+    balancesLoading,
+    chains,
+    getToken,
+    useTokenWithLazyLoad: useTokenWithLazyLoad2,
+    tokenRegistry
+  } = useWidgetWalletData(true);
+  if (!address) {
+    return /* @__PURE__ */ jsx6("div", { className: "flex flex-col items-center justify-center h-full p-4", children: /* @__PURE__ */ jsx6("p", { className: "text-sm", style: { color: "var(--widget-muted-foreground)" }, children: "Connect your wallet to view your portfolio" }) });
+  }
+  if (balancesLoading && walletTab === "wallet") {
+    return /* @__PURE__ */ jsx6(WidgetWalletSkeleton, {});
+  }
+  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col w-full h-full overflow-hidden", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex-1 overflow-y-auto", style: { minHeight: 0 }, children: [
+      walletTab === "wallet" && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsx6(
+          WidgetWalletCard,
+          {
+            address,
+            totalBalance,
+            isLoading: balancesLoading
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          WidgetWalletPortfolio,
+          {
+            groupedAssets,
+            chains,
+            tokenRegistry,
+            getToken,
+            useTokenWithLazyLoad: useTokenWithLazyLoad2,
+            onAssetSelect: handleAssetSelect
+          }
+        )
+      ] }),
+      walletTab === "activity" && /* @__PURE__ */ jsx6(WidgetWalletTradeHistory, { isActive: walletTab === "activity" })
+    ] }),
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: "shrink-0 p-2",
+        style: { borderTop: "1px var(--widget-border-style) var(--widget-border)" },
+        children: /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              disconnect();
+              useWidgetSwapUIStore.getState().setView("swap");
+            },
+            onMouseEnter: () => setSignOutHovered(true),
+            onMouseLeave: () => setSignOutHovered(false),
+            className: "w-full py-2 text-xs mono uppercase cursor-pointer transition-colors",
+            style: {
+              backgroundColor: signOutHovered ? "var(--widget-destructive)" : "transparent",
+              color: signOutHovered ? "var(--widget-destructive-foreground)" : "var(--widget-destructive)",
+              border: "1px var(--widget-border-style) var(--widget-destructive)",
+              borderRadius: "var(--widget-radius)"
+            },
+            children: "Sign Out"
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  WidgetWalletPanel
+};
+//# sourceMappingURL=WidgetWalletPanel-D7I5TAU3.js.map