colocate querys with libs

apps/explorer/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
+  "ignorePatterns": ["!**/*", "__generated__"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/explorer/src/app/routes/assets/__generated__/AssetsQuery.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountType } from "./globalTypes";
+import { AccountType } from "./../../../../../../../libs/graphql/src/__generated__/globalTypes";
 
 // ====================================================
 // GraphQL query operation: AssetsQuery

apps/explorer/src/app/routes/assets/index.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { RouteTitle } from '../../components/route-title';
 import { SubHeading } from '../../components/sub-heading';
 import { SyntaxHighlighter } from '../../components/syntax-highlighter';
-import { AssetsQuery } from '@vegaprotocol/graphql';
+import { AssetsQuery } from './__generated__/AssetsQuery';
 
 export const ASSETS_QUERY = gql`
   query AssetsQuery {

apps/explorer/src/app/routes/governance/__generated__/ProposalsQuery.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { ProposalState, ProposalRejectionReason, VoteValue } from "./globalTypes";
+import { ProposalState, ProposalRejectionReason, VoteValue } from "./../../../../../../../libs/graphql/src/__generated__/globalTypes";
 
 // ====================================================
 // GraphQL query operation: ProposalsQuery

apps/explorer/src/app/routes/governance/index.tsx

@@ -6,7 +6,7 @@ import { SyntaxHighlighter } from '../../components/syntax-highlighter';
 import {
   ProposalsQuery,
   ProposalsQuery_proposals_terms_change,
-} from '@vegaprotocol/graphql';
+} from './__generated__/ProposalsQuery';
 
 export function getProposalName(change: ProposalsQuery_proposals_terms_change) {
   if (change.__typename === 'NewAsset') {

apps/explorer/src/app/routes/markets/__generated__/MarketsQuery.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { MarketTradingMode, MarketState, AccountType, AuctionTrigger } from "./globalTypes";
+import { MarketTradingMode, MarketState, AccountType, AuctionTrigger } from "./../../../../../../../libs/graphql/src/__generated__/globalTypes";
 
 // ====================================================
 // GraphQL query operation: MarketsQuery

apps/explorer/src/app/routes/markets/index.tsx

@@ -1,5 +1,5 @@
 import { gql, useQuery } from '@apollo/client';
-import { MarketsQuery } from '@vegaprotocol/graphql';
+import { MarketsQuery } from './__generated__/MarketsQuery';
 
 import React from 'react';
 import { SyntaxHighlighter } from '../../components/syntax-highlighter';

apps/explorer/src/app/routes/network-parameters/index.tsx

@@ -1,6 +1,6 @@
 import { gql, useQuery } from '@apollo/client';
 import { RouteTitle } from '../../components/route-title';
-import { NetworkParametersQuery } from '@vegaprotocol/graphql';
+import { NetworkParametersQuery } from './__generated__/NetworkParametersQuery';
 import { SyntaxHighlighter } from '../../components/syntax-highlighter';
 
 export const NETWORK_PARAMETERS_QUERY = gql`

apps/explorer/src/app/routes/parties/id/__generated__/PartyAssetsQuery.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountType } from "./globalTypes";
+import { AccountType } from "./../../../../../../../../libs/graphql/src/__generated__/globalTypes";
 
 // ====================================================
 // GraphQL query operation: PartyAssetsQuery

apps/explorer/src/app/routes/parties/id/index.tsx

@@ -11,7 +11,7 @@ import { TendermintSearchTransactionResponse } from '../tendermint-transaction-r
 import {
   PartyAssetsQuery,
   PartyAssetsQueryVariables,
-} from '@vegaprotocol/graphql';
+} from './__generated__/PartyAssetsQuery';
 
 const PARTY_ASSETS_QUERY = gql`
   query PartyAssetsQuery($partyId: ID!) {

apps/explorer/src/app/routes/validators/__generated__/NodesQuery.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { NodeStatus } from "./globalTypes";
+import { NodeStatus } from "./../../../../../../../libs/graphql/src/__generated__/globalTypes";
 
 // ====================================================
 // GraphQL query operation: NodesQuery

apps/explorer/src/app/routes/validators/index.tsx

@@ -6,7 +6,7 @@ import { SyntaxHighlighter } from '../../components/syntax-highlighter';
 import { DATA_SOURCES } from '../../config';
 import useFetch from '../../hooks/use-fetch';
 import { TendermintValidatorsResponse } from './tendermint-validator-response';
-import { NodesQuery } from '@vegaprotocol/graphql';
+import { NodesQuery } from './__generated__/NodesQuery';
 
 const NODES_QUERY = gql`
   query NodesQuery {

apps/trading/.eslintrc.json

@@ -5,7 +5,7 @@
     "next",
     "next/core-web-vitals"
   ],
