refactor: improve code consistency by standardizing quotation marks and enhancing state management in various components

Author: rodrigooler

apps/torus-governance/src/app/(expanded-pages)/proposal/[id]/_components/proposal-expanded-view.tsx

@@ -15,7 +15,7 @@ import { VoteData } from "~/app/_components/vote-data";
 import { useGovernance } from "~/context/governance-provider";
 import type { VoteStatus } from "~/utils/types";
 import { LoaderCircle } from "lucide-react";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { ProposalStatusLabel } from "../../../../_components/proposal/proposal-status-label";
 import { handleCustomProposal } from "../../../../../utils";
 
@@ -58,7 +58,7 @@ export function ProposalExpandedView(props: Readonly<CustomContent>) {
     selectedAccount,
     torusCacheUrl,
   } = useGovernance();
-  
+
   const [isMobile, setIsMobile] = useState(() => {
     if (typeof window !== "undefined") {
       return window.innerWidth < 768;
@@ -71,8 +71,8 @@ export function ProposalExpandedView(props: Readonly<CustomContent>) {
       setIsMobile(window.innerWidth < 768);
     };
 
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
   }, []);
 
   const content = (() => {

apps/torus-page/src/app/_components/hover-header/_components/desktop/buttons-section.tsx

@@ -1,4 +1,3 @@
-
 import { Button } from "@torus-ts/ui/components/button";
 import { Card } from "@torus-ts/ui/components/card";
 import { ScrollArea } from "@torus-ts/ui/components/scroll-area";

apps/torus-page/src/app/_components/hover-header/index.tsx

@@ -22,38 +22,39 @@ export function HoverHeader() {
 
   const [isExpanded, setIsExpanded] = useState(false);
 
-  const calculateDistance = useCallback((
-    x1: number,
-    y1: number,
-    x2: number,
-    y2: number,
-  ): number => {
-    return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
-  }, []);
-
-  const handleMouseMove = useCallback((event: MouseEvent) => {
-    const logoRect = contentRef.current?.getBoundingClientRect();
-    if (!logoRect) {
-      setGlowSize(0.8);
-      return;
-    }
-
-    const logoCenterX = logoRect.left + logoRect.width / 2;
-    const logoCenterY = logoRect.top + logoRect.height / 2;
-
-    const distance = calculateDistance(
-      event.clientX,
-      event.clientY,
-      logoCenterX,
-      logoCenterY,
-    );
-    const maxDistance = Math.sqrt(
-      Math.pow(window.innerWidth, 2) + Math.pow(window.innerHeight, 2),
-    );
+  const calculateDistance = useCallback(
+    (x1: number, y1: number, x2: number, y2: number): number => {
+      return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+    },
+    [],
+  );
 
-    const scale = 0.15 + (maxDistance - distance) / maxDistance;
-    setGlowSize(scale / 1.2);
-  }, [calculateDistance]);
+  const handleMouseMove = useCallback(
+    (event: MouseEvent) => {
+      const logoRect = contentRef.current?.getBoundingClientRect();
+      if (!logoRect) {
+        setGlowSize(0.8);
+        return;
+      }
+
+      const logoCenterX = logoRect.left + logoRect.width / 2;
+      const logoCenterY = logoRect.top + logoRect.height / 2;
+
+      const distance = calculateDistance(
+        event.clientX,
+        event.clientY,
+        logoCenterX,
+        logoCenterY,
+      );
+      const maxDistance = Math.sqrt(
+        Math.pow(window.innerWidth, 2) + Math.pow(window.innerHeight, 2),
+      );
+
+      const scale = 0.15 + (maxDistance - distance) / maxDistance;
+      setGlowSize(scale / 1.2);
+    },
+    [calculateDistance],
+  );
 
   useEffect(() => {
     window.addEventListener("mousemove", handleMouseMove);
@@ -63,16 +64,19 @@ export function HoverHeader() {
     };
   }, [handleMouseMove]);
 
-  const glowVariants = useMemo(() => ({
-    pulse: (scale: number) => ({
-      scale: [scale, scale * 1.2, scale],
-      transition: {
-        duration: 2,
-        repeat: Infinity,
-        ease: "easeInOut",
-      },
+  const glowVariants = useMemo(
+    () => ({
+      pulse: (scale: number) => ({
+        scale: [scale, scale * 1.2, scale],
+        transition: {
+          duration: 2,
+          repeat: Infinity,
+          ease: "easeInOut",
+        },
+      }),
     }),
-  }), []);
+    [],
+  );
 
   const handleClickOutside = useCallback((event: MouseEvent) => {
     if (

apps/torus-page/src/app/_components/torus-animation.tsx

@@ -91,7 +91,7 @@ const Torus: FC = () => {
   }, []);
 
   useFrame((_state, delta) => {
-    if (torusRef.current?.material && 'uniforms' in torusRef.current.material) {
+    if (torusRef.current?.material && "uniforms" in torusRef.current.material) {
       const material = torusRef.current.material as THREE.ShaderMaterial;
       if (material.uniforms.time) {
         material.uniforms.time.value += 0.1 * 60 * delta;

apps/torus-wallet/src/app/_components/transactions-sheet.tsx

@@ -23,7 +23,9 @@ export function TransactionsSheet() {
       const timer = setTimeout(() => setShouldRenderContent(true), 150);
       return () => clearTimeout(timer);
     } else {
-      const frameId = requestAnimationFrame(() => setShouldRenderContent(false));
+      const frameId = requestAnimationFrame(() =>
+        setShouldRenderContent(false),
+      );
       return () => cancelAnimationFrame(frameId);
     }
   }, [isOpen]);