perf directory

Author: aelmanaa

src/components/CCIP/Landing/LazyNetworkGrid.tsx

@@ -1,7 +1,7 @@
 import { lazy, Suspense } from "react"
-import type { Environment } from "~/config/data/ccip/types"
+import type { Environment } from "~/config/data/ccip/types.ts"
 
-const NetworkGrid = lazy(() => import("./NetworkGrid"))
+const NetworkGrid = lazy(() => import("./NetworkGrid.tsx"))
 
 interface LazyNetworkGridProps {
   networks: Array<{
@@ -16,22 +16,25 @@ interface LazyNetworkGridProps {
 
 export default function LazyNetworkGrid({ networks, environment }: LazyNetworkGridProps) {
   return (
-    <Suspense 
+    <Suspense
       fallback={
-        <div className="grid" style={{ 
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
-          gap: '1rem',
-          padding: '1rem 0'
-        }}>
+        <div
+          className="grid"
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+            gap: "1rem",
+            padding: "1rem 0",
+          }}
+        >
           {Array.from({ length: 8 }, (_, i) => (
-            <div 
+            <div
               key={i}
               style={{
-                height: '120px',
-                backgroundColor: '#f8f9fa',
-                borderRadius: '8px',
-                animation: 'pulse 1.5s ease-in-out infinite alternate'
+                height: "120px",
+                backgroundColor: "#f8f9fa",
+                borderRadius: "8px",
+                animation: "pulse 1.5s ease-in-out infinite alternate",
               }}
             />
           ))}
@@ -41,4 +44,4 @@ export default function LazyNetworkGrid({ networks, environment }: LazyNetworkGr
       <NetworkGrid networks={networks} environment={environment} />
     </Suspense>
   )
-}
+}

src/components/CCIP/Search/Search.tsx

@@ -7,7 +7,7 @@ import { directoryToSupportedChain, getExplorer, fallbackTokenIconUrl } from "~/
 import { drawerContentStore } from "../Drawer/drawerStore.ts"
 import LaneDrawer from "../Drawer/LaneDrawer.tsx"
 import { ChainType, ExplorerInfo } from "~/config/types.ts"
-import type { WorkerMessage, WorkerResponse } from "~/workers/data-worker"
+import type { WorkerMessage, WorkerResponse } from "~/workers/data-worker.ts"
 
 interface SearchProps {
   chains: {
@@ -57,10 +57,7 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
   useEffect(() => {
     if (typeof window !== "undefined") {
       // Import the worker as a URL that Vite will process
-      workerRef.current = new Worker(
-        new URL("~/workers/data-worker.ts", import.meta.url),
-        { type: "module" }
-      )
+      workerRef.current = new Worker(new URL("~/workers/data-worker.ts", import.meta.url), { type: "module" })
 
       workerRef.current.onmessage = (event: MessageEvent<WorkerResponse>) => {
         const { networks, tokens: workerTokens, lanes: workerLanes } = event.data

src/components/CCIP/TokenGrid/LazyTokenGrid.tsx

@@ -1,7 +1,7 @@
 import { lazy, Suspense } from "react"
-import type { Environment } from "~/config/data/ccip/types"
+import type { Environment } from "~/config/data/ccip/types.ts"
 
-const TokenGrid = lazy(() => import("./TokenGrid"))
+const TokenGrid = lazy(() => import("./TokenGrid.tsx"))
 
 interface LazyTokenGridProps {
   tokens: Array<{
@@ -14,22 +14,25 @@ interface LazyTokenGridProps {
 
 export default function LazyTokenGrid({ tokens, environment }: LazyTokenGridProps) {
   return (
-    <Suspense 
+    <Suspense
       fallback={
-        <div className="grid" style={{ 
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
-          gap: '1rem',
-          padding: '1rem 0'
-        }}>
+        <div
+          className="grid"
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+            gap: "1rem",
+            padding: "1rem 0",
+          }}
+        >
           {Array.from({ length: 8 }, (_, i) => (
-            <div 
+            <div
               key={i}
               style={{
-                height: '120px',
-                backgroundColor: '#f8f9fa',
-                borderRadius: '8px',
-                animation: 'pulse 1.5s ease-in-out infinite alternate'
+                height: "120px",
+                backgroundColor: "#f8f9fa",
+                borderRadius: "8px",
+                animation: "pulse 1.5s ease-in-out infinite alternate",
               }}
             />
           ))}
@@ -39,4 +42,4 @@ export default function LazyTokenGrid({ tokens, environment }: LazyTokenGridProp
       <TokenGrid tokens={tokens} environment={environment} />
     </Suspense>
   )
-}
+}

src/workers/data-worker.ts

@@ -1,4 +1,9 @@
 // TypeScript Web Worker for CCIP Search filtering
+// Security Note: Web Workers run in isolated contexts and don't have access to event.origin
+// Instead, we validate message structure and sanitize all inputs to prevent attacks
+import type { LaneConfig } from "~/config/data/ccip/types.ts"
+import type { ChainType, ExplorerInfo } from "~/config/types.ts"
+
 interface SearchData {
   chains: Array<{
     name: string
@@ -17,18 +22,16 @@ interface SearchData {
       name: string
       logo: string
       key: string
-      chainType: any
+      chainType: ChainType
     }
     destinationNetwork: {
       name: string
       logo: string
       key: string
-      explorer: any
-      chainType: any
-    }
-    lane: {
-      supportedTokens?: Record<string, any>
+      explorer: ExplorerInfo
+      chainType: ChainType
     }
+    lane: LaneConfig
   }>
 }
 
@@ -44,6 +47,7 @@ interface WorkerResponse {
 }
 
 self.onmessage = (event: MessageEvent<WorkerMessage>) => {
+  // Basic validation - Web Workers run in isolated contexts, lower security risk
   const { search, data } = event.data
 
   if (!search || !data) {