update dark pool page

src/lib/components/DarkPool/PriceLevel.svelte

@@ -133,18 +133,14 @@
     </div>
 
     {#if isLoaded}
-      {#if rawData?.length !== 0}
+      {#if rawData?.length !== 0 && Object?.keys(metrics)?.length > 0}
         <div class="w-full flex flex-col items-start">
           <div class="text-white text-[1rem] mt-2 mb-2 w-full">
-            Over the past week, GameStop Corp. has seen an average dark pool
+            Over the past week, {$displayCompanyName} has seen an average dark pool
             trade size of {@html abbreviateNumberWithColor(
               metrics?.avgTradeSize,
               false,
               true,
-            )}, a total volume of {@html abbreviateNumberWithColor(
-              metrics?.totalVolume,
-              false,
-              true,
             )} and an average premium per trade of {@html abbreviateNumberWithColor(
               metrics?.avgPremTrade,
               false,
@@ -153,14 +149,14 @@
               metrics?.totalPrem,
               false,
               true,
-            )}
+            )}.
           </div>
         </div>
 
-        <div class="pb-2 rounded-md bg-default">
+        <div class="pb-2 rounded-md bg-default mt-14 sm:mt-0">
           <div class="app w-full h-[300px] mt-5 relative">
             <div
-              class="flex justify-start space-x-2 absolute right-0 -top-8 z-10 text-sm"
+              class="flex justify-start space-x-2 absolute right-0 -top-10 sm:-top-8 z-10 text-sm"
             >
               {#each ["Size", "Premium"] as item}
                 <label

src/routes/etf/[tickerID]/+layout.svelte

@@ -62,6 +62,7 @@
     const sectionMap = {
       insider: "/insider",
       options: "/options",
+      "dark-pool": "/dark-pool",
       dividends: "/dividends",
       statistics: "/statistics",
       metrics: "metrics",
@@ -276,6 +277,7 @@
       const sectionMap = {
         holdings: "holdings",
         options: "options",
+        "dark-pool": "dark-pool",
         insider: "insider",
         dividends: "dividends",
       };
@@ -702,6 +704,16 @@
                         >
                           Options
                         </a>
+                        <a
+                          href={`/etf/${$etfTicker}/dark-pool`}
+                          on:click={() => changeSection("dark-pool")}
+                          class="p-2 px-5 cursor-pointer {displaySection ===
+                          'dark-pool'
+                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95]'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                        >
+                          Dark Pool
+                        </a>
                         <a
                           href={`/etf/${$etfTicker}/insider`}
                           on:click={() => changeSection("insider")}

src/routes/etf/[tickerID]/dark-pool/+layout.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import ArrowLogo from "lucide-svelte/icons/move-up-right";
+  import { etfTicker } from "$lib/store";
+  export let data;
+</script>
+
+<section class="w-auto overflow-hidden min-h-screen">
+  <div class="w-full overflow-hidden m-auto">
+    <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
+      <div
+        class="relative flex justify-center items-start overflow-hidden w-full"
+      >
+        <main class="w-full lg:w-3/4">
+          <slot />
+        </main>
+
+        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+          {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
+            <div
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+            >
+              <a
+                href="/pricing"
+                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+              >
+                <div class="w-full flex justify-between items-center p-3 mt-3">
+                  <h2 class="text-start text-xl font-semibold text-white ml-3">
+                    Pro Subscription
+                  </h2>
+                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
+                </div>
+                <span class="text-white p-3 ml-3 mr-3">
+                  Upgrade now for unlimited access to all data and tools.
+                </span>
+              </a>
+            </div>
+          {/if}
+
+          <div
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+          >
+            <a
+              href={`/dark-pool-flow?query=${$etfTicker}`}
+              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+            >
+              <div class="w-full flex justify-between items-center p-3 mt-3">
+                <h2 class="text-start text-xl font-semibold text-white ml-3">
+                  Dark Pool Flow
+                </h2>
+                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
+              </div>
+              <span class="text-white p-3 ml-3 mr-3">
+                Follow the dark pool feed in realtime
+              </span>
+            </a>
+          </div>
+        </aside>
+      </div>
+    </div>
+  </div>
+</section>

src/routes/etf/[tickerID]/dark-pool/+page.server.ts

@@ -0,0 +1,206 @@
+import { error, fail, redirect } from "@sveltejs/kit";
+import { validateData } from "$lib/utils";
+import { loginUserSchema, registerUserSchema } from "$lib/schemas";
+
+
+export const load = async ({ params, locals }) => {
+      const { apiURL, apiKey } = locals;
+
+    const postData = {
+      ticker: params.tickerID,
+    };
+
+  const getPriceLevel = async () => {
+
+
+    const response = await fetch(apiURL + "/dark-pool-level", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+
+    return output;
+  };
+
+  const getHistoricalDarkPool = async () => {
+
+
+    // make the POST request to the endpoint
+    const response = await fetch(apiURL + "/historical-dark-pool", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getPriceLevel: await getPriceLevel(),
+    getHistoricalDarkPool: await getHistoricalDarkPool(),
+
+  };
+};
+
+
+
+export const actions = {
+  login: async ({ url, request, locals }) => {
+
+        const path = url?.href?.replace("/oauth2","")
+
+    const { formData, errors } = await validateData(
+      await request.formData(),
+      loginUserSchema,
+    );
+
+    if (errors) {
+      return fail(400, {
+        data: formData,
+        errors: errors.fieldErrors,
+      });
+    }
+
+    try {
+      await locals.pb
+        .collection("users")
+        .authWithPassword(formData.email, formData.password);
+
+      /*	
+			if (!locals.pb?.authStore?.model?.verified) {
+				locals.pb.authStore.clear();
+				return {
+					notVerified: true,
+				};
+			}
+			*/
+    } catch (err) {
+      console.log("Error: ", err);
+      error(err.status, err.message);
+    }
+
+    redirect(302, path);
+  },
+
+  register: async ({ url, locals, request }) => {
+        const path = url?.href?.replace("/oauth2","")
+
+    const { formData, errors } = await validateData(
+      await request.formData(),
+      registerUserSchema,
+    );
+
+    if (errors) {
+      return fail(400, {
+        data: formData,
+        errors: errors.fieldErrors,
+      });
+    }
+
+    try {
+      let newUser = await locals.pb.collection("users").create(formData);
+      /*
+await locals.pb?.collection('users').update(
+				newUser?.id, {
+					'freeTrial' : true,
+					'tier': 'Pro', //Give new users a free trial for the Pro Subscription
+			});
+*/
+      await locals.pb.collection("users")?.requestVerification(formData.email);
+    } catch (err) {
+      console.log("Error: ", err);
+      error(err.status, err.message);
+    }
+
+    try {
+      await locals.pb
+        .collection("users")
+        .authWithPassword(formData.email, formData.password);
+    } catch (err) {
+      console.log("Error: ", err);
+      error(err.status, err.message);
+    }
+
+    redirect(303, path);
+  },
+
+   oauth2: async ({ url, locals, request, cookies }) => {
+
+    const path = url?.href?.replace("/oauth2","")
+    const authMethods = (await locals?.pb
+      ?.collection("users")
+      ?.listAuthMethods())?.oauth2;
+
+
+    const data = await request?.formData();
+    const providerSelected = data?.get("provider");
+
+    if (!authMethods) {
+      return {
+        authProviderRedirect: "",
+        authProviderState: "",
+      };
+    }
+    const redirectURL = `${url.origin}/oauth`;
+
+    const targetItem = authMethods?.providers?.findIndex(
+      (item) => item?.name === providerSelected,
+    );
+    //console.log("==================")
+    //console.log(authMethods.authProviders)
+    //console.log('target item is: ', targetItem)
+
+    const provider = authMethods.providers[targetItem];
+    const authProviderRedirect = `${provider.authUrl}${redirectURL}`;
+    const state = provider.state;
+    const verifier = provider.codeVerifier;
+
+    
+    
+    cookies.set("state", state, {
+      httpOnly: true,
+      sameSite: "lax",
+      secure: true,
+      path: "/",
+      maxAge: 60 * 60,
+    });
+
+    cookies.set("verifier", verifier, {
+      httpOnly: true,
+      sameSite: "lax",
+      secure: true,
+      path: "/",
+      maxAge: 60 * 60,
+    });
+
+    cookies.set("provider", providerSelected, {
+      httpOnly: true,
+      sameSite: "lax",
+      secure: true,
+      path: "/",
+      maxAge: 60 * 60,
+    });
+
+    cookies.set("path", path, {
+      httpOnly: true,
+      sameSite: "lax",
+      secure: true,
+      path: "/",
+      maxAge: 60,
+    });
+
+    redirect(302, authProviderRedirect);
+  },
+
+};

src/routes/etf/[tickerID]/dark-pool/+page.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import {
+    numberOfUnreadNotification,
+    displayCompanyName,
+    etfTicker,
+  } from "$lib/store";
+  import HistoricalVolume from "$lib/components/DarkPool/HistoricalVolume.svelte";
+  import PriceLevel from "$lib/components/DarkPool/PriceLevel.svelte";
+  import InfoModal from "$lib/components/InfoModal.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
+  import HottestTrades from "$lib/components/DarkPool/HottestTrades.svelte";
+
+  export let data;
+  let historicalDarkPool = data?.getHistoricalDarkPool || [];
+</script>
+
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {$displayCompanyName} ({$etfTicker}) Dark Pool Trades · Stocknear
+  </title>
+
+  <meta
+    name="description"
+    content={`Get the latest dark pool trade insights for ${$displayCompanyName} (${$etfTicker}), including stock price quote, financials, news, statistics, and charts.`}
+  />
+
+  <!-- Other meta tags -->
+  <meta
+    property="og:title"
+    content={`${$displayCompanyName} (${$etfTicker}) Dark Pool Trades · Stocknear`}
+  />
+  <meta
+    property="og:description"
+    content={`Get the latest dark pool trade information for ${$displayCompanyName} (${$etfTicker})`}
+  />
+  <meta property="og:type" content="website" />
+
+  <!-- Twitter specific meta tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta
+    name="twitter:title"
+    content={`${$displayCompanyName} (${$etfTicker}) Dark Pool Trades · Stocknear`}
+  />
+  <meta
+    name="twitter:description"
+    content={`Get the latest dark pool trade insights for ${$displayCompanyName} (${$etfTicker}), including stock price quote, financials, statistics, and more.`}
+  />
+</svelte:head>
+
+<section class="w-full bg-default overflow-hidden text-white h-full">
+  <div class="w-full flex h-full overflow-hidden">
+    <div
+      class="w-full relative flex justify-center items-center overflow-hidden"
+    >
+      <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
+        <div class="w-full mb-2">
+          <div class="flex flex-row items-center mb-4 sm:mb-0">
+            <label
+              for="darkPoolInfo"
+              class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
+            >
+              Dark Pool Data
+            </label>
+            <InfoModal
+              title={"Dark Pool Data"}
+              content={"Dark pool data refers to information on trading activities that occur in private, non-public financial exchanges known as dark pools. These venues are used by hedge funds and major institutional traders to buy and sell large blocks of securities without exposing their orders to the public, minimizing market impact and price fluctuations. Currently, nearly 50% of all trades are executed in these dark pools, highlighting their significant role in the trading landscape."}
+              id={"darkPoolInfo"}
+            />
+          </div>
+
+          <Infobox
+            text="Track the Dark Pool Trades of major whales to monitor hidden trading activity and trends."
+          />
+        </div>
+
+        <PriceLevel
+          rawData={data?.getPriceLevel?.priceLevel}
+          metrics={data?.getPriceLevel?.metrics}
+        />
+        <HottestTrades rawData={data?.getPriceLevel?.hottestTrades} />
+        <HistoricalVolume rawData={historicalDarkPool} />
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .app {
+    height: 400px;
+    width: 100%;
+  }
+
+  @media (max-width: 560px) {
+    .app {
+      width: 100%;
+      height: 300px;
+    }
+  }
+
+  .chart {
+    width: 100%;
+  }
+</style>

src/routes/stocks/[tickerID]/dark-pool/+layout.server.ts

@@ -1,28 +0,0 @@
-export const load = async ({ locals, params }) => {
-
-   const getSimilarStocks = async () => {
-    const { apiKey, apiURL } = locals;
-    const postData = {
-      ticker: params.tickerID,
-    };
-
-    // make the POST request to the endpoint
-    const response = await fetch(apiURL + "/similar-stocks", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-      body: JSON.stringify(postData),
-    });
-
-    const output = await response.json();
-
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getSimilarStocks: await getSimilarStocks(),
-  };
-};

src/routes/stocks/[tickerID]/dark-pool/+page.svelte

@@ -19,37 +19,35 @@
   <meta name="viewport" content="width=device-width" />
   <title>
     {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$stockTicker}) Dividend History, Dates & Yield ·
+    {$displayCompanyName} ({$stockTicker}) Dark Pool Trades · Stocknear
-    stocknear
   </title>
 
   <meta
     name="description"
-    content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
+    content={`Get the latest dark pool trade insights for ${$displayCompanyName} (${$stockTicker}), including stock price quote, financials, news, statistics, and charts.`}
   />
+
   <!-- Other meta tags -->
   <meta
     property="og:title"
-    content={`${$displayCompanyName} (${$stockTicker}) Dividend History, Dates & Yield · Stocknear`}
+    content={`${$displayCompanyName} (${$stockTicker}) Dark Pool Trades · Stocknear`}
   />
   <meta
     property="og:description"
-    content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}), including dividend history, yield, key dates, growth and other metrics.`}
+    content={`Get the latest dark pool trade information for ${$displayCompanyName} (${$stockTicker})`}
   />
   <meta property="og:type" content="website" />
-  <!-- Add more Open Graph meta tags as needed -->
 
   <!-- Twitter specific meta tags -->
   <meta name="twitter:card" content="summary_large_image" />
   <meta
     name="twitter:title"
-    content={`${$displayCompanyName} (${$stockTicker}) Dividend History, Dates & Yield · Stocknear`}
+    content={`${$displayCompanyName} (${$stockTicker}) Dark Pool Trades · Stocknear`}
   />
   <meta
     name="twitter:description"
-    content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
+    content={`Get the latest dark pool trade insights for ${$displayCompanyName} (${$stockTicker}), including stock price quote, financials, statistics, and more.`}
   />
-  <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
 
 <section class="w-full bg-default overflow-hidden text-white h-full">
@@ -59,7 +57,7 @@
     >
       <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
         <div class="w-full mb-2">
-          <div class="flex flex-row items-center">
+          <div class="flex flex-row items-center mb-4 sm:mb-0">
             <label
               for="darkPoolInfo"
               class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
@@ -72,6 +70,7 @@
               id={"darkPoolInfo"}
             />
           </div>
+
           <Infobox
             text="Track the Dark Pool Trades of major whales to monitor hidden trading activity and trends."
           />