feat: add discontinued message

[irisdv]

Summary by CodeRabbit

• New Features

  • Added a prominent Discontinuation Notice banner at the top of the app.
  • Featured quest now appears in the leaderboard header; search and duration filters are consolidated into a single top bar.

• Style

  • Navbar shifted below the notice and remains fixed during scrolling.
  • Improved mobile menu spacing and panel offsets for better layout.

• Bug Fixes / UX

  • Percentile messaging now adapts between "You are..." and "He is..." when viewing other users.

[coderabbitai]

Walkthrough

Added a discontinuation notice banner and adjusted navbar layout; reworked leaderboard page header to include FeaturedQuest and integrated search/filter controls; updated module import paths and minor UI/formatting tweaks across social media actions and rankings table. No exported APIs removed; FeaturedQuest gained a questId prop.

Changes

Cohort / File(s)	Summary
Navbar banner and layout adjustments components/UI/navbar.tsx	Added fixed discontinuation banner (top, z-index 30); shifted navbar down by 48px (z-index 20); increased mobile/menu offsets (mt-24→mt-32, mt-20→mt-28); normalized quotes/alt text; simplified autoconnect condition.
Leaderboard page refactor app/leaderboard/page.tsx	Reworked header/banner composition: added blur elements, rendered FeaturedQuest with new questId prop, consolidated leaderboard top bar with ChipList and Searchbar, reflowed percentile/avatar rendering and minor state/addr expression tweaks; changed import path for isStarkDomain.
Social media actions import & types components/UI/actions/socialmediaActions.tsx	Updated import path for isStarkRootDomain to starknetid.js/dist/utils; adjusted string-literal quote style for SocialPlatform type; whitespace/formatting changes only.
Rankings table formatting & import components/leaderboard/RankingsTable.tsx	Updated isStarkDomain import path; JSX/typography formatting refactor (multiline props) with no behavioral changes to display logic or styling decisions.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

• Marchand-Nicolas

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "feat: add discontinued message" accurately and succinctly captures the primary change in the PR — adding a discontinuation notice banner (with related navbar adjustments) — and is clear enough for a teammate scanning the repository history to understand the PR's intent.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch add_discontinued_msg

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
sepolia-starknet-quest	Ready	Preview	Comment	Sep 19, 2025 8:11am
starknet-quest	Ready	Preview	Comment	Sep 19, 2025 8:11am

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (5)

components/UI/navbar.tsx (5)

94-102: Guard against stale connector IDs and minor rename

If the stored connector ID isn’t found, connector becomes undefined and you still cast it to Connector, risking a runtime error. Clean up the key and bail. Also, minor typo in connectordId.

Apply this diff:

-        const connectordId = localStorage.getItem("SQ-connectedWallet");
-        const connector = availableConnectors.find(
-          (item) => item.id === connectordId
-        );
-        await connectAsync({ connector: connector as Connector });
+        const connectorId = localStorage.getItem("SQ-connectedWallet");
+        const connector = availableConnectors.find((c) => c.id === connectorId);
+        if (!connector) {
+          localStorage.removeItem("SQ-connectedWallet"); // stale ID
+          return;
+        }
+        await connectAsync({ connector: connector as Connector });

---

181-187: Banner a11y: announce politely and hide emoji from SR; confirm z-index above modals

Add role="status" and aria-live="polite" so screen readers announce once; hide the emoji from SR. Also verify your modal z-indexes render above z-30.

Apply this diff:

-      <div className="fixed w-full z-30 bg-red-600 text-white text-center py-2 px-4">
-        <Typography type={TEXT_TYPE.BODY_DEFAULT} className="text-white">
-          ⚠️ Starknet Quest has been discontinued. Thank you for your support!
-        </Typography>
-      </div>
+      <div
+        ref={bannerRef}
+        className="fixed w-full z-30 bg-red-600 text-white text-center py-2 px-4"
+        role="status"
+        aria-live="polite"
+      >
+        <Typography type={TEXT_TYPE.BODY_DEFAULT} className="text-white">
+          <span aria-hidden="true">⚠️ </span>
+          Starknet Quest has been discontinued. Thank you for your support!
+        </Typography>
+      </div>

---

188-188: Avoid hard-coded 48px offset; compute from banner height

If the banner wraps or styles change, 48px will misalign the navbar. Compute offset from the actual banner height.

Apply this diff:

-      <div className={`fixed w-full z-20`} id="nav" style={{ top: "48px" }}>
+      <div className="fixed w-full z-20" id="nav" style={{ top: `${bannerHeight}px` }}>

