Update the landing page and add the total users and testimonials count

[KanishkSogani]

Summary by CodeRabbit

• New Features

  • Live on-chain totals for profiles and testimonials with animated counters and a hook to fetch/format stats.
  • Improved sharing messages for testimonial requests and showcases; CTAs updated for smoother navigation.

• Style

  • Major landing revamp: animated hero, refreshed features, How It Works, and testimonials sections with new gradients, icons, transitions, badges, and stat panels.
  • Navbar now adapts on scroll with a translucent blurred background.

• Chores

  • Dependency update: framer-motion.
  • Updated deployment records and contract addresses.
  • README: added partner badges and top-section updates.

[coderabbitai]

Walkthrough

Adds on-chain counters and getters to VouchMe, updates ABI/TypeChain and factory, deploys a new contract address on chain 534351, and integrates on-chain stats into the web UI with a new hook and CountUp component; several landing page components, Navbar behavior, and a dependency were also updated.

Changes

Cohort / File(s)	Summary
Deployment artifacts contracts/broadcast/DeployVouchMe.s.sol/534351/run-1757402841.json, contracts/broadcast/DeployVouchMe.s.sol/534351/run-latest.json, contracts/broadcast/DeployVouchMe.s.sol/61/run-1759575443.json, contracts/broadcast/DeployVouchMe.s.sol/61/run-latest.json	Added and updated deployment records for chains 534351 and 61: new CREATE txs/receipts, contract addresses, gas/nonce/fee metrics, block hashes/numbers, timestamps, and commit metadata.
Solidity: counters and update logic contracts/src/VouchMe.sol	Added uint256 public totalProfiles and totalTestimonials; modified setProfile and createTestimonial to increment counters only for new creations (updates do not increment); added external getters.
TypeChain typings web/src/typechain-types/VouchMe.ts	Added typed entries and overloads for getTotalProfiles, getTotalTestimonials, and the totalProfiles/totalTestimonials wrappers to the VouchMe interface and getFunction unions.
Factory and ABI web/src/typechain-types/factories/VouchMe__factory.ts	Expanded ABI with four view functions; updated bytecode; broadened VouchMeConstructorParams to accept full ContractFactory constructor signatures.
Contract address map web/src/utils/contract.ts	Updated CONTRACT_ADDRESSES: Scroll Sepolia (534351) to 0x344fe9f4bee36dadd4b584be8e9a968b1515d291; updated chain 61 address.
Stats hook and animated counts web/src/hooks/useContractStats.ts, web/src/components/ui/count-up.tsx	New client hook useContractStats reads on-chain totals (with minimum thresholds) and returns profiles/testimonials; new CountUp component animates numeric counts on viewport entry.
Landing page components web/src/components/LandingPage/FeaturesSection.tsx, web/src/components/LandingPage/HeroSection.tsx, web/src/components/LandingPage/HowItWorks.tsx, web/src/components/LandingPage/TestimonialSection.tsx	Major visual/content revamp: gradients, decorative overlays, icon swaps, animated/staggered reveals, updated copy and CTAs, and Testimonial section switched to dynamic stats.
Navbar scroll behavior web/src/components/Navbar.tsx	Added isScrolled state and a scroll listener to apply dynamic translucent/blurred background on the landing page.
Dashboard share messages web/src/app/dashboard/page.tsx	Centralized share message strings into constants and replaced inline literals in share handlers.
New typechain factory and bytecode web/src/typechain-types/factories/VouchMe__factory.ts	Bytecode and ABI updated to match Solidity changes; factory constructor typing broadened.
Dependency bump web/package.json	Bumped framer-motion from ^12.4.7 to ^12.23.12.
Docs / README README.md	Added badge/logo header and minor formatting fixes to local setup commands.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Contract as VouchMe
  Note right of Contract:#88CCEE fill:#f6fffe,stroke:#88CCEE
  Note right of Contract:New counters and update-aware logic

  User->>Contract: setProfile(name, metadata)
  alt name previously empty
    Contract->>Contract: totalProfiles++
  else
    Contract->>Contract: update profile fields
  end

  User->>Contract: createTestimonial(sender, receiver, content)
  alt existing testimonial from sender->receiver
    Contract->>Contract: remove old token / update
    Note right of Contract: totalTestimonials unchanged
  else
    Contract->>Contract: mint token
    Contract->>Contract: totalTestimonials++
  end

  User->>Contract: getTotalProfiles()
  Contract-->>User: uint256
  User->>Contract: getTotalTestimonials()
  Contract-->>User: uint256

Loading

sequenceDiagram
  autonumber
  participant UI as React UI
  participant Hook as useContractStats
  participant Wagmi as wagmi readContract
  participant Contract as VouchMe

  UI->>Hook: mount
  Hook->>Wagmi: read getTotalProfiles(contractAddress)
  Wagmi->>Contract: eth_call getTotalProfiles
  Contract-->>Wagmi: bigint
  Wagmi-->>Hook: bigint

  Hook->>Wagmi: read getTotalTestimonials(contractAddress)
  Wagmi->>Contract: eth_call getTotalTestimonials
  Contract-->>Wagmi: bigint
  Wagmi-->>Hook: bigint

  Hook->>Hook: apply min thresholds & toNumber
  Hook-->>UI: { profiles, testimonials }
  UI->>UI: <CountUp value=profiles /> and <CountUp value=testimonials />

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

Possibly related PRs

• Update Dashboard and other pages UI/UX #17 — Overlaps with web/src/components/Navbar.tsx changes (scroll/visual behavior adjustments).

Suggested reviewers

• ceilican
• Zahnentferner

Poem

