@m3000/market 0.0.1

package/src/components/blocks/auction/AuctionContext.tsx

@@ -0,0 +1,401 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+import type {
+  AuctionData,
+  AuctionFormatters,
+  AuctionTickConfig,
+  AuctionUserBid,
+  OperationState,
+  RankableBid,
+} from "@/types";
+import { getProjectedRankForPrice, getSuggestedBidPrices } from "@/utils";
+
+export interface AuctionContextValue {
+  auction: AuctionData;
+  isAuctionEnded: boolean;
+
+  bids: RankableBid[];
+  userBids: AuctionUserBid[];
+  maxTotalItems: number;
+
+  bidValue: bigint;
+  setBidValue: (value: bigint | ((prev: bigint) => bigint)) => void;
+
+  minBidValue: bigint;
+  reservePriceValue: bigint;
+  tickReferencePrice: bigint;
+  tickConfig: AuctionTickConfig | undefined;
+  tickSize: bigint;
+
+  placeBidOperation: OperationState;
+  topUpOperation: OperationState;
+
+  lockedBid: { bidId: bigint; priceValue: bigint } | null;
+
+  mergedForRank: RankableBid[];
+  getRankForBid: (bidId: string) => number | null;
+  getProjectedRank: (priceValue: bigint) => {
+    rank: number | null;
+    isWinning: boolean;
+  };
+  getSuggestedBids: () => bigint[];
+
+  showBidPreview: boolean;
+  setShowBidPreview: (show: boolean) => void;
+
+  isBiddingActive: boolean;
+  setIsBiddingActive: (active: boolean) => void;
+  startBidding: () => void;
+  cancelBidding: () => void;
+
+  setLockedBid: (bid: { bidId: bigint; priceValue: bigint } | null) => void;
+  handlePlaceBid: (price: string) => Promise<boolean>;
+  handleTopUp: (newPrice: string) => Promise<boolean>;
+  handleClaimEdition?: (bidId: string) => Promise<boolean>;
+  resetOperations: () => void;
+
+  formatPrice: (priceValue: bigint) => string;
+  formatTime: (date: Date) => string;
+  currencySymbol: string;
+  inputDecimals: number;
+}
+
+export const AuctionContext: React.Context<AuctionContextValue | null> =
+  createContext<AuctionContextValue | null>(null);
+
+export function useAuctionContext(): AuctionContextValue {
+  const ctx = useContext(AuctionContext);
+  if (!ctx) {
+    throw new Error(
+      "useAuctionContext must be used within an Auction provider",
+    );
+  }
+  return ctx;
+}
+
+export interface AuctionProviderProps {
+  auction: AuctionData;
+  bids: RankableBid[];
+  userBids: AuctionUserBid[];
+  onPlaceBid: (price: bigint, quantity: bigint) => Promise<boolean>;
+  onTopUpBid: (
+    bidId: bigint,
+    newPrice: bigint,
+    additionalValue: bigint,
+  ) => Promise<boolean>;
+  onClaimEdition?: (bidId: string) => Promise<boolean>;
+  formatters?: AuctionFormatters;
+  children: React.ReactNode;
+}
+
+export function AuctionProvider({
+  auction,
+  bids,
+  userBids,
+  onPlaceBid,
+  onTopUpBid,
+  onClaimEdition,
+  formatters,
+  children,
+}: AuctionProviderProps): React.ReactElement {
+  const defaultFormatPrice = (priceValue: bigint) => {
+    const val = Number(priceValue) / 1e18;
+    return val.toLocaleString("en-US", {
+      minimumFractionDigits: 3,
+      maximumFractionDigits: 3,
+    });
+  };
+  const defaultFormatTime = (date: Date) => {
+    const now = Date.now();
+    const diff = date.getTime() - now;
+    const isPast = diff < 0;
+    const absMs = Math.abs(diff);
+    const seconds = Math.floor(absMs / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+
+    if (days > 0) return `${days}d ${hours % 24}h ${isPast ? "ago" : ""}`;
+    if (hours > 0) return `${hours}h ${minutes % 60}m ${isPast ? "ago" : ""}`;
+    if (minutes > 0)
+      return `${minutes}m ${seconds % 60}s ${isPast ? "ago" : ""}`;
+    return `${seconds}s ${isPast ? "ago" : ""}`;
+  };
+
+  const formatPrice = formatters?.formatPrice ?? defaultFormatPrice;
+  const formatTime = formatters?.formatTime ?? defaultFormatTime;
+  const currencySymbol = formatters?.currencySymbol ?? "USD";
+  const inputDecimals = formatters?.inputDecimals ?? 18;
+
+  const isAuctionEnded = auction.endsAt
+    ? Date.now() > auction.endsAt.getTime()
+    : false;
+
+  const reservePriceValue = auction.reservePrice;
+  const tickConfig = auction.tickConfig;
+
+  const activeBids = bids.filter((b) => {
+    const bid = userBids.find((ub) => ub.id === b.id);
+    return !bid || bid.status === "active";
+  });
+
+  const totalActiveQty = BigInt(activeBids.length);
+
+  const mergedForRank = useMemo(() => {
+    const cutoffIds = new Set(bids.map((b) => b.id));
+
+    const myActiveBids = userBids.filter(
+      (bid) => bid.status === "active" && !cutoffIds.has(bid.id),
+    );
+
+    const myBidsNotInCutoff: RankableBid[] = myActiveBids.map((bid) => ({
+      id: bid.id,
+      price: bid.price.toString(),
+      created_at: bid.createdAt.toISOString(),
+    }));
+
+    const merged: RankableBid[] = [...bids, ...myBidsNotInCutoff];
+
+    return merged.sort((a, b) => {
+      const pa = BigInt(a.price);
+      const pb = BigInt(b.price);
+      if (pa !== pb) return pb > pa ? 1 : -1;
+      return (
+        new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
+      );
+    });
+  }, [bids, userBids]);
+
+  const minBidValue = useMemo(() => {
+    if (totalActiveQty >= BigInt(auction.maxTotalItems)) {
+      const winningBids = mergedForRank.slice(0, auction.maxTotalItems);
+
+      if (winningBids.length > 0) {
+        const lastWinning = winningBids[winningBids.length - 1];
+        const tickSize = tickConfig
+          ? BigInt(lastWinning.price) > tickConfig.threshold
+            ? tickConfig.largeTickSize
+            : tickConfig.smallTickSize
+          : BigInt(lastWinning.price);
+        return BigInt(lastWinning.price) + tickSize;
+      }
+    }
+    return reservePriceValue;
+  }, [
+    reservePriceValue,
+    totalActiveQty,
+    auction.maxTotalItems,
+    mergedForRank,
+    tickConfig,
+  ]);
+
+  const tickReferencePrice = minBidValue;
+
+  const tickSize = useMemo(() => {
+    if (!tickConfig) return minBidValue;
+    return BigInt(minBidValue) > tickConfig.threshold
+      ? tickConfig.largeTickSize
+      : tickConfig.smallTickSize;
+  }, [tickConfig, minBidValue]);
+
+  const getRankForBid = useCallback(
+    (bidId: string) => {
+      const idx = mergedForRank.findIndex((b) => b.id === bidId);
+      return idx >= 0 ? idx + 1 : null;
+    },
+    [mergedForRank],
+  );
+
+  const getProjectedRank = useCallback(
+    (priceValue: bigint) => {
+      return getProjectedRankForPrice(
+        priceValue,
+        mergedForRank,
+        auction.maxTotalItems,
+      );
+    },
+    [mergedForRank, auction.maxTotalItems],
+  );
+
+  const getSuggestedBids = useCallback(() => {
+    return getSuggestedBidPrices({
+      mergedForRank,
+      maxTotalItems: auction.maxTotalItems,
+      minBidValue,
+      reservePriceValue,
+      tickConfig,
+      tickSize,
+    });
+  }, [
+    mergedForRank,
+    auction.maxTotalItems,
+    minBidValue,
+    reservePriceValue,
+    tickConfig,
+    tickSize,
+  ]);
+
+  const [placeBidOperation, setPlaceBidOperation] = useState<OperationState>({
+    status: "idle",
+  });
+  const [topUpOperation, setTopUpOperation] = useState<OperationState>({
+    status: "idle",
+  });
+
+  const [lockedBid, setLockedBid] = useState<{
+    bidId: bigint;
+    priceValue: bigint;
+  } | null>(null);
+
+  const [showBidPreview, setShowBidPreview] = useState(false);
+
+  const [isBiddingActive, setIsBiddingActive] = useState(false);
+
+  const startBidding = useCallback(() => {
+    setIsBiddingActive(true);
+    setShowBidPreview(true);
+  }, []);
+
+  const cancelBidding = useCallback(() => {
+    setIsBiddingActive(false);
+    setShowBidPreview(false);
+    setLockedBid(null);
+  }, []);
+
+  const setLockedBidAndActivate = useCallback(
+    (bid: { bidId: bigint; priceValue: bigint } | null) => {
+      setLockedBid(bid);
+      if (bid !== null) {
+        setIsBiddingActive(true);
+        setShowBidPreview(true);
+      }
+    },
+    [],
+  );
+
+  const [bidValue, setBidValue] = useState<bigint>(minBidValue);
+
+  const resetOperations = useCallback(() => {
+    setPlaceBidOperation({ status: "idle" });
+    setTopUpOperation({ status: "idle" });
+  }, []);
+
+  const handlePlaceBid = useCallback(
+    async (price: string) => {
+      const priceValue = BigInt(price);
+      setPlaceBidOperation({ status: "pending" });
+
+      try {
+        const success = await onPlaceBid(priceValue, 1n);
+        if (success) {
+          setPlaceBidOperation({ status: "success" });
+          setShowBidPreview(false);
+          return true;
+        } else {
+          setPlaceBidOperation({
+            status: "error",
+            error: "Transaction failed",
+          });
+          return false;
+        }
+      } catch (err) {
+        setPlaceBidOperation({
+          status: "error",
+          error: err instanceof Error ? err.message : "Unknown error",
+        });
+        return false;
+      }
+    },
+    [onPlaceBid],
+  );
+
+  const handleTopUp = useCallback(
+    async (newPrice: string) => {
+      if (!lockedBid) return false;
+
+      const newPriceValue = BigInt(newPrice);
+      const additionalValue = newPriceValue - lockedBid.priceValue;
+
+      setTopUpOperation({ status: "pending" });
+
+      try {
+        const success = await onTopUpBid(
+          lockedBid.bidId,
+          newPriceValue,
+          additionalValue,
+        );
+        if (success) {
+          setTopUpOperation({ status: "success" });
+          setLockedBid(null);
+          return true;
+        } else {
+          setTopUpOperation({ status: "error", error: "Transaction failed" });
+          return false;
+        }
+      } catch (err) {
+        setTopUpOperation({
+          status: "error",
+          error: err instanceof Error ? err.message : "Unknown error",
+        });
+        return false;
+      }
+    },
+    [lockedBid, onTopUpBid],
+  );
+
+  const handleClaimEdition = useCallback(
+    async (bidId: string) => {
+      if (!onClaimEdition) return false;
+      return onClaimEdition(bidId);
+    },
+    [onClaimEdition],
+  );
+
+  const value: AuctionContextValue = {
+    auction,
+    isAuctionEnded,
+    bids,
+    userBids,
+    maxTotalItems: auction.maxTotalItems,
+    bidValue,
+    setBidValue,
+    minBidValue,
+    reservePriceValue,
+    tickReferencePrice,
+    tickConfig,
+    tickSize,
+    placeBidOperation,
+    topUpOperation,
+    lockedBid,
+    mergedForRank,
+    getRankForBid,
+    getProjectedRank,
+    getSuggestedBids,
+    showBidPreview,
+    setShowBidPreview,
+    isBiddingActive,
+    setIsBiddingActive,
+    startBidding,
+    cancelBidding,
+    setLockedBid: setLockedBidAndActivate,
+    handlePlaceBid,
+    handleTopUp,
+    handleClaimEdition,
+    resetOperations,
+    formatPrice,
+    formatTime,
+    currencySymbol,
+    inputDecimals,
+  };
+
+  return (
+    <AuctionContext.Provider value={value}>{children}</AuctionContext.Provider>
+  );
+}

package/src/components/blocks/auction/AuctionInfo.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Text } from "@/components/primitives";
+import { useAuctionContext } from "./AuctionContext";
+import { AuctionStatusTag } from "./AuctionStatusTag";
+
+export interface AuctionInfoProps {
+  className?: string;
+}
+
+export function AuctionInfo({
+  className,
+}: AuctionInfoProps): React.ReactElement {
+  const { auction, isAuctionEnded, maxTotalItems } = useAuctionContext();
+
+  const editionsLabel =
+    maxTotalItems === 1 ? "1 item" : `${maxTotalItems} items`;
+
+  return (
+    <div className={className}>
+      <div className="flex flex-wrap items-center gap-2">
+        <AuctionStatusTag
+          opensAt={auction.opensAt}
+          endsAt={auction.endsAt}
+          background="transparent"
+        />
+      </div>
+      {!isAuctionEnded ? (
+        <Text size="2" color="tertiary" className="mt-2">
+          Bid on one of {editionsLabel}. Top {maxTotalItems} bidders win and pay
+          the lowest winning bid.
+        </Text>
+      ) : null}
+    </div>
+  );
+}