Add the following (outside this hunk):

// imports
// import React, { useState, useEffect, useLayoutEffect, useRef, FunctionComponent } from "react";

const bannerRef = useRef<HTMLDivElement | null>(null);
const [bannerHeight, setBannerHeight] = useState(48);

useLayoutEffect(() => {
  const update = () => setBannerHeight(bannerRef.current?.offsetHeight ?? 48);
  update();
  window.addEventListener("resize", update);
  return () => window.removeEventListener("resize", update);
}, []);

---

198-200: Alt text nit

Prefer “Starknet Quest” instead of “Starknet Quest Logo” to keep alt concise and non-redundant.

Apply this diff:

-                alt="Starknet Quest Logo"
+                alt="Starknet Quest"

---

255-266: Mobile menu UX: close on scrim click; stop propagation in panel

Enable closing when tapping the backdrop and prevent accidental close when interacting with the panel.

Apply these diffs:

-        <div
+        <div
+          onClick={nav ? () => setNav(false) : undefined}
           className={
             nav
               ? "mt-32 lg:hidden fixed left-0 top-0 w-full h-screen bg-black/10 z-10" //extra margin so page doesnt cover first navbar buttons
             : ""
           }
         >

-          <div
+          <div
+            onClick={(e) => e.stopPropagation()}
             className={`mt-28 fixed left-0 top-0 w-full sm:w-[60%] lg:w-[45%] h-screen bg-background px-5 ease-in justify-between flex-col overflow-auto ${
               //extra margin so page doesnt overlap the navbar
               nav ? styles.mobileNavbarShown : styles.mobileNavbarHidden
             }`}
           >

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fe9645b and 41f0553.

📒 Files selected for processing (1)

