feat(BA-2964): Premium price UI with fixes (#2767)

* Reuse launch auction logic to function for premium price auctions

* Rename hook to match new method

* Replace auction table with prod premium auction data

* increase granularity of ui plot

* Rename and refactor hook

* Fix deps

* Handle loading for price fetch, falsy but valid 0n returns

Author: stevieraykatz

apps/web/src/components/Basenames/PremiumExplainerModal/index.tsx

@@ -1,18 +1,20 @@
 import Modal from 'apps/web/src/components/Modal';
 import data from 'apps/web/src/data/usernamePriceDecayTable.json';
-import { useBasenamesLaunchTime } from 'apps/web/src/hooks/useBasenamesLaunchTime';
+import { useBasenamesNameExpiresWithGracePeriod } from 'apps/web/src/hooks/useBasenamesNameExpiresWithGracePeriod';
+import { useErrors } from 'apps/web/contexts/Errors';
+import { useEffect } from 'react';
 import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip } from 'recharts';
 import { formatEther } from 'viem';
 
 type CustomTooltipProps = {
   active?: boolean;
   baseSingleYearEthCost?: bigint;
-  launchTimeSeconds?: bigint;
+  auctionStartTimeSeconds?: bigint;
   payload: [
     {
       dataKey: 'premium';
       name: 'premium';
-      payload: { hours: number; premium: number };
+      payload: { days: number; premium: number };
       value: number;
     },
   ];
@@ -22,13 +24,19 @@ function CustomTooltip({
   active,
   payload,
   baseSingleYearEthCost,
-  launchTimeSeconds,
+  auctionStartTimeSeconds,
 }: CustomTooltipProps) {
-  if (active && payload?.length && launchTimeSeconds && baseSingleYearEthCost) {
+  if (
+    active &&
+    payload?.length &&
+    auctionStartTimeSeconds !== undefined &&
+    auctionStartTimeSeconds !== null &&
+    baseSingleYearEthCost
+  ) {
     const premium = payload[0].value;
-    const hours = payload[0].payload.hours;
-    const seconds = hours * 60 * 60;
-    const tooltipSeconds = seconds + Number(launchTimeSeconds);
+    const days = payload[0].payload.days;
+    const seconds = days * 24 * 60 * 60; // Convert days to seconds
+    const tooltipSeconds = seconds + Number(auctionStartTimeSeconds);
     const timeOfPremium = new Date(tooltipSeconds * 1000).toLocaleString(undefined, {
       year: 'numeric',
       month: '2-digit',
@@ -65,17 +73,31 @@ type PremiumExplainerModalProps = {
   toggleModal: () => void;
   premiumEthAmount: bigint | undefined;
   baseSingleYearEthCost: bigint;
+  name: string;
 };
 const chartMarginValues = { top: 2, right: 2, left: 2, bottom: 2 };
 export function PremiumExplainerModal({
   isOpen,
   toggleModal,
   premiumEthAmount,
   baseSingleYearEthCost,
+  name,
 }: PremiumExplainerModalProps) {
-  const { data: launchTimeSeconds } = useBasenamesLaunchTime();
+  const { logError } = useErrors();
+  const {
+    data: auctionStartTimeSeconds,
+    isLoading,
+    isError,
+    error,
+  } = useBasenamesNameExpiresWithGracePeriod(name);
 
-  if (!premiumEthAmount || !baseSingleYearEthCost) return null;
+  useEffect(() => {
+    if (isError && error) {
+      logError(error, `Error fetching name expiration with grace period for: ${name}`);
+    }
+  }, [isError, error, logError, name]);
+
+  if (!premiumEthAmount || !baseSingleYearEthCost || isLoading) return null;
   const formattedOneYearCost = Number(formatEther(baseSingleYearEthCost)).toLocaleString(
     undefined,
     {
@@ -94,8 +116,8 @@ export function PremiumExplainerModal({
       <div className="flex max-w-[491px] flex-1 flex-col gap-3">
         <h1 className="w-full text-2xl font-bold">This name has a temporary premium</h1>
         <p className="mb-3 text-illoblack">
-          To ensure fair distribution of Basenames, all names have a temporary premium starting at
-          100 ETH that then decays exponentially to 0 over 36 hours.
+          To ensure fair distribution of recently expired Basenames, all names have a price premium
+          which starts at 100 ETH that then decays exponentially to 0 over 21 days.
         </p>
         <div className="grid  grid-cols-2 grid-rows-4">
           <div className="col-span-2 mb-2 text-sm font-medium uppercase text-gray-60">
@@ -147,7 +169,7 @@ export function PremiumExplainerModal({
                   // @ts-expect-error type wants an unnecessary prop
                   <CustomTooltip
                     baseSingleYearEthCost={baseSingleYearEthCost}
-                    launchTimeSeconds={launchTimeSeconds}
+                    auctionStartTimeSeconds={auctionStartTimeSeconds}
                   />
                 }
               />

apps/web/src/components/Basenames/RegistrationForm/index.tsx

@@ -138,9 +138,15 @@ export default function RegistrationForm() {
   const usdPrice = hasResolvedUSDPrice ? formatUsdPrice(price, ethUsdPrice) : '--.--';
   const nameIsFree = !hasRegisteredWithDiscount && price === 0n;
 
-  const { seconds, timestamp: premiumEndTimestamp } = usePremiumEndDurationRemaining();
+  const {
+    seconds,
+    timestamp: premiumEndTimestamp,
+    isLoading: isPremiumDataLoading,
+  } = usePremiumEndDurationRemaining(selectedName);
 
-  const isPremiumActive = Boolean(premiumPrice && premiumPrice !== 0n && seconds !== 0n);
+  const isPremiumActive = Boolean(
+    !isPremiumDataLoading && premiumPrice && premiumPrice !== 0n && seconds !== 0n,
+  );
   const mainRegistrationElementClasses = classNames(
     'z-10 flex flex-col items-start justify-between gap-6 bg-[#F7F7F7] p-8 text-gray-60 shadow-xl md:flex-row md:items-center relative z-20',
     {
@@ -331,6 +337,7 @@ export default function RegistrationForm() {
           baseSingleYearEthCost={singleYearBasePrice}
           isOpen={premiumExplainerModalOpen}
           toggleModal={togglePremiumExplainerModal}
+          name={selectedName}
         />
       )}
     </>