hoppity-hop, I ship with glee,
counters on-chain for all to see,
counts grow true, edits stay neat,
UI gleams with gradients sweet.
I thump my foot — deploy we be! 🐰✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly summarizes the primary scope of the changeset by indicating both the landing page overhaul and the addition of total users and testimonials counters. It directly reflects the major UI updates across the landing page components and the new data-driven count functionality. This phrasing is clear, concise, and gives reviewers immediate insight into the pull request’s focus.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.}

[coderabbitai]

Actionable comments posted: 7

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (4)

contracts/src/VouchMe.sol (4)

214-221: Non-transferable override blocks burns — prevents deletion/update cleanup.

Overriding _update to require owner be zero forbids both transfers and burns. This makes tokens impossible to burn, leaving “ghost” tokens on updates/deletes.

Apply:

- function _update(address to, uint256 tokenId, address auth) internal override returns (address) {
-     require(_ownerOf(tokenId) == address(0), "Tokens are non-transferrable");
-     return super._update(to, tokenId, auth);
- }
+ function _update(address to, uint256 tokenId, address auth) internal override returns (address) {
+     address from = _ownerOf(tokenId);
+     // allow mint (from == 0) and burn (to == 0); disallow transfers
+     require(from == address(0) || to == address(0), "Tokens are non-transferrable");
+     return super._update(to, tokenId, auth);
+ }

---

89-97: On update, burn the old token and clear storage to avoid leaks.

Replacing a testimonial only removes mappings/arrays; the old NFT remains minted and locked forever.

Apply:

 uint256 existingTokenId = _testimonial[senderAddress][msg.sender];
 bool isUpdate = false;
 if (existingTokenId != 0) {
   isUpdate = true;
-  // Remove the existing testimonial
+  // Remove the existing testimonial
   _removeTestimonialFromList(existingTokenId, senderAddress, msg.sender);
+  // Burn old NFT and clear details
+  _burn(existingTokenId);
+  delete _testimonials[existingTokenId];
 }
 ...
 // Increment testimonials counter only for new testimonials (not updates)
 if (!isUpdate) {
   totalTestimonials++;
 }

Also applies to: 122-126

---

300-314: Delete should burn token and clear details.

Currently only mappings/arrays are updated, leaving a minted, unusable token.

Apply:

 function deleteTestimonial(uint256 tokenId) external {
   require(_ownerOf(tokenId) == msg.sender, "Only recipient can delete");
   // Check if the testimonial still exists
   address sender = _testimonials[tokenId].sender;
   require(_testimonial[sender][msg.sender] == tokenId, "Testimonial already deleted");
   _removeTestimonialFromList(tokenId, sender, msg.sender);
+  _burn(tokenId);
+  delete _testimonials[tokenId];
   emit TestimonialDeleted(tokenId, msg.sender);
 }

---

73-87: Prevent hash collisions and replay by using abi.encode with domain separation
Replace the abi.encodePacked block in contracts/src/VouchMe.sol (lines 73–87) with:

- bytes32 messageHash = keccak256(
-   abi.encodePacked(
-     senderAddress,
-     msg.sender,
-     content,
-     giverName,
-     profileUrl
-   )
- );
+ bytes32 messageHash = keccak256(
+   abi.encode(
+     senderAddress,
+     msg.sender,
+     content,
+     giverName,
+     profileUrl,
+     address(this),
+     block.chainid
+   )
+ );

Ensure any clients that produce signatures are updated to match this new encoding.

♻️ Duplicate comments (1)

web/src/typechain-types/VouchMe.ts (1)

588-591: Typed methods for total — mirrors getters.*

Same bigint handling applies as above; avoid duplicative RPCs by using one of getTotal* or total* consistently in hooks.

🧹 Nitpick comments (26)

web/src/components/Navbar.tsx (2)

27-36: Avoid initial flicker and reduce scroll overhead.

Initialize state on mount and use passive listener; also avoid redundant state updates.

Apply:

 useEffect(() => {
-  if (isLandingPage) {
-    const handleScroll = () => {
-      setIsScrolled(window.scrollY > 50);
-    };
-
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }
+  if (!isLandingPage) return;
+  const handleScroll = () => {
+    const scrolled = window.scrollY > 50;
+    setIsScrolled((prev) => (prev !== scrolled ? scrolled : prev));
+  };
+  handleScroll(); // set initial
+  window.addEventListener("scroll", handleScroll, { passive: true });
+  return () => window.removeEventListener("scroll", handleScroll);
 }, [isLandingPage]);

---

47-57: Nav behavior is clear; consider consistency across routes (minor).

Landing uses fixed; others use static background. If unintended layout shift occurs between pages, consider fixed/sticky on all.

web/src/app/dashboard/page.tsx (1)

1285-1286: Ensure shared links include protocol; update X endpoint (optional).

Some shares use ${baseUrl} which strips https://, producing bare domains in posts. Use window.location.origin everywhere for share/copy. Optionally switch to https://x.com/intent/post.

Outside this diff, adjust base URL:

