feat(positiontable): add column for margin (#362)

* Add margin column

* Add PositionsMarginCell

* use cross/isolated string keys

* remove USD_DECIMALS since it is handled by Output

.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-    "explorer.sortOrder": "mixed"
-}
+    "explorer.sortOrder": "mixed",
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+}

package.json

@@ -42,7 +42,7 @@
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@dydxprotocol/v4-abacus": "^1.4.13",
     "@dydxprotocol/v4-client-js": "^1.0.20",
-    "@dydxprotocol/v4-localization": "^1.1.42",
+    "@dydxprotocol/v4-localization": "^1.1.45",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-accordion": "^1.1.2",

src/lib/testFlags.ts

@@ -43,6 +43,10 @@ class TestFlags {
   get configureSlTpFromPositionsTable() {
     return !!this.queryParams.sltp;
   }
+
+  get isolatedMargin() {
+    return !!this.queryParams.isolatedmargin;
+  }
 }
 
 export const testFlags = new TestFlags();

src/pages/portfolio/Positions.tsx

@@ -7,12 +7,15 @@ import { useBreakpoints, useStringGetter } from '@/hooks';
 
 import { AttachedExpandingSection } from '@/components/ContentSection';
 import { ContentSectionHeader } from '@/components/ContentSectionHeader';
-
 import { PositionsTable, PositionsTableColumnKey } from '@/views/tables/PositionsTable';
 
-import { calculateShouldRenderActionsInPositionsTable, calculateShouldRenderTriggersInPositionsTable} from '@/state/accountCalculators';
+import {
+  calculateShouldRenderActionsInPositionsTable,
+  calculateShouldRenderTriggersInPositionsTable,
+} from '@/state/accountCalculators';
 
 import { isTruthy } from '@/lib/isTruthy';
+import { testFlags } from '@/lib/testFlags';
 
 export const Positions = () => {
   const stringGetter = useStringGetter();
@@ -39,11 +42,12 @@ export const Positions = () => {
                 PositionsTableColumnKey.Size,
                 PositionsTableColumnKey.Leverage,
                 PositionsTableColumnKey.LiquidationAndOraclePrice,
+                testFlags.isolatedMargin && PositionsTableColumnKey.Margin,
                 PositionsTableColumnKey.UnrealizedPnl,
                 PositionsTableColumnKey.RealizedPnl,
                 PositionsTableColumnKey.AverageOpenAndClose,
                 shouldRenderTriggers && PositionsTableColumnKey.Triggers,
-                shouldRenderActions && PositionsTableColumnKey.Actions
+                shouldRenderActions && PositionsTableColumnKey.Actions,
               ].filter(isTruthy)
         }
         currentRoute={`${AppRoute.Portfolio}/${PortfolioRoute.Positions}`}

src/pages/trade/HorizontalPanel.tsx

@@ -35,6 +35,7 @@ import { getDefaultToAllMarketsInPositionsOrdersFills } from '@/state/configsSel
 
 import { isTruthy } from '@/lib/isTruthy';
 import { shortenNumberForDisplay } from '@/lib/numbers';
+import { testFlags } from '@/lib/testFlags';
 
 enum InfoSection {
   Position = 'Position',
@@ -109,6 +110,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
                     PositionsTableColumnKey.Size,
                     PositionsTableColumnKey.Leverage,
                     PositionsTableColumnKey.LiquidationAndOraclePrice,
+                    testFlags.isolatedMargin && PositionsTableColumnKey.Margin,
                     PositionsTableColumnKey.UnrealizedPnl,
                     PositionsTableColumnKey.RealizedPnl,
                     PositionsTableColumnKey.AverageOpenAndClose,

src/views/tables/PositionsTable.tsx

@@ -38,6 +38,7 @@ import { MustBigNumber } from '@/lib/numbers';
 import { isStopLossOrder, isTakeProfitOrder } from '@/lib/orders';
 
 import { PositionsActionsCell } from './PositionsTable/PositionsActionsCell';
+import { PositionsMarginCell } from './PositionsTable/PositionsMarginCell';
 import {
   type PositionTableConditionalOrder,
   PositionsTriggersCell,
@@ -53,6 +54,7 @@ export enum PositionsTableColumnKey {
   Size = 'Size',
   Leverage = 'Leverage',
   LiquidationAndOraclePrice = 'LiquidationAndOraclePrice',
+  Margin = 'Margin',
   UnrealizedPnl = 'UnrealizedPnl',
   RealizedPnl = 'RealizedPnl',
   AverageOpenAndClose = 'AverageOpenAndClose',
@@ -199,6 +201,16 @@ const getPositionsTableColumnDef = ({
           <Output type={OutputType.Multiple} value={leverage?.current} showSign={ShowSign.None} />
         ),
       },
+      [PositionsTableColumnKey.Margin]: {
+        columnKey: 'margin',
+        getCellValue: (row) => row.leverage?.current,
+        label: stringGetter({ key: STRING_KEYS.MARGIN }),
+        hideOnBreakpoint: MediaQueryKeys.isMobile,
+        isActionable: true,
+        renderCell: ({ notionalTotal, adjustedMmf }) => (
+          <PositionsMarginCell notionalTotal={notionalTotal} adjustedMmf={adjustedMmf} />
+        ),
+      },
       [PositionsTableColumnKey.LiquidationAndOraclePrice]: {
         columnKey: 'price',
         getCellValue: (row) => row.liquidationPrice?.current,

src/views/tables/PositionsTable/PositionsMarginCell.tsx

@@ -0,0 +1,61 @@
+import styled, { AnyStyledComponent } from 'styled-components';
+
+import { type SubaccountPosition } from '@/constants/abacus';
+import { ButtonShape } from '@/constants/buttons';
+import { STRING_KEYS } from '@/constants/localization';
+
+import { useStringGetter } from '@/hooks';
+
+import { IconName } from '@/components/Icon';
+import { IconButton } from '@/components/IconButton';
+import { Output, OutputType, ShowSign } from '@/components/Output';
+import { TableCell } from '@/components/Table/TableCell';
+
+import { MustBigNumber } from '@/lib/numbers';
+
+type PositionsMarginCellProps = {
+  isDisabled?: boolean;
+  notionalTotal: SubaccountPosition['notionalTotal'];
+  adjustedMmf: SubaccountPosition['adjustedMmf'];
+};
+
+export const PositionsMarginCell = ({
+  adjustedMmf,
+  isDisabled,
+  notionalTotal,
+}: PositionsMarginCellProps) => {
+  const stringGetter = useStringGetter();
+  const notionalTotalBN = MustBigNumber(notionalTotal?.current);
+  const adjustedMmfBN = MustBigNumber(adjustedMmf?.current);
+  const margin = notionalTotalBN.times(adjustedMmfBN);
+
+  const marginModeLabel = true
+    ? stringGetter({ key: STRING_KEYS.CROSS })
+    : stringGetter({ key: STRING_KEYS.ISOLATED });
+
+  return (
+    <TableCell
+      stacked
+      slotRight={
+        <Styled.EditButton
+          key="edit-margin"
+          iconName={IconName.Pencil}
+          shape={ButtonShape.Square}
+          isDisabled={isDisabled}
+        />
+      }
+    >
+      <Output type={OutputType.Fiat} value={margin} showSign={ShowSign.None} />
+      <span>{marginModeLabel}</span>
+    </TableCell>
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.EditButton = styled(IconButton)`
+  svg {
+    width: 1.5em;
+    height: 1.5em;
+  }
+`;