chore(orders): use columnDefs in orders list, fix sorting of size and filled columns

2023-06-23 14:28:57 +02:00
7 changed files with 35 additions and 65 deletions
@@ -1,15 +0,0 @@
-describe('charts', { tags: '@smoke' }, () => {
-  before(() => {
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.visit('/#/markets/market-0');
-    cy.wait('@Markets');
-    cy.getByTestId('Depth').click();
-  });
-
-  it('can see market depth chart', () => {
-    // 6006-DEPC-001
-    cy.getByTestId('tab-depth').should('be.visible');
-    cy.get('.depth-chart-module_canvas__260De').should('be.visible');
-  });
-});
@@ -182,7 +182,7 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
      .contains('Liquidity monitoring parameters')
      .click();

-    validateMarketDataRow(0, 'Triggering Ratio', '0.7');
+    validateMarketDataRow(0, 'Triggering Ratio', '0');
    validateMarketDataRow(1, 'Time Window', '3,600');
    validateMarketDataRow(2, 'Scaling Factor', '10');
  });
@@ -8,7 +8,7 @@ import {
  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import type { CSSProperties } from 'react';
-import { useCallback, useState, useMemo } from 'react';
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -184,6 +184,7 @@ const MarketList = ({
  if (error) {
    return <div>{error.message}</div>;
  }
+
  return (
    <AutoSizer>
      {({ width, height }) => (
@@ -203,29 +204,6 @@ const MarketList = ({
  );
 };

-interface ListItemData {
-  data: MarketMaybeWithDataAndCandles[];
-  onSelect?: (marketId: string) => void;
-  currentMarketId?: string;
-}
-
-const ListItem = ({
-  index,
-  style,
-  data,
-}: {
-  index: number;
-  style: CSSProperties;
-  data: ListItemData;
-}) => (
-  <MarketSelectorItem
-    market={data.data[index]}
-    currentMarketId={data.currentMarketId}
-    style={style}
-    onSelect={data.onSelect}
-  />
-);
-
 const List = ({
  data,
  loading,
@@ -234,20 +212,28 @@ const List = ({
  onSelect,
  noItems,
  currentMarketId,
-}: ListItemData & {
+}: {
+  data: MarketMaybeWithDataAndCandles[];
  loading: boolean;
  width: number;
  height: number;
  noItems: string;
+  onSelect?: (marketId: string) => void;
+  currentMarketId?: string;
 }) => {
-  const itemKey = useCallback(
-    (index: number, data: ListItemData) => data.data[index].id,
-    []
-  );
-  const itemData = useMemo(
-    () => ({ data, onSelect, currentMarketId }),
-    [data, onSelect, currentMarketId]
-  );
+  const row = ({ index, style }: { index: number; style: CSSProperties }) => {
+    const market = data[index];
+
+    return (
+      <MarketSelectorItem
+        market={market}
+        currentMarketId={currentMarketId}
+        style={style}
+        onSelect={onSelect}
+      />
+    );
+  };
+
  if (!data || loading) {
    return (
      <div style={{ width, height }}>
@@ -273,13 +259,11 @@ const List = ({
    <FixedSizeList
      className="virtualized-list"
      itemCount={data.length}
-      itemData={itemData}
      itemSize={130}
-      itemKey={itemKey}
      width={width}
      height={height}
    >
-      {ListItem}
+      {row}
    </FixedSizeList>
  );
 };
@@ -124,7 +124,7 @@ export const DealTicket = ({
          normalizedOrder.size,
          market.positionDecimalPlaces
        ).multipliedBy(toBigNum(price, market.decimalPlaces)),
-        market.decimalPlaces
+        asset.decimals
      );
    }
    return null;
@@ -133,6 +133,7 @@ export const DealTicket = ({
    normalizedOrder?.size,
    market.decimalPlaces,
    market.positionDecimalPlaces,
+    asset.decimals,
  ]);

  const feeEstimate = useEstimateFees(
@@ -1,5 +1,6 @@
 import {
  addDecimalsFormatNumber,
+  formatNumber,
  formatNumberPercentage,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
@@ -46,10 +47,7 @@ const Row = ({
    if (asPercentage) {
      return formatNumberPercentage(new BigNumber(value).times(100));
    }
-    if (assetSymbol) {
-      return `${Number(value).toLocaleString()} ${assetSymbol}`;
-    }
-    return Number(value).toLocaleString();
+    return `${formatNumber(Number(value))} ${assetSymbol}`;
  };

  const formattedValue = getFormattedValue(value);
@@ -94,7 +94,7 @@ export const marketInfoQuery = (
      },
      lpPriceRange: '0.02',
      liquidityMonitoringParameters: {
-        triggeringRatio: '0.7',
+        triggeringRatio: '0',
        targetStakeParameters: {
          timeWindow: 3600,
          scalingFactor: 10,
@@ -1,6 +1,6 @@
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import classNames from 'classnames';
-import type { ComponentProps, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
 import { VegaIcon, VegaIconNames } from '../icon';
 import { Icon } from '../icon';
@@ -164,9 +164,10 @@ export const DropdownMenuSeparator = forwardRef<
 /**
 * Container element for submenus
 */
-export const DropdownMenuSub = (
-  subProps: ComponentProps<typeof DropdownMenuPrimitive.Sub>
-) => <DropdownMenuPrimitive.Sub {...subProps} />;
+export const DropdownMenuSub = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Sub>,
+  React.ComponentProps<typeof DropdownMenuPrimitive.Sub>
+>(({ ...subProps }) => <DropdownMenuPrimitive.Sub {...subProps} />);

 /**
 * Container within a DropdownMenuSub specifically for the content
@@ -200,9 +201,10 @@ export const DropdownMenuSubTrigger = forwardRef<
 * Portal to ensure menu portions are rendered outwith where they appear in the
 * DOM.
 */
-export const DropdownMenuPortal = (
-  portalProps: ComponentProps<typeof DropdownMenuPrimitive.Portal>
-) => <DropdownMenuPrimitive.Portal {...portalProps} />;
+export const DropdownMenuPortal = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Portal>,
+  React.ComponentProps<typeof DropdownMenuPrimitive.Portal>
+>(({ ...portalProps }) => <DropdownMenuPrimitive.Portal {...portalProps} />);

 /**
 * Wraps a regular DropdownMenuItem with copy to clip board functionality