blonk image

z-korp · Nov 13, 2024 · 97bec70 · 97bec70
1 parent d6113bc
commit 97bec70
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/client/src/ui/components/HeaderNftBalance.tsx b/client/src/ui/components/HeaderNftBalance.tsx
@@ -1,19 +1,22 @@
 import useAccountCustom from "@/hooks/useAccountCustom";
-import React from "react";
+import React, { useMemo } from "react";
 import { useNftBalance } from "@/hooks/useNftBalance";
 import NftZKUBE from "/assets/nft-zkube.png";
 
 const HeaderNftBalance = React.memo(() => {
   const { account } = useAccountCustom();
 
   const { balance } = useNftBalance(account?.address ? account.address : "");
+  const memoizedImage = useMemo(
+    () => <img src={NftZKUBE} alt="ZKUBE" className="ml-1 h-8 w-8" />,
+    [],
+  );
 
   if (account) {
     return (
       <span className="text-xs font-semibold md:font-normal flex items-center">
         {/*`${balance} Game${balance > 1 ? "s" : ""}`*/}
-        {`${balance}`}{" "}
-        <img src={NftZKUBE} alt="ZKUBE" className="ml-1 h-8 w-8" />
+        {`${balance}`} {memoizedImage}
       </span>
     );
   }