// lines ~255-259
useEffect(() => {
  if (typeof window !== "undefined") {
-   setBaseUrl(window.location.origin.replace(/^https?:\/\//, ""));
+   setBaseUrl(window.location.origin); // keep protocol
  }
}, []);

And keep consumers as ${baseUrl}/.... If you want visually trimmed display, keep truncateLink for UI only.

Also applies to: 1319-1320, 1336-1337, 1405-1406, 1441-1442, 1458-1459

contracts/src/VouchMe.sol (3)

14-16: Counter semantics: clarify “total” vs “active”.

totalProfiles/totalTestimonials only increment and never decrement. If UI intends “ever created”, this is fine; if “active”, decrement on delete.

---

175-190: Redundant getters.

Since totalProfiles/totalTestimonials are public, Solidity auto-generates getters. The explicit getters can be removed to save bytecode.

---

241-254: Profile “new” detection via name is brittle (minor).

Prefer a dedicated mapping(address => bool) hasProfile flag toggled on first set to decouple from field contents.

web/src/components/LandingPage/HeroSection.tsx (3)

13-13: Fix invalid Tailwind breakpoint prefix ("mb:pb-0").

"mb:" is not a valid breakpoint; looks like a typo for "md:". This class is currently a no-op.

-    <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-24 md:pt-16 mb:pb-0 pb-10">
+    <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-24 md:pt-16 md:pb-0 pb-10">

---

22-41: Mark decorative icons as aria-hidden and respect reduced motion.

Improves a11y by hiding purely decorative icons from screen readers and avoids motion for users preferring reduced motion.

-        <Shield
-          className="absolute top-20 left-10 w-6 h-6 text-yellow-400/20 animate-bounce"
+        <Shield
+          aria-hidden="true"
+          className="absolute top-20 left-10 w-6 h-6 text-yellow-400/20 motion-safe:animate-bounce"
           style={{ animationDelay: "0s" }}
         />
-        <Lock
-          className="absolute top-40 right-20 w-4 h-4 text-yellow-400/30 animate-bounce"
+        <Lock
+          aria-hidden="true"
+          className="absolute top-40 right-20 w-4 h-4 text-yellow-400/30 motion-safe:animate-bounce"
           style={{ animationDelay: "2s" }}
         />
-        <Users
-          className="absolute bottom-40 left-20 w-5 h-5 text-yellow-400/20 animate-bounce"
+        <Users
+          aria-hidden="true"
+          className="absolute bottom-40 left-20 w-5 h-5 text-yellow-400/20 motion-safe:animate-bounce"
           style={{ animationDelay: "4s" }}
         />
-        <Shield
-          className="absolute top-60 right-10 w-5 h-5 text-yellow-400/15 animate-bounce"
+        <Shield
+          aria-hidden="true"
+          className="absolute top-60 right-10 w-5 h-5 text-yellow-400/15 motion-safe:animate-bounce"
           style={{ animationDelay: "1s" }}
         />
-        <Lock
-          className="absolute bottom-20 right-40 w-4 h-4 text-yellow-400/25 animate-bounce"
+        <Lock
+          aria-hidden="true"
+          className="absolute bottom-20 right-40 w-4 h-4 text-yellow-400/25 motion-safe:animate-bounce"
           style={{ animationDelay: "3s" }}
         />

-            <Shield className="w-4 h-4 mr-2 text-yellow-400" />
+            <Shield aria-hidden="true" className="w-4 h-4 mr-2 text-yellow-400" />

-              <ArrowRight className="ml-2 w-5 h-5" />
+              <ArrowRight aria-hidden="true" className="ml-2 w-5 h-5" />

Also applies to: 48-49, 79-79

---

75-80: Prefer for navigation CTAs.

Semantically an anchor; Link enables prefetch and better accessibility. Keep button styles.

-            <button
-              onClick={() => router.push("/dashboard")}
-              className="w-full md:w-auto bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-5 py-3 rounded-lg transition-all duration-200 transform hover:scale-105 shadow-xl flex items-center justify-center"
-            >
+            <Link
+              href="/dashboard"
+              className="w-full md:w-auto bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-5 py-3 rounded-lg transition-all duration-200 transform hover:scale-105 shadow-xl flex items-center justify-center"
+            >
               Start Requesting Testimonials
               <ArrowRight aria-hidden="true" className="ml-2 w-5 h-5" />
-            </button>
+            </Link>

-            <button
-              onClick={() => router.push(showcasePath)}
+            <Link
+              href={showcasePath}
               className={`w-full md:w-auto border border-indigo-400/30 text-indigo-400 hover:bg-indigo-400/10 hover:border-indigo-400/50 px-5 py-3 rounded-lg transition-all duration-200 `}
-            >
+            >
               View Showcase
-            </button>
+            </Link>

Also applies to: 82-87

contracts/broadcast/DeployVouchMe.s.sol/534351/run-latest.json (1)

1-47: Consider excluding run-latest.json from VCS.

run-latest is mutable and often causes merge noise; the timestamped run file already pins the deployment. Consider .gitignoring run-latest.json.

web/src/components/LandingPage/HowItWorks.tsx (4)

88-91: Use a stable key instead of array index.

These steps are static; prefer step.number to avoid potential key issues on reordering.

-          {steps.map((step, index) => (
-            <div
-              key={index}
+          {steps.map((step, index) => (
+            <div
+              key={step.number}

---

110-114: Hide step icons from screen readers (decorative).

Headings already convey meaning; hide icons to reduce verbosity.

-                    <step.icon className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+                    <step.icon aria-hidden="true" className="w-5 h-5 sm:w-6 sm:h-6 text-white" />

---

132-137: Add aria-label to CTA for clarity.

Minor a11y polish.

-          <button
-            onClick={() => router.push("/dashboard")}
+          <button
+            aria-label="Start requesting testimonials"
+            onClick={() => router.push("/dashboard")}

---

66-70: Optional: Prefer for navigation targets.

Cards/CTAs navigate within the app; Link improves semantics and prefetch. Keep visual styles.

Also applies to: 81-87, 104-127, 131-137

web/src/typechain-types/factories/VouchMe__factory.ts (1)

476-501: Avoid duplicate surfaces for the same data

You now expose both getTotal* and total*; pick one for the frontend to avoid extra RPCs and confusion. If both remain for compat, document the preferred one and gate calls per network.

web/src/components/LandingPage/FeaturesSection.tsx (3)

37-38: Prevent any accidental pointer interception by decorative layers

Mark the background layers as non-interactive.

-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_50%,rgba(99,102,241,0.05),transparent_50%)]" />
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(20,184,166,0.03),transparent_50%)]" />
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_20%_50%,rgba(99,102,241,0.05),transparent_50%)]" />
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(20,184,166,0.03),transparent_50%)]" />

