Bounty: Dead Code Cleanup and Code Formatting (React)

src/App.tsx

@@ -5,12 +5,11 @@ import SignUp from './pages/signup'
 import { UserData } from './common/constants/SignupData'
 import Profile from './pages/profile'
 
-
 import { MyData } from './pages/profile/components/MyData'
 import useFetch from './common/hooks/useFetch'
 function App(): ReactElement {
   const emptyStringArray: string[] = []
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(true)
   const [isLoggedIn, setIsLoggedIn] = useState(false)
   const [user, setUser] = useState<UserData>({
     about: '',
@@ -30,13 +29,13 @@ function App(): ReactElement {
     token: ''
   })
   const GET_USER_API = 'user/get-user/{address}'
-  const { fetchData: fetchUser, data: userDataFromDB } = useFetch<UserData>()
+  const { fetchData: fetchUser } = useFetch<UserData>()
 
   useEffect(() => {
-    const token = localStorage.getItem('token');
-    setIsLoggedIn(!!token); // Update isLoggedIn based on token presence
-    setIsLoading(false); // Mark loading as complete
-  }, []);
+    const token = localStorage.getItem('token')
+    setIsLoggedIn(!!token) // Update isLoggedIn based on token presence
+    setIsLoading(false) // Mark loading as complete
+  }, [])
 
   function makeUserUpdationUrl(address_string: string): string {
     const address = localStorage.getItem('address') || ''
@@ -56,12 +55,16 @@ function App(): ReactElement {
         }
       }
     })
-    setIsLoggedIn(!!token); // Set isLoggedIn based on token presence
-    setIsLoading(false); // Indicate loading is complete
+    setIsLoggedIn(!!token) // Set isLoggedIn based on token presence
+    setIsLoading(false) // Indicate loading is complete
   }, []) // Empty dependency array: run only on initial render
 
   if (isLoading) {
-    return <div className='h-screen w-screen flex justify-center items-center'><div className="w-8 h-8 border-4 border-t-4 border-gray-200 border-t-purple-500 rounded-full animate-spin"></div></div>;
+    return (
+      <div className="h-screen w-screen flex justify-center items-center">
+        <div className="w-8 h-8 border-4 border-t-4 border-gray-200 border-t-purple-500 rounded-full animate-spin"></div>
+      </div>
+    )
   }
 
   return (
@@ -89,35 +92,19 @@ function App(): ReactElement {
               )
             }
           />
-          <Route
-            path="/signup/:step"
-            element={
-              <SignUp
-                user={user}
-                setUser={setUser}
-                setIsLoggedIn={setIsLoggedIn}
-              />
-            }
-          />
+          <Route path="/signup/:step" element={<SignUp />} />
           <Route path="/privacy" element={<PrivacyPolicy />} />
-          <Route
-            path="/profile/:address"
-            element={<Profile />}
-          />
+          <Route path="/profile/:address" element={<Profile />} />
 
-          {isLoggedIn && <Route path='my-data/:address' element={<MyData />} />}
+          {isLoggedIn && <Route path="my-data/:address" element={<MyData />} />}
           {isLoggedIn ? (
-            <Route
-              path="*"
-              element={<Profile />}
-            />
+            <Route path="*" element={<Profile />} />
           ) : (
             <Route path="*" element={<Navigate to="/" />} />
           )}
         </Routes>
       </div>
     </div>
-
   )
 }
 

src/common/components/Navbar.tsx

