From ccd020ad6b5ae64ab4cf9ef27bdcedbb3094baed Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 8 Oct 2024 15:59:18 +0200
Subject: [PATCH] add ws bid/ask price

---
 src/lib/components/ETFProfileCard.svelte    | 14 +++++++-------
 src/lib/components/TickerInfoCard.svelte    |  6 +++---
 src/lib/store.ts                            |  2 ++
 src/routes/etf/[tickerID]/+layout.svelte    | 11 ++++++++---
 src/routes/stocks/[tickerID]/+layout.svelte | 12 +++++++++---
 5 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/ETFProfileCard.svelte b/src/lib/components/ETFProfileCard.svelte
index b0bb745e..43ffeadd 100644
--- a/src/lib/components/ETFProfileCard.svelte
+++ b/src/lib/components/ETFProfileCard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import {etfTicker, screenWidth, displayCompanyName} from '$lib/store';
+    import {etfTicker, wsBidPrice, wsAskPrice, screenWidth, displayCompanyName} from '$lib/store';
     
     import { abbreviateNumber, formatETFName } from '$lib/utils';
     import { fade } from 'svelte/transition';
@@ -92,12 +92,12 @@ let showFullText = false;
             <table class="table table-sm table-compact">
               <tbody>
               
-                <tr class="text-white border-b border-[#27272A]">
-                  <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Bid</td>
-                  <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.bid}</td>
-                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Ask</td>
-                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.ask}</td>
-                </tr>
+                 <tr class="text-white border-b border-[#27272A]">
+                <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Bid</td>
+                <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{$wsBidPrice !== (0 || null) ? $wsBidPrice : data?.getStockQuote?.bid}</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Ask</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{$wsAskPrice !== (0 || null) ? $wsAskPrice : data?.getStockQuote?.ask}</td>
+              </tr>
                 <tr class="text-white border-b border-[#27272A]">
                   <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Provider</td>
                   <td on:click={() => goto(`/etf/etf-providers/${provider}`)} class="text-center sm:text-end text-blue-400 lg:hover:text-white cursor-pointer bg-[#000] lg:bg-[#09090B]">{formatETFName(provider)}</td>
diff --git a/src/lib/components/TickerInfoCard.svelte b/src/lib/components/TickerInfoCard.svelte
index e4b28f1a..fd0d739b 100644
--- a/src/lib/components/TickerInfoCard.svelte
+++ b/src/lib/components/TickerInfoCard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {stockTicker, screenWidth} from '$lib/store';
+  import {stockTicker, screenWidth, wsBidPrice, wsAskPrice} from '$lib/store';
 
   import { abbreviateNumber } from '$lib/utils';
   import { fade } from 'svelte/transition';
@@ -125,9 +125,9 @@ $: {
               -->
               <tr class="text-white border-b border-[#27272A]">
                 <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Bid</td>
-                <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.bid}</td>
+                <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{$wsBidPrice !== (0 || null) ? $wsBidPrice : data?.getStockQuote?.bid}</td>
                 <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Ask</td>
-                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.ask}</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{$wsAskPrice !== (0 || null) ? $wsAskPrice : data?.getStockQuote?.ask}</td>
               </tr>
               <tr class="text-white border-b border-[#27272A]">
                 <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Mkt Cap</td>
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 48f2d5b7..a284c7ed 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -56,6 +56,8 @@ export const displayCompanyName = writable(<string>"");
 export const currentPrice = writable(<number>0);
 export const currentPortfolioPrice = writable(<number>0);
 export const realtimePrice = writable(<number>0);
+export const wsBidPrice = writable(<number>0);
+export const wsAskPrice = writable(<number>0);
 
 export const priceIncrease = writable(<boolean>false);
 export const isCrosshairMoveActive = writable(<boolean>true);
diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte
index e5f14a63..4575debe 100644
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/src/routes/etf/[tickerID]/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang='ts'>
 
-    import {searchBarData, globalForm, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, traded, etfTicker, assetType, isOpen } from '$lib/store';
+    import {searchBarData, globalForm, screenWidth, openPriceAlert, currentPortfolioPrice, wsBidPrice, wsAskPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, traded, etfTicker, assetType, isOpen } from '$lib/store';
 
     import { onMount, onDestroy, afterUpdate} from "svelte";
     import { goto } from '$app/navigation';
@@ -238,7 +238,9 @@ async function toggleUserWatchlist(watchListId: string) {
         //console.log('Received message:', data);
         try {
   
-          $realtimePrice = typeof JSON.parse(data)?.bp !== 'undefined' ? JSON.parse(data)?.bp : null;
+          $realtimePrice = typeof JSON.parse(data)?.lp !== "undefined" ? JSON.parse(data)?.lp : null;
+          $wsBidPrice = typeof JSON.parse(data)?.bp !== "undefined" ? JSON.parse(data)?.bp : null;
+          $wsAskPrice = typeof JSON.parse(data)?.ap !== "undefined" ? JSON.parse(data)?.ap : null;
           //console.log('Received message:', $realtimePrice);
   
   
@@ -329,7 +331,8 @@ async function toggleUserWatchlist(watchListId: string) {
        await websocketRealtimeData()
        console.log('connecting again')
      }
-  
+     $wsAskPrice = null;
+      $wsBidPrice = null;
    }
   
   });
@@ -348,6 +351,8 @@ async function toggleUserWatchlist(watchListId: string) {
     $currentPortfolioPrice = null;
     $currentPrice = null;
     $priceIncrease = null;
+    $wsAskPrice = null;
+    $wsBidPrice = null;
     $traded = false
     
   });
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index b13f5ec0..a2091f5c 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { searchBarData, globalForm, scoreComponent, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, stockTicker, isOpen } from "$lib/store";
+  import { wsBidPrice, wsAskPrice, searchBarData, globalForm, scoreComponent, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, stockTicker, isOpen } from "$lib/store";
 
   import { onMount, onDestroy, afterUpdate } from "svelte";
   import { goto } from "$app/navigation";
@@ -193,9 +193,11 @@ async function toggleUserWatchlist(watchListId: string) {
         const data = event.data;
         //console.log('Received message:', data);
         try {
-          $realtimePrice = typeof JSON.parse(data)?.bp !== "undefined" ? JSON.parse(data)?.bp : null;
+          $realtimePrice = typeof JSON.parse(data)?.lp !== "undefined" ? JSON.parse(data)?.lp : null;
+          $wsBidPrice = typeof JSON.parse(data)?.bp !== "undefined" ? JSON.parse(data)?.bp : null;
+          $wsAskPrice = typeof JSON.parse(data)?.ap !== "undefined" ? JSON.parse(data)?.ap : null;
           //console.log('Received message:', $realtimePrice);
-
+          console.log(JSON.parse(data))
           if ($realtimePrice > previousRealtimePrice) {
             $priceIncrease = true;
             previousRealtimePrice = $realtimePrice;
@@ -253,6 +255,8 @@ async function toggleUserWatchlist(watchListId: string) {
         await websocketRealtimeData();
         console.log("connecting again");
       }
+       $wsAskPrice = null;
+      $wsBidPrice = null;
     }
   });
 
@@ -268,6 +272,8 @@ async function toggleUserWatchlist(watchListId: string) {
     $currentPortfolioPrice = null;
     $currentPrice = null;
     $priceIncrease = null;
+     $wsAskPrice = null;
+    $wsBidPrice = null;
     //$traded = false
   });