@coinlist-co/react 0.1.2 → 0.3.0

package/dist/client/components/index.cjs

@@ -21,9 +21,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var components_exports = {};
 __export(components_exports, {
   BaseCoinListSignInCard: () => BaseCoinListSignInCard,
+  BaseRequirementsChecklist: () => BaseRequirementsChecklist,
+  ChecklistStatus: () => ChecklistStatus,
   CoinListSignInCard: () => CoinListSignInCard,
   OfferCard: () => OfferCard,
-  OffersGrid: () => OffersGrid
+  OfferCardUi: () => OfferCardUi,
+  OffersGrid: () => OffersGrid,
+  RequirementItem: () => RequirementItem,
+  RequirementItemUi: () => RequirementItemUi,
+  RequirementStatus: () => RequirementStatus,
+  RequirementVariant: () => RequirementVariant,
+  RequirementsChecklist: () => RequirementsChecklist
 });
 module.exports = __toCommonJS(components_exports);
 var import_styles = require("../styles.css");
@@ -456,6 +464,15 @@ var monthYearFormatter = new Intl.DateTimeFormat("en-US", {
   month: "short",
   year: "numeric"
 });
+var OfferCardUi = {
+  fromDomain: (offer) => ({
+    tagline: offer.tagline,
+    bannerUrl: offer.bannerUrl,
+    logoUrl: offer.logoUrl,
+    formattedStartsAt: monthYearFormatter.format(offer.startsAt),
+    formattedEndsAt: monthYearFormatter.format(offer.endsAt)
+  })
+};
 function OfferCard({
   offer,
   onClick,
@@ -487,11 +504,11 @@ function OfferCard({
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mt-4 grid grid-cols-2 gap-5 border-t border-divider pt-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(typeClasses.subhead, "text-text-secondary"), children: "Starts" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(typeClasses.label, "text-text-primary"), children: monthYearFormatter.format(offer.startsAt) })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(typeClasses.label, "text-text-primary"), children: offer.formattedStartsAt })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(typeClasses.subhead, "text-text-secondary"), children: "Ends" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(typeClasses.label, "text-text-primary"), children: monthYearFormatter.format(offer.endsAt) })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(typeClasses.label, "text-text-primary"), children: offer.formattedEndsAt })
       ] })
     ] })
   ] });
@@ -553,6 +570,47 @@ function useCoinListOffers() {
   return { offersState };
 }
 
+// src/client/hooks/useCoinListRequirements.ts
+var import_react5 = require("react");
+var LOADING_STATE2 = { type: "LOADING" };
+function useCoinListRequirements(offerId) {
+  const { coinlist, isReady } = useCoinList();
+  const [requirementsState, setRequirementsState] = (0, import_react5.useState)(LOADING_STATE2);
+  const [fetchKey, setFetchKey] = (0, import_react5.useState)(0);
+  const refetch = (0, import_react5.useCallback)(() => setFetchKey((k) => k + 1), []);
+  (0, import_react5.useEffect)(() => {
+    let isCancelled = false;
+    if (!isReady) {
+      setRequirementsState(LOADING_STATE2);
+      return () => {
+        isCancelled = true;
+      };
+    }
+    setRequirementsState(LOADING_STATE2);
+    Promise.all([
+      coinlist.fetchOfferRequirements(offerId),
+      coinlist.fetchRequirementStatuses(offerId)
+    ]).then(([requirementsByOptionId, statuses]) => {
+      if (!isCancelled) {
+        setRequirementsState({
+          type: "CONTENT",
+          requirementsByOptionId,
+          statuses
+        });
+      }
+    }).catch((error) => {
+      if (!isCancelled) {
+        const reason = error instanceof NotAuthenticatedError ? "not-authenticated" : "generic-error";
+        setRequirementsState({ type: "ERROR", reason });
+      }
+    });
+    return () => {
+      isCancelled = true;
+    };
+  }, [coinlist, isReady, offerId, fetchKey]);
+  return { requirementsState, refetch };
+}
+
 // src/client/components/offers/OffersGrid.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var DEFAULT_MAX_COLUMNS = 3;