---

59-61: Stable keys and reduced-motion safety

Use a stable key and honor prefers-reduced-motion for long transitions.

-              key={index}
-              className="transition-all duration-1000"
+              key={feature.title}
+              className="transition-all duration-1000 motion-reduce:transition-none motion-reduce:transform-none"

---

68-68: Decorative icon should be hidden from assistive tech

Add aria-hidden to the icon.

-                    <feature.icon className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+                    <feature.icon aria-hidden="true" className="w-5 h-5 sm:w-6 sm:h-6 text-white" />

web/src/utils/contract.ts (2)

3-7: Tighten types and immutability of address map

Use satisfies + template literal type for checks, and freeze keys/values.

-export const CONTRACT_ADDRESSES: { [key: number]: string } = {
-  534351: "0x344fe9f4bee36dadd4b584be8e9a968b1515d291", // Scroll Sepolia
-  63: "0x3c9a98c58be8410c3510d5ccc671e35b7df55e08", // Mordor
-  61: "0x51a11e08643c9df6ceb5f7fb41a72334cfa7d1d6", // Ethereum Classic
-};
+export const CONTRACT_ADDRESSES = {
+  534351: "0x344fe9f4bee36dadd4b584be8e9a968b1515d291", // Scroll Sepolia
+  63: "0x3c9a98c58be8410c3510d5ccc671e35b7df55e08",   // Mordor
+  61: "0x51a11e08643c9df6ceb5f7fb41a72334cfa7d1d6",   // Ethereum Classic
+} as const satisfies Record<number, `0x${string}`>;

---

9-9: Avoid bundling factory bytecode into the client

Export only the ABI for read-only use to reduce bundle size; import the factory only in server/tooling.

-export const VouchMeFactory = VouchMe__factory;
+export const VouchMeAbi = VouchMe__factory.abi;

If needed elsewhere, provide a small helper outside client paths:

// web/src/server/contracts/vouchme.ts (server-only)
import { VouchMe__factory } from "@/typechain-types";
export const VouchMeFactory = VouchMe__factory;

web/src/hooks/useContractStats.ts (3)

9-12: Avoid UI flicker by aligning initial values with floors

Initial defaults (120/259) jump to 150/250 once effect runs. Start at the floored values to keep UI stable.

   const [stats, setStats] = useState({
-    profiles: 120,
-    testimonials: 259,
+    profiles: 150,
+    testimonials: 250,
   });
@@
-    setStats({
-      profiles: contractProfiles > 150 ? contractProfiles : 150,
-      testimonials: contractTestimonials > 250 ? contractTestimonials : 250,
-    });
+    setStats({
+      profiles: Math.max(contractProfiles, 150),
+      testimonials: Math.max(contractTestimonials, 250),
+    });

Also applies to: 35-38

---

29-34: Handle BigInt results safely from wagmi reads

useReadContract commonly returns bigint. Convert defensively to avoid NaN and make intent clear. If you expect these to remain under Number.MAX_SAFE_INTEGER, this is fine; otherwise, display as strings.

-    const contractProfiles = totalProfiles ? Number(totalProfiles) : 0;
-    const contractTestimonials = totalTestimonials
-      ? Number(totalTestimonials)
-      : 0;
+    const toNum = (v: unknown) =>
+      typeof v === "bigint" ? Number(v) : Number(v ?? 0);
+    const contractProfiles = toNum(totalProfiles);
+    const contractTestimonials = toNum(totalTestimonials);

---

17-27: Reduce RPC round-trips with a batched read

Optional: switch to useReadContracts to fetch both totals in one request and set a staleTime to limit refetches.

web/src/components/LandingPage/TestimonialSection.tsx (2)

53-56: Re-animate stats when values change (optional)

If you want the counters to re-animate on updated values, key the component by the value to force a remount.

-                  <CountUp value={profiles} delay={500} />+
+                  <CountUp key={profiles} value={profiles} delay={500} />+
@@
-                  <CountUp value={testimonials} delay={500} />+
+                  <CountUp key={testimonials} value={testimonials} delay={500} />+

Also applies to: 65-67

---

116-121: Prefer Link for client-side navigation and prefetch

Using Next.js <Link> improves a11y and enables prefetch. Optional—current approach works.

-                  <button
-                    onClick={() => router.push("/dashboard")}
-                    className="w-full bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-[1.02] shadow-lg"
-                  >
-                    Request Testimonial
-                  </button>
+                  <a
+                    href="/dashboard"
+                    className="w-full inline-flex justify-center bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-[1.02] shadow-lg"
+                  >
+                    Request Testimonial
+                  </a>

If you already use next/link, swap <a> with <Link href="/dashboard">...</Link>.

web/src/typechain-types/VouchMe.ts (1)

529-532: Typed methods for getTotal — confirm bigint handling in UI.*

TypeChain will return bigint at call sites (DefaultReturnType unwrap). Ensure UI converts safely (e.g., Number() with bounds or format from BigInt) before passing to CountUp/formatters to avoid SSR/serialization issues.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0a824da and f3b124e.

⛔ Files ignored due to path filters (1)

• web/package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (15)

