From a25d06cc2b6e18dcaa54223900f0f48d3f3e1d2a Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sun, 29 Dec 2024 16:26:56 +0100
Subject: [PATCH] update dark pool page

---
 src/lib/components/DarkPool/PriceLevel.svelte |  14 +-
 src/routes/etf/[tickerID]/+layout.svelte      |  12 +
 .../etf/[tickerID]/dark-pool/+layout.svelte   |  61 ++++++
 .../etf/[tickerID]/dark-pool/+page.server.ts  | 206 ++++++++++++++++++
 .../etf/[tickerID]/dark-pool/+page.svelte     | 106 +++++++++
 .../[tickerID]/dark-pool/+layout.server.ts    |  28 ---
 .../stocks/[tickerID]/dark-pool/+page.svelte  |  19 +-
 7 files changed, 399 insertions(+), 47 deletions(-)
 create mode 100644 src/routes/etf/[tickerID]/dark-pool/+layout.svelte
 create mode 100644 src/routes/etf/[tickerID]/dark-pool/+page.server.ts
 create mode 100644 src/routes/etf/[tickerID]/dark-pool/+page.svelte
 delete mode 100644 src/routes/stocks/[tickerID]/dark-pool/+layout.server.ts

diff --git a/src/lib/components/DarkPool/PriceLevel.svelte b/src/lib/components/DarkPool/PriceLevel.svelte
index 07ebdc7c..84729cef 100644
--- a/src/lib/components/DarkPool/PriceLevel.svelte
+++ b/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
diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte
index 383ad44d..22c744ad 100644
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/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")}
diff --git a/src/routes/etf/[tickerID]/dark-pool/+layout.svelte b/src/routes/etf/[tickerID]/dark-pool/+layout.svelte
new file mode 100644
index 00000000..a8d9ff89
--- /dev/null
+++ b/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>
diff --git a/src/routes/etf/[tickerID]/dark-pool/+page.server.ts b/src/routes/etf/[tickerID]/dark-pool/+page.server.ts
new file mode 100644
index 00000000..eb017e42
--- /dev/null
+++ b/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);
+  },
+
+};
diff --git a/src/routes/etf/[tickerID]/dark-pool/+page.svelte b/src/routes/etf/[tickerID]/dark-pool/+page.svelte
new file mode 100644
index 00000000..fe1a3aaa
--- /dev/null
+++ b/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>
diff --git a/src/routes/stocks/[tickerID]/dark-pool/+layout.server.ts b/src/routes/stocks/[tickerID]/dark-pool/+layout.server.ts
deleted file mode 100644
index 49c34a91..00000000
--- a/src/routes/stocks/[tickerID]/dark-pool/+layout.server.ts
+++ /dev/null
@@ -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(),
-  };
-};
diff --git a/src/routes/stocks/[tickerID]/dark-pool/+page.svelte b/src/routes/stocks/[tickerID]/dark-pool/+page.svelte
index 918c73b3..33091809 100644
--- a/src/routes/stocks/[tickerID]/dark-pool/+page.svelte
+++ b/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 ·
-    stocknear
+    {$displayCompanyName} ({$stockTicker}) Dark Pool Trades · 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."
           />