@@ -1,4 +1,4 @@
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom'
 import { ReactComponent as Logo } from '../../assets/images/nameLogo.svg'
 
 export enum PAGE_NAMES {
@@ -7,18 +7,19 @@ export enum PAGE_NAMES {
 }
 
 interface NavbarProps {
-  userAddress: string;
+  userAddress: string
   page: PAGE_NAMES
 }
 
 const Navbar = ({ userAddress, page }: NavbarProps) => {
-  const navigate = useNavigate();
+  const navigate = useNavigate()
 
   const getButtonClasses = (isActive: boolean) =>
-    `py-2 px-4 rounded-lg font-medium transition duration-300 ${isActive
-      ? 'bg-gray-800 text-white'
-      : 'bg-[#f8f9fc] text-gray-700 hover:bg-gray-700 hover:text-white'
-    }`;
+    `py-2 px-4 rounded-lg font-medium transition duration-300 ${
+      isActive
+        ? 'bg-gray-800 text-white'
+        : 'bg-[#f8f9fc] text-gray-700 hover:bg-gray-700 hover:text-white'
+    }`
 
   return (
     <div className="w-full bg-[#f8f9fc] fixed z-10 shadow-md">

src/common/constants/SignupData.ts

@@ -11,11 +11,11 @@ export interface UserData {
   last_cards_marked: number
   name: string
   pfp: string
-  profile_metadata: any
-  settings: any
+  profile_metadata: Record<string, unknown>
+  settings: Record<string, unknown>
   address: string
   stage: number
   verified: boolean
   email: string
-  token: any
+  token: string
 }

src/common/hooks/useBodyScroll.ts

@@ -1,11 +1,13 @@
-import React, { useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 
 const useBodyScroll = (isOpen: boolean) => {
-  const bodyRef = useRef(document.querySelector('body'))
+  const bodyRef = useRef(document.body)
 
   useEffect(() => {
     const updatePageScroll = () => {
-      bodyRef.current!.style.overflow = isOpen ? 'hidden' : ''
+      if (bodyRef.current) {
+        bodyRef.current.style.overflow = isOpen ? 'hidden' : ''
+      }
     }
 
     updatePageScroll()

src/common/hooks/useFetch.ts

@@ -1,6 +1,5 @@
 import { Method } from 'axios'
 import { useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
 
 type Options<T> = {
   method?: Method
@@ -20,7 +19,7 @@ type Options<T> = {
 type FetchResponse<T> = {
   data: T | null
   status: FetchStatus
-  error: any
+  error: string | null
   fetchData: (url: string, options?: Options<T>) => void
 }
 export const baseUrl = 'https://fastapi.kleo.network/api/v1'
@@ -35,12 +34,9 @@ export enum FetchStatus {
 }
 
 function useFetch<T>(url?: string, options?: Options<T>): FetchResponse<T> {
-
-  const navigate = useNavigate()
-
   const [data, setData] = useState<T | null>(null)
   const [status, setStatus] = useState(FetchStatus.IDLE)
-  const [error, setError] = useState(null)
+  const [error, setError] = useState<string | null>(null)
   const [controller, setController] = useState<AbortController | null>(null)
 
   function getToken(): string | undefined {
@@ -92,9 +88,9 @@ function useFetch<T>(url?: string, options?: Options<T>): FetchResponse<T> {
           options.onSuccessfulFetch(data)
         }
       })
-      .catch((err) => {
-        if (err.name !== 'AbortError') {
-          setError(err.message)
+      .catch((err: unknown) => {
+        if (!(err instanceof DOMException && err.name === 'AbortError')) {
+          setError(err instanceof Error ? err.message : String(err))
           setStatus(FetchStatus.ERROR)
         }
       })

src/common/hooks/usePhantomWallet.ts

@@ -6,7 +6,7 @@ type PhantomWallet = {
   publicKey: PublicKey | null
   connect: () => Promise<void>
   disconnect: () => Promise<void>
-  signAndSendTransaction: (transaction: Transaction) => Promise<void>
+  signAndSendTransaction: (transaction: Transaction) => Promise<unknown>
   signMessage: (
     message: string
   ) => Promise<{ signature: Uint8Array; publicKey: PublicKey }>
@@ -17,26 +17,28 @@ export const usePhantomWallet = (): PhantomWallet => {
   const [publicKey, setPublicKey] = useState<PublicKey | null>(null)
 
   const connect = async () => {
-    const phantom = (window as any).solana
-    if (phantom && phantom.isPhantom) {
-      const isConnected = await phantom.connect()
-      setConnected(isConnected)
-      setPublicKey(new PublicKey(phantom.publicKey))
+    const phantom = window.solana
+    if (phantom?.isPhantom) {
+      await phantom.connect()
+      setConnected(true)
+      if (phantom.publicKey) {
+        setPublicKey(new PublicKey(phantom.publicKey.toString()))
+      }
     }
   }
 
   const disconnect = async () => {
-    const phantom = (window as any).solana
-    if (phantom && phantom.isPhantom) {
+    const phantom = window.solana
+    if (phantom?.isPhantom) {
       await phantom.disconnect()
       setConnected(false)
       setPublicKey(null)
     }
   }
 
   const signAndSendTransaction = async (transaction: Transaction) => {
-    const phantom = (window as any).solana
-    if (phantom && phantom.isPhantom) {
+    const phantom = window.solana
+    if (phantom?.isPhantom) {
       const txid = await phantom.signAndSendTransaction(transaction)
       return txid
     }
@@ -46,8 +48,8 @@ export const usePhantomWallet = (): PhantomWallet => {
   const signMessage = async (
     message: string
   ): Promise<{ signature: Uint8Array; publicKey: PublicKey }> => {
-    const phantom = (window as any).solana
-    if (phantom && phantom.isPhantom) {
+    const phantom = window.solana
+    if (phantom?.isPhantom) {
       const arrayMessage = new TextEncoder().encode(message) // Convert message string to Uint8Array
       const signed = await phantom.signMessage(arrayMessage, 'hex') // "hex" is an example of an encoding format, you can adjust as necessary.
       return {
@@ -59,11 +61,11 @@ export const usePhantomWallet = (): PhantomWallet => {
   }
 
   useEffect(() => {
-    const phantom = (window as any).solana
-    if (phantom && phantom.isPhantom) {
-      setConnected(phantom.isConnected)
-      if (phantom.isConnected) {
-        setPublicKey(new PublicKey(phantom.publicKey))
+    const phantom = window.solana
+    if (phantom?.isPhantom) {
+      setConnected(Boolean(phantom.isConnected))
+      if (phantom.isConnected && phantom.publicKey) {
+        setPublicKey(new PublicKey(phantom.publicKey.toString()))
       }
     }
   }, [])

src/common/interface.ts

@@ -7,13 +7,13 @@ export interface UserData {
   last_cards_marked: number
   name: string
   pfp: string
-  profile_metadata: any
-  settings: any
+  profile_metadata: Record<string, unknown>
+  settings: Record<string, unknown>
   address: string
   stage: number
   verified: boolean
   email: string
-  token: any
+  token: string
 }
 
 export interface UserDataProps {