merge

package.json

@@ -57,7 +57,7 @@
     "@datadog/browser-logs": "^5.23.3",
     "@dydxprotocol/v4-abacus": "1.13.39",
     "@dydxprotocol/v4-client-js": "1.15.1",
-    "@dydxprotocol/v4-localization": "^1.1.257",
+    "@dydxprotocol/v4-localization": "^1.1.259",
     "@dydxprotocol/v4-proto": "^7.0.0-dev.0",
     "@emotion/is-prop-valid": "^1.3.0",
     "@funkit/connect": "^4.0.3",

src/abacus-ts/lib/mapLoadable.ts

@@ -20,17 +20,15 @@ export function mergeLoadableData<T, R>(
 }
 
 // converts idle to pending and if a status has valid data is counts as success
-export function mergeLoadableStatus(
-  ...status: Array<Loadable<any>>
-): Exclude<Loadable<any>['status'], 'idle'> {
+export function mergeLoadableStatus(...status: Array<Loadable<any>>): Loadable<any>['status'] {
   if (status.some((s) => s.status === 'error' && s.data == null)) {
     return 'error';
   }
-  if (status.some((s) => s.status === 'idle')) {
-    return 'pending';
-  }
   if (status.some((s) => s.status === 'pending' && s.data == null)) {
     return 'pending';
   }
+  if (status.some((s) => s.status === 'idle')) {
+    return 'idle';
+  }
   return 'success';
 }

src/components/OrderSideTag.tsx

@@ -1,3 +1,4 @@
+import { IndexerOrderSide } from '@/types/indexer/indexerApiGen';
 import { OrderSide } from '@dydxprotocol/v4-client-js';
 
 import { STRING_KEYS } from '@/constants/localization';
@@ -7,7 +8,7 @@ import { useStringGetter } from '@/hooks/useStringGetter';
 import { Tag, TagSign, TagSize, TagType } from './Tag';
 
 type ElementProps = {
-  orderSide: OrderSide;
+  orderSide: OrderSide | IndexerOrderSide;
 };
 
 type StyleProps = {

src/components/Table/MarketTableCell.tsx

@@ -1,3 +1,5 @@
+import { AssetInfo } from '@/abacus-ts/rawTypes';
+
 import type { Asset } from '@/constants/abacus';
 
 import { AssetIcon } from '@/components/AssetIcon';
@@ -22,3 +24,20 @@ export const MarketTableCell = ({ asset }: { asset?: Asset }) => {
     </TableCell>
   );
 };
+
+export const MarketTableCellNew = ({ asset }: { asset?: AssetInfo }) => {
+  return (
+    <TableCell
+      tw="font-bold text-color-text-2"
+      slotLeft={
+        <AssetIcon
+          logoUrl={asset?.logo}
+          symbol={asset?.id}
+          tw="text-[1.25rem] tablet:text-[2.25rem]"
+        />
+      }
+    >
+      {getDisplayableAssetFromBaseAsset(asset?.id ?? '')}
+    </TableCell>
+  );
+};

src/lib/orders.ts

@@ -1,3 +1,10 @@
+import { getSimpleOrderStatus } from '@/abacus-ts/calculators/orders';
+import { AssetInfo, AssetInfos, MarketsData } from '@/abacus-ts/rawTypes';
+import {
+  SubaccountOrder as NewSubaccountOrder,
+  OrderStatus as OrderStatusNew,
+} from '@/abacus-ts/summaryTypes';
+import { IndexerOrderType } from '@/types/indexer/indexerApiGen';
 import { OrderSide } from '@dydxprotocol/v4-client-js';
 import BigNumber from 'bignumber.js';
 
@@ -8,10 +15,10 @@ import {
   AbacusOrderTypes,
   KotlinIrEnumValues,
   Nullable,
+  OrderStatus,
   SubaccountFills,
   TRADE_TYPES,
   type Asset,
-  type OrderStatus,
   type PerpetualMarket,
   type SubaccountFill,
   type SubaccountFundingPayment,
@@ -22,6 +29,9 @@ import { IconName } from '@/components/Icon';
 
 import { convertAbacusOrderSide } from '@/lib/abacus/conversions';
 
+import { getAssetFromMarketId } from './assetUtils';
+import { MaybeBigNumber } from './numbers';
+
 export const getOrderStatusInfo = ({ status }: { status: string }) => {
   switch (status) {
     case AbacusOrderStatus.Open.rawValue: {
@@ -71,6 +81,55 @@ export const getOrderStatusInfo = ({ status }: { status: string }) => {
   }
 };
 
+export const getOrderStatusInfoNew = ({ status }: { status: OrderStatusNew }) => {
+  switch (status) {
+    case OrderStatusNew.Open: {
+      return {
+        statusIcon: IconName.OrderOpen,
+        statusIconColor: `var(--color-text-2)`,
+      };
+    }
+    case OrderStatusNew.PartiallyFilled:
+    case OrderStatusNew.PartiallyCanceled: {
+      return {
+        statusIcon: IconName.OrderPartiallyFilled,
+        statusIconColor: `var(--color-warning)`,
+      };
+    }
+    case OrderStatusNew.Filled: {
+      return {
+        statusIcon: IconName.OrderFilled,
+        statusIconColor: `var(--color-success)`,
+      };
+    }
+    case OrderStatusNew.Canceled: {
+      return {
+        statusIcon: IconName.OrderCanceled,
+        statusIconColor: `var(--color-error)`,
+      };
+    }
+    case OrderStatusNew.Canceling: {
+      return {
+        statusIcon: IconName.OrderPending,
+        statusIconColor: `var(--color-error)`,
+      };
+    }
+    case OrderStatusNew.Untriggered: {
+      return {
+        statusIcon: IconName.OrderUntriggered,
+        statusIconColor: `var(--color-text-2)`,
+      };
+    }
+    case OrderStatusNew.Pending:
+    default: {
+      return {
+        statusIcon: IconName.OrderPending,
+        statusIconColor: `var(--color-text-2)`,
+      };
+    }
+  }
+};
+
 export const isOrderStatusOpen = (status: OrderStatus) =>
   [
     AbacusOrderStatus.Open,
@@ -82,6 +141,10 @@ export const isOrderStatusOpen = (status: OrderStatus) =>
 export const isOrderStatusClearable = (status: OrderStatus) =>
   status === AbacusOrderStatus.Filled || isOrderStatusCanceled(status);
 
+export const isNewOrderStatusClearable = (status: OrderStatusNew) =>
+  getSimpleOrderStatus(status) === OrderStatusNew.Canceled ||
+  getSimpleOrderStatus(status) === OrderStatusNew.Filled;
+
 export const isOrderStatusCanceled = (status: OrderStatus) =>
   [AbacusOrderStatus.Canceled, AbacusOrderStatus.PartiallyCanceled].some(
     (orderStatus) => status === orderStatus
@@ -96,6 +159,15 @@ export const isMarketOrderType = (type?: AbacusOrderTypes) =>
     AbacusOrderType.TrailingStop,
   ].some(({ ordinal }) => ordinal === type.ordinal);
 
+export const isMarketOrderTypeNew = (type?: IndexerOrderType) =>
+  type &&
+  [
+    IndexerOrderType.MARKET,
+    IndexerOrderType.STOPMARKET,
+    IndexerOrderType.TAKEPROFITMARKET,
+    IndexerOrderType.TRAILINGSTOP,
+  ].some((t) => t === type);
+
 export const isLimitOrderType = (type?: AbacusOrderTypes) =>
   type &&
   [AbacusOrderType.Limit, AbacusOrderType.StopLimit, AbacusOrderType.TakeProfitLimit].some(
@@ -145,6 +217,29 @@ export const getHydratedTradingData = <
   ...('side' in data && { orderSide: convertAbacusOrderSide(data.side) }),
 });
 
+type NewAddedProps = {
+  asset: AssetInfo | undefined;
+  stepSizeDecimals: Nullable<number>;
+  tickSizeDecimals: Nullable<number>;
+};
+
+export const getHydratedOrder = ({
+  data,
+  assets,
+  perpetualMarkets,
+}: {
+  data: NewSubaccountOrder;
+  assets: AssetInfos;
+  perpetualMarkets: MarketsData;
+}): NewSubaccountOrder & NewAddedProps => {
+  return {
+    ...data,
+    asset: assets[getAssetFromMarketId(data.marketId)],
+    stepSizeDecimals: MaybeBigNumber(perpetualMarkets[data.marketId]?.stepSize)?.decimalPlaces(),
+    tickSizeDecimals: MaybeBigNumber(perpetualMarkets[data.marketId]?.tickSize)?.decimalPlaces(),
+  };
+};
+
 export const getTradeType = (orderType: string) =>
   TRADE_TYPES[orderType as KotlinIrEnumValues<typeof AbacusOrderType>];
 

src/pages/portfolio/Orders.tsx

@@ -22,6 +22,7 @@ export const Orders = () => {
       {isNotTablet && <ContentSectionHeader title={stringGetter({ key: STRING_KEYS.ORDERS })} />}
 
       <OrdersTable
+        tableType="OPEN"
         columnKeys={
           isTablet
             ? [OrdersTableColumnKey.StatusFill, OrdersTableColumnKey.PriceType]