import React, { useCallback } from 'react'; import { useMarketList } from '@vegaprotocol/market-list'; import { t } from '@vegaprotocol/i18n'; import { useAssetDetailsDialogStore } from '@vegaprotocol/assets'; import { Link as UILink } from '@vegaprotocol/ui-toolkit'; import type { OnCellClickHandler } from '../select-market'; import type { MarketMaybeWithDataAndCandles } from '@vegaprotocol/market-list'; import { ColumnKind, columns, SelectMarketTableHeader, SelectMarketTableRow, } from '../select-market'; import { WelcomeDialogHeader } from './welcome-dialog-header'; import { Link, useNavigate, useParams } from 'react-router-dom'; import { ProposedMarkets } from './proposed-markets'; import { Links, Routes } from '../../pages/client-router'; export const SelectMarketLandingTable = ({ markets, onClose, }: { markets: MarketMaybeWithDataAndCandles[] | null; onClose: () => void; }) => { const params = useParams(); const navigate = useNavigate(); const marketId = params.marketId; const onSelect = useCallback( (id: string) => { if (id && id !== marketId) { navigate(Links[Routes.MARKET](id)); } }, [marketId, navigate] ); const onSelectMarket = useCallback( (id: string) => { onSelect(id); onClose(); }, [onSelect, onClose] ); const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore(); const onCellClick = useCallback( (e, kind, value) => { if (value && kind === ColumnKind.Asset) { openAssetDetailsDialog(value, e.target as HTMLElement); } }, [openAssetDetailsDialog] ); const showProposed = (markets?.length || 0) <= 5; return ( <>

{t('Select a market to get started...')}

{markets?.map((market, i) => ( ))}
onClose()} > {'Or view full market list'}
{showProposed && } ); }; interface LandingDialogContainerProps { onClose: () => void; } export const WelcomeLandingDialog = ({ onClose, }: LandingDialogContainerProps) => { const { data, loading, error } = useMarketList(); if (error) { return (

{t('Failed to load markets')}

); } if (loading) { return (

{t('Loading...')}

); } return ( <> ); };