Add browser-specific extension links with client-side detection

src/components/home/CTASection.tsx

@@ -4,10 +4,13 @@ import Image from "next/image";
 import { motion } from "framer-motion";
 import { fadeSlideUp, EASE_OUT } from "@/lib/animations";
 import { LINKS } from "@/lib/constants";
+import { useExtensionLink } from "@/lib/use-extension-link";
 import { DownloadBold } from "@/components/ui/PhosphorIcons";
 import { IridescenceBackground } from "@/components/ui/IridescenceBackground";
 
 export function CTASection() {
+  const extensionLink = useExtensionLink();
+
   return (
     <section>
       <div className="max-w-[1024px] mx-auto px-6">
@@ -88,7 +91,7 @@ export function CTASection() {
                   </a>
                 </div>
                 <a
-                  href={LINKS.chromeExtension}
+                  href={extensionLink}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="inline-flex w-[calc((100%-0.75rem)/2)] items-center justify-center gap-1 self-center whitespace-nowrap rounded-full bg-white/10 px-6 py-3 text-sm font-medium text-white backdrop-blur-md transition duration-300 ease-out hover:bg-white/20"

src/components/home/DownloadCards.tsx

@@ -4,11 +4,14 @@ import { motion } from "framer-motion";
 import { fadeSlideUp } from "@/lib/animations";
 import { RoundedQR } from "@/components/ui/RoundedQR";
 import { LINKS } from "@/lib/constants";
+import { useExtensionLink } from "@/lib/use-extension-link";
 import Image from "next/image";
 import { AppleLogoFill, AndroidLogoFill } from "@/components/ui/PhosphorIcons";
 import { IridescenceBackground } from "@/components/ui/IridescenceBackground";
 
 export function DownloadCards() {
+  const extensionLink = useExtensionLink();
+
   return (
     <section id="download" className="scroll-mt-[72px]">
       <div className="max-w-[1024px] mx-auto px-6">
@@ -60,7 +63,7 @@ export function DownloadCards() {
               For browser
             </h3>
             <a
-              href={LINKS.chromeExtension}
+              href={extensionLink}
               target="_blank"
               rel="noopener noreferrer"
               className="inline-flex items-center gap-1.5 px-6 py-3 text-sm font-medium text-white bg-white/10 backdrop-blur-md rounded-full hover:bg-white/20 transition duration-300 ease-out mt-auto self-start relative z-10"

src/components/layout/Navbar.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { motion } from "framer-motion";
 import { EASE_OUT } from "@/lib/animations";
 import { LINKS } from "@/lib/constants";
+import { useExtensionLink } from "@/lib/use-extension-link";
 
 const NAV_LINKS = [
   { label: "Docs", href: LINKS.docs, external: true },
@@ -14,6 +15,8 @@ const NAV_LINKS = [
 ] as const;
 
 export function Navbar() {
+  const extensionLink = useExtensionLink();
+
   return (
     <motion.nav
       initial={{ opacity: 0, y: -16 }}
@@ -49,7 +52,7 @@ export function Navbar() {
         </div>
 
         <a
-          href={LINKS.chromeExtension}
+          href={extensionLink}
           target="_blank"
           rel="noopener noreferrer"
           className="inline-flex min-h-11 items-center justify-center rounded-full bg-[#e8e8e8] px-4 py-2 text-base font-semibold text-[#171717] transition-colors duration-200 hover:bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white/70"

src/lib/constants.ts

@@ -12,7 +12,7 @@ export const SITE = {
 export const LINKS = {
   chromeExtension:
     "https://chromewebstore.google.com/detail/freighter/bcacfldlkkdogcmkkibnjlakofdplcbk",
-  firefoxExtension: "#",
+  firefoxExtension: "https://addons.mozilla.org/firefox/addon/freighter/",
   iosApp: "https://apps.apple.com/us/app/freighter/id6743947720",
   androidApp: "https://play.google.com/store/apps/details?id=org.stellar.freighterwallet",
   stellarExpert: "https://stellar.expert",

src/lib/use-extension-link.ts

@@ -0,0 +1,22 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import { LINKS } from "@/lib/constants";
+
+// The browser never changes during a session, so there is nothing to subscribe to.
+const subscribe = () => () => {};
+
+const getClientSnapshot = () =>
+  /firefox|fxios/i.test(navigator.userAgent)
+    ? LINKS.firefoxExtension
+    : LINKS.chromeExtension;
+
+// Static export has no user agent at build time, so pre-render with the
+// Chrome Web Store link (it also serves Brave, Edge, Opera, etc.) and swap
+// to the right store after hydration.
+const getServerSnapshot = () => LINKS.chromeExtension;
+
+/** Store link for the Freighter extension matching the visitor's browser. */
+export function useExtensionLink() {
+  return useSyncExternalStore(subscribe, getClientSnapshot, getServerSnapshot);
+}