feat: first pass orderbook hook

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

@@ -202,7 +202,6 @@ export const TokenSelectDrawerLimit: FunctionComponent<{
     const assetToActivate = assets.find(
       (asset) => asset.coinDenom === confirmUnverifiedAssetDenom
     );
-
     return (
       <div onKeyDown={containerKeyDown}>
         <ActivateUnverifiedTokenConfirmation

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

@@ -2,7 +2,7 @@ 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, useState } from "react";
+import { FunctionComponent, useEffect, useMemo, useState } from "react";
 
 import { Icon } from "~/components/assets";
 import { TokenSelectLimit } from "~/components/control/token-select-limit";
@@ -11,6 +11,7 @@ import { Tooltip } from "~/components/tooltip";
 import { Button } from "~/components/ui/button";
 import { useTranslation } from "~/hooks";
 import { OrderDirection, usePlaceLimit } from "~/hooks/limit-orders";
+import { useOrderbookSelectableDenoms } from "~/hooks/limit-orders/use-orderbook";
 import { useOrderbookPool } from "~/hooks/limit-orders/use-orderbook-pool";
 import { ReviewLimitOrderModal } from "~/modals/review-limit-order";
 import { useStore } from "~/stores";
@@ -31,9 +32,27 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
   ({ orderDirection = OrderDirection.Bid }) => {
     const { accountStore } = useStore();
     const { t } = useTranslation();
+    const {
+      selectableBaseDenoms,
+      selectableQuoteDenoms,
+      selectableBaseAssets,
+    } = useOrderbookSelectableDenoms();
     const [reviewOpen, setReviewOpen] = useState<boolean>(false);
-    const [baseDenom, setBaseDenom] = useState<string>("ION");
-    const quoteDenom = "OSMO";
+    const [baseDenom, setBaseDenom] = useState<string>("OSMO");
+    const [quoteDenom, setQuoteDenom] = useState<string>("USDC");
+
+    useEffect(() => {
+      if (selectableBaseDenoms.length > 0) {
+        const baseDenom = selectableBaseDenoms[0];
+        setBaseDenom(baseDenom);
+      }
+    }, [selectableBaseDenoms, selectableQuoteDenoms]);
+    useEffect(() => {
+      if (Object.keys(selectableQuoteDenoms).length > 0) {
+        const quoteDenom = selectableQuoteDenoms[baseDenom][0];
+        setQuoteDenom(quoteDenom);
+      }
+    }, [selectableQuoteDenoms, baseDenom]);
 
     const { poolId, contractAddress, makerFee } = useOrderbookPool({
       baseDenom,
@@ -56,7 +75,7 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
       <>
         <div className="flex flex-col gap-3">
           <TokenSelectLimit
-            selectableAssets={[swapState.baseAsset, swapState.quoteAsset]}
+            selectableAssets={selectableBaseAssets as any[]}
             baseAsset={swapState.baseAsset}
             quoteAsset={swapState.quoteAsset}
             baseBalance={swapState.baseTokenBalance}

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

@@ -1,6 +1,7 @@
 import { Dec } from "@keplr-wallet/unit";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 
+import { useOrderbookByDenoms } from "~/hooks/limit-orders/use-orderbook";
 import { useStore } from "~/stores";
 import { api } from "~/utils/trpc";
 
@@ -11,23 +12,24 @@ export const useOrderbookPool = ({
   baseDenom: string;
   quoteDenom: string;
 }) => {
-  const [contractAddress] = useState<string>(
-    "osmo1svmdh0ega4jg44xc3gg36tkjpzrzlrgajv6v6c2wf0ul8m3gjajs0dps9w"
-  );
+  const { orderbook } = useOrderbookByDenoms({
+    baseDenom,
+    quoteDenom,
+  });
   const { accountStore } = useStore();
   const { makerFee, isLoading: isMakerFeeLoading } = useMakerFee({
-    orderbookAddress: contractAddress,
+    orderbookAddress: orderbook?.contractAddress ?? "",
   });
   const account = accountStore.getWallet(accountStore.osmosisChainId);
   const orderState = useOrders({
-    orderbookAddress: contractAddress,
+    orderbookAddress: orderbook?.contractAddress ?? "",
     userAddress: account?.address ?? "",
   });
   return {
     poolId: "1",
     baseDenom,
     quoteDenom,
-    contractAddress,
+    contractAddress: orderbook?.contractAddress ?? "",
     makerFee,
     isMakerFeeLoading,
     orderState,

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

@@ -0,0 +1,107 @@
+import { getAssetFromAssetList, makeMinimalAsset } from "@osmosis-labs/utils";
+import { useMemo } from "react";
+
+import { AssetLists } from "~/config/generated/asset-lists";
+import { api } from "~/utils/trpc";
+
+const testnetOrderbooks = [
+  {
+    baseDenom: "OSMO",
+    quoteDenom: "USDC",
+    contractAddress:
+      "osmo1kgvlc4gmd9rvxuq2e63m0fn4j58cdnzdnrxx924mrzrjclcgqx5qxn3dga",
+  },
+  {
+    baseDenom: "ION",
+    quoteDenom: "OSMO",
+    contractAddress:
+      "osmo1ruxn39qj6x44gms8pfzw22kd7kemslc5fahgua3wuz0tkyks0uhq2f25wh",
+  },
+];
+
+export const useOrderbooks = () => {
+  const { orderbooks, isLoading } = {
+    orderbooks: testnetOrderbooks,
+    isLoading: false,
+  };
+
+  return { orderbooks, isLoading };
+};
+
+export const useOrderbookByDenoms = ({
+  baseDenom,
+  quoteDenom,
+}: {
+  baseDenom: string;
+  quoteDenom: string;
+}) => {
+  const { orderbooks, isLoading } = useOrderbooks();
+
+  const orderbook = orderbooks.find(
+    (orderbook) =>
+      orderbook.baseDenom === baseDenom && orderbook.quoteDenom === quoteDenom
+  );
+
+  return { orderbook, isLoading };
+};
+
+export const useOrderbookSelectableDenoms = () => {
+  const { orderbooks, isLoading } = useOrderbooks();
+
+  const { data: selectableAssetPages } =
+    api.edge.assets.getUserAssets.useInfiniteQuery(
+      {
+        limit: 50, // items per page
+      },
+      {
+        enabled: true,
+        getNextPageParam: (lastPage: any) => lastPage.nextCursor,
+        initialCursor: 0,
+      }
+    );
+
+  const selectableBaseDenoms = useMemo(() => {
+    const selectableDenoms = orderbooks.map((orderbook) => orderbook.baseDenom);
+    return Array.from(new Set(selectableDenoms));
+  }, [orderbooks]);
+
+  const selectableAssets = useMemo(() => {
+    return selectableAssetPages?.pages.flatMap((page) => page.items) ?? [];
+  }, [selectableAssetPages]);
+
+  const selectableBaseAssets = selectableBaseDenoms.map((denom) => {
+    const existingAsset = selectableAssets.find(
+      (asset) => asset.coinDenom === denom
+    );
+    if (existingAsset) {
+      return existingAsset;
+    }
+    const asset = getAssetFromAssetList({
+      symbol: denom,
+      sourceDenom: denom,
+      assetLists: AssetLists,
+    });
+
+    if (!asset) return;
+
+    return makeMinimalAsset(asset.rawAsset);
+  });
+
+  console.log(selectableBaseAssets);
+  const selectableQuoteDenoms = useMemo(() => {
+    const quoteDenoms: Record<string, string[]> = {};
+    for (let i = 0; i < selectableBaseDenoms.length; i++) {
+      quoteDenoms[selectableBaseDenoms[i]] = orderbooks
+        .filter((orderbook) => orderbook.baseDenom === selectableBaseDenoms[i])
+        .map((orderbook) => orderbook.quoteDenom);
+    }
+    return quoteDenoms;
+  }, [selectableBaseDenoms, orderbooks]);
+
+  return {
+    selectableBaseDenoms,
+    selectableQuoteDenoms,
+    selectableBaseAssets,
+    isLoading,
+  };
+};