Make clicking CTA switch the active position tab automatically

apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongModalButton/OpenLongModalButton.tsx

@@ -1,5 +1,6 @@
 import { ChevronRightIcon, ClockIcon } from "@heroicons/react/24/outline";
 import { ReactElement } from "react";
+import { useSearchParams } from "react-router-dom";
 import { Hyperdrive } from "src/appconfig/types";
 import { ChecklistItem } from "src/ui/base/components/ChecklistItem/ChecklistItem";
 import { Modal } from "src/ui/base/components/Modal/Modal";
@@ -15,13 +16,25 @@ export function OpenLongModalButton({
   hyperdrive: Hyperdrive;
 }): ReactElement {
   const { fixedAPR } = useCurrentFixedAPR(hyperdrive);
+  const [searchParams, setSearchParams] = useSearchParams();
   return (
     <Modal
       modalId={OPEN_LONG_MODAL_ID}
       modalContent={<OpenLongForm market={hyperdrive} />}
     >
       {({ showModal }) => (
-        <Well interactive variant="secondary" onClick={() => showModal()}>
+        <Well
+          interactive
+          variant="secondary"
+          onClick={() => {
+            setSearchParams({
+              ...searchParams,
+              position: "Longs",
+              openOrClosed: "Open",
+            });
+            showModal();
+          }}
+        >
           <div className="flex w-[272px] flex-col gap-2 p-4">
             <ClockIcon className="mb-2 h-16" />
             <p className="text-h5 ">Open a long</p>

apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityModalButton/AddLiquidityModalButton.tsx

@@ -1,5 +1,6 @@
 import { ChevronRightIcon, SquaresPlusIcon } from "@heroicons/react/24/outline";
 import { ReactElement } from "react";
+import { useSearchParams } from "react-router-dom";
 import { Hyperdrive } from "src/appconfig/types";
 import { ChecklistItem } from "src/ui/base/components/ChecklistItem/ChecklistItem";
 import { Modal } from "src/ui/base/components/Modal/Modal";
@@ -13,13 +14,25 @@ export function AddLiquidityModalButton({
 }: {
   hyperdrive: Hyperdrive;
 }): ReactElement {
+  const [searchParams, setSearchParams] = useSearchParams();
   return (
     <Modal
       modalId={ADD_LIQUIDITY_MODAL_ID}
       modalContent={<AddLiquidityForm market={hyperdrive} />}
     >
       {({ showModal }) => (
-        <Well interactive variant="primary" onClick={() => showModal()}>
+        <Well
+          interactive
+          variant="primary"
+          onClick={() => {
+            setSearchParams({
+              ...searchParams,
+              position: "LP",
+              openOrClosed: "Open",
+            });
+            return showModal();
+          }}
+        >
           <div className="flex w-[272px] flex-col justify-between gap-2 p-4">
             <SquaresPlusIcon className="mb-2 h-16" />
             <p className="text-h5">Add Liquidity</p>

apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortModalButton/OpenShortModalButton.tsx

@@ -1,5 +1,6 @@
 import { BoltIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
 import { ReactElement } from "react";
+import { useSearchParams } from "react-router-dom";
 import { Hyperdrive } from "src/appconfig/types";
 import { ChecklistItem } from "src/ui/base/components/ChecklistItem/ChecklistItem";
 import { Modal } from "src/ui/base/components/Modal/Modal";
@@ -13,6 +14,7 @@ export function OpenShortModalButton({
 }: {
   hyperdrive: Hyperdrive;
 }): ReactElement {
+  const [searchParams, setSearchParams] = useSearchParams();
   const { vaultRate } = useVaultRate({
     // TODO: temporary for now until this available via addresses.json
     vaultAddress: "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512",
@@ -23,7 +25,18 @@ export function OpenShortModalButton({
       modalContent={<OpenShortForm market={hyperdrive} />}
     >
       {({ showModal }) => (
-        <Well interactive variant="accent" onClick={() => showModal()}>
+        <Well
+          interactive
+          variant="accent"
+          onClick={() => {
+            setSearchParams({
+              ...searchParams,
+              position: "Shorts",
+              openOrClosed: "Open",
+            });
+            return showModal();
+          }}
+        >
           <div className="flex w-[272px] flex-col justify-between gap-2 p-4">
             <BoltIcon className="mb-2 h-16" />
             <p className="text-h5">Open a short</p>