diff --git a/packages/web/components/complex/orders-history/index.tsx b/packages/web/components/complex/orders-history/index.tsx index c5531dd2f9..b765bc38df 100644 --- a/packages/web/components/complex/orders-history/index.tsx +++ b/packages/web/components/complex/orders-history/index.tsx @@ -84,7 +84,7 @@ export const OrderHistory = observer(() => { } = useOrderbookAllActiveOrders({ userAddress: wallet?.address ?? "", pageSize: 20, - refetchInterval: 10000, + refetchInterval: featureFlags.sqsActiveOrders ? 10000 : 30000, }); const groupedOrders = useMemo(() => groupOrdersByStatus(orders), [orders]); const groups = useMemo( @@ -123,7 +123,7 @@ export const OrderHistory = observer(() => { useOrderbookClaimableOrders({ userAddress: wallet?.address ?? "", disabled: isLoading || filledOrdersInDisplay.length === 0 || isRefetching, - refetchInterval: 10000, + refetchInterval: featureFlags.sqsActiveOrders ? 10000 : 30000, }); const claimOrders = useCallback(async () => { diff --git a/packages/web/hooks/limit-orders/use-orderbook.ts b/packages/web/hooks/limit-orders/use-orderbook.ts index 12625c8494..7242882149 100644 --- a/packages/web/hooks/limit-orders/use-orderbook.ts +++ b/packages/web/hooks/limit-orders/use-orderbook.ts @@ -10,6 +10,7 @@ import { getAssetFromAssetList } from "@osmosis-labs/utils"; import { useCallback, useMemo } from "react"; import { AssetLists } from "~/config/generated/asset-lists"; +import { useFeatureFlags } from "~/hooks/use-feature-flags"; import { useSwapAsset } from "~/hooks/use-swap"; import { useStore } from "~/stores"; import { api } from "~/utils/trpc"; @@ -262,7 +263,11 @@ const useMakerFee = ({ orderbookAddress }: { orderbookAddress: string }) => { export type DisplayableLimitOrder = MappedLimitOrder; -export const useOrderbookAllActiveOrders = ({ +/** + * Queries for all active orders for a given user. + * Swaps between using SQS passthrough and a direct node query based on feature flag. + */ +const useOrdersQuery = ({ userAddress, pageSize = 10, refetchInterval = 5000, @@ -271,17 +276,18 @@ export const useOrderbookAllActiveOrders = ({ pageSize?: number; refetchInterval?: number; }) => { + const { sqsActiveOrders } = useFeatureFlags(); const { orderbooks } = useOrderbooks(); const addresses = orderbooks.map(({ contractAddress }) => contractAddress); const { - data: orders, - isLoading, - fetchNextPage, - isFetching, - isFetchingNextPage, - hasNextPage, - refetch, - isRefetching, + data: sqsOrders, + isLoading: isSQSOrdersLoading, + fetchNextPage: fetchSQSOrdersNextPage, + isFetching: isSQSOrdersFetching, + isFetchingNextPage: isSQSOrdersFetchingNextPage, + hasNextPage: hasSQSOrdersNextPage, + refetch: refetchSQSOrders, + isRefetching: isSQSOrdersRefetching, } = api.local.orderbooks.getAllOrdersSQS.useInfiniteQuery( { userOsmoAddress: userAddress, @@ -293,7 +299,7 @@ export const useOrderbookAllActiveOrders = ({ refetchInterval, cacheTime: refetchInterval, staleTime: refetchInterval, - enabled: !!userAddress && addresses.length > 0, + enabled: !!userAddress && addresses.length > 0 && sqsActiveOrders, refetchOnMount: true, keepPreviousData: false, trpc: { @@ -305,6 +311,76 @@ export const useOrderbookAllActiveOrders = ({ } ); + const { + data: nodeOrders, + isLoading: isNodeOrdersLoading, + fetchNextPage: fetchNodeOrdersNextPage, + isFetching: isNodeOrdersFetching, + isFetchingNextPage: isNodeOrdersFetchingNextPage, + hasNextPage: hasNodeOrdersNextPage, + refetch: refetchNodeOrders, + isRefetching: isNodeOrdersRefetching, + } = api.edge.orderbooks.getAllOrders.useInfiniteQuery( + { + userOsmoAddress: userAddress, + limit: pageSize, + }, + { + getNextPageParam: (lastPage) => lastPage.nextCursor, + initialCursor: 0, + refetchInterval, + cacheTime: refetchInterval, + staleTime: refetchInterval, + enabled: !!userAddress && addresses.length > 0 && !sqsActiveOrders, + refetchOnMount: true, + keepPreviousData: false, + trpc: { + abortOnUnmount: true, + context: { + skipBatch: true, + }, + }, + } + ); + + return { + data: sqsActiveOrders ? sqsOrders : nodeOrders, + isLoading: sqsActiveOrders ? isSQSOrdersLoading : isNodeOrdersLoading, + fetchNextPage: sqsActiveOrders + ? fetchSQSOrdersNextPage + : fetchNodeOrdersNextPage, + isFetching: sqsActiveOrders ? isSQSOrdersFetching : isNodeOrdersFetching, + isFetchingNextPage: sqsActiveOrders + ? isSQSOrdersFetchingNextPage + : isNodeOrdersFetchingNextPage, + hasNextPage: sqsActiveOrders ? hasSQSOrdersNextPage : hasNodeOrdersNextPage, + refetch: sqsActiveOrders ? refetchSQSOrders : refetchNodeOrders, + isRefetching: sqsActiveOrders + ? isSQSOrdersRefetching + : isNodeOrdersRefetching, + }; +}; + +export const useOrderbookAllActiveOrders = ({ + userAddress, + pageSize = 10, + refetchInterval = 5000, +}: { + userAddress: string; + pageSize?: number; + refetchInterval?: number; +}) => { + const { + data: orders, + isLoading, + fetchNextPage, + isFetching, + isFetchingNextPage, + hasNextPage, + refetch, + isRefetching, + } = useOrdersQuery({ userAddress, pageSize, refetchInterval }); + const allOrders = useMemo(() => { return orders?.pages.flatMap((page) => page.items) ?? []; }, [orders]); @@ -326,7 +402,11 @@ export const useOrderbookAllActiveOrders = ({ }; }; -export const useOrderbookClaimableOrders = ({ +/** + * Queries for all claimable orders for a given user. + * Swaps between using SQS passthrough and a direct node query based on feature flag. + */ +const useClaimableOrdersQuery = ({ userAddress, disabled = false, refetchInterval = 5000, @@ -336,8 +416,7 @@ export const useOrderbookClaimableOrders = ({ refetchInterval?: number; }) => { const { orderbooks } = useOrderbooks(); - const { accountStore } = useStore(); - const account = accountStore.getWallet(accountStore.osmosisChainId); + const { sqsActiveOrders } = useFeatureFlags(); const addresses = orderbooks.map(({ contractAddress }) => contractAddress); const { data: claimableOrders, isLoading } = api.local.orderbooks.getAllOrdersSQS.useInfiniteQuery( @@ -350,7 +429,30 @@ export const useOrderbookClaimableOrders = ({ getNextPageParam: (lastPage) => lastPage.nextCursor, initialCursor: 0, refetchInterval, - enabled: !!userAddress && addresses.length > 0 && !disabled, + enabled: + !!userAddress && addresses.length > 0 && !disabled && sqsActiveOrders, + refetchOnMount: true, + keepPreviousData: false, + trpc: { + abortOnUnmount: true, + context: { + skipBatch: true, + }, + }, + } + ); + + const { data: nodeClaimableOrders, isLoading: nodeIsLoading } = + api.edge.orderbooks.getClaimableOrders.useQuery( + { + userOsmoAddress: userAddress, + }, + { + enabled: + !!userAddress && + addresses.length > 0 && + !disabled && + !sqsActiveOrders, refetchOnMount: true, keepPreviousData: false, trpc: { @@ -363,8 +465,35 @@ export const useOrderbookClaimableOrders = ({ ); const orders = useMemo(() => { + if (!sqsActiveOrders) return nodeClaimableOrders; return claimableOrders?.pages?.flatMap((page) => page.items) ?? []; - }, [claimableOrders?.pages]); + }, [claimableOrders?.pages, nodeClaimableOrders, sqsActiveOrders]); + + return { + data: orders, + isLoading: sqsActiveOrders ? isLoading : nodeIsLoading, + }; +}; + +export const useOrderbookClaimableOrders = ({ + userAddress, + disabled = false, + refetchInterval = 5000, +}: { + userAddress: string; + disabled?: boolean; + refetchInterval?: number; +}) => { + const { orderbooks } = useOrderbooks(); + const { accountStore } = useStore(); + const account = accountStore.getWallet(accountStore.osmosisChainId); + const addresses = orderbooks.map(({ contractAddress }) => contractAddress); + const { data: orders, isLoading } = useClaimableOrdersQuery({ + userAddress, + disabled, + refetchInterval, + }); + const claimAllOrders = useCallback(async () => { if (!account || !orders) return; const msgs = addresses diff --git a/packages/web/hooks/use-feature-flags.ts b/packages/web/hooks/use-feature-flags.ts index 3a7a9dd561..bbbca4f2de 100644 --- a/packages/web/hooks/use-feature-flags.ts +++ b/packages/web/hooks/use-feature-flags.ts @@ -30,7 +30,8 @@ export type AvailableFlags = | "advancedChart" | "cypherCard" | "newPortfolioPage" - | "inGivenOut"; + | "inGivenOut" + | "sqsActiveOrders"; const defaultFlags: Record = { staking: true, @@ -56,6 +57,7 @@ const defaultFlags: Record = { cypherCard: false, newPortfolioPage: false, inGivenOut: false, + sqsActiveOrders: false, }; const LIMIT_ORDER_COUNTRY_CODES = @@ -67,7 +69,6 @@ export function useFeatureFlags() { const launchdarklyFlags: Record = useFlags(); const { isMobile } = useWindowSize(); const [isInitialized, setIsInitialized] = useState(false); - const client = useLDClient(); const { data: levanaGeoblock } = useQuery(