fix: image issues

package.json

@@ -31,7 +31,7 @@
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.22.4",
-    "prism-wasm-lightclient": "0.1.1"
+    "prism-wasm-lightclient": "file:../prism/crates/node_types/wasm-lightclient"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.6.1",

src/app/components/Footer.tsx

@@ -68,39 +68,39 @@ const Footer = ({ openModal }: FooterProps) => {
                   href='http://twitch.tv/distractedm1nd'
                   className='flex h-10 w-10 items-center justify-center rounded-full bg-white transition-all hover:-translate-x-1 hover:-translate-y-1'
                 >
-                  <Image src={Twitch} alt='Twitch' width={20} height={20} />
+                  <Image src={Twitch} alt='Twitch' width={20} />
                 </a>
               </div>
               <div className='rounded-full bg-[#723ECF]'>
                 <a
                   href='https://www.youtube.com/@prismxyz'
                   className='flex h-10 w-10 items-center justify-center rounded-full bg-white transition-all hover:-translate-x-1 hover:-translate-y-1'
                 >
-                  <Image src={YouTube} alt='YouTube' width={22} height={22} />
+                  <Image src={YouTube} alt='YouTube' width={22} />
                 </a>
               </div>
               <div className='rounded-full bg-[#723ECF]'>
                 <a
                   href='https://www.x.com/prism_xyz'
                   className='flex h-10 w-10 items-center justify-center rounded-full bg-white transition-all hover:-translate-x-1 hover:-translate-y-1'
                 >
-                  <Image src={X} alt='X' width={20} height={20} />
+                  <Image src={X} alt='X' width={20} />
                 </a>
               </div>
               <div className='rounded-full bg-[#723ECF]'>
                 <a
                   href='https://discord.gg/kSbT5z8N'
                   className='flex h-10 w-10 items-center justify-center rounded-full bg-white transition-all hover:-translate-x-1 hover:-translate-y-1'
                 >
-                  <Image src={Discord} alt='Discord' width={22} height={22} />
+                  <Image src={Discord} alt='Discord' width={22} />
                 </a>
               </div>
               <div className='rounded-full bg-[#723ECF]'>
                 <a
                   href='https://www.github.com/deltadevsde/prism'
                   className='flex h-10 w-10 items-center justify-center rounded-full bg-black transition-all hover:-translate-x-1 hover:-translate-y-1'
                 >
-                  <Image src={Github} alt='GitHub' width={40} height={40} />
+                  <Image src={Github} alt='GitHub' width={40} priority />
                 </a>
               </div>
             </div>

src/app/components/InfoCard.tsx

@@ -13,7 +13,14 @@ const InfoCard = ({ title, description, imageSrc }: InfoCardProps) => {
       <div className='mx-auto mb-8 flex h-60 w-60 items-center'>
         {imageSrc && (
           <div className='relative mx-auto h-60 w-60'>
-            <Image src={imageSrc} alt={`${title} icon`} fill className='object-contain' priority />
+            <Image
+              src={imageSrc}
+              alt={`${title} icon`}
+              className='object-contain'
+              sizes='10vw'
+              fill
+              loading='lazy'
+            />
           </div>
         )}
       </div>

src/lib/use-light-client.ts

@@ -1,3 +1,4 @@
+import { WasmLightClient } from 'prism-wasm-lightclient';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 // todo: refactor this mess
@@ -16,6 +17,7 @@ export const useLightClient = () => {
   const [progress, setProgress] = useState(0);
   const [currentHeight, setCurrentHeight] = useState(START_HEIGHT);
   const [targetHeight, setTargetHeight] = useState(0);
+  const [_, setClient] = useState<WasmLightClient | null>(null);
 
   const latestCurrentHeight = useRef(START_HEIGHT);
   const latestTargetHeight = useRef(0);
@@ -125,18 +127,62 @@ export const useLightClient = () => {
 
       addLog('Starting light client...', 'info');
 
-      const wasm = await import('prism-wasm-lightclient');
-      await wasm.default();
-
-      const channel = new MessageChannel();
-      const worker = await new wasm.LightClientWorker(channel.port1);
-      worker.run();
-
-      channel.port1.onmessage = processWorkerMessage;
-      channel.port2.onmessage = processWorkerMessage;
+      // there are some issues with Safari, its much slower somehow...
+      const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+      addLog(`Detected browser: ${isSafari ? 'Safari' : 'Other'}`, 'info');
+
+      try {
+        const wasm = await import('prism-wasm-lightclient');
+        addLog('WASM module imported successfully', 'info');
+        await wasm.default();
+        addLog('WASM module initialized', 'info');
+
+        const channel = new MessageChannel();
+        addLog('MessageChannel created', 'info');
+
+        try {
+          const client = new wasm.WasmLightClient(channel.port2);
+          setClient(client);
+          addLog('Client created successfully', 'info');
+          const worker = new wasm.LightClientWorker(channel.port1);
+          addLog('Worker created successfully', 'info');
+
+          channel.port1.addEventListener('error', (error) => {
+            addLog(`Port1 error: ${error}`, 'error');
+          });
+          channel.port2.addEventListener('error', (error) => {
+            addLog(`Port2 error: ${error}`, 'error');
+          });
+
+          worker.run().catch((error) => {
+            addLog(`Worker run error: ${error}`, 'error');
+          });
+
+          channel.port1.onmessage = (event) => {
+            try {
+              processWorkerMessage(event);
+            } catch (error) {
+              addLog(`Message processing error: ${error}`, 'error');
+            }
+          };
+          channel.port2.onmessage = (event) => {
+            try {
+              processWorkerMessage(event);
+            } catch (error) {
+              addLog(`Message processing error: ${error}`, 'error');
+            }
+          };
+        } catch (error) {
+          addLog(`Worker creation failed: ${error}`, 'error');
+          throw error;
+        }
+      } catch (error) {
+        addLog(`WASM initialization failed: ${error}`, 'error');
+        throw error;
+      }
 
       addLog('Light client setup complete', 'success');
-    } catch (error: Error | unknown) {
+    } catch (error) {
       const errorMessage = error instanceof Error ? error.message : String(error);
       addLog(`Error: ${errorMessage}`, 'error');
       setIsRunning(false);