• contracts/broadcast/DeployVouchMe.s.sol/534351/run-1757402841.json (1 hunks)
• contracts/broadcast/DeployVouchMe.s.sol/534351/run-latest.json (2 hunks)
• contracts/src/VouchMe.sol (5 hunks)
• web/package.json (1 hunks)
• web/src/app/dashboard/page.tsx (7 hunks)
• web/src/components/LandingPage/FeaturesSection.tsx (1 hunks)
• web/src/components/LandingPage/HeroSection.tsx (1 hunks)
• web/src/components/LandingPage/HowItWorks.tsx (4 hunks)
• web/src/components/LandingPage/TestimonialSection.tsx (1 hunks)
• web/src/components/Navbar.tsx (3 hunks)
• web/src/components/ui/count-up.tsx (1 hunks)
• web/src/hooks/useContractStats.ts (1 hunks)
• web/src/typechain-types/VouchMe.ts (10 hunks)
• web/src/typechain-types/factories/VouchMe__factory.ts (3 hunks)
• web/src/utils/contract.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (5)

web/src/hooks/useContractStats.ts (1)

web/src/utils/contract.ts (1)

• CONTRACT_ADDRESSES (3-7)

web/src/components/LandingPage/TestimonialSection.tsx (2)

web/src/hooks/useContractStats.ts (1)

• useContractStats (8-42)

web/src/components/ui/count-up.tsx (1)

• CountUp (14-59)

web/src/components/LandingPage/HeroSection.tsx (1)

web/src/components/ui/hero-highlight.tsx (1)

• Highlight (6-39)

web/src/components/LandingPage/HowItWorks.tsx (1)

web/src/components/ui/card.tsx (2)

• Card (80-80)
• CardContent (85-85)

web/src/typechain-types/VouchMe.ts (1)

web/src/typechain-types/common.ts (1)

• TypedContractMethod (107-131)

🔇 Additional comments (14)

web/src/components/Navbar.tsx (1)

20-20: State addition LGTM.

isScrolled is the right shape for a threshold toggle.

web/src/app/dashboard/page.tsx (1)

85-90: Good extraction of share-copy strings.

Centralizing these reduces duplication.

contracts/broadcast/DeployVouchMe.s.sol/534351/run-1757402841.json (1)

7-8: Address alignment verified
Contract address 0x344fe9f4bee36dadd4b584be8e9a968b1515d291 for chain 534351 matches the mapping in web/src/utils/contract.ts and the broadcast JSON; no conflicting .env or deploy config entries found.

contracts/broadcast/DeployVouchMe.s.sol/534351/run-latest.json (1)

4-15: Verify contract address, ABI/types alignment, and remove stale refs

• Frontend should map chain 534351 to new address 0x344fe9f4bee36dadd4b584be8e9a968b1515d291
• Ensure TypeChain/ABI in web/src/typechain-types and JSON ABIs include the new getters (getTotalProfiles, getTotalTestimonials, etc.)
• Search the repo for any old address (0x270fa4703280ee537574358deeaf62238cad24b7) and remove or update stale references

web/src/typechain-types/factories/VouchMe__factory.ts (1)

222-247: App exclusively calls getTotalProfiles/getTotalTestimonials; undefined results fallback to 0 for older deployments

web/src/components/LandingPage/FeaturesSection.tsx (1)

32-36: Landing section refresh — LGTM

Section structure, theming, and layout changes look clean and consistent with the updated design system.

web/src/utils/contract.ts (1)

4-4: Resolved: Contract address and ABI getters confirmed
getCode returns bytecode (0x6080806040526004) at 0x344fe9f4bee36dadd4b584be8e9a968b1515d291 on Scroll Sepolia (chain 534351), and typechain definitions expose both getTotalProfiles and getTotalTestimonials getters.

web/src/typechain-types/VouchMe.ts (7)

132-139: encodeFunctionData overloads for getTotal — OK.*

No inputs expected; signatures align with view functions returning uint256.

---

178-185: encodeFunctionData overloads for total — OK.*

Matches public variable getters with no args.

---

221-228: decodeFunctionResult for getTotal — OK.*

Decoders added and aligned with encoders.

---

258-265: decodeFunctionResult for total — OK.*

Consistent with ABI expectations.

---

650-656: getFunction overloads for getTotal — OK.*

Overloads resolve correctly; no name collisions.

---

718-724: getFunction overloads for total — OK.*

Consistent with other overloads.

---

67-82: Approve selector additions
Verified that getTotalProfiles, getTotalTestimonials, totalProfiles, and totalTestimonials are present in VouchMe__factory.ts and used in useContractStats.ts.

[coderabbitai]

💡 Verification agent

🧩 Analysis chain

Framer Motion upgrade: verify peer-compat and duplication with motion.

With React 19/Next 15, confirm framer-motion@^12.23.12 plays nicely and whether both framer-motion and motion are needed. If only one is used, drop the other to avoid bloat.

Run:

---

🏁 Script executed:

#!/bin/bash
# Check imports
rg -nP --glob 'web/src/**' -C2 'from\s+[\'"]framer-motion|from\s+[\'"]motion'

# Quick peer check (local)
node -e 'const p=require("./web/package.json");console.log({react:p.dependencies.react,next:p.dependencies.next,framer:p.dependencies["framer-motion"],motion:p.dependencies.motion})'

Length of output: 269

---

🏁 Script executed:

#!/usr/bin/env bash
# Search for imports of framer-motion and motion in the web/src tree
rg -nP --glob 'web/src/**/*.{js,jsx,ts,tsx}' -n -C2 "from\s+['\"](framer-motion|motion)['\"]"

# List local versions of React, Next, framer-motion, and motion (if present)
echo "Local dependencies:"
jq -r '.dependencies | to_entries[] | "\(.key): \(.value)"' web/package.json

# Show peerDependencies for [email protected]
echo "[email protected] peerDependencies:"
npm view [email protected] peerDependencies --json

Length of output: 1299

---

Remove unused motion dependency
All components import from framer-motion, never the standalone motion package, and [email protected]’s peerDependencies (react@^18||^19, react-dom@^18||^19) are already satisfied. Drop "motion": "^12.4.7" from web/package.json.

