fix: linting and code quality issues

Author: dhl

src/app/components/Graphics/CrosshairCorners.tsx

@@ -1,6 +1,6 @@
 "use client";
 import classNames from "classnames";
-import { anticipate, motion } from "motion/react";
+import { motion } from "motion/react";
 
 export default function CrosshairCorners({
   size = 10,
@@ -45,7 +45,7 @@ export default function CrosshairCorners({
       }}
       transition={{
         duration: animationDuration,
-        ease: anticipate,
+        ease: "anticipate",
         delay: baseDelay,
       }}
       style={

src/app/components/Header/Header.tsx

@@ -23,7 +23,7 @@ export default function HeaderContent() {
   const t = useTranslations();
   const currentLocale = useLocale();
   const { locales } = routing;
-  const { marketingBannerViewed, setMarketingBannerViewed, _hasHydrated } =
+  const { marketingBannerViewed, _hasHydrated } =
     usePersistentStore();
 
   const router = useRouter();
@@ -199,7 +199,7 @@ export default function HeaderContent() {
                   <motion.div
                     className="before:absolute before:-left-36 before:top-0 before:w-36 before:h-full before:bg-gradient-to-r before:from-transparent before:to-background before:z-10 justify-between left-0 flex md:hidden absolute w-full h-full z-10 bg-background py-3 px-4"
                     initial={{ x: "100dvw" }}
-                    animate={{ x: isOpen ? 0 : "0dvw" }}
+                    animate={{ x: 0 }}
                     exit={{ x: "100dvw" }}
                     transition={{ duration: 0.15, easing: anticipate }}
                   >

src/app/components/Icon/icons/DepletingHeart.tsx

@@ -1,5 +1,4 @@
-import { anticipate } from "motion";
-import { motion } from "motion/react";
+import { anticipate, motion } from "motion/react";
 
 export default function DepletingHeart({
   closeHeart = false,

src/app/components/MarketingBanner/MarketingBanner.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { AnimatePresence, anticipate, easeInOut, motion } from "motion/react";
+import { AnimatePresence, anticipate, motion } from "motion/react";
 import CrosshairCorners from "../Graphics/CrosshairCorners";
 import { useTranslations } from "next-intl";
 import Icon from "../Icon/Icon";
@@ -50,6 +50,7 @@ export default function MarketingBanner() {
                 <a
                   href={process.env.NEXT_PUBLIC_STAKING_URL}
                   target="_blank"
+                  rel="noopener noreferrer"
                   className="text-brand-primary underline"
                 >
                   staking
@@ -75,7 +76,7 @@ export default function MarketingBanner() {
           </motion.div>
           <button
             onClick={() => handleCloseBanner()}
-            className="z-10 text-brand-secondary transition hover:text-brand-primary hover:cursor-pointer h-[32px] w-[32px] flex items-center justify-center absolute right-3 top-1/2 -translate-y-1/2 bg-background/60 sm:bg-transparent hover:bg-background/60 transition"
+            className="z-10 text-brand-secondary transition hover:text-brand-primary hover:cursor-pointer h-[32px] w-[32px] flex items-center justify-center absolute right-3 top-1/2 -translate-y-1/2 bg-background/60 sm:bg-transparent hover:bg-background/60"
           >
             <Icon name="Close" size={16 as 18} />
           </button>

src/stores/store.ts

@@ -128,7 +128,7 @@ const migrate = (
 
 export const usePersistentStore = create<PersistentStore>()(
   persist(
-    (set, get) => ({
+    (set) => ({
       // User's View Preference
       view: "grid",
       setView: (view) => set({ view }),