feat: apply useImageTheme for showing active network and dropdown

techemmy · Nov 5, 2024 · 10b9c03 · 10b9c03
1 parent 147d3a6
commit 10b9c03
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 8 deletions.
diff --git a/public/images/zksync_white.png b/public/images/zksync_white.png
diff --git a/src/components/NavbarLarge.tsx b/src/components/NavbarLarge.tsx
@@ -35,10 +35,12 @@ import { ListItem, ListItemsContainer } from "@/components/NavDropdown";
 import { PiCodesandboxLogoBold } from "react-icons/pi";
 import { FaEthereum } from "react-icons/fa";
 import { useActiveNetwork } from "@/context/ActiveNetworkContext";
+import useImageTheme from "@/hooks/useImageTheme";
 
 export default function NavbarLarge() {
   const [activeNetwork] = useActiveNetwork();
   const [settingsIsVisible, setSettingsIsVisible] = useState(false);
+  const logoTheme = useImageTheme();
 
   return (
     <nav className="hidden lg:flex fixed left-0 right-0 justify-between mx-12 my-2 bg-card/85 px-4 rounded-3xl shadow-md">
@@ -240,7 +242,7 @@ export default function NavbarLarge() {
             <NavigationMenuTrigger className="bg-transparent">
               <img
                 className="w-5"
-                src={activeNetwork.logoUrl}
+                src={activeNetwork.logoUrl[logoTheme]}
                 alt={`${activeNetwork.name} logo`}
               />
             </NavigationMenuTrigger>

diff --git a/src/components/SelectNetwork/NetworkItem.tsx b/src/components/SelectNetwork/NetworkItem.tsx
@@ -1,3 +1,4 @@
+import useImageTheme from "@/hooks/useImageTheme";
 import { AppContextType, NetworkType } from "@/types";
 import { MdCheckCircleOutline } from "react-icons/md";
 
@@ -11,6 +12,7 @@ export default function NetworkItem({
   setActiveNetwork,
   className = "",
 }: Props) {
+  const logoTheme = useImageTheme();
   return (
     <li
       key={network.name}
@@ -20,7 +22,7 @@ export default function NetworkItem({
       <div className="flex gap-x-3 items-center">
         <img
           className="w-5"
-          src={network.logoUrl}
+          src={network.logoUrl[logoTheme]}
           alt={`${network.name} logo`}
         />
         <p className="text-primary-foreground">{network.name}</p>

diff --git a/src/components/SelectNetwork/SelectNetworkNavContent.tsx b/src/components/SelectNetwork/SelectNetworkNavContent.tsx
@@ -9,13 +9,15 @@ import { MdArrowOutward, MdKeyboardArrowDown } from "react-icons/md";
 import { NetworkType } from "@/types";
 import NetworkItem from "./NetworkItem";
 import { useActiveNetwork } from "@/context/ActiveNetworkContext";
+import useImageTheme from "@/hooks/useImageTheme";
 
 interface Props {
   className?: string;
 }
 
 export default function SelectNetworkNavContent({ className }: Props) {
   const [activeNetwork, setActiveNetwork] = useActiveNetwork();
+  const logoTheme = useImageTheme();
   return (
     <ul
       className={`bg-card grid w-[230px] p-3 px-4 rounded-2xl shadow ${className} `}
@@ -68,15 +70,19 @@ export default function SelectNetworkNavContent({ className }: Props) {
             <div className="flex gap-x-2 items-center">
               <img
                 className="w-5"
-                src="/images/zksync_black.png"
+                src={AVAILABLE_NETWORKS.zkSync.logoUrl[logoTheme]}
                 alt="Zksync black logo"
               />
               <p className="text-medium">zkSync Sepolia</p>
             </div>
           </li>
           <li className="cursor-pointer flex items-center justify-between w-full block select-none rounded-lg p-2 leading-none">
             <div className="flex gap-x-3 items-center">
-              <img className="w-5" src="/images/linea.png" alt="Linea logo" />
+              <img
+                className="w-5"
+                src={AVAILABLE_NETWORKS.Linea.logoUrl[logoTheme]}
+                alt="Linea logo"
+              />
               <p className="text-medium">Linea Goerli</p>
             </div>
           </li>

diff --git a/src/constants.ts b/src/constants.ts
@@ -3,15 +3,18 @@ import { AreaData } from "lightweight-charts";
 export const AVAILABLE_NETWORKS = {
   zkSync: {
     name: "zkSync",
-    logoUrl: "/images/zksync_black.png",
+    logoUrl: {
+      dark: "/images/zksync_black.png",
+      light: "/images/zksync_white.png",
+    },
   },
   Linea: {
     name: "Linea",
-    logoUrl: "/images/linea.png",
+    logoUrl: { light: "/images/linea.png", dark: "/images/linea.png" },
   },
   Scroll: {
     name: "Scroll",
-    logoUrl: "/images/scroll.svg",
+    logoUrl: { light: "/images/scroll.svg", dark: "/images/scroll.svg" },
   },
 };
 

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -2,7 +2,7 @@ import React, { SetStateAction } from "react";
 
 export interface NetworkType {
   name: string;
-  logoUrl: string;
+  logoUrl: { light: string; dark: string };
 }
 
 export interface AppContextType {