Fix/602 fix deal ticket component to be reused by both simple trading app and console v2 (#606)

* fix: [#602] fix container - use grid tabs inside trading leaving deal ticket container reusable

* fix: [#602] trade grid fixes tab bounds

* fix: [#602] different queries for deal ticket and info market

* fix: #602 generate deal ticket query fix for tests

* chore: [#602] add generate-market-info-query.ts

* fix: #602 add template side of 4 cols so that all components actually resize - fixes styling

* fix: #602 add aliasQuery

apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-container.tsx

@@ -7,7 +7,6 @@ import { DealTicketSteps } from './deal-ticket-steps';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { gql, useQuery } from '@apollo/client';
 import { DealTicketBalance } from './deal-ticket-balance';
-import * as React from 'react';
 import type { PartyBalanceQuery } from './__generated__/PartyBalanceQuery';
 
 const tempEmptyText = <p>Please select a market from the markets page</p>;

apps/token/src/components/page-templates/template-sidebar.tsx

@@ -12,7 +12,7 @@ export function TemplateSidebar({ children, sidebar }: TemplateSidebarProps) {
     <div className="border-b border-white lg:grid lg:grid-rows-[auto_minmax(600px,_1fr)] lg:grid-cols-[1fr_450px]">
       <Nav />
       <main className="p-20">{children}</main>
-      <aside className="hidden lg:block lg:col-start-2 lg:col-end-3 lg:row-start-1 lg: row-end-3 p-20 bg-banner bg-contain border-l border-white">
+      <aside className="hidden lg:block lg:col-start-2 lg:col-end-4 lg:row-start-1 lg: row-end-4 p-20 bg-banner bg-contain border-l border-white">
         {sidebar.map((Component, i) => (
           <section className="mb-20 last:mb-0" key={i}>
             {Component}

apps/trading-e2e/src/support/mocks/generate-deal-ticket-query.ts

@@ -15,50 +15,6 @@ export const generateDealTicketQuery = (
       positionDecimalPlaces: 0,
       state: MarketState.Active,
       tradingMode: MarketTradingMode.Continuous,
-      fees: {
-        __typename: 'Fees',
-        factors: {
-          __typename: 'FeeFactors',
-          makerFee: '0.0002',
-          infrastructureFee: '0.0005',
-          liquidityFee: '0.01',
-        },
-      },
-      priceMonitoringSettings: {
-        __typename: 'PriceMonitoringSettings',
-        parameters: {
-          __typename: 'PriceMonitoringParameters',
-          triggers: [
-            {
-              __typename: 'PriceMonitoringTrigger',
-              horizonSecs: 43200,
-              probability: 0.9999999,
-              auctionExtensionSecs: 600,
-            },
-          ],
-        },
-        updateFrequencySecs: 1,
-      },
-      riskFactors: {
-        __typename: 'RiskFactor',
-        market:
-          '54b78c1b877e106842ae156332ccec740ad98d6bad43143ac6a029501dd7c6e0',
-        short: '0.008571790367285281',
-        long: '0.008508132993273576',
-      },
-      data: {
-        __typename: 'MarketData',
-        market: {
-          __typename: 'Market',
-          id: '54b78c1b877e106842ae156332ccec740ad98d6bad43143ac6a029501dd7c6e0',
-        },
-        markPrice: '5749',
-        indicativeVolume: '0',
-        bestBidVolume: '5',
-        bestOfferVolume: '1',
-        bestStaticBidVolume: '5',
-        bestStaticOfferVolume: '1',
-      },
       tradableInstrument: {
         __typename: 'TradableInstrument',
         instrument: {
@@ -74,17 +30,6 @@ export const generateDealTicketQuery = (
             },
           },
         },
-        riskModel: {
-          __typename: 'LogNormalRiskModel',
-          tau: 0.0001140771161,
-          riskAversionParameter: 0.01,
-          params: {
-            __typename: 'LogNormalModelParams',
-            r: 0.016,
-            sigma: 0.3,
-            mu: 0,
-          },
-        },
       },
       depth: {
         __typename: 'MarketDepth',

apps/trading-e2e/src/support/mocks/generate-market-info-query.ts

@@ -0,0 +1,100 @@
+import type { MarketInfoQuery } from '@vegaprotocol/deal-ticket';
+import { MarketState, MarketTradingMode } from '@vegaprotocol/types';
+import merge from 'lodash/merge';
+import type { PartialDeep } from 'type-fest';
+
+export const generateMarketInfoQuery = (
+  override?: PartialDeep<MarketInfoQuery>
+): MarketInfoQuery => {
+  const defaultResult: MarketInfoQuery = {
+    market: {
+      __typename: 'Market',
+      id: 'market-0',
+      name: 'ETHBTC Quarterly (30 Jun 2022)',
+      decimalPlaces: 2,
+      positionDecimalPlaces: 0,
+      state: MarketState.Active,
+      tradingMode: MarketTradingMode.Continuous,
+      fees: {
+        __typename: 'Fees',
+        factors: {
+          __typename: 'FeeFactors',
+          makerFee: '0.0002',
+          infrastructureFee: '0.0005',
+          liquidityFee: '0.01',
+        },
+      },
+      priceMonitoringSettings: {
+        __typename: 'PriceMonitoringSettings',
+        parameters: {
+          __typename: 'PriceMonitoringParameters',
+          triggers: [
+            {
+              __typename: 'PriceMonitoringTrigger',
+              horizonSecs: 43200,
+              probability: 0.9999999,
+              auctionExtensionSecs: 600,
+            },
+          ],
+        },
+        updateFrequencySecs: 1,
+      },
+      riskFactors: {
+        __typename: 'RiskFactor',
+        market:
+          '54b78c1b877e106842ae156332ccec740ad98d6bad43143ac6a029501dd7c6e0',
+        short: '0.008571790367285281',
+        long: '0.008508132993273576',
+      },
+      data: {
+        __typename: 'MarketData',
+        market: {
+          __typename: 'Market',
+          id: '54b78c1b877e106842ae156332ccec740ad98d6bad43143ac6a029501dd7c6e0',
+        },
+        markPrice: '5749',
+        indicativeVolume: '0',
+        bestBidVolume: '5',
+        bestOfferVolume: '1',
+        bestStaticBidVolume: '5',
+        bestStaticOfferVolume: '1',
+      },
+      tradableInstrument: {
+        __typename: 'TradableInstrument',
+        instrument: {
+          __typename: 'Instrument',
+          product: {
+            __typename: 'Future',
+            quoteName: 'BTC',
+            settlementAsset: {
+              __typename: 'Asset',
+              id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
+              symbol: 'tBTC',
+              name: 'tBTC TEST',
+            },
+          },
+        },
+        riskModel: {
+          __typename: 'LogNormalRiskModel',
+          tau: 0.0001140771161,
+          riskAversionParameter: 0.01,
+          params: {
+            __typename: 'LogNormalModelParams',
+            r: 0.016,
+            sigma: 0.3,
+            mu: 0,
+          },
+        },
+      },
+      depth: {
+        __typename: 'MarketDepth',
+        lastTrade: {
+          __typename: 'Trade',
+          price: '100',
+        },
+      },
+    },
+  };
+
+  return merge(defaultResult, override);
+};

apps/trading-e2e/src/support/trading.ts

@@ -6,6 +6,7 @@ import { generateCandles } from './mocks/generate-candles';
 import { generateChart } from './mocks/generate-chart';
 import { generateDealTicketQuery } from './mocks/generate-deal-ticket-query';
 import { generateMarket } from './mocks/generate-market';
+import { generateMarketInfoQuery } from './mocks/generate-market-info-query';
 import { generateOrders } from './mocks/generate-orders';
 import { generatePositions } from './mocks/generate-positions';
 import { generateTrades } from './mocks/generate-trades';
@@ -31,6 +32,11 @@ export const mockTradingPage = (
     'DealTicketQuery',
     generateDealTicketQuery({ market: { state } })
   );
+  aliasQuery(
+    req,
+    'MarketInfoQuery',
+    generateMarketInfoQuery({ market: { state } })
+  );
   aliasQuery(req, 'Trades', generateTrades());
   aliasQuery(req, 'Chart', generateChart());
   aliasQuery(req, 'Candles', generateCandles());

apps/trading/pages/markets/trade-grid.tsx

@@ -2,7 +2,10 @@ import classNames from 'classnames';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import type { ReactNode } from 'react';
 import { useState } from 'react';
-import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
+import {
+  DealTicketContainer,
+  MarketInfoContainer,
+} from '@vegaprotocol/deal-ticket';
 import { OrderListContainer } from '@vegaprotocol/order-list';
 import { TradesContainer } from '@vegaprotocol/trades';
 import { PositionsContainer } from '@vegaprotocol/positions';
@@ -30,6 +33,7 @@ const TradingViews = {
   Positions: PositionsContainer,
   Accounts: AccountsContainer,
   Trades: TradesContainer,
+  Info: MarketInfoContainer,
 };
 
 type TradingView = keyof typeof TradingViews;
@@ -52,12 +56,12 @@ export const TradeMarketHeader = ({
     'font-sans font-normal mb-0 text-dark/80 dark:text-white/80 text-ui-small';
   const itemValueClassName =
     'capitalize font-sans tracking-tighter text-black dark:text-white text-ui';
-  const headerClassname = classNames(
+  const headerClassName = classNames(
     'w-full p-8 bg-white dark:bg-black',
     className
   );
   return (
-    <header className={headerClassname}>
+    <header className={headerClassName}>
       <SelectMarketDialog dialogOpen={open} setDialogOpen={setOpen} />
       <div className="flex flex-col md:flex-row gap-20 md:gap-64 ml-auto mr-8">
         <button
@@ -115,7 +119,7 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
       <div className={wrapperClasses}>
         <TradeMarketHeader
           market={market}
-          className="row-start-1 row-end-2 col-start-1 col-end-2"
+          className="row-start-1 row-end-2 col-start-1 col-end-4"
         />
         <TradeGridChild className="row-start-2 row-end-3 col-start-1 col-end-2">
           <GridTabs>
@@ -127,10 +131,17 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
             </GridTab>
           </GridTabs>
         </TradeGridChild>
-        <TradeGridChild className="row-start-1 row-end-3">
+        <TradeGridChild className="row-start-2 row-end-3 col-start-2 col-end-3">
+          <GridTabs>
+            <GridTab id="ticket" name={t('Ticket')}>
               <TradingViews.Ticket marketId={market.id} />
+            </GridTab>
+            <GridTab id="info" name={t('Info')}>
+              <TradingViews.Info marketId={market.id} />
+            </GridTab>
+          </GridTabs>
         </TradeGridChild>
-        <TradeGridChild className="row-start-1 row-end-3">
+        <TradeGridChild className="row-start-2 row-end-3 col-start-3 col-end-4">
           <GridTabs>
             <GridTab id="trades" name={t('Trades')}>
               <TradingViews.Trades marketId={market.id} />

libs/deal-ticket/src/components/__generated__/DealTicketQuery.ts

@@ -9,124 +9,6 @@ import { MarketState, MarketTradingMode } from "@vegaprotocol/types";
 // GraphQL query operation: DealTicketQuery
 // ====================================================
 
-export interface DealTicketQuery_market_fees_factors {
-  __typename: "FeeFactors";
-  /**
-   * The factor applied to calculate MakerFees, a non-negative float
-   */
-  makerFee: string;
-  /**
-   * The factor applied to calculate InfrastructureFees, a non-negative float
-   */
-  infrastructureFee: string;
-  /**
-   * The factor applied to calculate LiquidityFees, a non-negative float
-   */
-  liquidityFee: string;
-}
-
-export interface DealTicketQuery_market_fees {
-  __typename: "Fees";
-  /**
-   * The factors used to calculate the different fees
-   */
-  factors: DealTicketQuery_market_fees_factors;
-}
-
-export interface DealTicketQuery_market_priceMonitoringSettings_parameters_triggers {
-  __typename: "PriceMonitoringTrigger";
-  /**
-   * Price monitoring projection horizon τ in seconds (> 0).
-   */
-  horizonSecs: number;
-  /**
-   * Price monitoring probability level p. (>0 and < 1)
-   */
-  probability: number;
-  /**
-   * Price monitoring auction extension duration in seconds should the price
-   * breach it's theoretical level over the specified horizon at the specified
-   * probability level (> 0)
-   */
-  auctionExtensionSecs: number;
-}
-
-export interface DealTicketQuery_market_priceMonitoringSettings_parameters {
-  __typename: "PriceMonitoringParameters";
-  /**
-   * The list of triggers for this price monitoring
-   */
-  triggers: DealTicketQuery_market_priceMonitoringSettings_parameters_triggers[] | null;
-}
-
-export interface DealTicketQuery_market_priceMonitoringSettings {
-  __typename: "PriceMonitoringSettings";
-  /**
-   * Specified a set of PriceMonitoringParameters to be use for price monitoring purposes
-   */
-  parameters: DealTicketQuery_market_priceMonitoringSettings_parameters | null;
-  /**
-   * How often (in seconds) the price monitoring bounds should be updated
-   */
-  updateFrequencySecs: number;
-}
-
-export interface DealTicketQuery_market_riskFactors {
-  __typename: "RiskFactor";
-  /**
-   * market the risk factor was emitted for
-   */
-  market: string;
-  /**
-   * short factor
-   */
-  short: string;
-  /**
-   * long factor
-   */
-  long: string;
-}
-
-export interface DealTicketQuery_market_data_market {
-  __typename: "Market";
-  /**
-   * Market ID
-   */
-  id: string;
-}
-
-export interface DealTicketQuery_market_data {
-  __typename: "MarketData";
-  /**
-   * market id of the associated mark price
-   */
-  market: DealTicketQuery_market_data_market;
-  /**
-   * the mark price (actually an unsigned int)
-   */
-  markPrice: string;
-  /**
-   * indicative volume if the auction ended now, 0 if not in auction mode
-   */
-  indicativeVolume: string;
-  /**
-   * the aggregated volume being bid at the best bid price.
-   */
-  bestBidVolume: string;
-  /**
-   * the aggregated volume being offered at the best offer price.
-   */
-  bestOfferVolume: string;
-  /**
-   * the aggregated volume being offered at the best static bid price, excluding pegged orders
-   */
-  bestStaticBidVolume: string;
-  /**
-   * the aggregated volume being offered at the best static offer price, excluding pegged orders.
-   */
-  bestStaticOfferVolume: string;
-}
-
 export interface DealTicketQuery_market_tradableInstrument_instrument_product_settlementAsset {
   __typename: "Asset";
   /**
@@ -163,70 +45,12 @@ export interface DealTicketQuery_market_tradableInstrument_instrument {
   product: DealTicketQuery_market_tradableInstrument_instrument_product;
 }
 
-export interface DealTicketQuery_market_tradableInstrument_riskModel_LogNormalRiskModel_params {
-  __typename: "LogNormalModelParams";
-  /**
-   * r parameter
-   */
-  r: number;
-  /**
-   * sigma parameter
-   */
-  sigma: number;
-  /**
-   * mu parameter
-   */
-  mu: number;
-}
-
-export interface DealTicketQuery_market_tradableInstrument_riskModel_LogNormalRiskModel {
-  __typename: "LogNormalRiskModel";
-  /**
-   * Tau parameter of the risk model
-   */
-  tau: number;
-  /**
-   * Lambda parameter of the risk model
-   */
-  riskAversionParameter: number;
-  /**
-   * Params for the log normal risk model
-   */
-  params: DealTicketQuery_market_tradableInstrument_riskModel_LogNormalRiskModel_params;
-}
-
-export interface DealTicketQuery_market_tradableInstrument_riskModel_SimpleRiskModel_params {
-  __typename: "SimpleRiskModelParams";
-  /**
-   * Risk factor for long
-   */
-  factorLong: number;
-  /**
-   * Risk factor for short
-   */
-  factorShort: number;
-}
-
-export interface DealTicketQuery_market_tradableInstrument_riskModel_SimpleRiskModel {
-  __typename: "SimpleRiskModel";
-  /**
-   * Params for the simple risk model
-   */
-  params: DealTicketQuery_market_tradableInstrument_riskModel_SimpleRiskModel_params;
-}
-
-export type DealTicketQuery_market_tradableInstrument_riskModel = DealTicketQuery_market_tradableInstrument_riskModel_LogNormalRiskModel | DealTicketQuery_market_tradableInstrument_riskModel_SimpleRiskModel;
-
 export interface DealTicketQuery_market_tradableInstrument {
   __typename: "TradableInstrument";
   /**
    * An instance of or reference to a fully specified instrument.
    */
   instrument: DealTicketQuery_market_tradableInstrument_instrument;
-  /**
-   * A reference to a risk model that is valid for the instrument
-   */
-  riskModel: DealTicketQuery_market_tradableInstrument_riskModel;
 }
 
 export interface DealTicketQuery_market_depth_lastTrade {
@@ -286,22 +110,6 @@ export interface DealTicketQuery_market {
    * Current mode of execution of the market
    */
   tradingMode: MarketTradingMode;
-  /**
-   * Fees related data
-   */
-  fees: DealTicketQuery_market_fees;
-  /**
-   * Price monitoring settings for the market
-   */
-  priceMonitoringSettings: DealTicketQuery_market_priceMonitoringSettings;
-  /**
-   * risk factors for the market
-   */
-  riskFactors: DealTicketQuery_market_riskFactors | null;
-  /**
-   * marketData for the given market
-   */
-  data: DealTicketQuery_market_data | null;
   /**
    * An instance of or reference to a tradable instrument.
    */

libs/deal-ticket/src/components/__generated__/MarketInfoQuery.ts

@@ -0,0 +1,324 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { MarketState, MarketTradingMode } from "@vegaprotocol/types";
+
+// ====================================================
+// GraphQL query operation: MarketInfoQuery
+// ====================================================
+
+export interface MarketInfoQuery_market_fees_factors {
+  __typename: "FeeFactors";
+  /**
+   * The factor applied to calculate MakerFees, a non-negative float
+   */
+  makerFee: string;
+  /**
+   * The factor applied to calculate InfrastructureFees, a non-negative float
+   */
+  infrastructureFee: string;
+  /**
+   * The factor applied to calculate LiquidityFees, a non-negative float
+   */
+  liquidityFee: string;
+}
+
+export interface MarketInfoQuery_market_fees {
+  __typename: "Fees";
+  /**
+   * The factors used to calculate the different fees
+   */
+  factors: MarketInfoQuery_market_fees_factors;
+}
+
+export interface MarketInfoQuery_market_priceMonitoringSettings_parameters_triggers {
+  __typename: "PriceMonitoringTrigger";
+  /**
+   * Price monitoring projection horizon τ in seconds (> 0).
+   */
+  horizonSecs: number;
+  /**
+   * Price monitoring probability level p. (>0 and < 1)
+   */
+  probability: number;
+  /**
+   * Price monitoring auction extension duration in seconds should the price
+   * breach it's theoretical level over the specified horizon at the specified
+   * probability level (> 0)
+   */
+  auctionExtensionSecs: number;
+}
+
+export interface MarketInfoQuery_market_priceMonitoringSettings_parameters {
+  __typename: "PriceMonitoringParameters";
+  /**
+   * The list of triggers for this price monitoring
+   */
+  triggers: MarketInfoQuery_market_priceMonitoringSettings_parameters_triggers[] | null;
+}
+
+export interface MarketInfoQuery_market_priceMonitoringSettings {
+  __typename: "PriceMonitoringSettings";
+  /**
+   * Specified a set of PriceMonitoringParameters to be use for price monitoring purposes
+   */
+  parameters: MarketInfoQuery_market_priceMonitoringSettings_parameters | null;
+  /**
+   * How often (in seconds) the price monitoring bounds should be updated
+   */
+  updateFrequencySecs: number;
+}
+
+export interface MarketInfoQuery_market_riskFactors {
+  __typename: "RiskFactor";
+  /**
+   * market the risk factor was emitted for
+   */
+  market: string;
+  /**
+   * short factor
+   */
+  short: string;
+  /**
+   * long factor
+   */
+  long: string;
+}
+
+export interface MarketInfoQuery_market_data_market {
+  __typename: "Market";
+  /**
+   * Market ID
+   */
+  id: string;
+}
+
+export interface MarketInfoQuery_market_data {
+  __typename: "MarketData";
+  /**
+   * market id of the associated mark price
+   */
+  market: MarketInfoQuery_market_data_market;
+  /**
+   * the mark price (actually an unsigned int)
+   */
+  markPrice: string;
+  /**
+   * indicative volume if the auction ended now, 0 if not in auction mode
+   */
+  indicativeVolume: string;
+  /**
+   * the aggregated volume being bid at the best bid price.
+   */
+  bestBidVolume: string;
+  /**
+   * the aggregated volume being offered at the best offer price.
+   */
+  bestOfferVolume: string;
+  /**
+   * the aggregated volume being offered at the best static bid price, excluding pegged orders
+   */
+  bestStaticBidVolume: string;
+  /**
+   * the aggregated volume being offered at the best static offer price, excluding pegged orders.
+   */
+  bestStaticOfferVolume: string;
+}
+
+export interface MarketInfoQuery_market_tradableInstrument_instrument_product_settlementAsset {
+  __typename: "Asset";
+  /**
+   * The id of the asset
+   */
+  id: string;
+  /**
+   * The symbol of the asset (e.g: GBP)
+   */
+  symbol: string;
+  /**
+   * The full name of the asset (e.g: Great British Pound)
+   */
+  name: string;
+}
+
+export interface MarketInfoQuery_market_tradableInstrument_instrument_product {
+  __typename: "Future";
+  /**
+   * String representing the quote (e.g. BTCUSD -> USD is quote)
+   */
+  quoteName: string;
+  /**
+   * The name of the asset (string)
+   */
+  settlementAsset: MarketInfoQuery_market_tradableInstrument_instrument_product_settlementAsset;
+}
+
+export interface MarketInfoQuery_market_tradableInstrument_instrument {
+  __typename: "Instrument";
+  /**
+   * A reference to or instance of a fully specified product, including all required product parameters for that product (Product union)
+   */
+  product: MarketInfoQuery_market_tradableInstrument_instrument_product;
+}
+
+export interface MarketInfoQuery_market_tradableInstrument_riskModel_LogNormalRiskModel_params {
+  __typename: "LogNormalModelParams";
+  /**
+   * r parameter
+   */
+  r: number;
+  /**
+   * sigma parameter
+   */
+  sigma: number;
+  /**
+   * mu parameter
+   */
+  mu: number;
+}
+
+export interface MarketInfoQuery_market_tradableInstrument_riskModel_LogNormalRiskModel {
+  __typename: "LogNormalRiskModel";
+  /**
+   * Tau parameter of the risk model
+   */
+  tau: number;
+  /**
+   * Lambda parameter of the risk model
+   */
+  riskAversionParameter: number;
+  /**
+   * Params for the log normal risk model
+   */
+  params: MarketInfoQuery_market_tradableInstrument_riskModel_LogNormalRiskModel_params;
+}
+
+export interface MarketInfoQuery_market_tradableInstrument_riskModel_SimpleRiskModel_params {
+  __typename: "SimpleRiskModelParams";
+  /**
+   * Risk factor for long
+   */
+  factorLong: number;
+  /**
+   * Risk factor for short
+   */
+  factorShort: number;
+}
+
+export interface MarketInfoQuery_market_tradableInstrument_riskModel_SimpleRiskModel {
+  __typename: "SimpleRiskModel";
+  /**
+   * Params for the simple risk model
+   */
+  params: MarketInfoQuery_market_tradableInstrument_riskModel_SimpleRiskModel_params;
+}
+
+export type MarketInfoQuery_market_tradableInstrument_riskModel = MarketInfoQuery_market_tradableInstrument_riskModel_LogNormalRiskModel | MarketInfoQuery_market_tradableInstrument_riskModel_SimpleRiskModel;
+
+export interface MarketInfoQuery_market_tradableInstrument {
+  __typename: "TradableInstrument";
+  /**
+   * An instance of or reference to a fully specified instrument.
+   */
+  instrument: MarketInfoQuery_market_tradableInstrument_instrument;
+  /**
+   * A reference to a risk model that is valid for the instrument
+   */
+  riskModel: MarketInfoQuery_market_tradableInstrument_riskModel;
+}
+
+export interface MarketInfoQuery_market_depth_lastTrade {
+  __typename: "Trade";
+  /**
+   * The price of the trade (probably initially the passive order price, other determination algorithms are possible though) (uint64)
+   */
+  price: string;
+}
+
+export interface MarketInfoQuery_market_depth {
+  __typename: "MarketDepth";
+  /**
+   * Last trade for the given market (if available)
+   */
+  lastTrade: MarketInfoQuery_market_depth_lastTrade | null;
+}
+
+export interface MarketInfoQuery_market {
+  __typename: "Market";
+  /**
+   * Market ID
+   */
+  id: string;
+  /**
+   * Market full name
+   */
+  name: string;
+  /**
+   * decimalPlaces indicates the number of decimal places that an integer must be shifted by in order to get a correct
+   * number denominated in the currency of the Market. (uint64)
+   * 
+   * Examples:
+   * Currency     Balance  decimalPlaces  Real Balance
+   * GBP              100              0       GBP 100
+   * GBP              100              2       GBP   1.00
+   * GBP              100              4       GBP   0.01
+   * GBP                1              4       GBP   0.0001   (  0.01p  )
+   * 
+   * GBX (pence)      100              0       GBP   1.00     (100p     )
+   * GBX (pence)      100              2       GBP   0.01     (  1p     )
+   * GBX (pence)      100              4       GBP   0.0001   (  0.01p  )
+   * GBX (pence)        1              4       GBP   0.000001 (  0.0001p)
+   */
+  decimalPlaces: number;
+  /**
+   * positionDecimalPlaces indicated the number of decimal places that an integer must be shifted in order to get a correct size (uint64).
+   * i.e. 0 means there are no fractional orders for the market, and order sizes are always whole sizes.
+   * 2 means sizes given as 10^2 * desired size, e.g. a desired size of 1.23 is represented as 123 in this market.
+   */
+  positionDecimalPlaces: number;
+  /**
+   * Current state of the market
+   */
+  state: MarketState;
+  /**
+   * Current mode of execution of the market
+   */
+  tradingMode: MarketTradingMode;
+  /**
+   * Fees related data
+   */
+  fees: MarketInfoQuery_market_fees;
+  /**
+   * Price monitoring settings for the market
+   */
+  priceMonitoringSettings: MarketInfoQuery_market_priceMonitoringSettings;
+  /**
+   * risk factors for the market
+   */
+  riskFactors: MarketInfoQuery_market_riskFactors | null;
+  /**
+   * marketData for the given market
+   */
+  data: MarketInfoQuery_market_data | null;
+  /**
+   * An instance of or reference to a tradable instrument.
+   */
+  tradableInstrument: MarketInfoQuery_market_tradableInstrument;
+  /**
+   * Current depth on the order book for this market
+   */
+  depth: MarketInfoQuery_market_depth;
+}
+
+export interface MarketInfoQuery {
+  /**
+   * An instrument that is trading on the VEGA network
+   */
+  market: MarketInfoQuery_market | null;
+}
+
+export interface MarketInfoQueryVariables {
+  marketId: string;
+}

libs/deal-ticket/src/components/__generated__/index.ts

@@ -1,2 +1,3 @@
 export * from './DealTicketQuery';
+export * from './MarketInfoQuery';
 export * from './OrderEvent';

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

@@ -1,13 +1,7 @@
 import { gql, useQuery } from '@apollo/client';
-import {
+import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
-  AsyncRenderer,
-  GridTab,
-  GridTabs,
-  Splash,
-} from '@vegaprotocol/ui-toolkit';
 import { DealTicketManager } from './deal-ticket-manager';
 import { t } from '@vegaprotocol/react-helpers';
-import { Info } from './info-market';
 import type { DealTicketQuery_market, DealTicketQuery } from './__generated__';
 
 const DEAL_TICKET_QUERY = gql`
@@ -19,40 +13,6 @@ const DEAL_TICKET_QUERY = gql`
       positionDecimalPlaces
       state
       tradingMode
-      fees {
-        factors {
-          makerFee
-          infrastructureFee
-          liquidityFee
-        }
-      }
-      priceMonitoringSettings {
-        parameters {
-          triggers {
-            horizonSecs
-            probability
-            auctionExtensionSecs
-          }
-        }
-        updateFrequencySecs
-      }
-      riskFactors {
-        market
-        short
-        long
-      }
-      data {
-        market {
-          id
-        }
-        markPrice
-        indicativeVolume
-        bestBidVolume
-        bestOfferVolume
-        bestStaticBidVolume
-        bestStaticOfferVolume
-        indicativeVolume
-      }
       tradableInstrument {
         instrument {
           product {
@@ -66,23 +26,6 @@ const DEAL_TICKET_QUERY = gql`
             }
           }
         }
-        riskModel {
-          ... on LogNormalRiskModel {
-            tau
-            riskAversionParameter
-            params {
-              r
-              sigma
-              mu
-            }
-          }
-          ... on SimpleRiskModel {
-            params {
-              factorLong
-              factorShort
-            }
-          }
-        }
       }
       depth {
         lastTrade {
@@ -111,13 +54,7 @@ export const DealTicketContainer = ({
   });
 
   return (
-    <GridTabs>
+    <AsyncRenderer<DealTicketQuery> data={data} loading={loading} error={error}>
-      <GridTab id="ticket" name={t('Ticket')}>
-        <AsyncRenderer<DealTicketQuery>
-          data={data}
-          loading={loading}
-          error={error}
-        >
       {data && data.market ? (
         children ? (
           children(data)
@@ -130,26 +67,5 @@ export const DealTicketContainer = ({
         </Splash>
       )}
     </AsyncRenderer>
-      </GridTab>
-      <GridTab id="info" name={t('Info')}>
-        <AsyncRenderer<DealTicketQuery>
-          data={data}
-          loading={loading}
-          error={error}
-        >
-          {data && data.market ? (
-            children ? (
-              children(data)
-            ) : (
-              <Info market={data.market} />
-            )
-          ) : (
-            <Splash>
-              <p>{t('Could not load market')}</p>
-            </Splash>
-          )}
-        </AsyncRenderer>
-      </GridTab>
-    </GridTabs>
   );
 };

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

@@ -8,18 +8,130 @@ import {
 import {
   KeyValueTable,
   KeyValueTableRow,
+  AsyncRenderer,
+  Splash,
   Accordion,
 } from '@vegaprotocol/ui-toolkit';
 import startCase from 'lodash/startCase';
 import pick from 'lodash/pick';
 import omit from 'lodash/omit';
-import type { DealTicketQuery_market } from './__generated__/DealTicketQuery';
+import type {
+  MarketInfoQuery,
+  MarketInfoQuery_market,
+} from './__generated__/MarketInfoQuery';
 import BigNumber from 'bignumber.js';
+import { gql, useQuery } from '@apollo/client';
+
+const MARKET_INFO_QUERY = gql`
+  query MarketInfoQuery($marketId: ID!) {
+    market(id: $marketId) {
+      id
+      name
+      decimalPlaces
+      positionDecimalPlaces
+      state
+      tradingMode
+      fees {
+        factors {
+          makerFee
+          infrastructureFee
+          liquidityFee
+        }
+      }
+      priceMonitoringSettings {
+        parameters {
+          triggers {
+            horizonSecs
+            probability
+            auctionExtensionSecs
+          }
+        }
+        updateFrequencySecs
+      }
+      riskFactors {
+        market
+        short
+        long
+      }
+      data {
+        market {
+          id
+        }
+        markPrice
+        indicativeVolume
+        bestBidVolume
+        bestOfferVolume
+        bestStaticBidVolume
+        bestStaticOfferVolume
+        indicativeVolume
+      }
+      tradableInstrument {
+        instrument {
+          product {
+            ... on Future {
+              quoteName
+              settlementAsset {
+                id
+                symbol
+                name
+              }
+            }
+          }
+        }
+        riskModel {
+          ... on LogNormalRiskModel {
+            tau
+            riskAversionParameter
+            params {
+              r
+              sigma
+              mu
+            }
+          }
+          ... on SimpleRiskModel {
+            params {
+              factorLong
+              factorShort
+            }
+          }
+        }
+      }
+      depth {
+        lastTrade {
+          price
+        }
+      }
+    }
+  }
+`;
 
 export interface InfoProps {
-  market: DealTicketQuery_market;
+  market: MarketInfoQuery_market;
 }
 
+export interface MarketInfoContainerProps {
+  marketId: string;
+}
+export const MarketInfoContainer = ({ marketId }: MarketInfoContainerProps) => {
+  const { data, loading, error } = useQuery(MARKET_INFO_QUERY, {
+    variables: { marketId },
+  });
+
+  return (
+    <AsyncRenderer<MarketInfoQuery> data={data} loading={loading} error={error}>
+      {data && data.market ? (
+        <div className={'overflow-auto h-full'}>
+          <Info market={data.market} />
+        </div>
+      ) : (
+        <Splash>
+          <p>{t('Could not load market')}</p>
+        </Splash>
+      )}
+    </AsyncRenderer>
+  );
+};
+
 export const Info = ({ market }: InfoProps) => {
   const headerClassName =
     'text-h5 font-bold uppercase text-black dark:text-white';