feat(trading): add margin levels information to positions

libs/accounts/src/lib/margin-health-chart.tsx

@@ -51,6 +51,7 @@ export const MarginHealthChartTooltip = ({
   collateralReleaseLevel,
   decimals,
   marginAccountBalance,
+  generalAccountBalance,
 }: {
   maintenanceLevel: string;
   searchLevel: string;
@@ -58,6 +59,7 @@ export const MarginHealthChartTooltip = ({
   collateralReleaseLevel: string;
   decimals: number;
   marginAccountBalance?: string;
+  generalAccountBalance?: string;
 }) => {
   const t = useT();
   const tooltipContent = [
@@ -95,7 +97,7 @@ export const MarginHealthChartTooltip = ({
     const balance = (
       <MarginHealthChartTooltipRow
         key={'balance'}
-        label={t('balance')}
+        label={t('margin account balance')}
         value={marginAccountBalance}
         decimals={decimals}
       />
@@ -110,6 +112,18 @@ export const MarginHealthChartTooltip = ({
       tooltipContent.push(balance);
     }
   }
+
+  if (generalAccountBalance) {
+    tooltipContent.push(
+      <MarginHealthChartTooltipRow
+        key={'general'}
+        label={t('general account balance')}
+        value={generalAccountBalance}
+        decimals={decimals}
+      />
+    );
+  }
+
   return (
     <div className="overflow-hidden" data-testid="margin-health-tooltip">
       {tooltipContent}
@@ -120,9 +134,11 @@ export const MarginHealthChartTooltip = ({
 export const MarginHealthChart = ({
   marketId,
   assetId,
+  noTooltip,
 }: {
   marketId: string;
   assetId: string;
+  noTooltip?: boolean;
 }) => {
   const { data: assetsMap } = useAssetsMapProvider();
   const { pubKey: partyId } = useVegaWallet();
@@ -146,11 +162,7 @@ export const MarginHealthChart = ({
   const maintenanceLevel = Number(data.maintenanceLevel);
   const searchLevel = Number(data.searchLevel);
   const marginAccountBalance = Number(rawMarginAccountBalance);
-  const generalAccountBalance = Number(rawGeneralAccountBalance);
-  const max = Math.max(
-    marginAccountBalance + generalAccountBalance,
-    collateralReleaseLevel
-  );
+  const max = collateralReleaseLevel;
 
   const red = maintenanceLevel / max;
   const orange = (searchLevel - maintenanceLevel) / max;
@@ -165,10 +177,72 @@ export const MarginHealthChart = ({
       initialLevel={data.initialLevel}
       collateralReleaseLevel={data.collateralReleaseLevel}
       marginAccountBalance={rawMarginAccountBalance}
+      generalAccountBalance={rawGeneralAccountBalance}
       decimals={decimals}
     />
   );
 
+  const chart = (
+    <div
+      data-testid="margin-health-chart-track"
+      className="relative bg-vega-green-650"
+      style={{
+        height: '6px',
+        marginBottom: '1px',
+        display: 'flex',
+      }}
+    >
+      <div
+        data-testid="margin-health-chart-red"
+        className="bg-vega-red-550"
+        style={{
+          height: '100%',
+          width: `${red * 100}%`,
+        }}
+      ></div>
+      <div
+        data-testid="margin-health-chart-orange"
+        className="bg-vega-orange"
+        style={{
+          height: '100%',
+          width: `${orange * 100}%`,
+        }}
+      ></div>
+      <div
+        data-testid="margin-health-chart-yellow"
+        className="bg-vega-yellow"
+        style={{
+          height: '100%',
+          width: `${yellow * 100}%`,
+        }}
+      ></div>
+      <div
+        data-testid="margin-health-chart-green"
+        className="bg-vega-green-600"
+        style={{
+          height: '100%',
+          width: `${green * 100}%`,
+        }}
+      ></div>
+      {balanceMarker > 0 && balanceMarker < 100 && (
+        <div
+          data-testid="margin-health-chart-balance"
+          className="absolute bg-vega-blue"
+          style={{
+            height: '8px',
+            width: '8px',
+            top: '-1px',
+            transform: 'translate(-4px, 0px)',
+            borderRadius: '50%',
+            border: '1px solid white',
+            backgroundColor: 'blue',
+            left: `${balanceMarker * 100}%`,
+          }}
+        ></div>
+      )}
+    </div>
+  );
+
   return (
     <div data-testid="margin-health-chart">
       <Trans
@@ -188,66 +262,14 @@ export const MarginHealthChart = ({
         }}
         ns={ns}
       />
-      <Tooltip description={tooltip}>
-        <div
-          data-testid="margin-health-chart-track"
-          className="relative bg-vega-green-650"
-          style={{
-            height: '6px',
-            marginBottom: '1px',
-            display: 'flex',
-          }}
-        >
-          <div
-            data-testid="margin-health-chart-red"
-            className="bg-vega-red-550"
-            style={{
-              height: '100%',
-              width: `${red * 100}%`,
-            }}
-          ></div>
-          <div
-            data-testid="margin-health-chart-orange"
-            className="bg-vega-orange"
-            style={{
-              height: '100%',
-              width: `${orange * 100}%`,
-            }}
-          ></div>
-          <div
-            data-testid="margin-health-chart-yellow"
-            className="bg-vega-yellow"
-            style={{
-              height: '100%',
-              width: `${yellow * 100}%`,
-            }}
-          ></div>
-          <div
-            data-testid="margin-health-chart-green"
-            className="bg-vega-green-600"
-            style={{
-              height: '100%',
-              width: `${green * 100}%`,
-            }}
-          ></div>
-          {balanceMarker > 0 && balanceMarker < 100 && (
-            <div
-              data-testid="margin-health-chart-balance"
-              className="absolute bg-vega-blue"
-              style={{
-                height: '8px',
-                width: '8px',
-                top: '-1px',
-                transform: 'translate(-4px, 0px)',
-                borderRadius: '50%',
-                border: '1px solid white',
-                backgroundColor: 'blue',
-                left: `${balanceMarker * 100}%`,
-              }}
-            ></div>
-          )}
-        </div>
-      </Tooltip>
+      {noTooltip ? (
+        <>
+          {chart}
+          {tooltip}
+        </>
+      ) : (
+        <Tooltip description={tooltip}>{chart}</Tooltip>
+      )}
     </div>
   );
 };

libs/i18n/src/locales/en/accounts.json

@@ -10,7 +10,6 @@
   "Asset is the collateral that is deposited into the Vega protocol.": "Asset is the collateral that is deposited into the Vega protocol.",
   "Available": "Available",
   "Balance": "Balance",
-  "balance": "balance",
   "Cannot transfer to the same account type for the connected key": "Cannot transfer to the same account type for the connected key",
   "Collateral not used": "Collateral not used",
   "Confirm transfer": "Confirm transfer",
@@ -21,9 +20,11 @@
   "Deposited on the network, but not allocated to a market. Free to use for placing orders or providing liquidity.": "Deposited on the network, but not allocated to a market. Free to use for placing orders or providing liquidity.",
   "Enter manually": "Enter manually",
   "From account": "From account",
+  "general account balance": "general account balance",
   "Include transfer fee": "Include transfer fee",
   "initial level": "initial level",
   "maintenance level": "maintenance level",
+  "margin account balance": "margin account balance",
   "Margin health": "Margin health",
   "Market": "Market",
   "No accounts": "No accounts",

libs/positions/src/lib/liquidation-price.tsx

@@ -8,11 +8,13 @@ export const LiquidationPrice = ({
   openVolume,
   collateralAvailable,
   decimalPlaces,
+  className,
 }: {
   marketId: string;
   openVolume: string;
   collateralAvailable: string;
   decimalPlaces: number;
+  className: string;
 }) => {
   const t = useT();
   const { data: currentData, previousData } = useEstimatePositionQuery({
@@ -40,21 +42,17 @@ export const LiquidationPrice = ({
   return (
     <Tooltip
       description={
-        <table>
-          <tbody>
-            <tr>
-              <th>{t('Worst case')}</th>
-              <td className="pl-2 text-right font-mono">{worstCase}</td>
-            </tr>
-            <tr>
-              <th>{t('Best case')}</th>
-              <td className="pl-2 text-right font-mono">{bestCase}</td>
-            </tr>
-          </tbody>
-        </table>
+        <dl className="grid grid-cols-2">
+          <dt>{t('Worst case')}</dt>
+          <dd className="pl-2 text-right font-mono">{worstCase}</dd>
+          <dt className="font-normal">{t('Best case')}</dt>
+          <dd className="pl-2 text-right font-mono">{bestCase}</dd>
+        </dl>
       }
     >
-      <span data-testid="liquidation-price">{worstCase}</span>
+      <span data-testid="liquidation-price" className={className}>
+        {worstCase}
+      </span>
     </Tooltip>
   );
 };

libs/positions/src/lib/positions-table.tsx

@@ -20,6 +20,7 @@ import {
   ExternalLink,
   VegaIcon,
   VegaIconNames,
+  Tooltip,
 } from '@vegaprotocol/ui-toolkit';
 import {
   volumePrefix,
@@ -38,6 +39,7 @@ import { DocsLinks } from '@vegaprotocol/environment';
 import { PositionActionsDropdown } from './position-actions-dropdown';
 import { LiquidationPrice } from './liquidation-price';
 import { useT } from '../use-t';
+import { MarginHealthChart } from '@vegaprotocol/accounts';
 
 interface Props extends TypedDataAgGrid<Position> {
   onClose?: (data: Position) => void;
@@ -322,7 +324,19 @@ export const PositionsTable = ({
               const lev = data?.currentLeverage ? data.currentLeverage : 1;
               const leverage = formatNumber(Math.max(1, lev), 1);
               return (
-                <StackedCell primary={margin} secondary={leverage + 'x'} />
+                <Tooltip
+                  description={
+                    <MarginHealthChart
+                      marketId={data.marketId}
+                      assetId={data.assetId}
+                      noTooltip
+                    />
+                  }
+                >
+                  <div>
+                    <StackedCell primary={margin} secondary={leverage + 'x'} />
+                  </div>
+                </Tooltip>
               );
             },
           },
@@ -340,12 +354,15 @@ export const PositionsTable = ({
                 return '-';
               }
               return (
-                <LiquidationPrice
-                  marketId={data.marketId}
-                  openVolume={data.openVolume}
-                  collateralAvailable={data.totalBalance}
-                  decimalPlaces={data.marketDecimalPlaces}
-                />
+                <div className="flex h-[45px] items-center">
+                  <LiquidationPrice
+                    className="block text-right grow"
+                    marketId={data.marketId}
+                    openVolume={data.openVolume}
+                    collateralAvailable={data.totalBalance}
+                    decimalPlaces={data.marketDecimalPlaces}
+                  />
+                </div>
               );
             },
           },