fix: comment margin breakdown

Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

apps/explorer/src/app/components/markets/market-details.tsx

@@ -184,9 +184,8 @@ export const MarketDetails = ({
       content: (
         <>
           <p className="text-xs mb-4">
-            {`For liquidity orders count towards a commitment they have to be
-        within either the liquidity or price monitoring bounds (whichever is
-        tighter).`}
+            {`For liquidity orders to count towards a commitment, they must be
+            within the liquidity monitoring bounds.`}
           </p>
           <p className="text-xs mb-4">
             {`The liquidity price range is a ${liquidityPriceRange} difference from the mid

apps/static/src/assets/mainnet-tranches.json

@@ -2761,7 +2761,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "86666.297",
     "total_removed": "0",
-    "locked_amount": "66660.1864521651085953168",
+    "locked_amount": "66600.6885662553549491123",
     "deposits": [
       {
         "amount": "86666.297",
@@ -2827,7 +2827,7 @@
     "tranche_end": "2023-06-01T00:00:00.000Z",
     "total_added": "2500",
     "total_removed": "0",
-    "locked_amount": "1287.68044744607225",
+    "locked_amount": "1284.23843228530725",
     "deposits": [
       {
         "amount": "2500",
@@ -3215,7 +3215,7 @@
     "tranche_end": "2023-08-01T00:00:00.000Z",
     "total_added": "37500",
     "total_removed": "3295.491386325",
-    "locked_amount": "32060.042107888275",
+    "locked_amount": "32008.126630601595",
     "deposits": [
       {
         "amount": "7500",
@@ -3359,7 +3359,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "129999.45",
     "total_removed": "0",
-    "locked_amount": "66599.36741953379042928",
+    "locked_amount": "66539.923817958609949455",
     "deposits": [
       {
         "amount": "129999.45",
@@ -3425,7 +3425,7 @@
     "tranche_end": "2023-09-03T00:00:00.000Z",
     "total_added": "62600",
     "total_removed": "0",
-    "locked_amount": "32199.23383434805018",
+    "locked_amount": "32156.25787037037408",
     "deposits": [
       {
         "amount": "10000",
@@ -3618,7 +3618,7 @@
     "tranche_end": "2023-09-17T00:00:00.000Z",
     "total_added": "5000",
     "total_removed": "0",
-    "locked_amount": "2763.604610603755",
+    "locked_amount": "2760.1720256215125",
     "deposits": [
       {
         "amount": "5000",
@@ -3829,7 +3829,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "97499.58",
     "total_removed": "0",
-    "locked_amount": "8549.9770497729426934506",
+    "locked_amount": "8491.6684140496565878092",
     "deposits": [
       {
         "amount": "97499.58",
@@ -3862,7 +3862,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "135173.4239508",
     "total_removed": "98230.390980249184455396",
-    "locked_amount": "11686.34253508108202110958958",
+    "locked_amount": "11606.644696613363239057508256",
     "deposits": [
       {
         "amount": "135173.4239508",
@@ -3908,7 +3908,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "32499.86",
     "total_removed": "0",
-    "locked_amount": "3596.8276946333941696698",
+    "locked_amount": "3572.2982585208873489478",
     "deposits": [
       {
         "amount": "32499.86",
@@ -3941,7 +3941,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "10833.29",
     "total_removed": "0",
-    "locked_amount": "1170.7325118133853096759",
+    "locked_amount": "1162.7484183867779537778",
     "deposits": [
       {
         "amount": "10833.29",
@@ -3974,7 +3974,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "22749.93",
     "total_removed": "4720.860935375",
-    "locked_amount": "4376.4596075425397060448",
+    "locked_amount": "4346.6132830988218703751",
     "deposits": [
       {
         "amount": "6500",
@@ -4126,7 +4126,7 @@
     "tranche_end": "2023-05-01T00:00:00.000Z",
     "total_added": "22500",
     "total_removed": "4832.532899775",
-    "locked_amount": "7799.561176335174675",
+    "locked_amount": "7768.411889963167125",
     "deposits": [
       {
         "amount": "7500",
@@ -4390,7 +4390,7 @@
     "tranche_end": "2023-06-02T00:00:00.000Z",
     "total_added": "1939928.38",
     "total_removed": "928642.9598472029154",
-    "locked_amount": "503547.66972674586634472",
+    "locked_amount": "502215.87592198306198629",
     "deposits": [
       {
         "amount": "1852091.69",
@@ -36770,7 +36770,7 @@
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "3732368.4671",
     "total_removed": "615950.831401702010493",
-    "locked_amount": "798278.776421275325414380233",
+    "locked_amount": "796232.273024709558568810279",
     "deposits": [
       {
         "amount": "1998.95815",
@@ -38118,8 +38118,8 @@
     "tranche_start": "2022-06-05T00:00:00.000Z",
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "15870102.715470999700000001",
-    "total_removed": "579941.15446796566514452",
-    "locked_amount": "8130332.8724344144040666925862118737483104",
+    "total_removed": "581409.88924190582035452",
+    "locked_amount": "8123076.1027882686093883722947201633400919",
     "deposits": [
       {
         "amount": "16249.93",
@@ -38633,6 +38633,11 @@
         "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
         "tx": "0x2d99d4051c6ac81037db1eebf0f86b335ed9d1957f281134d07da192644a6a8c"
       },
+      {
+        "amount": "1468.73477394015521",
+        "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
+        "tx": "0x525f9427c131bc2fdea7f556d16b7781faaa41e09c7735d1c02d1f7585cc49ab"
+      },
       {
         "amount": "535.4042378778335",
         "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -41844,6 +41849,12 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "1468.73477394015521",
+            "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
+            "tranche_id": 2,
+            "tx": "0x525f9427c131bc2fdea7f556d16b7781faaa41e09c7735d1c02d1f7585cc49ab"
+          },
           {
             "amount": "1640.93679110232897",
             "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
@@ -42086,8 +42097,8 @@
           }
         ],
         "total_tokens": "150551.801",
-        "withdrawn_tokens": "71968.00074341356817",
-        "remaining_tokens": "78583.80025658643183"
+        "withdrawn_tokens": "73436.73551735372338",
+        "remaining_tokens": "77115.06548264627662"
       },
       {
         "address": "0x4d982Ab0823fD2f48e934a7be2bb0a5374a26148",
@@ -43861,7 +43872,7 @@
     "tranche_end": "2023-05-05T00:00:00.000Z",
     "total_added": "14597706.0446472999",
     "total_removed": "5576016.212508497282613906",
-    "locked_amount": "1784426.168875606617258788877936648",
+    "locked_amount": "1777726.765473197066260457387430519",
     "deposits": [
       {
         "amount": "129284.449",
@@ -50908,7 +50919,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "5778205.3912159303",
     "total_removed": "3055768.040200763217391295",
-    "locked_amount": "388134.167902190321713268137737088",
+    "locked_amount": "385487.193100244108102591696423251",
     "deposits": [
       {
         "amount": "552496.6455",
@@ -52947,7 +52958,7 @@
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "472355.6199999996",
     "total_removed": "34416.2282090650685",
-    "locked_amount": "126491.83527997644210121089142566",
+    "locked_amount": "126167.555118478468636691490005064",
     "deposits": [
       {
         "amount": "3000",

libs/assets/src/lib/asset-details-dialog.tsx

@@ -98,7 +98,7 @@ export const AssetDetailsDialog = ({
       }}
     >
       {content}
-      <p className="text-sm mb-4">
+      <p className="text-sm my-4">
         {t(
           'There is 1 unit of the settlement asset (%s) to every 1 quote unit.',
           [assetSymbol]

libs/deal-ticket/src/components/deal-ticket/deal-ticket-button.tsx

@@ -12,7 +12,7 @@ export const DealTicketButton = ({ disabled, variant }: Props) => {
   const { pubKey, isReadOnly } = useVegaWallet();
   const isDisabled = !pubKey || isReadOnly || disabled;
   return (
-    <div className="mb-4">
+    <div className="mb-2">
       <Button
         variant={variant}
         fill

libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx

@@ -31,7 +31,7 @@ export const DealTicketFeeDetails = ({
     <div>
       {details.map(({ label, value, labelDescription, symbol }) => (
         <div
-          key={label}
+          key={typeof label === 'string' ? label : 'value-dropdown'}
           className="text-xs mt-2 flex justify-between items-center gap-4 flex-wrap"
         >
           <div>

libs/deal-ticket/src/components/deal-ticket/deal-ticket-limit-amount.tsx

@@ -38,7 +38,7 @@ export const DealTicketLimitAmount = ({
   };
 
   return (
-    <div className="mb-6">
+    <div className="mb-2">
       <div className="flex items-center gap-4">
         <div className="flex-1">
           <FormGroup

libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx

@@ -29,9 +29,9 @@ export const DealTicketMarketAmount = ({
     : undefined;
 
   return (
-    <div className="mb-6">
+    <div className="mb-2">
       <div className="flex items-end gap-4 mb-2">
-        <div className="flex-1 text-sm">Size</div>
+        <div className="flex-1 text-sm">{t('Size')}</div>
         <div />
         <div className="flex-2 text-sm text-right">
           {isMarketInAuction(marketData.marketTradingMode) && (

libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx

@@ -307,7 +307,7 @@ const SummaryMessage = memo(
     );
     if (isReadOnly) {
       return (
-        <div className="mb-4">
+        <div className="mb-2">
           <InputError testId="dealticket-error-message-summary">
             {
               'You need to connect your own wallet to start trading on this market'
@@ -318,7 +318,7 @@ const SummaryMessage = memo(
     }
     if (!pubKey) {
       return (
-        <div className="mb-4">
+        <div className="mb-2">
           <Notification
             testId={'deal-ticket-connect-wallet'}
             intent={Intent.Warning}
@@ -343,7 +343,7 @@ const SummaryMessage = memo(
     }
     if (errorMessage === SummaryValidationType.NoCollateral) {
       return (
-        <div className="mb-4">
+        <div className="mb-2">
           <ZeroBalanceError
             asset={market.tradableInstrument.instrument.product.settlementAsset}
             onClickCollateral={onClickCollateral}
@@ -356,7 +356,7 @@ const SummaryMessage = memo(
     // submission render that first
     if (errorMessage) {
       return (
-        <div className="mb-4">
+        <div className="mb-2">
           <InputError testId="dealticket-error-message-summary">
             {errorMessage}
           </InputError>
@@ -368,7 +368,7 @@ const SummaryMessage = memo(
     // balance render the margin warning, but still allow submission
     if (balanceError) {
       return (
-        <div className="mb-4">
+        <div className="mb-2">
           <MarginWarning balance={balance} margin={margin} asset={asset} />;
         </div>
       );
@@ -383,7 +383,7 @@ const SummaryMessage = memo(
       ].includes(marketData.marketTradingMode)
     ) {
       return (
-        <div className="mb-4">
+        <div className="mb-2">
           <Notification
             intent={Intent.Warning}
             testId={'dealticket-warning-auction'}

libs/deal-ticket/src/components/margin-levels/margin-levels.tsx

@@ -0,0 +1,70 @@
+import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers';
+import { Tooltip } from '@vegaprotocol/ui-toolkit';
+
+export interface MarginLevels {
+  initialLevel?: string;
+  searchLevel?: string;
+  maintenanceLevel?: string;
+  collateralReleaseLevel?: string;
+}
+
+export const MarginBreakdown = ({
+  marginLevels,
+  assetDecimalPlaces,
+  assetSymbol,
+}: {
+  marginLevels?: MarginLevels;
+  assetDecimalPlaces: number;
+  assetSymbol: string;
+}) => {
+  if (!marginLevels) return null;
+  const formatNumberWithAssetDp = (value: string | number | null | undefined) =>
+    value && !isNaN(Number(value))
+      ? `${addDecimalsFormatNumber(value, assetDecimalPlaces)} ${assetSymbol}`
+      : '-';
+
+  return (
+    <dl className="grid grid-cols-8">
+      <Tooltip
+        description={t(
+          'This is the minimum margin required for a party to place a new order on the network'
+        )}
+      >
+        {<dt className="col-span-3">{t('Initial level')}</dt>}
+      </Tooltip>
+      <dd className="text-right col-span-5">
+        {formatNumberWithAssetDp(marginLevels.initialLevel)}
+      </dd>
+      <Tooltip
+        description={t(
+          'If the margin is between maintenance and search, the network will initiate a collateral search'
+        )}
+      >
+        {<dt className="col-span-3">{t('Search level')}</dt>}
+      </Tooltip>
+      <dd className="text-right col-span-5">
+        {formatNumberWithAssetDp(marginLevels.searchLevel)}
+      </dd>
+      <Tooltip
+        description={t(
+          'Minimal margin for the position to be maintained in the network'
+        )}
+      >
+        {<dt className="col-span-3">{t('Maintenance level')}</dt>}
+      </Tooltip>
+      <dd className="text-right col-span-5">
+        {formatNumberWithAssetDp(marginLevels.maintenanceLevel)}
+      </dd>
+      <Tooltip
+        description={t(
+          'If the margin of the party is greater than this level, then collateral will be released from the margin account into the general account of the party for the given asset.'
+        )}
+      >
+        {<dt className="col-span-3">{t('Collateral release level')}</dt>}
+      </Tooltip>
+      <dd className="text-right col-span-5">
+        {formatNumberWithAssetDp(marginLevels.collateralReleaseLevel)}
+      </dd>
+    </dl>
+  );
+};

libs/deal-ticket/src/hooks/EstimateOrder.graphql

@@ -24,7 +24,35 @@ query EstimateOrder(
       liquidityFee
     }
     marginLevels {
+      market {
+        id
+        state
+        tradableInstrument {
+          instrument {
+            code
+            name
+          }
+          marginCalculator {
+            scalingFactors {
+              searchLevel
+              initialMargin
+              collateralRelease
+            }
+          }
+        }
+      }
+      asset {
+        id
+        name
+      }
+      party {
+        id
+      }
       initialLevel
+      searchLevel
+      maintenanceLevel
+      collateralReleaseLevel
+      timestamp
     }
     totalFeeAmount
   }

libs/deal-ticket/src/hooks/__generated__/EstimateOrder.ts

@@ -15,7 +15,7 @@ export type EstimateOrderQueryVariables = Types.Exact<{
 }>;
 
 
-export type EstimateOrderQuery = { __typename?: 'Query', estimateOrder: { __typename?: 'OrderEstimate', totalFeeAmount: string, fee: { __typename?: 'TradeFee', makerFee: string, infrastructureFee: string, liquidityFee: string }, marginLevels: { __typename?: 'MarginLevels', initialLevel: string } } };
+export type EstimateOrderQuery = { __typename?: 'Query', estimateOrder: { __typename?: 'OrderEstimate', totalFeeAmount: string, fee: { __typename?: 'TradeFee', makerFee: string, infrastructureFee: string, liquidityFee: string }, marginLevels: { __typename?: 'MarginLevels', initialLevel: string, searchLevel: string, maintenanceLevel: string, collateralReleaseLevel: string, timestamp: any, market: { __typename?: 'Market', id: string, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', code: string, name: string }, marginCalculator?: { __typename?: 'MarginCalculator', scalingFactors: { __typename?: 'ScalingFactors', searchLevel: number, initialMargin: number, collateralRelease: number } } | null } }, asset: { __typename?: 'Asset', id: string, name: string }, party: { __typename?: 'Party', id: string } } } };
 
 
 export const EstimateOrderDocument = gql`
@@ -36,7 +36,35 @@ export const EstimateOrderDocument = gql`
       liquidityFee
     }
     marginLevels {
+      market {
+        id
+        state
+        tradableInstrument {
+          instrument {
+            code
+            name
+          }
+          marginCalculator {
+            scalingFactors {
+              searchLevel
+              initialMargin
+              collateralRelease
+            }
+          }
+        }
+      }
+      asset {
+        id
+        name
+      }
+      party {
+        id
+      }
       initialLevel
+      searchLevel
+      maintenanceLevel
+      collateralReleaseLevel
+      timestamp
     }
     totalFeeAmount
   }

libs/deal-ticket/src/hooks/use-fee-deal-ticket-details.tsx

@@ -21,6 +21,8 @@ import { useOrderCloseOut } from './use-order-closeout';
 import { useOrderMargin } from './use-order-margin';
 import type { OrderMargin } from './use-order-margin';
 import { getDerivedPrice } from '../utils/get-price';
+import { Icon } from '@vegaprotocol/ui-toolkit';
+import { MarginBreakdown } from '../components/margin-levels/margin-levels';
 
 export const useFeeDealTicketDetails = (
   order: OrderSubmissionBody['orderSubmission'],
@@ -148,6 +150,7 @@ export const getFeeDetailsValues = ({
               `An estimate of the most you would be expected to pay in fees, in the market's settlement asset ${assetSymbol}.`
             )}
           </span>
+
           <FeesBreakdown
             fees={estMargin?.fees}
             feeFactors={market.fees.factors}
@@ -159,16 +162,31 @@ export const getFeeDetailsValues = ({
       symbol: assetSymbol,
     },
     {
-      label: t('Margin'),
+      label: (
+        <div className="flex items-center gap-2">
+          <span>{t('Margin')} </span>
+          <Icon name="chevron-down" size={3} />
+        </div>
+      ),
       value:
         estMargin?.margin && `~${formatValueWithAssetDp(estMargin?.margin)}`,
       symbol: assetSymbol,
-      labelDescription: EST_MARGIN_TOOLTIP_TEXT(assetSymbol),
+      labelDescription: (
+        <>
+          <span>{EST_MARGIN_TOOLTIP_TEXT(assetSymbol)}</span>
+          {/* <span></span>
+          <MarginBreakdown
+            marginLevels={estMargin?.marginLevels}
+            assetDecimalPlaces={assetDecimals}
+            assetSymbol={assetSymbol}
+          /> */}
+        </>
+      ),
     },
     {
       label: t('Liquidation'),
       value: estCloseOut && `~${formatValueWithMarketDp(estCloseOut)}`,
-      symbol: market.tradableInstrument.instrument.product.quoteName,
+      symbol: quoteName,
       labelDescription: EST_CLOSEOUT_TOOLTIP_TEXT(quoteName),
     },
   ];

libs/deal-ticket/src/hooks/use-order-margin.ts

@@ -6,6 +6,7 @@ import { useMarketPositions } from './use-market-positions';
 import { useEstimateOrderQuery } from './__generated__/EstimateOrder';
 import type { Market, MarketData } from '@vegaprotocol/market-list';
 import { getDerivedPrice } from '../utils/get-price';
+import type { MarginLevels } from './use-fee-deal-ticket-details';
 
 export interface Props {
   order: OrderSubmissionBody['orderSubmission'];
@@ -23,6 +24,7 @@ export interface OrderMargin {
     liquidityFee: string;
     infrastructureFee: string;
   };
+  marginLevels: MarginLevels;
 }
 
 export const useOrderMargin = ({
@@ -50,7 +52,12 @@ export const useOrderMargin = ({
   });
   const { makerFee, liquidityFee, infrastructureFee } = data?.estimateOrder
     .fee || { makerFee: '', liquidityFee: '', infrastructureFee: '' };
-  const { initialLevel } = data?.estimateOrder.marginLevels ?? {};
+  const {
+    initialLevel,
+    searchLevel,
+    maintenanceLevel,
+    collateralReleaseLevel,
+  } = data?.estimateOrder.marginLevels ?? {};
   return useMemo(() => {
     if (initialLevel) {
       const margin = BigNumber.maximum(
@@ -63,6 +70,12 @@ export const useOrderMargin = ({
         .toString();
       return {
         margin,
+        marginLevels: {
+          searchLevel,
+          maintenanceLevel,
+          collateralReleaseLevel,
+          initialLevel,
+        },
         totalFees: fees,
         fees: {
           makerFee,
@@ -72,5 +85,14 @@ export const useOrderMargin = ({
       };
     }
     return null;
-  }, [initialLevel, makerFee, liquidityFee, infrastructureFee, balance]);
+  }, [
+    initialLevel,
+    balance,
+    makerFee,
+    liquidityFee,
+    infrastructureFee,
+    searchLevel,
+    maintenanceLevel,
+    collateralReleaseLevel,
+  ]);
 };

libs/market-info/src/components/market-info/info-market.tsx

@@ -145,7 +145,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
             }}
             decimalPlaces={market.decimalPlaces}
           />
-          <p className="text-xs">
+          <p className="text-xs mt-4">
             {t(
               'There is 1 unit of the settlement asset (%s) to every 1 quote unit (%s).',
               [assetSymbol, quoteUnit]
@@ -249,7 +249,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
             dtClassName="text-black dark:text-white text-ui !px-0 !font-normal"
             ddClassName="text-black dark:text-white text-ui !px-0 !font-normal max-w-full"
           />
-          <p className="text-xs">
+          <p className="text-xs mt-4">
             {t(
               'There is 1 unit of the settlement asset (%s) to every 1 quote unit (%s).',
               [assetSymbol, quoteUnit]
@@ -309,27 +309,40 @@ export const Info = ({ market, onSelect }: InfoProps) => {
       ),
     },
     ...(market.priceMonitoringSettings?.parameters?.triggers || []).map(
-      (trigger, i) => ({
-        title: t(`Price monitoring trigger ${i + 1}`),
-        content: <MarketInfoTable data={trigger} />,
-      })
+      (trigger, i) => {
+        const bounds = market.data?.priceMonitoringBounds?.[i];
+        return {
+          title: t(`Price monitoring bounds ${i + 1}`),
+          content: (
+            <div className="text-xs">
+              <div className="grid grid-cols-2 text-xs mb-4">
+                <p className="col-span-1">
+                  {t('%s% probability of trading', [
+                    formatNumber(trigger.probability * 100),
+                  ])}
+                </p>
+                <p className="col-span-1 text-right">
+                  {t('Within %s seconds', [formatNumber(trigger.horizonSecs)])}
+                </p>
+              </div>
+              <div className="pl-2 pb-0 text-xs border-l-2">
+                {bounds && (
+                  <MarketInfoTable
+                    data={{
+                      highestPrice: bounds.maxValidPrice,
+                      lowestPrice: bounds.minValidPrice,
+                      referencePrice: bounds.referencePrice,
+                    }}
+                    decimalPlaces={assetDecimals}
+                    assetSymbol={quoteUnit}
+                  />
+                )}
+              </div>
+            </div>
+          ),
+        };
+      }
     ),
-    ...(market.data?.priceMonitoringBounds || []).map((trigger, i) => ({
-      title: t(`Price monitoring bound ${i + 1}`),
-      content: (
-        <>
-          <MarketInfoTable
-            data={trigger}
-            decimalPlaces={market.decimalPlaces}
-            omits={['referencePrice', '__typename']}
-          />
-          <MarketInfoTable
-            data={{ referencePrice: trigger.referencePrice }}
-            decimalPlaces={assetDecimals}
-          />
-        </>
-      ),
-    })),
     {
       title: t('Liquidity monitoring parameters'),
       content: (
@@ -369,37 +382,38 @@ export const Info = ({ market, onSelect }: InfoProps) => {
       content: (
         <>
           <p className="text-xs mb-4">
-            {`For liquidity orders count towards a commitment they have to be
-            within either the liquidity or price monitoring bounds (whichever is
-            tighter).`}
+            {`For liquidity orders to count towards a commitment, they must be
+            within the liquidity monitoring bounds.`}
           </p>
           <p className="text-xs mb-4">
             {`The liquidity price range is a ${liquidityPriceRange} difference from the mid
             price.`}
           </p>
-          <MarketInfoTable
-            data={{
-              liquidityPriceRange: `${liquidityPriceRange} of mid price`,
-              lowestPrice:
-                market.data?.midPrice &&
-                `${addDecimalsFormatNumber(
-                  new BigNumber(1)
-                    .minus(market.lpPriceRange)
-                    .times(market.data.midPrice)
-                    .toString(),
-                  market.decimalPlaces
-                )} ${quoteUnit}`,
-              highestPrice:
-                market.data?.midPrice &&
-                `${addDecimalsFormatNumber(
-                  new BigNumber(1)
-                    .plus(market.lpPriceRange)
-                    .times(market.data.midPrice)
-                    .toString(),
-                  market.decimalPlaces
-                )} ${quoteUnit}`,
-            }}
-          ></MarketInfoTable>
+          <div className="pl-2 pb-0 text-xs border-l-2">
+            <MarketInfoTable
+              data={{
+                liquidityPriceRange: `${liquidityPriceRange} of mid price`,
+                lowestPrice:
+                  market.data?.midPrice &&
+                  `${addDecimalsFormatNumber(
+                    new BigNumber(1)
+                      .minus(market.lpPriceRange)
+                      .times(market.data.midPrice)
+                      .toString(),
+                    market.decimalPlaces
+                  )} ${quoteUnit}`,
+                highestPrice:
+                  market.data?.midPrice &&
+                  `${addDecimalsFormatNumber(
+                    new BigNumber(1)
+                      .plus(market.lpPriceRange)
+                      .times(market.data.midPrice)
+                      .toString(),
+                    market.decimalPlaces
+                  )} ${quoteUnit}`,
+              }}
+            ></MarketInfoTable>
+          </div>
         </>
       ),
     },

libs/react-helpers/src/lib/format/number.spec.tsx

@@ -6,6 +6,7 @@ import {
   formatNumber,
   formatNumberPercentage,
   isNumeric,
+  toDecimal,
   toNumberParts,
 } from './number';
 
@@ -197,3 +198,20 @@ describe('compactNumber', () => {
     }
   );
 });
+
+describe('toDecimal', () => {
+  it.each([
+    { v: 0, o: '1' },
+    { v: 1, o: '0.1' },
+    { v: 2, o: '0.01' },
+    { v: 3, o: '0.001' },
+    { v: 4, o: '0.0001' },
+    { v: 5, o: '0.00001' },
+    { v: 6, o: '0.000001' },
+    { v: 7, o: '0.0000001' },
+    { v: 8, o: '0.00000001' },
+    { v: 9, o: '0.000000001' },
+  ])('formats with toNumber given number correctly', ({ v, o }) => {
+    expect(toDecimal(v)).toStrictEqual(o);
+  });
+});

libs/ui-toolkit/src/components/form-group/form-group.tsx

@@ -20,7 +20,7 @@ export const FormGroup = ({
   labelAlign = 'left',
   hideLabel = false,
 }: FormGroupProps) => {
-  const wrapperClasses = classNames('relative mb-6', className);
+  const wrapperClasses = classNames('relative mb-2', className);
   const labelClasses = classNames('block mb-2 text-sm', {
     'text-right': labelAlign === 'right',
     'sr-only': hideLabel,

libs/ui-toolkit/src/components/key-value-table/key-value-table.tsx

@@ -24,11 +24,7 @@ export const KeyValueTable = ({
   return (
     <React.Fragment>
       {title && <TitleTag className={`text-xl my-2`}>{title}</TitleTag>}
-      <div
-        data-testid="key-value-table"
-        {...rest}
-        className={classNames('mb-4', className)}
-      >
+      <div data-testid="key-value-table" {...rest} className={className}>
         <div>
           {children &&
             React.Children.map(