@m3000/market 0.0.1

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

@@ -0,0 +1,203 @@
+"use client";
+
+import * as React from "react";
+import { Button, Scale, Text } from "@/components/primitives";
+import { cn } from "@/lib";
+import { getProjectedRankForPrice } from "@/utils";
+import { useAuctionContext } from "./AuctionContext";
+
+export interface SuggestedBidContextValue {
+  value: bigint;
+  display: string;
+  position: number;
+  index: number;
+  isSelected: boolean;
+  onSelect: () => void;
+  disabled: boolean;
+  projectedRank: number | null;
+  isWinning: boolean;
+}
+
+const SuggestedBidContext =
+  React.createContext<SuggestedBidContextValue | null>(null);
+
+function useSuggestedBid(): SuggestedBidContextValue {
+  const context = React.useContext(SuggestedBidContext);
+  if (!context) {
+    throw new Error(
+      "useSuggestedBid must be used within AuctionSuggestedBids.Item",
+    );
+  }
+  return context;
+}
+
+export interface AuctionSuggestedBidsProps {
+  className?: string;
+  count?: number;
+  children: (context: SuggestedBidContextValue) => React.ReactNode;
+}
+
+function AuctionSuggestedBidsRoot({
+  className,
+  count = 4,
+  children,
+}: AuctionSuggestedBidsProps): React.ReactElement | null {
+  const {
+    minBidValue,
+    tickConfig,
+    tickSize,
+    isAuctionEnded,
+    bidValue,
+    setBidValue,
+    formatPrice,
+    currencySymbol,
+    bids,
+    setShowBidPreview,
+    lockedBid,
+    userBids,
+    mergedForRank,
+    maxTotalItems,
+  } = useAuctionContext();
+
+  const lockedBidId = React.useMemo(() => {
+    if (lockedBid === null) return null;
+    const lockedUserBid = userBids.find(
+      (ub) => ub.globalBidId === lockedBid.bidId,
+    );
+    return lockedUserBid?.id ?? null;
+  }, [lockedBid, userBids]);
+
+  const bidsForRankProjection = React.useMemo(() => {
+    if (lockedBidId === null) return mergedForRank;
+    return mergedForRank.filter((b) => b.id !== lockedBidId);
+  }, [mergedForRank, lockedBidId]);
+
+  const getProjectedRank = React.useCallback(
+    (priceValue: bigint) => {
+      return getProjectedRankForPrice(
+        priceValue,
+        bidsForRankProjection,
+        maxTotalItems,
+      );
+    },
+    [bidsForRankProjection, maxTotalItems],
+  );
+
+  if (isAuctionEnded) {
+    return null;
+  }
+
+  const getTickSize = (value: bigint): bigint => {
+    if (!tickConfig) return tickSize;
+    return value > tickConfig.threshold
+      ? tickConfig.largeTickSize
+      : tickConfig.smallTickSize;
+  };
+
+  const effectiveMinBid =
+    lockedBid !== null && lockedBid.priceValue > minBidValue
+      ? lockedBid.priceValue
+      : minBidValue;
+
+  const highestBid =
+    bids.length > 0 ? BigInt(bids[0].price) : effectiveMinBid * 3n;
+
+  const leadingBid = highestBid + getTickSize(highestBid);
+  const maxBid =
+    leadingBid > effectiveMinBid ? leadingBid : effectiveMinBid * 3n;
+
+  const selectedValue = bidValue;
+  const disabled = isAuctionEnded;
+
+  return (
+    <Scale.Linear
+      domain={[effectiveMinBid, maxBid]}
+      getTickSize={getTickSize}
+      snapMode="up"
+      className={cn("grid grid-cols-2 gap-2", className)}
+    >
+      <Scale.Ticks count={count}>
+        {(
+          { value, position }: { value: bigint; position: number },
+          index: number,
+        ) => {
+          const v = value;
+          const display = `${formatPrice(v)} ${currencySymbol}`;
+          const isSelected = v === selectedValue;
+          const { rank: projectedRank, isWinning } = getProjectedRank(v);
+
+          const contextValue: SuggestedBidContextValue = {
+            value: v,
+            display,
+            position,
+            index,
+            isSelected,
+            onSelect: () => {
+              setBidValue(v);
+              setShowBidPreview(true);
+            },
+            disabled,
+            projectedRank,
+            isWinning,
+          };
+
+          return (
+            <SuggestedBidContext.Provider value={contextValue}>
+              {children(contextValue)}
+            </SuggestedBidContext.Provider>
+          );
+        }}
+      </Scale.Ticks>
+    </Scale.Linear>
+  );
+}
+
+interface AuctionSuggestedBidsItemProps {
+  labels?: string[];
+}
+
+function AuctionSuggestedBidsItem({
+  labels = ["Minimum", "Safe Entry", "Competitive", "Leading"],
+}: AuctionSuggestedBidsItemProps): React.ReactElement {
+  const context = useSuggestedBid();
+  const label = labels[context.index] ?? labels[labels.length - 1] ?? "Bid";
+
+  return (
+    <Button
+      type="button"
+      color="tertiary"
+      active={context.isSelected}
+      className="h-auto w-full items-start justify-between gap-2 px-3 py-2.5 text-left"
+      disabled={context.disabled}
+      onClick={context.onSelect}
+      size="card"
+    >
+      <div className="flex flex-col">
+        <Text color="secondary" size="1">
+          {label}
+        </Text>
+        <Text>{context.display}</Text>
+      </div>
+      {context.projectedRank != null && (
+        <span className="flex shrink-0 flex-col">
+          <Text color="secondary" size="1">
+            Rank
+          </Text>
+          <Text>#{context.projectedRank}</Text>
+        </span>
+      )}
+    </Button>
+  );
+}
+
+interface AuctionSuggestedBidsComponent {
+  Root: typeof AuctionSuggestedBidsRoot;
+  Item: typeof AuctionSuggestedBidsItem;
+}
+
+export const AuctionSuggestedBids: AuctionSuggestedBidsComponent = {
+  Root: AuctionSuggestedBidsRoot,
+  Item: AuctionSuggestedBidsItem,
+};
+
+export { useSuggestedBid };

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

