bugfixing

src/lib/components/Options/ContractLookup.svelte

@@ -43,30 +43,36 @@
 
   let optionQuery = $page.url.searchParams.get("query") || "";
 
-  try {
+  function setDefault() {
-    if (optionQuery?.length > 0) {
+    selectedOptionType = "Call";
+    optionData = data?.getData[selectedOptionType];
+    selectedDate = Object.keys(optionData)[0];
+    strikeList = [...optionData[selectedDate]] || [];
+    if (!strikeList.includes(selectedStrike)) {
+      selectedStrike = strikeList.reduce(
+        (closest, strike) =>
+          Math.abs(strike - currentStockPrice) <
+          Math.abs(closest - currentStockPrice)
+            ? strike
+            : closest,
+        strikeList[0],
+      );
+    }
+  }
+
+  if (optionQuery?.length > 0) {
+    try {
       const parsedData = parseOptionSymbol(optionQuery);
       selectedOptionType = parsedData?.optionType;
       optionData = data?.getData[selectedOptionType];
       selectedDate = parsedData?.dateExpiration;
       strikeList = optionData[selectedDate] || [];
       selectedStrike = parsedData?.strikePrice;
-    } else {
+    } catch (e) {
-    }
+      setDefault();
-  } catch (e) {
-    selectedOptionType = "Call";
-    optionData = data?.getData[selectedOptionType];
-
-    selectedDate = Object?.keys(optionData)[0];
-    strikeList = [...optionData[selectedDate]] || [];
-    if (!strikeList?.includes(selectedStrike)) {
-      selectedStrike = strikeList.reduce((closest, strike) => {
-        return Math.abs(strike - currentStockPrice) <
-          Math.abs(closest - currentStockPrice)
-          ? strike
-          : closest;
-      }, strikeList[0]);
     }
+  } else {
+    setDefault();
   }
 
   const formatDate = (dateString) => {

src/routes/options-calculator/+page.svelte

@@ -8,6 +8,8 @@
   import { Combobox } from "bits-ui";
   import InfoModal from "$lib/components/InfoModal.svelte";
   import Link from "lucide-svelte/icons/square-arrow-out-up-right";
+  import Trash from "lucide-svelte/icons/trash";
+  import { toast } from "svelte-sonner";
 
   import { mode } from "mode-watcher";
   import highcharts from "$lib/highcharts.ts";
@@ -134,6 +136,7 @@
     }
 
     await loadData("default");
+    shouldUpdate = true;
   }
 
   // PAYOFF CALCULATION FUNCTIONS
@@ -568,8 +571,6 @@
     }
   }
 
-  // USER INTERACTION FUNCTIONS
-
   async function handleAddOptionLeg() {
     if (userStrategy.length === 0) {
       userStrategy = [
@@ -590,6 +591,23 @@
     shouldUpdate = true;
   }
 
+  function handleDeleteOptionLeg(index) {
+    if (userStrategy?.length === 1) {
+      toast.error("At least one option leg is required!", {
+        style: `border-radius: 5px; background: #fff; color: #000; border-color: ${$mode === "light" ? "#F9FAFB" : "#4B5563"}; font-size: 15px;`,
+      });
+    } else {
+      userStrategy = [
+        ...userStrategy.slice(0, index),
+        ...userStrategy.slice(index + 1),
+      ];
+      if (userStrategy?.length === 0) {
+        changeStrategy(prebuiltStrategy?.at(0));
+      }
+      shouldUpdate = true;
+    }
+  }
+
   async function handleOptionType() {
     selectedOptionType = selectedOptionType === "Call" ? "Put" : "Call";
     await loadData("optionType");
@@ -1044,22 +1062,34 @@
                             />
                           </td>
                           <td class="px-4 whitespace-nowrap">
-                            <a
+                            <div
-                              href={`/${["stocks", "stock"]?.includes(assetType) ? "stocks" : assetType === "etf" ? "etf" : "index"}/${selectedTicker}/options/contract-lookup?query=${optionSymbol}`}
+                              class="flex flex-row items-center m-auto text-center justify-center"
-                              class="option-leg-link-to-contract"
                             >
-                              <Link
+                              <a
-                                class="w-4 h-4 text-gray-800 dark:text-gray-100"
+                                class="inline-block"
-                              />
+                                href={`/${["stocks", "stock"]?.includes(assetType) ? "stocks" : assetType === "etf" ? "etf" : "index"}/${selectedTicker}/options/contract-lookup?query=${optionSymbol}`}
-                            </a>
+                              >
+                                <Link
+                                  class="w-4 h-4 text-gray-800 dark:text-gray-100 mt-0.5"
+                                />
+                              </a>
+                              <label
+                                on:click={() => handleDeleteOptionLeg(index)}
+                                class="ml-3 inline-block cursor-pointer"
+                              >
+                                <Trash
+                                  class="w-4 h-4 text-gray-800 dark:text-gray-100"
+                                />
+                              </label>
+                            </div>
                           </td>
                         </tr>
                       {/each}
-
+                      <!--
                       <button
                         type="button"
                         on:click={() => handleAddOptionLeg()}
-                        class="cursor-pointer mt-3 mb-3 ml-3 align-middle inline-flex items-center gap-x-1.5 rounded bg-green-600 px-2.5 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600 transition duration-150 ease-in-out whitespace-nowrap"
+                        class=" cursor-pointer mt-3 mb-3 ml-3 align-middle inline-flex items-center gap-x-1.5 rounded bg-green-600 px-2.5 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600 transition duration-150 ease-in-out whitespace-nowrap"
                       >
                         <svg
                           class="-ml-0.5 h-4 w-4"
@@ -1075,6 +1105,7 @@
                         </svg>
                         Add Option Leg
                       </button>
+                      -->
                     </tbody>
                   </table>
                 </div>