diff --git a/apps/trading/pages/markets/[marketId].page.tsx b/apps/trading/pages/markets/[marketId].page.tsx index 3f3ce94c1..3f4ef9ce8 100644 --- a/apps/trading/pages/markets/[marketId].page.tsx +++ b/apps/trading/pages/markets/[marketId].page.tsx @@ -129,7 +129,6 @@ const MarketPage = ({ id }: { id?: string }) => { store.setMarketId(marketId); } }} - title={t('Select a market to get started')} /> ); diff --git a/libs/market-list/src/lib/components/select-market.tsx b/libs/market-list/src/lib/components/select-market.tsx index a18df4cc4..c073b2537 100644 --- a/libs/market-list/src/lib/components/select-market.tsx +++ b/libs/market-list/src/lib/components/select-market.tsx @@ -8,7 +8,6 @@ import { RotatingArrow, } from '@vegaprotocol/ui-toolkit'; import classNames from 'classnames'; -import isNil from 'lodash/isNil'; import { useMemo, useState } from 'react'; import { MARKET_LIST_QUERY } from '../markets-data-provider'; import type { Column } from './select-market-columns'; @@ -117,18 +116,10 @@ export const SelectMarketPopover = ({ }) => { const headerTriggerButtonClassName = 'flex items-center gap-8 shrink-0 p-8 font-medium text-h5 hover:bg-black/10 dark:hover:bg-white/20'; - const { keypair } = useVegaWallet(); const [open, setOpen] = useState(false); - const yTimestamp = useMemo(() => { - const yesterday = Math.round(new Date().getTime() / 1000) - 24 * 3600; - return new Date(yesterday * 1000).toISOString(); - }, []); - + const { data } = useMarkets(); const variables = useMemo(() => ({ partyId: keypair?.pub }), [keypair?.pub]); - const { data } = useQuery(MARKET_LIST_QUERY, { - variables: { interval: Interval.INTERVAL_I1H, since: yTimestamp }, - }); const { data: marketDataPositions } = useQuery(POSITION_QUERY, { variables, skip: !keypair?.pub, @@ -217,37 +208,64 @@ export const SelectMarketDialog = ({ dialogOpen, setDialogOpen, onSelect, - title = t('Select a market'), }: { dialogOpen: boolean; setDialogOpen: (open: boolean) => void; title?: string; - detailed?: boolean; onSelect: (id: string) => void; }) => { - const yTimestamp = useMemo(() => { - const yesterday = Math.round(new Date().getTime() / 1000) - 24 * 3600; - return new Date(yesterday * 1000).toISOString(); - }, []); - const onSelectMarket = (id: string) => { onSelect(id); setDialogOpen(false); }; - const { data } = useQuery(MARKET_LIST_QUERY, { - variables: { interval: Interval.INTERVAL_I1H, since: yTimestamp }, - }); return ( setDialogOpen(false)} titleClassNames="font-bold font-sans text-3xl tracking-tight mb-0 pl-8" size="small" > - + ); }; + +interface LandingDialogContainerProps { + onSelect: (id: string) => void; +} + +const LandingDialogContainer = ({ onSelect }: LandingDialogContainerProps) => { + const { data, loading, error } = useMarkets(); + if (error) { + return ( +
+

{t('Failed to load markets')}

+
+ ); + } + + if (loading) { + return ( +
+

{t('Loading...')}

+
+ ); + } + + return ; +}; + +const useMarkets = () => { + const since = useMemo(() => { + const yesterday = Math.round(new Date().getTime() / 1000) - 24 * 3600; + return new Date(yesterday * 1000).toISOString(); + }, []); + const { data, loading, error } = useQuery(MARKET_LIST_QUERY, { + variables: { interval: Interval.INTERVAL_I1H, since }, + }); + + return { data, loading, error }; +};