@@ -0,0 +1,125 @@
+"use client";
+
+import { Button, Text } from "@/components/primitives";
+import { cn } from "@/lib";
+import type { AuctionUserBid } from "@/types";
+import { formatDateTime } from "@/utils";
+
+export interface AuctionYourBidCardProps {
+  bid: AuctionUserBid;
+  getRankForBid: (bidId: string) => number | null;
+  lockedBidId: bigint | null;
+  onLockForTopUp: (bidId: bigint, priceValue: bigint) => void;
+  onCancelTopUp: () => void;
+  isAuctionEnded: boolean;
+  onClaim?: (bidId: string) => Promise<boolean>;
+  formatPrice?: (priceValue: bigint) => string;
+  currencySymbol?: string;
+}
+
+function getBidStatusLabel(
+  status: AuctionUserBid["status"],
+  isWinning: boolean,
+): string {
+  if (status === "claimed") return "Won & Claimed";
+  if (isWinning) return "Winning";
+  if (status === "refunded") return "Refunded";
+  return "Outbid";
+}
+
+export function AuctionYourBidCard({
+  bid,
+  getRankForBid,
+  lockedBidId,
+  onLockForTopUp,
+  onCancelTopUp,
+  isAuctionEnded,
+  onClaim,
+  formatPrice = (v) =>
+    (Number(v) / 1e18).toLocaleString("en-US", {
+      minimumFractionDigits: 3,
+      maximumFractionDigits: 3,
+    }),
+  currencySymbol = "USD",
+}: AuctionYourBidCardProps): React.ReactElement {
+  const rank = getRankForBid(bid.id);
+  const isLocked = lockedBidId !== null && bid.globalBidId === lockedBidId;
+
+  return (
+    <div
+      className={cn(
+        "rounded-xs border bg-muted p-4",
+        isLocked ? "border-success" : "border-transparent",
+      )}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <Text size="1" color="tertiary">
+          Rank #{rank ?? "-"}
+        </Text>
+        <Text
+          size="1"
+          color="tertiary"
+          className="tabular-nums"
+          suppressHydrationWarning
+        >
+          {formatDateTime(bid.createdAt)}
+        </Text>
+      </div>
+      <div className="flex justify-between">
+        <Text size="2" className="mt-2">
+          {formatPrice(bid.price)} {currencySymbol}
+        </Text>
+        <div className="mt-2 flex items-center gap-1.5">
+          {bid.isWinning ? (
+            <>
+              <div className="size-4 rounded-full bg-success" aria-hidden />
+              <Text size="2" color="success">
+                {getBidStatusLabel(bid.status, bid.isWinning)}
+              </Text>
+            </>
+          ) : (
+            <>
+              <div className="size-4 rounded-full bg-destructive" aria-hidden />
+              <Text size="2" color="error">
+                {getBidStatusLabel(bid.status, bid.isWinning)}
+              </Text>
+            </>
+          )}
+        </div>
+      </div>
+      {bid.status === "claimed" ? (
+        <Text
+          size="1"
+          color="tertiary"
+          className="mt-2"
+          suppressHydrationWarning
+        >
+          Claimed {bid.claimedAt ? formatDateTime(bid.claimedAt) : ""}
+        </Text>
+      ) : bid.isWinning && bid.status === "active" && onClaim ? (
+        <Button
+          color="secondary"
+          className="mt-3 w-full"
+          onClick={() => onClaim(bid.id)}
+        >
+          Claim
+        </Button>
+      ) : null}
+      {bid.isWinning && !isAuctionEnded ? (
+        <div className="mt-3">
+          <Button
+            color="secondary"
+            className="w-full"
+            onClick={() =>
+              isLocked
+                ? onCancelTopUp()
+                : onLockForTopUp(bid.globalBidId, bid.price)
+            }
+          >
+            {isLocked ? "Cancel top-up" : "Top up"}
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,61 @@
+"use client";
+
+import { Text } from "@/components/primitives";
+import { useAuctionContext } from "./AuctionContext";
+import { AuctionYourBidCard } from "./AuctionYourBidCard";
+
+export interface AuctionYourBidsProps {
+  className?: string;
+}
+
+export function AuctionYourBids({
+  className,
+}: AuctionYourBidsProps): React.ReactElement | null {
+  const {
+    userBids,
+    getRankForBid,
+    lockedBid,
+    setLockedBid,
+    isAuctionEnded,
+    handleClaimEdition,
+    formatPrice,
+    currencySymbol,
+  } = useAuctionContext();
+
+  if (userBids.length === 0) return null;
+
+  const onLockForTopUp = (bidId: bigint, priceValue: bigint) => {
+    setLockedBid({ bidId, priceValue });
+  };
+
+  const onCancelTopUp = () => setLockedBid(null);
+
+  return (
+    <div className={className}>
+      <Text
+        as="h3"
+        color="tertiary"
+        className="mb-3 shrink-0"
+        aria-label={`Your Bids (${userBids.length})`}
+      >
+        Your Bids ({userBids.length})
+      </Text>
+      <div className="-mr-1 min-h-0 flex-1 space-y-3 overflow-y-auto py-1 pr-1">
+        {userBids.map((bid) => (
+          <AuctionYourBidCard
+            key={bid.id}
+            bid={bid}
+            getRankForBid={getRankForBid}
+            lockedBidId={lockedBid?.bidId ?? null}
+            onLockForTopUp={onLockForTopUp}
+            onCancelTopUp={onCancelTopUp}
+            isAuctionEnded={isAuctionEnded}
+            onClaim={handleClaimEdition}
+            formatPrice={formatPrice}
+            currencySymbol={currencySymbol}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/blocks/auction/index.ts

@@ -0,0 +1,42 @@
+export type { AuctionProps } from "./Auction";
+export { Auction, useAuctionContext } from "./Auction";
+export type { AuctionArtworkProps } from "./AuctionArtwork";
+export { AuctionArtwork } from "./AuctionArtwork";
+export { AuctionBidForm } from "./AuctionBidForm";
+export type { AuctionBidInputProps } from "./AuctionBidInput";
+export { AuctionBidInput } from "./AuctionBidInput";
+export type { AuctionProviderProps } from "./AuctionContext";
+export { AuctionProvider } from "./AuctionContext";
+export type { AuctionInfoProps } from "./AuctionInfo";
+export { AuctionInfo } from "./AuctionInfo";
+export type {
+  AuctionBiddingPanelProps,
+  AuctionDetailsBodyProps,
+  AuctionDetailsFooterProps,
+  AuctionDetailsHeaderProps,
+  AuctionDetailsProps,
+  AuctionLayoutProps,
+  AuctionRankingsContainerProps,
+} from "./AuctionLayout";
+export {
+  AuctionBiddingPanel,
+  AuctionDetails,
+  AuctionDetailsBody,
+  AuctionDetailsFooter,
+  AuctionDetailsHeader,
+  AuctionLayout,
+  AuctionRankingsContainer,
+} from "./AuctionLayout";
+export type { AuctionRankingsProps } from "./AuctionRankings";
+export { AuctionRankings, RankingsSkeleton } from "./AuctionRankings";
+export type { AuctionStatusTagProps } from "./AuctionStatusTag";
+export { AuctionStatusTag } from "./AuctionStatusTag";
+export type {
+  AuctionSuggestedBidsProps,
+  SuggestedBidContextValue,
+} from "./AuctionSuggestedBids";
+export { AuctionSuggestedBids, useSuggestedBid } from "./AuctionSuggestedBids";
+export type { AuctionYourBidCardProps } from "./AuctionYourBidCard";
+export { AuctionYourBidCard } from "./AuctionYourBidCard";
+export type { AuctionYourBidsProps } from "./AuctionYourBids";
+export { AuctionYourBids } from "./AuctionYourBids";

package/src/components/blocks/index.ts

@@ -0,0 +1 @@
+export * from "./auction";

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./blocks";
+export * from "./primitives";

package/src/components/primitives/Button.tsx

@@ -0,0 +1,183 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { IconLoader2 } from "@tabler/icons-react";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { cn } from "@/lib/cn";
+
+type ButtonColor =
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "ghost"
+  | "destructive"
+  | "link";
+type ButtonSize =
+  | "default"
+  | "xs"
+  | "sm"
+  | "lg"
+  | "xl"
+  | "icon"
+  | "icon-xs"
+  | "icon-sm"
+  | "icon-lg"
+  | "card";
+
+interface ButtonVariantProps {
+  color?: ButtonColor;
+  size?: ButtonSize;
+  className?: string;
+}
+
+const buttonVariants = cva(
+  [
+    // Base layout & typography
+    "inline-flex cursor-pointer items-center justify-center gap-1.5",
+    "font-sans text-sm leading-none font-medium whitespace-nowrap",
+    "shrink-0 select-none",
+    // Transitions
+    "transition-all duration-150 ease-out",
+    // SVG children
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    // Focus ring
+    "outline-none",
+    "focus-visible:ring-2 focus-visible:ring-offset-2",
+    "focus-visible:ring-ring focus-visible:ring-offset-background",
+    // Disabled - prevent interaction
+    "disabled:pointer-events-none disabled:cursor-not-allowed aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed",
+    // aria-invalid
+    "aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/30",
+  ].join(" "),
+  {
+    variants: {
+      color: {
+        primary: [
+          "border border-solid",
+          "border-primary bg-primary text-primary-foreground",
+          "hover:border-primary-hover hover:bg-primary-hover",
+          "active:opacity-90",
+          "shadow-[0_1px_2px_0_rgb(0,0,0,0.08)]",
+          "disabled:opacity-50 aria-disabled:opacity-50",
+        ].join(" "),
+
+        secondary: [
+          "border border-solid",
+          "border-border bg-transparent text-foreground",
+          "hover:border-input hover:bg-accent",
+          "active:border-input active:bg-accent-active",
+          "data-[state=active]:border-input data-[state=active]:bg-accent-active",
+          "shadow-[0_1px_2px_0_rgb(0,0,0,0.04)]",
+          "disabled:opacity-50 aria-disabled:opacity-50",
+        ].join(" "),
+
+        tertiary: [
+          "border border-solid",
+          "border-border bg-muted text-muted-foreground",
+          "hover:border-input hover:bg-accent-hover hover:text-foreground",
+          "active:bg-accent-active active:text-foreground",
+          "data-[state=active]:bg-accent-active data-[state=active]:text-foreground",
+          "disabled:opacity-50 aria-disabled:opacity-50",
+        ].join(" "),
+
+        ghost: [
+          "border border-transparent bg-transparent",
+          "text-muted-foreground",
+          "hover:bg-accent hover:text-foreground",
+          "active:bg-accent-active active:text-foreground",
+          "data-[state=active]:bg-accent-active data-[state=active]:text-foreground",
+          "disabled:text-disabled-foreground",
+          "aria-disabled:text-disabled-foreground",
+        ].join(" "),
+
+        destructive: [
+          "border border-solid",
+          "border-destructive bg-destructive text-destructive-foreground",
+          "hover:border-destructive-hover hover:bg-destructive-hover",
+          "active:opacity-90",
+          "shadow-[0_1px_2px_0_rgb(0,0,0,0.08)]",
+          "disabled:opacity-50 aria-disabled:opacity-50",
+        ].join(" "),
+
+        link: [
+          "border-transparent bg-transparent",
+          "text-foreground underline-offset-4",
+          "hover:underline",
+          "h-auto px-0 py-0",
+          "disabled:text-disabled-foreground disabled:no-underline",
+          "aria-disabled:text-disabled-foreground aria-disabled:no-underline",
+        ].join(" "),
+      },
+
+      size: {
+        default: "h-9 rounded-md px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded px-2 text-xs has-[>svg]:px-1.5",
+        sm: "h-8 gap-1 rounded-md px-3 text-xs has-[>svg]:px-2.5",
+        lg: "h-10 rounded-lg px-5 text-[15px] has-[>svg]:px-4",
+        xl: "h-12 rounded-lg px-6 text-[15px] font-semibold has-[>svg]:px-5",
+        icon: "size-9 rounded-md",
+        "icon-xs": "size-6 rounded",
+        "icon-sm": "size-8 rounded-md",
+        "icon-lg": "size-10 rounded-lg",
+        card: "min-h-[4rem] rounded-md px-4 py-3",
+      },
+    },
+    defaultVariants: {
+      color: "primary",
+      size: "default",
+    },
+  },
+) as (props?: ButtonVariantProps) => string;
+
+type ButtonVariants = typeof buttonVariants;
+
+export type ButtonProps = React.ComponentProps<typeof ButtonPrimitive> &
+  VariantProps<ButtonVariants> & {
+    loading?: boolean;
+    active?: boolean;
+  };
+
+export type ButtonElement = React.ComponentRef<"button">;
+
+export function Button({
+  className,
+  color,
+  size,
+  disabled,
+  loading,
+  children,
+  active,
+  ...props
+}: ButtonProps): React.ReactElement {
+  const _disabled = disabled || loading;
+
+  const _children = loading ? (
+    <>
+      <span className="invisible contents">{children}</span>
+      <span className="absolute inset-0 flex items-center justify-center">
+        <IconLoader2 aria-hidden className="size-4 animate-spin" />
+      </span>
+    </>
+  ) : (
+    children
+  );
+
+  return (
+    <ButtonPrimitive
+      data-state={active ? "active" : undefined}
+      disabled={_disabled}
+      focusableWhenDisabled
+      className={cn(
+        buttonVariants({ color, size }),
+        {
+          relative: loading,
+        },
+        className,
+      )}
+      {...props}
+    >
+      {_children}
+    </ButtonPrimitive>
+  );
+}
+
+export { buttonVariants };