Use test flags instead

public/configs/env.json

@@ -42,7 +42,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -116,7 +116,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -189,7 +189,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -262,7 +262,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -335,7 +335,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -410,7 +410,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -483,7 +483,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -558,7 +558,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -637,7 +637,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -713,7 +713,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -789,7 +789,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -865,7 +865,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -941,7 +941,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -1008,7 +1008,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -1084,7 +1084,7 @@
          "ethereumChainId": "1",
          "dydxChainId": "[mainnet chain id]",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "[mainnet squid integrator id]",
          "isMainNet": true,
          "tokens": {

src/components/Input.tsx

@@ -10,7 +10,7 @@ import {
   USD_DECIMALS,
 } from '@/constants/numbers';
 
-import { BIG_NUMBERS } from '@/lib/numbers';
+import { BIG_NUMBERS, MustBigNumber } from '@/lib/numbers';
 import { useLocaleSeparators } from '@/hooks';
 
 export enum InputType {
@@ -29,38 +29,31 @@ type StyleProps = {
 type ElementProps = {
   type?: InputType;
   value?: string | number | null;
+
+  allowNegative?: boolean;
+  decimals?: number;
   disabled?: boolean;
   id?: string;
+  max?: number;
   onBlur?: () => void;
+  onChange?:
+    | Dispatch<SetStateAction<string>>
+    | React.ReactEventHandler<HTMLInputElement>
+    | ((values: NumberFormatValues, e: SourceInfo) => void);
   onFocus?: () => void;
+  onInput?: ({
+    value,
+    floatValue,
+    formattedValue,
+  }: {
+    value: string;
+    floatValue?: number;
+    formattedValue: string;
+  }) => void;
   placeholder?: string;
 };
 
-type ConditionalProps =
+export type InputProps = ElementProps & StyleProps;
-  | {
-      allowNegative?: boolean;
-      decimals?: number;
-      max?: number;
-      onChange?: (values: NumberFormatValues, e: SourceInfo) => void;
-      onInput?: ({
-        value,
-        floatValue,
-        formattedValue,
-      }: {
-        value: string;
-        floatValue?: number;
-        formattedValue: string;
-      }) => void;
-    }
-  | {
-      allowNegative?: never;
-      decimals?: never;
-      max?: never;
-      onChange?: Dispatch<SetStateAction<string>> | React.ReactEventHandler<HTMLInputElement>;
-      onInput?: (e: SyntheticInputEvent) => void;
-    };
-
-export type InputProps = ElementProps & StyleProps & ConditionalProps;
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
   (
@@ -145,7 +138,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             ref={ref as React.Ref<typeof NumericFormat<unknown>>}
             id={id}
             // NumericFormat
-            valueIsNumericString
             allowNegative={allowNegative}
             decimalScale={decimals}
             decimalSeparator={LOCALE_DECIMAL_SEPARATOR}
@@ -169,7 +161,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
                 ? undefined
                 : Number(formattedValue.replace(',', '.'));
 
-              onInput?.({ value, floatValue, formattedValue, ...e });
+              onInput?.({ value, floatValue, formattedValue });
             }}
             // Native
             disabled={disabled}

src/constants/markets.ts

@@ -51,14 +51,4 @@ export const MARKETS_TO_DISPLAY = [
   'SUI-USD',
   'DOT-USD',
   'ETC-USD',
-  'ARB-USD',
-  'CRV-USD',
-  'BLUR-USD',
-  'FIL-USD',
-  'XLM-USD',
-  'PEPE-USD',
-  'WLD-USD',
-  'SEI-USD',
-  'LTC-USD',
-  'BCH-USD',
 ];

src/hooks/useTradeFormInputs.ts

@@ -11,19 +11,22 @@ export const useTradeFormInputs = () => {
   const { limitPriceInput, triggerPriceInput, trailingPercentInput } = tradeFormInputValues;
 
   useEffect(() => {
+    const floatValue = parseFloat(triggerPriceInput);
     abacusStateManager.setTradeValue({
-      value: triggerPriceInput,
+      value: floatValue,
       field: TradeInputField.triggerPrice,
     });
   }, [triggerPriceInput]);
 
   useEffect(() => {
-    abacusStateManager.setTradeValue({ value: limitPriceInput, field: TradeInputField.limitPrice });
+    const floatValue = parseFloat(limitPriceInput);
+    abacusStateManager.setTradeValue({ value: floatValue, field: TradeInputField.limitPrice });
   }, [limitPriceInput]);
 
   useEffect(() => {
+    const floatValue = parseFloat(trailingPercentInput);
     abacusStateManager.setTradeValue({
-      value: trailingPercentInput,
+      value: floatValue,
       field: TradeInputField.trailingPercent,
     });
   }, [trailingPercentInput]);

src/views/forms/TradeForm.tsx

@@ -206,7 +206,7 @@ export const TradeForm = ({
         dispatch(setTradeFormInputs({ triggerPriceInput: value }));
       },
       value: triggerPriceInput ?? '',
-      decimals: tickSizeDecimals ?? USD_DECIMALS,
+      decimals: tickSizeDecimals || USD_DECIMALS,
     });
   }
 
@@ -226,7 +226,7 @@ export const TradeForm = ({
         dispatch(setTradeFormInputs({ limitPriceInput: value }));
       },
       value: limitPriceInput,
-      decimals: tickSizeDecimals ?? USD_DECIMALS,
+      decimals: tickSizeDecimals || USD_DECIMALS,
     });
   }
 

