From f85a0e21d6378ab191b4a28d5830300e6bd7a6cf Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 31 Oct 2024 11:27:08 +0100
Subject: [PATCH] refactor code

---
 src/lib/components/Searchbar.svelte           |  171 +-
 .../crypto/[tickerID]/+layout.server.ts       |    1 +
 src/routes/crypto/[tickerID]/+layout.svelte   | 1636 ++++++++++-------
 src/routes/crypto/[tickerID]/+layout.ts       |    8 -
 .../stocks/[tickerID]/+layout.server.ts       |    1 +
 src/routes/stocks/[tickerID]/+layout.svelte   |    6 +-
 src/routes/stocks/[tickerID]/+layout.ts       |    6 -
 7 files changed, 1024 insertions(+), 805 deletions(-)
 delete mode 100644 src/routes/crypto/[tickerID]/+layout.ts

diff --git a/src/lib/components/Searchbar.svelte b/src/lib/components/Searchbar.svelte
index 54b1e6fa..c3319600 100644
--- a/src/lib/components/Searchbar.svelte
+++ b/src/lib/components/Searchbar.svelte
@@ -1,17 +1,11 @@
 <script lang="ts">
-  import {
-    searchBarData,
-    stockTicker,
-    etfTicker,
-    cryptoTicker,
-    screenWidth,
-  } from "$lib/store";
-  import { goto } from "$app/navigation";
+  import { searchBarData, screenWidth } from "$lib/store";
   import { onMount } from "svelte";
   import Search from "lucide-svelte/icons/search";
-
+  import { goto } from "$app/navigation";
   let searchHistory = [];
   let searchResults = [];
+  let updatedSearchHistory = [];
 
   let dataLoaded = false; // Flag to track data loading
 
@@ -41,9 +35,8 @@
     }
   }
 
