@m3000/market 0.0.1

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

@@ -0,0 +1,74 @@
+"use client";
+
+import type { ReactNode } from "react";
+import type {
+  AuctionData,
+  AuctionFormatters,
+  AuctionUserBid,
+  RankableBid,
+} from "@/types";
+import { AuctionProvider } from "./AuctionContext";
+
+export interface AuctionProps {
+  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: ReactNode;
+  className?: string;
+}
+
+/**
+ * Root component for an auction interface.
+ * Provides context and orchestrates the layout of child components.
+ *
+ * @example
+ * ```tsx
+ * <Auction
+ *   auction={auctionData}
+ *   bids={bids}
+ *   userBids={myBids}
+ *   onPlaceBid={async (price, qty) => { /* wagmi call *\/ }}
+ *   onTopUpBid={async (bidId, newPrice, value) => { /* wagmi call *\/ }}
+ * >
+ *   <AuctionInfo />
+ *   <AuctionBidInput />
+ *   <AuctionRankings />
+ *   <AuctionYourBids />
+ * </Auction>
+ * ```
+ */
+export function Auction({
+  auction,
+  bids,
+  userBids,
+  onPlaceBid,
+  onTopUpBid,
+  onClaimEdition,
+  formatters,
+  children,
+  className,
+}: AuctionProps): React.ReactElement {
+  return (
+    <AuctionProvider
+      auction={auction}
+      bids={bids}
+      userBids={userBids}
+      onPlaceBid={onPlaceBid}
+      onTopUpBid={onTopUpBid}
+      onClaimEdition={onClaimEdition}
+      formatters={formatters}
+    >
+      <div className={className}>{children}</div>
+    </AuctionProvider>
+  );
+}
+
+export { useAuctionContext } from "./AuctionContext";

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

@@ -0,0 +1,4 @@
+export {
+  FramedImage as AuctionArtwork,
+  type FramedImageProps as AuctionArtworkProps,
+} from "@/components/primitives/framed-image";

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

@@ -0,0 +1,138 @@
+"use client";
+
+import { Button, SteppedInput, Text } from "@/components/primitives";
+import { cn } from "@/lib";
+import { CursorGrowIcon } from "../../primitives/SteppedInput";
+import { useAuctionContext } from "./AuctionContext";
+
+export function AuctionBidFormRoot({
+  className,
+}: {
+  className?: string;
+}): React.ReactElement {
+  const {
+    isAuctionEnded,
+    minBidValue,
+    tickConfig,
+    tickSize,
+    lockedBid,
+    placeBidOperation,
+    topUpOperation,
+    handlePlaceBid,
+    handleTopUp,
+    bidValue,
+    setBidValue,
+    formatPrice,
+    currencySymbol,
+    inputDecimals,
+    cancelBidding,
+  } = useAuctionContext();
+
+  const effectiveMinBid =
+    lockedBid !== null && lockedBid.priceValue > minBidValue
+      ? lockedBid.priceValue
+      : minBidValue;
+
+  const getTickSize = (currentValue: bigint) => {
+    if (!tickConfig) return tickSize;
+    return currentValue > tickConfig.threshold
+      ? tickConfig.largeTickSize
+      : tickConfig.smallTickSize;
+  };
+
+  const activeOperation =
+    lockedBid !== null ? topUpOperation : placeBidOperation;
+  const status = activeOperation.status;
+  const errorMessage = activeOperation.error;
+
+  const handleSubmit = async () => {
+    const success =
+      lockedBid !== null
+        ? await handleTopUp(bidValue.toString())
+        : await handlePlaceBid(bidValue.toString());
+    if (success) setBidValue(effectiveMinBid);
+  };
+
+  const isLoading =
+    status === "pending" || status === "confirming" || status === "indexing";
+
+  return (
+    <div className={cn("flex flex-col gap-4", className)}>
+      {status === "error" ? (
+        <div className="rounded-xs bg-destructive-muted p-2 text-destructive">
+          <Text size="1">{errorMessage}</Text>
+        </div>
+      ) : null}
+      <fieldset
+        disabled={isAuctionEnded}
+        className="flex w-full flex-col gap-4"
+      >
+        {lockedBid !== null ? (
+          <Text size="1">
+            Update your bid. You will pay the difference between the new bid
+            amount and the existing bid.
+          </Text>
+        ) : (
+          <Text size="1">Place a new bid to participate in the auction.</Text>
+        )}
+        <SteppedInput.Root
+          value={bidValue}
+          onChange={setBidValue}
+          min={effectiveMinBid}
+          getTickSize={getTickSize}
+          decimals={inputDecimals}
+          disabled={isAuctionEnded}
+          snapToTick="nearest"
+        >
+          <SteppedInput.Group>
+            <SteppedInput.Decrement />
+            <SteppedInput.ScrubArea>
+              <SteppedInput.ScrubAreaCursor>
+                <CursorGrowIcon />
+              </SteppedInput.ScrubAreaCursor>
+              <SteppedInput.Value>
+                {({ value }) => `${formatPrice(value)} ${currencySymbol}`}
+              </SteppedInput.Value>
+            </SteppedInput.ScrubArea>
+            <SteppedInput.Increment />
+          </SteppedInput.Group>
+        </SteppedInput.Root>
+        <div className="flex w-full gap-2">
+          <Button
+            type="button"
+            color="tertiary"
+            className="grow whitespace-nowrap"
+            onClick={cancelBidding}
+          >
+            Cancel
+          </Button>
+          <Button
+            className="grow"
+            type="button"
+            loading={isLoading}
+            disabled={
+              isAuctionEnded ||
+              (!!lockedBid && bidValue - lockedBid.priceValue === 0n)
+            }
+            onClick={handleSubmit}
+          >
+            {lockedBid !== null ? (
+              <span>
+                Update bid (+{formatPrice(bidValue - lockedBid.priceValue)}{" "}
+                {currencySymbol})
+              </span>
+            ) : (
+              <span>Place bid</span>
+            )}
+          </Button>
+        </div>
+      </fieldset>
+    </div>
+  );
+}
+
+export const AuctionBidForm: {
+  Root: typeof AuctionBidFormRoot;
+} = {
+  Root: AuctionBidFormRoot,
+};

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

