import { useMarketList } from '@vegaprotocol/market-list'; import { positionsDataProvider } from '@vegaprotocol/positions'; import { t, useDataProvider } from '@vegaprotocol/react-helpers'; import { Dialog, ExternalLink, Icon, Intent, Link as UILink, Loader, Popover, } from '@vegaprotocol/ui-toolkit'; import { useVegaWallet } from '@vegaprotocol/wallet'; import { useMemo, useState } from 'react'; import { columnHeaders, columnHeadersPositionMarkets, columns, columnsPositionMarkets, } from './select-market-columns'; import { SelectMarketTableHeader, SelectMarketTableRow, SelectMarketTableRowSplash, } from './select-market-table'; import type { ReactNode } from 'react'; import type { MarketWithCandles, MarketWithData, } from '@vegaprotocol/market-list'; import type { PositionFieldsFragment } from '@vegaprotocol/positions'; import type { Column, OnCellClickHandler } from './select-market-columns'; import { Link } from 'react-router-dom'; import { useLinks } from '../../lib/use-links'; import { NEW_PROPOSAL_LINK } from '../constants'; type Market = MarketWithCandles & MarketWithData; export const SelectMarketLandingTable = ({ markets, onSelect, onCellClick, }: { markets: Market[] | null; onSelect: (id: string) => void; onCellClick: OnCellClickHandler; }) => { return ( <>
{markets?.map((market, i) => ( ))}
{'Or view full market list'}
); }; export const SelectAllMarketsTableBody = ({ markets, positions, onSelect, onCellClick, headers = columnHeaders, tableColumns = (market) => columns(market, onSelect, onCellClick), }: { markets?: Market[] | null; positions?: PositionFieldsFragment[]; title?: string; onSelect: (id: string) => void; onCellClick: OnCellClickHandler; headers?: Column[]; tableColumns?: (market: Market, openVolume?: string) => Column[]; }) => { const tokenLink = useLinks('token'); if (!markets) return null; return ( <> {/* Border styles required to create space between tbody elements margin/padding don't work */} {markets.length > 0 ? ( markets?.map((market, i) => ( p.market.id === market.id)?.openVolume )} /> )) ) : ( {t('No markets ')} {t('Propose a new market')} )} ); }; export const SelectMarketPopover = ({ marketName, onSelect, onCellClick, }: { marketName: string; onSelect: (id: string) => void; onCellClick: OnCellClickHandler; }) => { const triggerClasses = 'sm:text-lg md:text-xl lg:text-2xl flex items-center gap-2 whitespace-nowrap hover:text-neutral-500 dark:hover:text-neutral-300'; const { pubKey } = useVegaWallet(); const [open, setOpen] = useState(false); const { data, loading: marketsLoading } = useMarketList(); const variables = useMemo(() => ({ partyId: pubKey }), [pubKey]); const { data: party, loading: positionsLoading } = useDataProvider({ dataProvider: positionsDataProvider, skipUpdates: true, variables, skip: !pubKey, }); const onSelectMarket = (marketId: string) => { onSelect(marketId); setOpen(false); }; const iconClass = open ? 'rotate-180' : ''; const markets = useMemo( () => data?.filter((market) => party?.positionsConnection?.edges?.find( (edge) => edge.node.market.id === market.id ) ), [data, party] ); return ( {marketName} } >
{marketsLoading || (pubKey && positionsLoading) ? (
{t('Loading market data')}
) : ( {pubKey && (party?.positionsConnection?.edges?.length ?? 0) > 0 ? ( <> {t('My markets')} edge.node) .map((edge) => edge.node)} onSelect={onSelectMarket} onCellClick={onCellClick} headers={columnHeadersPositionMarkets} tableColumns={(market, openVolume) => columnsPositionMarkets( market, onSelectMarket, openVolume, onCellClick ) } /> ) : null} {t('All markets')}
)}
); }; const TableTitle = ({ children }: { children: ReactNode }) => { return (

{children}

); }; export const SelectMarketDialog = ({ dialogOpen, setDialogOpen, onSelect, onCellClick, }: { dialogOpen: boolean; setDialogOpen: (open: boolean) => void; title?: string; onSelect: (id: string) => void; onCellClick: OnCellClickHandler; }) => { const onSelectMarket = (id: string) => { onSelect(id); setDialogOpen(false); }; return ( setDialogOpen(false)} size="small" > ); }; interface LandingDialogContainerProps { onSelect: (id: string) => void; onCellClick: OnCellClickHandler; } const LandingDialogContainer = ({ onSelect, onCellClick, }: LandingDialogContainerProps) => { const { data, loading, error } = useMarketList(); if (error) { return (

{t('Failed to load markets')}

); } if (loading) { return (

{t('Loading...')}

); } return ( ); };