diff --git a/apps/trading/client-pages/markets/closed.tsx b/apps/trading/client-pages/markets/closed.tsx index 4ce5813c8..404bcbef0 100644 --- a/apps/trading/client-pages/markets/closed.tsx +++ b/apps/trading/client-pages/markets/closed.tsx @@ -22,6 +22,7 @@ import { SettlementDateCell } from './settlement-date-cell'; import { SettlementPriceCell } from './settlement-price-cell'; import { useDataProvider } from '@vegaprotocol/data-provider'; import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; +import { MarketTableActions } from '../../components/market-table-actions'; type SettlementAsset = MarketMaybeWithData['tradableInstrument']['instrument']['product']['settlementAsset']; @@ -262,9 +263,13 @@ const ClosedMarketsDataGrid = ({ rowData }: { rowData: Row[] }) => { ), }, { - headerName: t('Market ID'), + headerName: '', field: 'id', - flex: 1, + maxWidth: 50, + resizable: false, + filter: false, + sortable: false, + cellRenderer: MarketTableActions, }, ]; return cols; diff --git a/apps/trading/client-pages/markets/markets.tsx b/apps/trading/client-pages/markets/markets.tsx index 15d0cf1cb..100298557 100644 --- a/apps/trading/client-pages/markets/markets.tsx +++ b/apps/trading/client-pages/markets/markets.tsx @@ -1,86 +1,10 @@ -import type { MarketMaybeWithData } from '@vegaprotocol/market-list'; import { MarketsContainer } from '@vegaprotocol/market-list'; -import { t } from '@vegaprotocol/i18n'; import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler'; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, - Link, - VegaIcon, - VegaIconNames, -} from '@vegaprotocol/ui-toolkit'; -import type { VegaICellRendererParams } from '@vegaprotocol/datagrid'; -import CopyToClipboard from 'react-copy-to-clipboard'; -import { DApp, EXPLORER_MARKET, useLinks } from '@vegaprotocol/environment'; -import { useCopyTimeout } from '@vegaprotocol/react-helpers'; +import { MarketTableActions } from '../../components/market-table-actions'; export const Markets = () => { const handleOnSelect = useMarketClickHandler(); - const linkCreator = useLinks(DApp.Explorer); return ( - ) => { - if (!value) return ; - return ( - - } - > - - - - - - {t('View on Explorer')} - - - - - ); - }} - /> - ); -}; - -const DropdownMenuCopyItem = ({ - value, - text, -}: { - value: string; - text: string; -}) => { - const [copied, setCopied] = useCopyTimeout(); - - return ( - - - setCopied(true)}> - - - {copied && ( - {t('Copied')} - )} - - + ); }; diff --git a/apps/trading/components/market-table-actions/index.ts b/apps/trading/components/market-table-actions/index.ts new file mode 100644 index 000000000..f4b5c93e7 --- /dev/null +++ b/apps/trading/components/market-table-actions/index.ts @@ -0,0 +1 @@ +export * from './market-table-actions'; diff --git a/apps/trading/components/market-table-actions/market-table-actions.tsx b/apps/trading/components/market-table-actions/market-table-actions.tsx new file mode 100644 index 000000000..7575c9db7 --- /dev/null +++ b/apps/trading/components/market-table-actions/market-table-actions.tsx @@ -0,0 +1,76 @@ +import type { MarketMaybeWithData } from '@vegaprotocol/market-list'; +import { t } from '@vegaprotocol/i18n'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, + Link, + VegaIcon, + VegaIconNames, +} from '@vegaprotocol/ui-toolkit'; +import type { VegaICellRendererParams } from '@vegaprotocol/datagrid'; +import CopyToClipboard from 'react-copy-to-clipboard'; +import { DApp, EXPLORER_MARKET, useLinks } from '@vegaprotocol/environment'; +import { useCopyTimeout } from '@vegaprotocol/react-helpers'; + +export const MarketTableActions = ({ + value, +}: VegaICellRendererParams) => { + const linkCreator = useLinks(DApp.Explorer); + if (!value) return ; + return ( + + } + > + + + + + + {t('View on Explorer')} + + + + + ); +}; + +const DropdownMenuCopyItem = ({ + value, + text, +}: { + value: string; + text: string; +}) => { + const [copied, setCopied] = useCopyTimeout(); + + return ( + + + setCopied(true)}> + + + {copied && ( + {t('Copied')} + )} + + + ); +}; diff --git a/libs/market-list/src/lib/components/markets-container/market-list-table.tsx b/libs/market-list/src/lib/components/markets-container/market-list-table.tsx index 8416d2369..6d4e00fc1 100644 --- a/libs/market-list/src/lib/components/markets-container/market-list-table.tsx +++ b/libs/market-list/src/lib/components/markets-container/market-list-table.tsx @@ -202,11 +202,10 @@ export const MarketListTable = forwardRef< /> {actions && (