From 437c3f6a95be9505d6b1d1fe81d0844075bbe2ec Mon Sep 17 00:00:00 2001
From: Willy Ogorzaly <willy@ogorzaly.com>
Date: Thu, 27 Nov 2025 12:08:00 -0300
Subject: [PATCH 1/6] Add Nounish Auctions fidget

---
 .../community/nouns-dao/NounishAuctions.tsx   | 805 ++++++++++++++++++
 src/fidgets/index.ts                          |   2 +
 2 files changed, 807 insertions(+)
 create mode 100644 src/fidgets/community/nouns-dao/NounishAuctions.tsx

diff --git a/src/fidgets/community/nouns-dao/NounishAuctions.tsx b/src/fidgets/community/nouns-dao/NounishAuctions.tsx
new file mode 100644
index 000000000..d70dd1627
--- /dev/null
+++ b/src/fidgets/community/nouns-dao/NounishAuctions.tsx
@@ -0,0 +1,805 @@
+"use client";
+
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { formatEther, isAddress, parseEther } from "viem";
+import { base, mainnet, optimism } from "viem/chains";
+import {
+  useAccount,
+  useConnect,
+  useSwitchChain,
+  useWriteContract,
+} from "wagmi";
+import { waitForTransactionReceipt } from "wagmi/actions";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/common/components/atoms/card";
+import { Input } from "@/common/components/atoms/input";
+import { Button } from "@/common/components/atoms/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/common/components/atoms/select";
+import { Separator } from "@/common/components/atoms/separator";
+import { DAO_OPTIONS } from "@/constants/basedDaos";
+import { mergeClasses } from "@/common/lib/utils/mergeClasses";
+import { FidgetArgs, FidgetModule, FidgetProperties, FidgetSettingsStyle } from "@/common/fidgets";
+import { defaultStyleFields, WithMargin } from "@/fidgets/helpers";
+import { wagmiConfig } from "@/common/providers/Wagmi";
+import { DaoSelector } from "@/common/components/molecules/DaoSelector";
+
+const BUILDER_SUBGRAPH_ENDPOINTS: Record<string, string> = {
+  base:
+    "https://api.goldsky.com/api/public/project_clkk1ucdyf6ak38svcatie9tf/subgraphs/nouns-builder-base-mainnet/stable/gn",
+  mainnet: "https://api.thegraph.com/subgraphs/name/neokry/nouns-builder-mainnet",
+  optimism:
+    "https://api.thegraph.com/subgraphs/name/neokry/noun-builder-optimism-mainnet",
+};
+
+const SUPPORTED_NETWORKS = [
+  { label: "Base", value: "base", chain: base },
+  { label: "Ethereum", value: "mainnet", chain: mainnet },
+  { label: "Optimism", value: "optimism", chain: optimism },
+] as const;
+
+type SupportedNetwork = (typeof SUPPORTED_NETWORKS)[number]["value"];
+
+type DaoOption = {
+  name: string;
+  contract: string;
+  graphUrl: string;
+  icon?: string;
+};
+
+type BuilderAuction = {
+  id: string;
+  endTime: number;
+  startTime: number;
+  settled: boolean;
+  tokenId: string;
+  imageUrl?: string;
+  highestBidAmount?: string;
+  highestBidder?: string;
+  winningBidAmount?: string;
+  winningBidder?: string;
+};
+
+type BuilderDao = {
+  auctionAddress?: `0x${string}`;
+  name?: string;
+};
+
+const ACTIVE_AUCTION_QUERY = /* GraphQL */ `
+  query ActiveAuction($dao: ID!) {
+    dao(id: $dao) {
+      auctionAddress
+      name
+    }
+    auctions(
+      where: { dao: $dao, settled: false }
+      orderBy: startTime
+      orderDirection: desc
+      first: 1
+    ) {
+      id
+      endTime
+      startTime
+      settled
+      token {
+        tokenId
+        image
+      }
+      highestBid {
+        amount
+        bidder
+      }
+      winningBid {
+        amount
+        bidder
+      }
+    }
+  }
+`;
+
+const PAST_AUCTIONS_QUERY = /* GraphQL */ `
+  query PastAuctions($dao: ID!, $first: Int!, $skip: Int!) {
+    auctions(
+      where: { dao: $dao, settled: true }
+      orderBy: endTime
+      orderDirection: desc
+      first: $first
+      skip: $skip
+    ) {
+      id
+      endTime
+      token {
+        tokenId
+        image
+      }
+      winningBid {
+        amount
+        bidder
+      }
+      highestBid {
+        amount
+        bidder
+      }
+    }
+  }
+`;
+
+const auctionAbi = [
+  {
+    type: "function",
+    stateMutability: "view",
+    name: "auction",
+    inputs: [],
+    outputs: [
+      { name: "tokenId", type: "uint256" },
+      { name: "highestBid", type: "uint256" },
+      { name: "highestBidder", type: "address" },
+      { name: "startTime", type: "uint40" },
+      { name: "endTime", type: "uint40" },
+      { name: "settled", type: "bool" },
+    ],
+  },
+  {
+    type: "function",
+    stateMutability: "payable",
+    name: "createBid",
+    inputs: [{ name: "_tokenId", type: "uint256" }],
+    outputs: [],
+  },
+  {
+    type: "function",
+    stateMutability: "nonpayable",
+    name: "settleAuction",
+    inputs: [],
+    outputs: [],
+  },
+  {
+    type: "function",
+    stateMutability: "nonpayable",
+    name: "settleCurrentAndCreateNewAuction",
+    inputs: [],
+    outputs: [],
+  },
+  {
+    type: "function",
+    stateMutability: "view",
+    name: "paused",
+    inputs: [],
+    outputs: [{ name: "", type: "bool" }],
+  },
+] as const;
+
+async function runGraphQuery<T>(endpoint: string, query: string, variables: Record<string, unknown>): Promise<T> {
+  const response = await fetch(endpoint, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ query, variables }),
+  });
+
+  if (!response.ok) {
+    throw new Error(`GraphQL request failed with status ${response.status}`);
+  }
+
+  const json = (await response.json()) as { data?: T; errors?: Array<{ message: string }> };
+
+  if (json.errors?.length) {
+    throw new Error(json.errors.map((error) => error.message).join(", "));
+  }
+
+  if (!json.data) {
+    throw new Error("No data returned from subgraph");
+  }
+
+  return json.data;
+}
+
+const toHttpUri = (uri?: string | null): string | undefined => {
+  if (!uri) return undefined;
+  if (uri.startsWith("ipfs://")) {
+    return uri.replace("ipfs://", "https://ipfs.io/ipfs/");
+  }
+  return uri;
+};
+
+const formatEth = (value?: string | null): string => {
+  if (!value) return "0";
+  const asBigInt = BigInt(value);
+  const formatted = Number.parseFloat(formatEther(asBigInt));
+  return formatted.toFixed(4);
+};
+
+const shortenAddress = (address?: string | null): string => {
+  if (!address) return "-";
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+};
+
+const AuctionArt: React.FC<{ imageUrl?: string; tokenId?: string }> = ({ imageUrl, tokenId }) => {
+  return (
+    <div className="aspect-square w-full overflow-hidden rounded-xl bg-muted">
+      {imageUrl ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={imageUrl} alt={`Token ${tokenId}`} className="h-full w-full object-cover" />
+      ) : (
+        <div className="flex h-full w-full items-center justify-center text-sm text-muted-foreground">
+          No artwork
+        </div>
+      )}
+    </div>
+  );
+};
+
+const PastAuctionCard: React.FC<{ auction: BuilderAuction }> = ({ auction }) => (
+  <Card className="h-full">
+    <CardContent className="space-y-3 p-4">
+      <AuctionArt imageUrl={auction.imageUrl} tokenId={auction.tokenId} />
+      <div className="flex items-center justify-between text-sm font-medium">
+        <span>Token #{auction.tokenId}</span>
+        <span>{new Date(auction.endTime * 1000).toLocaleDateString()}</span>
+      </div>
+      <div className="space-y-1 text-sm">
+        <div className="text-muted-foreground">Final bid</div>
+        <div className="text-lg font-semibold">{formatEth(auction.winningBidAmount ?? auction.highestBidAmount)} ETH</div>
+      </div>
+      <div className="space-y-1 text-sm">
+        <div className="text-muted-foreground">Winner</div>
+        <div className="font-mono">{shortenAddress(auction.winningBidder ?? auction.highestBidder)}</div>
+      </div>
+    </CardContent>
+  </Card>
+);
+
+const Countdown: React.FC<{ endTime: number }> = ({ endTime }) => {
+  const [remaining, setRemaining] = useState(endTime * 1000 - Date.now());
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setRemaining(endTime * 1000 - Date.now());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [endTime]);
+
+  if (remaining <= 0) {
+    return <span className="text-red-500">Auction ended</span>;
+  }
+
+  const hours = Math.floor(remaining / (1000 * 60 * 60));
+  const minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
+  const seconds = Math.floor((remaining % (1000 * 60)) / 1000);
+
+  return (
+    <span>
+      {hours.toString().padStart(2, "0")}:{minutes.toString().padStart(2, "0")}:{seconds
+        .toString()
+        .padStart(2, "0")}
+    </span>
+  );
+};
+
+const ActiveAuctionCard: React.FC<{
+  auction: BuilderAuction;
+  dao?: BuilderDao;
+  onBid: (value: string) => Promise<void>;
+  onSettle: () => Promise<void>;
+  submitting: boolean;
+  disabled: boolean;
+}> = ({ auction, dao, onBid, onSettle, submitting, disabled }) => {
+  const [bidValue, setBidValue] = useState<string>("");
+  const endsInFuture = auction.endTime * 1000 > Date.now();
+  const currentBid = auction.highestBidAmount ?? auction.winningBidAmount ?? "0";
+
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <CardTitle className="text-xl">{dao?.name ?? "Active Auction"}</CardTitle>
+            <CardDescription>Token #{auction.tokenId}</CardDescription>
+          </div>
+          <div className={mergeClasses("rounded-full px-3 py-1 text-xs font-semibold", endsInFuture ? "bg-emerald-100 text-emerald-700" : "bg-amber-100 text-amber-700")}> 
+            {endsInFuture ? "Live" : "Needs settlement"}
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <AuctionArt imageUrl={auction.imageUrl} tokenId={auction.tokenId} />
+
+        <div className="grid grid-cols-2 gap-4 text-sm sm:grid-cols-4">
+          <div>
+            <div className="text-muted-foreground">Current bid</div>
+            <div className="text-lg font-semibold">{formatEth(currentBid)} ETH</div>
+          </div>
+          <div>
+            <div className="text-muted-foreground">Highest bidder</div>
+            <div className="font-mono text-sm">{shortenAddress(auction.highestBidder ?? auction.winningBidder)}</div>
+          </div>
+          <div>
+            <div className="text-muted-foreground">Ends</div>
+            <div>{new Date(auction.endTime * 1000).toLocaleString()}</div>
+          </div>
+          <div>
+            <div className="text-muted-foreground">Countdown</div>
+            <div className="font-mono">{endsInFuture ? <Countdown endTime={auction.endTime} /> : "Ended"}</div>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-end">
+          <div className="w-full sm:max-w-xs">
+            <label className="text-sm text-muted-foreground">Bid amount (ETH)</label>
+            <Input
+              type="number"
+              min="0"
+              step="0.01"
+              value={bidValue}
+              onChange={(event) => setBidValue(event.target.value)}
+              placeholder="0.05"
+              disabled={submitting || disabled || !endsInFuture}
+            />
+          </div>
+          <div className="flex flex-1 flex-wrap gap-2">
+            <Button
+              disabled={submitting || disabled || !endsInFuture || !bidValue}
+              onClick={() => onBid(bidValue)}
+            >
+              Place bid
+            </Button>
+            <Button
+              variant="outline"
+              disabled={submitting || disabled || endsInFuture}
+              onClick={onSettle}
+            >
+              Settle auction
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export type NounishAuctionsSettings = {
+  selectedDao: DaoOption;
+  customDaoContract?: string;
+  builderNetwork?: SupportedNetwork;
+  customGraphUrl?: string;
+} & FidgetSettingsStyle;
+
+export const nounishAuctionsConfig: FidgetProperties = {
+  fidgetName: "Nounish Auctions",
+  icon: 0x1f3b0,
+  fields: [
+    {
+      fieldName: "selectedDao",
+      displayName: "Select DAO",
+      displayNameHint: "Choose a Builder DAO to prefill address and subgraph",
+      default: DAO_OPTIONS.find((dao) => dao.name === "Gnars") ?? DAO_OPTIONS[0],
+      required: false,
+      inputSelector: (props) => (
+        <WithMargin>
+          <DaoSelector {...props} />
+        </WithMargin>
+      ),
+      group: "settings",
+    },
+    {
+      fieldName: "customDaoContract",
+      displayName: "Custom DAO contract",
+      displayNameHint: "Override the DAO address if it is not listed",
+      required: false,
+      inputSelector: (props) => (
+        <WithMargin>
+          <Input {...props} placeholder="0x..." />
+        </WithMargin>
+      ),
+      group: "settings",
+    },
+    {
+      fieldName: "builderNetwork",
+      displayName: "Builder network",
+      displayNameHint: "Network where the DAO is deployed",
+      default: "base",
+      required: false,
+      inputSelector: (props) => (
+        <WithMargin>
+          <Select value={props.value as string} onValueChange={(value) => props.onChange(value as SupportedNetwork)}>
+            <SelectTrigger>
+              <SelectValue placeholder="Select network" />
+            </SelectTrigger>
+            <SelectContent>
+              {SUPPORTED_NETWORKS.map((network) => (
+                <SelectItem key={network.value} value={network.value}>
+                  {network.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </WithMargin>
+      ),
+      group: "settings",
+    },
+    {
+      fieldName: "customGraphUrl",
+      displayName: "Custom subgraph URL",
+      displayNameHint: "Provide a custom Builder subgraph endpoint if needed",
+      required: false,
+      inputSelector: (props) => (
+        <WithMargin>
+          <Input {...props} placeholder="https://..." />
+        </WithMargin>
+      ),
+      group: "settings",
+    },
+    ...defaultStyleFields,
+  ],
+  size: {
+    minHeight: 8,
+    maxHeight: 36,
+    minWidth: 6,
+    maxWidth: 36,
+  },
+};
+
+const pageSize = 9;
+
+export const NounishAuctions: React.FC<FidgetArgs<NounishAuctionsSettings>> = ({ settings }) => {
+  const initialDao = settings.selectedDao ?? DAO_OPTIONS[0];
+  const [activeAuction, setActiveAuction] = useState<BuilderAuction | null>(null);
+  const [daoDetails, setDaoDetails] = useState<BuilderDao | null>(null);
+  const [pastAuctions, setPastAuctions] = useState<BuilderAuction[]>([]);
+  const [loadingActive, setLoadingActive] = useState(false);
+  const [loadingPast, setLoadingPast] = useState(false);
+  const [page, setPage] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [txPending, setTxPending] = useState(false);
+  const [hasMorePast, setHasMorePast] = useState(true);
+  const [daoChoice, setDaoChoice] = useState<DaoOption>(initialDao);
+  const [customAddress, setCustomAddress] = useState(settings.customDaoContract ?? "");
+  const [networkValue, setNetworkValue] = useState<SupportedNetwork>(
+    (settings.builderNetwork ?? "base") as SupportedNetwork,
+  );
+  const [customGraphUrl, setCustomGraphUrl] = useState(settings.customGraphUrl ?? "");
+
+  const { address, chainId } = useAccount();
+  const { connectAsync, connectors } = useConnect();
+  const { switchChainAsync } = useSwitchChain();
+  const { writeContractAsync } = useWriteContract();
+
+  const daoAddress = useMemo(() => {
+    const override = customAddress.trim();
+    const fromSelector = daoChoice?.contract;
+    return (override && isAddress(override) ? override : fromSelector) as `0x${string}` | undefined;
+  }, [customAddress, daoChoice?.contract]);
+
+  const resolvedNetwork =
+    SUPPORTED_NETWORKS.find((item) => item.value === networkValue) ?? SUPPORTED_NETWORKS[0];
+
+  const subgraphUrl =
+    customGraphUrl ||
+    daoChoice?.graphUrl ||
+    BUILDER_SUBGRAPH_ENDPOINTS[networkValue] ||
+    BUILDER_SUBGRAPH_ENDPOINTS.base;
+
+  const hasValidDao = Boolean(daoAddress);
+
+  const fetchActiveAuction = useCallback(async () => {
+    if (!hasValidDao) return;
+    setLoadingActive(true);
+    setError(null);
+    try {
+      const data = await runGraphQuery<{
+        dao?: BuilderDao;
+        auctions: Array<{
+          id: string;
+          endTime: string;
+          startTime: string;
+          settled: boolean;
+          token?: { tokenId: string; image?: string | null } | null;
+          highestBid?: { amount: string; bidder: string } | null;
+          winningBid?: { amount: string; bidder: string } | null;
+        }>;
+      }>(subgraphUrl, ACTIVE_AUCTION_QUERY, { dao: daoAddress?.toLowerCase() });
+
+      const auction = data.auctions?.[0];
+      setDaoDetails(data.dao ?? null);
+
+      if (auction) {
+        setActiveAuction({
+          id: auction.id,
+          endTime: Number(auction.endTime),
+          startTime: Number(auction.startTime),
+          settled: auction.settled,
+          tokenId: auction.token?.tokenId ?? "",
+          imageUrl: toHttpUri(auction.token?.image),
+          highestBidAmount: auction.highestBid?.amount ?? undefined,
+          highestBidder: auction.highestBid?.bidder,
+          winningBidAmount: auction.winningBid?.amount ?? undefined,
+          winningBidder: auction.winningBid?.bidder,
+        });
+      } else {
+        setActiveAuction(null);
+      }
+    } catch (err) {
+      console.error(err);
+      setError((err as Error).message);
+    } finally {
+      setLoadingActive(false);
+    }
+  }, [daoAddress, hasValidDao, subgraphUrl]);
+
+  const fetchPastAuctions = useCallback(
+    async (pageIndex: number, reset = false) => {
+      if (!hasValidDao) return;
+      setLoadingPast(true);
+      setError(null);
+      if (reset) {
+        setHasMorePast(true);
+      }
+      try {
+        const data = await runGraphQuery<{
+          auctions: Array<{
+            id: string;
+            endTime: string;
+            token?: { tokenId: string; image?: string | null } | null;
+            winningBid?: { amount: string; bidder: string } | null;
+            highestBid?: { amount: string; bidder: string } | null;
+          }>;
+        }>(subgraphUrl, PAST_AUCTIONS_QUERY, {
+          dao: daoAddress?.toLowerCase(),
+          first: pageSize,
+          skip: pageIndex * pageSize,
+        });
+
+        const mapped = (data.auctions || []).map((auction) => ({
+          id: auction.id,
+          endTime: Number(auction.endTime),
+          startTime: Number(auction.endTime),
+          settled: true,
+          tokenId: auction.token?.tokenId ?? "",
+          imageUrl: toHttpUri(auction.token?.image),
+          highestBidAmount: auction.highestBid?.amount ?? undefined,
+          highestBidder: auction.highestBid?.bidder,
+          winningBidAmount: auction.winningBid?.amount ?? undefined,
+          winningBidder: auction.winningBid?.bidder,
+        }));
+
+        setPastAuctions((prev) => (reset ? mapped : [...prev, ...mapped]));
+        if (mapped.length < pageSize) {
+          setHasMorePast(false);
+        }
+      } catch (err) {
+        console.error(err);
+        setError((err as Error).message);
+      } finally {
+        setLoadingPast(false);
+      }
+    },
+    [daoAddress, hasValidDao, subgraphUrl],
+  );
+
+  useEffect(() => {
+    setPage(0);
+    fetchActiveAuction();
+    fetchPastAuctions(0, true);
+  }, [fetchActiveAuction, fetchPastAuctions, refreshKey]);
+
+  const ensureConnection = useCallback(async () => {
+    if (!connectAsync || !switchChainAsync) return;
+    if (!address) {
+      const connector = connectors[0];
+      if (!connector) throw new Error("No wallet connector available");
+      await connectAsync({ connector, chainId: resolvedNetwork.chain.id });
+      return;
+    }
+    if (chainId !== resolvedNetwork.chain.id) {
+      await switchChainAsync({ chainId: resolvedNetwork.chain.id });
+    }
+  }, [address, chainId, connectAsync, connectors, resolvedNetwork.chain.id, switchChainAsync]);
+
+  const handleBid = useCallback(
+    async (value: string) => {
+      if (!activeAuction || !daoDetails?.auctionAddress) return;
+      const trimmed = value.trim();
+      if (!trimmed || Number(trimmed) <= 0) {
+        setError("Enter a valid bid amount");
+        return;
+      }
+      setError(null);
+      try {
+        setTxPending(true);
+        await ensureConnection();
+        const hash = await writeContractAsync({
+          address: daoDetails.auctionAddress,
+          abi: auctionAbi,
+          functionName: "createBid",
+          args: [BigInt(activeAuction.tokenId)],
+          value: parseEther(trimmed),
+          chainId: resolvedNetwork.chain.id,
+        });
+        await waitForTransactionReceipt(wagmiConfig, { hash, chainId: resolvedNetwork.chain.id });
+        setRefreshKey((prev) => prev + 1);
+      } catch (err) {
+        console.error(err);
+        setError((err as Error).message);
+      } finally {
+        setTxPending(false);
+      }
+    },
+    [activeAuction, daoDetails?.auctionAddress, ensureConnection, resolvedNetwork.chain.id, writeContractAsync],
+  );
+
+  const handleSettle = useCallback(async () => {
+    if (!activeAuction || !daoDetails?.auctionAddress) return;
+    setError(null);
+    try {
+      setTxPending(true);
+      await ensureConnection();
+      const hash = await writeContractAsync({
+        address: daoDetails.auctionAddress,
+        abi: auctionAbi,
+        functionName: "settleCurrentAndCreateNewAuction",
+        args: [],
+        chainId: resolvedNetwork.chain.id,
+      });
+      await waitForTransactionReceipt(wagmiConfig, { hash, chainId: resolvedNetwork.chain.id });
+      setRefreshKey((prev) => prev + 1);
+    } catch (err) {
+      console.error(err);
+      setError((err as Error).message);
+    } finally {
+      setTxPending(false);
+    }
+  }, [activeAuction, daoDetails?.auctionAddress, ensureConnection, resolvedNetwork.chain.id, writeContractAsync]);
+
+  const handleLoadMore = () => {
+    const nextPage = page + 1;
+    setPage(nextPage);
+    fetchPastAuctions(nextPage);
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-4 p-4" style={{ fontFamily: settings.fontFamily, color: settings.fontColor }}>
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        <Card>
+          <CardHeader>
+            <CardTitle>DAO</CardTitle>
+            <CardDescription>Select a Builder DAO</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <DaoSelector
+              onChange={(dao) => {
+                setDaoChoice(dao);
+                setRefreshKey((prev) => prev + 1);
+              }}
+              value={daoChoice}
+            />
+            <div className="mt-3 space-y-1 text-xs text-muted-foreground">
+              <div>Address: {daoAddress ?? "-"}</div>
+              <div>Network: {resolvedNetwork.label}</div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Custom DAO</CardTitle>
+            <CardDescription>Override DAO address</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <Input
+              value={customAddress}
+              placeholder="0x..."
+              onChange={(event) => setCustomAddress(event.target.value)}
+              onBlur={() => setRefreshKey((prev) => prev + 1)}
+            />
+            <Select
+              value={networkValue}
+              onValueChange={(value) => {
+                setNetworkValue(value as SupportedNetwork);
+                setRefreshKey((prev) => prev + 1);
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Network" />
+              </SelectTrigger>
+              <SelectContent>
+                {SUPPORTED_NETWORKS.map((network) => (
+                  <SelectItem key={network.value} value={network.value}>
+                    {network.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </CardContent>
+        </Card>
+
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle>Subgraph endpoint</CardTitle>
+            <CardDescription>Override if your DAO uses a custom URL</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Input
+              value={customGraphUrl}
+              placeholder="https://..."
+              onChange={(event) => setCustomGraphUrl(event.target.value)}
+              onBlur={() => setRefreshKey((prev) => prev + 1)}
+            />
+            <div className="mt-2 text-xs text-muted-foreground">Current endpoint: {subgraphUrl}</div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Separator />
+
+      {error ? (
+        <div className="rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive">
+          {error}
+        </div>
+      ) : null}
+
+      {!hasValidDao && (
+        <div className="text-sm text-muted-foreground">Enter a valid DAO contract address to load auctions.</div>
+      )}
+
+      {loadingActive && <div className="text-sm text-muted-foreground">Loading active auction...</div>}
+
+      {hasValidDao && !loadingActive && activeAuction && (
+        <ActiveAuctionCard
+          auction={activeAuction}
+          dao={daoDetails ?? undefined}
+          onBid={handleBid}
+          onSettle={handleSettle}
+          submitting={txPending}
+          disabled={!daoDetails?.auctionAddress}
+        />
+      )}
+
+      {hasValidDao && !loadingActive && !activeAuction && (
+        <Card>
+          <CardContent className="p-4 text-sm text-muted-foreground">
+            No active auction found for this DAO.
+          </CardContent>
+        </Card>
+      )}
+
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-semibold">Past auctions</h3>
+          {loadingPast && <span className="text-xs text-muted-foreground">Loading...</span>}
+        </div>
+        {pastAuctions.length === 0 && !loadingPast ? (
+          <div className="text-sm text-muted-foreground">No past auctions yet.</div>
+        ) : (
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {pastAuctions.map((auction) => (
+              <PastAuctionCard key={auction.id} auction={auction} />
+            ))}
+          </div>
+        )}
+        {pastAuctions.length >= pageSize && hasMorePast && (
+          <div className="flex justify-center">
+            <Button variant="outline" disabled={loadingPast || !hasMorePast} onClick={handleLoadMore}>
+              Load more
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default {
+  fidget: NounishAuctions,
+  properties: nounishAuctionsConfig,
+} as FidgetModule<FidgetArgs<NounishAuctionsSettings>>;
diff --git a/src/fidgets/index.ts b/src/fidgets/index.ts
index 7cee6a402..c2090df64 100644
--- a/src/fidgets/index.ts
+++ b/src/fidgets/index.ts
@@ -8,6 +8,7 @@ import Profile from "./ui/profile";
 import Channel from "./ui/channel";
 import Grid from "./layout/Grid";
 import NounishGovernance from "./community/nouns-dao/NounishGovernance";
+import NounishAuctions from "./community/nouns-dao/NounishAuctions";
 import Cast from "./farcaster/Cast";
 import Feed from "./farcaster/Feed";
 import Top8 from "./farcaster/Top8";
@@ -50,6 +51,7 @@ export const CompleteFidgets = {
   iframe: IFrame,
   // Nouns
   governance: NounishGovernance,
+  nounishAuctions: NounishAuctions,
   nounsHome: NounsHome,
   links: Links,
   // zora: zoraEmbed, -> 500 server error -Frame ancestors block

From 55c019476a05c518d9383e2d0d71b83ea1ff5610 Mon Sep 17 00:00:00 2001
From: willyogo <willy@ogorzaly.com>
Date: Mon, 1 Dec 2025 16:23:54 -0600
Subject: [PATCH 2/6] Improve NounishAuctions layout and simplify state
 management

- Refactor layout to use responsive flex layout with auction art on left
- Remove unused Separator import
- Simplify state management by using settings directly with useMemo
- Improve overflow handling for better scrolling
- Streamline UI by removing configuration cards
---
 .../community/nouns-dao/NounishAuctions.tsx   | 315 ++++++++----------
 1 file changed, 137 insertions(+), 178 deletions(-)

diff --git a/src/fidgets/community/nouns-dao/NounishAuctions.tsx b/src/fidgets/community/nouns-dao/NounishAuctions.tsx
index d70dd1627..bb8a24b57 100644
--- a/src/fidgets/community/nouns-dao/NounishAuctions.tsx
+++ b/src/fidgets/community/nouns-dao/NounishAuctions.tsx
@@ -26,7 +26,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/common/components/atoms/select";
-import { Separator } from "@/common/components/atoms/separator";
 import { DAO_OPTIONS } from "@/constants/basedDaos";
 import { mergeClasses } from "@/common/lib/utils/mergeClasses";
 import { FidgetArgs, FidgetModule, FidgetProperties, FidgetSettingsStyle } from "@/common/fidgets";
@@ -223,9 +222,13 @@ const shortenAddress = (address?: string | null): string => {
   return `${address.slice(0, 6)}...${address.slice(-4)}`;
 };
 
-const AuctionArt: React.FC<{ imageUrl?: string; tokenId?: string }> = ({ imageUrl, tokenId }) => {
+const AuctionArt: React.FC<{ imageUrl?: string; tokenId?: string; className?: string }> = ({
+  imageUrl,
+  tokenId,
+  className,
+}) => {
   return (
-    <div className="aspect-square w-full overflow-hidden rounded-xl bg-muted">
+    <div className={mergeClasses("aspect-square w-full overflow-hidden rounded-xl bg-muted", className)}>
       {imageUrl ? (
         // eslint-disable-next-line @next/next/no-img-element
         <img src={imageUrl} alt={`Token ${tokenId}`} className="h-full w-full object-cover" />
@@ -312,54 +315,65 @@ const ActiveAuctionCard: React.FC<{
         </div>
       </CardHeader>
       <CardContent className="space-y-6">
-        <AuctionArt imageUrl={auction.imageUrl} tokenId={auction.tokenId} />
-
-        <div className="grid grid-cols-2 gap-4 text-sm sm:grid-cols-4">
-          <div>
-            <div className="text-muted-foreground">Current bid</div>
-            <div className="text-lg font-semibold">{formatEth(currentBid)} ETH</div>
-          </div>
-          <div>
-            <div className="text-muted-foreground">Highest bidder</div>
-            <div className="font-mono text-sm">{shortenAddress(auction.highestBidder ?? auction.winningBidder)}</div>
-          </div>
-          <div>
-            <div className="text-muted-foreground">Ends</div>
-            <div>{new Date(auction.endTime * 1000).toLocaleString()}</div>
-          </div>
-          <div>
-            <div className="text-muted-foreground">Countdown</div>
-            <div className="font-mono">{endsInFuture ? <Countdown endTime={auction.endTime} /> : "Ended"}</div>
-          </div>
-        </div>
-
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-end">
-          <div className="w-full sm:max-w-xs">
-            <label className="text-sm text-muted-foreground">Bid amount (ETH)</label>
-            <Input
-              type="number"
-              min="0"
-              step="0.01"
-              value={bidValue}
-              onChange={(event) => setBidValue(event.target.value)}
-              placeholder="0.05"
-              disabled={submitting || disabled || !endsInFuture}
+        <div className="flex flex-col gap-6 lg:flex-row lg:items-start">
+          <div className="lg:w-1/2">
+            <AuctionArt
+              imageUrl={auction.imageUrl}
+              tokenId={auction.tokenId}
+              className="max-w-[420px] mx-auto"
             />
           </div>
-          <div className="flex flex-1 flex-wrap gap-2">
-            <Button
-              disabled={submitting || disabled || !endsInFuture || !bidValue}
-              onClick={() => onBid(bidValue)}
-            >
-              Place bid
-            </Button>
-            <Button
-              variant="outline"
-              disabled={submitting || disabled || endsInFuture}
-              onClick={onSettle}
-            >
-              Settle auction
-            </Button>
+          <div className="flex-1 space-y-6">
+            <div className="grid grid-cols-2 gap-4 text-sm sm:grid-cols-4">
+              <div>
+                <div className="text-muted-foreground">Current bid</div>
+                <div className="text-lg font-semibold">{formatEth(currentBid)} ETH</div>
+              </div>
+              <div>
+                <div className="text-muted-foreground">Highest bidder</div>
+                <div className="font-mono text-sm">
+                  {shortenAddress(auction.highestBidder ?? auction.winningBidder)}
+                </div>
+              </div>
+              <div>
+                <div className="text-muted-foreground">Ends</div>
+                <div>{new Date(auction.endTime * 1000).toLocaleString()}</div>
+              </div>
+              <div>
+                <div className="text-muted-foreground">Countdown</div>
+                <div className="font-mono">{endsInFuture ? <Countdown endTime={auction.endTime} /> : "Ended"}</div>
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-end">
+              <div className="w-full sm:max-w-xs">
+                <label className="text-sm text-muted-foreground">Bid amount (ETH)</label>
+                <Input
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  value={bidValue}
+                  onChange={(event) => setBidValue(event.target.value)}
+                  placeholder="0.05"
+                  disabled={submitting || disabled || !endsInFuture}
+                />
+              </div>
+              <div className="flex flex-1 flex-wrap gap-2">
+                <Button
+                  disabled={submitting || disabled || !endsInFuture || !bidValue}
+                  onClick={() => onBid(bidValue)}
+                >
+                  Place bid
+                </Button>
+                <Button
+                  variant="outline"
+                  disabled={submitting || disabled || endsInFuture}
+                  onClick={onSettle}
+                >
+                  Settle auction
+                </Button>
+              </div>
+            </div>
           </div>
         </div>
       </CardContent>
@@ -452,7 +466,6 @@ export const nounishAuctionsConfig: FidgetProperties = {
 const pageSize = 9;
 
 export const NounishAuctions: React.FC<FidgetArgs<NounishAuctionsSettings>> = ({ settings }) => {
-  const initialDao = settings.selectedDao ?? DAO_OPTIONS[0];
   const [activeAuction, setActiveAuction] = useState<BuilderAuction | null>(null);
   const [daoDetails, setDaoDetails] = useState<BuilderDao | null>(null);
   const [pastAuctions, setPastAuctions] = useState<BuilderAuction[]>([]);
@@ -463,18 +476,17 @@ export const NounishAuctions: React.FC<FidgetArgs<NounishAuctionsSettings>> = ({
   const [refreshKey, setRefreshKey] = useState(0);
   const [txPending, setTxPending] = useState(false);
   const [hasMorePast, setHasMorePast] = useState(true);
-  const [daoChoice, setDaoChoice] = useState<DaoOption>(initialDao);
-  const [customAddress, setCustomAddress] = useState(settings.customDaoContract ?? "");
-  const [networkValue, setNetworkValue] = useState<SupportedNetwork>(
-    (settings.builderNetwork ?? "base") as SupportedNetwork,
-  );
-  const [customGraphUrl, setCustomGraphUrl] = useState(settings.customGraphUrl ?? "");
 
   const { address, chainId } = useAccount();
   const { connectAsync, connectors } = useConnect();
   const { switchChainAsync } = useSwitchChain();
   const { writeContractAsync } = useWriteContract();
 
+  const daoChoice = useMemo(() => settings.selectedDao ?? DAO_OPTIONS[0], [settings.selectedDao]);
+  const customAddress = settings.customDaoContract ?? "";
+  const networkValue = (settings.builderNetwork ?? "base") as SupportedNetwork;
+  const customGraphUrl = settings.customGraphUrl ?? "";
+
   const daoAddress = useMemo(() => {
     const override = customAddress.trim();
     const fromSelector = daoChoice?.contract;
@@ -668,132 +680,79 @@ export const NounishAuctions: React.FC<FidgetArgs<NounishAuctionsSettings>> = ({
   };
 
   return (
-    <div className="flex h-full flex-col gap-4 p-4" style={{ fontFamily: settings.fontFamily, color: settings.fontColor }}>
-      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-        <Card>
-          <CardHeader>
-            <CardTitle>DAO</CardTitle>
-            <CardDescription>Select a Builder DAO</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <DaoSelector
-              onChange={(dao) => {
-                setDaoChoice(dao);
-                setRefreshKey((prev) => prev + 1);
-              }}
-              value={daoChoice}
-            />
-            <div className="mt-3 space-y-1 text-xs text-muted-foreground">
-              <div>Address: {daoAddress ?? "-"}</div>
-              <div>Network: {resolvedNetwork.label}</div>
+    <div
+      className="flex h-full min-h-0 flex-col overflow-hidden"
+      style={{ fontFamily: settings.fontFamily, color: settings.fontColor }}
+    >
+      <div className="flex-1 overflow-y-auto">
+        <div className="flex h-full flex-col gap-4 p-4">
+          <Card>
+            <CardContent className="p-4">
+              <div className="space-y-1">
+                <div className="text-sm font-semibold">{daoChoice?.name ?? "Builder DAO"}</div>
+                <div className="text-xs text-muted-foreground">Address: {daoAddress ?? "-"}</div>
+                <div className="text-xs text-muted-foreground">Network: {resolvedNetwork.label}</div>
+                <div className="text-xs text-muted-foreground break-all">Subgraph: {subgraphUrl}</div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {error ? (
+            <div className="rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive">
+              {error}
             </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Custom DAO</CardTitle>
-            <CardDescription>Override DAO address</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <Input
-              value={customAddress}
-              placeholder="0x..."
-              onChange={(event) => setCustomAddress(event.target.value)}
-              onBlur={() => setRefreshKey((prev) => prev + 1)}
+          ) : null}
+
+          {!hasValidDao && (
+            <div className="text-sm text-muted-foreground">
+              Enter a valid DAO contract address in the fidget settings to load auctions.
+            </div>
+          )}
+
+          {loadingActive && <div className="text-sm text-muted-foreground">Loading active auction...</div>}
+
+          {hasValidDao && !loadingActive && activeAuction && (
+            <ActiveAuctionCard
+              auction={activeAuction}
+              dao={daoDetails ?? undefined}
+              onBid={handleBid}
+              onSettle={handleSettle}
+              submitting={txPending}
+              disabled={!daoDetails?.auctionAddress}
             />
-            <Select
-              value={networkValue}
-              onValueChange={(value) => {
-                setNetworkValue(value as SupportedNetwork);
-                setRefreshKey((prev) => prev + 1);
-              }}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder="Network" />
-              </SelectTrigger>
-              <SelectContent>
-                {SUPPORTED_NETWORKS.map((network) => (
-                  <SelectItem key={network.value} value={network.value}>
-                    {network.label}
-                  </SelectItem>
+          )}
+
+          {hasValidDao && !loadingActive && !activeAuction && (
+            <Card>
+              <CardContent className="p-4 text-sm text-muted-foreground">
+                No active auction found for this DAO.
+              </CardContent>
+            </Card>
+          )}
+
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <h3 className="text-lg font-semibold">Past auctions</h3>
+              {loadingPast && <span className="text-xs text-muted-foreground">Loading...</span>}
+            </div>
+            {pastAuctions.length === 0 && !loadingPast ? (
+              <div className="text-sm text-muted-foreground">No past auctions yet.</div>
+            ) : (
+              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                {pastAuctions.map((auction) => (
+                  <PastAuctionCard key={auction.id} auction={auction} />
                 ))}
-              </SelectContent>
-            </Select>
-          </CardContent>
-        </Card>
-
-        <Card className="lg:col-span-2">
-          <CardHeader>
-            <CardTitle>Subgraph endpoint</CardTitle>
-            <CardDescription>Override if your DAO uses a custom URL</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Input
-              value={customGraphUrl}
-              placeholder="https://..."
-              onChange={(event) => setCustomGraphUrl(event.target.value)}
-              onBlur={() => setRefreshKey((prev) => prev + 1)}
-            />
-            <div className="mt-2 text-xs text-muted-foreground">Current endpoint: {subgraphUrl}</div>
-          </CardContent>
-        </Card>
-      </div>
-
-      <Separator />
-
-      {error ? (
-        <div className="rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive">
-          {error}
-        </div>
-      ) : null}
-
-      {!hasValidDao && (
-        <div className="text-sm text-muted-foreground">Enter a valid DAO contract address to load auctions.</div>
-      )}
-
-      {loadingActive && <div className="text-sm text-muted-foreground">Loading active auction...</div>}
-
-      {hasValidDao && !loadingActive && activeAuction && (
-        <ActiveAuctionCard
-          auction={activeAuction}
-          dao={daoDetails ?? undefined}
-          onBid={handleBid}
-          onSettle={handleSettle}
-          submitting={txPending}
-          disabled={!daoDetails?.auctionAddress}
-        />
-      )}
-
-      {hasValidDao && !loadingActive && !activeAuction && (
-        <Card>
-          <CardContent className="p-4 text-sm text-muted-foreground">
-            No active auction found for this DAO.
-          </CardContent>
-        </Card>
-      )}
-
-      <div className="space-y-3">
-        <div className="flex items-center justify-between">
-          <h3 className="text-lg font-semibold">Past auctions</h3>
-          {loadingPast && <span className="text-xs text-muted-foreground">Loading...</span>}
-        </div>
-        {pastAuctions.length === 0 && !loadingPast ? (
-          <div className="text-sm text-muted-foreground">No past auctions yet.</div>
-        ) : (
-          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            {pastAuctions.map((auction) => (
-              <PastAuctionCard key={auction.id} auction={auction} />
-            ))}
+              </div>
+            )}
+            {pastAuctions.length >= pageSize && hasMorePast && (
+              <div className="flex justify-center">
+                <Button variant="outline" disabled={loadingPast || !hasMorePast} onClick={handleLoadMore}>
+                  Load more
+                </Button>
+              </div>
+            )}
           </div>
-        )}
-        {pastAuctions.length >= pageSize && hasMorePast && (
-          <div className="flex justify-center">
-            <Button variant="outline" disabled={loadingPast || !hasMorePast} onClick={handleLoadMore}>
-              Load more
-            </Button>
-          </div>
-        )}
+        </div>
       </div>
     </div>
   );

From 20f08caa68eca32a4b3a90c024cc2ed0f854e0ff Mon Sep 17 00:00:00 2001
From: willyogo <willy@ogorzaly.com>
Date: Tue, 2 Dec 2025 18:15:27 -0600
Subject: [PATCH 3/6] Improve auction fidget UI

---
 src/fidgets/nouns-home/NounsHomeFidget.tsx    | 428 +++++-------------
 .../nouns-home/components/AuctionHero.tsx     | 329 +++++++-------
 2 files changed, 291 insertions(+), 466 deletions(-)

diff --git a/src/fidgets/nouns-home/NounsHomeFidget.tsx b/src/fidgets/nouns-home/NounsHomeFidget.tsx
index 3df21d0b9..1f14a1ea9 100644
--- a/src/fidgets/nouns-home/NounsHomeFidget.tsx
+++ b/src/fidgets/nouns-home/NounsHomeFidget.tsx
@@ -11,33 +11,20 @@ import {
   useAccount,
   useConnect,
   useEnsName,
+  useEnsAvatar,
   useSwitchChain,
   useWriteContract,
 } from "wagmi";
 import { mainnet } from "wagmi/chains";
 import { simulateContract, waitForTransactionReceipt } from "wagmi/actions";
-import { ContractFunctionExecutionError } from "viem";
 import AuctionHero from "./components/AuctionHero";
 import BidModal from "./components/BidModal";
-import StatsRow from "./components/StatsRow";
-import {
-  AlreadyOwnSection,
-  FaqAccordion,
-  GetANounSection,
-  GovernedByYouSection,
-  JourneySection,
-  LearnSection,
-  NounsFundsIdeasSection,
-  TheseAreNounsStrip,
-  ThisIsNounsSection,
-} from "./components/Sections";
 import { nounsWagmiConfig, REQUIRED_CHAIN_ID } from "./wagmiConfig";
 import { nounsPublicClient, NOUNS_AH_ADDRESS } from "./config";
 import { NounsAuctionHouseV3Abi, NounsAuctionHouseExtraAbi } from "./abis";
-import type { Auction, Settlement } from "./types";
-import { formatEth, getAuctionStatus } from "./utils";
-import { useEthUsdPrice, formatUsd } from "./price";
-import { fetchExecutedProposalsCount, fetchCurrentTokenHolders, fetchLatestAuction, fetchAuctionById, fetchNounSeedBackground, NOUNS_BG_HEX, fetchAccountLeaderboardCount } from "./subgraph";
+import type { Auction } from "./types";
+import { getAuctionStatus } from "./utils";
+import { fetchLatestAuction, fetchAuctionById, fetchNounSeedBackground, NOUNS_BG_HEX } from "./subgraph";
 import LinkOut from "./LinkOut";
 
 
@@ -118,106 +105,8 @@ const useAuctionData = () => {
   };
 };
 
-const pageSize = 12;
-
-const useSettlements = (auction?: Auction) => {
-  const [settlements, setSettlements] = useState<Settlement[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [page, setPage] = useState(0);
-  const [hasMore, setHasMore] = useState(true);
-
-  const loadSettlements = useCallback(
-    async (pageToLoad: number, reset = false) => {
-      if (!auction) return;
-      setIsLoading(true);
-      try {
-        const currentAuctionId = Number(auction.nounId);
-        const latestSettledId = auction.settled
-          ? currentAuctionId
-          : currentAuctionId - 1;
-        if (latestSettledId < 0) {
-          setSettlements([]);
-          setHasMore(false);
-          return;
-        }
-        const endId = latestSettledId - pageToLoad * pageSize;
-        if (endId < 0) {
-          setHasMore(false);
-          return;
-        }
-        const startId = Math.max(0, endId - (pageSize - 1));
-        if (startId > endId) {
-          setHasMore(false);
-          return;
-        }
-        const data = await nounsPublicClient.readContract({
-          address: NOUNS_AH_ADDRESS,
-          abi: NounsAuctionHouseV3Abi,
-          functionName: "getSettlements",
-          args: [BigInt(startId), BigInt(endId), true],
-        });
-        const normalized = (data as unknown as Settlement[])
-          .map((item) => ({
-            blockTimestamp: Number(item.blockTimestamp),
-            amount: BigInt(item.amount),
-            winner: item.winner,
-            nounId: BigInt(item.nounId),
-            clientId: Number(item.clientId),
-          }))
-          .sort((a, b) => Number(b.nounId - a.nounId));
-        setSettlements((prev) => {
-          if (reset || pageToLoad === 0) {
-            return normalized;
-          }
-          const existingIds = new Set(prev.map((item) => item.nounId.toString()));
-          const merged = [
-            ...prev,
-            ...normalized.filter(
-              (item) => !existingIds.has(item.nounId.toString()),
-            ),
-          ];
-          return merged;
-        });
-        setHasMore(startId > 0);
-        setPage(pageToLoad);
-      } catch (error) {
-        if (error instanceof ContractFunctionExecutionError) {
-          // The contract reverts with "Internal error" when a requested range has
-          // no settlements yet. This is expected during gaps and does not impact
-          // the user experience, so we treat it as "no more data".
-          setHasMore(false);
-          return;
-        }
-        console.error("Failed to load settlements", error);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [auction],
-  );
-
-  useEffect(() => {
-    if (!auction) return;
-    loadSettlements(0, true);
-  }, [auction, loadSettlements]);
-
-  return {
-    settlements,
-    isLoading,
-    hasMore,
-    loadNext: () => {
-      if (!hasMore || isLoading) return;
-      loadSettlements(page + 1);
-    },
-    refresh: () => loadSettlements(0, true),
-  };
-};
-
-const INNER_PADDING = "space-y-10 md:space-y-14";
-
 const NounsHomeInner: React.FC = () => {
   const { auction, refetch } = useAuctionData();
-  const { settlements, refresh } = useSettlements(auction);
   const { isConnected, address, chainId } = useAccount();
   const { connectAsync, connectors } = useConnect();
   const { switchChainAsync } = useSwitchChain();
@@ -233,22 +122,18 @@ const NounsHomeInner: React.FC = () => {
   const [minIncrementPct, setMinIncrementPct] = useState<number | null>(null);
   const [viewNounId, setViewNounId] = useState<number | null>(null);
   const [displayAuction, setDisplayAuction] = useState<Auction | undefined>();
-  const [bgHex, setBgHex] = useState<string | undefined>(undefined);
-  const [floorNative, setFloorNative] = useState<number | undefined>(undefined);
-  const [topOfferNative, setTopOfferNative] = useState<number | undefined>(undefined);
+  const [bgHex, setBgHex] = useState<string | undefined>(NOUNS_BG_HEX[0]);
 
   useEffect(() => {
     if (!auction) return;
-    // Do not override if user is viewing a past auction
-    setViewNounId((prev) => (prev == null || prev >= Number(auction.nounId) ? Number(auction.nounId) : prev));
+    const latestId = Number(auction.nounId);
+    // Follow the live auction unless the user is purposely browsing the past
+    setViewNounId((prev) => {
+      if (prev == null) return latestId;
+      const wasOnLatest = prev >= latestId - 1;
+      return wasOnLatest ? latestId : prev;
+    });
     setDisplayAuction(auction);
-    const updateCountdown = () => {
-      const remaining = Number(auction.endTime) * 1000 - Date.now();
-      setCountdown(Math.max(0, remaining));
-    };
-    updateCountdown();
-    const timer = setInterval(updateCountdown, 1_000);
-    return () => clearInterval(timer);
   }, [auction]);
 
   useEffect(() => {
@@ -265,8 +150,6 @@ const NounsHomeInner: React.FC = () => {
             bidder: (sg.bidder?.id ?? "0x0000000000000000000000000000000000000000") as `0x${string}`,
             settled: Boolean(sg.settled),
           });
-          const endMs = Number(sg.endTime) * 1000;
-          setCountdown(Math.max(0, endMs - Date.now()));
         }
         const bgIdx = await fetchNounSeedBackground(viewNounId);
         if (bgIdx !== undefined) setBgHex(NOUNS_BG_HEX[bgIdx as 0 | 1] ?? NOUNS_BG_HEX[0]);
@@ -276,34 +159,6 @@ const NounsHomeInner: React.FC = () => {
     })();
   }, [viewNounId]);
 
-  // Fetch collection floor / top offer (Reservoir)
-  useEffect(() => {
-    let cancelled = false;
-    (async () => {
-      try {
-        const res = await fetch(
-          "https://api.reservoir.tools/collections/v7?id=0x9C8fF314C9Bc7F6e59A9d9225Fb22946427eDC03&includeTopBid=true",
-          { cache: 'no-store' }
-        );
-        if (!res.ok) return;
-        const json = await res.json();
-        const col = json?.collections?.[0];
-        // Read exactly what nouns.com reads from Reservoir
-        const floor = col?.floorAsk?.price?.amount?.decimal ?? col?.floorAsk?.price?.native;
-        const top = col?.topBid?.price?.amount?.decimal ?? col?.topBid?.price?.native;
-        if (!cancelled) {
-          if (Number.isFinite(floor)) setFloorNative(floor);
-          if (Number.isFinite(top)) setTopOfferNative(top);
-        }
-      } catch (_) {
-        // ignore; non-blocking
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
   // Fetch precise bidding parameters when the component mounts
   useEffect(() => {
     (async () => {
@@ -324,7 +179,28 @@ const NounsHomeInner: React.FC = () => {
     })();
   }, []);
 
-  const activeAuction = displayAuction ?? auction;
+  const activeAuction = useMemo(() => {
+    if (displayAuction) return displayAuction;
+    if (auction && (viewNounId == null || Number(auction.nounId) === viewNounId)) {
+      return auction;
+    }
+    return undefined;
+  }, [auction, displayAuction, viewNounId]);
+
+  useEffect(() => {
+    if (!activeAuction) {
+      setCountdown(0);
+      return;
+    }
+    const updateCountdown = () => {
+      const remaining = Number(activeAuction.endTime) * 1000 - Date.now();
+      setCountdown(Math.max(0, remaining));
+    };
+    updateCountdown();
+    if (getAuctionStatus(activeAuction) !== "active") return;
+    const timer = setInterval(updateCountdown, 1_000);
+    return () => clearInterval(timer);
+  }, [activeAuction]);
 
   const minRequiredWei = useMemo(() => {
     if (!activeAuction) return undefined;
@@ -346,68 +222,6 @@ const NounsHomeInner: React.FC = () => {
     },
   });
 
-  const totalSettled = useMemo(() => {
-    if (!activeAuction) return 0;
-    const base = Number(activeAuction.nounId);
-    return activeAuction.settled ? base + 1 : base;
-  }, [activeAuction]);
-
-  const nounHolderCount = useMemo(() => {
-    if (!settlements?.length) return undefined;
-    const holders = new Set<string>();
-    for (const settlement of settlements) {
-      const winner = settlement.winner?.toLowerCase();
-      if (winner && winner !== '0x0000000000000000000000000000000000000000') {
-        holders.add(winner);
-      }
-    }
-    if (auction?.bidder && auction.bidder !== '0x0000000000000000000000000000000000000000') {
-      holders.add(auction.bidder.toLowerCase());
-    }
-    return holders.size || undefined;
-  }, [settlements, auction]);
-
-  // Fetch precise counts from public subgraph
-  const [executedCount, setExecutedCount] = useState<number | undefined>();
-  const [holdersFromSubgraph, setHoldersFromSubgraph] = useState<number | undefined>();
-  const [holdersFromPonder, setHoldersFromPonder] = useState<number | undefined>();
-  useEffect(() => {
-    let cancelled = false;
-    (async () => {
-      try {
-        const [exec, holders, ponder] = await Promise.all([
-          fetchExecutedProposalsCount().catch(() => undefined),
-          fetchCurrentTokenHolders().catch(() => undefined),
-          fetchAccountLeaderboardCount().catch(() => undefined),
-        ]);
-        if (!cancelled) {
-          setExecutedCount(exec);
-          setHoldersFromSubgraph(holders);
-          setHoldersFromPonder(ponder);
-        }
-      } catch (_) {
-        // ignore
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  const treasuryRaisedLabel = useMemo(() => {
-    if (!settlements?.length) return undefined;
-    const totalEth = settlements.reduce((acc, item) => acc + item.amount, 0n);
-    return formatEth(totalEth);
-  }, [settlements]);
-  const ethUsd = useEthUsdPrice();
-  const treasuryRaisedUsdLabel = useMemo(() => {
-    if (!settlements?.length || !ethUsd) return undefined;
-    const totalEth = settlements.reduce((acc, item) => acc + item.amount, 0n);
-    const asEth = Number(formatEth(totalEth).split(' ')[0].replace(/,/g, ''));
-    if (!Number.isFinite(asEth)) return undefined;
-    return formatUsd(asEth * ethUsd);
-  }, [settlements, ethUsd]);
-
   const status = getAuctionStatus(activeAuction);
   const dateLabel = useMemo(() => {
     const start = activeAuction ? Number(activeAuction.startTime) * 1000 : undefined;
@@ -416,14 +230,24 @@ const NounsHomeInner: React.FC = () => {
 
   const handlePrev = () => {
     if (viewNounId == null) return;
-    setViewNounId(Math.max(0, viewNounId - 1));
+    const target = Math.max(0, viewNounId - 1);
+    if (target === viewNounId) return;
+    setDisplayAuction(undefined);
+    setCountdown(0);
+    setBgHex(undefined);
+    setViewNounId(target);
   };
   const handleNext = () => {
     if (viewNounId == null || !auction) return;
     if (viewNounId >= Number(auction.nounId)) return;
-    setViewNounId(viewNounId + 1);
+    const target = Math.min(Number(auction.nounId), viewNounId + 1);
+    if (target === viewNounId) return;
+    setDisplayAuction(undefined);
+    setCountdown(0);
+    setBgHex(undefined);
+    setViewNounId(target);
   };
-  const canGoNext = auction ? (viewNounId ?? 0) < Number(auction.nounId) : false;
+  const canGoNext = auction && viewNounId != null ? viewNounId < Number(auction.nounId) : false;
 
   const canBid = isConnected && chainId === REQUIRED_CHAIN_ID && status === "active" && viewNounId === (auction ? Number(auction.nounId) : undefined);
 
@@ -511,8 +335,8 @@ const NounsHomeInner: React.FC = () => {
         if (receipt.status === "success") {
           setActionMessage("Bid confirmed!");
           setBidModalOpen(false);
-          await refetch();
-          await refresh();
+          const updated = await refetch();
+          if (updated) setViewNounId(Number(updated.nounId));
         } else {
           setActionError("Bid transaction failed");
         }
@@ -533,7 +357,6 @@ const NounsHomeInner: React.FC = () => {
       chainId,
       address,
       refetch,
-      refresh,
       writeContractAsync,
       switchChainAsync,
     ],
@@ -596,8 +419,8 @@ const NounsHomeInner: React.FC = () => {
       }
       if (success) {
         setActionMessage("Auction settled!");
-        await refetch();
-        await refresh();
+        const updated = await refetch();
+        if (updated) setViewNounId(Number(updated.nounId));
       } else {
         throw lastError ?? new Error("Settle reverted");
       }
@@ -611,94 +434,79 @@ const NounsHomeInner: React.FC = () => {
       setIsSettling(false);
       setTimeout(() => setActionMessage(null), 6_000);
     }
-  }, [auction, attemptSettle, chainId, isConnected, refetch, refresh]);
-
-  const rootRef = React.useRef<HTMLDivElement>(null);
-  const heroRef = React.useRef<HTMLDivElement>(null);
-  const scrollToAuction = React.useCallback(() => {
-    const root = rootRef.current;
-    const hero = heroRef.current;
-    if (!root || !hero) return;
-    const top = hero.offsetTop - 8;
-    root.scrollTo({ top, behavior: 'smooth' });
-  }, []);
+  }, [auction, attemptSettle, chainId, isConnected, refetch]);
 
-  return (
-    <div ref={rootRef} className="flex h-full flex-col gap-6 overflow-y-auto p-4 md:p-6">
+  const { data: bidderEnsAvatar } = useEnsAvatar({
+    name: bidderEns ?? undefined,
+    address: activeAuction?.bidder,
+    chainId: mainnet.id,
+    query: {
+      enabled:
+        Boolean(bidderEns || activeAuction?.bidder) &&
+        activeAuction?.bidder !== "0x0000000000000000000000000000000000000000",
+    },
+  });
 
-      <div ref={heroRef}>
-      <AuctionHero
-        auction={activeAuction}
-        ensName={bidderEns}
-        countdownMs={countdown}
-        onOpenBid={handleOpenBid}
-        onSettle={handleSettle}
-        isSettling={isSettling}
-        isConnected={isConnected}
-        headingFontClassName="user-theme-headings-font"
-        headingFontFamilyCss="var(--user-theme-headings-font)"
-        dateLabel={dateLabel}
-        onPrev={handlePrev}
-        onNext={handleNext}
-        canGoNext={canGoNext}
-        backgroundHex={bgHex}
-        minRequiredWei={minRequiredWei}
-        onPlaceBid={canBid ? handleBidSubmit : undefined}
-        floorPriceNative={floorNative}
-        topOfferNative={topOfferNative}
-        isCurrentView={!canGoNext}
-      />
-      </div>
-      <div className={INNER_PADDING}>
-        <ThisIsNounsSection />
-        <NounsFundsIdeasSection />
-        <GovernedByYouSection nounHolderCount={holdersFromPonder ?? holdersFromSubgraph ?? nounHolderCount} />
-        <TheseAreNounsStrip />
-        <GetANounSection
-          currentAuction={activeAuction}
-          countdownMs={countdown}
-          onScrollToAuction={scrollToAuction}
-          auctionBgHex={bgHex}
-        />
-        <AlreadyOwnSection />
-        <StatsRow
-          totalSettled={totalSettled}
-          nounHolderCount={holdersFromPonder ?? holdersFromSubgraph ?? nounHolderCount}
-          ideasFundedLabel={(executedCount ?? undefined)?.toLocaleString() || "Hundreds+"}
-          treasuryRaisedLabel={treasuryRaisedUsdLabel ?? treasuryRaisedLabel}
-        />
-        <JourneySection />
-        <LearnSection />
-        <FaqAccordion settlements={settlements} />
-      </div>
+  const backgroundColor = bgHex ?? NOUNS_BG_HEX[0];
+  const isViewingLatest = auction ? viewNounId === Number(auction.nounId) : true;
 
-      {bidModalOpen && auction && (
-        <BidModal
-          isOpen={bidModalOpen}
-          nounId={auction.nounId}
-          currentAmount={auction.amount}
-          minRequiredWei={minRequiredWei}
-          onDismiss={() => {
-            setBidModalOpen(false);
-            setActionError(null);
-          }}
-          onConfirm={handleBidSubmit}
-          isSubmitting={bidSubmitting}
-          errorMessage={actionError ?? undefined}
-        />
-      )}
+  return (
+    <div
+      className="flex h-full flex-col overflow-hidden"
+      style={{ backgroundColor, transition: "background-color 300ms ease" }}
+    >
+      <div className="flex-1 overflow-y-auto p-4 md:p-8">
+        <div className="mx-auto flex max-w-[1280px] flex-col gap-6">
+          <AuctionHero
+            auction={activeAuction}
+            ensName={bidderEns}
+            ensAvatarUrl={bidderEnsAvatar}
+            countdownMs={countdown}
+            onOpenBid={handleOpenBid}
+            onSettle={handleSettle}
+            isSettling={isSettling}
+            isConnected={isConnected}
+            headingFontClassName="user-theme-headings-font"
+            headingFontFamilyCss="var(--user-theme-headings-font)"
+            dateLabel={dateLabel}
+            onPrev={handlePrev}
+            onNext={handleNext}
+            canGoNext={canGoNext}
+            backgroundHex={backgroundColor}
+            minRequiredWei={minRequiredWei}
+            onPlaceBid={canBid ? handleBidSubmit : undefined}
+            isCurrentView={isViewingLatest}
+          />
+
+          {bidModalOpen && auction && (
+            <BidModal
+              isOpen={bidModalOpen}
+              nounId={auction.nounId}
+              currentAmount={auction.amount}
+              minRequiredWei={minRequiredWei}
+              onDismiss={() => {
+                setBidModalOpen(false);
+                setActionError(null);
+              }}
+              onConfirm={handleBidSubmit}
+              isSubmitting={bidSubmitting}
+              errorMessage={actionError ?? undefined}
+            />
+          )}
 
-      {(actionMessage || actionError || txHash) && (
-        <div className="rounded-2xl border border-black/10 bg-white p-4 text-sm shadow-sm">
-          {actionMessage && <p className="font-medium">{actionMessage}</p>}
-          {actionError && <p className="text-red-600">{actionError}</p>}
-          {txHash && (
-            <p className="text-xs text-muted-foreground">
-              Tx hash: <LinkOut href={`https://etherscan.io/tx/${txHash}`}>{txHash}</LinkOut>
-            </p>
+          {(actionMessage || actionError || txHash) && (
+            <div className="rounded-2xl border border-black/10 bg-white p-4 text-sm shadow-sm">
+              {actionMessage && <p className="font-medium">{actionMessage}</p>}
+              {actionError && <p className="text-red-600">{actionError}</p>}
+              {txHash && (
+                <p className="text-xs text-muted-foreground">
+                  Tx hash: <LinkOut href={`https://etherscan.io/tx/${txHash}`}>{txHash}</LinkOut>
+                </p>
+              )}
+            </div>
           )}
         </div>
-      )}
+      </div>
     </div>
   );
 };
diff --git a/src/fidgets/nouns-home/components/AuctionHero.tsx b/src/fidgets/nouns-home/components/AuctionHero.tsx
index 09fe6b584..a3ec70cd0 100644
--- a/src/fidgets/nouns-home/components/AuctionHero.tsx
+++ b/src/fidgets/nouns-home/components/AuctionHero.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import React, { useMemo, useState } from 'react';
-import { ChevronLeft, ChevronRight, Info } from 'lucide-react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { parseEther } from 'viem';
 import NounImage from '../NounImage';
 import { formatCountdown, formatEth, getAuctionStatus } from '../utils';
@@ -10,6 +10,7 @@ import type { Auction } from '../types';
 interface AuctionHeroProps {
   auction?: Auction;
   ensName?: string | null;
+  ensAvatarUrl?: string | null;
   countdownMs: number;
   onOpenBid: () => void;
   onSettle: () => void;
@@ -24,8 +25,6 @@ interface AuctionHeroProps {
   backgroundHex?: string;
   minRequiredWei?: bigint;
   onPlaceBid?: (valueWei: bigint) => void;
-  floorPriceNative?: number | undefined;
-  topOfferNative?: number | undefined;
   isCurrentView?: boolean;
 }
 
@@ -34,6 +33,7 @@ const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000';
 const AuctionHero: React.FC<AuctionHeroProps> = ({
   auction,
   ensName,
+  ensAvatarUrl,
   countdownMs,
   onOpenBid,
   onSettle,
@@ -48,20 +48,24 @@ const AuctionHero: React.FC<AuctionHeroProps> = ({
   backgroundHex,
   minRequiredWei,
   onPlaceBid,
-  floorPriceNative,
-  topOfferNative,
   isCurrentView = true,
 }) => {
   const status = getAuctionStatus(auction);
   const nounId = auction ? Number(auction.nounId) : undefined;
+  const hasBidder = Boolean(auction && auction.bidder !== ZERO_ADDRESS);
   const bidderLabel =
-    auction && auction.bidder !== ZERO_ADDRESS
+    hasBidder && auction
       ? ensName || `${auction.bidder.slice(0, 6)}...${auction.bidder.slice(-4)}`
       : 'No bids yet';
-  const countdownLabel = formatCountdown(countdownMs);
+  const bidderHref = hasBidder && auction ? `https://etherscan.io/address/${auction.bidder}` : undefined;
+  const countdownLabel = status === 'ended' ? 'Ended' : formatCountdown(countdownMs);
   const etherLabel = auction ? formatEth(auction.amount, 3) : 'Loading';
+  const needsSettlement = Boolean(auction && status === 'ended' && !auction.settled);
   const isEnded = status === 'ended';
+  const isActiveAuction = status === 'active' && isCurrentView;
+  const showSettleCta = needsSettlement;
   const buttonDisabled = isEnded ? !auction || auction.settled || isSettling : status === 'pending';
+  const bidButtonLabel = isConnected ? 'Place Bid' : 'Connect to bid';
 
   const placeholderEth = useMemo(() => {
     if (!minRequiredWei) return '0.10';
@@ -71,6 +75,10 @@ const AuctionHero: React.FC<AuctionHeroProps> = ({
   }, [minRequiredWei]);
 
   const [bidInput, setBidInput] = useState('');
+  useEffect(() => {
+    setBidInput('');
+  }, [nounId]);
+
   const handleBidClick = () => {
     if (!onPlaceBid) return onOpenBid();
     try {
@@ -83,15 +91,15 @@ const AuctionHero: React.FC<AuctionHeroProps> = ({
 
   return (
     <section
-      className="rounded-3xl p-6 text-[#17171d] shadow-sm md:p-10 md:min-h-[420px] overflow-visible md:overflow-hidden"
-      style={{ backgroundColor: backgroundHex ?? '#f0f0ff' }}
+      className="w-full rounded-[32px] px-1 py-2"
+      style={{ backgroundColor: backgroundHex ?? '#d5d7e1' }}
     >
-      <div className="mx-auto grid h-full max-w-[1200px] items-center gap-6 md:grid-cols-[minmax(0,520px)_minmax(0,560px)] md:gap-12">
-        <div className="flex h-full items-end justify-center md:justify-start md:ml-8">
+      <div className="mx-auto grid h-full max-w-[1200px] items-center gap-6 px-1 md:grid-cols-[minmax(0,500px)_minmax(0,560px)] md:gap-10">
+        <div className="flex h-full items-center justify-center md:justify-start md:pl-4">
           {nounId !== undefined ? (
             <NounImage
               nounId={auction!.nounId}
-              className="h-[200px] w-auto max-w-full object-contain sm:h-[260px] md:h-[400px] md:translate-y-10"
+              className="h-[200px] w-auto max-w-full object-contain sm:h-[260px] md:h-[400px]"
               priority
             />
           ) : (
@@ -101,166 +109,175 @@ const AuctionHero: React.FC<AuctionHeroProps> = ({
           )}
         </div>
 
-        <div className="-mt-6 flex flex-col justify-center gap-4 pl-4 pr-4 md:mt-0 md:pl-10 md:pr-6 self-center bg-white border border-black/10 rounded-2xl p-4 md:bg-transparent md:border-0 md:rounded-none md:p-0">
-          <div className="flex flex-col gap-4">
-            {/* Mobile top bar: date left, arrows right */}
-            <div className="flex items-center justify-between text-sm text-[#5a5a70] md:hidden">
-              {dateLabel && <span className="font-semibold">{dateLabel}</span>}
+        <div className="relative flex flex-col justify-center self-center">
+          <div className="rounded-[28px] border border-black/5 bg-white/90 p-5 shadow-xl backdrop-blur md:p-8">
+            <div className="flex items-start justify-between gap-4">
+              <div className="text-sm font-semibold text-[#5a5a70]">
+                {dateLabel || 'Date pending'}
+              </div>
               <div className="flex items-center gap-2">
                 {onPrev && (
-                  <button type="button" onClick={onPrev} className="inline-flex h-8 w-8 items-center justify-center rounded-full border-2 border-black/15 bg-white text-black" aria-label="Previous auction"><ChevronLeft className="h-4 w-4" /></button>
+                  <button
+                    type="button"
+                    onClick={onPrev}
+                    className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-black/10 bg-white text-black transition hover:-translate-y-[1px] hover:shadow-sm"
+                    aria-label="Previous auction"
+                  >
+                    <ChevronLeft className="h-4 w-4" />
+                  </button>
                 )}
                 {onNext && (
-                  <button type="button" onClick={onNext} disabled={!canGoNext} className="inline-flex h-8 w-8 items-center justify-center rounded-full border-2 border-black/15 bg-white text-black disabled:opacity-40" aria-label="Next auction"><ChevronRight className="h-4 w-4" /></button>
+                  <button
+                    type="button"
+                    onClick={onNext}
+                    disabled={!canGoNext}
+                    className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-black/10 bg-white text-black transition hover:-translate-y-[1px] hover:shadow-sm disabled:cursor-not-allowed disabled:opacity-40"
+                    aria-label="Next auction"
+                  >
+                    <ChevronRight className="h-4 w-4" />
+                  </button>
                 )}
               </div>
             </div>
-            {/* Desktop top bar (arrows then date) */}
-            <div className="hidden items-center gap-2 text-sm text-[#5a5a70] md:flex">
-              {onPrev && (
-                <button
-                  type="button"
-                  onClick={onPrev}
-                  className="inline-flex h-8 w-8 items-center justify-center rounded-full border-2 border-black/15 bg-white text-black"
-                  aria-label="Previous auction"
-                >
-                  <ChevronLeft className="h-4 w-4" />
-                </button>
-              )}
-              {onNext && (
+
+            <div className="mt-4 space-y-3">
+              <h1
+                className={`text-3xl font-semibold leading-tight text-[#0f0f15] md:text-5xl ${headingFontClassName ?? ''}`}
+                style={headingFontFamilyCss ? { fontFamily: headingFontFamilyCss } : undefined}
+              >
+                {nounId !== undefined ? `Noun ${nounId}` : 'Loading'}
+              </h1>
+              <div className="grid gap-4 md:grid-cols-2 md:items-start">
+                <div className="space-y-1">
+                  <div className="text-sm font-medium text-[#5a5a70]">
+                    {isEnded ? 'Winning bid' : 'Current bid'}
+                  </div>
+                  <div className="text-3xl font-semibold md:text-4xl">{etherLabel}</div>
+                </div>
+                <div className="space-y-1 md:text-right">
+                  <div className="text-sm font-medium text-[#5a5a70]">
+                    {isEnded ? 'Won by' : 'Time left'}
+                  </div>
+                  <div className="text-3xl font-semibold md:text-4xl">
+                    {isEnded ? (
+                      bidderHref ? (
+                        <a
+                          href={bidderHref}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="inline-flex items-center gap-2 underline decoration-[#5a5a70]"
+                        >
+                          {ensAvatarUrl && (
+                            <img
+                              src={ensAvatarUrl}
+                              alt=""
+                              className="h-7 w-7 rounded-full border border-black/10 object-cover"
+                            />
+                          )}
+                          {bidderLabel}
+                        </a>
+                      ) : (
+                        <span className="text-[#5a5a70]">{bidderLabel}</span>
+                      )
+                    ) : (
+                      countdownLabel
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-6 space-y-3">
+              {showSettleCta ? (
                 <button
                   type="button"
-                  onClick={onNext}
-                  disabled={!canGoNext}
-                  className="inline-flex h-8 w-8 items-center justify-center rounded-full border-2 border-black/15 bg-white text-black disabled:opacity-40"
-                  aria-label="Next auction"
+                  onClick={onSettle}
+                  disabled={buttonDisabled}
+                  className="inline-flex h-12 w-full items-center justify-center rounded-[14px] bg-black px-6 text-base font-semibold text-white transition hover:scale-[1.01] hover:bg-black/90 disabled:cursor-not-allowed disabled:bg-black/30"
                 >
-                  <ChevronRight className="h-4 w-4" />
+                  {isSettling ? 'Settling...' : 'Settle Auction'}
                 </button>
-              )}
-              {dateLabel && <span className="ml-1 font-semibold">{dateLabel}</span>}
-            </div>
-            <h1
-              className={`text-3xl font-semibold md:text-5xl ${headingFontClassName ?? ''}`}
-              style={headingFontFamilyCss ? { fontFamily: headingFontFamilyCss } : undefined}
-            >
-              {nounId !== undefined ? `Noun ${nounId}` : 'Loading'}
-            </h1>
-            <div className="space-y-3">
-              {/* Mobile compact rows */}
-              <div className="space-y-2 md:hidden">
-                <div className="flex w-full items-baseline justify-between">
-                  <span className="text-sm text-[#5a5a70]">{isCurrentView ? 'Current bid' : 'Winning bid'}</span>
-                  <span className="text-xl font-semibold">{etherLabel}</span>
-                </div>
-                <div className="flex w-full items-baseline justify-between">
-                  <span className="text-sm text-[#5a5a70]">{isCurrentView ? 'Time left' : 'Won by'}</span>
-                  <span className="text-xl font-semibold">{isCurrentView ? (status === 'ended' ? '00:00' : countdownLabel) : (auction && auction.bidder !== '0x0000000000000000000000000000000000000000' ? (<a href={`https://etherscan.io/address/${auction.bidder}`} target="_blank" rel="noopener noreferrer" className="underline">{bidderLabel}</a>) : '-')}</span>
-                </div>
-              </div>
-              {/* Desktop stats */}
-              <div className="hidden flex-wrap gap-10 md:flex">
-                <div>
-                  <div className="text-sm font-medium text-[#5a5a70]">{isCurrentView ? 'Current bid' : 'Winning bid'}</div>
-                  <div className="text-3xl font-medium md:text-4xl">{etherLabel}</div>
-                </div>
-                <div>
-                  <div className="text-sm font-medium text-[#5a5a70]">{isCurrentView ? 'Time left' : 'Won by'}</div>
-                  <div className="text-3xl font-medium md:text-4xl">
-                    {isCurrentView
-                      ? (status === 'ended' ? '00:00' : countdownLabel)
-                      : (
-                        auction && auction.bidder !== '0x0000000000000000000000000000000000000000' ? (
-                          <a href={`https://etherscan.io/address/${auction.bidder}`} target="_blank" rel="noopener noreferrer" className="underline">
+              ) : isActiveAuction ? (
+                <>
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+                    <div className="relative flex-1">
+                      <input
+                        className="w-full rounded-[14px] border-2 border-black/10 bg-white px-4 py-3 pr-16 text-base font-semibold outline-none transition focus:border-black placeholder:font-semibold"
+                        placeholder={placeholderEth}
+                        inputMode="decimal"
+                        value={bidInput}
+                        onChange={(e) => setBidInput(e.target.value)}
+                        disabled={isEnded}
+                        aria-label="Bid amount in ETH"
+                      />
+                      <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 rounded-[10px] border border-black/10 bg-white px-2 py-1 text-xs font-semibold text-[#5a5a70]">
+                        ETH
+                      </span>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={handleBidClick}
+                      disabled={isEnded || buttonDisabled}
+                      className="inline-flex h-12 items-center justify-center rounded-[14px] bg-black px-6 text-base font-semibold text-white transition hover:-translate-y-[1px] hover:bg-black/90 disabled:cursor-not-allowed disabled:bg-black/30"
+                    >
+                      {bidButtonLabel}
+                    </button>
+                  </div>
+                  <div className="text-sm font-medium text-[#5a5a70]">
+                    {hasBidder ? 'Highest bidder' : 'No bids yet'}
+                    {hasBidder && (
+                      <span className="ml-2 inline-flex items-center gap-2 rounded-full bg-black/[0.04] px-2.5 py-1">
+                        {ensAvatarUrl && (
+                          <img
+                            src={ensAvatarUrl}
+                            alt=""
+                            className="h-6 w-6 rounded-full border border-black/10 object-cover"
+                          />
+                        )}
+                        {bidderHref ? (
+                          <a
+                            href={bidderHref}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="underline"
+                          >
                             {bidderLabel}
                           </a>
-                        ) : '-'
-                      )}
+                        ) : (
+                          bidderLabel
+                        )}
+                      </span>
+                    )}
                   </div>
-                </div>
-              </div>
-              {isCurrentView && (
-              <div className="flex flex-wrap items-center gap-2 text-xs font-medium text-[#6b6b80] md:text-sm">
-                <span className="mr-1 hidden h-6 w-6 items-center justify-center rounded-full bg-[#d9dbe8] text-[#5a5a70] md:inline-flex"><Info className="h-4 w-4" /></span>
-                <span className="flex items-baseline gap-1 whitespace-nowrap">
-                  <a
-                    href="https://www.nouns.com/explore"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="underline"
-                  >
-                    Floor price:
-                  </a>
-                  <span>{typeof floorPriceNative === 'number' ? `${floorPriceNative.toFixed(2)} ETH` : '—'}</span>
-                </span>
-                <span className="flex items-baseline gap-1 whitespace-nowrap">
-                  <a
-                    href="https://www.nouns.com/explore"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="underline"
-                  >
-                    Top offer:
-                  </a>
-                  <span>{typeof topOfferNative === 'number' ? `${topOfferNative.toFixed(2)} ETH` : '—'}</span>
-                </span>
-              </div>
+                </>
+              ) : (
+                hasBidder && (
+                  <div className="text-sm font-medium text-[#5a5a70]">
+                    Won by{' '}
+                    {bidderHref ? (
+                      <a
+                        href={bidderHref}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline-flex items-center gap-2 underline"
+                      >
+                        {ensAvatarUrl && (
+                          <img
+                            src={ensAvatarUrl}
+                            alt=""
+                            className="h-6 w-6 rounded-full border border-black/10 object-cover"
+                          />
+                        )}
+                        {bidderLabel}
+                      </a>
+                    ) : (
+                      bidderLabel
+                    )}
+                  </div>
+                )
               )}
             </div>
           </div>
-
-          <div className="flex flex-col gap-2 md:gap-2 md:mt-1">
-            {isCurrentView && status === 'ended' && auction && !auction.settled ? (
-              <button
-                type="button"
-                onClick={onSettle}
-                disabled={buttonDisabled}
-                className="inline-flex h-12 items-center justify-center rounded-[12px] bg-black px-6 text-base font-semibold text-white transition hover:scale-[1.01] hover:bg-black/90 disabled:cursor-not-allowed disabled:bg-black/30"
-              >
-                {isSettling ? 'Settling...' : 'Settle auction'}
-              </button>
-            ) : isCurrentView ? (
-              <>
-              <div className="flex w-full max-w-md items-center gap-2">
-                <div className="relative flex-1">
-                  <input
-                    className="w-full rounded-[12px] border-2 border-black/10 bg-white px-4 py-3 pr-16 text-base outline-none focus:border-black placeholder:font-semibold"
-                    placeholder={placeholderEth}
-                    inputMode="decimal"
-                    value={bidInput}
-                    onChange={(e) => setBidInput(e.target.value)}
-                    disabled={isEnded}
-                    aria-label="Bid amount in ETH"
-                  />
-                  <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 rounded-[8px] border border-black/10 bg-white px-2 py-1 text-xs font-semibold text-[#5a5a70]">ETH</span>
-                </div>
-                  <button
-                    type="button"
-                    onClick={handleBidClick}
-                    disabled={isEnded || buttonDisabled}
-                    className="inline-flex h-12 items-center justify-center rounded-[12px] bg-black px-6 text-base font-semibold text-white transition hover:bg-black/90 disabled:cursor-not-allowed disabled:bg-black/30"
-                  >
-                    Place Bid
-                  </button>
-                </div>
-                <div className="text-sm font-medium text-[#5a5a70]">
-                  Highest bidder{' '}
-                  {auction && auction.bidder !== ZERO_ADDRESS ? (
-                    <a
-                      href={`https://etherscan.io/address/${auction.bidder}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="underline"
-                    >
-                      {bidderLabel}
-                    </a>
-                  ) : (
-                    bidderLabel
-                  )}
-                </div>
-              </>
-            ) : null}
-          </div>
         </div>
       </div>
     </section>

From 30e59320ed074b91f1f6dd2374a9ae85868e4143 Mon Sep 17 00:00:00 2001
From: willyogo <willy@ogorzaly.com>
Date: Tue, 2 Dec 2025 18:26:40 -0600
Subject: [PATCH 4/6] Revert "Improve auction fidget UI"

This reverts commit 20f08caa68eca32a4b3a90c024cc2ed0f854e0ff.
---
 src/fidgets/nouns-home/NounsHomeFidget.tsx    | 428 +++++++++++++-----
 .../nouns-home/components/AuctionHero.tsx     | 329 +++++++-------
 2 files changed, 466 insertions(+), 291 deletions(-)

diff --git a/src/fidgets/nouns-home/NounsHomeFidget.tsx b/src/fidgets/nouns-home/NounsHomeFidget.tsx
index 1f14a1ea9..3df21d0b9 100644
--- a/src/fidgets/nouns-home/NounsHomeFidget.tsx
+++ b/src/fidgets/nouns-home/NounsHomeFidget.tsx
@@ -11,20 +11,33 @@ import {
   useAccount,
   useConnect,
   useEnsName,
-  useEnsAvatar,
   useSwitchChain,
   useWriteContract,
 } from "wagmi";
 import { mainnet } from "wagmi/chains";
 import { simulateContract, waitForTransactionReceipt } from "wagmi/actions";
+import { ContractFunctionExecutionError } from "viem";
 import AuctionHero from "./components/AuctionHero";
 import BidModal from "./components/BidModal";
+import StatsRow from "./components/StatsRow";
+import {
+  AlreadyOwnSection,
+  FaqAccordion,
+  GetANounSection,
+  GovernedByYouSection,
+  JourneySection,
+  LearnSection,
+  NounsFundsIdeasSection,
+  TheseAreNounsStrip,
+  ThisIsNounsSection,
+} from "./components/Sections";
 import { nounsWagmiConfig, REQUIRED_CHAIN_ID } from "./wagmiConfig";
 import { nounsPublicClient, NOUNS_AH_ADDRESS } from "./config";
 import { NounsAuctionHouseV3Abi, NounsAuctionHouseExtraAbi } from "./abis";
-import type { Auction } from "./types";
-import { getAuctionStatus } from "./utils";
-import { fetchLatestAuction, fetchAuctionById, fetchNounSeedBackground, NOUNS_BG_HEX } from "./subgraph";
+import type { Auction, Settlement } from "./types";
+import { formatEth, getAuctionStatus } from "./utils";
+import { useEthUsdPrice, formatUsd } from "./price";
+import { fetchExecutedProposalsCount, fetchCurrentTokenHolders, fetchLatestAuction, fetchAuctionById, fetchNounSeedBackground, NOUNS_BG_HEX, fetchAccountLeaderboardCount } from "./subgraph";
 import LinkOut from "./LinkOut";
 
 
@@ -105,8 +118,106 @@ const useAuctionData = () => {
   };
 };
 
+const pageSize = 12;
+
+const useSettlements = (auction?: Auction) => {
+  const [settlements, setSettlements] = useState<Settlement[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [page, setPage] = useState(0);
+  const [hasMore, setHasMore] = useState(true);
+
+  const loadSettlements = useCallback(
+    async (pageToLoad: number, reset = false) => {
+      if (!auction) return;
+      setIsLoading(true);
+      try {
+        const currentAuctionId = Number(auction.nounId);
+        const latestSettledId = auction.settled
+          ? currentAuctionId
+          : currentAuctionId - 1;
+        if (latestSettledId < 0) {
+          setSettlements([]);
+          setHasMore(false);
+          return;
+        }
+        const endId = latestSettledId - pageToLoad * pageSize;
+        if (endId < 0) {
+          setHasMore(false);
+          return;
+        }
+        const startId = Math.max(0, endId - (pageSize - 1));
+        if (startId > endId) {
+          setHasMore(false);
+          return;
+        }
+        const data = await nounsPublicClient.readContract({
+          address: NOUNS_AH_ADDRESS,
+          abi: NounsAuctionHouseV3Abi,
+          functionName: "getSettlements",
+          args: [BigInt(startId), BigInt(endId), true],
+        });
+        const normalized = (data as unknown as Settlement[])
+          .map((item) => ({
+            blockTimestamp: Number(item.blockTimestamp),
+            amount: BigInt(item.amount),
+            winner: item.winner,
+            nounId: BigInt(item.nounId),
+            clientId: Number(item.clientId),
+          }))
+          .sort((a, b) => Number(b.nounId - a.nounId));
+        setSettlements((prev) => {
+          if (reset || pageToLoad === 0) {
+            return normalized;
+          }
+          const existingIds = new Set(prev.map((item) => item.nounId.toString()));
+          const merged = [
+            ...prev,
+            ...normalized.filter(
+              (item) => !existingIds.has(item.nounId.toString()),
+            ),
+          ];
+          return merged;
+        });
+        setHasMore(startId > 0);
+        setPage(pageToLoad);
+      } catch (error) {
+        if (error instanceof ContractFunctionExecutionError) {
+          // The contract reverts with "Internal error" when a requested range has
+          // no settlements yet. This is expected during gaps and does not impact
+          // the user experience, so we treat it as "no more data".
+          setHasMore(false);
+          return;
+        }
+        console.error("Failed to load settlements", error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [auction],
+  );
+
+  useEffect(() => {
+    if (!auction) return;
+    loadSettlements(0, true);
+  }, [auction, loadSettlements]);
+
+  return {
+    settlements,
+    isLoading,
+    hasMore,
+    loadNext: () => {
+      if (!hasMore || isLoading) return;
+      loadSettlements(page + 1);
+    },
+    refresh: () => loadSettlements(0, true),
+  };
+};
+
+const INNER_PADDING = "space-y-10 md:space-y-14";
+
 const NounsHomeInner: React.FC = () => {
   const { auction, refetch } = useAuctionData();
+  const { settlements, refresh } = useSettlements(auction);
   const { isConnected, address, chainId } = useAccount();
   const { connectAsync, connectors } = useConnect();
   const { switchChainAsync } = useSwitchChain();
@@ -122,18 +233,22 @@ const NounsHomeInner: React.FC = () => {
   const [minIncrementPct, setMinIncrementPct] = useState<number | null>(null);
   const [viewNounId, setViewNounId] = useState<number | null>(null);
   const [displayAuction, setDisplayAuction] = useState<Auction | undefined>();
-  const [bgHex, setBgHex] = useState<string | undefined>(NOUNS_BG_HEX[0]);
+  const [bgHex, setBgHex] = useState<string | undefined>(undefined);
+  const [floorNative, setFloorNative] = useState<number | undefined>(undefined);
+  const [topOfferNative, setTopOfferNative] = useState<number | undefined>(undefined);
 
   useEffect(() => {
     if (!auction) return;
-    const latestId = Number(auction.nounId);
-    // Follow the live auction unless the user is purposely browsing the past
-    setViewNounId((prev) => {
-      if (prev == null) return latestId;
-      const wasOnLatest = prev >= latestId - 1;
-      return wasOnLatest ? latestId : prev;
-    });
+    // Do not override if user is viewing a past auction
+    setViewNounId((prev) => (prev == null || prev >= Number(auction.nounId) ? Number(auction.nounId) : prev));
     setDisplayAuction(auction);
+    const updateCountdown = () => {
+      const remaining = Number(auction.endTime) * 1000 - Date.now();
+      setCountdown(Math.max(0, remaining));
+    };
+    updateCountdown();
+    const timer = setInterval(updateCountdown, 1_000);
+    return () => clearInterval(timer);
   }, [auction]);
 
   useEffect(() => {
@@ -150,6 +265,8 @@ const NounsHomeInner: React.FC = () => {
             bidder: (sg.bidder?.id ?? "0x0000000000000000000000000000000000000000") as `0x${string}`,
             settled: Boolean(sg.settled),
           });
+          const endMs = Number(sg.endTime) * 1000;
+          setCountdown(Math.max(0, endMs - Date.now()));
         }
         const bgIdx = await fetchNounSeedBackground(viewNounId);
         if (bgIdx !== undefined) setBgHex(NOUNS_BG_HEX[bgIdx as 0 | 1] ?? NOUNS_BG_HEX[0]);
@@ -159,6 +276,34 @@ const NounsHomeInner: React.FC = () => {
     })();
   }, [viewNounId]);
 
+  // Fetch collection floor / top offer (Reservoir)
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetch(
+          "https://api.reservoir.tools/collections/v7?id=0x9C8fF314C9Bc7F6e59A9d9225Fb22946427eDC03&includeTopBid=true",
+          { cache: 'no-store' }
+        );
+        if (!res.ok) return;
+        const json = await res.json();
+        const col = json?.collections?.[0];
+        // Read exactly what nouns.com reads from Reservoir
+        const floor = col?.floorAsk?.price?.amount?.decimal ?? col?.floorAsk?.price?.native;
+        const top = col?.topBid?.price?.amount?.decimal ?? col?.topBid?.price?.native;
+        if (!cancelled) {
+          if (Number.isFinite(floor)) setFloorNative(floor);
+          if (Number.isFinite(top)) setTopOfferNative(top);
+        }
+      } catch (_) {
+        // ignore; non-blocking
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
   // Fetch precise bidding parameters when the component mounts
   useEffect(() => {
     (async () => {
@@ -179,28 +324,7 @@ const NounsHomeInner: React.FC = () => {
     })();
   }, []);
 
-  const activeAuction = useMemo(() => {
-    if (displayAuction) return displayAuction;
-    if (auction && (viewNounId == null || Number(auction.nounId) === viewNounId)) {
-      return auction;
-    }
-    return undefined;
-  }, [auction, displayAuction, viewNounId]);
-
-  useEffect(() => {
-    if (!activeAuction) {
-      setCountdown(0);
-      return;
-    }
-    const updateCountdown = () => {
-      const remaining = Number(activeAuction.endTime) * 1000 - Date.now();
-      setCountdown(Math.max(0, remaining));
-    };
-    updateCountdown();
-    if (getAuctionStatus(activeAuction) !== "active") return;
-    const timer = setInterval(updateCountdown, 1_000);
-    return () => clearInterval(timer);
-  }, [activeAuction]);
+  const activeAuction = displayAuction ?? auction;
 
   const minRequiredWei = useMemo(() => {
     if (!activeAuction) return undefined;
@@ -222,6 +346,68 @@ const NounsHomeInner: React.FC = () => {
     },
   });
 
+  const totalSettled = useMemo(() => {
+    if (!activeAuction) return 0;
+    const base = Number(activeAuction.nounId);
+    return activeAuction.settled ? base + 1 : base;
+  }, [activeAuction]);
+
+  const nounHolderCount = useMemo(() => {
+    if (!settlements?.length) return undefined;
+    const holders = new Set<string>();
+    for (const settlement of settlements) {
+      const winner = settlement.winner?.toLowerCase();
+      if (winner && winner !== '0x0000000000000000000000000000000000000000') {
+        holders.add(winner);
+      }
+    }
+    if (auction?.bidder && auction.bidder !== '0x0000000000000000000000000000000000000000') {
+      holders.add(auction.bidder.toLowerCase());
+    }
+    return holders.size || undefined;
+  }, [settlements, auction]);
+
+  // Fetch precise counts from public subgraph
+  const [executedCount, setExecutedCount] = useState<number | undefined>();
+  const [holdersFromSubgraph, setHoldersFromSubgraph] = useState<number | undefined>();
+  const [holdersFromPonder, setHoldersFromPonder] = useState<number | undefined>();
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const [exec, holders, ponder] = await Promise.all([
+          fetchExecutedProposalsCount().catch(() => undefined),
+          fetchCurrentTokenHolders().catch(() => undefined),
+          fetchAccountLeaderboardCount().catch(() => undefined),
+        ]);
+        if (!cancelled) {
+          setExecutedCount(exec);
+          setHoldersFromSubgraph(holders);
+          setHoldersFromPonder(ponder);
+        }
+      } catch (_) {
+        // ignore
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const treasuryRaisedLabel = useMemo(() => {
+    if (!settlements?.length) return undefined;
+    const totalEth = settlements.reduce((acc, item) => acc + item.amount, 0n);
+    return formatEth(totalEth);
+  }, [settlements]);
+  const ethUsd = useEthUsdPrice();
+  const treasuryRaisedUsdLabel = useMemo(() => {
+    if (!settlements?.length || !ethUsd) return undefined;
+    const totalEth = settlements.reduce((acc, item) => acc + item.amount, 0n);
+    const asEth = Number(formatEth(totalEth).split(' ')[0].replace(/,/g, ''));
+    if (!Number.isFinite(asEth)) return undefined;
+    return formatUsd(asEth * ethUsd);
+  }, [settlements, ethUsd]);
+
   const status = getAuctionStatus(activeAuction);
   const dateLabel = useMemo(() => {
     const start = activeAuction ? Number(activeAuction.startTime) * 1000 : undefined;
@@ -230,24 +416,14 @@ const NounsHomeInner: React.FC = () => {
 
   const handlePrev = () => {
     if (viewNounId == null) return;
-    const target = Math.max(0, viewNounId - 1);
-    if (target === viewNounId) return;
-    setDisplayAuction(undefined);
-    setCountdown(0);
-    setBgHex(undefined);
-    setViewNounId(target);
+    setViewNounId(Math.max(0, viewNounId - 1));
   };
   const handleNext = () => {
     if (viewNounId == null || !auction) return;
     if (viewNounId >= Number(auction.nounId)) return;
-    const target = Math.min(Number(auction.nounId), viewNounId + 1);
-    if (target === viewNounId) return;
-    setDisplayAuction(undefined);
-    setCountdown(0);
-    setBgHex(undefined);
-    setViewNounId(target);
+    setViewNounId(viewNounId + 1);
   };
-  const canGoNext = auction && viewNounId != null ? viewNounId < Number(auction.nounId) : false;
+  const canGoNext = auction ? (viewNounId ?? 0) < Number(auction.nounId) : false;
 
   const canBid = isConnected && chainId === REQUIRED_CHAIN_ID && status === "active" && viewNounId === (auction ? Number(auction.nounId) : undefined);
 
@@ -335,8 +511,8 @@ const NounsHomeInner: React.FC = () => {
         if (receipt.status === "success") {
           setActionMessage("Bid confirmed!");
           setBidModalOpen(false);
-          const updated = await refetch();
-          if (updated) setViewNounId(Number(updated.nounId));
+          await refetch();
+          await refresh();
         } else {
           setActionError("Bid transaction failed");
         }
@@ -357,6 +533,7 @@ const NounsHomeInner: React.FC = () => {
       chainId,
       address,
       refetch,
+      refresh,
       writeContractAsync,
       switchChainAsync,
     ],
@@ -419,8 +596,8 @@ const NounsHomeInner: React.FC = () => {
       }
       if (success) {
         setActionMessage("Auction settled!");
-        const updated = await refetch();
-        if (updated) setViewNounId(Number(updated.nounId));
+        await refetch();
+        await refresh();
       } else {
         throw lastError ?? new Error("Settle reverted");
       }
@@ -434,79 +611,94 @@ const NounsHomeInner: React.FC = () => {
       setIsSettling(false);
       setTimeout(() => setActionMessage(null), 6_000);
     }
-  }, [auction, attemptSettle, chainId, isConnected, refetch]);
+  }, [auction, attemptSettle, chainId, isConnected, refetch, refresh]);
 
-  const { data: bidderEnsAvatar } = useEnsAvatar({
-    name: bidderEns ?? undefined,
-    address: activeAuction?.bidder,
-    chainId: mainnet.id,
-    query: {
-      enabled:
-        Boolean(bidderEns || activeAuction?.bidder) &&
-        activeAuction?.bidder !== "0x0000000000000000000000000000000000000000",
-    },
-  });
-
-  const backgroundColor = bgHex ?? NOUNS_BG_HEX[0];
-  const isViewingLatest = auction ? viewNounId === Number(auction.nounId) : true;
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const heroRef = React.useRef<HTMLDivElement>(null);
+  const scrollToAuction = React.useCallback(() => {
+    const root = rootRef.current;
+    const hero = heroRef.current;
+    if (!root || !hero) return;
+    const top = hero.offsetTop - 8;
+    root.scrollTo({ top, behavior: 'smooth' });
+  }, []);
 
   return (
-    <div
-      className="flex h-full flex-col overflow-hidden"
-      style={{ backgroundColor, transition: "background-color 300ms ease" }}
-    >
-      <div className="flex-1 overflow-y-auto p-4 md:p-8">
-        <div className="mx-auto flex max-w-[1280px] flex-col gap-6">
-          <AuctionHero
-            auction={activeAuction}
-            ensName={bidderEns}
-            ensAvatarUrl={bidderEnsAvatar}
-            countdownMs={countdown}
-            onOpenBid={handleOpenBid}
-            onSettle={handleSettle}
-            isSettling={isSettling}
-            isConnected={isConnected}
-            headingFontClassName="user-theme-headings-font"
-            headingFontFamilyCss="var(--user-theme-headings-font)"
-            dateLabel={dateLabel}
-            onPrev={handlePrev}
-            onNext={handleNext}
-            canGoNext={canGoNext}
-            backgroundHex={backgroundColor}
-            minRequiredWei={minRequiredWei}
-            onPlaceBid={canBid ? handleBidSubmit : undefined}
-            isCurrentView={isViewingLatest}
-          />
-
-          {bidModalOpen && auction && (
-            <BidModal
-              isOpen={bidModalOpen}
-              nounId={auction.nounId}
-              currentAmount={auction.amount}
-              minRequiredWei={minRequiredWei}
-              onDismiss={() => {
-                setBidModalOpen(false);
-                setActionError(null);
-              }}
-              onConfirm={handleBidSubmit}
-              isSubmitting={bidSubmitting}
-              errorMessage={actionError ?? undefined}
-            />
-          )}
+    <div ref={rootRef} className="flex h-full flex-col gap-6 overflow-y-auto p-4 md:p-6">
 
-          {(actionMessage || actionError || txHash) && (
-            <div className="rounded-2xl border border-black/10 bg-white p-4 text-sm shadow-sm">
-              {actionMessage && <p className="font-medium">{actionMessage}</p>}
-              {actionError && <p className="text-red-600">{actionError}</p>}
-              {txHash && (
-                <p className="text-xs text-muted-foreground">
-                  Tx hash: <LinkOut href={`https://etherscan.io/tx/${txHash}`}>{txHash}</LinkOut>
-                </p>
-              )}
-            </div>
+      <div ref={heroRef}>
+      <AuctionHero
+        auction={activeAuction}
+        ensName={bidderEns}
+        countdownMs={countdown}
+        onOpenBid={handleOpenBid}
+        onSettle={handleSettle}
+        isSettling={isSettling}
+        isConnected={isConnected}
+        headingFontClassName="user-theme-headings-font"
+        headingFontFamilyCss="var(--user-theme-headings-font)"
+        dateLabel={dateLabel}
+        onPrev={handlePrev}
+        onNext={handleNext}
+        canGoNext={canGoNext}
+        backgroundHex={bgHex}
+        minRequiredWei={minRequiredWei}
+        onPlaceBid={canBid ? handleBidSubmit : undefined}
+        floorPriceNative={floorNative}
+        topOfferNative={topOfferNative}
+        isCurrentView={!canGoNext}
+      />
+      </div>
+      <div className={INNER_PADDING}>
+        <ThisIsNounsSection />
+        <NounsFundsIdeasSection />
+        <GovernedByYouSection nounHolderCount={holdersFromPonder ?? holdersFromSubgraph ?? nounHolderCount} />
+        <TheseAreNounsStrip />
+        <GetANounSection
+          currentAuction={activeAuction}
+          countdownMs={countdown}
+          onScrollToAuction={scrollToAuction}
+          auctionBgHex={bgHex}
+        />
+        <AlreadyOwnSection />
+        <StatsRow
+          totalSettled={totalSettled}
+          nounHolderCount={holdersFromPonder ?? holdersFromSubgraph ?? nounHolderCount}
+          ideasFundedLabel={(executedCount ?? undefined)?.toLocaleString() || "Hundreds+"}
+          treasuryRaisedLabel={treasuryRaisedUsdLabel ?? treasuryRaisedLabel}
+        />
+        <JourneySection />
+        <LearnSection />
+        <FaqAccordion settlements={settlements} />
+      </div>
+
+      {bidModalOpen && auction && (
+        <BidModal
+          isOpen={bidModalOpen}
+          nounId={auction.nounId}
+          currentAmount={auction.amount}
+          minRequiredWei={minRequiredWei}
+          onDismiss={() => {
+            setBidModalOpen(false);
+            setActionError(null);
+          }}
+          onConfirm={handleBidSubmit}
+          isSubmitting={bidSubmitting}
+          errorMessage={actionError ?? undefined}
+        />
+      )}
+
+      {(actionMessage || actionError || txHash) && (
+        <div className="rounded-2xl border border-black/10 bg-white p-4 text-sm shadow-sm">
+          {actionMessage && <p className="font-medium">{actionMessage}</p>}
+          {actionError && <p className="text-red-600">{actionError}</p>}
+          {txHash && (
+            <p className="text-xs text-muted-foreground">
+              Tx hash: <LinkOut href={`https://etherscan.io/tx/${txHash}`}>{txHash}</LinkOut>
+            </p>
           )}
         </div>
-      </div>
+      )}
     </div>
   );
 };
diff --git a/src/fidgets/nouns-home/components/AuctionHero.tsx b/src/fidgets/nouns-home/components/AuctionHero.tsx
index a3ec70cd0..09fe6b584 100644
--- a/src/fidgets/nouns-home/components/AuctionHero.tsx
+++ b/src/fidgets/nouns-home/components/AuctionHero.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import React, { useEffect, useMemo, useState } from 'react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import React, { useMemo, useState } from 'react';
+import { ChevronLeft, ChevronRight, Info } from 'lucide-react';
 import { parseEther } from 'viem';
 import NounImage from '../NounImage';
 import { formatCountdown, formatEth, getAuctionStatus } from '../utils';
@@ -10,7 +10,6 @@ import type { Auction } from '../types';
 interface AuctionHeroProps {
   auction?: Auction;
   ensName?: string | null;
-  ensAvatarUrl?: string | null;
   countdownMs: number;
   onOpenBid: () => void;
   onSettle: () => void;
@@ -25,6 +24,8 @@ interface AuctionHeroProps {
   backgroundHex?: string;
   minRequiredWei?: bigint;
   onPlaceBid?: (valueWei: bigint) => void;
+  floorPriceNative?: number | undefined;
+  topOfferNative?: number | undefined;
   isCurrentView?: boolean;
 }
 
@@ -33,7 +34,6 @@ const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000';
 const AuctionHero: React.FC<AuctionHeroProps> = ({
   auction,
   ensName,
-  ensAvatarUrl,
   countdownMs,
   onOpenBid,
   onSettle,
@@ -48,24 +48,20 @@ const AuctionHero: React.FC<AuctionHeroProps> = ({
   backgroundHex,
   minRequiredWei,
   onPlaceBid,
+  floorPriceNative,
+  topOfferNative,
   isCurrentView = true,
 }) => {
   const status = getAuctionStatus(auction);
   const nounId = auction ? Number(auction.nounId) : undefined;
-  const hasBidder = Boolean(auction && auction.bidder !== ZERO_ADDRESS);
   const bidderLabel =
-    hasBidder && auction
+    auction && auction.bidder !== ZERO_ADDRESS
       ? ensName || `${auction.bidder.slice(0, 6)}...${auction.bidder.slice(-4)}`
       : 'No bids yet';
-  const bidderHref = hasBidder && auction ? `https://etherscan.io/address/${auction.bidder}` : undefined;
-  const countdownLabel = status === 'ended' ? 'Ended' : formatCountdown(countdownMs);
+  const countdownLabel = formatCountdown(countdownMs);
   const etherLabel = auction ? formatEth(auction.amount, 3) : 'Loading';
-  const needsSettlement = Boolean(auction && status === 'ended' && !auction.settled);
   const isEnded = status === 'ended';
-  const isActiveAuction = status === 'active' && isCurrentView;
-  const showSettleCta = needsSettlement;
   const buttonDisabled = isEnded ? !auction || auction.settled || isSettling : status === 'pending';
-  const bidButtonLabel = isConnected ? 'Place Bid' : 'Connect to bid';
 
   const placeholderEth = useMemo(() => {
     if (!minRequiredWei) return '0.10';
@@ -75,10 +71,6 @@ const AuctionHero: React.FC<AuctionHeroProps> = ({
   }, [minRequiredWei]);
 
   const [bidInput, setBidInput] = useState('');
-  useEffect(() => {
-    setBidInput('');
-  }, [nounId]);
-
   const handleBidClick = () => {
     if (!onPlaceBid) return onOpenBid();
     try {
@@ -91,15 +83,15 @@ const AuctionHero: React.FC<AuctionHeroProps> = ({
 
   return (
     <section
-      className="w-full rounded-[32px] px-1 py-2"
-      style={{ backgroundColor: backgroundHex ?? '#d5d7e1' }}
+      className="rounded-3xl p-6 text-[#17171d] shadow-sm md:p-10 md:min-h-[420px] overflow-visible md:overflow-hidden"
+      style={{ backgroundColor: backgroundHex ?? '#f0f0ff' }}
     >
-      <div className="mx-auto grid h-full max-w-[1200px] items-center gap-6 px-1 md:grid-cols-[minmax(0,500px)_minmax(0,560px)] md:gap-10">
-        <div className="flex h-full items-center justify-center md:justify-start md:pl-4">
+      <div className="mx-auto grid h-full max-w-[1200px] items-center gap-6 md:grid-cols-[minmax(0,520px)_minmax(0,560px)] md:gap-12">
+        <div className="flex h-full items-end justify-center md:justify-start md:ml-8">
           {nounId !== undefined ? (
             <NounImage
               nounId={auction!.nounId}
-              className="h-[200px] w-auto max-w-full object-contain sm:h-[260px] md:h-[400px]"
+              className="h-[200px] w-auto max-w-full object-contain sm:h-[260px] md:h-[400px] md:translate-y-10"
               priority
             />
           ) : (
@@ -109,175 +101,166 @@ const AuctionHero: React.FC<AuctionHeroProps> = ({
           )}
         </div>
 
-        <div className="relative flex flex-col justify-center self-center">
-          <div className="rounded-[28px] border border-black/5 bg-white/90 p-5 shadow-xl backdrop-blur md:p-8">
-            <div className="flex items-start justify-between gap-4">
-              <div className="text-sm font-semibold text-[#5a5a70]">
-                {dateLabel || 'Date pending'}
-              </div>
+        <div className="-mt-6 flex flex-col justify-center gap-4 pl-4 pr-4 md:mt-0 md:pl-10 md:pr-6 self-center bg-white border border-black/10 rounded-2xl p-4 md:bg-transparent md:border-0 md:rounded-none md:p-0">
+          <div className="flex flex-col gap-4">
+            {/* Mobile top bar: date left, arrows right */}
+            <div className="flex items-center justify-between text-sm text-[#5a5a70] md:hidden">
+              {dateLabel && <span className="font-semibold">{dateLabel}</span>}
               <div className="flex items-center gap-2">
                 {onPrev && (
-                  <button
-                    type="button"
-                    onClick={onPrev}
-                    className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-black/10 bg-white text-black transition hover:-translate-y-[1px] hover:shadow-sm"
-                    aria-label="Previous auction"
-                  >
-                    <ChevronLeft className="h-4 w-4" />
-                  </button>
+                  <button type="button" onClick={onPrev} className="inline-flex h-8 w-8 items-center justify-center rounded-full border-2 border-black/15 bg-white text-black" aria-label="Previous auction"><ChevronLeft className="h-4 w-4" /></button>
                 )}
                 {onNext && (
-                  <button
-                    type="button"
-                    onClick={onNext}
-                    disabled={!canGoNext}
-                    className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-black/10 bg-white text-black transition hover:-translate-y-[1px] hover:shadow-sm disabled:cursor-not-allowed disabled:opacity-40"
-                    aria-label="Next auction"
-                  >
-                    <ChevronRight className="h-4 w-4" />
-                  </button>
+                  <button type="button" onClick={onNext} disabled={!canGoNext} className="inline-flex h-8 w-8 items-center justify-center rounded-full border-2 border-black/15 bg-white text-black disabled:opacity-40" aria-label="Next auction"><ChevronRight className="h-4 w-4" /></button>
                 )}
               </div>
             </div>
-
-            <div className="mt-4 space-y-3">
-              <h1
-                className={`text-3xl font-semibold leading-tight text-[#0f0f15] md:text-5xl ${headingFontClassName ?? ''}`}
-                style={headingFontFamilyCss ? { fontFamily: headingFontFamilyCss } : undefined}
-              >
-                {nounId !== undefined ? `Noun ${nounId}` : 'Loading'}
-              </h1>
-              <div className="grid gap-4 md:grid-cols-2 md:items-start">
-                <div className="space-y-1">
-                  <div className="text-sm font-medium text-[#5a5a70]">
-                    {isEnded ? 'Winning bid' : 'Current bid'}
-                  </div>
-                  <div className="text-3xl font-semibold md:text-4xl">{etherLabel}</div>
-                </div>
-                <div className="space-y-1 md:text-right">
-                  <div className="text-sm font-medium text-[#5a5a70]">
-                    {isEnded ? 'Won by' : 'Time left'}
-                  </div>
-                  <div className="text-3xl font-semibold md:text-4xl">
-                    {isEnded ? (
-                      bidderHref ? (
-                        <a
-                          href={bidderHref}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="inline-flex items-center gap-2 underline decoration-[#5a5a70]"
-                        >
-                          {ensAvatarUrl && (
-                            <img
-                              src={ensAvatarUrl}
-                              alt=""
-                              className="h-7 w-7 rounded-full border border-black/10 object-cover"
-                            />
-                          )}
-                          {bidderLabel}
-                        </a>
-                      ) : (
-                        <span className="text-[#5a5a70]">{bidderLabel}</span>
-                      )
-                    ) : (
-                      countdownLabel
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="mt-6 space-y-3">
-              {showSettleCta ? (
+            {/* Desktop top bar (arrows then date) */}
+            <div className="hidden items-center gap-2 text-sm text-[#5a5a70] md:flex">
+              {onPrev && (
                 <button
                   type="button"
-                  onClick={onSettle}
-                  disabled={buttonDisabled}
-                  className="inline-flex h-12 w-full items-center justify-center rounded-[14px] bg-black px-6 text-base font-semibold text-white transition hover:scale-[1.01] hover:bg-black/90 disabled:cursor-not-allowed disabled:bg-black/30"
+                  onClick={onPrev}
+                  className="inline-flex h-8 w-8 items-center justify-center rounded-full border-2 border-black/15 bg-white text-black"
+                  aria-label="Previous auction"
                 >
-                  {isSettling ? 'Settling...' : 'Settle Auction'}
+                  <ChevronLeft className="h-4 w-4" />
                 </button>
-              ) : isActiveAuction ? (
-                <>
-                  <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-                    <div className="relative flex-1">
-                      <input
-                        className="w-full rounded-[14px] border-2 border-black/10 bg-white px-4 py-3 pr-16 text-base font-semibold outline-none transition focus:border-black placeholder:font-semibold"
-                        placeholder={placeholderEth}
-                        inputMode="decimal"
-                        value={bidInput}
-                        onChange={(e) => setBidInput(e.target.value)}
-                        disabled={isEnded}
-                        aria-label="Bid amount in ETH"
-                      />
-                      <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 rounded-[10px] border border-black/10 bg-white px-2 py-1 text-xs font-semibold text-[#5a5a70]">
-                        ETH
-                      </span>
-                    </div>
-                    <button
-                      type="button"
-                      onClick={handleBidClick}
-                      disabled={isEnded || buttonDisabled}
-                      className="inline-flex h-12 items-center justify-center rounded-[14px] bg-black px-6 text-base font-semibold text-white transition hover:-translate-y-[1px] hover:bg-black/90 disabled:cursor-not-allowed disabled:bg-black/30"
-                    >
-                      {bidButtonLabel}
-                    </button>
-                  </div>
-                  <div className="text-sm font-medium text-[#5a5a70]">
-                    {hasBidder ? 'Highest bidder' : 'No bids yet'}
-                    {hasBidder && (
-                      <span className="ml-2 inline-flex items-center gap-2 rounded-full bg-black/[0.04] px-2.5 py-1">
-                        {ensAvatarUrl && (
-                          <img
-                            src={ensAvatarUrl}
-                            alt=""
-                            className="h-6 w-6 rounded-full border border-black/10 object-cover"
-                          />
-                        )}
-                        {bidderHref ? (
-                          <a
-                            href={bidderHref}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="underline"
-                          >
+              )}
+              {onNext && (
+                <button
+                  type="button"
+                  onClick={onNext}
+                  disabled={!canGoNext}
+                  className="inline-flex h-8 w-8 items-center justify-center rounded-full border-2 border-black/15 bg-white text-black disabled:opacity-40"
+                  aria-label="Next auction"
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </button>
+              )}
+              {dateLabel && <span className="ml-1 font-semibold">{dateLabel}</span>}
+            </div>
+            <h1
+              className={`text-3xl font-semibold md:text-5xl ${headingFontClassName ?? ''}`}
+              style={headingFontFamilyCss ? { fontFamily: headingFontFamilyCss } : undefined}
+            >
+              {nounId !== undefined ? `Noun ${nounId}` : 'Loading'}
+            </h1>
+            <div className="space-y-3">
+              {/* Mobile compact rows */}
+              <div className="space-y-2 md:hidden">
+                <div className="flex w-full items-baseline justify-between">
+                  <span className="text-sm text-[#5a5a70]">{isCurrentView ? 'Current bid' : 'Winning bid'}</span>
+                  <span className="text-xl font-semibold">{etherLabel}</span>
+                </div>
+                <div className="flex w-full items-baseline justify-between">
+                  <span className="text-sm text-[#5a5a70]">{isCurrentView ? 'Time left' : 'Won by'}</span>
+                  <span className="text-xl font-semibold">{isCurrentView ? (status === 'ended' ? '00:00' : countdownLabel) : (auction && auction.bidder !== '0x0000000000000000000000000000000000000000' ? (<a href={`https://etherscan.io/address/${auction.bidder}`} target="_blank" rel="noopener noreferrer" className="underline">{bidderLabel}</a>) : '-')}</span>
+                </div>
+              </div>
+              {/* Desktop stats */}
+              <div className="hidden flex-wrap gap-10 md:flex">
+                <div>
+                  <div className="text-sm font-medium text-[#5a5a70]">{isCurrentView ? 'Current bid' : 'Winning bid'}</div>
+                  <div className="text-3xl font-medium md:text-4xl">{etherLabel}</div>
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-[#5a5a70]">{isCurrentView ? 'Time left' : 'Won by'}</div>
+                  <div className="text-3xl font-medium md:text-4xl">
+                    {isCurrentView
+                      ? (status === 'ended' ? '00:00' : countdownLabel)
+                      : (
+                        auction && auction.bidder !== '0x0000000000000000000000000000000000000000' ? (
+                          <a href={`https://etherscan.io/address/${auction.bidder}`} target="_blank" rel="noopener noreferrer" className="underline">
                             {bidderLabel}
                           </a>
-                        ) : (
-                          bidderLabel
-                        )}
-                      </span>
-                    )}
-                  </div>
-                </>
-              ) : (
-                hasBidder && (
-                  <div className="text-sm font-medium text-[#5a5a70]">
-                    Won by{' '}
-                    {bidderHref ? (
-                      <a
-                        href={bidderHref}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center gap-2 underline"
-                      >
-                        {ensAvatarUrl && (
-                          <img
-                            src={ensAvatarUrl}
-                            alt=""
-                            className="h-6 w-6 rounded-full border border-black/10 object-cover"
-                          />
-                        )}
-                        {bidderLabel}
-                      </a>
-                    ) : (
-                      bidderLabel
-                    )}
+                        ) : '-'
+                      )}
                   </div>
-                )
+                </div>
+              </div>
+              {isCurrentView && (
+              <div className="flex flex-wrap items-center gap-2 text-xs font-medium text-[#6b6b80] md:text-sm">
+                <span className="mr-1 hidden h-6 w-6 items-center justify-center rounded-full bg-[#d9dbe8] text-[#5a5a70] md:inline-flex"><Info className="h-4 w-4" /></span>
+                <span className="flex items-baseline gap-1 whitespace-nowrap">
+                  <a
+                    href="https://www.nouns.com/explore"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline"
+                  >
+                    Floor price:
+                  </a>
+                  <span>{typeof floorPriceNative === 'number' ? `${floorPriceNative.toFixed(2)} ETH` : '—'}</span>
+                </span>
+                <span className="flex items-baseline gap-1 whitespace-nowrap">
+                  <a
+                    href="https://www.nouns.com/explore"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline"
+                  >
+                    Top offer:
+                  </a>
+                  <span>{typeof topOfferNative === 'number' ? `${topOfferNative.toFixed(2)} ETH` : '—'}</span>
+                </span>
+              </div>
               )}
             </div>
           </div>
+
+          <div className="flex flex-col gap-2 md:gap-2 md:mt-1">
+            {isCurrentView && status === 'ended' && auction && !auction.settled ? (
+              <button
+                type="button"
+                onClick={onSettle}
+                disabled={buttonDisabled}
+                className="inline-flex h-12 items-center justify-center rounded-[12px] bg-black px-6 text-base font-semibold text-white transition hover:scale-[1.01] hover:bg-black/90 disabled:cursor-not-allowed disabled:bg-black/30"
+              >
+                {isSettling ? 'Settling...' : 'Settle auction'}
+              </button>
+            ) : isCurrentView ? (
+              <>
+              <div className="flex w-full max-w-md items-center gap-2">
+                <div className="relative flex-1">
+                  <input
+                    className="w-full rounded-[12px] border-2 border-black/10 bg-white px-4 py-3 pr-16 text-base outline-none focus:border-black placeholder:font-semibold"
+                    placeholder={placeholderEth}
+                    inputMode="decimal"
+                    value={bidInput}
+                    onChange={(e) => setBidInput(e.target.value)}
+                    disabled={isEnded}
+                    aria-label="Bid amount in ETH"
+                  />
+                  <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 rounded-[8px] border border-black/10 bg-white px-2 py-1 text-xs font-semibold text-[#5a5a70]">ETH</span>
+                </div>
+                  <button
+                    type="button"
+                    onClick={handleBidClick}
+                    disabled={isEnded || buttonDisabled}
+                    className="inline-flex h-12 items-center justify-center rounded-[12px] bg-black px-6 text-base font-semibold text-white transition hover:bg-black/90 disabled:cursor-not-allowed disabled:bg-black/30"
+                  >
+                    Place Bid
+                  </button>
+                </div>
+                <div className="text-sm font-medium text-[#5a5a70]">
+                  Highest bidder{' '}
+                  {auction && auction.bidder !== ZERO_ADDRESS ? (
+                    <a
+                      href={`https://etherscan.io/address/${auction.bidder}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="underline"
+                    >
+                      {bidderLabel}
+                    </a>
+                  ) : (
+                    bidderLabel
+                  )}
+                </div>
+              </>
+            ) : null}
+          </div>
         </div>
       </div>
     </section>

From c517d850954baf6175ff69b5ba8630b60cf32525 Mon Sep 17 00:00:00 2001
From: willyogo <willy@ogorzaly.com>
Date: Tue, 2 Dec 2025 18:46:09 -0600
Subject: [PATCH 5/6] Improve auction fidget UI

---
 .../community/nouns-dao/NounishAuctions.tsx   | 744 ++++++++++++------
 1 file changed, 502 insertions(+), 242 deletions(-)

diff --git a/src/fidgets/community/nouns-dao/NounishAuctions.tsx b/src/fidgets/community/nouns-dao/NounishAuctions.tsx
index bb8a24b57..753eab890 100644
--- a/src/fidgets/community/nouns-dao/NounishAuctions.tsx
+++ b/src/fidgets/community/nouns-dao/NounishAuctions.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import { formatEther, isAddress, parseEther } from "viem";
 import { base, mainnet, optimism } from "viem/chains";
 import {
@@ -8,15 +9,10 @@ import {
   useConnect,
   useSwitchChain,
   useWriteContract,
+  useEnsName,
+  useEnsAvatar,
 } from "wagmi";
-import { waitForTransactionReceipt } from "wagmi/actions";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/common/components/atoms/card";
+import { readContract, waitForTransactionReceipt } from "wagmi/actions";
 import { Input } from "@/common/components/atoms/input";
 import { Button } from "@/common/components/atoms/button";
 import {
@@ -117,6 +113,7 @@ const PAST_AUCTIONS_QUERY = /* GraphQL */ `
     ) {
       id
       endTime
+      startTime
       token {
         tokenId
         image
@@ -169,6 +166,27 @@ const auctionAbi = [
     inputs: [],
     outputs: [],
   },
+  {
+    type: "function",
+    stateMutability: "view",
+    name: "reservePrice",
+    inputs: [],
+    outputs: [{ name: "", type: "uint256" }],
+  },
+  {
+    type: "function",
+    stateMutability: "view",
+    name: "minBidIncrement",
+    inputs: [],
+    outputs: [{ name: "", type: "uint256" }],
+  },
+  {
+    type: "function",
+    stateMutability: "view",
+    name: "minBidIncrementPercentage",
+    inputs: [],
+    outputs: [{ name: "", type: "uint256" }],
+  },
   {
     type: "function",
     stateMutability: "view",
@@ -210,11 +228,13 @@ const toHttpUri = (uri?: string | null): string | undefined => {
   return uri;
 };
 
-const formatEth = (value?: string | null): string => {
-  if (!value) return "0";
-  const asBigInt = BigInt(value);
-  const formatted = Number.parseFloat(formatEther(asBigInt));
-  return formatted.toFixed(4);
+const formatEthDisplay = (value?: string | bigint | null): string => {
+  if (value == null) return "0 ETH";
+  const asBigInt = typeof value === "bigint" ? value : BigInt(value);
+  const numeric = Number.parseFloat(formatEther(asBigInt));
+  if (!Number.isFinite(numeric)) return "0 ETH";
+  const decimals = numeric >= 1 ? 2 : 4;
+  return `${numeric.toFixed(decimals)} ETH`;
 };
 
 const shortenAddress = (address?: string | null): string => {
@@ -228,10 +248,20 @@ const AuctionArt: React.FC<{ imageUrl?: string; tokenId?: string; className?: st
   className,
 }) => {
   return (
-    <div className={mergeClasses("aspect-square w-full overflow-hidden rounded-xl bg-muted", className)}>
+    <div
+      className={mergeClasses(
+        "aspect-square w-full overflow-hidden rounded-3xl bg-muted shadow-lg ring-1 ring-black/5",
+        className,
+      )}
+    >
       {imageUrl ? (
         // eslint-disable-next-line @next/next/no-img-element
-        <img src={imageUrl} alt={`Token ${tokenId}`} className="h-full w-full object-cover" />
+        <img
+          src={imageUrl}
+          alt={`Token ${tokenId}`}
+          className="h-full w-full object-contain"
+          style={{ imageRendering: "pixelated" }}
+        />
       ) : (
         <div className="flex h-full w-full items-center justify-center text-sm text-muted-foreground">
           No artwork
@@ -241,143 +271,91 @@ const AuctionArt: React.FC<{ imageUrl?: string; tokenId?: string; className?: st
   );
 };
 
-const PastAuctionCard: React.FC<{ auction: BuilderAuction }> = ({ auction }) => (
-  <Card className="h-full">
-    <CardContent className="space-y-3 p-4">
-      <AuctionArt imageUrl={auction.imageUrl} tokenId={auction.tokenId} />
-      <div className="flex items-center justify-between text-sm font-medium">
-        <span>Token #{auction.tokenId}</span>
-        <span>{new Date(auction.endTime * 1000).toLocaleDateString()}</span>
-      </div>
-      <div className="space-y-1 text-sm">
-        <div className="text-muted-foreground">Final bid</div>
-        <div className="text-lg font-semibold">{formatEth(auction.winningBidAmount ?? auction.highestBidAmount)} ETH</div>
-      </div>
-      <div className="space-y-1 text-sm">
-        <div className="text-muted-foreground">Winner</div>
-        <div className="font-mono">{shortenAddress(auction.winningBidder ?? auction.highestBidder)}</div>
-      </div>
-    </CardContent>
-  </Card>
-);
+const DEFAULT_BG = "#e1d7d5";
+const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
 
-const Countdown: React.FC<{ endTime: number }> = ({ endTime }) => {
-  const [remaining, setRemaining] = useState(endTime * 1000 - Date.now());
+const useImageDominantColor = (imageUrl?: string) => {
+  const [color, setColor] = useState<string | undefined>();
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      setRemaining(endTime * 1000 - Date.now());
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, [endTime]);
+    if (!imageUrl) {
+      setColor(undefined);
+      return;
+    }
+    let cancelled = false;
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.src = imageUrl;
+    img.onload = () => {
+      if (cancelled) return;
+      try {
+        const canvas = document.createElement("canvas");
+        canvas.width = 1;
+        canvas.height = 1;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+        ctx.drawImage(img, 0, 0, 1, 1);
+        const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+        setColor(`rgb(${r}, ${g}, ${b})`);
+      } catch {
+        setColor(undefined);
+      }
+    };
+    img.onerror = () => {
+      if (!cancelled) setColor(undefined);
+    };
+    return () => {
+      cancelled = true;
+    };
+  }, [imageUrl]);
 
-  if (remaining <= 0) {
-    return <span className="text-red-500">Auction ended</span>;
-  }
+  return color;
+};
 
-  const hours = Math.floor(remaining / (1000 * 60 * 60));
-  const minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
-  const seconds = Math.floor((remaining % (1000 * 60)) / 1000);
+const formatAuctionDate = (timestamp?: number) => {
+  if (!timestamp) return "-";
+  return new Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(new Date(timestamp * 1000));
+};
 
-  return (
-    <span>
-      {hours.toString().padStart(2, "0")}:{minutes.toString().padStart(2, "0")}:{seconds
-        .toString()
-        .padStart(2, "0")}
-    </span>
-  );
+const formatCountdown = (endTime?: number) => {
+  if (!endTime) return "00:00:00";
+  const ms = endTime * 1000 - Date.now();
+  if (ms <= 0) return "00:00:00";
+  const hours = Math.floor(ms / (1000 * 60 * 60));
+  const minutes = Math.floor((ms % (1000 * 60 * 60)) / (1000 * 60));
+  const seconds = Math.floor((ms % (1000 * 60)) / 1000);
+  return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds
+    .toString()
+    .padStart(2, "0")}`;
 };
 
-const ActiveAuctionCard: React.FC<{
-  auction: BuilderAuction;
-  dao?: BuilderDao;
-  onBid: (value: string) => Promise<void>;
-  onSettle: () => Promise<void>;
-  submitting: boolean;
-  disabled: boolean;
-}> = ({ auction, dao, onBid, onSettle, submitting, disabled }) => {
-  const [bidValue, setBidValue] = useState<string>("");
-  const endsInFuture = auction.endTime * 1000 > Date.now();
-  const currentBid = auction.highestBidAmount ?? auction.winningBidAmount ?? "0";
+const formatEnsOrAddress = (ens?: string | null, address?: string | null) => {
+  if (ens) return ens;
+  if (address) return shortenAddress(address);
+  return "-";
+};
 
+const AddressDisplay: React.FC<{
+  ensName?: string | null;
+  address?: string | null;
+  avatar?: string | null;
+  className?: string;
+}> = ({ ensName, address, avatar, className }) => {
+  const label = formatEnsOrAddress(ensName, address);
   return (
-    <Card className="w-full">
-      <CardHeader>
-        <div className="flex items-start justify-between gap-4">
-          <div>
-            <CardTitle className="text-xl">{dao?.name ?? "Active Auction"}</CardTitle>
-            <CardDescription>Token #{auction.tokenId}</CardDescription>
-          </div>
-          <div className={mergeClasses("rounded-full px-3 py-1 text-xs font-semibold", endsInFuture ? "bg-emerald-100 text-emerald-700" : "bg-amber-100 text-amber-700")}> 
-            {endsInFuture ? "Live" : "Needs settlement"}
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent className="space-y-6">
-        <div className="flex flex-col gap-6 lg:flex-row lg:items-start">
-          <div className="lg:w-1/2">
-            <AuctionArt
-              imageUrl={auction.imageUrl}
-              tokenId={auction.tokenId}
-              className="max-w-[420px] mx-auto"
-            />
-          </div>
-          <div className="flex-1 space-y-6">
-            <div className="grid grid-cols-2 gap-4 text-sm sm:grid-cols-4">
-              <div>
-                <div className="text-muted-foreground">Current bid</div>
-                <div className="text-lg font-semibold">{formatEth(currentBid)} ETH</div>
-              </div>
-              <div>
-                <div className="text-muted-foreground">Highest bidder</div>
-                <div className="font-mono text-sm">
-                  {shortenAddress(auction.highestBidder ?? auction.winningBidder)}
-                </div>
-              </div>
-              <div>
-                <div className="text-muted-foreground">Ends</div>
-                <div>{new Date(auction.endTime * 1000).toLocaleString()}</div>
-              </div>
-              <div>
-                <div className="text-muted-foreground">Countdown</div>
-                <div className="font-mono">{endsInFuture ? <Countdown endTime={auction.endTime} /> : "Ended"}</div>
-              </div>
-            </div>
-
-            <div className="flex flex-col gap-3 sm:flex-row sm:items-end">
-              <div className="w-full sm:max-w-xs">
-                <label className="text-sm text-muted-foreground">Bid amount (ETH)</label>
-                <Input
-                  type="number"
-                  min="0"
-                  step="0.01"
-                  value={bidValue}
-                  onChange={(event) => setBidValue(event.target.value)}
-                  placeholder="0.05"
-                  disabled={submitting || disabled || !endsInFuture}
-                />
-              </div>
-              <div className="flex flex-1 flex-wrap gap-2">
-                <Button
-                  disabled={submitting || disabled || !endsInFuture || !bidValue}
-                  onClick={() => onBid(bidValue)}
-                >
-                  Place bid
-                </Button>
-                <Button
-                  variant="outline"
-                  disabled={submitting || disabled || endsInFuture}
-                  onClick={onSettle}
-                >
-                  Settle auction
-                </Button>
-              </div>
-            </div>
+    <div className={mergeClasses("flex items-center gap-2 text-sm font-medium text-[#4a4a60]", className)}>
+      <div className="relative h-8 w-8 overflow-hidden rounded-full border border-black/10 bg-white shadow-sm">
+        {avatar ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img src={avatar} alt={label} className="h-full w-full object-cover" />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center text-xs font-semibold text-[#6b6b80]">
+            {(ensName ?? address ?? "?").slice(0, 2).toUpperCase()}
           </div>
-        </div>
-      </CardContent>
-    </Card>
+        )}
+      </div>
+      <span className="underline decoration-1 underline-offset-2">{label}</span>
+    </div>
   );
 };
 
@@ -459,23 +437,29 @@ export const nounishAuctionsConfig: FidgetProperties = {
     minHeight: 8,
     maxHeight: 36,
     minWidth: 6,
-    maxWidth: 36,
+  maxWidth: 36,
   },
 };
 
-const pageSize = 9;
+const pastFetchSize = 1;
 
 export const NounishAuctions: React.FC<FidgetArgs<NounishAuctionsSettings>> = ({ settings }) => {
   const [activeAuction, setActiveAuction] = useState<BuilderAuction | null>(null);
   const [daoDetails, setDaoDetails] = useState<BuilderDao | null>(null);
-  const [pastAuctions, setPastAuctions] = useState<BuilderAuction[]>([]);
+  const [pastAuctionCache, setPastAuctionCache] = useState<Record<number, BuilderAuction>>({});
+  const [viewOffset, setViewOffset] = useState(0);
   const [loadingActive, setLoadingActive] = useState(false);
   const [loadingPast, setLoadingPast] = useState(false);
-  const [page, setPage] = useState(0);
+  const [pastEndReached, setPastEndReached] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [refreshKey, setRefreshKey] = useState(0);
   const [txPending, setTxPending] = useState(false);
-  const [hasMorePast, setHasMorePast] = useState(true);
+  const [minBidIncrementPct, setMinBidIncrementPct] = useState<number | undefined>();
+  const [minBidIncrementWei, setMinBidIncrementWei] = useState<bigint | undefined>();
+  const [reservePrice, setReservePrice] = useState<bigint | undefined>();
+  const [bidValue, setBidValue] = useState("");
+  const [fallbackChecked, setFallbackChecked] = useState(false);
+  const [now, setNow] = useState(Date.now());
 
   const { address, chainId } = useAccount();
   const { connectAsync, connectors } = useConnect();
@@ -504,6 +488,11 @@ export const NounishAuctions: React.FC<FidgetArgs<NounishAuctionsSettings>> = ({
 
   const hasValidDao = Boolean(daoAddress);
 
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1_000);
+    return () => clearInterval(id);
+  }, []);
+
   const fetchActiveAuction = useCallback(async () => {
     if (!hasValidDao) return;
     setLoadingActive(true);
@@ -549,61 +538,114 @@ export const NounishAuctions: React.FC<FidgetArgs<NounishAuctionsSettings>> = ({
     }
   }, [daoAddress, hasValidDao, subgraphUrl]);
 
-  const fetchPastAuctions = useCallback(
-    async (pageIndex: number, reset = false) => {
-      if (!hasValidDao) return;
+  const fetchPastAuction = useCallback(
+    async (index: number) => {
+      if (!hasValidDao || index < 0) return null;
+      if (pastAuctionCache[index]) return pastAuctionCache[index];
       setLoadingPast(true);
       setError(null);
-      if (reset) {
-        setHasMorePast(true);
-      }
       try {
         const data = await runGraphQuery<{
           auctions: Array<{
             id: string;
             endTime: string;
+            startTime?: string;
             token?: { tokenId: string; image?: string | null } | null;
             winningBid?: { amount: string; bidder: string } | null;
             highestBid?: { amount: string; bidder: string } | null;
           }>;
         }>(subgraphUrl, PAST_AUCTIONS_QUERY, {
           dao: daoAddress?.toLowerCase(),
-          first: pageSize,
-          skip: pageIndex * pageSize,
+          first: pastFetchSize,
+          skip: index,
         });
 
-        const mapped = (data.auctions || []).map((auction) => ({
+        const auction = data.auctions?.[0];
+        if (!auction) {
+          setPastEndReached(true);
+          return null;
+        }
+
+        const mapped: BuilderAuction = {
           id: auction.id,
           endTime: Number(auction.endTime),
-          startTime: Number(auction.endTime),
+          startTime: Number(auction.startTime ?? auction.endTime),
           settled: true,
           tokenId: auction.token?.tokenId ?? "",
           imageUrl: toHttpUri(auction.token?.image),
-          highestBidAmount: auction.highestBid?.amount ?? undefined,
-          highestBidder: auction.highestBid?.bidder,
-          winningBidAmount: auction.winningBid?.amount ?? undefined,
-          winningBidder: auction.winningBid?.bidder,
-        }));
+          highestBidAmount: auction.highestBid?.amount ?? auction.winningBid?.amount ?? undefined,
+          highestBidder: auction.highestBid?.bidder ?? auction.winningBid?.bidder,
+          winningBidAmount: auction.winningBid?.amount ?? auction.highestBid?.amount ?? undefined,
+          winningBidder: auction.winningBid?.bidder ?? auction.highestBid?.bidder,
+        };
 
-        setPastAuctions((prev) => (reset ? mapped : [...prev, ...mapped]));
-        if (mapped.length < pageSize) {
-          setHasMorePast(false);
-        }
+        setPastAuctionCache((prev) => ({ ...prev, [index]: mapped }));
+        return mapped;
       } catch (err) {
         console.error(err);
         setError((err as Error).message);
+        return null;
       } finally {
         setLoadingPast(false);
       }
     },
-    [daoAddress, hasValidDao, subgraphUrl],
+    [daoAddress, hasValidDao, pastAuctionCache, subgraphUrl],
   );
 
   useEffect(() => {
-    setPage(0);
+    setPastAuctionCache({});
+    setViewOffset(0);
+    setPastEndReached(false);
+    setFallbackChecked(false);
+    setBidValue("");
+  }, [daoAddress, subgraphUrl]);
+
+  useEffect(() => {
     fetchActiveAuction();
-    fetchPastAuctions(0, true);
-  }, [fetchActiveAuction, fetchPastAuctions, refreshKey]);
+  }, [fetchActiveAuction, refreshKey]);
+
+  useEffect(() => {
+    if (loadingActive || fallbackChecked || !hasValidDao) return;
+    if (!activeAuction) {
+      setFallbackChecked(true);
+      fetchPastAuction(0).then((auction) => {
+        if (auction) setViewOffset(1);
+      });
+    }
+  }, [activeAuction, fetchPastAuction, fallbackChecked, hasValidDao, loadingActive]);
+
+  useEffect(() => {
+    (async () => {
+      if (!daoAddress) return;
+      try {
+        const [reserve, pct, increment] = await Promise.all([
+          readContract(wagmiConfig, {
+            address: daoAddress,
+            abi: auctionAbi,
+            functionName: "reservePrice",
+            chainId: resolvedNetwork.chain.id,
+          }).catch(() => undefined),
+          readContract(wagmiConfig, {
+            address: daoAddress,
+            abi: auctionAbi,
+            functionName: "minBidIncrementPercentage",
+            chainId: resolvedNetwork.chain.id,
+          }).catch(() => undefined),
+          readContract(wagmiConfig, {
+            address: daoAddress,
+            abi: auctionAbi,
+            functionName: "minBidIncrement",
+            chainId: resolvedNetwork.chain.id,
+          }).catch(() => undefined),
+        ]);
+        if (typeof reserve === "bigint") setReservePrice(reserve);
+        if (typeof pct === "number" || typeof pct === "bigint") setMinBidIncrementPct(Number(pct));
+        if (typeof increment === "bigint") setMinBidIncrementWei(increment);
+      } catch (err) {
+        console.warn("Failed to load auction parameters", err);
+      }
+    })();
+  }, [daoAddress, resolvedNetwork.chain.id]);
 
   const ensureConnection = useCallback(async () => {
     if (!connectAsync || !switchChainAsync) return;
@@ -618,14 +660,120 @@ export const NounishAuctions: React.FC<FidgetArgs<NounishAuctionsSettings>> = ({
     }
   }, [address, chainId, connectAsync, connectors, resolvedNetwork.chain.id, switchChainAsync]);
 
+  const isViewingActive = viewOffset === 0 && Boolean(activeAuction);
+  const currentAuction = isViewingActive ? activeAuction : pastAuctionCache[viewOffset - 1] ?? null;
+  const displayDaoName = daoDetails?.name ?? daoChoice?.name ?? "Auction";
+
+  useEffect(() => {
+    setBidValue("");
+  }, [currentAuction?.id]);
+
+  const activeHighestBidWei = useMemo(() => {
+    const amount = activeAuction?.highestBidAmount;
+    if (!amount) return 0n;
+    return BigInt(amount);
+  }, [activeAuction?.highestBidAmount]);
+
+  const minBidWei = useMemo(() => {
+    if (!isViewingActive) return undefined;
+    const highest = activeHighestBidWei;
+    if (highest === 0n) {
+      if (reservePrice !== undefined) return reservePrice;
+      if (minBidIncrementWei !== undefined) return minBidIncrementWei;
+      return undefined;
+    }
+    if (minBidIncrementWei !== undefined) return highest + minBidIncrementWei;
+    const pct = minBidIncrementPct ?? 5;
+    const bump = (highest * BigInt(pct) + 99n) / 100n;
+    return highest + bump;
+  }, [activeHighestBidWei, isViewingActive, minBidIncrementPct, minBidIncrementWei, reservePrice]);
+
+  const minBidPlaceholder = useMemo(() => {
+    if (minBidWei == null) return "0.00";
+    const eth = Number.parseFloat(formatEther(minBidWei));
+    if (!Number.isFinite(eth)) return "0.00";
+    const decimals = eth >= 1 ? 2 : 4;
+    return eth.toFixed(decimals);
+  }, [minBidWei]);
+
+  const isEnded = currentAuction ? now >= currentAuction.endTime * 1000 : false;
+  const needsSettlement = isViewingActive && Boolean(currentAuction) && !currentAuction?.settled && isEnded;
+
+  const displayBidValue = isViewingActive
+    ? currentAuction?.highestBidAmount ?? "0"
+    : currentAuction?.winningBidAmount ?? currentAuction?.highestBidAmount ?? "0";
+  const displayBidLabel = formatEthDisplay(displayBidValue);
+
+  const displayAddressRaw = isViewingActive
+    ? currentAuction?.highestBidder
+    : currentAuction?.winningBidder ?? currentAuction?.highestBidder;
+  const normalizedDisplayAddress =
+    displayAddressRaw && isAddress(displayAddressRaw) ? (displayAddressRaw as `0x${string}`) : undefined;
+
+  const { data: ensName } = useEnsName({
+    address: normalizedDisplayAddress,
+    chainId: mainnet.id,
+    query: {
+      enabled: Boolean(normalizedDisplayAddress && normalizedDisplayAddress !== ZERO_ADDRESS),
+    },
+  });
+
+  const { data: ensAvatar } = useEnsAvatar({
+    name: ensName ?? undefined,
+    chainId: mainnet.id,
+    query: {
+      enabled: Boolean(ensName),
+    },
+  });
+
+  const timeLeftLabel = isViewingActive ? formatCountdown(currentAuction?.endTime) : "00:00:00";
+  const backgroundColor = useImageDominantColor(currentAuction?.imageUrl) ?? DEFAULT_BG;
+  const canGoNewer =
+    viewOffset > 0 &&
+    (!loadingActive || Boolean(activeAuction)) &&
+    !(viewOffset === 1 && !activeAuction);
+  const nextPastIndex = viewOffset;
+  const canGoOlder =
+    hasValidDao && !loadingPast && !loadingActive && (!pastEndReached || Boolean(pastAuctionCache[nextPastIndex]));
+
+  const handlePrev = useCallback(async () => {
+    const targetIndex = viewOffset;
+    const cached = pastAuctionCache[targetIndex];
+    if (cached) {
+      setViewOffset((prev) => prev + 1);
+      return;
+    }
+    const fetched = await fetchPastAuction(targetIndex);
+    if (fetched) {
+      setViewOffset((prev) => prev + 1);
+    }
+  }, [fetchPastAuction, pastAuctionCache, viewOffset]);
+
+  const handleNext = useCallback(() => {
+    if (viewOffset === 0) return;
+    if (viewOffset === 1 && !activeAuction) return;
+    setViewOffset((prev) => Math.max(0, prev - 1));
+  }, [activeAuction, viewOffset]);
+
   const handleBid = useCallback(
     async (value: string) => {
-      if (!activeAuction || !daoDetails?.auctionAddress) return;
+      if (!activeAuction || !daoDetails?.auctionAddress || viewOffset !== 0) return;
       const trimmed = value.trim();
       if (!trimmed || Number(trimmed) <= 0) {
         setError("Enter a valid bid amount");
         return;
       }
+      let bidWei: bigint;
+      try {
+        bidWei = parseEther(trimmed as `${number}`);
+      } catch {
+        setError("Enter a valid bid amount");
+        return;
+      }
+      if (minBidWei != null && bidWei < minBidWei) {
+        setError(`Bid must be at least ${formatEthDisplay(minBidWei)}`);
+        return;
+      }
       setError(null);
       try {
         setTxPending(true);
@@ -635,7 +783,7 @@ export const NounishAuctions: React.FC<FidgetArgs<NounishAuctionsSettings>> = ({
           abi: auctionAbi,
           functionName: "createBid",
           args: [BigInt(activeAuction.tokenId)],
-          value: parseEther(trimmed),
+          value: bidWei,
           chainId: resolvedNetwork.chain.id,
         });
         await waitForTransactionReceipt(wagmiConfig, { hash, chainId: resolvedNetwork.chain.id });
@@ -647,7 +795,15 @@ export const NounishAuctions: React.FC<FidgetArgs<NounishAuctionsSettings>> = ({
         setTxPending(false);
       }
     },
-    [activeAuction, daoDetails?.auctionAddress, ensureConnection, resolvedNetwork.chain.id, writeContractAsync],
+    [
+      activeAuction,
+      daoDetails?.auctionAddress,
+      ensureConnection,
+      minBidWei,
+      resolvedNetwork.chain.id,
+      viewOffset,
+      writeContractAsync,
+    ],
   );
 
   const handleSettle = useCallback(async () => {
@@ -665,6 +821,7 @@ export const NounishAuctions: React.FC<FidgetArgs<NounishAuctionsSettings>> = ({
       });
       await waitForTransactionReceipt(wagmiConfig, { hash, chainId: resolvedNetwork.chain.id });
       setRefreshKey((prev) => prev + 1);
+      setViewOffset(0);
     } catch (err) {
       console.error(err);
       setError((err as Error).message);
@@ -673,86 +830,189 @@ export const NounishAuctions: React.FC<FidgetArgs<NounishAuctionsSettings>> = ({
     }
   }, [activeAuction, daoDetails?.auctionAddress, ensureConnection, resolvedNetwork.chain.id, writeContractAsync]);
 
-  const handleLoadMore = () => {
-    const nextPage = page + 1;
-    setPage(nextPage);
-    fetchPastAuctions(nextPage);
-  };
+  const statusLabel = needsSettlement
+    ? "Ended • needs settlement"
+    : isViewingActive
+      ? "Live auction"
+      : "Settled auction";
+
+  const bidderHasValue = Boolean(
+    displayAddressRaw && displayAddressRaw !== ZERO_ADDRESS && (currentAuction?.highestBidAmount || currentAuction?.winningBidAmount),
+  );
 
   return (
     <div
       className="flex h-full min-h-0 flex-col overflow-hidden"
-      style={{ fontFamily: settings.fontFamily, color: settings.fontColor }}
+      style={{
+        fontFamily: settings.fontFamily,
+        color: settings.fontColor,
+        backgroundColor,
+      }}
     >
-      <div className="flex-1 overflow-y-auto">
-        <div className="flex h-full flex-col gap-4 p-4">
-          <Card>
-            <CardContent className="p-4">
-              <div className="space-y-1">
-                <div className="text-sm font-semibold">{daoChoice?.name ?? "Builder DAO"}</div>
-                <div className="text-xs text-muted-foreground">Address: {daoAddress ?? "-"}</div>
-                <div className="text-xs text-muted-foreground">Network: {resolvedNetwork.label}</div>
-                <div className="text-xs text-muted-foreground break-all">Subgraph: {subgraphUrl}</div>
-              </div>
-            </CardContent>
-          </Card>
+      <div className="flex-1 overflow-y-auto p-4 md:p-6">
+        {error ? (
+          <div className="mb-4 rounded-xl border border-red-200 bg-red-50/70 px-4 py-3 text-sm text-red-700">
+            {error}
+          </div>
+        ) : null}
 
-          {error ? (
-            <div className="rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive">
-              {error}
-            </div>
-          ) : null}
+        {!hasValidDao ? (
+          <div className="rounded-xl border border-black/5 bg-white/70 px-4 py-3 text-sm text-muted-foreground shadow-sm">
+            Enter a valid DAO contract address in the fidget settings to load auctions.
+          </div>
+        ) : null}
 
-          {!hasValidDao && (
-            <div className="text-sm text-muted-foreground">
-              Enter a valid DAO contract address in the fidget settings to load auctions.
-            </div>
-          )}
-
-          {loadingActive && <div className="text-sm text-muted-foreground">Loading active auction...</div>}
-
-          {hasValidDao && !loadingActive && activeAuction && (
-            <ActiveAuctionCard
-              auction={activeAuction}
-              dao={daoDetails ?? undefined}
-              onBid={handleBid}
-              onSettle={handleSettle}
-              submitting={txPending}
-              disabled={!daoDetails?.auctionAddress}
-            />
-          )}
-
-          {hasValidDao && !loadingActive && !activeAuction && (
-            <Card>
-              <CardContent className="p-4 text-sm text-muted-foreground">
-                No active auction found for this DAO.
-              </CardContent>
-            </Card>
-          )}
-
-          <div className="space-y-3">
-            <div className="flex items-center justify-between">
-              <h3 className="text-lg font-semibold">Past auctions</h3>
-              {loadingPast && <span className="text-xs text-muted-foreground">Loading...</span>}
-            </div>
-            {pastAuctions.length === 0 && !loadingPast ? (
-              <div className="text-sm text-muted-foreground">No past auctions yet.</div>
-            ) : (
-              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-                {pastAuctions.map((auction) => (
-                  <PastAuctionCard key={auction.id} auction={auction} />
-                ))}
+        {hasValidDao && (loadingActive || (!currentAuction && loadingPast)) && (
+          <div className="rounded-2xl border border-black/5 bg-white/70 px-4 py-3 text-sm text-muted-foreground shadow-sm">
+            Loading auction details...
+          </div>
+        )}
+
+        {hasValidDao && !loadingActive && !loadingPast && !currentAuction && (
+          <div className="rounded-2xl border border-black/5 bg-white/80 px-4 py-3 text-sm text-muted-foreground shadow-sm">
+            No auctions found for this DAO yet.
+          </div>
+        )}
+
+        {hasValidDao && currentAuction && (
+          <div className="mx-auto flex max-w-6xl flex-col gap-6 md:grid md:grid-cols-[minmax(0,1.05fr)_minmax(0,1fr)] md:items-center">
+            <div className="flex justify-center">
+              <div className="w-full max-w-[420px] md:max-w-[520px]">
+                <AuctionArt imageUrl={currentAuction.imageUrl} tokenId={currentAuction.tokenId} />
               </div>
-            )}
-            {pastAuctions.length >= pageSize && hasMorePast && (
-              <div className="flex justify-center">
-                <Button variant="outline" disabled={loadingPast || !hasMorePast} onClick={handleLoadMore}>
-                  Load more
-                </Button>
+            </div>
+
+            <div className="w-full">
+              <div className="rounded-3xl bg-white/95 p-5 shadow-xl ring-1 ring-black/5 backdrop-blur md:p-7">
+                <div className="flex items-center justify-between gap-4">
+                  <div className="text-sm font-semibold text-[#5a5a70]">
+                    {formatAuctionDate(currentAuction.startTime || currentAuction.endTime)}
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <button
+                      type="button"
+                      onClick={handlePrev}
+                      disabled={!canGoOlder}
+                      className="inline-flex h-9 w-9 items-center justify-center rounded-full border-2 border-black/10 bg-white text-black shadow-sm transition hover:scale-[1.02] disabled:cursor-not-allowed disabled:opacity-40"
+                      aria-label="Previous auction"
+                    >
+                      <ChevronLeft className="h-4 w-4" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={handleNext}
+                      disabled={!canGoNewer}
+                      className="inline-flex h-9 w-9 items-center justify-center rounded-full border-2 border-black/10 bg-white text-black shadow-sm transition hover:scale-[1.02] disabled:cursor-not-allowed disabled:opacity-40"
+                      aria-label="Next auction"
+                    >
+                      <ChevronRight className="h-4 w-4" />
+                    </button>
+                  </div>
+                </div>
+
+                <div className="mt-3 flex flex-wrap items-center gap-3">
+                  <div
+                    className="inline-flex items-center rounded-full bg-black text-white px-3 py-1 text-xs font-semibold uppercase tracking-wide"
+                    style={{ letterSpacing: "0.04em" }}
+                  >
+                    {statusLabel}
+                  </div>
+                  <div className="text-sm font-medium text-[#4a4a60]">
+                    {displayDaoName} • Token #{currentAuction.tokenId || "—"}
+                  </div>
+                </div>
+
+                <h2
+                  className="mt-3 text-3xl font-semibold text-[#17171d] md:text-5xl"
+                  style={settings.fontFamily ? { fontFamily: settings.fontFamily } : undefined}
+                >
+                  {currentAuction.tokenId ? `Noun ${currentAuction.tokenId}` : displayDaoName}
+                </h2>
+
+                <div className="mt-5 grid grid-cols-2 gap-4 md:flex md:gap-12">
+                  <div>
+                    <p className="text-sm font-medium text-[#5a5a70]">
+                      {isViewingActive ? "Current bid" : "Winning bid"}
+                    </p>
+                    <p className="text-3xl font-semibold text-[#17171d] md:text-4xl">{displayBidLabel}</p>
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-[#5a5a70]">{isViewingActive ? "Time left" : "Time left"}</p>
+                    <p className="text-3xl font-semibold text-[#17171d] md:text-4xl">
+                      {isViewingActive ? (isEnded ? "00:00:00" : timeLeftLabel) : "00:00:00"}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="mt-6 space-y-3">
+                  {needsSettlement ? (
+                    <Button
+                      onClick={handleSettle}
+                      disabled={txPending}
+                      className="h-12 w-full justify-center rounded-2xl bg-black text-base font-semibold text-white transition hover:scale-[1.01] hover:bg-black/90 disabled:cursor-not-allowed disabled:bg-black/30 md:w-auto md:px-8"
+                    >
+                      {txPending ? "Settling..." : "Settle Auction"}
+                    </Button>
+                  ) : isViewingActive ? (
+                    <>
+                      <div className="flex w-full flex-col gap-3 md:flex-row md:items-center">
+                        <div className="relative flex-1">
+                          <Input
+                            type="number"
+                            min="0"
+                            step="0.01"
+                            value={bidValue}
+                            onChange={(event) => setBidValue(event.target.value)}
+                            placeholder={minBidPlaceholder}
+                            disabled={txPending || isEnded}
+                            className="h-12 w-full rounded-2xl border-2 border-black/10 bg-white pr-16 text-base font-semibold text-[#17171d] placeholder:font-semibold"
+                          />
+                          <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 rounded-xl border border-black/10 bg-white px-3 py-1 text-xs font-semibold text-[#5a5a70]">
+                            ETH
+                          </span>
+                        </div>
+                        <Button
+                          disabled={txPending || isEnded || !bidValue}
+                          onClick={() => handleBid(bidValue)}
+                          className="h-12 w-full justify-center rounded-2xl bg-black text-base font-semibold text-white transition hover:bg-black/90 disabled:cursor-not-allowed disabled:bg-black/30 md:w-auto md:px-8"
+                        >
+                          {txPending ? "Submitting..." : "Place Bid"}
+                        </Button>
+                      </div>
+                      <div className="text-sm font-medium text-[#5a5a70]">
+                        {bidderHasValue ? (
+                          <>
+                            Highest bidder{" "}
+                            <AddressDisplay
+                              ensName={ensName}
+                              address={normalizedDisplayAddress}
+                              avatar={ensAvatar}
+                              className="inline-flex align-middle"
+                            />
+                          </>
+                        ) : (
+                          "No bids yet"
+                        )}
+                      </div>
+                    </>
+                  ) : (
+                    <div className="space-y-2 text-sm font-medium text-[#5a5a70]">
+                      <div>Winning bid {displayBidLabel}</div>
+                      <div className="flex items-center gap-2">
+                        Won by{" "}
+                        {bidderHasValue ? (
+                          <AddressDisplay ensName={ensName} address={normalizedDisplayAddress} avatar={ensAvatar} />
+                        ) : (
+                          "—"
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </div>
               </div>
-            )}
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );

From d81deba127cdb9b10448a999b695b8bbeb92cd4a Mon Sep 17 00:00:00 2001
From: willyogo <willy@ogorzaly.com>
Date: Tue, 2 Dec 2025 18:55:15 -0600
Subject: [PATCH 6/6] fix lint error

---
 src/fidgets/community/nouns-dao/NounishAuctions.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/fidgets/community/nouns-dao/NounishAuctions.tsx b/src/fidgets/community/nouns-dao/NounishAuctions.tsx
index 753eab890..1c06445d6 100644
--- a/src/fidgets/community/nouns-dao/NounishAuctions.tsx
+++ b/src/fidgets/community/nouns-dao/NounishAuctions.tsx
@@ -837,7 +837,9 @@ export const NounishAuctions: React.FC<FidgetArgs<NounishAuctionsSettings>> = ({
       : "Settled auction";
 
   const bidderHasValue = Boolean(
-    displayAddressRaw && displayAddressRaw !== ZERO_ADDRESS && (currentAuction?.highestBidAmount || currentAuction?.winningBidAmount),
+    displayAddressRaw &&
+    displayAddressRaw !== ZERO_ADDRESS &&
+    (currentAuction?.highestBidAmount || currentAuction?.winningBidAmount),
   );
 
   return (