• components/UI/navbar.tsx (5 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

components/UI/navbar.tsx (1)

constants/typography.ts (1)

• TEXT_TYPE (1-14)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Jest

🔇 Additional comments (3)

components/UI/navbar.tsx (3)

207-213: Menu updates LGTM

Links/labels look consistent.

---

279-286: Mobile “Quests” link LGTM

---

52-61: Type import check: SQInfoData

Ensure SQInfoData is imported or globally declared; otherwise TS will error here and at the Modal prop.

If missing, add an explicit import from your types module.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

app/leaderboard/page.tsx (1)

369-392: Consider adding error boundaries for the new banner structure.

The new banner with FeaturedQuest component should handle potential errors gracefully, especially if the featured quest data is unavailable.

Consider wrapping the FeaturedQuest component in an error boundary or adding conditional rendering to handle cases where featuredQuest might be null or undefined:

-          <FeaturedQuest
-            heading="Are you ready for this quest?"
-            key={featuredQuest?.id}
-            title={featuredQuest?.title_card}
-            onClick={() => router.push(`/quest/${featuredQuest?.id}`)}
-            imgSrc={featuredQuest?.img_card}
-            issuer={{
-              name: featuredQuest?.issuer ?? "",
-              logoFavicon: featuredQuest?.logo ?? "",
-            }}
-            reward={featuredQuest?.rewards_title}
-            desc={featuredQuest?.desc}
-            expiry={featuredQuest?.expiry_timestamp}
-            questId={featuredQuest?.id}
-          />
+          {featuredQuest && (
+            <FeaturedQuest
+              heading="Are you ready for this quest?"
+              key={featuredQuest.id}
+              title={featuredQuest.title_card}
+              onClick={() => router.push(`/quest/${featuredQuest.id}`)}
+              imgSrc={featuredQuest.img_card}
+              issuer={{
+                name: featuredQuest.issuer ?? "",
+                logoFavicon: featuredQuest.logo ?? "",
+              }}
+              reward={featuredQuest.rewards_title}
+              desc={featuredQuest.desc}
+              expiry={featuredQuest.expiry_timestamp}
+              questId={featuredQuest.id}
+            />
+          )}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 41f0553 and 2a8a5c3.

📒 Files selected for processing (3)

• app/leaderboard/page.tsx (11 hunks)
• components/UI/actions/socialmediaActions.tsx (3 hunks)
• components/leaderboard/RankingsTable.tsx (3 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

components/leaderboard/RankingsTable.tsx (2)

constants/typography.ts (1)

• TEXT_TYPE (1-14)

utils/feltService.ts (1)

• decimalToHex (12-16)

app/leaderboard/page.tsx (4)

utils/stringService.ts (1)

• getDomainWithoutStark (61-69)

constants/typography.ts (1)

• TEXT_TYPE (1-14)

constants/common.ts (1)

• TOP_50_TAB_STRING (39-39)

utils/feltService.ts (1)

• decimalToHex (12-16)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Jest

🔇 Additional comments (18)

components/UI/actions/socialmediaActions.tsx (3)

10-10: LGTM! Type definition uses consistent string literal format.

The change from single quotes to double quotes for string literal types is a valid formatting adjustment that maintains the same functionality.

---

28-28: LGTM! Whitespace formatting changes.

The added blank lines improve code readability by better separating the variable declaration from the forEach loop and the loop from the setState call.

Also applies to: 39-39

---

4-4: Confirm deep import — prefer package-root exports

package.json shows starknetid.js ^4.0.1 and the repo currently deep-imports "starknetid.js/dist/utils" in: components/UI/actions/socialmediaActions.tsx, app/leaderboard/page.tsx, components/leaderboard/RankingsTable.tsx.
The library documents exposing utils via the package root — use import { utils } from "starknetid.js" and call utils.isStarkRootDomain(...) instead of importing from /dist (deep imports are brittle). (docs.starknet.id)

Action: replace the deep imports with the package-root export OR verify that the installed release actually exposes "dist/utils" and pin/adjust the dependency if necessary.

components/leaderboard/RankingsTable.tsx (2)

144-150: LGTM! Typography components reformatted for better readability.

The multiline JSX formatting for Typography components improves code readability without affecting functionality. The text content and styling logic remain unchanged.

Also applies to: 153-163, 175-180, 182-186

---

20-20: Approve — import path update looks correct but local verification required

Starknet ID SDK exposes utils.isStarkDomain and package.json depends on starknetid.js@^4.0.1; ripgrep in the sandbox skipped files so I couldn't fully confirm absence of the old "starknetid.js/packages/core" imports — run locally: rg -n "starknetid.js/packages/core" -S && rg -n "isStarkDomain" -S or inspect node_modules/starknetid.js/dist/utils to confirm the export. (docs.starknet.id)

app/leaderboard/page.tsx (13)

17-17: LGTM! Type-only import for Address type.

Using type Address in the import statement is a TypeScript best practice that clarifies this is a type import and can help with tree-shaking.

---

45-45: Import path consistency maintained.

The isStarkDomain import path change to starknetid.js/dist/utils is consistent with other files in this PR.

---

99-99: LGTM! Proper cleanup of timeout.

Good practice to clear the timeout on unmount to prevent memory leaks.

---

105-106: LGTM! Consistent formatting of async operations.

The refactored async call with proper indentation improves readability.

Also applies to: 109-109

---

125-128: LGTM! Improved spread operator usage.

The state update using spread syntax is cleaner and follows React best practices for immutable updates.

---

144-144: Simplified address resolution logic looks good.

The consolidated expression address || userAddress is cleaner than the previous conditional logic.

---

210-212: LGTM! Clean domain checking logic.

The ternary operator properly handles both Stark domain and regular address formats.

---

263-263: Address resolution logic is consistent.

The fallback pattern currentSearchedAddress || (userAddress ? userAddress : address || "") ensures proper address resolution across different states.

Also applies to: 293-293, 318-319

---

394-427: LGTM! Well-structured leaderboard header layout.

The new layout with distinct sections for the heading, chip list, and search bar provides better organization and user experience. The flex values (0.4, 1, 0.4) create a balanced layout.

---

434-444: LGTM! Conditional Avatar rendering based on address state.

The Avatar component correctly displays based on whether there's a searched address or user address, with proper hex conversion using decimalToHex.

---

451-451: Good UX improvement with contextual text.

The text changes from "He is" to "You are" based on whether viewing a searched address provides better user feedback.

---

369-392: No action needed — questId prop verified on FeaturedQuest.

FeaturedQuestProps defines questId?: number and the component conditionally renders ; passing featuredQuest?.id is valid.

---

75-78: Verify LeaderboardToppersData type and state initializer

State uses useState({ best_users: [], total_users: 0 }); confirm LeaderboardToppersData (type or interface) is defined/imported and that this object matches its required fields — update the initializer or import the correct type if not.
Location: app/leaderboard/page.tsx (lines 75–78).
I couldn't locate the type due to ripgrep error "unrecognized file type: tsx" — please run locally: rg -n "(type|interface)\s+LeaderboardToppersData" -S or verify manually.