From 906e7992de7d8d8e2a926737f6f9908e47fb4457 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Umay=20=C5=9Eahan?= Date: Tue, 29 Jul 2025 14:41:11 +0300 Subject: [PATCH] Automatically fetch data from HTTp based on URL or default connection address --- .../Trade/OpenOrdersTable/OpenOrdersTable.tsx | 4 +++- .../routes/fundingHistory/fundingHistory.tsx | 20 ++++++++++++++----- .../app/routes/openOrders/openOrders.tsx | 20 ++++++++++++++----- .../app/routes/orderHistory/orderHistory.tsx | 18 +++++++++++++++++ .../twapFillHistory/twapFillHistory.tsx | 20 ++++++++++++++----- .../app/routes/twapHistory/twapHistory.tsx | 20 ++++++++++++++----- 6 files changed, 81 insertions(+), 21 deletions(-) diff --git a/packages/frontend/app/components/Trade/OpenOrdersTable/OpenOrdersTable.tsx b/packages/frontend/app/components/Trade/OpenOrdersTable/OpenOrdersTable.tsx index 0dd02c62d..36fca69a1 100644 --- a/packages/frontend/app/components/Trade/OpenOrdersTable/OpenOrdersTable.tsx +++ b/packages/frontend/app/components/Trade/OpenOrdersTable/OpenOrdersTable.tsx @@ -55,7 +55,9 @@ export default function OpenOrdersTable(props: OpenOrdersTableProps) { }, [data, selectedFilter, symbol]); const viewAllLink = useMemo(() => { - return `${EXTERNAL_PAGE_URL_PREFIX}/openOrders/${debugWallet.address}`; + return debugWallet.address + ? `${EXTERNAL_PAGE_URL_PREFIX}/openOrders/${debugWallet.address}` + : `${EXTERNAL_PAGE_URL_PREFIX}/openOrders`; }, [debugWallet.address]); return ( diff --git a/packages/frontend/app/routes/fundingHistory/fundingHistory.tsx b/packages/frontend/app/routes/fundingHistory/fundingHistory.tsx index c1a9df5b5..6268d98c4 100644 --- a/packages/frontend/app/routes/fundingHistory/fundingHistory.tsx +++ b/packages/frontend/app/routes/fundingHistory/fundingHistory.tsx @@ -3,13 +3,20 @@ import { useParams } from 'react-router'; import ExternalPage from '~/components/ExternalPage/ExternalPage'; import FundingHistoryTable from '~/components/Trade/FundingHistoryTable/FundingHistoryTable'; import { useInfoApi } from '~/hooks/useInfoApi'; +import { useDebugStore } from '~/stores/DebugStore'; import type { UserFundingIF } from '~/utils/UserDataIFs'; function FundingHistory() { const { address } = useParams<{ address: string }>(); + const walletAddress = useDebugStore((s) => s.debugWallet.address); + + const targetAddress = address ?? walletAddress; + const [isFetched, setIsFetched] = useState(false); + const [loading, setLoading] = useState(false); + const [fetchedHistoryData, setFetchedHistoryData] = useState< UserFundingIF[] >([]); @@ -17,13 +24,16 @@ function FundingHistory() { const { fetchFundingHistory } = useInfoApi(); useEffect(() => { - if (address) { - fetchFundingHistory(address).then((data) => { + if (!targetAddress) return; + setLoading(true); + fetchFundingHistory(targetAddress) + .then((data) => { setFetchedHistoryData(data); setIsFetched(true); - }); - } - }, [address]); + }) + .catch(console.error) + .finally(() => setLoading(false)); + }, [targetAddress]); return ( diff --git a/packages/frontend/app/routes/openOrders/openOrders.tsx b/packages/frontend/app/routes/openOrders/openOrders.tsx index df3f84d7f..64ca6909c 100644 --- a/packages/frontend/app/routes/openOrders/openOrders.tsx +++ b/packages/frontend/app/routes/openOrders/openOrders.tsx @@ -3,25 +3,35 @@ import { useParams } from 'react-router'; import ExternalPage from '~/components/ExternalPage/ExternalPage'; import OpenOrdersTable from '~/components/Trade/OpenOrdersTable/OpenOrdersTable'; import { useInfoApi } from '~/hooks/useInfoApi'; +import { useDebugStore } from '~/stores/DebugStore'; import type { OrderDataIF } from '~/utils/orderbook/OrderBookIFs'; function OpenOrders() { const { address } = useParams<{ address: string }>(); + const walletAddress = useDebugStore((s) => s.debugWallet.address); + + const targetAddress = address ?? walletAddress; + const [isFetched, setIsFetched] = useState(false); + const [loading, setLoading] = useState(false); + const [fetchedData, setFetchedData] = useState([]); const { fetchOpenOrders } = useInfoApi(); useEffect(() => { - if (address) { - fetchOpenOrders(address).then((data) => { + if (!targetAddress) return; + setLoading(true); + fetchOpenOrders(targetAddress) + .then((data) => { setFetchedData(data); setIsFetched(true); - }); - } - }, [address]); + }) + .catch(console.error) + .finally(() => setLoading(false)); + }, [targetAddress]); return ( diff --git a/packages/frontend/app/routes/orderHistory/orderHistory.tsx b/packages/frontend/app/routes/orderHistory/orderHistory.tsx index dc9d57de2..671cedafb 100644 --- a/packages/frontend/app/routes/orderHistory/orderHistory.tsx +++ b/packages/frontend/app/routes/orderHistory/orderHistory.tsx @@ -11,12 +11,18 @@ import type { OrderDataIF } from '~/utils/orderbook/OrderBookIFs'; function OrderHistory() { const { address } = useParams<{ address: string }>(); + const walletAddress = useDebugStore((s) => s.debugWallet.address); + + const targetAddress = address ?? walletAddress; + const [isFetched, setIsFetched] = useState(false); const { debugWallet } = useDebugStore(); const { orderHistory, fetchedChannels } = useTradeDataStore(); + const [loading, setLoading] = useState(false); + const orderHistoryFetched = useMemo(() => { return fetchedChannels.has(WsChannels.USER_HISTORICAL_ORDERS); }, [fetchedChannels]); @@ -40,6 +46,18 @@ function OrderHistory() { // } }, [address, debugWallet.address]); + useEffect(() => { + if (!targetAddress) return; + setLoading(true); + fetchOrderHistory(targetAddress) + .then((data) => { + setFetchedHistoryData(data); + setIsFetched(true); + }) + .catch(console.error) + .finally(() => setLoading(false)); + }, [targetAddress]); + useEffect(() => { if (!isCurrentUser && address) { fetchOrderHistory(address).then((data) => { diff --git a/packages/frontend/app/routes/twapFillHistory/twapFillHistory.tsx b/packages/frontend/app/routes/twapFillHistory/twapFillHistory.tsx index a98ff4415..11d46b2be 100644 --- a/packages/frontend/app/routes/twapFillHistory/twapFillHistory.tsx +++ b/packages/frontend/app/routes/twapFillHistory/twapFillHistory.tsx @@ -3,13 +3,20 @@ import { useParams } from 'react-router'; import ExternalPage from '~/components/ExternalPage/ExternalPage'; import FillTwapTable from '~/components/Trade/TwapTable/FillTwapTable/FillTwapTable'; import { useInfoApi } from '~/hooks/useInfoApi'; +import { useDebugStore } from '~/stores/DebugStore'; import type { TwapSliceFillIF } from '~/utils/UserDataIFs'; function TwapFillHistory() { const { address } = useParams<{ address: string }>(); + const walletAddress = useDebugStore((s) => s.debugWallet.address); + + const targetAddress = address ?? walletAddress; + const [isFetched, setIsFetched] = useState(false); + const [loading, setLoading] = useState(false); + const [fetchedHistoryData, setFetchedHistoryData] = useState< TwapSliceFillIF[] >([]); @@ -17,13 +24,16 @@ function TwapFillHistory() { const { fetchTwapSliceFills } = useInfoApi(); useEffect(() => { - if (address) { - fetchTwapSliceFills(address).then((data) => { + if (!targetAddress) return; + setLoading(true); + fetchTwapSliceFills(targetAddress) + .then((data) => { setFetchedHistoryData(data); setIsFetched(true); - }); - } - }, [address]); + }) + .catch(console.error) + .finally(() => setLoading(false)); + }, [targetAddress]); return ( diff --git a/packages/frontend/app/routes/twapHistory/twapHistory.tsx b/packages/frontend/app/routes/twapHistory/twapHistory.tsx index 0067c4540..fdcc9e928 100644 --- a/packages/frontend/app/routes/twapHistory/twapHistory.tsx +++ b/packages/frontend/app/routes/twapHistory/twapHistory.tsx @@ -4,12 +4,19 @@ import HistoryTwapTable from '~/components/Trade/TwapTable/HistoryTwapTable/Hist import { useInfoApi } from '~/hooks/useInfoApi'; import type { TwapHistoryIF } from '~/utils/UserDataIFs'; import ExternalPage from '~/components/ExternalPage/ExternalPage'; +import { useDebugStore } from '~/stores/DebugStore'; function TwapHistory() { const { address } = useParams<{ address: string }>(); + const walletAddress = useDebugStore((s) => s.debugWallet.address); + + const targetAddress = address ?? walletAddress; + const [isFetched, setIsFetched] = useState(false); + const [loading, setLoading] = useState(false); + const [fetchedHistoryData, setFetchedHistoryData] = useState< TwapHistoryIF[] >([]); @@ -17,13 +24,16 @@ function TwapHistory() { const { fetchTwapHistory } = useInfoApi(); useEffect(() => { - if (address) { - fetchTwapHistory(address).then((data) => { + if (!targetAddress) return; + setLoading(true); + fetchTwapHistory(targetAddress) + .then((data) => { setFetchedHistoryData(data); setIsFetched(true); - }); - } - }, [address]); + }) + .catch(console.error) + .finally(() => setLoading(false)); + }, [targetAddress]); return (