package/src/components/blocks/auction/AuctionLayout.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { Button } from "@/components/primitives";
+import { cn } from "@/lib";
+import { useAuctionContext } from "./AuctionContext";
+
+export interface AuctionLayoutProps {
+  children: ReactNode;
+  className?: string;
+  height?: string | number;
+}
+
+export function AuctionLayout({
+  children,
+  className,
+  height = "calc(100vh - 4rem)",
+}: AuctionLayoutProps): React.ReactElement {
+  const heightStyle = typeof height === "number" ? `${height}px` : height;
+  const { isBiddingActive } = useAuctionContext();
+
+  return (
+    <div
+      className={cn(
+        "relative grid overflow-hidden grid-rows-[minmax(0,1fr)_minmax(0,1fr)]",
+        isBiddingActive && "grid-rows-1",
+        "lg:grid-cols-2 lg:grid-rows-1",
+        className,
+      )}
+      style={{ height: heightStyle }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface AuctionDetailsProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function AuctionDetails({
+  children,
+  className,
+}: AuctionDetailsProps): React.ReactElement {
+  const { isBiddingActive } = useAuctionContext();
+
+  return (
+    <div
+      className={cn(
+        "relative flex h-full min-h-0 flex-col overflow-hidden",
+        "border-border",
+        "lg:border-r",
+        isBiddingActive && "overflow-hidden",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface AuctionDetailsHeaderProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function AuctionDetailsHeader({
+  children,
+  className,
+}: AuctionDetailsHeaderProps): React.ReactElement {
+  const { isBiddingActive } = useAuctionContext();
+
+  return (
+    <div
+      className={cn(
+        "flex min-h-0 grow flex-col p-6",
+        isBiddingActive &&
+          [
+            "max-lg:overflow-hidden",
+            "max-lg:[&>*:nth-child(n+3):not(:last-child)]:hidden",
+            "max-lg:[&>*:last-child]:pointer-events-none",
+            "max-lg:[&>*:last-child]:absolute",
+            "max-lg:[&>*:last-child]:inset-x-6",
+            "max-lg:[&>*:last-child]:bottom-6",
+            "max-lg:[&>*:last-child]:top-28",
+            "max-lg:[&>*:last-child]:min-h-0",
+            "max-lg:[&>*:last-child]:overflow-hidden",
+          ].join(" "),
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface AuctionDetailsBodyProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function AuctionDetailsBody({
+  children,
+  className,
+}: AuctionDetailsBodyProps): React.ReactElement {
+  return (
+    <div
+      className={cn(
+        "hidden p-6 lg:block lg:min-h-0 lg:flex-1 lg:overflow-y-auto",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface AuctionDetailsFooterProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function AuctionDetailsFooter({
+  children,
+  className,
+}: AuctionDetailsFooterProps): React.ReactElement {
+  return (
+    <div
+      className={cn("mt-auto shrink-0 border-t border-border p-6", className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface AuctionRankingsContainerProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function AuctionRankingsContainer({
+  children,
+  className,
+}: AuctionRankingsContainerProps): React.ReactElement {
+  const { isBiddingActive } = useAuctionContext();
+
+  return (
+    <div
+      className={cn(
+        "grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto]",
+        isBiddingActive &&
+          "max-lg:absolute max-lg:inset-x-0 max-lg:bottom-0 max-lg:top-0 max-lg:z-20 max-lg:overflow-hidden max-lg:rounded-t-[1.75rem] max-lg:border-t max-lg:border-border max-lg:bg-background/95 max-lg:shadow-2xl max-lg:backdrop-blur-sm",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface AuctionBiddingPanelProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function AuctionBiddingPanel({
+  children,
+  className,
+}: AuctionBiddingPanelProps): React.ReactElement {
+  const { isBiddingActive, startBidding, isAuctionEnded, setShowBidPreview } =
+    useAuctionContext();
+
+  const handleStartBidding = () => {
+    startBidding();
+    setShowBidPreview(true);
+  };
+
+  return (
+    <div
+      className={cn(
+        "row-start-2 rounded-t-[1.75rem] border-t border-border bg-background p-6 lg:rounded-xl",
+        className,
+      )}
+    >
+      {!isBiddingActive ? (
+        <Button
+          className="w-full"
+          size="lg"
+          disabled={isAuctionEnded}
+          onClick={handleStartBidding}
+        >
+          {isAuctionEnded ? "Auction Ended" : "Start Bidding"}
+        </Button>
+      ) : (
+        children
+      )}
+    </div>
+  );
+}