import { useCallback, useEffect, useMemo, useState, useRef } from 'react'; import type { RefObject } from 'react'; import { useMarketList } from '@vegaprotocol/market-list'; import { positionsDataProvider } from '@vegaprotocol/positions'; import { t } from '@vegaprotocol/i18n'; import { useDataProvider } from '@vegaprotocol/react-helpers'; import { ExternalLink, Icon, Loader, Popover } from '@vegaprotocol/ui-toolkit'; import { useVegaWallet } from '@vegaprotocol/wallet'; import { columnHeaders, columnHeadersPositionMarkets, columns, columnsPositionMarkets, } from './select-market-columns'; import { SelectMarketTableHeader, SelectMarketTableRow, SelectMarketTableRowSplash, } from './select-market-table'; import type { ReactNode } from 'react'; import type { MarketMaybeWithDataAndCandles } from '@vegaprotocol/market-list'; import type { PositionFieldsFragment } from '@vegaprotocol/positions'; import type { Column, OnCellClickHandler } from './select-market-columns'; import { DApp, TOKEN_NEW_MARKET_PROPOSAL, useLinks, } from '@vegaprotocol/environment'; import { HeaderTitle } from '../header'; export const SelectAllMarketsTableBody = ({ markets, positions, onSelect, onCellClick, inViewRoot, headers = columnHeaders, tableColumns = (market) => columns(market, onSelect, onCellClick, inViewRoot), }: { markets?: MarketMaybeWithDataAndCandles[] | null; positions?: PositionFieldsFragment[]; title?: string; onSelect: (id: string) => void; onCellClick: OnCellClickHandler; headers?: Column[]; tableColumns?: ( market: MarketMaybeWithDataAndCandles, inViewRoot?: RefObject, openVolume?: string ) => Column[]; inViewRoot?: RefObject; }) => { const tokenLink = useLinks(DApp.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 = ({ marketCode, marketName, onSelect, onCellClick, }: { marketCode: string; marketName: string; onSelect: (id: string) => void; onCellClick: OnCellClickHandler; }) => { const { pubKey } = useVegaWallet(); const [open, setOpen] = useState(false); const inViewRoot = useRef(null); const { data, loading: marketsLoading, reload: marketListReload, } = useMarketList(); const variables = useMemo(() => ({ partyId: pubKey }), [pubKey]); const { data: positions, loading: positionsLoading, reload, } = useDataProvider({ dataProvider: positionsDataProvider, variables, skip: !pubKey, }); const onSelectMarket = useCallback( (marketId: string) => { onSelect(marketId); setOpen(false); }, [onSelect] ); const iconClass = open ? 'rotate-180' : ''; const markets = useMemo( () => data?.filter((market) => positions?.find((node) => node.market.id === market.id) ), [data, positions] ); useEffect(() => { if (open) { reload(); marketListReload(); } }, [open, marketListReload, reload]); return ( } >
{marketsLoading || (pubKey && positionsLoading) ? (
{t('Loading market data')}
) : ( {pubKey && (positions?.length ?? 0) && (markets?.length ?? 0) ? ( <> {t('My markets')} columnsPositionMarkets( market, onSelectMarket, inViewRoot, openVolume, onCellClick ) } /> ) : null} {t('All markets')}
)}
); }; const TableTitle = ({ children }: { children: ReactNode }) => { return (

{children}

); };