🤖 Prompt for AI Agents

In web/package.json at line 24, remove the unused "motion": "^12.4.7" dependency
from the dependencies list; update the package.json by deleting that entry and
then run a package manager cleanup (npm/yarn pnpm install or npm prune) and
lockfile update to ensure the dependency is removed from node_modules and the
lockfile.

[coderabbitai]

🛠️ Refactor suggestion

Guard undefined wallet address in Showcase navigation.

When disconnected, address is undefined and the route becomes /testimonials?address=undefined. Provide a sane fallback.

   const { address } = useAccount();
+  const showcasePath = address ? `/testimonials?address=${address}` : "/testimonials";

-            <button
-              onClick={() => router.push(`/testimonials?address=${address}`)}
+            <button
+              onClick={() => router.push(showcasePath)}

Also applies to: 82-84

🤖 Prompt for AI Agents

In web/src/components/LandingPage/HeroSection.tsx around lines 10-11 (and also
apply same change at lines 82-84), the wallet address from useAccount() can be
undefined which results in routes like /testimonials?address=undefined; update
the navigation to guard the address by either using a sane fallback (e.g., empty
string) or, better, conditionally include the ?address=... query only when
address is truthy. Ensure you build the URL without the query param when address
is undefined or null so navigation becomes /testimonials (or
/testimonials?address=<shortenedAddress>) instead of containing "undefined".

[coderabbitai]

🛠️ Refactor suggestion

Fix nested interactive regions; add keyboard support.

Step 1 card is clickable and its inner code block is also clickable; this is redundant and can confuse users. Also add role/tabIndex + keydown handler for keyboard activation.

-        <div
-          className="mt-4 bg-gray-800/50 border border-gray-700/50 rounded-lg p-3 cursor-pointer hover:bg-gray-800/70 transition-colors"
-          onClick={() => router.push("/dashboard")}
-        >
+        <div
+          className="mt-4 bg-gray-800/50 border border-gray-700/50 rounded-lg p-3 hover:bg-gray-800/70 transition-colors"
+        >

-            <div
+            <div
               key={index}
-              className="relative transition-all duration-1000"
-              style={{
-                transitionDelay: `${index * 150}ms`,
-                cursor: index === 0 ? "pointer" : "default",
-              }}
-              onClick={
-                index === 0 ? () => router.push("/dashboard") : undefined
-              }
+              className={`relative transition-all duration-1000 ${index === 0 ? "cursor-pointer" : ""}`}
+              style={{ transitionDelay: `${index * 150}ms` }}
+              onClick={index === 0 ? () => router.push("/dashboard") : undefined}
+              role={index === 0 ? "button" : undefined}
+              tabIndex={index === 0 ? 0 : undefined}
+              onKeyDown={
+                index === 0
+                  ? (e) => {
+                      if (e.key === "Enter" || e.key === " ") router.push("/dashboard");
+                    }
+                  : undefined
+              }
             >

Also applies to: 91-98

🤖 Prompt for AI Agents

In web/src/components/LandingPage/HowItWorks.tsx around lines 20-21 and 91-98,
the Step card has nested clickable regions and lacks keyboard support; remove
the clickable behavior from the inner code block (or replace its onClick with a
non-interactive element / stopPropagation) so only the outer card handles
activation, then add accessible keyboard support and semantics to the outer card
by giving it role="button", tabIndex={0}, and an onKeyDown handler that triggers
the same navigation on Enter and Space; ensure the inner code block has no
role="button" or onClick so it is non-interactive and update tests/types if
needed.

[coderabbitai]

⚠️ Potential issue

Cancel requestAnimationFrame and timer on unmount to prevent leaks and React warnings

requestAnimationFrame isn’t canceled; unmounts can trigger setState on an unmounted component. Track and cancel the RAF in cleanup.

   useEffect(() => {
     if (isInView && !hasStarted) {
       const timer = setTimeout(() => {
         setHasStarted(true);

         const startTime = Date.now();
         const endTime = startTime + duration;

         const updateCount = () => {
           const now = Date.now();
           const progress = Math.min((now - startTime) / duration, 1);

           const currentCount = Math.floor(progress * value);
           setCount(currentCount);

           if (now < endTime) {
-            requestAnimationFrame(updateCount);
+            rafId.current = requestAnimationFrame(updateCount);
           } else {
             setCount(value);
           }
         };

         updateCount();
       }, delay);

-      return () => clearTimeout(timer);
+      return () => {
+        clearTimeout(timer);
+        if (rafId.current != null) {
+          cancelAnimationFrame(rafId.current);
+          rafId.current = null;
+        }
+      };
     }
   }, [isInView, hasStarted, value, duration, delay]);

Additionally, add the ref declaration:

   const ref = useRef(null);
   const isInView = useInView(ref, { once: true });
+  const rafId = useRef<number | null>(null);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	useEffect(() => {
	if (isInView && !hasStarted) {
	const timer = setTimeout(() => {
	setHasStarted(true);
	const startTime = Date.now();
	const endTime = startTime + duration;
	const updateCount = () => {
	const now = Date.now();
	const progress = Math.min((now - startTime) / duration, 1);
	const currentCount = Math.floor(progress * value);
	setCount(currentCount);
	if (now < endTime) {
	requestAnimationFrame(updateCount);
	} else {
	setCount(value);
	}
	};
	updateCount();
	}, delay);
	return () => clearTimeout(timer);
	}
	}, [isInView, hasStarted, value, duration, delay]);
	const ref = useRef(null);
	const isInView = useInView(ref, { once: true });
	const rafId = useRef<number | null>(null);
	useEffect(() => {
	if (isInView && !hasStarted) {
	const timer = setTimeout(() => {
	setHasStarted(true);
	const startTime = Date.now();
	const endTime = startTime + duration;
	const updateCount = () => {
	const now = Date.now();
	const progress = Math.min((now - startTime) / duration, 1);
	const currentCount = Math.floor(progress * value);
	setCount(currentCount);
	if (now < endTime) {
	rafId.current = requestAnimationFrame(updateCount);
	} else {
	setCount(value);
	}
	};
	updateCount();
	}, delay);
	return () => {
	clearTimeout(timer);
	if (rafId.current != null) {
	cancelAnimationFrame(rafId.current);
	rafId.current = null;
	}
	};
	}
	}, [isInView, hasStarted, value, duration, delay]);