-  async function popularTicker(state, assetType) {
+  async function popularTicker(state) {
     searchOpen = false;
-
     if (!state) return;
 
     // Convert state to uppercase once
@@ -54,51 +47,23 @@
       ({ symbol }) => symbol === upperState,
     );
 
-    // Update search history:
-    // 1. Remove the item if it already exists (to avoid duplicates)
-    // 2. Add the new item at the beginning
-    // 3. Limit to 5 items
     if (newSearchItem) {
-      searchHistory = [
+      // Ensure `upperState` matches the case of `item.symbol`
+      updatedSearchHistory = [
         newSearchItem,
-        ...(searchHistory?.filter((item) => item.symbol !== upperState) || []),
+        ...(searchHistory?.filter(
+          (item) => item?.symbol?.toUpperCase() !== upperState,
+        ) || []),
       ].slice(0, 5);
     }
 
-    // Save recent ticker
-    searchHistory = [...searchHistory];
-    console.log(searchHistory);
-    await saveRecentTicker();
-    // Map of asset types to their corresponding actions
-    console.log(upperState, assetType);
-    const assetActions = {
-      ETF: () => {
-        etfTicker.update(() => upperState);
-        goto(`/etf/${upperState}`);
-      },
-      Stock: () => {
-        stockTicker.update(() => upperState);
-        goto(`/stocks/${upperState}`);
-      },
-      Crypto: () => {
-        cryptoTicker.update(() => upperState);
-        goto(`/crypto/${upperState}`);
-      },
-    };
-
-    // Execute the appropriate action for the asset type
-    if (assetActions[assetType]) {
-      assetActions[assetType]();
-    }
-
     // Close search modal
     const closePopup = document.getElementById("searchBarModal");
     closePopup?.dispatchEvent(new MouseEvent("click"));
   }
 
-  async function searchBarTicker(state, assetType) {
+  function searchBarTicker(state) {
     showSuggestions = false;
-
     // Early return if state is empty or ticker not found
     if (
       !state ||
@@ -117,51 +82,25 @@
       ({ symbol }) => symbol === upperState,
     );
 
-    // Update search history:
-    // 1. Remove the item if it already exists (to avoid duplicates)
-    // 2. Add the new item at the beginning
-    // 3. Limit to 5 items
     if (newSearchItem) {
-      searchHistory = [
+      // Ensure `upperState` matches the case of `item.symbol`
+      updatedSearchHistory = [
         newSearchItem,
-        ...(searchHistory?.filter((item) => item.symbol !== upperState) || []),
+        ...(searchHistory?.filter(
+          (item) => item?.symbol?.toUpperCase() !== upperState,
+        ) || []),
       ].slice(0, 5);
     }
 
-    // Map of asset types to their corresponding actions
-    searchHistory = [...searchHistory];
-    console.log(searchHistory);
-    await saveRecentTicker();
-
-    const assetActions = {
-      ETF: () => {
-        etfTicker.update(() => upperState);
-        goto(`/etf/${upperState}`);
-      },
-      Stock: () => {
-        stockTicker.update(() => upperState);
-        goto(`/stocks/${upperState}`);
-      },
-      Crypto: () => {
-        cryptoTicker.update(() => upperState);
-        goto(`/crypto/${upperState}`);
-      },
-    };
-
-    // Execute the appropriate action for the asset type
-    if (assetActions[assetType]) {
-      assetActions[assetType]();
-
-      // Close search modal
-      searchOpen = false;
-      const closePopup = document.getElementById("searchBarModal");
-      closePopup?.dispatchEvent(new MouseEvent("click"));
-    }
+    // Close search modal
+    searchOpen = false;
+    const closePopup = document.getElementById("searchBarModal");
+    closePopup?.dispatchEvent(new MouseEvent("click"));
 
     searchQuery = "";
   }
 
-  async function search() {
+  function search() {
     const normalizedSearchQuery = searchQuery?.toLowerCase();
 
     // Define names for which symbols without dots should be prioritized
@@ -227,16 +166,25 @@
     if (e?.charCode === 13) {
       focusedSuggestion = "";
 
-      if (searchResults?.length > 0) {
+      const assetActions = {
+        ETF: () => goto(`/etf/${searchQuery}`),
+        Stock: () => goto(`/stocks/${searchQuery}`),
+        Crypto: () => goto(`/crypto/${searchQuery}`),
+      };
+
+      if (showSuggestions?.length > 0) {
         // Use the first search result
-        const firstResult = searchResults[0];
         searchQuery = firstResult.symbol;
         assetType = firstResult.type;
-        searchBarTicker(firstResult.symbol, firstResult.type);
-      } else if (!notFoundTicker && searchQuery) {
-        // Fallback to original behavior if no search results
-        searchBarTicker(searchQuery, assetType);
       }
+
+      // Execute the appropriate action for the asset type
+      if (assetActions[assetType]) {
+        assetActions[assetType]();
+      }
+
+      // Trigger search bar action
+      searchBarTicker(searchQuery);
     }
   };
 
@@ -398,6 +346,20 @@
       notFoundTicker = false;
     }
   }
+
+  $: {
+    if (updatedSearchHistory?.length > 0 && searchBarModalChecked === false) {
+      (async () => {
+        // Add 500 ms delay is important otherwise bug since #each has searchHistory and updates too quickly and redirects to wrong symbol
+        await new Promise((resolve) => setTimeout(resolve, 500));
+
+        // Update search history after delay
+        searchHistory = updatedSearchHistory;
+        updatedSearchHistory = [];
+        saveRecentTicker();
+      })();
+    }
+  }
 </script>
 
 <label
@@ -510,7 +472,7 @@
             autocomplete="off"
           />
           <button
-            on:click={() => searchBarTicker(searchQuery, assetType)}
+            on:click={() => searchBarTicker(searchQuery)}
             class="absolute inset-0 right-auto group"
             type="submit"
             aria-label="Search"
@@ -548,8 +510,9 @@
               {#if !showSuggestions}
                 {#each searchHistory?.length > 0 ? searchHistory : popularList as item}
                   <li class="border-b border-gray-600">
-                    <label
-                      on:click={() => popularTicker(item?.symbol, item?.type)}
+                    <a
+                      href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
+                      on:click={() => popularTicker(item?.symbol)}
                       class="mb-2 {item?.symbol === focusedSuggestion
                         ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
                         : 'shake-ticker cursor-pointer bg-[#09090B] sm:hover:bg-[#27272A] rounded-lg flex justify-start items-center p-2 text-white  group'} w-full"
@@ -578,7 +541,7 @@
                           {item?.type}
                         </div>
                       </div>
-                    </label>
+                    </a>
                   </li>
                 {/each}
               {:else if showSuggestions && searchResults?.length > 0}
@@ -589,9 +552,9 @@
                   <li class="border-b border-gray-600">
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
                     <!-- svelte-ignore a11y-label-has-associated-control -->
-                    <label
-                      data-sveltekit-preload-data={false}
-                      on:click={() => searchBarTicker(item?.symbol, item?.type)}
+                    <a
+                      href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
+                      on:click={() => searchBarTicker(item?.symbol)}
                       class="mb-2 {item?.symbol === focusedSuggestion
                         ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
                         : 'cursor-pointer mb-2 bg-[#09090B] sm:hover:bg-[#27272A] rounded-lg flex justify-start items-center p-2 text-white group'}"
@@ -610,7 +573,7 @@
                           {item?.type}
                         </div>
                       </div>
-                    </label>
+                    </a>
                   </li>
                 {/each}
               {:else if showSuggestions && searchResults?.length === 0}
@@ -697,7 +660,7 @@
               autocomplete="off"
             />
             <button
-              on:click={() => searchBarTicker(searchQuery, assetType)}
+              on:click={() => searchBarTicker(searchQuery)}
               class="absolute inset-0 right-auto group"
               type="submit"
               aria-label="Search"
@@ -736,8 +699,9 @@
                 {#if !showSuggestions}
                   {#each searchHistory?.length > 0 ? searchHistory : popularList as item}
                     <li class="border-b border-gray-600">
-                      <label
-                        on:click={() => popularTicker(item?.symbol, item?.type)}
+                      <a
+                        href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
+                        on:click={() => popularTicker(item?.symbol)}
                         class="mb-2 {item?.symbol === focusedSuggestion
                           ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
                           : 'cursor-pointer bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'} w-full"
@@ -766,7 +730,7 @@
                             {item?.type}
                           </div>
                         </div>
-                      </label>
+                      </a>
                     </li>
                   {/each}
                 {:else if showSuggestions && searchResults?.length > 0}
@@ -777,10 +741,9 @@
                     <li class="border-b border-gray-600">
                       <!-- svelte-ignore a11y-click-events-have-key-events -->
                       <!-- svelte-ignore a11y-label-has-associated-control -->
-                      <label
-                        data-sveltekit-preload-data={false}
-                        on:click={() =>
-                          searchBarTicker(item?.symbol, item?.type)}
+                      <a
+                        href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
+                        on:click={() => searchBarTicker(item?.symbol)}
                         class="mb-2 {item?.symbol === focusedSuggestion
                           ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
                           : 'cursor-pointer mb-2 bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'}"
@@ -799,7 +762,7 @@
                             {item?.type}
                           </div>
                         </div>
-                      </label>
+                      </a>
                     </li>
                   {/each}
                 {:else if showSuggestions && searchResults?.length === 0}
diff --git a/src/routes/crypto/[tickerID]/+layout.server.ts b/src/routes/crypto/[tickerID]/+layout.server.ts
index 3b1dc70a..0b3f0b57 100644
--- a/src/routes/crypto/[tickerID]/+layout.server.ts
+++ b/src/routes/crypto/[tickerID]/+layout.server.ts
@@ -83,5 +83,6 @@ export const load = async ({ params, locals, setHeaders }) => {
     getOneDayPrice,
     getUserWatchlist,
     companyName,
+    getParams: params.tickerID,
   };
 };
diff --git a/src/routes/crypto/[tickerID]/+layout.svelte b/src/routes/crypto/[tickerID]/+layout.svelte
index d2e54f34..25128184 100644
--- a/src/routes/crypto/[tickerID]/+layout.svelte
+++ b/src/routes/crypto/[tickerID]/+layout.svelte
@@ -1,587 +1,752 @@
-<script lang='ts'>
-
-  import {searchBarData, globalForm, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, traded, cryptoTicker, assetType} from '$lib/store';
-
-  import { onMount, onDestroy, afterUpdate} from "svelte";
-  import { goto } from '$app/navigation';
-  import { page } from '$app/stores';
-  import toast from 'svelte-french-toast';
-  import CryptoProfileCard from '$lib/components/CryptoProfileCard.svelte';
-;
+<script lang="ts">
+  import {
+    searchBarData,
+    globalForm,
+    screenWidth,
+    openPriceAlert,
+    currentPortfolioPrice,
+    realtimePrice,
+    isCrosshairMoveActive,
+    currentPrice,
+    priceIncrease,
+    displayCompanyName,
+    traded,
+    cryptoTicker,
+    assetType,
+  } from "$lib/store";
 
+  import { onMount, onDestroy, afterUpdate } from "svelte";
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
+  import toast from "svelte-french-toast";
+  import CryptoProfileCard from "$lib/components/CryptoProfileCard.svelte";
   export let data;
 
   //$assetType = 'stock';
   //$cryptoTicker = data?.getTicker;
   $realtimePrice = null;
-  
 
-async function loadSearchData() {
-    
-    if($searchBarData?.length !== 0)
-    {
-      return
-    }
-    else {
-  
-       // make the GET request to the endpoint
-       const response = await fetch('/api/searchbar-data', {
-      method: 'GET',
-      headers: {
-          "Content-Type": "application/json"
-      },
+  async function loadSearchData() {
+    if ($searchBarData?.length !== 0) {
+      return;
+    } else {
+      // make the GET request to the endpoint
+      const response = await fetch("/api/searchbar-data", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
       });
-  
+
       $searchBarData = await response.json();
     }
-     
-  
   }
 
+  let previousRealtimePrice = null;
+  let previousTicker;
+  let socket;
 
+  let isScrolled = false;
+  let logoUrl;
 
-    let previousRealtimePrice = null;
-    let previousTicker;
-    let socket;
+  let userWatchList = data?.getUserWatchlist ?? [];
+  let isTickerIncluded;
+  let holdingShares = 0;
+  let availableCash = 0;
 
-    
-    let isScrolled = false;
-    let logoUrl;
-      
-    let userWatchList = data?.getUserWatchlist ?? [];
-    let isTickerIncluded; 
-    let holdingShares = 0;
-    let availableCash = 0;
-    
-    let displaySection = '';
+  let displaySection = "";
 
+  let cryptoProfile;
 
-    let cryptoProfile;
-    
-
-function shareContent(url) {
-    
-  if (navigator.share) {
-      navigator.share({
-        title: document.title,
-        url,
-      })
-        .then(() => console.log('Content shared successfully.'))
-        .catch((error) => console.log('Error sharing content:', error));
+  function shareContent(url) {
+    if (navigator.share) {
+      navigator
+        .share({
+          title: document.title,
+          url,
+        })
+        .then(() => console.log("Content shared successfully."))
+        .catch((error) => console.log("Error sharing content:", error));
     } else {
-      toast.error('Sharing is not supported by your device', {
-        style: 'background: #333; color: #fff;'
-        });
-
-  }
-  
-}
-
-
-function handleTypeOfTrade(state:string)
-{
-  if (state === 'buy')
-  {
-    const closePopup = document.getElementById("buyTradeModal");
-    closePopup?.dispatchEvent(new MouseEvent('click'))
+      toast.error("Sharing is not supported by your device", {
+        style: "background: #333; color: #fff;",
+      });
+    }
   }
 
-  else if (state === 'sell')
-  {
-    const closePopup = document.getElementById("sellTradeModal");
-    closePopup?.dispatchEvent(new MouseEvent('click'))
+  function handleTypeOfTrade(state: string) {
+    if (state === "buy") {
+      const closePopup = document.getElementById("buyTradeModal");
+      closePopup?.dispatchEvent(new MouseEvent("click"));
+    } else if (state === "sell") {
+      const closePopup = document.getElementById("sellTradeModal");
+      closePopup?.dispatchEvent(new MouseEvent("click"));
+    }
   }
 
-  
-}
-
-
-function scrollToItem(itemId) {
+  function scrollToItem(itemId) {
     const item = document.getElementById(itemId);
     if (item) {
-      
-      item.scrollIntoView({ behavior: 'smooth' });
-      window.scrollTo(0,0)
+      item.scrollIntoView({ behavior: "smooth" });
+      window.scrollTo(0, 0);
     }
   }
 
-    
-function changeSection(state, item) {
-  scrollToItem(item);
+  function changeSection(state, item) {
+    scrollToItem(item);
 
-  const sectionMap = {
-    stats: "/stats",
-    forecast: "/forecast",
-    news: "/news",
-  };
-
-  if (state !== 'overview' && sectionMap[state]) {
-    displaySection = state;
-    //goto(`/crypto/${$cryptoTicker}${sectionMap[state]}`);
-  } else {
-    displaySection = 'overview';
-    //goto(`/crypto/${$cryptoTicker}/`);
-  }
-}
-
-    
-
-
-async function toggleUserWatchlist(watchListId: string) {
-  try {
-    isTickerIncluded = !isTickerIncluded;
-
-    const watchlistIndex = userWatchList?.findIndex(item => item?.id === watchListId);
-
-    if (watchlistIndex !== -1) {
-      const existingTickerIndex = userWatchList[watchlistIndex]?.ticker?.indexOf($cryptoTicker);
-
-      if (existingTickerIndex !== -1) {
-        // If the $cryptoTicker exists, remove it from the array
-        userWatchList[watchlistIndex]?.ticker?.splice(existingTickerIndex, 1);
-      } else {
-        // If the $cryptoTicker doesn't exist, add it to the array
-        userWatchList[watchlistIndex]?.ticker?.push($cryptoTicker);
-      }
-
-      // Update the userWatchList
-      userWatchList = [...userWatchList];
-    }
-
-
-    const postData = {
-      'watchListId': watchListId,
-      'ticker': $cryptoTicker,
+    const sectionMap = {
+      stats: "/stats",
+      forecast: "/forecast",
+      news: "/news",
     };
 
-    const response = await fetch('/api/update-watchlist', {
-      method: 'POST',
-      headers: {
-         "Content-Type": "application/json"
-      },
-      body: JSON.stringify(postData),
-    });
-
-    if (!response.ok) {
-      throw new Error('Network response was not ok');
+    if (state !== "overview" && sectionMap[state]) {
+      displaySection = state;
+      //goto(`/crypto/${$cryptoTicker}${sectionMap[state]}`);
+    } else {
+      displaySection = "overview";
+      //goto(`/crypto/${$cryptoTicker}/`);
     }
-
-    const output = await response.json();
-
-    // Update the userWatchList with the response from the server
-    if( watchlistIndex !== -1)
-    {
-      userWatchList[watchlistIndex] = output;
-      userWatchList = [...userWatchList];
-    }
-    else {
-      userWatchList = [...userWatchList, output];
-    }
-
-  } catch (error) {
-    console.error('An error occurred:', error);
-    // Handle the error appropriately (e.g., show an error message to the user)
   }
-}
-   
 
+  async function toggleUserWatchlist(watchListId: string) {
+    try {
+      isTickerIncluded = !isTickerIncluded;
 
+      const watchlistIndex = userWatchList?.findIndex(
+        (item) => item?.id === watchListId,
+      );
 
+      if (watchlistIndex !== -1) {
+        const existingTickerIndex =
+          userWatchList[watchlistIndex]?.ticker?.indexOf($cryptoTicker);
 
-function handleScroll() {
+        if (existingTickerIndex !== -1) {
+          // If the $cryptoTicker exists, remove it from the array
+          userWatchList[watchlistIndex]?.ticker?.splice(existingTickerIndex, 1);
+        } else {
+          // If the $cryptoTicker doesn't exist, add it to the array
+          userWatchList[watchlistIndex]?.ticker?.push($cryptoTicker);
+        }
+
+        // Update the userWatchList
+        userWatchList = [...userWatchList];
+      }
+
+      const postData = {
+        watchListId: watchListId,
+        ticker: $cryptoTicker,
+      };
+
+      const response = await fetch("/api/update-watchlist", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(postData),
+      });
+
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      const output = await response.json();
+
+      // Update the userWatchList with the response from the server
+      if (watchlistIndex !== -1) {
+        userWatchList[watchlistIndex] = output;
+        userWatchList = [...userWatchList];
+      } else {
+        userWatchList = [...userWatchList, output];
+      }
+    } catch (error) {
+      console.error("An error occurred:", error);
+      // Handle the error appropriately (e.g., show an error message to the user)
+    }
+  }
+
+  function handleScroll() {
     // Check the scroll position
     isScrolled = window.scrollY > 0;
   }
 
-  
-function sendMessage(message) {
-  if (socket && socket.readyState === WebSocket.OPEN) {
-    socket.send(message);
-  } else {
-    console.error('WebSocket is not open. Unable to send message.');
-  }
-}
-
-
-async function websocketRealtimeData() {
-
-  previousTicker = $cryptoTicker;
-  try {
-    socket = new WebSocket(data?.wsURL+"/realtime-crypto-data");
-
-    socket.addEventListener('open', () => {
-      //console.log('WebSocket connection opened');
-      
-      // Send the initial value of cryptoTicker
-      sendMessage($cryptoTicker?.toLowerCase());
-    });
-    
-
-    socket.addEventListener('message', (event) => {
-      const data = event.data;
-      //console.log('Received message:', data);
-      try {
-
-        $realtimePrice = typeof JSON.parse(data)?.bp !== 'undefined' ? JSON.parse(data)?.bp : null;
-        //console.log('Received message:', $realtimePrice);
-
-
-        if ($realtimePrice > previousRealtimePrice) {
-          $priceIncrease = true;
-          previousRealtimePrice = $realtimePrice;
-        } else if ($realtimePrice < previousRealtimePrice) {
-          $priceIncrease = false;
-          previousRealtimePrice = $realtimePrice;
-        }
-
-
-        $isCrosshairMoveActive = false;
-
-
-      }
-      catch(e) {
-        console.log(e)
-      }
-    
-  
-  });
-
-
-
-  socket.addEventListener('close', (event) => {
-    console.log('WebSocket connection closed:', event.reason);
-    // Handle disconnection, you might want to attempt to reconnect here
-  });
-} catch (error) {
-  console.error('WebSocket connection error:', error);
-  // Handle connection errors here
-}
-}
-
-
-let LoginPopup;
-let PriceAlert;
-
-    
-onMount(async () => {
-  
-    if(!data?.user)
-    {
-      LoginPopup = (await import('$lib/components/LoginPopup.svelte')).default;
+  function sendMessage(message) {
+    if (socket && socket.readyState === WebSocket.OPEN) {
+      socket.send(message);
+    } else {
+      console.error("WebSocket is not open. Unable to send message.");
     }
-    else {
+  }
+
+  async function websocketRealtimeData() {
+    previousTicker = $cryptoTicker;
+    try {
+      socket = new WebSocket(data?.wsURL + "/realtime-crypto-data");
+
+      socket.addEventListener("open", () => {
+        //console.log('WebSocket connection opened');
+
+        // Send the initial value of cryptoTicker
+        sendMessage($cryptoTicker?.toLowerCase());
+      });
+
+      socket.addEventListener("message", (event) => {
+        const data = event.data;
+        //console.log('Received message:', data);
+        try {
+          $realtimePrice =
+            typeof JSON.parse(data)?.bp !== "undefined"
+              ? JSON.parse(data)?.bp
+              : null;
+          //console.log('Received message:', $realtimePrice);
+
+          if ($realtimePrice > previousRealtimePrice) {
+            $priceIncrease = true;
+            previousRealtimePrice = $realtimePrice;
+          } else if ($realtimePrice < previousRealtimePrice) {
+            $priceIncrease = false;
+            previousRealtimePrice = $realtimePrice;
+          }
+
+          $isCrosshairMoveActive = false;
+        } catch (e) {
+          console.log(e);
+        }
+      });
+
+      socket.addEventListener("close", (event) => {
+        console.log("WebSocket connection closed:", event.reason);
+        // Handle disconnection, you might want to attempt to reconnect here
+      });
+    } catch (error) {
+      console.error("WebSocket connection error:", error);
+      // Handle connection errors here
+    }
+  }
+
+  let LoginPopup;
+  let PriceAlert;
+
+  onMount(async () => {
+    if (!data?.user) {
+      LoginPopup = (await import("$lib/components/LoginPopup.svelte")).default;
+    } else {
       /*
       AddPortfolio = (await import('$lib/components/AddPortfolio.svelte')).default;
       BuyTrade = (await import('$lib/components/BuyTrade.svelte')).default;
       SellTrade = (await import('$lib/components/SellTrade.svelte')).default;
       */
-      PriceAlert = (await import('$lib/components/PriceAlert.svelte')).default;
+      PriceAlert = (await import("$lib/components/PriceAlert.svelte")).default;
     }
-   
+
     //const startTime = currentDateTime.set({ hour: 15, minute: 30 });
     //const endTime = currentDateTime.set({ hour: 22, minute: 0 });
     // Check if it's not a weekend and the current time is within the specified range
 
-    await websocketRealtimeData()
+    await websocketRealtimeData();
 
-  
     // Add a scroll event listener
-    window.addEventListener('scroll', handleScroll);
+    window.addEventListener("scroll", handleScroll);
 
     return () => {
-    // Remove the event listener when the component is unmounted
-    window.removeEventListener('scroll', handleScroll);
+      // Remove the event listener when the component is unmounted
+      window.removeEventListener("scroll", handleScroll);
     };
+  });
 
-});
+  afterUpdate(async () => {
+    if (previousTicker !== $cryptoTicker && typeof socket !== "undefined") {
+      previousTicker = $cryptoTicker;
+      //socket.send('close')
+      socket?.close();
+      await new Promise((resolve, reject) => {
+        socket?.addEventListener("close", resolve);
+      });
 
-afterUpdate( async () => {
- 
- if(previousTicker !== $cryptoTicker && typeof socket !== 'undefined')
- {
-   previousTicker = $cryptoTicker;
-   //socket.send('close')
-   socket?.close();
-   await new Promise((resolve, reject) => {
-     socket?.addEventListener('close', resolve);
-   });
-  
-   if(socket?.readyState === WebSocket?.CLOSED)
-   {
-     await websocketRealtimeData()
-     console.log('connecting again')
-   }
+      if (socket?.readyState === WebSocket?.CLOSED) {
+        await websocketRealtimeData();
+        console.log("connecting again");
+      }
+    }
+  });
 
- }
+  onDestroy(() => {
+    try {
+      //socket?.send('close')
+      socket?.close();
+    } catch (e) {
+      console.log(e);
+    }
 
-});
+    //$displayCompanyName = '';
+    $currentPortfolioPrice = null;
+    $currentPrice = null;
+    $priceIncrease = null;
+    $traded = false;
+  });
 
+  $: {
+    if (
+      $cryptoTicker &&
+      $cryptoTicker?.length !== 0 &&
+      typeof window !== "undefined"
+    ) {
+      // add a check to see if running on client-side
+      cryptoProfile = data?.getCryptoProfile;
+      $currentPortfolioPrice = data?.getStockQuote?.price;
 
-onDestroy(() => {
-  try {
-    //socket?.send('close')
-    socket?.close()
-  }
-  catch(e) {
-    console.log(e)
-  }  
- 
-  //$displayCompanyName = '';
-  $currentPortfolioPrice = null;
-  $currentPrice = null;
-  $priceIncrease = null;
-  $traded = false
-  
-});
-
-
-    
-    
-$: {
-  if ($cryptoTicker && $cryptoTicker?.length !== 0 && typeof window !== 'undefined') // add a check to see if running on client-side
-  {
-    
-    cryptoProfile = data?.getCryptoProfile;
-    $currentPortfolioPrice = data?.getStockQuote?.price;
-    
-    const asyncFunctions = [
-      ];
+      const asyncFunctions = [];
 
       Promise.all(asyncFunctions)
-          .then((results) => {
-            
-          })
-          .catch((error) => {
-            console.error('An error occurred:', error);
-          });
-  
+        .then((results) => {})
+        .catch((error) => {
+          console.error("An error occurred:", error);
+        });
+    }
   }
 
-}
-    
-    
-$: {
-  if(userWatchList)
-  {
-    isTickerIncluded = userWatchList?.some(item => item.user === data?.user?.id && item?.ticker?.includes($cryptoTicker));
+  $: {
+    if (userWatchList) {
+      isTickerIncluded = userWatchList?.some(
+        (item) =>
+          item.user === data?.user?.id && item?.ticker?.includes($cryptoTicker),
+      );
+    }
   }
-}
 
-
-
-$: {
-  if(typeof window !== 'undefined' && $traded && data?.user && $cryptoTicker?.length !== 0)
-  {
+  $: {
+    if (
+      typeof window !== "undefined" &&
+      $traded &&
+      data?.user &&
+      $cryptoTicker?.length !== 0
+    ) {
       $traded = false;
+    }
   }
-}
-    
 
+  $: charNumber = $screenWidth < 640 ? 12 : 25;
 
-$: charNumber = $screenWidth < 640 ? 12 : 25;
-
-$: {
-  if($cryptoTicker && typeof window !== 'undefined' && $page.url.pathname === `/crypto/${$cryptoTicker}`)
-  {
-    displaySection = 'overview';
+  $: {
+    if (
+      $cryptoTicker &&
+      typeof window !== "undefined" &&
+      $page.url.pathname === `/crypto/${$cryptoTicker}`
+    ) {
+      displaySection = "overview";
+    }
   }
-}
 
-$: {
-  if($page.url.pathname)
-  {
-      const parts = $page?.url?.pathname?.split('/');
+  $: {
+    if ($page.url.pathname) {
+      cryptoTicker.update((value) => data?.getParams);
+      assetType.update((value) => "crypto");
+
+      displayCompanyName.update((value) => data?.companyName);
+
+      const parts = $page?.url?.pathname?.split("/");
       const sectionMap = {
-        'stats': 'stats',
-        'forecast': 'forecast',
-        'congress-trading': 'congress-trading',
-        'news': 'news'
+        stats: "stats",
+        forecast: "forecast",
+        "congress-trading": "congress-trading",
+        news: "news",
       };
-      displaySection = sectionMap[parts?.find(part => Object?.keys(sectionMap)?.includes(part))] || 'overview';
+      displaySection =
+        sectionMap[
+          parts?.find((part) => Object?.keys(sectionMap)?.includes(part))
+        ] || "overview";
+    }
   }
-}
-
 </script>
 
-<body class="bg-[#09090B] pb-40 w-full max-w-screen min-h-screen sm:max-w-7xl xl:max-w-screen-2xl overflow-hidden">    
+<body
+  class="bg-[#09090B] pb-40 w-full max-w-screen min-h-screen sm:max-w-7xl xl:max-w-screen-2xl overflow-hidden"
+>
   <!-- Page wrapper -->
   <div class="flex flex-col w-full">
-      <main class="grow w-full">
-          <section class="w-full">
-              <div class="w-full">
-                  <div class="sm:flex sm:justify-start w-full">
-           <!--Start Mobile Navbar-->
-           <div class="fixed top-0 left-0 right-0 z-20 bg-[#09090B] sm:hidden">
-            <div class="navbar w-full px-4 py-2">
-              <div class="{isScrolled ? 'border-b border-slate-800 ease-in' : 'ease-out'} m-auto w-full">
-      
-                <div class="flex-1 flex-shrink-0 flex flex-row items-center justify-between -mt-2">
-      
-                    <label on:click={() => goto('/')} class="ml-2 cursor-pointer">
-                        <svg class="w-5 h-5 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><g transform="rotate(-90 512 512)"><path fill="white" d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8l316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z"/></g></svg>
+    <main class="grow w-full">
+      <section class="w-full">
+        <div class="w-full">
+          <div class="sm:flex sm:justify-start w-full">
+            <!--Start Mobile Navbar-->
+            <div class="fixed top-0 left-0 right-0 z-20 bg-[#09090B] sm:hidden">
+              <div class="navbar w-full px-4 py-2">
+                <div
+                  class="{isScrolled
+                    ? 'border-b border-slate-800 ease-in'
+                    : 'ease-out'} m-auto w-full"
+                >
+                  <div
+                    class="flex-1 flex-shrink-0 flex flex-row items-center justify-between -mt-2"
+                  >
+                    <label
+                      on:click={() => goto("/")}
+                      class="ml-2 cursor-pointer"
+                    >
+                      <svg
+                        class="w-5 h-5 inline-block"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 1024 1024"
+                        ><g transform="rotate(-90 512 512)"
+                          ><path
+                            fill="white"
+                            d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8l316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z"
+                          /></g
+                        ></svg
+                      >
                     </label>
-      
-                    <div class="{!isScrolled ? 'hidden' : 'flex flex-col items-center ml-6 transition-transform ease-in'}">
-                        <span class="text-white text-[0.70rem] font-medium text-opacity-[0.6]">
+
+                    <div
+                      class={!isScrolled
+                        ? "hidden"
+                        : "flex flex-col items-center ml-6 transition-transform ease-in"}
+                    >
+                      <span
+                        class="text-white text-[0.70rem] font-medium text-opacity-[0.6]"
+                      >
                         {$cryptoTicker}
-                        </span>
-                        <span class="text-white font-medium text-sm">
-                          {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
-                            ${$currentPortfolioPrice}
-                          {:else}
-                          ---
-                          {/if}
-                        </span>
-                    </div>
-                    
-                      <!--Start Search Button-->
-                      <label on:click={loadSearchData} class="ml-auto mr-4" for="searchBarModal">
-                        <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314"/></svg>
-                      </label>
-                        <!--End Search Button-->
-      
-
-                       <!--Start Share Button-->
-                      <label class="mr-4" on:click={() => shareContent('https://stocknear.com/crypto/'+$cryptoTicker)} >
-                        <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336 192h40a40 40 0 0 1 40 40v192a40 40 0 0 1-40 40H136a40 40 0 0 1-40-40V232a40 40 0 0 1 40-40h40m160-64l-80-80l-80 80m80 193V48"/></svg>
-                      </label>
-                        <!--End Share Button-->
-
-                
-      
-                        <!--Start Watchlist-->
-                                          
-                        {#if data?.user}
-                        <div class="flex flex-col mr-4">
-                          {#if userWatchList?.length !== 0}
-                            <label for="addWatchListModal" class="cursor-pointer flex-shrink-0">
-                              {#if isTickerIncluded}
-                                <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
-                                {:else}
-                                <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
-                              {/if}
-                            </label>
-
-                          {:else if userWatchList?.length === 0}
-                            <label on:click={() => toggleUserWatchlist('firstList')} class="cursor-pointer flex-shrink-0">
-                              {#if isTickerIncluded}
-                              <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
-                              {:else}
-                              <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
-                              {/if}
-                          </label>
-                         
-                          {/if}
-                        </div>
+                      </span>
+                      <span class="text-white font-medium text-sm">
+                        {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
+                          ${$currentPortfolioPrice}
                         {:else}
-                          <label for="userLogin" class="cursor-pointer flex-shrink-0 text-white mr-4">
-                            <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>
+                          ---
+                        {/if}
+                      </span>
+                    </div>
+
+                    <!--Start Search Button-->
+                    <label
+                      on:click={loadSearchData}
+                      class="ml-auto mr-4"
+                      for="searchBarModal"
+                    >
+                      <svg
+                        class="w-6 h-6 inline-block"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        ><path
+                          fill="none"
+                          stroke="white"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="1.5"
+                          d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314"
+                        /></svg
+                      >
+                    </label>
+                    <!--End Search Button-->
+
+                    <!--Start Share Button-->
+                    <label
+                      class="mr-4"
+                      on:click={() =>
+                        shareContent(
+                          "https://stocknear.com/crypto/" + $cryptoTicker,
+                        )}
+                    >
+                      <svg
+                        class="w-6 h-6 inline-block"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 512 512"
+                        ><path
+                          fill="none"
+                          stroke="white"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="32"
+                          d="M336 192h40a40 40 0 0 1 40 40v192a40 40 0 0 1-40 40H136a40 40 0 0 1-40-40V232a40 40 0 0 1 40-40h40m160-64l-80-80l-80 80m80 193V48"
+                        /></svg
+                      >
+                    </label>
+                    <!--End Share Button-->
+
+                    <!--Start Watchlist-->
+
+                    {#if data?.user}
+                      <div class="flex flex-col mr-4">
+                        {#if userWatchList?.length !== 0}
+                          <label
+                            for="addWatchListModal"
+                            class="cursor-pointer flex-shrink-0"
+                          >
+                            {#if isTickerIncluded}
+                              <svg
+                                class="w-6 h-6 inline-block"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 16 16"
+                                ><path
+                                  fill="white"
+                                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
+                                /></svg
+                              >
+                            {:else}
+                              <svg
+                                class="w-6 h-6 inline-block"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 16 16"
+                                ><path
+                                  fill="white"
+                                  d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
+                                /></svg
+                              >
+                            {/if}
+                          </label>
+                        {:else if userWatchList?.length === 0}
+                          <label
+                            on:click={() => toggleUserWatchlist("firstList")}
+                            class="cursor-pointer flex-shrink-0"
+                          >
+                            {#if isTickerIncluded}
+                              <svg
+                                class="w-6 h-6 inline-block"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 16 16"
+                                ><path
+                                  fill="white"
+                                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
+                                /></svg
+                              >
+                            {:else}
+                              <svg
+                                class="w-6 h-6 inline-block"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 16 16"
+                                ><path
+                                  fill="white"
+                                  d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
+                                /></svg
+                              >
+                            {/if}
                           </label>
                         {/if}
-                      <!--End Watchlist-->
-                      
-                      <!--Start Price Alert-->
-                      <label on:click={() => $openPriceAlert = true} for={data?.user ? 'priceAlertModal' : 'userLogin'} class="mr-2">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 inline-block mt-1" viewBox="0 0 24 24"><g fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M3 5.231L6.15 3M21 5.231L17.85 3"/><circle cx="12" cy="13" r="8"/><path d="M9.5 13h5M12 10.5v5"/></g></svg>
+                      </div>
+                    {:else}
+                      <label
+                        for="userLogin"
+                        class="cursor-pointer flex-shrink-0 text-white mr-4"
+                      >
+                        <svg
+                          class="w-6 h-6 inline-block"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 16 16"
+                          ><path
+                            fill="white"
+                            d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
+                          /></svg
+                        >
                       </label>
-                      <!--End Price Alert -->
-      
-                      
+                    {/if}
+                    <!--End Watchlist-->
+
+                    <!--Start Price Alert-->
+                    <label
+                      on:click={() => ($openPriceAlert = true)}
+                      for={data?.user ? "priceAlertModal" : "userLogin"}
+                      class="mr-2"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-7 h-7 inline-block mt-1"
+                        viewBox="0 0 24 24"
+                        ><g
+                          fill="none"
+                          stroke="white"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="1.5"
+                          ><path d="M3 5.231L6.15 3M21 5.231L17.85 3" /><circle
+                            cx="12"
+                            cy="13"
+                            r="8"
+                          /><path d="M9.5 13h5M12 10.5v5" /></g
+                        ></svg
+                      >
+                    </label>
+                    <!--End Price Alert -->
                   </div>
+                </div>
               </div>
             </div>
-          </div>
-          <!--End Mobile Navbar-->
-         
-      
-          <div class="pt-20 sm:pt-0 w-auto max-w-3xl lg:max-w-content 2xl:max-w-6xl px-3 sm:px-0">     
-                    
-            <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
+            <!--End Mobile Navbar-->
+
+            <div
+              class="pt-20 sm:pt-0 w-auto max-w-3xl lg:max-w-content 2xl:max-w-6xl px-3 sm:px-0"
+            >
+              <div
+                class="md:flex md:justify-between md:divide-x md:divide-slate-800"
+              >
                 <!-- Main content -->
                 <div class="pb-12 md:pb-20 w-full 2xl:max-w-5xl">
-                    <div class="md:pr-6 lg:pr-10">
-                                 
-                                 
-                
-                                    <!-----Start-Header-CandleChart-Indicators------>
-      
-                                    <div class="m-auto pl-0 sm:pl-4 overflow-hidden mb-5 md:mt-10">
-      
-                                      <div class="hidden sm:flex flex-row w-full justify-between items-center pb-10">
+                  <div class="md:pr-6 lg:pr-10">
+                    <!-----Start-Header-CandleChart-Indicators------>
 
-                                          <!--Start Watchlist-->
-                                          
-                                          {#if data?.user}
-                                          <div class="flex flex-col ml-auto mr-2">
-                                            {#if userWatchList?.length !== 0}
-                                            <div class="flex-shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center">
-                                              <label for="addWatchListModal" class="cursor-pointer flex-shrink-0">
-                                                {#if isTickerIncluded}
-                                                  <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
-                                                  {:else}
-                                                  <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
-                                                {/if}
-                                              </label>
-                                            </div>
-      
-                                            {:else if userWatchList?.length === 0}
-                                            <div class="flex-shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center">
-                                              <label on:click={() => toggleUserWatchlist('firstList')} class="cursor-pointer flex-shrink-0">
-                                                {#if isTickerIncluded}
-                                                <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
-                                                {:else}
-                                                <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
-                                                {/if}
-                                            </label>
-                                            </div>
-                                           
-                                            {/if}
-                                          </div>
-                                          {:else}
-                                          <div class="flex-shrink-0 ml-auto mr-2 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center">
-                                            <label for="userLogin" class="cursor-pointer flex-shrink-0 text-white">
-                                              <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>
-                                            </label>
-                                          </div>
-                                          {/if}
-                                        <!--End Watchlist-->
+                    <div
+                      class="m-auto pl-0 sm:pl-4 overflow-hidden mb-5 md:mt-10"
+                    >
+                      <div
+                        class="hidden sm:flex flex-row w-full justify-between items-center pb-10"
+                      >
+                        <!--Start Watchlist-->
 
-                                        <!--Start Price Alert -->
-                                        
-                                        <div class="flex-shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center">
-                                          <label on:click={() => $openPriceAlert = true} for={data?.user ? 'priceAlertModal' : 'userLogin'} class="cursor-pointer flex-shrink-0 text-white">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 inline-block" viewBox="0 0 24 24"><g fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M3 5.231L6.15 3M21 5.231L17.85 3"/><circle cx="12" cy="13" r="8"/><path d="M9.5 13h5M12 10.5v5"/></g></svg>
-                                          </label>
-                                        </div>
-                                        <!--End Price Alert -->
-                                      </div>
-                                      
-      
-                                      <!-- svelte-ignore a11y-click-events-have-key-events -->
-                                      <!-- svelte-ignore a11y-label-has-associated-control -->
-                                      
-                                      <div class="flex items-center w-full">
-                                        <div class="flex flex-row justify-start items-center mb-5 mt-2">
-                                          <!--<img class="rounded-full w-10 h-10" src={logoUrl} alt="" />-->
-                                          <div class="rounded-full w-10 h-10 relative bg-[#141417] flex items-center justify-center border border-slate-800">
-                                            <img style="clip-path: circle(50%);" class="w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${$cryptoTicker?.toUpperCase()}.png`} loading="lazy"/>
-                                          </div>
-                                          
-                                          <div class="flex flex-col items-start ml-2 sm:ml-3">
-                                            <span class="text-xs text-blue-400">
-                                              {$cryptoTicker?.toUpperCase()}
-                                            </span>
-                                            <span class="text-sm sm:text-xl font-medium text-slate-100">
-                                              {$displayCompanyName?.length > charNumber ? $displayCompanyName?.slice(0,charNumber) + "..." : $displayCompanyName}
-                                            </span>
-                                          </div>
-                                        </div>
+                        {#if data?.user}
+                          <div class="flex flex-col ml-auto mr-2">
+                            {#if userWatchList?.length !== 0}
+                              <div
+                                class="flex-shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center"
+                              >
+                                <label
+                                  for="addWatchListModal"
+                                  class="cursor-pointer flex-shrink-0"
+                                >
+                                  {#if isTickerIncluded}
+                                    <svg
+                                      class="w-7 h-7 inline-block"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                      viewBox="0 0 16 16"
+                                      ><path
+                                        fill="white"
+                                        d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
+                                      /></svg
+                                    >
+                                  {:else}
+                                    <svg
+                                      class="w-7 h-7 inline-block"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                      viewBox="0 0 16 16"
+                                      ><path
+                                        fill="white"
+                                        d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
+                                      /></svg
+                                    >
+                                  {/if}
+                                </label>
+                              </div>
+                            {:else if userWatchList?.length === 0}
+                              <div
+                                class="flex-shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center"
+                              >
+                                <label
+                                  on:click={() =>
+                                    toggleUserWatchlist("firstList")}
+                                  class="cursor-pointer flex-shrink-0"
+                                >
+                                  {#if isTickerIncluded}
+                                    <svg
+                                      class="w-7 h-7 inline-block"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                      viewBox="0 0 16 16"
+                                      ><path
+                                        fill="white"
+                                        d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
+                                      /></svg
+                                    >
+                                  {:else}
+                                    <svg
+                                      class="w-7 h-7 inline-block"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                      viewBox="0 0 16 16"
+                                      ><path
+                                        fill="white"
+                                        d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
+                                      /></svg
+                                    >
+                                  {/if}
+                                </label>
+                              </div>
+                            {/if}
+                          </div>
+                        {:else}
+                          <div
+                            class="flex-shrink-0 ml-auto mr-2 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center"
+                          >
+                            <label
+                              for="userLogin"
+                              class="cursor-pointer flex-shrink-0 text-white"
+                            >
+                              <svg
+                                class="w-7 h-7 inline-block"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 16 16"
+                                ><path
+                                  fill="white"
+                                  d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
+                                /></svg
+                              >
+                            </label>
+                          </div>
+                        {/if}
+                        <!--End Watchlist-->
 
+                        <!--Start Price Alert -->
 
-    
-                                        
-                                        <!--Start Trade-->
-                                        <!--
+                        <div
+                          class="flex-shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center"
+                        >
+                          <label
+                            on:click={() => ($openPriceAlert = true)}
+                            for={data?.user ? "priceAlertModal" : "userLogin"}
+                            class="cursor-pointer flex-shrink-0 text-white"
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              class="w-8 h-8 inline-block"
+                              viewBox="0 0 24 24"
+                              ><g
+                                fill="none"
+                                stroke="white"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="1.5"
+                                ><path
+                                  d="M3 5.231L6.15 3M21 5.231L17.85 3"
+                                /><circle cx="12" cy="13" r="8" /><path
+                                  d="M9.5 13h5M12 10.5v5"
+                                /></g
+                              ></svg
+                            >
+                          </label>
+                        </div>
+                        <!--End Price Alert -->
+                      </div>
+
+                      <!-- svelte-ignore a11y-click-events-have-key-events -->
+                      <!-- svelte-ignore a11y-label-has-associated-control -->
+
+                      <div class="flex items-center w-full">
+                        <div
+                          class="flex flex-row justify-start items-center mb-5 mt-2"
+                        >
+                          <!--<img class="rounded-full w-10 h-10" src={logoUrl} alt="" />-->
+                          <div
+                            class="rounded-full w-10 h-10 relative bg-[#141417] flex items-center justify-center border border-slate-800"
+                          >
+                            <img
+                              style="clip-path: circle(50%);"
+                              class="w-6 h-6"
+                              src={`https://financialmodelingprep.com/image-stock/${$cryptoTicker?.toUpperCase()}.png`}
+                              loading="lazy"
+                            />
+                          </div>
+
+                          <div class="flex flex-col items-start ml-2 sm:ml-3">
+                            <span class="text-xs text-blue-400">
+                              {$cryptoTicker?.toUpperCase()}
+                            </span>
+                            <span
+                              class="text-sm sm:text-xl font-medium text-slate-100"
+                            >
+                              {$displayCompanyName?.length > charNumber
+                                ? $displayCompanyName?.slice(0, charNumber) +
+                                  "..."
+                                : $displayCompanyName}
+                            </span>
+                          </div>
+                        </div>
+
+                        <!--Start Trade-->
+                        <!--
                                         <div class="hidden sm:flex ml-auto">
                                         {#if holdingShares !== 0 && data?.user}
                                         
@@ -601,76 +766,129 @@ $: {
                                         {/if}
                                       </div>
                                       -->
-                                      <!--End Trade-->
-                     
-                                      </div>
-                                       
-      
-                       
-                                    
-      
-                                    </div>
-                                    <!-----End-Header-CandleChart-Indicators------>
-      
-      
-                                      <!--Start Ticker Section-->
-                                      
-                                      <!--<div class="w-full max-w-3xl sm:max-w-2xl m-auto pt-2 pb-5 sm:pl-3 sticky z-20 bg-[#09090B]"  style="top: {$screenWidth < 520 && $isScrollingUp ? '4rem' : '0rem'};">-->
-                                        <div class="-ml-2 sm:ml-4 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar no-scrollbar' : ''} mb-2" >
-                                          <ul class="pr-4 sm:pr-0 w-screen font-medium flex flex-row items-center bg-[#09090B] overflow-x-scroll space-x-3 rtl:space-x-reverse py-2">
-                                            <li class="cursor-pointer flex flex-col items-center">
-                                              <a href={`/crypto/${$cryptoTicker}`} id="item1" on:click={() => (changeSection('overview','item1'))} class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'overview' ? 'text-white ' : 'bg-[#09090B]'}" >
-                                                Overview
-                                              </a>
-                                              <div class="{displaySection === 'overview' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]" />
-                                            </li>
-                                            <li class="cursor-pointer flex flex-col items-center">
-                                              <a href={`/crypto/${$cryptoTicker}/stats`} id="item2" on:click={() => (changeSection('stats','item2'))} class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'stats' ? 'text-white ' : 'bg-[#09090B]'}" >Stats</a>
-                                              <div class="{displaySection === 'stats' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]" />
-                                            </li>
-                                            <li class="cursor-pointer flex flex-col items-center">
-                                              <a href={`/crypto/${$cryptoTicker}/forecast`} id="item2" on:click={() => (changeSection('forecast','item3'))} class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'forecast' ? 'text-white ' : 'bg-[#09090B]'}" >
-                                                Forecast
-                                              </a>
-                                              <div class="{displaySection === 'forecast' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]" />
-                                            </li>
-                                            <li class="cursor-pointer flex flex-col items-center">
-                                              <a href={`/crypto/${$cryptoTicker}/congress-trading`} id="item7" on:click={() => (changeSection('congress-trading','item7'))} class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'congress-trading' ? 'text-white ' : 'bg-[#09090B]'}" >
-                                                Insider
-                                              </a>
-                                              <div class="{displaySection === 'congress-trading' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]" />
-                                            </li>
-                                            <li class="cursor-pointer flex flex-col items-center">
-                                              <a href={`/crypto/${$cryptoTicker}/news`} id="item7" on:click={() => (changeSection('news','item7'))} class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'news' ? 'text-white ' : 'bg-[#09090B]'}" >
-                                                News
-                                              </a>
-                                              <div class="{displaySection === 'news' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]" />
-                                            </li>
-                                          </ul>
-                                        </div>
-                                        
-            
+                        <!--End Trade-->
+                      </div>
+                    </div>
+                    <!-----End-Header-CandleChart-Indicators------>
 
-                                      <!--Start-Main Content-->
-                                        <slot />
-                                      <!--End Main Content-->
-    
+                    <!--Start Ticker Section-->
 
-              
-                            </div>
-                        </div>
+                    <!--<div class="w-full max-w-3xl sm:max-w-2xl m-auto pt-2 pb-5 sm:pl-3 sticky z-20 bg-[#09090B]"  style="top: {$screenWidth < 520 && $isScrollingUp ? '4rem' : '0rem'};">-->
+                    <div
+                      class="-ml-2 sm:ml-4 w-screen sm:w-full {$screenWidth <
+                      640
+                        ? 'overflow-auto scrollbar no-scrollbar'
+                        : ''} mb-2"
+                    >
+                      <ul
+                        class="pr-4 sm:pr-0 w-screen font-medium flex flex-row items-center bg-[#09090B] overflow-x-scroll space-x-3 rtl:space-x-reverse py-2"
+                      >
+                        <li class="cursor-pointer flex flex-col items-center">
+                          <a
+                            href={`/crypto/${$cryptoTicker}`}
+                            id="item1"
+                            on:click={() => changeSection("overview", "item1")}
+                            class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
+                            'overview'
+                              ? 'text-white '
+                              : 'bg-[#09090B]'}"
+                          >
+                            Overview
+                          </a>
+                          <div
+                            class="{displaySection === 'overview'
+                              ? 'bg-[#75D377]'
+                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]"
+                          />
+                        </li>
+                        <li class="cursor-pointer flex flex-col items-center">
+                          <a
+                            href={`/crypto/${$cryptoTicker}/stats`}
+                            id="item2"
+                            on:click={() => changeSection("stats", "item2")}
+                            class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
+                            'stats'
+                              ? 'text-white '
+                              : 'bg-[#09090B]'}">Stats</a
+                          >
+                          <div
+                            class="{displaySection === 'stats'
+                              ? 'bg-[#75D377]'
+                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
+                          />
+                        </li>
+                        <li class="cursor-pointer flex flex-col items-center">
+                          <a
+                            href={`/crypto/${$cryptoTicker}/forecast`}
+                            id="item2"
+                            on:click={() => changeSection("forecast", "item3")}
+                            class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
+                            'forecast'
+                              ? 'text-white '
+                              : 'bg-[#09090B]'}"
+                          >
+                            Forecast
+                          </a>
+                          <div
+                            class="{displaySection === 'forecast'
+                              ? 'bg-[#75D377]'
+                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
+                          />
+                        </li>
+                        <li class="cursor-pointer flex flex-col items-center">
+                          <a
+                            href={`/crypto/${$cryptoTicker}/congress-trading`}
+                            id="item7"
+                            on:click={() =>
+                              changeSection("congress-trading", "item7")}
+                            class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
+                            'congress-trading'
+                              ? 'text-white '
+                              : 'bg-[#09090B]'}"
+                          >
+                            Insider
+                          </a>
+                          <div
+                            class="{displaySection === 'congress-trading'
+                              ? 'bg-[#75D377]'
+                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
+                          />
+                        </li>
+                        <li class="cursor-pointer flex flex-col items-center">
+                          <a
+                            href={`/crypto/${$cryptoTicker}/news`}
+                            id="item7"
+                            on:click={() => changeSection("news", "item7")}
+                            class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
+                            'news'
+                              ? 'text-white '
+                              : 'bg-[#09090B]'}"
+                          >
+                            News
+                          </a>
+                          <div
+                            class="{displaySection === 'news'
+                              ? 'bg-[#75D377]'
+                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
+                          />
+                        </li>
+                      </ul>
+                    </div>
 
-                        <aside class="hidden lg:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20">
-                          <div class="sm:pl-10">
-                      
-                              <CryptoProfileCard
-                                  cryptoProfile = {cryptoProfile}
-                              />
-  
-  
-                            </div>
-                        </aside>
-                        <!--
+                    <!--Start-Main Content-->
+                    <slot />
+                    <!--End Main Content-->
+                  </div>
+                </div>
+
+                <aside
+                  class="hidden lg:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20"
+                >
+                  <div class="sm:pl-10">
+                    <CryptoProfileCard {cryptoProfile} />
+                  </div>
+                </aside>
+                <!--
                         {#if $screenWidth < 640 && MobileStockNavbar}
                           <MobileStockNavbar 
                             logoUrl={logoUrl}
@@ -683,8 +901,7 @@ $: {
                         {/if}
                         -->
 
-
-                      <!--
+                <!--
                         <div class="sm:hidden fixed z-20 bottom-8 sm:bottom-10 right-5">
                           <div class="h-full mx-auto">        
                             <div class="flex items-center justify-end">
@@ -702,22 +919,19 @@ $: {
                           </div>
                         </div>
                         -->
-
-                                          
-
-                    </div>
-                </section>
-            </main>        
+              </div>
+            </div>
+          </div>
         </div>
-    </body>
-              
-            
-
+      </section>
+    </main>
+  </div>
+</body>
 
 <!--Start Login Modal-->
 {#if LoginPopup}
-  <LoginPopup form={$globalForm}/> 
-{/if}   
+  <LoginPopup form={$globalForm} />
+{/if}
 <!--End Login Modal-->
 
 <!--
@@ -743,126 +957,192 @@ $: {
 -->
 
 {#if PriceAlert}
-<PriceAlert 
-  data = {data}
-/>
+  <PriceAlert {data} />
 {/if}
 
-
-
-
-
 <!--Start Type of Trade-->
 
-
 <input type="checkbox" id="typeOfTrade" class="modal-toggle" />
 
-<dialog id="typeOfTrade" class="modal modal-bottom sm:modal-middle overflow-hidden">
+<dialog
+  id="typeOfTrade"
+  class="modal modal-bottom sm:modal-middle overflow-hidden"
+>
+  <label
+    for="typeOfTrade"
+    class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.08]"
+  ></label>
 
-
-  <label for="typeOfTrade"  class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.08]"></label>
-  
   <div class="modal-box w-full bg-[#000] border border-slate-600 pb-10">
-
-
-
-    <div class= "flex flex-col">
+    <div class="flex flex-col">
       <div class="text-white text-md flex flex-col flex-shrink-0">
-          <div class="rounded-full w-10 h-10 relative bg-gray-900 mb-2">
-              <img class="rounded-full w-6 h-6 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2" src={`https://financialmodelingprep.com/image-stock/${$cryptoTicker}.png`} />
-          </div>
-          <span class="mb-1">
-              {$displayCompanyName?.length > 30 ? $displayCompanyName?.slice(0, 30) + "..." : $displayCompanyName}
+        <div class="rounded-full w-10 h-10 relative bg-gray-900 mb-2">
+          <img
+            class="rounded-full w-6 h-6 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
+            src={`https://financialmodelingprep.com/image-stock/${$cryptoTicker}.png`}
+          />
+        </div>
+        <span class="mb-1">
+          {$displayCompanyName?.length > 30
+            ? $displayCompanyName?.slice(0, 30) + "..."
+            : $displayCompanyName}
+        </span>
+        <div class="flex flex-row items-center mb-10">
+          <span class="mb-1 text-sm font-medium">
+            Current Price: ${$currentPortfolioPrice}
           </span>
-          <div class="flex flex-row items-center mb-10">
-
-            <span class="mb-1 text-sm font-medium">
-                Current Price: ${$currentPortfolioPrice}
-            </span>
-            <span class="text-blue-400 text-sm font-medium ml-auto">
-              Holding Shares: {holdingShares}
-            </span>
-
-          </div>
+          <span class="text-blue-400 text-sm font-medium ml-auto">
+            Holding Shares: {holdingShares}
+          </span>
+        </div>
       </div>
-  </div>
+    </div>
 
+    <div class="text-white">
+      <h3 class="font-bold text-2xl mb-5">Type of Trade</h3>
 
-  <div class="text-white">
-    <h3 class="font-bold text-2xl mb-5">
-      Type of Trade
-    </h3>
-
-
-    <ul class="menu dropdown-content text-white bg-[#000] rounded -ml-6">
-      <li class="mb-3">
-        <label for="typeOfTrade" on:click={() => handleTypeOfTrade('buy')} class="cursor-pointer flex flex-row justify-start items-center">
-          <div class="rounded-full w-10 h-10 relative bg-gray-800">
-            <svg class="h-5 w-5 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="green"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect width="16" height="16" id="icon-bound" fill="none"></rect> <path d="M0,11h11.2l-2.6,2.6L10,15l6-6H0V11z M4.8,5l2.6-2.6L6,1L0,7h16V5H4.8z"></path> </g></svg>
-          </div>
-          <span class="ml-1 text-white text-lg font-medium">Buy {$cryptoTicker} Shares</span>
-          
-        </label>
-      </li>
-      <li class="mb-3">
-        <label for="typeOfTrade" on:click={() => handleTypeOfTrade('sell')} class="cursor-pointer flex flex-row justify-start items-center">
-          <div class="rounded-full w-10 h-10 relative bg-gray-800">
-            <svg class="h-5 w-5 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="red" d="M14.25 21.4q-.575.575-1.425.575T11.4 21.4l-8.8-8.8q-.275-.275-.438-.65T2 11.15V4q0-.825.588-1.413T4 2h7.15q.425 0 .8.163t.65.437l8.8 8.825q.575.575.575 1.413T21.4 14.25l-7.15 7.15ZM6.5 8q.625 0 1.063-.438T8 6.5q0-.625-.438-1.063T6.5 5q-.625 0-1.063.438T5 6.5q0 .625.438 1.063T6.5 8Z"/></svg>
-          </div>
-          <span class="ml-1 text-white text-lg font-medium">
-            Sell {$cryptoTicker} Shares
-          </span>
-        </label>
-      </li>
-    </ul>
-  </div>
+      <ul class="menu dropdown-content text-white bg-[#000] rounded -ml-6">
+        <li class="mb-3">
+          <label
+            for="typeOfTrade"
+            on:click={() => handleTypeOfTrade("buy")}
+            class="cursor-pointer flex flex-row justify-start items-center"
+          >
+            <div class="rounded-full w-10 h-10 relative bg-gray-800">
+              <svg
+                class="h-5 w-5 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
+                viewBox="0 0 16 16"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                fill="green"
+                ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                  id="SVGRepo_tracerCarrier"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></g><g id="SVGRepo_iconCarrier">
+                  <rect width="16" height="16" id="icon-bound" fill="none"
+                  ></rect>
+                  <path
+                    d="M0,11h11.2l-2.6,2.6L10,15l6-6H0V11z M4.8,5l2.6-2.6L6,1L0,7h16V5H4.8z"
+                  ></path>
+                </g></svg
+              >
+            </div>
+            <span class="ml-1 text-white text-lg font-medium"
+              >Buy {$cryptoTicker} Shares</span
+            >
+          </label>
+        </li>
+        <li class="mb-3">
+          <label
+            for="typeOfTrade"
+            on:click={() => handleTypeOfTrade("sell")}
+            class="cursor-pointer flex flex-row justify-start items-center"
+          >
+            <div class="rounded-full w-10 h-10 relative bg-gray-800">
+              <svg
+                class="h-5 w-5 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                ><path
+                  fill="red"
+                  d="M14.25 21.4q-.575.575-1.425.575T11.4 21.4l-8.8-8.8q-.275-.275-.438-.65T2 11.15V4q0-.825.588-1.413T4 2h7.15q.425 0 .8.163t.65.437l8.8 8.825q.575.575.575 1.413T21.4 14.25l-7.15 7.15ZM6.5 8q.625 0 1.063-.438T8 6.5q0-.625-.438-1.063T6.5 5q-.625 0-1.063.438T5 6.5q0 .625.438 1.063T6.5 8Z"
+                /></svg
+              >
+            </div>
+            <span class="ml-1 text-white text-lg font-medium">
+              Sell {$cryptoTicker} Shares
+            </span>
+          </label>
+        </li>
+      </ul>
+    </div>
   </div>
 </dialog>
 
 <!--End Type of Trade-->
 
-
-  
-
-
-
-
-
-
-  
-  <!--Start Add Watchlist Modal-->
+<!--Start Add Watchlist Modal-->
 <input type="checkbox" id="addWatchListModal" class="modal-toggle" />
 
-<dialog id="addWatchListModal" class="modal modal-bottom sm:modal-middle bg-[#000] bg-opacity-[0.5]">
-  <label id="addWatchListModal" for="addWatchListModal" class="cursor-pointer modal-backdrop"></label>
+<dialog
+  id="addWatchListModal"
+  class="modal modal-bottom sm:modal-middle bg-[#000] bg-opacity-[0.5]"
+>
+  <label
+    id="addWatchListModal"
+    for="addWatchListModal"
+    class="cursor-pointer modal-backdrop"
+  ></label>
 
   <div class="modal-box w-full bg-[#191919] sm:border sm:border-gray-800">
-    <label for="addWatchListModal" class="cursor-pointer bg-[#191919] absolute right-5 top-2 text-[1.8rem] text-white"> ✕ </label>
+    <label
+      for="addWatchListModal"
+      class="cursor-pointer bg-[#191919] absolute right-5 top-2 text-[1.8rem] text-white"
+    >
+      ✕
+    </label>
 
     <div class="text-white">
       <h3 class="font-semibold text-lg sm:text-xl mb-10">Add to Watchlist</h3>
 
       <div class="flex flex-col items-center w-full max-w-3xl bg-[#191919]">
         {#each userWatchList as item}
-          <label on:click|stopPropagation={() => toggleUserWatchlist(item?.id)} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
-            <div class="flex flex-row items-center w-full bg-[#313131] p-3 rounded-lg {item?.ticker?.includes($cryptoTicker) ? 'ring-2 ring-[#04E000]' : ''}">
+          <label
+            on:click|stopPropagation={() => toggleUserWatchlist(item?.id)}
+            class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"
+          >
+            <div
+              class="flex flex-row items-center w-full bg-[#313131] p-3 rounded-lg {item?.ticker?.includes(
+                $cryptoTicker,
+              )
+                ? 'ring-2 ring-[#04E000]'
+                : ''}"
+            >
               <div class="flex flex-col items-center w-full">
                 <span class="ml-1 text-white font-medium mr-auto">
                   {item?.title}
                 </span>
-                <span class="ml-1 text-white text-opacity-40 text-sm font-medium mr-auto">
+                <span
+                  class="ml-1 text-white text-opacity-40 text-sm font-medium mr-auto"
+                >
                   {item?.ticker?.length}
                   {item?.ticker?.length !== 1 ? "Companies" : "Company"}
                 </span>
               </div>
 
-              <div class="rounded-full w-8 h-8 relative border border-[#737373]">
+              <div
+                class="rounded-full w-8 h-8 relative border border-[#737373]"
+              >
                 {#if item?.ticker?.includes($cryptoTicker)}
-                  <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"
-                    ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier">
-                      <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc>
-                      <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                        <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero">
+                  <svg
+                    class="w-full h-full rounded-full"
+                    viewBox="0 0 48 48"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    fill="#09090B000"
+                    ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                      id="SVGRepo_tracerCarrier"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    ></g><g id="SVGRepo_iconCarrier">
+                      <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+                      <title>ic_fluent_checkmark_circle_48_filled</title>
+                      <desc>Created with Sketch.</desc>
+                      <g
+                        id="🔍-Product-Icons"
+                        stroke="none"
+                        stroke-width="1"
+                        fill="none"
+                        fill-rule="evenodd"
+                      >
+                        <g
+                          id="ic_fluent_checkmark_circle_48_filled"
+                          fill="#04E000"
+                          fill-rule="nonzero"
+                        >
                           <path
                             d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z"
                             id="🎨-Color"
@@ -882,24 +1162,10 @@ $: {
   </div>
 </dialog>
 
-  <!--End Add Watchlist Modal-->
+<!--End Add Watchlist Modal-->
 
-
-
-
-
-
-
-
-
-
-
-
-
-<style lang='scss'>
-       
-
-.scrollbar {
+<style lang="scss">
+  .scrollbar {
     display: grid;
     grid-gap: 17px;
     grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
@@ -907,33 +1173,31 @@ $: {
     overflow-x: auto;
     scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
     scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
-}
+  }
 
-/* Custom scrollbar for Webkit (Chrome, Safari) */
-.scrollbar::-webkit-scrollbar {
+  /* Custom scrollbar for Webkit (Chrome, Safari) */
+  .scrollbar::-webkit-scrollbar {
     width: 0; /* Hide the width of the scrollbar */
     height: 0; /* Hide the height of the scrollbar */
-}
+  }
 
-.scrollbar::-webkit-scrollbar-thumb {
+  .scrollbar::-webkit-scrollbar-thumb {
     background: transparent; /* Make the thumb transparent */
-}
+  }
 
-::-webkit-scrollbar {
+  ::-webkit-scrollbar {
     height: 7px;
     width: 10px;
-    background: #09090B;
-}
+    background: #09090b;
+  }
 
-::-webkit-scrollbar-thumb {
-    background: #6B6F79;
+  ::-webkit-scrollbar-thumb {
+    background: #6b6f79;
     -webkit-border-radius: 1ex;
     -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
-}
+  }
 
-::-webkit-scrollbar-corner {
-    background: #09090B;
-}
-
-
-</style>
\ No newline at end of file
+  ::-webkit-scrollbar-corner {
+    background: #09090b;
+  }
+</style>
diff --git a/src/routes/crypto/[tickerID]/+layout.ts b/src/routes/crypto/[tickerID]/+layout.ts
deleted file mode 100644
index a203b122..00000000
--- a/src/routes/crypto/[tickerID]/+layout.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { displayCompanyName, cryptoTicker, assetType } from "$lib/store";
-
-export const load = async ({ params, data }) => {
-  cryptoTicker.update((value) => params.tickerID?.toUpperCase());
-  assetType.update((value) => "crypto");
-
-  displayCompanyName.update((value) => data?.companyName);
-};
diff --git a/src/routes/stocks/[tickerID]/+layout.server.ts b/src/routes/stocks/[tickerID]/+layout.server.ts
index 04a442ac..f717ad5f 100644
--- a/src/routes/stocks/[tickerID]/+layout.server.ts
+++ b/src/routes/stocks/[tickerID]/+layout.server.ts
@@ -94,5 +94,6 @@ export const load = async ({ params, locals }) => {
     getNews,
     getUserWatchlist,
     companyName: cleanString(getStockDeck?.companyName),
+    getParams: params.tickerID,
   };
 };
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index d902bf35..c0589f51 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -12,8 +12,9 @@
     isCrosshairMoveActive,
     currentPrice,
     priceIncrease,
-    displayCompanyName,
     stockTicker,
+    assetType,
+    displayCompanyName,
     isOpen,
     shouldUpdatePriceChart,
     priceChartData,
@@ -315,6 +316,9 @@ function handleTypeOfTrade(state:string)
 
   $: {
     if ($page?.url?.pathname && typeof window !== "undefined") {
+      stockTicker.update((value) => (value = data?.getParams?.toUpperCase()));
+      assetType.update((value) => (value = "stock"));
+      displayCompanyName.update((value) => (value = data?.companyName));
       const parts = $page?.url?.pathname?.split("/");
       const sectionMap = {
         statistics: "statistics",
diff --git a/src/routes/stocks/[tickerID]/+layout.ts b/src/routes/stocks/[tickerID]/+layout.ts
index 933902b0..a1e6e7b9 100644
--- a/src/routes/stocks/[tickerID]/+layout.ts
+++ b/src/routes/stocks/[tickerID]/+layout.ts
@@ -1,7 +1,4 @@
 import {
-  displayCompanyName,
-  stockTicker,
-  assetType,
   isOpen,
   isAfterMarketClose,
   isBeforeMarketOpen,
@@ -53,8 +50,5 @@ const checkMarketHour = async () => {
 };
 
 export const load = async ({ params, data }) => {
-  stockTicker.update((value) => (value = params.tickerID?.toUpperCase()));
-  assetType.update((value) => (value = "stock"));
-  displayCompanyName.update((value) => (value = data?.companyName));
   await checkMarketHour();
 };