+
{primaryContent}
diff --git a/apps/trading/components/select-market/index.ts b/apps/trading/components/select-market/index.ts
index 48ae3cc35..5330316ed 100644
--- a/apps/trading/components/select-market/index.ts
+++ b/apps/trading/components/select-market/index.ts
@@ -1,3 +1,2 @@
export * from './select-market-columns';
export * from './select-market-table';
-export * from './select-market';
diff --git a/apps/trading/components/select-market/select-market-columns.tsx b/apps/trading/components/select-market/select-market-columns.tsx
index 73df026b7..acec64645 100644
--- a/apps/trading/components/select-market/select-market-columns.tsx
+++ b/apps/trading/components/select-market/select-market-columns.tsx
@@ -7,7 +7,7 @@ import {
} from '@vegaprotocol/market-list';
import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
-import { PriceCell, signedNumberCssClass } from '@vegaprotocol/datagrid';
+import { PriceCell } from '@vegaprotocol/datagrid';
import { Link as UILink, Sparkline, Tooltip } from '@vegaprotocol/ui-toolkit';
import isNil from 'lodash/isNil';
import type { CandleClose } from '@vegaprotocol/types';
@@ -341,187 +341,3 @@ export const columns = (
];
return selectMarketColumns;
};
-
-export const columnsPositionMarkets = (
- market: MarketMaybeWithDataAndCandles,
- onSelect: (id: string, metaKey?: boolean) => void,
- inViewRoot?: RefObject
,
- openVolume?: string,
- onCellClick?: OnCellClickHandler
-) => {
- const candlesClose = market.candles
- ?.map((candle) => candle?.close)
- .filter((c: string | undefined): c is CandleClose => !isNil(c));
- const candleLow = market.candles && calcCandleLow(market.candles);
- const candleHigh = market.candles && calcCandleHigh(market.candles);
- const candleVolume = market.candles && calcCandleVolume(market.candles);
- const selectMarketColumns: Column[] = [
- {
- kind: ColumnKind.Market,
- value: (
- {
- e.preventDefault();
- e.stopPropagation();
- onSelect(market.id, e.metaKey || e.ctrlKey);
- }}
- >
- {market.tradableInstrument.instrument.code}
-
- ),
- className: cellClassNames,
- onlyOnDetailed: false,
- },
- {
- kind: ColumnKind.ProductType,
- value: market.tradableInstrument.instrument.product.__typename,
- className: `py-2 first:text-left hidden sm:table-cell`,
- onlyOnDetailed: false,
- },
- {
- kind: ColumnKind.LastPrice,
- value: (
-
- ),
- className: cellClassNames,
- onlyOnDetailed: false,
- },
- {
- kind: ColumnKind.Change24,
- value: (
-
- ),
- className: cellClassNames,
- onlyOnDetailed: false,
- },
- {
- kind: ColumnKind.Sparkline,
- value: candlesClose && (
- Number(c))}
- />
- ),
- className: `${cellClassNames} hidden lg:table-cell`,
- onlyOnDetailed: false,
- },
- {
- kind: ColumnKind.Asset,
- value: (
-
- ),
- className: `${cellClassNames} hidden sm:table-cell`,
- onlyOnDetailed: false,
- },
- {
- kind: ColumnKind.High24,
- value: candleHigh ? (
-
- ) : (
- '-'
- ),
- className: `${cellClassNames} hidden xl:table-cell font-mono`,
- onlyOnDetailed: true,
- },
- {
- kind: ColumnKind.Low24,
- value: candleLow ? (
-
- ) : (
- '-'
- ),
- className: `${cellClassNames} hidden xl:table-cell font-mono`,
- onlyOnDetailed: true,
- },
- {
- kind: ColumnKind.Volume,
- value: (
-
- ),
- className: `${cellClassNames} hidden lg:table-cell font-mono`,
- onlyOnDetailed: true,
- dataTestId: 'market-volume',
- },
- {
- kind: ColumnKind.TradingMode,
- value: (
-
- ),
- className: `${cellClassNames} hidden lg:table-cell`,
- onlyOnDetailed: true,
- dataTestId: 'trading-mode-col',
- },
- {
- kind: ColumnKind.Fee,
- value: ,
- className: `${cellClassNames} hidden xl:table-cell font-mono`,
- onlyOnDetailed: true,
- },
- {
- kind: ColumnKind.Position,
- value: (
-
- {openVolume &&
- addDecimalsFormatNumber(openVolume, market.positionDecimalPlaces)}
-
- ),
- className: `${cellClassNames} hidden xxl:table-cell font-mono`,
- onlyOnDetailed: true,
- },
- ];
- return selectMarketColumns;
-};
diff --git a/apps/trading/components/select-market/select-market-table.tsx b/apps/trading/components/select-market/select-market-table.tsx
index 005318939..b7136ce3f 100644
--- a/apps/trading/components/select-market/select-market-table.tsx
+++ b/apps/trading/components/select-market/select-market-table.tsx
@@ -1,7 +1,6 @@
import { columnHeaders } from './select-market-columns';
import classNames from 'classnames';
import type { Column } from './select-market-columns';
-import type { ReactNode } from 'react';
export const SelectMarketTableHeader = ({
detailed = false,
@@ -62,23 +61,3 @@ export const SelectMarketTableRow = ({
);
};
-
-export const SelectMarketTableRowSplash = ({
- children,
- colSpan,
-}: {
- children: ReactNode;
- colSpan: number;
-}) => {
- return (
-
- |
- {children}
- |
-
- );
-};
diff --git a/apps/trading/components/select-market/select-market.spec.tsx b/apps/trading/components/select-market/select-market.spec.tsx
deleted file mode 100644
index 4340bb1e5..000000000
--- a/apps/trading/components/select-market/select-market.spec.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import * as Schema from '@vegaprotocol/types';
-
-import { SelectAllMarketsTableBody } from './select-market';
-
-import type {
- MarketMaybeWithCandles,
- MarketMaybeWithData,
- MarketData,
-} from '@vegaprotocol/market-list';
-import { MemoryRouter } from 'react-router-dom';
-import { MockedProvider } from '@apollo/client/testing';
-type Market = MarketMaybeWithCandles & MarketMaybeWithData;
-
-type PartialMarket = Partial<
- Omit & { data: Partial }
->;
-
-const MARKET_A: PartialMarket = {
- __typename: 'Market',
- id: '1',
- decimalPlaces: 2,
- tradingMode: Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS,
- tradableInstrument: {
- __typename: 'TradableInstrument',
- instrument: {
- __typename: 'Instrument',
- id: '1',
- code: 'ABCDEF',
- name: 'ABCDEF 1-Day',
- product: {
- __typename: 'Future',
- quoteName: 'ABCDEF',
- settlementAsset: {
- __typename: 'Asset',
- id: 'asset-ABC',
- name: '',
- decimals: 2,
- symbol: 'ABC',
- },
- dataSourceSpecForTradingTermination: {
- __typename: 'DataSourceSpec',
- id: 'oracleId',
- },
- dataSourceSpecForSettlementData: {
- __typename: 'DataSourceSpec',
- id: 'oracleId',
- },
- dataSourceSpecBinding: {
- __typename: 'DataSourceSpecToFutureBinding',
- tradingTerminationProperty: 'trading-termination-property',
- settlementDataProperty: 'settlement-data-property',
- },
- },
- metadata: {
- __typename: 'InstrumentMetadata',
- tags: ['ABC', 'DEF'],
- },
- },
- },
- fees: {
- __typename: 'Fees',
- factors: {
- __typename: 'FeeFactors',
- infrastructureFee: '0.01',
- liquidityFee: '0.01',
- makerFee: '0.01',
- },
- },
- data: {
- __typename: 'MarketData',
- market: {
- __typename: 'Market',
- id: '1',
- },
- markPrice: '90',
- trigger: Schema.AuctionTrigger.AUCTION_TRIGGER_OPENING,
- marketState: Schema.MarketState.STATE_PENDING,
- marketTradingMode: Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION,
- indicativeVolume: '1000',
- },
- candles: [
- {
- __typename: 'Candle',
- high: '100',
- low: '10',
- open: '10',
- close: '80',
- volume: '1000',
- periodStart: '2022-11-01T15:49:00Z',
- },
- {
- __typename: 'Candle',
- high: '10',
- low: '1',
- open: '1',
- close: '100',
- volume: '1000',
- periodStart: '2022-11-01T15:50:00Z',
- },
- ],
-};
-
-const MARKET_B: PartialMarket = {
- __typename: 'Market',
- id: '2',
- decimalPlaces: 2,
- positionDecimalPlaces: 0,
- tradingMode: Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS,
- tradableInstrument: {
- __typename: 'TradableInstrument',
- instrument: {
- __typename: 'Instrument',
- id: '2',
- code: 'XYZ',
- name: 'XYZ 1-Day',
- product: {
- __typename: 'Future',
- quoteName: 'XYZ',
- settlementAsset: {
- __typename: 'Asset',
- id: 'asset-XYZ',
- name: 'asset-XYZ',
- decimals: 2,
- symbol: 'XYZ',
- },
- dataSourceSpecForTradingTermination: {
- __typename: 'DataSourceSpec',
- id: 'oracleId',
- },
- dataSourceSpecForSettlementData: {
- __typename: 'DataSourceSpec',
- id: 'oracleId',
- },
- dataSourceSpecBinding: {
- __typename: 'DataSourceSpecToFutureBinding',
- tradingTerminationProperty: 'trading-termination-property',
- settlementDataProperty: 'settlement-data-property',
- },
- },
- metadata: {
- __typename: 'InstrumentMetadata',
- tags: ['XYZ'],
- },
- },
- },
- fees: {
- __typename: 'Fees',
- factors: {
- __typename: 'FeeFactors',
- infrastructureFee: '0.01',
- liquidityFee: '0.01',
- makerFee: '0.01',
- },
- },
- data: {
- __typename: 'MarketData',
- market: {
- __typename: 'Market',
- id: '2',
- },
- markPrice: '123.123',
- trigger: Schema.AuctionTrigger.AUCTION_TRIGGER_OPENING,
- marketState: Schema.MarketState.STATE_PENDING,
- marketTradingMode: Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION,
- indicativeVolume: '2000',
- },
- candles: [
- {
- __typename: 'Candle',
- high: '100',
- low: '10',
- open: '10',
- close: '80',
- volume: '1000',
- periodStart: '2022-11-01T15:49:00Z',
- },
- ],
-};
-
-describe('SelectMarket', () => {
- const table = document.createElement('table');
-
- it('should render the SelectAllMarketsTableBody', () => {
- const onSelect = jest.fn();
- const onCellClick = jest.fn();
- const { container } = render(
-
-
- ,
- { wrapper: MockedProvider, container: document.body.appendChild(table) }
- );
- expect(screen.getByText('ABCDEF')).toBeTruthy(); // name
- expect(screen.getByText('25.00%')).toBeTruthy(); // price change
- expect(container).toHaveTextContent(/1,000/); // volume
- fireEvent.click(screen.getAllByTestId(`market-link-1`)[0]);
- expect(onSelect).toHaveBeenCalledWith('1', false);
- });
-});
diff --git a/apps/trading/components/select-market/select-market.tsx b/apps/trading/components/select-market/select-market.tsx
deleted file mode 100644
index e5bd07b30..000000000
--- a/apps/trading/components/select-market/select-market.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-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/data-provider';
-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, metaKey?: boolean) => 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, metaKey?: boolean) => void;
- onCellClick: OnCellClickHandler;
-}) => {
- const { pubKey } = useVegaWallet();
- const [open, setOpen] = useState(false);
- const inViewRoot = useRef(null);
- const {
- data,
- loading: marketsLoading,
- reload: marketListReload,
- } = useMarketList();
- const {
- data: positions,
- loading: positionsLoading,
- reload,
- } = useDataProvider({
- dataProvider: positionsDataProvider,
- variables: { partyId: pubKey || '' },
- skip: !pubKey,
- });
- const onSelectMarket = useCallback(
- (marketId: string, metaKey?: boolean) => {
- onSelect(marketId, metaKey);
- 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}
- |
-
-
- );
-};
diff --git a/apps/trading/pages/_app.page.tsx b/apps/trading/pages/_app.page.tsx
index 1d1074b86..f9c898474 100644
--- a/apps/trading/pages/_app.page.tsx
+++ b/apps/trading/pages/_app.page.tsx
@@ -81,7 +81,7 @@ function AppBody({ Component }: AppProps) {
const gridClasses = classNames(
'h-full relative z-0 grid',
- 'grid-rows-[repeat(3,min-content),1fr]'
+ 'grid-rows-[repeat(3,min-content),minmax(0,1fr)]'
);
return (
@@ -93,7 +93,7 @@ function AppBody({ Component }: AppProps) {
-
+
(
onClickDeposit && onClickDeposit(data.asset.id);
}}
>
-
+
(
onClickWithdraw && onClickWithdraw(data.asset.id)
}
>
-
+
(
setRow(data);
}}
>
-
+
{
- const change = priceChange(candles);
- if (change && candles && candles.length > 0) {
- const yesterdayLastPrice = candles[0] && BigInt(candles[0]);
- if (yesterdayLastPrice) {
- return new BigNumber(change.toString())
- .dividedBy(new BigNumber(yesterdayLastPrice.toString()))
- .multipliedBy(100)
- .toNumber();
- }
- return 0;
- }
- return 0;
-};
-
-export const priceChange = (candles: string[]) => {
- return candles &&
- candles[candles.length - 1] !== undefined &&
- candles[0] !== undefined
- ? BigInt(candles[candles.length - 1] ?? 0) - BigInt(candles[0] ?? 0)
- : 0;
-};
-
export const PriceChangeCell = memo(
forwardRef(
({ candles, decimalPlaces }: PriceChangeCellProps, ref) => {
diff --git a/libs/deal-ticket/src/components/deal-ticket/index.ts b/libs/deal-ticket/src/components/deal-ticket/index.ts
index e28d29132..f2c27a654 100644
--- a/libs/deal-ticket/src/components/deal-ticket/index.ts
+++ b/libs/deal-ticket/src/components/deal-ticket/index.ts
@@ -4,7 +4,6 @@ export * from './deal-ticket-limit-amount';
export * from './deal-ticket-market-amount';
export * from './deal-ticket';
export * from './expiry-selector';
-export * from './market-selector';
export * from './side-selector';
export * from './time-in-force-selector';
export * from './type-selector';
diff --git a/libs/deal-ticket/src/components/deal-ticket/market-selector.tsx b/libs/deal-ticket/src/components/deal-ticket/market-selector.tsx
deleted file mode 100644
index 04e4851ac..000000000
--- a/libs/deal-ticket/src/components/deal-ticket/market-selector.tsx
+++ /dev/null
@@ -1,328 +0,0 @@
-import type { ReactNode } from 'react';
-import React, {
- useCallback,
- useState,
- useEffect,
- useRef,
- useMemo,
-} from 'react';
-import * as DialogPrimitives from '@radix-ui/react-dialog';
-import classNames from 'classnames';
-import {
- ButtonLink,
- Icon,
- Input,
- Loader,
- Splash,
-} from '@vegaprotocol/ui-toolkit';
-import {
- useScreenDimensions,
- useOutsideClick,
-} from '@vegaprotocol/react-helpers';
-import { useDataProvider } from '@vegaprotocol/data-provider';
-import { t } from '@vegaprotocol/i18n';
-import { IconNames } from '@blueprintjs/icons';
-import * as Schema from '@vegaprotocol/types';
-import type { Market } from '@vegaprotocol/market-list';
-import { marketsProvider } from '@vegaprotocol/market-list';
-
-interface Props {
- market: Market;
- setMarket: (marketId: string) => void;
- ItemRenderer?: React.FC<{
- market: Market;
- isMobile?: boolean;
- }>;
-}
-
-function escapeRegExp(str: string) {
- return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-
-export const MarketSelector = ({ market, setMarket, ItemRenderer }: Props) => {
- const { isMobile } = useScreenDimensions();
- const contRef = useRef(null);
- const inputRef = useRef(null);
- const arrowButtonRef = useRef(null);
- const [results, setResults] = useState([]);
- const [showPane, setShowPane] = useState(false);
- const [lookup, setLookup] = useState(
- market.tradableInstrument.instrument.name || ''
- );
- const [dialogContent, setDialogContent] = useState(
- null
- );
-
- const { data, loading, error } = useDataProvider({
- dataProvider: marketsProvider,
- variables: undefined,
- skipUpdates: true,
- });
-
- const outsideClickCb = useCallback(() => {
- if (!isMobile) {
- setShowPane(false);
- }
- }, [setShowPane, isMobile]);
-
- useOutsideClick({ refs: [contRef, arrowButtonRef], func: outsideClickCb });
-
- const handleOnChange = useCallback(
- (event: React.ChangeEvent) => {
- const {
- target: { value },
- } = event;
- setLookup(value);
- setShowPane(true);
- },
- [setLookup, setShowPane]
- );
-
- const handleMarketSelect = useCallback(
- (market: {
- id: string;
- tradableInstrument: { instrument: { name: string } };
- }) => {
- setLookup(market.tradableInstrument.instrument.name);
- setShowPane(false);
- setMarket(market.id);
- inputRef.current?.focus();
- },
- [setLookup, setShowPane, setMarket, inputRef]
- );
-
- const handleItemKeyDown = useCallback(
- (event: React.KeyboardEvent, market: Market, index: number) => {
- switch (event.key) {
- case 'ArrowDown':
- if (index < results.length - 1) {
- (contRef.current?.children[index + 1] as HTMLDivElement).focus();
- }
- break;
-
- case 'ArrowUp':
- if (!index) {
- inputRef.current?.focus();
- inputRef.current?.setSelectionRange(
- inputRef.current?.value.length,
- inputRef.current?.value.length
- );
- return;
- }
- (contRef.current?.children[index - 1] as HTMLDivElement).focus();
- break;
-
- case 'Enter':
- event.preventDefault();
- handleMarketSelect(market);
- break;
- default:
- setShowPane(false);
- setLookup(market.tradableInstrument.instrument.name);
- }
- },
- [results, handleMarketSelect]
- );
-
- const handleInputKeyDown = useCallback(
- (event: React.KeyboardEvent) => {
- if (event.key === 'ArrowDown') {
- (contRef.current?.children[0] as HTMLDivElement)?.focus();
- }
- },
- [contRef]
- );
-
- const handleOnBlur = useCallback(() => {
- if (!lookup && !showPane) {
- setLookup(market.tradableInstrument.instrument.name);
- }
- }, [market, lookup, showPane, setLookup]);
-
- const openPane = useCallback(() => {
- setShowPane(!showPane);
- inputRef.current?.focus();
- }, [showPane, setShowPane, inputRef]);
-
- const handleDialogOnchange = useCallback(
- (isOpen: boolean) => {
- setShowPane(isOpen);
- if (!isOpen) {
- setLookup(lookup || market.tradableInstrument.instrument.name);
- inputRef.current?.focus();
- }
- },
- [
- setShowPane,
- lookup,
- setLookup,
- market.tradableInstrument.instrument.name,
- inputRef,
- ]
- );
-
- const selectorContent = useMemo(() => {
- return (
-
-
-
-
-
-
-
-
-
-
-
- {loading && (
-
-
-
- )}
- {error && (
-
{t(`Something went wrong: ${error.message}`)}
- )}
-
- {results.map((market, i) => (
-
handleMarketSelect(market)}
- onKeyDown={(e) => handleItemKeyDown(e, market, i)}
- >
- {ItemRenderer ? (
-
- ) : (
- market.tradableInstrument.instrument.name
- )}
-
- ))}
-
-
-
-
-
- {t('Select market')}
-
-
{children}
-
-