src/views/forms/TradeForm/TradeSizeInputs.tsx

@@ -49,7 +49,7 @@ export const TradeSizeInputs = () => {
     useSelector(getCurrentMarketConfig, shallowEqual) || {};
   const { size, usdcSize, leverage, input: lastEditedInput } = inputTradeSizeData || {};
   const { needsLeverage } = currentTradeInputOptions || {};
-  const decimals = stepSizeDecimals ?? TOKEN_DECIMALS;
+  const decimals = stepSizeDecimals || TOKEN_DECIMALS;
 
   const { amountInput, usdAmountInput, leverageInput } = useSelector(
     getTradeFormInputs,
@@ -70,34 +70,22 @@ export const TradeSizeInputs = () => {
     }
   }, [size, usdcSize, leverage, lastEditedInput]);
 
-  const onSizeInput = ({
+  const onSizeInput = ({ value, floatValue }: { value: string; floatValue?: number }) => {
-    floatValue,
+    dispatch(setTradeFormInputs({ amountInput: value }));
-    formattedValue,
-  }: {
-    floatValue?: number;
-    formattedValue: string;
-  }) => {
-    dispatch(setTradeFormInputs({ amountInput: MustBigNumber(floatValue).toString() }));
     const newAmount = MustBigNumber(floatValue).toFixed(decimals);
 
     abacusStateManager.setTradeValue({
-      value: formattedValue === '' || newAmount === 'NaN' ? null : newAmount,
+      value: value === '' || newAmount === 'NaN' ? null : newAmount,
       field: TradeInputField.size,
     });
   };
 
-  const onUSDCInput = ({
+  const onUSDCInput = ({ value, floatValue }: { value: string; floatValue?: number }) => {
-    floatValue,
+    dispatch(setTradeFormInputs({ usdAmountInput: value }));
-    formattedValue,
+    const newUsdcAmount = MustBigNumber(floatValue).toFixed();
-  }: {
-    floatValue?: number;
-    formattedValue: string;
-  }) => {
-    dispatch(setTradeFormInputs({ usdAmountInput: MustBigNumber(floatValue).toString() }));
-    const newUsdcAmount = MustBigNumber(floatValue).toFixed(tickSizeDecimals || USD_DECIMALS);
 
     abacusStateManager.setTradeValue({
-      value: formattedValue === '' || newUsdcAmount === 'NaN' ? null : newUsdcAmount,
+      value: value === '' || newUsdcAmount === 'NaN' ? null : newUsdcAmount,
       field: TradeInputField.usdcSize,
     });
   };

src/views/tables/Orderbook.tsx

@@ -42,11 +42,7 @@ type StyleProps = {
   className?: string;
 };
 
-type RowData = Pick<OrderbookLine, 'depth' | 'offset' | 'price' | 'size'> & {
+type RowData = OrderbookLine & { side: 'bid' | 'ask'; mine?: number };
-  side: 'bid' | 'ask';
-  mine?: number;
-  key: string;
-};
 
 const useCalculateOrderbookData = ({ maxRowsPerSide }: { maxRowsPerSide: number }) => {
   const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
@@ -57,9 +53,8 @@ const useCalculateOrderbookData = ({ maxRowsPerSide }: { maxRowsPerSide: number
   return useMemo(() => {
     const asks = (orderbook?.asks?.toArray() ?? [])
       .map(
-        (row: OrderbookLine, idx: number) =>
+        (row: OrderbookLine) =>
           ({
-            key: `ask-${idx}`,
             side: 'ask',
             mine: openOrdersBySideAndPrice[OrderSide.SELL]?.[row.price]?.size,
             ...row,
@@ -69,9 +64,8 @@ const useCalculateOrderbookData = ({ maxRowsPerSide }: { maxRowsPerSide: number
 
     const bids = (orderbook?.bids?.toArray() ?? [])
       .map(
-        (row: OrderbookLine, idx: number) =>
+        (row: OrderbookLine) =>
           ({
-            key: `bid-${idx}`,
             side: 'bid',
             mine: openOrdersBySideAndPrice[OrderSide.BUY]?.[row.price]?.size,
             ...row,
@@ -103,44 +97,15 @@ const useCalculateOrderbookData = ({ maxRowsPerSide }: { maxRowsPerSide: number
     }
 
     const spread =
-      asks[0]?.price && bids[0]?.price ? MustBigNumber(asks[0].price).minus(bids[0].price) : null;
+      asks[0] && bids[0] ? MustBigNumber(asks[0]?.price ?? 0).minus(bids[0]?.price ?? 0) : null;
 
     const spreadPercent = orderbook?.spreadPercent;
 
     const histogramRange = Math.max(
-      isNaN(Number(bids[bids.length - 1]?.depth)) ? 0 : Number(bids[bids.length - 1]?.depth),
+      Number(bids[bids.length - 1]?.depth),
-      isNaN(Number(asks[asks.length - 1]?.depth)) ? 0 : Number(asks[asks.length - 1]?.depth)
+      Number(asks[asks.length - 1]?.depth)
     );
 
-    // Ensure asks and bids are of length maxRowsPerSide by adding empty rows.
-    let idx = asks.length - 1;
-    while (asks.length < maxRowsPerSide) {
-      idx += 1;
-
-      asks.push({
-        key: `ask-${idx}`,
-        side: 'ask',
-        size: 0,
-        price: 0,
-        offset: 0,
-        depth: 0,
-      });
-    }
-
-    idx = bids.length - 1;
-    while (bids.length < maxRowsPerSide) {
-      idx += 1;
-
-      bids.push({
-        key: `bid-${idx}`,
-        side: 'bid',
-        size: 0,
-        price: 0,
-        offset: 0,
-        depth: 0,
-      });
-    }
-
     return { asks, bids, spread, spreadPercent, histogramRange, hasOrderbook: !!orderbook };
   }, [orderbook, openOrdersBySideAndPrice]);
 };
@@ -177,33 +142,31 @@ const OrderbookTable = ({
         getCellValue: (row: RowData) => row.size,
         label: stringGetter({ key: STRING_KEYS.ORDERBOOK_ORDER_SIZE }),
         tag: symbol,
-        renderCell: (row: RowData) =>
+        renderCell: (row: RowData) => (
-          row.size > 0 && (
+          <Styled.HistogramOutput
-            <Styled.HistogramOutput
+            highlightText
-              highlightText
+            type={OutputType.Asset}
-              type={OutputType.Asset}
+            value={row.size}
-              value={row.size}
+            fractionDigits={stepSizeDecimals}
-              fractionDigits={stepSizeDecimals}
+            histogramSide={histogramSide === 'left' && 'left'}
-              histogramSide={histogramSide === 'left' && 'left'}
+            useGrouping={false}
-              useGrouping={false}
+          />
-            />
+        ),
-          ),
       },
       {
         columnKey: 'price',
         getCellValue: (row: RowData) => row.price,
         label: stringGetter({ key: STRING_KEYS.PRICE }),
         tag: 'USD',
-        renderCell: (row: RowData) =>
+        renderCell: (row: RowData) => (
-          row.price > 0 && (
+          <OrderbookTradesOutput
-            <OrderbookTradesOutput
+            highlightText
-              highlightText
+            type={OutputType.Number}
-              type={OutputType.Number}
+            value={row.price}
-              value={row.price}
+            fractionDigits={tickSizeDecimals}
-              fractionDigits={tickSizeDecimals}
+            useGrouping={false}
-              useGrouping={false}
+          />
-            />
+        ),
-          ),
       },
       {
         columnKey: 'subaccount-orders',
@@ -231,13 +194,12 @@ const OrderbookTable = ({
       label="Orderbook"
       data={data}
       columns={columns}
-      getRowKey={(row: RowData) => row.key}
+      getRowKey={(row: RowData) => `${row.side}-${row.price}`}
       getRowAttributes={(row: RowData) => ({
         'data-side': row.side,
         style: {
           '--histogram-bucket-size': row.size,
           '--histogram-bucket-depth': row.depth,
-          '--tr-pointerEvents': row.price ? 'auto' : 'none',
         },
       })}
       onRowAction={onRowAction}
@@ -276,10 +238,19 @@ export const Orderbook = ({
       maxRowsPerSide,
     });
 
+  const [showRowsPerSide, setShowRowsPerSide] = useState(0);
+
+  // Make rows visible one by one so avoid jumps in initial scroll position
+  useEffect(() => {
+    if (showRowsPerSide < maxRowsPerSide) {
+      setShowRowsPerSide((showRows) => showRows + 1);
+    }
+  }, [showRowsPerSide]);
+
   const data = useMemo(
     () =>
       [
-        ...bids.reverse(),
+        ...bids.slice(0, showRowsPerSide).reverse(),
         {
           key: 'spread',
           slotCustomRow: (props) => (
@@ -296,9 +267,9 @@ export const Orderbook = ({
             </Styled.SpreadTableRow>
           ),
         } as CustomRowConfig,
-        ...asks,
+        ...asks.slice(0, showRowsPerSide),
       ].reverse(),
-    [asks, bids, spread, spreadPercent, isTablet]
+    [asks, bids, spread, spreadPercent, showRowsPerSide, isTablet]
   );
 
   const onRowAction = useCallback(
@@ -354,7 +325,7 @@ export const Orderbook = ({
       </Styled.Header>
       <Styled.SplitOrderbook>
         <OrderbookTable data={asks} histogramSide="right" {...orderbookTableProps} />
-        <OrderbookTable data={bids.reverse()} histogramSide="left" {...orderbookTableProps} />
+        <OrderbookTable data={bids} histogramSide="left" {...orderbookTableProps} />
       </Styled.SplitOrderbook>
     </Styled.HorizontalLayout>
   );
@@ -524,7 +495,6 @@ Styled.OrderbookTable = styled(OrderbookTradesTable)<StyleProps>`
 
   tr {
     --histogram-bucket-depth: 0;
-    pointer-events: var(--tr-pointerEvents);
 
     &[data-side='bid'] {
       --accent-color: var(--color-positive);