@@ -627,7 +685,7 @@ function BaseOffersGrid({
       children: offersState.offers.map((offer) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         OfferCard,
         {
-          offer,
+          offer: OfferCardUi.fromDomain(offer),
           onClick: onOfferClick ? () => onOfferClick(offer) : void 0
         },
         offer.id
@@ -635,11 +693,415 @@ function BaseOffersGrid({
     }
   ) });
 }
+
+// src/client/components/requirements/RequirementItem.tsx
+var import_lucide_react4 = require("lucide-react");
+
+// src/client/components/design-system/StepStatusIcon.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var statusConfig = {
+  required: {
+    Icon: import_lucide_react3.Info,
+    colorClass: "text-warning",
+    fillClass: "[&_circle]:fill-warning-subtle"
+  },
+  pending: {
+    Icon: import_lucide_react3.Info,
+    colorClass: "text-warning",
+    fillClass: "[&_circle]:fill-warning-subtle"
+  },
+  completed: {
+    Icon: import_lucide_react3.CircleCheck,
+    colorClass: "text-success",
+    fillClass: "[&_circle]:fill-success-subtle"
+  },
+  rejected: {
+    Icon: import_lucide_react3.CircleX,
+    colorClass: "text-error",
+    fillClass: "[&_circle]:fill-error-subtle"
+  }
+};
+function StepStatusIcon({ status, className }) {
+  const { Icon, colorClass, fillClass } = statusConfig[status];
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    Icon,
+    {
+      className: cn("h-6 w-6 shrink-0", colorClass, fillClass, className),
+      "aria-hidden": "true"
+    }
+  );
+}
+
+// src/client/components/requirements/RequirementItem.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var RequirementVariant = {
+  fromType(type) {
+    switch (type) {
+      case "external_wallet":
+      case "whitelisted_wallet":
+        return "wallet";
+      default:
+        return "verification";
+    }
+  }
+};
+var RequirementStatus = {
+  fromStatusValue(status) {
+    switch (status) {
+      case "not_started":
+      case "action_needed":
+        return "required";
+      case "in_progress":
+        return "pending";
+      case "completed":
+        return "completed";
+      case "rejected":
+        return "rejected";
+    }
+  }
+};
+var ChecklistStatus = {
+  derive(statuses) {
+    if (statuses.some((s) => s.status === "rejected")) return "ineligible";
+    if (statuses.every((s) => s.status === "completed")) return "eligible";
+    return "inProgress";
+  }
+};
+var RequirementItemUi = {
+  fromDomain(req, statusInfo, label, description, walletAddress) {
+    return {
+      variant: RequirementVariant.fromType(req.type),
+      status: statusInfo ? RequirementStatus.fromStatusValue(statusInfo.status) : "required",
+      label,
+      description,
+      walletAddress
+    };
+  }
+};
+function VerificationActionZone({
+  status,
+  onAction,
+  onContactSupport
+}) {
+  switch (status) {
+    case "required":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ClButton, { size: "sm", onClick: onAction, children: "Continue" });
+    case "pending":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        AlertBanner,
+        {
+          variant: "warning",
+          content: "Under review. We'll notify you when complete."
+        }
+      );
+    case "completed":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AlertBanner, { variant: "success", content: "Identity verified." });
+    case "rejected":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        AlertBanner,
+        {
+          variant: "error",
+          content: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+            "Verification rejected.",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onContactSupport,
+                className: "underline",
+                children: "Contact support"
+              }
+            ),
+            "."
+          ] })
+        }
+      );
+  }
+}
+function WalletActionZone({
+  status,
+  walletAddress,
+  onAction
+}) {
+  if (status === "completed") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ClButton, { size: "sm", variant: "secondary", onClick: onAction, children: "Change wallet" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        AlertBanner,
+        {
+          variant: "success",
+          content: walletAddress ?? "Connected: 0xBa4b...9f2c"
+        }
+      )
+    ] });
+  }
+  if (status === "rejected") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ClButton, { size: "sm", onClick: onAction, children: "Connect wallet" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        AlertBanner,
+        {
+          variant: "error",
+          content: "This wallet is not eligible for this sale."
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ClButton, { size: "sm", onClick: onAction, children: "Connect wallet" });
+}
+function RequirementItem({
+  ui,
+  expanded = false,
+  onToggle,
+  className,
+  onAction,
+  onContactSupport
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("flex w-full flex-col", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        "aria-expanded": expanded,
+        className: "flex h-14 w-full cursor-pointer items-center justify-between rounded-2xl px-2 transition-colors hover:bg-surface",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StepStatusIcon, { status: ui.status }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "span",
+              {
+                className: cn(
+                  typeClasses.body,
+                  "whitespace-nowrap font-medium text-text-primary"
+                ),
+                children: ui.label
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_lucide_react4.ChevronRight,
+            {
+              className: cn(
+                "h-6 w-6 shrink-0 text-text-secondary transition-transform duration-300",
+                expanded && "rotate-90"
+              ),
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        className: cn(
+          "grid transition-[grid-template-rows] duration-300 ease-in-out",
+          expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-4 px-2 pb-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: cn(typeClasses.subhead, "text-text-secondary"), children: ui.description }),
+          ui.variant === "verification" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            VerificationActionZone,
+            {
+              status: ui.status,
+              onAction,
+              onContactSupport
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            WalletActionZone,
+            {
+              status: ui.status,
+              walletAddress: ui.walletAddress,
+              onAction
+            }
+          )
+        ] }) })
+      }
+    )
+  ] });
+}
+
+// src/client/components/requirements/RequirementsChecklist.tsx
+var import_react6 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var DEFAULT_LABELS = {
+  kyc_approved: "KYC Verification",
+  identity_verified: "Identity Verification",
+  proof_of_address: "Proof of Address",
+  source_of_funds: "Source of Funds",
+  external_wallet: "External Wallet",
+  whitelisted_wallet: "Whitelisted Wallet",
+  jurisdiction: "Jurisdiction Check",
+  accreditation: "Accreditation"
+};
+var DEFAULT_DESCRIPTIONS = {
+  kyc_approved: "Complete Know Your Customer verification.",
+  identity_verified: "Verify your identity.",
+  proof_of_address: "Provide proof of your residential address.",
+  source_of_funds: "Provide documentation for your source of funds.",
+  external_wallet: "Connect an external wallet.",
+  whitelisted_wallet: "Connect a whitelisted wallet.",
+  jurisdiction: "Confirm your jurisdiction eligibility.",
+  accreditation: "Verify your accreditation status."
+};
+function RequirementsChecklist(props) {
+  if ("status" in props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StaticRequirementsChecklist, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DynamicRequirementsChecklist, { ...props });
+}
+function DynamicRequirementsChecklist(props) {
+  const { requirementsState } = useCoinListRequirements(props.offerId);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    BaseRequirementsChecklist,
+    {
+      ...props,
+      requirementsState
+    }
+  );
+}
+function StaticRequirementsChecklist({
+  title,
+  description,
+  status,
+  onContinue,
+  children,
+  className
+}) {
+  const [expandedIndex, setExpandedIndex] = (0, import_react6.useState)(null);
+  const accordionChildren = import_react6.Children.map(children, (child, index) => {
+    if (!(0, import_react6.isValidElement)(child)) return child;
+    return (0, import_react6.cloneElement)(
+      child,
+      {
+        expanded: expandedIndex === index,
+        onToggle: () => setExpandedIndex((prev) => prev === index ? null : index)
+      }
+    );
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("flex w-full flex-col gap-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: cn(typeClasses.h3, "text-text-primary"), children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: cn(typeClasses.body, "text-text-secondary"), children: description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col divide-y divide-divider", children: accordionChildren }),
+    status === "ineligible" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      AlertBanner,
+      {
+        variant: "error",
+        icon: true,
+        content: "You are not eligible to participate."
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ClButton, { fullWidth: true, disabled: status !== "eligible", onClick: onContinue, children: "Continue" })
+  ] });
+}
+function BaseRequirementsChecklist({
+  requirementsState,
+  optionId,
+  title,
+  description,
+  onContinue,
+  onRequirementAction,
+  onContactSupport,
+  getLabel,
+  getDescription,
+  loading,
+  error,
+  className
+}) {
+  const [expandedIndex, setExpandedIndex] = (0, import_react6.useState)(null);
+  if (requirementsState.type === "LOADING") {
+    if (loading) return loading;
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "output",
+      {
+        "aria-live": "polite",
+        className: "flex min-h-40 items-center justify-center rounded-2xl border border-border bg-background p-6",
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: cn(typeClasses.body, "text-text-secondary"), children: "Loading requirements..." })
+      }
+    );
+  }
+  if (requirementsState.type === "ERROR") {
+    if (error) return error;
+    const errorMessage = requirementsState.reason === "not-authenticated" ? "Sign in to view requirements." : "Unable to load requirements right now. Please try again.";
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      AlertBanner,
+      {
+        variant: "error",
+        icon: true,
+        content: errorMessage,
+        className: "w-full max-w-[28rem]"
+      }
+    );
+  }
+  const { requirementsByOptionId, statuses } = requirementsState;
+  const requirements = requirementsByOptionId[optionId] ?? [];
+  const requirementIds = new Set(requirements.map((r) => r.id));
+  const optionStatuses = statuses.filter((s) => requirementIds.has(s.id));
+  const statusByRequirementId = new Map(optionStatuses.map((s) => [s.id, s]));
+  const checklistStatus = ChecklistStatus.derive(optionStatuses);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("flex w-full flex-col gap-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: cn(typeClasses.h3, "text-text-primary"), children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: cn(typeClasses.body, "text-text-secondary"), children: description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col divide-y divide-divider", children: requirements.map((req, index) => {
+      const statusInfo = statusByRequirementId.get(req.id);
+      const label = getLabel ? getLabel(req) : DEFAULT_LABELS[req.type];
+      const description2 = (getDescription ? getDescription(req) : null) ?? DEFAULT_DESCRIPTIONS[req.type];
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        RequirementItem,
+        {
+          ui: RequirementItemUi.fromDomain(
+            req,
+            statusInfo,
+            label,
+            description2
+          ),
+          expanded: expandedIndex === index,
+          onToggle: () => setExpandedIndex((prev) => prev === index ? null : index),
+          onAction: onRequirementAction ? () => onRequirementAction(req) : void 0,
+          onContactSupport: onContactSupport ? () => onContactSupport(req) : void 0
+        },
+        req.id
+      );
+    }) }),
+    checklistStatus === "ineligible" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      AlertBanner,
+      {
+        variant: "error",
+        icon: true,
+        content: "You are not eligible to participate."
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      ClButton,
+      {
+        fullWidth: true,
+        disabled: checklistStatus !== "eligible",
+        onClick: onContinue,
+        children: "Continue"
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BaseCoinListSignInCard,
+  BaseRequirementsChecklist,
+  ChecklistStatus,
   CoinListSignInCard,
   OfferCard,
-  OffersGrid
+  OfferCardUi,
+  OffersGrid,
+  RequirementItem,
+  RequirementItemUi,
+  RequirementStatus,
+  RequirementVariant,
+  RequirementsChecklist
 });
 //# sourceMappingURL=index.cjs.map