Merge pull request #135 from sanjam4747/fix/icons

Fix/icons

Author: DengreSarthak

src/lib/components/layout/BottomNavbar.tsx

@@ -2,9 +2,11 @@ import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils/utils";
+import { resolveAssetPath } from "@/lib/utils/asset-path";
 import { useMediaQuery } from "usehooks-ts";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
 
 const socialLinks = [
   {
@@ -36,6 +38,7 @@ const socialLinks = [
 export function BottomNavbar() {
   const isMobile = useMediaQuery("(max-width: 768px)");
   const pathname = usePathname();
+  const router = useRouter();
   const { theme, systemTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
 
@@ -47,7 +50,7 @@ export function BottomNavbar() {
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="flex justify-center space-x-6 py-4">
             {socialLinks.map(({ href, label, iconLight, iconDark }) => {
-              let iconSrc = "/logo/default.svg";
+              let iconSrc = iconLight;
 
               if (mounted) {
                 const currentTheme = theme === "system" ? systemTheme : theme;
@@ -63,7 +66,7 @@ export function BottomNavbar() {
                   className="flex h-8 w-8 items-center justify-center transition-colors hover:text-primary"
                   aria-label={label}
                 >
-                  <Image src={iconSrc} alt={label} width={24} height={24} className="h-6 w-6 object-contain" />
+                  <Image src={resolveAssetPath(iconSrc, router.basePath)} alt={label} width={24} height={24} className="h-6 w-6 object-contain" />
                 </Link>
               );
             })}

src/lib/components/layout/TopNavbar.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/lib/components/ui/button";
 import { useMediaQuery } from "usehooks-ts";
 import { ThemeToggle } from "../toggle/ThemeToggle";
 import { cn } from "@/lib/utils/utils";
+import { resolveAssetPath } from "@/lib/utils/asset-path";
 import { useRouter } from "next/router";
 import { WalletConnector } from "../blockchain/connector/WalletConnector";
 import { useTheme } from "next-themes";
@@ -25,7 +26,6 @@ const navItems = [
 export function TopNavbar() {
   const isDesktop = useMediaQuery("(min-width: 768px)");
   const pathname = usePathname();
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const router = useRouter();
   const { theme } = useTheme();
 
@@ -50,12 +50,12 @@ export function TopNavbar() {
 
   return (
     <div className="w-full shadow-sm backdrop-blur-xl dark:shadow-lg">
-      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <div className="w-full px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between py-4">
           {/* Left - Logo */}
           <div className="flex items-center">
             <Link href="/" className="flex items-center">
-              <Image src={tokenConfig.favicon} alt="Gluon Logo" width={28} height={28} priority />
+              <Image src={resolveAssetPath(tokenConfig.favicon, router.basePath)} alt="Gluon Logo" width={28} height={28} priority />
               {isDesktop && <p className="ml-2 font-sans text-2xl font-medium">{tokenConfig.protocolName}</p>}
             </Link>
           </div>

src/lib/utils/asset-path.ts

@@ -0,0 +1,12 @@
+export const resolveAssetPath = (path: string, basePath?: string): string => {
+  if (!path || path.startsWith("http://") || path.startsWith("https://")) {
+    return path;
+  }
+
+  const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+  if (basePath && (normalizedPath === basePath || normalizedPath.startsWith(`${basePath}/`))) {
+    return normalizedPath;
+  }
+
+  return `${basePath ?? ""}${normalizedPath}`;
+};