-  "ignorePatterns": ["!**/*"],
+  "ignorePatterns": ["!**/*", "__generated__"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/trading/components/deal-ticket-container/index.ts

@@ -1 +0,0 @@
-export * from './deal-ticket-container';

apps/trading/components/order-list-container/index.ts

@@ -1 +0,0 @@
-export * from './order-list-container';

apps/trading/components/page-query-container/index.tsx

@@ -1,7 +1,7 @@
 import { OperationVariables, QueryHookOptions, useQuery } from '@apollo/client';
 import { DocumentNode } from 'graphql';
 import { ReactNode } from 'react';
-import { AsyncRenderer } from '../async-renderer';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 
 interface PageQueryContainerProps<TData, TVariables> {
   query: DocumentNode;

apps/trading/pages/markets/[marketId].page.tsx

@@ -1,5 +1,5 @@
 import { gql } from '@apollo/client';
-import { Market, MarketVariables } from '@vegaprotocol/graphql';
+import { Market, MarketVariables } from './__generated__/Market';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';

apps/trading/pages/markets/__generated__/Market.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { MarketState, MarketTradingMode } from "./globalTypes";
+import { MarketState, MarketTradingMode } from "./../../../../../libs/graphql/src/__generated__/globalTypes";
 
 // ====================================================
 // GraphQL query operation: Market

apps/trading/pages/markets/index.page.tsx

@@ -1,70 +1,7 @@
-import { useRef, useCallback } from 'react';
-import { produce } from 'immer';
-import merge from 'lodash/merge';
-import { useRouter } from 'next/router';
-import { AsyncRenderer } from '../../components/async-renderer';
-import { MarketListTable, getRowNodeId } from '@vegaprotocol/market-list';
-import {
-  Markets_markets,
-  Markets_markets_data,
-  marketsDataProvider,
-} from '@vegaprotocol/graphql';
-import { useDataProvider } from '@vegaprotocol/react-helpers';
-
-import type { AgGridReact } from 'ag-grid-react';
+import { MarketsContainer } from '@vegaprotocol/market-list';
 
 const Markets = () => {
-  const { pathname, push } = useRouter();
-  const gridRef = useRef<AgGridReact | null>(null);
-  const update = useCallback(
-    (delta: Markets_markets_data) => {
-      const update: Markets_markets[] = [];
-      const add: Markets_markets[] = [];
-      if (!gridRef.current) {
-        return false;
-      }
-      const rowNode = gridRef.current.api.getRowNode(
-        getRowNodeId(delta.market)
-      );
-      if (rowNode) {
-        const updatedData = produce<Markets_markets_data>(
-          rowNode.data.data,
-          (draft: Markets_markets_data) => merge(draft, delta)
-        );
-        if (updatedData !== rowNode.data.data) {
-          update.push({ ...rowNode.data, data: updatedData });
-        }
-      }
-      // @TODO - else add new market
-      if (update.length || add.length) {
-        gridRef.current.api.applyTransactionAsync({
-          update,
-          add,
-          addIndex: 0,
-        });
-      }
-      return true;
-    },
-    [gridRef]
-  );
-  const { data, error, loading } = useDataProvider<
-    Markets_markets,
-    Markets_markets_data
-  >(marketsDataProvider, update);
-
-  return (
-    <AsyncRenderer loading={loading} error={error} data={data}>
-      {(data) => (
-        <MarketListTable
-          ref={gridRef}
-          data={data}
-          onRowClicked={(id) =>
-            push(`${pathname}/${id}?portfolio=orders&trade=orderbook`)
-          }
-        />
-      )}
-    </AsyncRenderer>
-  );
+  return <MarketsContainer />;
 };
 
 export default Markets;

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

@@ -1,12 +1,12 @@
-import { Market_market } from '@vegaprotocol/graphql';
 import classNames from 'classnames';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { useState, ReactNode, ComponentType } from 'react';
+import { useState, ReactNode } from 'react';
 import { GridTab, GridTabs } from './grid-tabs';
-import { DealTicketContainer } from '../../components/deal-ticket-container';
-import { OrderListContainer } from '../..//components/order-list-container';
+import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
+import { OrderListContainer } from '@vegaprotocol/order-list';
 import { Splash } from '@vegaprotocol/ui-toolkit';
-import { Positions } from './positions';
+import { PositionsContainer } from '@vegaprotocol/positions';
+import { Market_market } from './__generated__/Market';
 
 const Chart = () => (
   <Splash>
@@ -29,22 +29,12 @@ const Trades = () => (
   </Splash>
 );
 
-// enum TradingView {
-//   Chart = 'Chart',
-//   Ticket = 'Ticket',
-//   Orderbook = 'Orderbook',
-//   Orders = 'Orders',
-//   Positions = 'Positions',
-//   Collateral = 'Collateral',
-//   Trades = 'Trades',
-// }
-
 const TradingViews = {
   Chart: Chart,
   Ticket: DealTicketContainer,
   Orderbook: Orderbook,
   Orders: OrderListContainer,
-  Positions: Positions,
+  Positions: PositionsContainer,
   Collateral: Collateral,
   Trades: Trades,
 };
@@ -71,7 +61,7 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
         <TradingViews.Chart />
       </TradeGridChild>
       <TradeGridChild className="row-start-1 row-end-3">
-        <TradingViews.Ticket market={market} />
+        <TradingViews.Ticket marketId={market.id} />
       </TradeGridChild>
       <TradeGridChild className="row-start-1 row-end-3">
         <GridTabs group="trade">
@@ -134,7 +124,7 @@ export const TradePanels = ({ market }: TradePanelsProps) => {
       throw new Error(`No component for view: ${view}`);
     }
 
-    return <Component market={market} />;
+    return <Component marketId={market.id} />;
   };
 
   return (

libs/deal-ticket/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
+  "ignorePatterns": ["!**/*", "__generated__"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

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

@@ -0,0 +1,150 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { MarketState, MarketTradingMode } from "./../../../graphql/src/__generated__/globalTypes";
+
+// ====================================================
+// GraphQL query operation: DealTicketQuery
+// ====================================================
+
+export interface DealTicketQuery_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 DealTicketQuery_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: DealTicketQuery_market_tradableInstrument_instrument_product_settlementAsset;
+}
+
+export interface DealTicketQuery_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: DealTicketQuery_market_tradableInstrument_instrument_product;
+}
+
+export interface DealTicketQuery_market_tradableInstrument {
+  __typename: "TradableInstrument";
+  /**
+   * An instance of or reference to a fully specified instrument.
+   */
+  instrument: DealTicketQuery_market_tradableInstrument_instrument;
+}
+
+export interface DealTicketQuery_market_trades {
+  __typename: "Trade";
+  /**
+   * The hash of the trade data
+   */
+  id: string;
+  /**
+   * The price of the trade (probably initially the passive order price, other determination algorithms are possible though) (uint64)
+   */
+  price: string;
+  /**
+   * The number of contracts trades, will always be <= the remaining size of both orders immediately before the trade (uint64)
+   */
+  size: string;
+  /**
+   * RFC3339Nano time for when the trade occurred
+   */
+  createdAt: string;
+}
+
+export interface DealTicketQuery_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 DealTicketQuery_market_depth {
+  __typename: "MarketDepth";
+  /**
+   * Last trade for the given market (if available)
+   */
+  lastTrade: DealTicketQuery_market_depth_lastTrade | null;
+}
+
+export interface DealTicketQuery_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;
+  /**
+   * Current state of the market
+   */
+  state: MarketState;
+  /**
+   * Current mode of execution of the market
+   */
+  tradingMode: MarketTradingMode;
+  /**
+   * An instance of or reference to a tradable instrument.
+   */
+  tradableInstrument: DealTicketQuery_market_tradableInstrument;
+  /**
+   * Trades on a market
+   */
+  trades: DealTicketQuery_market_trades[] | null;
+  /**
+   * Current depth on the order book for this market
+   */
+  depth: DealTicketQuery_market_depth;
+}
+
+export interface DealTicketQuery {
+  /**
+   * An instrument that is trading on the VEGA network
+   */
+  market: DealTicketQuery_market | null;
+}
+
+export interface DealTicketQueryVariables {
+  marketId: string;
+}

libs/deal-ticket/src/__generated__/OrderEvent.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { BusEventType, OrderType, OrderStatus, OrderRejectionReason } from "./globalTypes";
+import { BusEventType, OrderType, OrderStatus, OrderRejectionReason } from "./../../../graphql/src/__generated__/globalTypes";
 
 // ====================================================
 // GraphQL subscription operation: OrderEvent

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

@@ -0,0 +1,66 @@
+import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
+import { gql, useQuery } from '@apollo/client';
+import { DealTicketManager } from './deal-ticket-manager';
+import { DealTicketQuery } from './__generated__/DealTicketQuery';
+
+const DEAL_TICKET_QUERY = gql`
+  query DealTicketQuery($marketId: ID!) {
+    market(id: $marketId) {
+      id
+      name
+      decimalPlaces
+      state
+      tradingMode
+      tradableInstrument {
+        instrument {
+          product {
+            ... on Future {
+              quoteName
+              settlementAsset {
+                id
+                symbol
+                name
+              }
+            }
+          }
+        }
+      }
+      trades {
+        id
+        price
+        size
+        createdAt
+      }
+      depth {
+        lastTrade {
+          price
+        }
+      }
+    }
+  }
+`;
+
+interface DealTicketContainerProps {
+  marketId: string;
+}
+
+export const DealTicketContainer = ({ marketId }: DealTicketContainerProps) => {
+  const { data, loading, error } = useQuery(DEAL_TICKET_QUERY, {
+    variables: { marketId },
+  });
+
+  return (
+    <AsyncRenderer<DealTicketQuery> data={data} loading={loading} error={error}>
+      {(data) => {
+        if (!data.market) {
+          return (
+            <Splash>
+              <p>Could not load market</p>
+            </Splash>
+          );
+        }
+        return <DealTicketManager market={data.market} />;
+      }}
+    </AsyncRenderer>
+  );
+};

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

@@ -1,19 +1,19 @@
 import { FormGroup, Input } from '@vegaprotocol/ui-toolkit';
 import { OrderTimeInForce } from '@vegaprotocol/wallet';
 import { TransactionStatus } from './deal-ticket';
-import { Market_market } from '@vegaprotocol/graphql';
 import { ExpirySelector } from './expiry-selector';
 import { SideSelector } from './side-selector';
 import { SubmitButton } from './submit-button';
 import { TimeInForceSelector } from './time-in-force-selector';
 import { TypeSelector } from './type-selector';
 import { Order } from './use-order-state';
+import { DealTicketQuery_market } from './__generated__/DealTicketQuery';
 
 interface DealTicketLimitProps {
   order: Order;
   updateOrder: (order: Partial<Order>) => void;
   transactionStatus: TransactionStatus;
-  market: Market_market;
+  market: DealTicketQuery_market;
 }
 
 export const DealTicketLimit = ({

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

@@ -1,16 +1,17 @@
-import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
-import { DealTicket } from '@vegaprotocol/deal-ticket';
-import { Market_market, OrderStatus } from '@vegaprotocol/graphql';
-import { useOrderSubmit } from '../../hooks/use-order-submit';
 import { useEffect, useState } from 'react';
-import { VegaTxStatus } from '../../hooks/use-vega-transaction';
+import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
+import { OrderStatus } from '@vegaprotocol/graphql';
+import { VegaTxStatus } from '@vegaprotocol/wallet';
+import { DealTicket } from './deal-ticket';
+import { useOrderSubmit } from './use-order-submit';
 import { OrderDialog } from './order-dialog';
+import { DealTicketQuery_market } from './__generated__/DealTicketQuery';
 
-interface DealTicketContainerProps {
-  market: Market_market;
+interface DealTicketManagerProps {
+  market: DealTicketQuery_market;
 }
 
-export const DealTicketContainer = ({ market }: DealTicketContainerProps) => {
+export const DealTicketManager = ({ market }: DealTicketManagerProps) => {
   const [orderDialogOpen, setOrderDialogOpen] = useState(false);
   const { submit, transaction, finalizedOrder, reset } = useOrderSubmit(market);
 

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

@@ -1,18 +1,18 @@
 import { addDecimal } from '@vegaprotocol/react-helpers';
 import { FormGroup, Input } from '@vegaprotocol/ui-toolkit';
-import { Market_market } from '@vegaprotocol/graphql';
 import { TransactionStatus } from './deal-ticket';
 import { SideSelector } from './side-selector';
 import { SubmitButton } from './submit-button';
 import { TimeInForceSelector } from './time-in-force-selector';
 import { TypeSelector } from './type-selector';
 import { Order } from './use-order-state';
+import { DealTicketQuery_market } from './__generated__/DealTicketQuery';
 
 interface DealTicketMarketProps {
   order: Order;
   updateOrder: (order: Partial<Order>) => void;
   transactionStatus: TransactionStatus;
-  market: Market_market;
+  market: DealTicketQuery_market;
 }
 
 export const DealTicketMarket = ({

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

@@ -1,9 +1,9 @@
-import { OrderSide, OrderTimeInForce, OrderType } from '@vegaprotocol/wallet';
-import { Market_market } from '@vegaprotocol/graphql';
 import { FormEvent } from 'react';
+import { OrderSide, OrderTimeInForce, OrderType } from '@vegaprotocol/wallet';
 import { Order, useOrderState } from './use-order-state';
 import { DealTicketMarket } from './deal-ticket-market';
 import { DealTicketLimit } from './deal-ticket-limit';
+import { DealTicketQuery_market } from './__generated__/DealTicketQuery';
 
 const DEFAULT_ORDER: Order = {
   type: OrderType.Market,
@@ -15,7 +15,7 @@ const DEFAULT_ORDER: Order = {
 export type TransactionStatus = 'default' | 'pending';
 
 export interface DealTicketProps {
-  market: Market_market;
+  market: DealTicketQuery_market;
   submit: (order: Order) => void;
   transactionStatus: TransactionStatus;
   defaultOrder?: Order;

libs/deal-ticket/src/index.ts

@@ -1,2 +1,3 @@
 export * from './deal-ticket';
 export * from './use-order-state';
+export * from './deal-ticket-container';

libs/deal-ticket/src/order-dialog.tsx

@@ -1,11 +1,8 @@
 import { Icon, Loader } from '@vegaprotocol/ui-toolkit';
 import { ReactNode } from 'react';
-import {
-  TransactionState,
-  VegaTxStatus,
-} from '../../hooks/use-vega-transaction';
-import { OrderEvent_busEvents_event_Order } from '@vegaprotocol/graphql';
+import { OrderEvent_busEvents_event_Order } from './__generated__/OrderEvent';
 import { formatNumber } from '@vegaprotocol/react-helpers';
+import { TransactionState, VegaTxStatus } from '@vegaprotocol/wallet';
 
 interface OrderDialogProps {
   transaction: TransactionState;

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

@@ -1,14 +1,14 @@
 import { Button, InputError } from '@vegaprotocol/ui-toolkit';
 import { OrderTimeInForce, OrderType } from '@vegaprotocol/wallet';
-import { Market_market } from '@vegaprotocol/graphql';
 import { useMemo } from 'react';
 import { Order } from './use-order-state';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { TransactionStatus } from './deal-ticket';
+import { DealTicketQuery_market } from './__generated__/DealTicketQuery';
 
 interface SubmitButtonProps {
   transactionStatus: TransactionStatus;
-  market: Market_market;
+  market: DealTicketQuery_market;
   order: Order;
 }
 

libs/deal-ticket/src/use-order-submit.spec.tsx

@@ -1,15 +1,15 @@
 import { MockedProvider } from '@apollo/client/testing';
 import { act, renderHook } from '@testing-library/react-hooks';
-import { Order } from '@vegaprotocol/deal-ticket';
+import { Order } from './use-order-state';
 import {
   VegaKeyExtended,
+  VegaTxStatus,
   VegaWalletContext,
   VegaWalletContextShape,
 } from '@vegaprotocol/wallet';
 import { OrderSide, OrderTimeInForce, OrderType } from '@vegaprotocol/wallet';
 import { ReactNode } from 'react';
 import { useOrderSubmit } from './use-order-submit';
-import { VegaTxStatus } from './use-vega-transaction';
 
 const defaultWalletContext = {
   keypair: null,

libs/deal-ticket/src/use-order-submit.ts

@@ -2,15 +2,15 @@ import { useCallback, useEffect, useState } from 'react';
 import { gql, useSubscription } from '@apollo/client';
 import { ethers } from 'ethers';
 import { SHA3 } from 'sha3';
-import { Order } from '@vegaprotocol/deal-ticket';
+import { Order } from './use-order-state';
 import { OrderType, useVegaWallet } from '@vegaprotocol/wallet';
-import { useVegaTransaction } from './use-vega-transaction';
+import { removeDecimal } from '@vegaprotocol/react-helpers';
+import { useVegaTransaction } from '@vegaprotocol/wallet';
 import {
   OrderEvent,
   OrderEventVariables,
   OrderEvent_busEvents_event_Order,
-} from '@vegaprotocol/graphql';
-import { removeDecimal } from '@vegaprotocol/react-helpers';
+} from './__generated__/OrderEvent';
 
 const ORDER_EVENT_SUB = gql`
   subscription OrderEvent($partyId: ID!) {

libs/graphql/project.json

@@ -44,7 +44,7 @@
       "options": {
         "commands": [
           {
-            "command": "npx apollo client:codegen libs/graphql/src/__generated__ --config=libs/graphql/apollo.config.js --target=typescript --globalTypesFile=libs/graphql/src/__generated__/globalTypes.ts --outputFlat"
+            "command": "npx apollo client:codegen --config=libs/graphql/apollo.config.js --target=typescript --globalTypesFile=libs/graphql/src/__generated__/globalTypes.ts"
           }
         ]
       }

libs/graphql/src/__generated__/Guess.ts

@@ -1,39 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-// ====================================================
-// GraphQL query operation: Guess
-// ====================================================
-
-export interface Guess_party {
-  __typename: "Party";
-  /**
-   * Party identifier
-   */
-  id: string;
-}
-
-export interface Guess_market {
-  __typename: "Market";
-  /**
-   * Market ID
-   */
-  id: string;
-}
-
-export interface Guess {
-  /**
-   * An entity that is trading on the VEGA network
-   */
-  party: Guess_party | null;
-  /**
-   * An instrument that is trading on the VEGA network
-   */
-  market: Guess_market | null;
-}
-
-export interface GuessVariables {
-  guess: string;
-}

libs/graphql/src/data-providers/index.ts

@@ -1,3 +0,0 @@
-export * from './markets-data-provider';
-export * from './positions-data-provider';
-export type { Subscribe } from './generic-data-provider';

libs/graphql/src/index.ts

@@ -1,21 +1 @@
-export * from './__generated__/AssetsQuery';
 export * from './__generated__/globalTypes';
-export * from './__generated__/Guess';
-export * from './__generated__/Market';
-export * from './__generated__/MarketDataFields';
-export * from './__generated__/MarketDataSub';
-export * from './__generated__/Markets';
-export * from './__generated__/MarketsQuery';
-export * from './__generated__/NetworkParametersQuery';
-export * from './__generated__/NodesQuery';
-export * from './__generated__/OrderEvent';
-export * from './__generated__/OrderFields';
-export * from './__generated__/Orders';
-export * from './__generated__/OrderSub';
-export * from './__generated__/PartyAssetsQuery';
-export * from './__generated__/PositionDetails';
-export * from './__generated__/Positions';
-export * from './__generated__/PositionSubscribe';
-export * from './__generated__/ProposalsQuery';
-
-export * from './data-providers';

libs/market-list/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
+  "ignorePatterns": ["!**/*", "__generated__"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

libs/market-list/src/index.ts

@@ -1 +1,2 @@
 export * from './lib/market-list-table';
+export * from './lib/markets-container';

libs/market-list/src/lib/__generated__/MarketDataFields.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { MarketState, MarketTradingMode } from "./globalTypes";
+import { MarketState, MarketTradingMode } from "./../../../../graphql/src/__generated__/globalTypes";
 
 // ====================================================
 // GraphQL fragment: MarketDataFields

libs/market-list/src/lib/__generated__/MarketDataSub.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { MarketState, MarketTradingMode } from "./globalTypes";
+import { MarketState, MarketTradingMode } from "./../../../../graphql/src/__generated__/globalTypes";
 
 // ====================================================
 // GraphQL subscription operation: MarketDataSub

libs/market-list/src/lib/__generated__/Markets.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { MarketState, MarketTradingMode } from "./globalTypes";
+import { MarketState, MarketTradingMode } from "./../../../../graphql/src/__generated__/globalTypes";
 
 // ====================================================
 // GraphQL query operation: Markets

libs/market-list/src/lib/market-list-table.tsx

@@ -2,7 +2,7 @@ import { forwardRef } from 'react';
 import type { ValueFormatterParams } from 'ag-grid-community';
 import { PriceCell, formatNumber } from '@vegaprotocol/react-helpers';
 import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
-import { Markets_markets } from '@vegaprotocol/graphql';
+import { Markets_markets } from './__generated__/Markets';
 import { AgGridColumn } from 'ag-grid-react';
 import type { AgGridReact } from 'ag-grid-react';
 

libs/market-list/src/lib/markets-container.tsx

@@ -0,0 +1,64 @@
+import { useRef, useCallback } from 'react';
+import { produce } from 'immer';
+import merge from 'lodash/merge';
+import { useRouter } from 'next/router';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { MarketListTable, getRowNodeId } from './market-list-table';
+import { useDataProvider } from '@vegaprotocol/react-helpers';
+import type { AgGridReact } from 'ag-grid-react';
+import { Markets_markets, Markets_markets_data } from './__generated__/Markets';
+import { marketsDataProvider } from './markets-data-provider';
+
+export const MarketsContainer = () => {
+  const { pathname, push } = useRouter();
+  const gridRef = useRef<AgGridReact | null>(null);
+  const update = useCallback(
+    (delta: Markets_markets_data) => {
+      const update: Markets_markets[] = [];
+      const add: Markets_markets[] = [];
+      if (!gridRef.current) {
+        return false;
+      }
+      const rowNode = gridRef.current.api.getRowNode(
+        getRowNodeId(delta.market)
+      );
+      if (rowNode) {
+        const updatedData = produce<Markets_markets_data>(
+          rowNode.data.data,
+          (draft: Markets_markets_data) => merge(draft, delta)
+        );
+        if (updatedData !== rowNode.data.data) {
+          update.push({ ...rowNode.data, data: updatedData });
+        }
+      }
+      // @TODO - else add new market
+      if (update.length || add.length) {
+        gridRef.current.api.applyTransactionAsync({
+          update,
+          add,
+          addIndex: 0,
+        });
+      }
+      return true;
+    },
+    [gridRef]
+  );
+  const { data, error, loading } = useDataProvider<
+    Markets_markets,
+    Markets_markets_data
+  >(marketsDataProvider, update);
+
+  return (
+    <AsyncRenderer loading={loading} error={error} data={data}>
+      {(data) => (
+        <MarketListTable
+          ref={gridRef}
+          data={data}
+          onRowClicked={(id) =>
+            push(`${pathname}/${id}?portfolio=orders&trade=orderbook`)
+          }
+        />
+      )}
+    </AsyncRenderer>
+  );
+};

libs/market-list/src/lib/markets-data-provider.ts

@@ -1,11 +1,11 @@
 import { gql } from '@apollo/client';
-import { Markets, Markets_markets } from '../__generated__/Markets';
-import { makeDataProvider } from './generic-data-provider';
+import { Markets, Markets_markets } from './__generated__/Markets';
+import { makeDataProvider } from '@vegaprotocol/react-helpers';
 
 import {
   MarketDataSub,
   MarketDataSub_marketData,
-} from '../__generated__/MarketDataSub';
+} from './__generated__/MarketDataSub';
 
 const MARKET_DATA_FRAGMENT = gql`
   fragment MarketDataFields on MarketData {

libs/order-list/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
+  "ignorePatterns": ["!**/*", "__generated__"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

libs/order-list/src/__generated__/OrderFields.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderType, Side, OrderStatus, OrderRejectionReason, OrderTimeInForce } from "./globalTypes";
+import { OrderType, Side, OrderStatus, OrderRejectionReason, OrderTimeInForce } from "./../../../graphql/src/__generated__/globalTypes";
 
 // ====================================================
 // GraphQL fragment: OrderFields

libs/order-list/src/__generated__/OrderSub.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderType, Side, OrderStatus, OrderRejectionReason, OrderTimeInForce } from "./globalTypes";
+import { OrderType, Side, OrderStatus, OrderRejectionReason, OrderTimeInForce } from "./../../../graphql/src/__generated__/globalTypes";
 
 // ====================================================
 // GraphQL subscription operation: OrderSub

libs/order-list/src/__generated__/Orders.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderType, Side, OrderStatus, OrderRejectionReason, OrderTimeInForce } from "./globalTypes";
+import { OrderType, Side, OrderStatus, OrderRejectionReason, OrderTimeInForce } from "./../../../graphql/src/__generated__/globalTypes";
 
 // ====================================================
 // GraphQL query operation: Orders

libs/order-list/src/index.ts

@@ -1 +1,2 @@
 export * from './order-list';
+export * from './order-list-container';

libs/order-list/src/order-list-container.spec.tsx

@@ -1,9 +1,9 @@
-import { OrderListContainer } from './order-list-container';
-import * as useOrdersHook from '../../hooks/use-orders';
 import { render, screen } from '@testing-library/react';
-import { Orders_party_orders } from '@vegaprotocol/graphql';
+import { OrderListContainer } from './order-list-container';
+import * as useOrdersHook from './use-orders';
+import { Orders_party_orders } from './__generated__/Orders';
 
-jest.mock('@vegaprotocol/order-list', () => ({
+jest.mock('./order-list', () => ({
   OrderList: () => <div>OrderList</div>,
 }));
 
@@ -30,12 +30,12 @@ test('Renders an error state', () => {
   ).toBeInTheDocument();
 });
 
-test('Renders the order list if orders provided', () => {
+test('Renders the order list if orders provided', async () => {
   jest.spyOn(useOrdersHook, 'useOrders').mockReturnValue({
     orders: [{ id: '1' } as Orders_party_orders],
     loading: false,
     error: null,
   });
   render(<OrderListContainer />);
-  expect(screen.getByText('OrderList')).toBeInTheDocument();
+  expect(await screen.findByText('OrderList')).toBeInTheDocument();
 });

libs/order-list/src/order-list-container.tsx

@@ -1,7 +1,7 @@
-import { useOrders } from '../../hooks/use-orders';
-import { OrderList } from '@vegaprotocol/order-list';
-import { AsyncRenderer } from '../async-renderer';
-import { OrderFields } from '@vegaprotocol/graphql';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { useOrders } from './use-orders';
+import { OrderList } from './order-list';
+import { OrderFields } from './__generated__/OrderFields';
 
 export const OrderListContainer = () => {
   const { orders, loading, error } = useOrders();

libs/order-list/src/order-list.spec.tsx

@@ -1,6 +1,6 @@
 import { act, render, screen } from '@testing-library/react';
 import { formatNumber, getDateTimeFormat } from '@vegaprotocol/react-helpers';
-import { Orders_party_orders } from '@vegaprotocol/graphql';
+import { Orders_party_orders } from './__generated__/Orders';
 import {
   OrderStatus,
   OrderTimeInForce,

libs/order-list/src/order-list.tsx

@@ -1,9 +1,5 @@
-import {
-  Orders_party_orders,
-  OrderTimeInForce,
-  OrderStatus,
-  Side,
-} from '@vegaprotocol/graphql';
+import { OrderTimeInForce, OrderStatus, Side } from '@vegaprotocol/graphql';
+import { Orders_party_orders } from './__generated__/Orders';
 import {
   formatNumber,
   getDateTimeFormat,

libs/order-list/src/use-orders.spec.tsx

@@ -1,13 +1,13 @@
 import { MockedProvider, MockedResponse } from '@apollo/client/testing';
 import { renderHook } from '@testing-library/react-hooks';
+import { OrderFields } from './__generated__/OrderFields';
+import { Orders } from './__generated__/Orders';
+import { OrderSub } from './__generated__/OrderSub';
 import {
-  OrderFields,
-  Orders,
   OrderStatus,
-  OrderSub,
-  OrderTimeInForce,
-  OrderType,
   Side,
+  OrderType,
+  OrderTimeInForce,
 } from '@vegaprotocol/graphql';
 import {
   VegaKeyExtended,

libs/order-list/src/use-orders.ts

@@ -1,15 +1,11 @@
-import { gql, useApolloClient } from '@apollo/client';
 import { useCallback, useEffect, useState } from 'react';
-import {
-  OrderSub,
-  OrderSubVariables,
-  Orders,
-  OrdersVariables,
-  OrderFields,
-} from '@vegaprotocol/graphql';
+import { gql, useApolloClient } from '@apollo/client';
 import uniqBy from 'lodash/uniqBy';
 import orderBy from 'lodash/orderBy';
 import { useVegaWallet } from '@vegaprotocol/wallet';
+import { Orders, OrdersVariables } from './__generated__/Orders';
+import { OrderSub, OrderSubVariables } from './__generated__/OrderSub';
+import { OrderFields } from './__generated__/OrderFields';
 
 const ORDER_FRAGMENT = gql`
   fragment OrderFields on Order {

libs/positions/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
+  "ignorePatterns": ["!**/*", "__generated__"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

libs/positions/src/index.ts

@@ -1 +1,3 @@
 export * from './lib/positions-table';
+export * from './lib/positions-container';
+export * from './lib/positions-data-provider';

libs/positions/src/lib/__generated__/PositionDetails.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { MarketTradingMode } from "./globalTypes";
+import { MarketTradingMode } from "./../../../../graphql/src/__generated__/globalTypes";
 
 // ====================================================
 // GraphQL fragment: PositionDetails

libs/positions/src/lib/__generated__/PositionSubscribe.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { MarketTradingMode } from "./globalTypes";
+import { MarketTradingMode } from "./../../../../graphql/src/__generated__/globalTypes";
 
 // ====================================================
 // GraphQL subscription operation: PositionSubscribe

libs/positions/src/lib/__generated__/Positions.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { MarketTradingMode } from "./globalTypes";
+import { MarketTradingMode } from "./../../../../graphql/src/__generated__/globalTypes";
 
 // ====================================================
 // GraphQL query operation: Positions

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

@@ -2,19 +2,17 @@ import { useRef, useCallback, useMemo } from 'react';
 import { produce } from 'immer';
 import merge from 'lodash/merge';
 import { useRouter } from 'next/router';
-import { AsyncRenderer } from '../../components/async-renderer';
-import { PositionsTable, getRowNodeId } from '@vegaprotocol/positions';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { useDataProvider } from '@vegaprotocol/react-helpers';
-import {
-  Positions_party_positions,
-  PositionSubscribe_positions,
-  positionsDataProvider,
-} from '@vegaprotocol/graphql';
 import { useVegaWallet } from '@vegaprotocol/wallet';
+import { PositionSubscribe_positions } from './__generated__/PositionSubscribe';
+import { Positions_party_positions } from './__generated__/Positions';
 
 import type { AgGridReact } from 'ag-grid-react';
+import PositionsTable, { getRowNodeId } from './positions-table';
+import { positionsDataProvider } from './positions-data-provider';
 
-export const Positions = () => {
+export const PositionsContainer = () => {
   const { pathname, push } = useRouter();
   const gridRef = useRef<AgGridReact | null>(null);
   const { keypair } = useVegaWallet();

libs/positions/src/lib/positions-data-provider.ts

@@ -2,13 +2,13 @@ import { gql } from '@apollo/client';
 import {
   Positions,
   Positions_party_positions,
-} from '../__generated__/Positions';
-import { makeDataProvider } from './generic-data-provider';
+} from './__generated__/Positions';
+import { makeDataProvider } from '@vegaprotocol/react-helpers';
 
 import {
   PositionSubscribe,
   PositionSubscribe_positions,
-} from '../__generated__/PositionSubscribe';
+} from './__generated__/PositionSubscribe';
 
 const POSITIONS_FRAGMENT = gql`
   fragment PositionDetails on Position {

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

@@ -1,9 +1,7 @@
 import { act, render, screen } from '@testing-library/react';
 import PositionsTable from './positions-table';
-import {
-  Positions_party_positions,
-  MarketTradingMode,
-} from '@vegaprotocol/graphql';
+import { Positions_party_positions } from './__generated__/Positions';
+import { MarketTradingMode } from '@vegaprotocol/graphql';
 
 const singleRow: Positions_party_positions = {
   realisedPNL: '5',

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

@@ -10,10 +10,8 @@ import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
 import { AgGridColumn } from 'ag-grid-react';
 import type { AgGridReact } from 'ag-grid-react';
 import compact from 'lodash/compact';
-import {
-  Positions_party_positions,
-  MarketTradingMode,
-} from '@vegaprotocol/graphql';
+import { Positions_party_positions } from './__generated__/Positions';
+import { MarketTradingMode } from '@vegaprotocol/graphql';
 
 interface PositionsTableProps {
   data: Positions_party_positions[] | null;

libs/react-helpers/src/hooks/use-data-provider.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { useApolloClient } from '@apollo/client';
 import type { OperationVariables } from '@apollo/client';
-import type { Subscribe } from '@vegaprotocol/graphql';
+import type { Subscribe } from '../lib/generic-data-provider';
 
 export function useDataProvider<Data, Delta>(
   dataProvider: Subscribe<Data, Delta>,

libs/react-helpers/src/index.ts

@@ -4,5 +4,6 @@ export * from './lib/decimals';
 export * from './lib/format';
 export * from './lib/grid-cells';
 export * from './lib/storage';
+export * from './lib/generic-data-provider';
 
 export * from './hooks';

libs/ui-toolkit/src/components/async-renderer/async-renderer.tsx

@@ -1,4 +1,4 @@
-import { Splash } from '@vegaprotocol/ui-toolkit';
+import { Splash } from '../splash';
 import { ReactNode } from 'react';
 
 interface AsyncRendererProps<T> {

libs/ui-toolkit/src/index.ts

@@ -2,6 +2,7 @@ import * as EthereumUtils from './utils/web3';
 
 // Components
 export { AgGridLazy, AgGridDynamic } from './components/ag-grid';
+export { AsyncRenderer } from './components/async-renderer';
 export { Button, AnchorButton } from './components/button';
 export { Callout } from './components/callout';
 export { EthereumUtils };

libs/wallet/src/index.ts

@@ -5,3 +5,4 @@ export * from './connect-dialog';
 export * from './connectors';
 export * from './storage-keys';
 export * from './types';
+export * from './use-vega-transaction';

libs/wallet/src/use-vega-transaction.spec.tsx

@@ -1,11 +1,8 @@
 import { act, renderHook } from '@testing-library/react-hooks';
-import {
-  OrderSubmission,
-  VegaWalletContext,
-  VegaWalletContextShape,
-} from '@vegaprotocol/wallet';
+import { VegaWalletContext, VegaWalletContextShape } from './context';
 import { ReactNode } from 'react';
 import { useVegaTransaction, VegaTxStatus } from './use-vega-transaction';
+import { OrderSubmission } from './types';
 
 const defaultWalletContext = {
   keypair: null,

libs/wallet/src/use-vega-transaction.ts

@@ -1,5 +1,7 @@
 import { useCallback, useState } from 'react';
-import { useVegaWallet, SendTxError, Transaction } from '@vegaprotocol/wallet';
+import { Transaction } from './types';
+import { useVegaWallet } from './hooks';
+import { SendTxError } from './context';
 
 export enum VegaTxStatus {
   Default = 'Default',