@elizaos/plugin-polymarket-app 2.0.3-beta.6 → 2.0.3-beta.7

package/dist/PolymarketAppView.js

@@ -0,0 +1,704 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@elizaos/app-core";
+import { useAgentElement } from "@elizaos/ui/agent-surface";
+import { ArrowLeft } from "lucide-react";
+import { useEffect } from "react";
+import { PolymarketPositionsPanel } from "./PolymarketPositionsPanel.js";
+import { usePolymarketState } from "./usePolymarketState.js";
+const ACCENT = "var(--accent, #ff8a24)";
+const ACCENT_LIGHT = "#ffb066";
+const ACCENT_SUBTLE = "var(--accent-subtle, rgba(255,138,36,0.12))";
+const TXT = "var(--txt, #111)";
+const MUTED = "var(--muted, rgba(0,0,0,0.58))";
+const BORDER = "var(--border, rgba(0,0,0,0.12))";
+const SURFACE = "var(--surface, rgba(0,0,0,0.04))";
+function priceToPercent(price) {
+  if (price == null) return null;
+  const n = Number(price);
+  if (!Number.isFinite(n)) return null;
+  return Math.round(n * 100);
+}
+function shortNumber(value) {
+  if (value == null) return null;
+  const n = Number(value);
+  if (!Number.isFinite(n)) return value;
+  if (n >= 1e6) return `$${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `$${(n / 1e3).toFixed(1)}K`;
+  return `$${n.toFixed(0)}`;
+}
+function PolymarketAppView({ exitToApps, t }) {
+  const {
+    status,
+    markets,
+    selectedMarket,
+    setSelectedMarket,
+    positions,
+    loading,
+    error,
+    refresh
+  } = usePolymarketState();
+  const selectedMarketId = selectedMarket?.id;
+  useEffect(() => {
+    const interval = setInterval(() => {
+      void refresh();
+    }, 2e4);
+    return () => clearInterval(interval);
+  }, [refresh]);
+  const backLabel = t("nav.back", { defaultValue: "Back" });
+  const back = useAgentElement({
+    id: "action-back",
+    role: "button",
+    label: backLabel,
+    group: "polymarket-nav",
+    description: "Exit Polymarket and return to the apps list"
+  });
+  const showEmpty = !loading && markets.length === 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "polymarket-shell",
+      className: "fixed inset-0 z-50 flex h-[100vh] flex-col overflow-hidden bg-bg supports-[height:100dvh]:h-[100dvh]",
+      children: [
+        /* @__PURE__ */ jsx("style", { children: "@keyframes pmShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}" }),
+        /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-between px-3 py-2", children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ref: back.ref,
+              ...back.agentProps,
+              variant: "ghost",
+              size: "icon",
+              className: "h-9 w-9 shrink-0 text-muted hover:text-txt",
+              onClick: exitToApps,
+              "aria-label": backLabel,
+              children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "min-w-0",
+              style: { display: "flex", alignItems: "center", gap: 8 },
+              children: [
+                /* @__PURE__ */ jsx(PolymarketGlyph, { size: 22 }),
+                /* @__PURE__ */ jsx("h1", { className: "truncate text-base font-semibold text-txt", children: "Polymarket" })
+              ]
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "chat-native-scrollbar flex-1 overflow-y-auto px-3 py-3 sm:px-5", children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-3xl flex-col gap-3", children: selectedMarket ? /* @__PURE__ */ jsx(
+          MarketDetail,
+          {
+            market: selectedMarket,
+            onBack: () => setSelectedMarket(null)
+          }
+        ) : showEmpty ? /* @__PURE__ */ jsx(DisconnectedState, { status, error }) : /* @__PURE__ */ jsxs(
+          "section",
+          {
+            style: { display: "flex", flexDirection: "column", gap: 12 },
+            children: [
+              /* @__PURE__ */ jsx(ReadinessStrip, { status }),
+              status?.account?.ready ? /* @__PURE__ */ jsx(
+                PolymarketPositionsPanel,
+                {
+                  positions: positions?.positions ?? [],
+                  summary: positions?.summary ?? null,
+                  blockedReason: status.account?.reason ?? null
+                }
+              ) : null,
+              loading && markets.length === 0 ? /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 10 }, children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(MarketSkeleton, {}, i)) }) : /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 10 }, children: markets.slice(0, 24).map((market) => /* @__PURE__ */ jsx(
+                MarketCard,
+                {
+                  market,
+                  active: selectedMarketId === market.id,
+                  onSelect: setSelectedMarket
+                },
+                market.id
+              )) })
+            ]
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+function PolymarketGlyph({ size = 28 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 32 32",
+      role: "img",
+      "aria-hidden": "true",
+      style: { display: "block" },
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Polymarket" }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "pmYes", x1: "0", y1: "0", x2: "1", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: ACCENT }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: ACCENT_LIGHT })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "16",
+            cy: "16",
+            r: "15",
+            fill: "none",
+            stroke: BORDER,
+            strokeWidth: "2"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M16 1 A15 15 0 0 1 31 16 L16 16 Z",
+            fill: "url(#pmYes)",
+            opacity: "0.85"
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: "16", cy: "16", r: "6", fill: "var(--bg, #fff)" }),
+        /* @__PURE__ */ jsx("circle", { cx: "16", cy: "16", r: "2.5", fill: ACCENT })
+      ]
+    }
+  );
+}
+function StateDot({ ready }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        width: 8,
+        height: 8,
+        borderRadius: 99,
+        background: ready ? ACCENT : MUTED,
+        boxShadow: ready ? `0 0 0 3px ${ACCENT_SUBTLE}` : "none",
+        flexShrink: 0
+      }
+    }
+  );
+}
+function CapabilityChip({
+  label,
+  ready,
+  hint
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      title: hint,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 7,
+        padding: "4px 2px",
+        fontSize: 13,
+        fontWeight: 600,
+        color: TXT
+      },
+      children: [
+        /* @__PURE__ */ jsx(StateDot, { ready }),
+        label,
+        /* @__PURE__ */ jsx("span", { style: { color: MUTED, fontWeight: 500, fontSize: 12 }, children: ready ? "on" : "off" })
+      ]
+    }
+  );
+}
+function ReadinessStrip({
+  status
+}) {
+  const reads = status?.publicReads.ready ?? false;
+  const trading = status?.trading.ready ?? false;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 8,
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          CapabilityChip,
+          {
+            label: "Read-only",
+            ready: reads,
+            hint: "Public market data (no credentials needed)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CapabilityChip,
+          {
+            label: "Trading",
+            ready: trading,
+            hint: status?.trading.reason ?? "Signed order placement"
+          }
+        )
+      ]
+    }
+  );
+}
+function DisconnectedState({
+  status,
+  error
+}) {
+  const reads = status?.publicReads.ready ?? false;
+  const trading = status?.trading.ready ?? false;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        textAlign: "center",
+        gap: 16,
+        padding: "48px 20px",
+        margin: "auto 0"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(PolymarketGlyph, { size: 52 }) }),
+        /* @__PURE__ */ jsxs("div", { style: { maxWidth: 360 }, children: [
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              title: error ? "Markets unavailable" : "None",
+              style: {
+                margin: 0,
+                fontSize: 19,
+                fontWeight: 700,
+                color: TXT
+              },
+              children: error ? "Unavailable" : "None"
+            }
+          ),
+          error ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "sr-only",
+              style: {
+                margin: "8px 0 0",
+                fontSize: 14,
+                color: MUTED,
+                lineHeight: 1.5
+              },
+              children: "Couldn't reach Polymarket right now. Try again in a moment."
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              gap: 8,
+              justifyContent: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                CapabilityChip,
+                {
+                  label: "Read-only",
+                  ready: reads,
+                  hint: "Public market data (no credentials needed)"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CapabilityChip,
+                {
+                  label: "Trading",
+                  ready: trading,
+                  hint: status?.trading.reason ?? "Signed order placement"
+                }
+              )
+            ]
+          }
+        ),
+        !trading && status?.trading.missing.length ? /* @__PURE__ */ jsxs(
+          "p",
+          {
+            className: "sr-only",
+            style: {
+              margin: 0,
+              fontSize: 12,
+              color: MUTED,
+              maxWidth: 360
+            },
+            children: [
+              "To enable trading, configure",
+              " ",
+              /* @__PURE__ */ jsx("code", { style: { fontSize: 11, color: MUTED }, children: status.trading.missing.join(", ") }),
+              " ",
+              "in Settings."
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function MarketSkeleton() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        height: 66,
+        background: `linear-gradient(90deg, ${SURFACE} 0%, var(--bg-hover, rgba(0,0,0,0.06)) 50%, ${SURFACE} 100%)`,
+        backgroundSize: "200% 100%",
+        animation: "pmShimmer 1.4s ease-in-out infinite"
+      }
+    }
+  );
+}
+function OutcomeChip({
+  name,
+  percent,
+  rank
+}) {
+  const lead = rank === 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "2px 0",
+        fontSize: 12.5,
+        fontWeight: 600,
+        color: TXT,
+        maxWidth: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              maxWidth: 130,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: name
+          }
+        ),
+        percent != null ? /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              color: lead ? ACCENT : MUTED,
+              fontVariantNumeric: "tabular-nums"
+            },
+            children: [
+              percent,
+              "%"
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function MarketCard({
+  market,
+  active,
+  onSelect
+}) {
+  const label = market.question ?? market.slug ?? market.id;
+  const { ref, agentProps } = useAgentElement({
+    id: `market-${market.id}`,
+    role: "list-item",
+    label,
+    group: "polymarket-markets",
+    status: active ? "active" : "inactive",
+    description: `Select the ${label} market`
+  });
+  const volume = shortNumber(market.volume24hr ?? market.volume);
+  const liquidity = shortNumber(market.liquidity);
+  const outcomes = market.outcomes.slice(0, 3);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      ...agentProps,
+      type: "button",
+      onClick: () => onSelect(market),
+      "aria-current": active ? "true" : void 0,
+      style: {
+        display: "flex",
+        gap: 12,
+        width: "100%",
+        textAlign: "left",
+        padding: "10px 4px",
+        border: "none",
+        borderLeft: active ? `2px solid ${ACCENT}` : "2px solid transparent",
+        background: "transparent",
+        cursor: "pointer",
+        font: "inherit",
+        color: TXT,
+        alignItems: "flex-start"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              width: 40,
+              height: 40,
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              overflow: "hidden"
+            },
+            children: market.icon || market.image ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: market.icon ?? market.image ?? "",
+                alt: "",
+                style: { width: "100%", height: "100%", objectFit: "cover" }
+              }
+            ) : /* @__PURE__ */ jsx(PolymarketGlyph, { size: 24 })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              minWidth: 0,
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: 14,
+                    fontWeight: 600,
+                    lineHeight: 1.35,
+                    color: TXT,
+                    display: "-webkit-box",
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: "vertical",
+                    overflow: "hidden"
+                  },
+                  children: label
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: outcomes.map((outcome, i) => /* @__PURE__ */ jsx(
+                OutcomeChip,
+                {
+                  name: outcome.name,
+                  percent: priceToPercent(outcome.price),
+                  rank: i
+                },
+                outcome.name
+              )) }),
+              /* @__PURE__ */ jsxs("span", { style: { display: "flex", gap: 14, fontSize: 12, color: MUTED }, children: [
+                volume ? /* @__PURE__ */ jsxs("span", { children: [
+                  "Vol ",
+                  volume
+                ] }) : null,
+                liquidity ? /* @__PURE__ */ jsxs("span", { children: [
+                  "Liq ",
+                  liquidity
+                ] }) : null,
+                market.category ? /* @__PURE__ */ jsx("span", { children: market.category }) : null
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function MarketDetail({
+  market,
+  onBack
+}) {
+  return /* @__PURE__ */ jsxs("section", { style: { minWidth: 0 }, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onBack,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 6,
+          marginBottom: 16,
+          background: "transparent",
+          border: "none",
+          font: "inherit",
+          fontSize: 12.5,
+          fontWeight: 600,
+          color: MUTED,
+          cursor: "pointer"
+        },
+        children: [
+          /* @__PURE__ */ jsx(ArrowLeft, { style: { width: 14, height: 14 } }),
+          "Markets"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: 12 }, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            width: 44,
+            height: 44,
+            flexShrink: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            overflow: "hidden"
+          },
+          children: market.icon || market.image ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: market.icon ?? market.image ?? "",
+              alt: "",
+              style: { width: "100%", height: "100%", objectFit: "cover" }
+            }
+          ) : /* @__PURE__ */ jsx(PolymarketGlyph, { size: 26 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "h2",
+        {
+          style: {
+            margin: 0,
+            fontSize: 19,
+            fontWeight: 700,
+            lineHeight: 1.3,
+            color: TXT
+          },
+          children: market.question ?? market.slug
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: { display: "flex", gap: 24, marginTop: 18, flexWrap: "wrap" },
+        children: [
+          /* @__PURE__ */ jsx(Metric, { label: "Volume", value: shortNumber(market.volume) ?? "\u2014" }),
+          /* @__PURE__ */ jsx(
+            Metric,
+            {
+              label: "Liquidity",
+              value: shortNumber(market.liquidity) ?? "\u2014"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Metric,
+            {
+              label: "Last trade",
+              value: priceToPercent(market.lastTradePrice) != null ? `${priceToPercent(market.lastTradePrice)}%` : "\u2014"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { marginTop: 24 }, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            paddingBottom: 4,
+            fontSize: 12,
+            fontWeight: 600,
+            color: MUTED
+          },
+          children: "Outcomes"
+        }
+      ),
+      market.outcomes.map((outcome, i) => {
+        const pct = priceToPercent(outcome.price);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "11px 0",
+              display: "flex",
+              flexDirection: "column",
+              gap: 6
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    gap: 12,
+                    fontSize: 13.5
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: TXT }, children: outcome.name }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: { fontWeight: 700, color: i === 0 ? ACCENT : MUTED },
+                        children: pct != null ? `${pct}%` : "n/a"
+                      }
+                    )
+                  ]
+                }
+              ),
+              pct != null ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    height: 6,
+                    background: SURFACE,
+                    overflow: "hidden"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        width: `${pct}%`,
+                        height: "100%",
+                        background: i === 0 ? ACCENT : MUTED
+                      }
+                    }
+                  )
+                }
+              ) : null
+            ]
+          },
+          outcome.name
+        );
+      })
+    ] })
+  ] });
+}
+function Metric({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { style: { flex: "1 1 90px", minWidth: 90 }, children: [
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 11.5, color: MUTED }, children: label }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          marginTop: 4,
+          fontSize: 15,
+          fontWeight: 700,
+          color: TXT,
+          fontVariantNumeric: "tabular-nums"
+        },
+        children: value
+      }
+    )
+  ] });
+}
+export {
+  PolymarketAppView
+};
+//# sourceMappingURL=PolymarketAppView.js.map