@@ -0,0 +1,166 @@
+"use client";
+
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useEffect } from "react";
+import { Button, SteppedInput, Text } from "@/components/primitives";
+import { transitions } from "@/lib";
+import { CursorGrowIcon } from "../../primitives/SteppedInput";
+import { useAuctionContext } from "./AuctionContext";
+
+export interface AuctionBidInputProps {
+  className?: string;
+}
+
+export function AuctionBidInput({
+  className,
+}: AuctionBidInputProps): React.ReactElement {
+  const {
+    isAuctionEnded,
+    minBidValue,
+    tickConfig,
+    tickSize,
+    lockedBid,
+    setLockedBid,
+    placeBidOperation,
+    topUpOperation,
+    handlePlaceBid,
+    handleTopUp,
+    getProjectedRank,
+    bidValue,
+    setBidValue,
+    formatPrice,
+    currencySymbol,
+    inputDecimals,
+  } = useAuctionContext();
+
+  const effectiveMinBid =
+    lockedBid !== null && lockedBid.priceValue > minBidValue
+      ? lockedBid.priceValue
+      : minBidValue;
+
+  useEffect(() => {
+    setBidValue((prev) => (prev < effectiveMinBid ? effectiveMinBid : prev));
+  }, [effectiveMinBid, setBidValue]);
+
+  const getTickSize = useCallback(
+    (currentValue: bigint) => {
+      if (!tickConfig) return tickSize;
+      return currentValue > tickConfig.threshold
+        ? tickConfig.largeTickSize
+        : tickConfig.smallTickSize;
+    },
+    [tickConfig, tickSize],
+  );
+
+  const activeOperation =
+    lockedBid !== null ? topUpOperation : placeBidOperation;
+  const status = activeOperation.status;
+  const errorMessage = activeOperation.error;
+
+  const { rank: projectedRank, isWinning: isProjectedWinning } =
+    getProjectedRank(bidValue);
+
+  const bidDisplay = `${formatPrice(bidValue)} ${currencySymbol}`;
+
+  const primaryCtaLabel =
+    lockedBid !== null
+      ? projectedRank != null && !isAuctionEnded
+        ? `Top up to rank #${projectedRank}${
+            !isProjectedWinning ? " (outside winning range)" : ""
+          }`
+        : "Top up"
+      : projectedRank != null && !isAuctionEnded
+        ? `Bid ${bidDisplay} and get rank #${projectedRank}${
+            !isProjectedWinning ? " (outside winning range)" : ""
+          }`
+        : `Bid ${bidDisplay}`;
+
+  const handleSubmit = useCallback(async () => {
+    const success =
+      lockedBid !== null
+        ? await handleTopUp(bidValue.toString())
+        : await handlePlaceBid(bidValue.toString());
+    if (success) setBidValue(effectiveMinBid);
+  }, [
+    bidValue,
+    effectiveMinBid,
+    lockedBid,
+    handlePlaceBid,
+    handleTopUp,
+    setBidValue,
+  ]);
+
+  const isLoading =
+    status === "pending" || status === "confirming" || status === "indexing";
+
+  return (
+    <div className={className}>
+      {status === "error" ? (
+        <div className="bg-error/10 text-error mb-2 rounded-xs p-2">
+          <Text size="1">{errorMessage}</Text>
+        </div>
+      ) : null}
+      <fieldset
+        disabled={isAuctionEnded}
+        className="flex w-full flex-col gap-2"
+      >
+        <SteppedInput.Root
+          value={bidValue}
+          onChange={setBidValue}
+          min={effectiveMinBid}
+          getTickSize={getTickSize}
+          decimals={inputDecimals}
+          disabled={isAuctionEnded}
+          snapToTick="nearest"
+        >
+          <SteppedInput.Group>
+            <SteppedInput.Decrement />
+            <SteppedInput.ScrubArea>
+              <SteppedInput.ScrubAreaCursor>
+                <CursorGrowIcon />
+              </SteppedInput.ScrubAreaCursor>
+              <SteppedInput.Value>
+                {({ value }) => `${formatPrice(value)} ${currencySymbol}`}
+              </SteppedInput.Value>
+            </SteppedInput.ScrubArea>
+            <SteppedInput.Increment />
+          </SteppedInput.Group>
+        </SteppedInput.Root>
+        <div className="flex flex-row gap-2">
+          <AnimatePresence mode="popLayout">
+            {lockedBid !== null && (
+              <motion.div
+                key="cancel-button"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={transitions.fade}
+                className="flex-1"
+              >
+                <Button
+                  type="button"
+                  color="tertiary"
+                  className="w-full whitespace-nowrap"
+                  onClick={() => setLockedBid(null)}
+                >
+                  Cancel top up
+                </Button>
+              </motion.div>
+            )}
+          </AnimatePresence>
+          <div className="min-w-0 flex-1">
+            <Button
+              type="button"
+              loading={isLoading}
+              disabled={isAuctionEnded}
+              onClick={handleSubmit}
+              className="w-full whitespace-nowrap"
+            >
+              {primaryCtaLabel}
+            </Button>
+          </div>
+        </div>
+      </fieldset>
+    </div>
+  );
+}