🤖 Prompt for AI Agents

In web/src/components/ui/count-up.tsx around lines 25 to 53, the effect starts a
setTimeout and uses requestAnimationFrame but does not cancel the RAF or ensure
the timeout/RAF stop on unmount, and the reviewer also requested adding the
missing ref declaration; update the effect to store the timeout id and the raf
id in refs (e.g., timeoutRef and rafRef), cancel the timeout and call
cancelAnimationFrame for the stored raf id in the cleanup, ensure any
in-progress updateCount checks the mounted state or existence of rafRef before
calling setCount, and add the requested ref declaration for these refs at the
top of the component so both timer and RAF are cleared to prevent state updates
after unmount.

[coderabbitai]

🛠️ Refactor suggestion

Update count when value changes after the initial animation

If value changes later (e.g., after RPC resolves), the component doesn’t reflect it. Set the final value when already started and in view.

-  return (
+  useEffect(() => {
+    if (hasStarted && isInView) setCount(value);
+  }, [value, hasStarted, isInView]);
+
+  return (

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	return (
	<span ref={ref} className={className}>
	{count.toLocaleString()}
	useEffect(() => {
	if (hasStarted && isInView) setCount(value);
	}, [value, hasStarted, isInView]);
	return (
	<span ref={ref} className={className}>
	{count.toLocaleString()}

🤖 Prompt for AI Agents

In web/src/components/ui/count-up.tsx around lines 53 to 56, the component only
animates on first mount and doesn’t update when the value prop changes later; to
fix, add an effect that watches value (and the in-view/started flags) and if the
animation has already started and the element is in view, set the final
displayed count to the new value (or restart the animation) by updating the
internal state/ref that drives the count; ensure this effect uses the same
formatting and uses toLocaleString when updating the displayed count so
RPC-delivered updates are reflected immediately.

[coderabbitai]

⚠️ Potential issue

Guard against undefined contract address and bind to the active chain to prevent runtime errors

CONTRACT_ADDRESSES[chainId] can be undefined; casting it to 0x${string} and calling the contract will error. Also, explicitly binding chainId and gating the query avoids accidental calls on the wrong network.

Apply this diff:

   const chainId = useChainId();
   const contractAddress = CONTRACT_ADDRESSES[chainId];
+  const enabled = Boolean(contractAddress);

   const { data: totalProfiles } = useReadContract({
-    address: contractAddress as `0x${string}`,
+    address: contractAddress as `0x${string}`,
     abi: VouchMeABI.abi,
     functionName: "getTotalProfiles",
+    chainId,
+    query: { enabled },
   });

   const { data: totalTestimonials } = useReadContract({
-    address: contractAddress as `0x${string}`,
+    address: contractAddress as `0x${string}`,
     abi: VouchMeABI.abi,
     functionName: "getTotalTestimonials",
+    chainId,
+    query: { enabled },
   });

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	const contractAddress = CONTRACT_ADDRESSES[chainId];
	const { data: totalProfiles } = useReadContract({
	address: contractAddress as `0x${string}`,
	abi: VouchMeABI.abi,
	functionName: "getTotalProfiles",
	});
	const { data: totalTestimonials } = useReadContract({
	address: contractAddress as `0x${string}`,
	abi: VouchMeABI.abi,
	functionName: "getTotalTestimonials",
	});
	const chainId = useChainId();
	const contractAddress = CONTRACT_ADDRESSES[chainId];
	const enabled = Boolean(contractAddress);
	const { data: totalProfiles } = useReadContract({
	address: contractAddress as `0x${string}`,
	abi: VouchMeABI.abi,
	functionName: "getTotalProfiles",
	chainId,
	query: { enabled },
	});
	const { data: totalTestimonials } = useReadContract({
	address: contractAddress as `0x${string}`,
	abi: VouchMeABI.abi,
	functionName: "getTotalTestimonials",
	chainId,
	query: { enabled },
	});

🤖 Prompt for AI Agents

In web/src/hooks/useContractStats.ts around lines 15 to 27, guard against
CONTRACT_ADDRESSES[chainId] being undefined and bind reads to the active chain:
first resolve const contractAddress = CONTRACT_ADDRESSES[chainId]; then pass
that address only when defined (use a boolean enabled flag like enabled:
!!contractAddress) to both useReadContract calls, include the chainId option on
each useReadContract to bind the query to the active chain, and avoid casting an
undefined value to `0x${string}` so the hook never attempts to call the contract
if contractAddress is missing.

[coderabbitai]

💡 Verification agent

🧩 Analysis chain

Bytecode bump — confirm it matches the deployed address

Since bytecode changed, verify the deployed contract at the updated address matches this build (same compiler/metadata). This prevents interface/bytecode drift at runtime.

---

🏁 Script executed:

#!/bin/bash
# Quick sanity: check code present at the Scroll Sepolia address
# (Replace RPC if you use a different endpoint)
ADDR="0x344fe9f4bee36dadd4b584be8e9a968b1515d291"
curl -s -X POST https://sepolia-rpc.scroll.io \
  -H 'content-type: application/json' \
  --data "{\"jsonrpc\":\"2.0\",\"id\":1,\"method\":\"eth_getCode\",\"params\":[\"$ADDR\",\"latest\"]}" | jq -r '.result' | awk '{print (length>4?"OK: bytecode present":"ERR: empty code") }'

Length of output: 20

---

🏁 Script executed:

#!/bin/bash
set -e

# Path to the factory file
FILE="web/src/typechain-types/factories/VouchMe__factory.ts"

# Extract the expected bytecode from the source
EXPECTED=$(sed -n -E 's/const _bytecode *= *"?(0x[0-9a-f]+)"?;?/\1/p' "$FILE")

# Deployed contract address on Scroll Sepolia
ADDR="0x344fe9f4bee36dadd4b584be8e9a968b1515d291"

# Fetch on‐chain bytecode
DEPLOYED=$(curl -s -X POST https://sepolia-rpc.scroll.io \
  -H 'content-type: application/json' \
  --data "{\"jsonrpc\":\"2.0\",\"id\":1,\"method\":\"eth_getCode\",\"params\":[\"$ADDR\",\"latest\"]}" \
  | jq -r '.result')

# Compare
if [ "$EXPECTED" = "$DEPLOYED" ]; then
  echo "OK: deployed bytecode matches the build"
else
  echo "ERR: deployed bytecode differs from the build"
fi

Length of output: 96

---

🏁 Script executed:

#!/bin/bash
set -e

# Locate the generated factory file
FILE=$(find . -type f -name 'VouchMe__factory.ts' | head -n1)
echo "Factory file: $FILE"

# Extract the first hex literal (the bytecode) from the file
EXPECTED=$(grep -o '0x[0-9a-f]\+' "$FILE" | head -n1)
echo "Expected bytecode prefix: ${EXPECTED:0:20}… (length ${#EXPECTED})"

# Fetch on‐chain bytecode from Scroll Sepolia
ADDR="0x344fe9f4bee36dadd4b584be8e9a968b1515d291"
DEPLOYED=$(curl -s -X POST https://sepolia-rpc.scroll.io \
  -H 'content-type: application/json' \
  --data "{\"jsonrpc\":\"2.0\",\"id\":1,\"method\":\"eth_getCode\",\"params\":[\"$ADDR\",\"latest\"]}" \
  | jq -r '.result')
echo "Deployed bytecode prefix: ${DEPLOYED:0:20}… (length ${#DEPLOYED})"

# Compare
if [ "$EXPECTED" = "$DEPLOYED" ]; then
  echo "OK: deployed bytecode matches this build"
else
  echo "ERR: deployed bytecode differs from this build"
  exit 1
fi

Length of output: 242

---

Bytecode mismatch: on-chain code at 0x344fe9f4bee36dadd4b584be8e9a968b1515d291 differs from the compiled _bytecode in web/src/typechain-types/factories/VouchMe__factory.ts (expected prefix 0x60806040523461033a…, got 0x608080604052600436…). Confirm the correct deployed address or re-deploy so the build’s bytecode matches runtime.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

web/src/utils/contract.ts (1)

4-6: Verified deployment addresses. Both entries match the latest artifacts:
– Scroll Sepolia (534351): 0x344fe9f4bee36dadd4b584be8e9a968b1515d291
– Ethereum Classic (61): 0xf01b3744cc6bdc115bf4a154a0041bce3251a932

Optional: normalize the Scroll Sepolia address to EIP-55 checksum for consistency:

- 534351: "0x344fe9f4bee36dadd4b584be8e9a968b1515d291"
+ 534351: "0x344Fe9F4bEE36DAdD4b584BE8E9a968B1515D291"

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f3b124e and c5ab599.

⛔ Files ignored due to path filters (1)

• web/public/stability.svg is excluded by !**/*.svg

📒 Files selected for processing (4)

• README.md (3 hunks)
• contracts/broadcast/DeployVouchMe.s.sol/61/run-1759575443.json (1 hunks)
• contracts/broadcast/DeployVouchMe.s.sol/61/run-latest.json (2 hunks)
• web/src/utils/contract.ts (1 hunks)

✅ Files skipped from review due to trivial changes (1)

• contracts/broadcast/DeployVouchMe.s.sol/61/run-1759575443.json

🧰 Additional context used

🪛 markdownlint-cli2 (0.18.1)

README.md

6-6: Images should have alternate text (alt text)

(MD045, no-alt-text)

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Add alt text for the secondary logo image.

Line 6 renders an <img> without an alt attribute, tripping markdownlint MD045 and breaking screen-reader accessibility. Please add a meaningful alt (or alt="" if it’s purely decorative).

-  <img src="public/todo-project-logo.svg" width="175" />
+  <img alt="VouchMe logo" src="public/todo-project-logo.svg" width="175" />

Based on static analysis hints.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<div align="center" style="display: flex; align-items: center; justify-content: center; gap: 16px;">
	<img alt="Stability Nexus" src="web/public/stability.svg" width="175">
	<img src="public/todo-project-logo.svg" width="175" />
	</div>
	<div align="center" style="display: flex; align-items: center; justify-content: center; gap: 16px;">
	<img alt="Stability Nexus" src="web/public/stability.svg" width="175">
	<img alt="VouchMe logo" src="public/todo-project-logo.svg" width="175" />
	</div>

🧰 Tools

🪛 markdownlint-cli2 (0.18.1)

6-6: Images should have alternate text (alt text)

(MD045, no-alt-text)

🤖 Prompt for AI Agents

In README.md around lines 4 to 7 the second <img> tag lacks an alt attribute
causing markdownlint MD045 and accessibility issues; add an appropriate alt
attribute to the second image (e.g., alt="Todo Project logo") or use alt="" if
the graphic is purely decorative, ensuring the tag matches the existing
style/width attributes.