ui fix

src/lib/components/DarkPool/HottestTrades.svelte

@@ -5,6 +5,7 @@
 
   import { abbreviateNumberWithColor } from "$lib/utils";
 
+  export let data;
   export let rawData = [];
 
   let stockList = [];
@@ -162,7 +163,11 @@
             <tbody>
               {#each stockList as item, index}
                 <tr
-                  class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd"
+                  class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
+                    1 ===
+                    rawData?.length && data?.user?.tier !== 'Pro'
+                    ? 'opacity-[0.1]'
+                    : ''}"
                 >
                   <td
                     class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"

src/routes/dark-pool-flow/+page.server.ts

@@ -11,7 +11,7 @@ export const load = async ({ locals }) => {
       },
     });
     let output = await response.json();
-    output = user?.tier !== "Pro" ? output?.slice(0, 6) : output;
+    output = user?.tier !== "Pro" ? output?.slice(0,6) : output;
 
     return output;
   };

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

@@ -4,7 +4,7 @@ import { loginUserSchema, registerUserSchema } from "$lib/schemas";
 
 
 export const load = async ({ params, locals }) => {
-      const { apiURL, apiKey } = locals;
+      const { apiURL, apiKey, user } = locals;
 
     const postData = {
       ticker: params.tickerID,
@@ -22,7 +22,9 @@ export const load = async ({ params, locals }) => {
       body: JSON.stringify(postData),
     });
 
-    const output = await response.json();
+    let output = await response.json();
+    output.hottestTrades = user?.tier !== "Pro" ? output?.hottestTrades?.slice(0, 3) : output.hottestTrades;
+
 
     return output;
   };

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

@@ -95,10 +95,10 @@
               metrics={data?.getPriceLevel?.metrics}
             />
           {/if}
+          {#if hottestTrades?.length > 0}
+            <HottestTrades {data} rawData={hottestTrades} />
+          {/if}
           {#if data?.user?.tier === "Pro"}
-            {#if hottestTrades?.length > 0}
-              <HottestTrades rawData={hottestTrades} />
-            {/if}
             {#if historicalDarkPool?.length > 10}
               <HistoricalVolume rawData={historicalDarkPool} />
             {/if}