feat: open from selection modal on "Swap from another asset" click an…

…d switch modal titles
osmosis-labs · Jul 2, 2024 · d4539fa · d4539fa
1 parent 12696d9
commit d4539fa
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/packages/web/components/swap-tool/alt.tsx b/packages/web/components/swap-tool/alt.tsx
@@ -6,6 +6,7 @@ import { ellipsisText, isNil } from "@osmosis-labs/utils";
 import classNames from "classnames";
 import { observer } from "mobx-react-lite";
 import Image from "next/image";
+import { parseAsBoolean, useQueryState } from "nuqs";
 import {
   FunctionComponent,
   ReactNode,
@@ -155,6 +156,11 @@ export const AltSwapTool: FunctionComponent<SwapToolProps> = observer(
     // token select dropdown
     const [showFromTokenSelectModal, setFromTokenSelectDropdownLocal] =
       useState(false);
+    const [sellOpen, setSellOpen] = useQueryState(
+      "sellOpen",
+      parseAsBoolean.withDefault(false)
+    );
+
     const [showToTokenSelectModal, setToTokenSelectDropdownLocal] =
       useState(false);
     const setOneTokenSelectOpen = useCallback((dropdown: "to" | "from") => {
@@ -169,7 +175,8 @@ export const AltSwapTool: FunctionComponent<SwapToolProps> = observer(
     const closeTokenSelectModals = useCallback(() => {
       setFromTokenSelectDropdownLocal(false);
       setToTokenSelectDropdownLocal(false);
-    }, []);
+      setSellOpen(false);
+    }, [setSellOpen]);
 
     // reivew swap modal
     const [showSwapReviewModal, setShowSwapReviewModal] = useState(false);
@@ -775,8 +782,8 @@ export const AltSwapTool: FunctionComponent<SwapToolProps> = observer(
           )}
         </div>
         <TokenSelectModalLimit
-          headerTitle={t("limitOrders.selectAnAssetTo.buy")}
-          isOpen={showFromTokenSelectModal}
+          headerTitle={t("limitOrders.selectAnAssetTo.sell")}
+          isOpen={showFromTokenSelectModal || sellOpen}
           onClose={closeTokenSelectModals}
           selectableAssets={swapState.selectableAssets}
           onSelect={useCallback(
@@ -796,7 +803,7 @@ export const AltSwapTool: FunctionComponent<SwapToolProps> = observer(
           showRecommendedTokens={showTokenSelectRecommendedTokens}
         />
         <TokenSelectModalLimit
-          headerTitle={t("limitOrders.selectAnAssetTo.sell")}
+          headerTitle={t("limitOrders.selectAnAssetTo.buy")}
           isOpen={showToTokenSelectModal}
           onClose={closeTokenSelectModals}
           selectableAssets={swapState.selectableAssets}

diff --git a/packages/web/components/swap-tool/price-selector.tsx b/packages/web/components/swap-tool/price-selector.tsx
@@ -4,7 +4,7 @@ import { Asset } from "@osmosis-labs/types";
 import { getAssetFromAssetList } from "@osmosis-labs/utils";
 import classNames from "classnames";
 import Image from "next/image";
-import { parseAsString, useQueryState } from "nuqs";
+import { parseAsBoolean, parseAsString, useQueryState } from "nuqs";
 import React, { Fragment, memo, useEffect, useMemo } from "react";
 
 import { Icon } from "~/components/assets";
@@ -40,6 +40,10 @@ export const PriceSelector = memo(
       "quote",
       parseAsString.withDefault("USDC")
     );
+    const [_, setSellOpen] = useQueryState(
+      "sellOpen",
+      parseAsBoolean.withDefault(false)
+    );
 
     const quoteAsset = useMemo(
       () =>
@@ -328,7 +332,10 @@ export const PriceSelector = memo(
                     </button>
                   )}
                   <button
-                    onClick={() => setTab("swap")}
+                    onClick={() => {
+                      setTab("swap");
+                      setSellOpen(true);
+                    }}
                     className="flex w-full items-center justify-between py-3"
                   >
                     <span className="subtitle1 max-w-[200px] text-left font-semibold text-wosmongton-200">