feat: wired up denom selection for limit orders

packages/web/components/control/token-select-widget.tsx → packages/web/components/control/token-select-limit.tsx

@@ -14,7 +14,7 @@ import { useCoinPrice } from "~/hooks/queries/assets/use-coin-price";
 import { useSwapAsset } from "~/hooks/use-swap";
 import { formatPretty } from "~/utils/formatter";
 
-export interface TokenSelectWidgetProps {
+export interface TokenSelectLimitProps {
   dropdownOpen?: boolean;
   setDropdownOpen?: (value: boolean) => void;
   // TODO: Better typing
@@ -34,8 +34,8 @@ export interface TokenSelectWidgetProps {
   canSelectTokens?: boolean;
 }
 
-export const TokenSelectWidget: FunctionComponent<
-  TokenSelectWidgetProps & Disableable
+export const TokenSelectLimit: FunctionComponent<
+  TokenSelectLimitProps & Disableable
 > = observer(
   ({
     dropdownOpen,

packages/web/components/drawers/token-select-drawer-limit.tsx

@@ -81,8 +81,8 @@ export const TokenSelectDrawerLimit: FunctionComponent<{
       keyboardSelectedIndexRef,
     ] = useStateRef(0);
 
-    const [assets, setAssets] = useState(selectableAssets);
-    const [isRequestingClose, setIsRequestingClose] = useState(false);
+    const [assets, _setAssets] = useState(selectableAssets);
+    const [_isRequestingClose, setIsRequestingClose] = useState(false);
     const [confirmUnverifiedAssetDenom, setConfirmUnverifiedAssetDenom] =
       useState<string | null>(null);
 
@@ -189,7 +189,8 @@ export const TokenSelectDrawerLimit: FunctionComponent<{
       },
     });
 
-    const onSearch = (nextValue: string) => {
+    // TODO: Wire up search
+    const onSearch = (_nextValue: string) => {
       setKeyboardSelectedIndex(0);
     };
 

packages/web/components/place-limit-tool/index.tsx

@@ -2,14 +2,15 @@ import { WalletStatus } from "@cosmos-kit/core";
 import { Dec } from "@keplr-wallet/unit";
 import classNames from "classnames";
 import { observer } from "mobx-react-lite";
-import { FunctionComponent, useMemo, useRef } from "react";
+import { FunctionComponent, useMemo, useRef, useState } from "react";
 
 import { Icon } from "~/components/assets";
-import { TokenSelectWidget } from "~/components/control/token-select-widget";
+import { TokenSelectLimit } from "~/components/control/token-select-limit";
 import { Tooltip } from "~/components/tooltip";
 import { Button } from "~/components/ui/button";
 import { useTranslation, useWindowSize } from "~/hooks";
 import { OrderDirection, usePlaceLimit } from "~/hooks/limit-orders";
+import { useOrderbookPool } from "~/hooks/limit-orders/use-orderbook-pool";
 import { useStore } from "~/stores";
 import { formatPretty } from "~/utils/formatter";
 
@@ -28,11 +29,21 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
   ({ orderDirection = OrderDirection.Bid }) => {
     const { accountStore } = useStore();
     const { t } = useTranslation();
+    const [quoteDenom, setQuoteDenom] = useState<string>("OSMO");
+    const baseDenom = "ION";
+
+    const { poolId, orderbookContractAddress } = useOrderbookPool({
+      baseDenom,
+      quoteDenom,
+    });
     const swapState = usePlaceLimit({
       osmosisChainId: "localosmosis",
-      poolId: "1",
+      poolId,
       orderDirection,
       useQueryParams: false,
+      orderbookContractAddress,
+      baseDenom,
+      quoteDenom,
     });
     const fromAmountInputEl = useRef<HTMLInputElement | null>(null);
     const { isMobile } = useWindowSize();
@@ -42,12 +53,12 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
 
     return (
       <div className="flex flex-col gap-3">
-        <TokenSelectWidget
-          selectableAssets={[swapState.fromAsset, swapState.fromAsset]}
+        <TokenSelectLimit
+          selectableAssets={[swapState.fromAsset, swapState.toAsset]}
           selectedToken={swapState.toAsset}
           paymentToken={swapState.fromAsset}
           paymentBalance={swapState.inAmountInput.balance!}
-          onTokenSelect={() => {}}
+          onTokenSelect={(newQuoteDenom) => setQuoteDenom(newQuoteDenom)}
           disabled={false}
         />
         <div className="px-4 py-[22px] transition-all md:rounded-xl md:py-2.5 md:px-3">

packages/web/hooks/limit-orders/use-orderbook-pool.ts

@@ -0,0 +1,15 @@
+export const useOrderbookPool = ({
+  baseDenom,
+  quoteDenom,
+}: {
+  baseDenom: string;
+  quoteDenom: string;
+}) => {
+  return {
+    poolId: "1",
+    baseDenom,
+    quoteDenom,
+    orderbookContractAddress:
+      "osmo1svmdh0ega4jg44xc3gg36tkjpzrzlrgajv6v6c2wf0ul8m3gjajs0dps9w",
+  };
+};

packages/web/hooks/limit-orders/use-place-limit.ts

@@ -2,7 +2,6 @@ import { Dec } from "@keplr-wallet/unit";
 import { priceToTick } from "@osmosis-labs/math";
 import { useCallback, useMemo, useState } from "react";
 
-import { useOrderbook } from "~/hooks/limit-orders/use-orderbook";
 import { useSwapAmountInput, useSwapAssets } from "~/hooks/use-swap";
 import { useStore } from "~/stores";
 
@@ -17,24 +16,24 @@ export interface UsePlaceLimitParams {
   orderDirection: OrderDirection;
   useQueryParams?: boolean;
   useOtherCurrencies?: boolean;
+  baseDenom: string;
+  quoteDenom: string;
+  orderbookContractAddress: string;
 }
 
 // TODO: adjust as necessary
 const CLAIM_BOUNTY = "0.01";
 
 export const usePlaceLimit = ({
   osmosisChainId,
-  poolId,
+  quoteDenom,
+  baseDenom,
+  orderbookContractAddress,
   orderDirection,
   useQueryParams = false,
   useOtherCurrencies = false,
 }: UsePlaceLimitParams) => {
   const { accountStore } = useStore();
-  const {
-    baseDenom,
-    quoteDenom,
-    address: orderbookContractAddress,
-  } = useOrderbook({ poolId });
   const swapAssets = useSwapAssets({
     initialFromDenom: quoteDenom,
     initialToDenom: baseDenom,