Add decaying price animation

src/views/components/row.mjs

@@ -535,15 +535,16 @@ const row = (
                               <span style="opacity:0.6"> • </span>
                               <a
                                 style="display: inline;"
-                                class="meta-link"
+                                class="decaying-price-link meta-link"
+                                data-price="${story.price.toString()}"
                                 href="/submit?isad=true"
                               >
                                 <span>Price: </span>
                                 ${parseFloat(
                                   ethers.utils.formatEther(
                                     story.price.toString(),
                                   ),
-                                ).toFixed(4)}
+                                ).toFixed(10)}
                                 <span> </span>
                                 ETH
                               </a>

src/web/src/DecayingPrice.jsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+
+const start = Date.now();
+export default function DecayingPrice({ initialPrice }) {
+  const [price, setPrice] = useState(initialPrice);
+  const [flash, setFlash] = useState(false);
+
+  useEffect(() => {
+    const duration = 2629742000;
+
+    const timer = setInterval(() => {
+      const elapsed = Date.now() - start;
+      const pct = Math.max(0, 1 - elapsed / duration);
+      const scaler = 10000000000;
+      const scalerBigInt = 10000000000n;
+      const current =
+        (BigInt(initialPrice) * BigInt(Math.floor(pct * scaler))) /
+        scalerBigInt;
+      setPrice(current);
+      if (current % 5n === 0n) {
+        setFlash(true);
+      } else {
+        setFlash(false);
+      }
+    }, 50);
+
+    return () => clearInterval(timer);
+  }, [initialPrice]);
+
+  return (
+    <>
+      <span>Price: </span>
+      <span
+        style={{
+          color: flash ? "#ff0000" : "inherit",
+          textShadow: flash ? "0 0 10px rgba(255,0,0,0.5)" : "none",
+          transition: "color 0.1s",
+        }}
+      >
+        {(Number(price) / 1e18).toFixed(10)}
+      </span>
+      <span> ETH</span>
+    </>
+  );
+}

src/web/src/main.jsx

@@ -76,6 +76,20 @@ async function addSubmitButton(allowlist, delegations, toast) {
   }
 }
 
+async function addDecayingPriceLink() {
+  const linkContainer = document.querySelector(".decaying-price-link");
+  if (linkContainer) {
+    const price = linkContainer.getAttribute("data-price");
+    const Link = (await import("./DecayingPrice.jsx")).default;
+
+    createRoot(linkContainer).render(
+      <StrictMode>
+        <Link initialPrice={price} />
+      </StrictMode>,
+    );
+  }
+}
+
 async function addInviteLink(toast) {
   const linkContainer = document.querySelector("#invitelink-container");
   if (linkContainer) {
@@ -800,6 +814,7 @@ async function start() {
   const results1 = await Promise.allSettled([
     addDynamicNavElements(),
     addInviteLink(toast),
+    addDecayingPriceLink(),
     addCommentInput(toast, await allowlistPromise, await delegationsPromise),
     addSubscriptionButton(await allowlistPromise, toast),
     addTGLink(await allowlistPromise),