@agg-market/ui 0.0.3 → 0.0.4

package/dist/chunk-ZYREURXK.mjs

@@ -0,0 +1,470 @@
+import {
+  Modal
+} from "./chunk-VIP7HSOU.mjs";
+import {
+  VenueLogo,
+  venueLogoLabels
+} from "./chunk-BLSHXIAH.mjs";
+import {
+  BankIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ExternalLinkIcon,
+  WalletIcon
+} from "./chunk-F236MLT6.mjs";
+import {
+  Button
+} from "./chunk-PGSPYQOW.mjs";
+import {
+  cn,
+  formatAmountDisplay,
+  formatCompactUsd
+} from "./chunk-GJ4U5NCE.mjs";
+
+// src/withdraw/index.tsx
+import { useState as useState2 } from "react";
+
+// src/withdraw/withdraw-modal.constants.ts
+var KALSHI_VENUE = "kalshi";
+var KALSHI_WITHDRAW_URL_DEFAULT = "https://kalshi.com/account/withdraw";
+
+// src/withdraw/steps/venue-selection.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var VenueRow = ({ venue, onSelect }) => {
+  var _a, _b;
+  const displayName = (_a = venueLogoLabels[venue.venue]) != null ? _a : venue.venue;
+  const isDisabled = venue.disabled === true;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-3 sm:gap-4",
+        "rounded-xl border border-separator",
+        "p-3 sm:p-4",
+        "transition-colors",
+        isDisabled ? "opacity-50 cursor-not-allowed" : "hover:bg-secondary-hover cursor-pointer"
+      ),
+      role: "button",
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-disabled": isDisabled,
+      onClick: () => {
+        if (!isDisabled)
+          onSelect(venue.venue);
+      },
+      onKeyDown: (e) => {
+        if (!isDisabled && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          onSelect(venue.venue);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(VenueLogo, { venue: venue.venue, size: "xl", className: "rounded-lg" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-base font-bold text-foreground leading-6", children: displayName }),
+          /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground leading-5", children: [
+            "Balance ",
+            formatCompactUsd(venue.balance)
+          ] })
+        ] }),
+        isDisabled ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: (_b = venue.disabledReason) != null ? _b : "Unavailable" }) }) : /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            size: "s",
+            suffix: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+            onClick: (e) => {
+              e.stopPropagation();
+              onSelect(venue.venue);
+            },
+            children: "Select"
+          }
+        ) })
+      ]
+    }
+  );
+};
+var VenueSelectionStep = ({
+  venues,
+  onSelectVenue
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Modal.Header, { title: "Withdraw", hideBorder: true }),
+  /* @__PURE__ */ jsx(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-base text-foreground leading-6", children: "Choose where to withdraw funds from:" }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: venues.map((venue) => /* @__PURE__ */ jsx(VenueRow, { venue, onSelect: onSelectVenue }, venue.venue)) })
+  ] }) })
+] });
+
+// src/withdraw/steps/withdraw-method.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var WithdrawMethodCard = ({
+  icon,
+  title,
+  description,
+  onContinue
+}) => /* @__PURE__ */ jsxs2(
+  "div",
+  {
+    className: cn(
+      "flex items-center gap-3 sm:gap-4",
+      "rounded-xl border border-separator",
+      "p-3 sm:p-4",
+      "hover:bg-secondary-hover transition-colors cursor-pointer"
+    ),
+    role: "button",
+    tabIndex: 0,
+    onClick: onContinue,
+    onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onContinue();
+      }
+    },
+    children: [
+      /* @__PURE__ */ jsx2("div", { className: "shrink-0 flex items-center justify-center h-10 w-10 rounded-lg bg-secondary-hover", children: icon }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx2("p", { className: "text-base font-bold text-foreground leading-6", children: title }),
+        /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground leading-5", children: description })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "shrink-0", children: /* @__PURE__ */ jsx2(
+        Button,
+        {
+          variant: "secondary",
+          size: "s",
+          suffix: /* @__PURE__ */ jsx2(ChevronRightIcon, {}),
+          onClick: (e) => {
+            e.stopPropagation();
+            onContinue();
+          },
+          children: "Continue"
+        }
+      ) })
+    ]
+  }
+);
+var WithdrawMethodStep = ({
+  venue,
+  onBack,
+  onSelectMethod
+}) => {
+  var _a;
+  const displayName = (_a = venueLogoLabels[venue.venue]) != null ? _a : venue.venue;
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2(
+      Modal.Header,
+      {
+        title: `Withdraw from ${displayName}`,
+        hideBorder: true,
+        leftElement: /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "flex items-center justify-center text-foreground hover:text-foreground/80 transition-colors hover:cursor-pointer mr-2",
+            onClick: onBack,
+            "aria-label": "Go back",
+            children: /* @__PURE__ */ jsx2(ChevronLeftIcon, { className: "h-6 w-6" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx2(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx2(VenueLogo, { venue: venue.venue, size: "xs", className: "rounded-sm" }),
+        /* @__PURE__ */ jsxs2("p", { className: "text-sm text-muted-foreground leading-5", children: [
+          displayName,
+          " balance: ",
+          formatCompactUsd(venue.balance)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx2(
+          WithdrawMethodCard,
+          {
+            icon: /* @__PURE__ */ jsx2(WalletIcon, { className: "h-6 w-6 text-foreground" }),
+            title: "Withdraw to Wallet",
+            description: "Send funds to your crypto wallet as USDC.",
+            onContinue: () => onSelectMethod("wallet")
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          WithdrawMethodCard,
+          {
+            icon: /* @__PURE__ */ jsx2(BankIcon, { className: "h-6 w-6 text-foreground" }),
+            title: "Withdraw to Bank",
+            description: "Transfer funds to your linked bank account.",
+            onContinue: () => onSelectMethod("bank")
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+};
+
+// src/withdraw/steps/withdraw-amount.tsx
+import { useCallback, useState } from "react";
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var WithdrawAmountStep = ({
+  venue,
+  method,
+  onBack,
+  onContinue
+}) => {
+  var _a;
+  const [rawAmount, setRawAmount] = useState("");
+  const displayName = (_a = venueLogoLabels[venue.venue]) != null ? _a : venue.venue;
+  const numericAmount = Number(rawAmount) || 0;
+  const isValid = numericAmount > 0 && numericAmount <= venue.balance;
+  const exceedsBalance = numericAmount > venue.balance;
+  const methodLabel = method === "wallet" ? "Wallet" : "Bank";
+  const handleAmountChange = useCallback((e) => {
+    const v = e.target.value.replace(/[^0-9.]/g, "");
+    const parts = v.split(".");
+    const sanitized = parts.length > 2 ? `${parts[0]}.${parts.slice(1).join("")}` : v;
+    setRawAmount(sanitized);
+  }, []);
+  const handleMax = useCallback(() => {
+    setRawAmount(venue.balance.toString());
+  }, [venue.balance]);
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx3(
+      Modal.Header,
+      {
+        title: `Withdraw to ${methodLabel}`,
+        hideBorder: true,
+        leftElement: /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "flex items-center justify-center text-foreground hover:text-foreground/80 transition-colors hover:cursor-pointer mr-2",
+            onClick: onBack,
+            "aria-label": "Go back",
+            children: /* @__PURE__ */ jsx3(ChevronLeftIcon, { className: "h-6 w-6" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx3(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-6", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx3(VenueLogo, { venue: venue.venue, size: "xs", className: "rounded-sm" }),
+          /* @__PURE__ */ jsxs3("p", { className: "text-sm text-muted-foreground leading-5", children: [
+            displayName,
+            " balance: ",
+            formatCompactUsd(venue.balance)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "text-sm font-bold text-primary hover:text-primary/80 transition-colors",
+            onClick: handleMax,
+            children: "Max"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-baseline", children: [
+          /* @__PURE__ */ jsx3("span", { className: "text-3xl sm:text-4xl font-bold text-foreground leading-none", children: "$" }),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "text",
+              inputMode: "decimal",
+              "aria-label": "Amount",
+              className: cn(
+                "w-full bg-transparent text-3xl sm:text-4xl font-bold leading-none outline-none",
+                exceedsBalance ? "text-error" : numericAmount > 0 ? "text-foreground" : "text-muted-foreground"
+              ),
+              placeholder: "0",
+              value: rawAmount ? formatAmountDisplay(rawAmount) : "",
+              onChange: handleAmountChange
+            }
+          )
+        ] }),
+        exceedsBalance ? /* @__PURE__ */ jsx3("p", { className: "mt-2 text-sm text-error", children: "Amount exceeds available balance" }) : null
+      ] }),
+      /* @__PURE__ */ jsx3(
+        Button,
+        {
+          variant: "primary",
+          size: "xl",
+          className: "w-full",
+          disabled: !isValid,
+          onClick: () => onContinue(numericAmount),
+          children: "Continue"
+        }
+      )
+    ] }) })
+  ] });
+};
+
+// src/withdraw/steps/kalshi-withdraw.tsx
+import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var KalshiStepCard = ({
+  step,
+  title,
+  description,
+  children
+}) => /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2 rounded-xl bg-secondary-hover p-4", children: [
+  /* @__PURE__ */ jsxs4("p", { className: "text-xs font-bold uppercase leading-4 text-muted-foreground", children: [
+    "Step ",
+    step
+  ] }),
+  /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx4("p", { className: "text-sm font-bold text-foreground leading-5", children: title }),
+    /* @__PURE__ */ jsx4("p", { className: "text-sm text-foreground leading-5", children: description })
+  ] }),
+  children
+] });
+var KalshiWithdrawStep = ({
+  withdrawUrl,
+  onDone
+}) => /* @__PURE__ */ jsxs4(Fragment4, { children: [
+  /* @__PURE__ */ jsx4(Modal.Header, { title: "", hideBorder: true }),
+  /* @__PURE__ */ jsx4(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center gap-8", children: [
+    /* @__PURE__ */ jsx4(
+      VenueLogo,
+      {
+        venue: "kalshi",
+        size: "xl",
+        className: "h-[60px] w-[60px] rounded-lg"
+      }
+    ),
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center gap-4 text-center", children: [
+      /* @__PURE__ */ jsx4("h2", { className: "text-2xl font-bold text-foreground leading-8", children: "Withdraw from Kalshi" }),
+      /* @__PURE__ */ jsx4("p", { className: "text-base text-foreground leading-6", children: "To withdraw from Kalshi you'll need to initiate the withdrawal from your Kalshi account directly on Kalshi's site." })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex w-full flex-col gap-4", children: [
+      /* @__PURE__ */ jsx4(
+        KalshiStepCard,
+        {
+          step: 1,
+          title: "Open Kalshi Withdraw Page",
+          description: "Sign in to your Kalshi account and go to Withdraw from your account menu.",
+          children: /* @__PURE__ */ jsx4("div", { className: "mt-1", children: /* @__PURE__ */ jsx4(
+            Button,
+            {
+              variant: "secondary",
+              size: "s",
+              suffix: /* @__PURE__ */ jsx4(ExternalLinkIcon, { className: "h-3.5 w-3.5" }),
+              onClick: () => {
+                window.open(withdrawUrl, "_blank", "noopener,noreferrer");
+              },
+              children: "Open Kalshi"
+            }
+          ) })
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        KalshiStepCard,
+        {
+          step: 2,
+          title: "Choose a Withdrawal Method",
+          description: "Select a withdrawal method: Bank transfer (ACH), Wire, or USDC (crypto)."
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        KalshiStepCard,
+        {
+          step: 3,
+          title: "Complete Your Withdrawal",
+          description: "Follow the on-screen instructions to confirm your withdrawal. Funds may take a few business days to arrive."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx4(Button, { variant: "secondary", size: "l", onClick: onDone, children: "Done" })
+  ] }) })
+] });
+
+// src/withdraw/index.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var WithdrawModal = ({
+  open,
+  onOpenChange,
+  venues,
+  onSelectVenue,
+  onSelectWithdrawMethod,
+  onContinueWalletWithdraw,
+  onContinueBankWithdraw,
+  onDoneKalshi,
+  kalshiWithdrawUrl = KALSHI_WITHDRAW_URL_DEFAULT
+}) => {
+  const [step, setStep] = useState2("venues");
+  const [selectedVenue, setSelectedVenue] = useState2(null);
+  const [selectedMethod, setSelectedMethod] = useState2(null);
+  const handleSelectVenue = (venueSlug) => {
+    onSelectVenue(venueSlug);
+    if (venueSlug === KALSHI_VENUE) {
+      setStep("kalshi");
+      return;
+    }
+    const venueData = venues.find((v) => v.venue === venueSlug);
+    if (venueData) {
+      setSelectedVenue(venueData);
+      setStep("method");
+    }
+  };
+  const handleBackToVenues = () => {
+    setStep("venues");
+    setSelectedVenue(null);
+    setSelectedMethod(null);
+  };
+  const handleBackToMethod = () => {
+    setStep("method");
+    setSelectedMethod(null);
+  };
+  const handleSelectMethod = (method) => {
+    if (!selectedVenue)
+      return;
+    setSelectedMethod(method);
+    setStep("withdraw-amount");
+    onSelectWithdrawMethod == null ? void 0 : onSelectWithdrawMethod(selectedVenue.venue, method);
+  };
+  const handleContinueWithdraw = (amount) => {
+    if (!selectedVenue || !selectedMethod)
+      return;
+    if (selectedMethod === "wallet") {
+      onContinueWalletWithdraw == null ? void 0 : onContinueWalletWithdraw(selectedVenue.venue, amount);
+    } else {
+      onContinueBankWithdraw == null ? void 0 : onContinueBankWithdraw(selectedVenue.venue, amount);
+    }
+  };
+  const handleDoneKalshi = () => {
+    onDoneKalshi == null ? void 0 : onDoneKalshi();
+    onOpenChange(false);
+  };
+  const handleOpenChange = (isOpen) => {
+    if (!isOpen) {
+      setStep("venues");
+      setSelectedVenue(null);
+      setSelectedMethod(null);
+    }
+    onOpenChange(isOpen);
+  };
+  return /* @__PURE__ */ jsx5(Modal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs5(Modal.Container, { maxWidth: "600px", "aria-label": "Withdraw", children: [
+    step === "venues" ? /* @__PURE__ */ jsx5(VenueSelectionStep, { venues, onSelectVenue: handleSelectVenue }) : null,
+    step === "method" && selectedVenue ? /* @__PURE__ */ jsx5(
+      WithdrawMethodStep,
+      {
+        venue: selectedVenue,
+        onBack: handleBackToVenues,
+        onSelectMethod: handleSelectMethod
+      }
+    ) : null,
+    step === "withdraw-amount" && selectedVenue && selectedMethod ? /* @__PURE__ */ jsx5(
+      WithdrawAmountStep,
+      {
+        venue: selectedVenue,
+        method: selectedMethod,
+        onBack: handleBackToMethod,
+        onContinue: handleContinueWithdraw
+      }
+    ) : null,
+    step === "kalshi" ? /* @__PURE__ */ jsx5(KalshiWithdrawStep, { withdrawUrl: kalshiWithdrawUrl, onDone: handleDoneKalshi }) : null
+  ] }) });
+};
+WithdrawModal.displayName = "WithdrawModal";
+
+export {
+  WithdrawModal
+};