#29 Add market-list-table

.gitignore

@@ -37,3 +37,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+.local.env
+.env.local

.prettierignore

@@ -2,3 +2,4 @@
 
 /dist
 /coverage
+__generated__

apps/explorer/project.json

@@ -66,16 +66,6 @@
         "passWithNoTests": true
       }
     },
-    "generate": {
-      "builder": "@nrwl/workspace:run-commands",
-      "options": {
-        "commands": [
-          {
-            "command": "npx apollo codegen:generate --config=apps/explorer/apollo.config.js --target=typescript --globalTypesFile=apps/explorer/src/__generated__/globalTypes.ts"
-          }
-        ]
-      }
-    },
     "build-netlify": {
       "builder": "@nrwl/workspace:run-commands",
       "options": {

apps/explorer/src/app/__generated__/globalTypes.ts

@@ -1,126 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-//==============================================================
-// START Enums and Input Objects
-//==============================================================
-
-/**
- * The various account types we have (used by collateral)
- */
-export enum AccountType {
-  Bond = "Bond",
-  FeeInfrastructure = "FeeInfrastructure",
-  FeeLiquidity = "FeeLiquidity",
-  General = "General",
-  GlobalInsurance = "GlobalInsurance",
-  Insurance = "Insurance",
-  LockWithdraw = "LockWithdraw",
-  Margin = "Margin",
-  Settlement = "Settlement",
-}
-
-export enum AuctionTrigger {
-  Batch = "Batch",
-  Liquidity = "Liquidity",
-  Opening = "Opening",
-  Price = "Price",
-  Unspecified = "Unspecified",
-}
-
-/**
- * The current state of a market
- */
-export enum MarketState {
-  Active = "Active",
-  Cancelled = "Cancelled",
-  Closed = "Closed",
-  Pending = "Pending",
-  Proposed = "Proposed",
-  Rejected = "Rejected",
-  Settled = "Settled",
-  Suspended = "Suspended",
-  TradingTerminated = "TradingTerminated",
-}
-
-/**
- * What market trading mode are we in
- */
-export enum MarketTradingMode {
-  BatchAuction = "BatchAuction",
-  Continuous = "Continuous",
-  MonitoringAuction = "MonitoringAuction",
-  OpeningAuction = "OpeningAuction",
-}
-
-export enum NodeStatus {
-  NonValidator = "NonValidator",
-  Validator = "Validator",
-}
-
-/**
- * Reason for the proposal being rejected by the core node
- */
-export enum ProposalRejectionReason {
-  CloseTimeTooLate = "CloseTimeTooLate",
-  CloseTimeTooSoon = "CloseTimeTooSoon",
-  CouldNotInstantiateMarket = "CouldNotInstantiateMarket",
-  EnactTimeTooLate = "EnactTimeTooLate",
-  EnactTimeTooSoon = "EnactTimeTooSoon",
-  IncompatibleTimestamps = "IncompatibleTimestamps",
-  InsufficientTokens = "InsufficientTokens",
-  InvalidAsset = "InvalidAsset",
-  InvalidAssetDetails = "InvalidAssetDetails",
-  InvalidFeeAmount = "InvalidFeeAmount",
-  InvalidFutureMaturityTimestamp = "InvalidFutureMaturityTimestamp",
-  InvalidFutureProduct = "InvalidFutureProduct",
-  InvalidInstrumentSecurity = "InvalidInstrumentSecurity",
-  InvalidRiskParameter = "InvalidRiskParameter",
-  InvalidShape = "InvalidShape",
-  MajorityThresholdNotReached = "MajorityThresholdNotReached",
-  MarketMissingLiquidityCommitment = "MarketMissingLiquidityCommitment",
-  MissingBuiltinAssetField = "MissingBuiltinAssetField",
-  MissingCommitmentAmount = "MissingCommitmentAmount",
-  MissingERC20ContractAddress = "MissingERC20ContractAddress",
-  NetworkParameterInvalidKey = "NetworkParameterInvalidKey",
-  NetworkParameterInvalidValue = "NetworkParameterInvalidValue",
-  NetworkParameterValidationFailed = "NetworkParameterValidationFailed",
-  NoProduct = "NoProduct",
-  NoRiskParameters = "NoRiskParameters",
-  NoTradingMode = "NoTradingMode",
-  NodeValidationFailed = "NodeValidationFailed",
-  OpeningAuctionDurationTooLarge = "OpeningAuctionDurationTooLarge",
-  OpeningAuctionDurationTooSmall = "OpeningAuctionDurationTooSmall",
-  ParticipationThresholdNotReached = "ParticipationThresholdNotReached",
-  ProductMaturityIsPassed = "ProductMaturityIsPassed",
-  UnsupportedProduct = "UnsupportedProduct",
-  UnsupportedTradingMode = "UnsupportedTradingMode",
-}
-
-/**
- * Various states a proposal can transition through:
- * Open ->
- * - Passed -> Enacted.
- * - Rejected.
- * Proposal can enter Failed state from any other state.
- */
-export enum ProposalState {
-  Declined = "Declined",
-  Enacted = "Enacted",
-  Failed = "Failed",
-  Open = "Open",
-  Passed = "Passed",
-  Rejected = "Rejected",
-  WaitingForNodeVote = "WaitingForNodeVote",
-}
-
-export enum VoteValue {
-  No = "No",
-  Yes = "Yes",
-}
-
-//==============================================================
-// END Enums and Input Objects
-//==============================================================

apps/explorer/src/app/components/search/index.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import debounce from 'lodash.debounce';
-import { Guess, GuessVariables } from './__generated__/Guess';
+import { Guess, GuessVariables } from '@vegaprotocol/graphql';
 
 const TX_LENGTH = 64;
 

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

@@ -1,7 +1,7 @@
 import { gql, useQuery } from '@apollo/client';
 import React from 'react';
 import { SyntaxHighlighter } from '../../components/syntax-highlighter';
-import { AssetsQuery } from './__generated__/AssetsQuery';
+import { AssetsQuery } from '@vegaprotocol/graphql';
 
 export const ASSETS_QUERY = gql`
   query AssetsQuery {

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

@@ -34,10 +34,7 @@ const Block = () => {
         <TableRow modifier="bordered">
           <TableHeader scope="row">Mined by</TableHeader>
           <TableCell modifier="bordered">
-            <Link
-              className="text-vega-yellow"
-              to={"/validators"}
-            >
+            <Link className="text-vega-yellow" to={'/validators'}>
               {header.proposer_address}
             </Link>
           </TableCell>

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { gql, useQuery } from '@apollo/client';
-import { NetworkParametersQuery } from './__generated__/NetworkParametersQuery';
+import { NetworkParametersQuery } from '@vegaprotocol/graphql';
 
 export const NETWORK_PARAMETERS_QUERY = gql`
   query NetworkParametersQuery {

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

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

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

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

apps/trading/.eslintrc.json

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

apps/trading/apollo.config.js

@@ -1,9 +0,0 @@
-module.exports = {
-  client: {
-    service: {
-      name: 'vega',
-      url: process.env.NX_VEGA_URL,
-    },
-    includes: ['{components,lib,pages,hooks}/**/*.{ts,tsx,js,jsx,graphql}'],
-  },
-};

apps/trading/hooks/use-markets.ts

@@ -0,0 +1,131 @@
+import { gql, useApolloClient } from '@apollo/client';
+import { singletonHook } from 'react-singleton-hook';
+import {
+  Markets,
+  Markets_markets,
+  MarketDataSub,
+  MarketDataSub_marketData,
+} from '@vegaprotocol/graphql';
+import { useCallback, useEffect, useState } from 'react';
+
+const MARKET_DATA_FRAGMENT = gql`
+  fragment MarketDataFields on MarketData {
+    market {
+      id
+      state
+      tradingMode
+    }
+    bestBidPrice
+    bestOfferPrice
+    markPrice
+  }
+`;
+
+const MARKETS_QUERY = gql`
+  ${MARKET_DATA_FRAGMENT}
+  query Markets {
+    markets {
+      id
+      name
+      decimalPlaces
+      data {
+        ...MarketDataFields
+      }
+      tradableInstrument {
+        instrument {
+          code
+          product {
+            ... on Future {
+              settlementAsset {
+                symbol
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+const MARKET_DATA_SUB = gql`
+  ${MARKET_DATA_FRAGMENT}
+  subscription MarketDataSub {
+    marketData {
+      ...MarketDataFields
+    }
+  }
+`;
+
+export const useMarketsImpl = () => {
+  const client = useApolloClient();
+  const [markets, setMarkets] = useState<Markets_markets[]>([]);
+  const [error, setError] = useState<Error | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const mergeMarketData = useCallback((update: MarketDataSub_marketData) => {
+    setMarkets((curr) => {
+      return curr.map((m) => {
+        if (update.market.id === m.id) {
+          return {
+            ...m,
+            data: update,
+          };
+        }
+
+        return m;
+      });
+    });
+  }, []);
+
+  // Make initial fetch
+  useEffect(() => {
+    const fetchOrders = async () => {
+      setLoading(true);
+
+      try {
+        const res = await client.query<Markets>({
+          query: MARKETS_QUERY,
+        });
+
+        if (!res.data.markets?.length) return;
+
+        setMarkets(res.data.markets);
+      } catch (err) {
+        setError(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchOrders();
+  }, [mergeMarketData, client]);
+
+  // Start subscription
+  useEffect(() => {
+    const sub = client
+      // This data callback will unfortunately be called separately with an update for every market,
+      // perhaps we should batch this somehow...
+      .subscribe<MarketDataSub>({
+        query: MARKET_DATA_SUB,
+      })
+      .subscribe(({ data }) => {
+        mergeMarketData(data.marketData);
+      });
+
+    return () => {
+      if (sub) {
+        sub.unsubscribe();
+      }
+    };
+  }, [client, mergeMarketData]);
+
+  return { markets, error, loading };
+};
+
+const initial = {
+  markets: [],
+  error: null,
+  loading: false,
+};
+
+export const useMarkets = singletonHook(initial, useMarketsImpl);

apps/trading/lib/apollo-client.ts

@@ -23,13 +23,18 @@ export function createClient(base?: string) {
 
   const cache = new InMemoryCache({
     typePolicies: {
-      Query: {},
       Account: {
         keyFields: false,
         fields: {
           balanceFormatted: {},
         },
       },
+      Instrument: {
+        keyFields: false,
+      },
+      MarketData: {
+        keyFields: ['market', ['id']],
+      },
       Node: {
         keyFields: false,
       },

apps/trading/pages/_app.page.tsx

@@ -5,6 +5,7 @@ import { ThemeContext } from '@vegaprotocol/react-helpers';
 import { VegaConnectDialog, VegaWalletProvider } from '@vegaprotocol/wallet';
 import { Connectors } from '../lib/connectors';
 import { useCallback, useMemo, useState } from 'react';
+import { SingletonHooksContainer } from 'react-singleton-hook';
 import { createClient } from '../lib/apollo-client';
 import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
 import { ApolloProvider } from '@apollo/client';
@@ -17,9 +18,7 @@ import './styles.css';
 function VegaTradingApp({ Component, pageProps }: AppProps) {
   const client = useMemo(
     () =>
-      createClient(
-        process.env['NX_VEGA_URL'] || 'https://n03.stagnet2.vega.xyz'
-      ),
+      createClient(process.env['NX_VEGA_URL'] || 'https://lb.testnet.vega.xyz'),
     []
   );
   const [dialogOpen, setDialogOpen] = useState(false);
@@ -36,6 +35,7 @@ function VegaTradingApp({ Component, pageProps }: AppProps) {
     <ThemeContext.Provider value={theme}>
       <ApolloProvider client={client}>
         <VegaWalletProvider>
+          <SingletonHooksContainer />
           <AppLoader>
             <Head>
               <title>Welcome to trading!</title>

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

@@ -1,40 +1,28 @@
-import { gql } from '@apollo/client';
 import { Markets } from '@vegaprotocol/graphql';
-import { PageQueryContainer } from '../../components/page-query-container';
-import Link from 'next/link';
 import { useRouter } from 'next/router';
-
-const MARKETS_QUERY = gql`
-  query Markets {
-    markets {
-      id
-    }
-  }
-`;
+import { MarketListTable } from '@vegaprotocol/market-list';
+import { useMarkets } from '../../hooks/use-markets';
+import { Splash } from '@vegaprotocol/ui-toolkit';
 
 const Markets = () => {
-  const { pathname } = useRouter();
+  const { pathname, push } = useRouter();
+  const { markets, error, loading } = useMarkets();
+
+  if (error) {
+    return <Splash>Something went wrong: {error.message}</Splash>;
+  }
+
+  if (loading) {
+    return <Splash>Loading...</Splash>;
+  }
 
   return (
-    <PageQueryContainer<Markets> query={MARKETS_QUERY}>
-      {(data) => (
-        <>
-          <h1>Markets</h1>
-          <ul>
-            {data.markets.map((m) => (
-              <li key={m.id}>
-                <Link
-                  href={`${pathname}/${m.id}?portfolio=orders&trade=orderbook`}
-                  passHref={true}
-                >
-                  <a>View market: {m.id}</a>
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </>
-      )}
-    </PageQueryContainer>
+    <MarketListTable
+      markets={markets}
+      onRowClicked={(id) =>
+        push(`${pathname}/${id}?portfolio=orders&trade=orderbook`)
+      }
+    />
   );
 };
 

apps/trading/project.json

@@ -48,16 +48,6 @@
       "options": {
         "lintFilePatterns": ["apps/trading/**/*.{ts,tsx,js,jsx}"]
       }
-    },
-    "generate": {
-      "builder": "@nrwl/workspace:run-commands",
-      "options": {
-        "commands": [
-          {
-            "command": "npx apollo client:codegen libs/graphql/src/lib/ --config=apps/trading/apollo.config.js --target=typescript --globalTypesFile=libs/graphql/src/lib/globalTypes.ts --outputFlat"
-          }
-        ]
-      }
     }
   },
   "tags": []

apps/trading/tsconfig.json

@@ -14,5 +14,5 @@
     "incremental": true
   },
   "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "next-env.d.ts"],
-  "exclude": ["node_modules", "__generated__"]
+  "exclude": ["node_modules"]
 }

libs/graphql/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/graphql/.eslintrc.json

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

libs/graphql/README.md

@@ -2,6 +2,6 @@
 
 This library was generated with [Nx](https://nx.dev).
 
-## Building
+## Running unit tests
 
-Run `nx build graphql` to build the library.
+Run `nx test graphql` to execute the unit tests via [Jest](https://jestjs.io).

libs/graphql/apollo.config.js

@@ -4,5 +4,6 @@ module.exports = {
       name: 'vega',
       url: process.env.NX_VEGA_URL,
     },
+    includes: ['../../{apps,lib}/**/*.{ts,tsx,js,jsx,graphql}'],
   },
 };

libs/graphql/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  displayName: 'graphql',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': 'babel-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/libs/graphql',
+};

libs/graphql/package.json

@@ -1,5 +1,4 @@
 {
   "name": "@vegaprotocol/graphql",
-  "version": "0.0.1",
-  "type": "commonjs"
+  "version": "0.0.1"
 }

libs/graphql/project.json

@@ -2,17 +2,52 @@
   "root": "libs/graphql",
   "sourceRoot": "libs/graphql/src",
   "projectType": "library",
+  "tags": [],
   "targets": {
     "build": {
-      "executor": "@nrwl/js:tsc",
+      "executor": "@nrwl/web:rollup",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/libs/graphql",
-        "main": "libs/graphql/src/index.ts",
         "tsConfig": "libs/graphql/tsconfig.lib.json",
-        "assets": ["libs/graphql/*.md"]
+        "project": "libs/graphql/package.json",
+        "entryFile": "libs/graphql/src/index.ts",
+        "external": ["react/jsx-runtime"],
+        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+        "compiler": "babel",
+        "assets": [
+          {
+            "glob": "libs/graphql/README.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/graphql/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/libs/graphql"],
+      "options": {
+        "jestConfig": "libs/graphql/jest.config.js",
+        "passWithNoTests": true
+      }
+    },
+    "generate": {
+      "builder": "@nrwl/workspace:run-commands",
+      "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"
+          }
+        ]
       }
     }
-  },
-  "tags": []
+  }
 }

libs/graphql/src/__generated__/AssetsQuery.ts

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

libs/graphql/src/__generated__/Market.ts

@@ -3,14 +3,14 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { MarketState, MarketTradingMode } from './globalTypes';
+import { MarketState, MarketTradingMode } from "./globalTypes";
 
 // ====================================================
 // GraphQL query operation: Market
 // ====================================================
 
 export interface Market_market_tradableInstrument_instrument_product_settlementAsset {
-  __typename: 'Asset';
+  __typename: "Asset";
   /**
    * The id of the asset
    */
@@ -26,7 +26,7 @@ export interface Market_market_tradableInstrument_instrument_product_settlementA
 }
 
 export interface Market_market_tradableInstrument_instrument_product {
-  __typename: 'Future';
+  __typename: "Future";
   /**
    * String representing the quote (e.g. BTCUSD -> USD is quote)
    */
@@ -38,7 +38,7 @@ export interface Market_market_tradableInstrument_instrument_product {
 }
 
 export interface Market_market_tradableInstrument_instrument {
-  __typename: 'Instrument';
+  __typename: "Instrument";
   /**
    * A reference to or instance of a fully specified product, including all required product parameters for that product (Product union)
    */
@@ -46,7 +46,7 @@ export interface Market_market_tradableInstrument_instrument {
 }
 
 export interface Market_market_tradableInstrument {
-  __typename: 'TradableInstrument';
+  __typename: "TradableInstrument";
   /**
    * An instance of or reference to a fully specified instrument.
    */
@@ -54,7 +54,7 @@ export interface Market_market_tradableInstrument {
 }
 
 export interface Market_market_trades {
-  __typename: 'Trade';
+  __typename: "Trade";
   /**
    * The hash of the trade data
    */
@@ -74,7 +74,7 @@ export interface Market_market_trades {
 }
 
 export interface Market_market_depth_lastTrade {
-  __typename: 'Trade';
+  __typename: "Trade";
   /**
    * The price of the trade (probably initially the passive order price, other determination algorithms are possible though) (uint64)
    */
@@ -82,7 +82,7 @@ export interface Market_market_depth_lastTrade {
 }
 
 export interface Market_market_depth {
-  __typename: 'MarketDepth';
+  __typename: "MarketDepth";
   /**
    * Last trade for the given market (if available)
    */
@@ -90,7 +90,7 @@ export interface Market_market_depth {
 }
 
 export interface Market_market {
-  __typename: 'Market';
+  __typename: "Market";
   /**
    * Market ID
    */
@@ -102,14 +102,14 @@ export interface Market_market {
   /**
    * 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  )

libs/graphql/src/__generated__/MarketDataFields.ts

@@ -0,0 +1,46 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { MarketState, MarketTradingMode } from "./globalTypes";
+
+// ====================================================
+// GraphQL fragment: MarketDataFields
+// ====================================================
+
+export interface MarketDataFields_market {
+  __typename: "Market";
+  /**
+   * Market ID
+   */
+  id: string;
+  /**
+   * Current state of the market
+   */
+  state: MarketState;
+  /**
+   * Current mode of execution of the market
+   */
+  tradingMode: MarketTradingMode;
+}
+
+export interface MarketDataFields {
+  __typename: "MarketData";
+  /**
+   * market id of the associated mark price
+   */
+  market: MarketDataFields_market;
+  /**
+   * the highest price level on an order book for buy orders.
+   */
+  bestBidPrice: string;
+  /**
+   * the lowest price level on an order book for offer orders.
+   */
+  bestOfferPrice: string;
+  /**
+   * the mark price (actually an unsigned int)
+   */
+  markPrice: string;
+}

libs/graphql/src/__generated__/MarketDataSub.ts

@@ -0,0 +1,53 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { MarketState, MarketTradingMode } from "./globalTypes";
+
+// ====================================================
+// GraphQL subscription operation: MarketDataSub
+// ====================================================
+
+export interface MarketDataSub_marketData_market {
+  __typename: "Market";
+  /**
+   * Market ID
+   */
+  id: string;
+  /**
+   * Current state of the market
+   */
+  state: MarketState;
+  /**
+   * Current mode of execution of the market
+   */
+  tradingMode: MarketTradingMode;
+}
+
+export interface MarketDataSub_marketData {
+  __typename: "MarketData";
+  /**
+   * market id of the associated mark price
+   */
+  market: MarketDataSub_marketData_market;
+  /**
+   * the highest price level on an order book for buy orders.
+   */
+  bestBidPrice: string;
+  /**
+   * the lowest price level on an order book for offer orders.
+   */
+  bestOfferPrice: string;
+  /**
+   * the mark price (actually an unsigned int)
+   */
+  markPrice: string;
+}
+
+export interface MarketDataSub {
+  /**
+   * Subscribe to the mark price changes
+   */
+  marketData: MarketDataSub_marketData;
+}

libs/graphql/src/__generated__/Markets.ts

@@ -0,0 +1,126 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { MarketState, MarketTradingMode } from "./globalTypes";
+
+// ====================================================
+// GraphQL query operation: Markets
+// ====================================================
+
+export interface Markets_markets_data_market {
+  __typename: "Market";
+  /**
+   * Market ID
+   */
+  id: string;
+  /**
+   * Current state of the market
+   */
+  state: MarketState;
+  /**
+   * Current mode of execution of the market
+   */
+  tradingMode: MarketTradingMode;
+}
+
+export interface Markets_markets_data {
+  __typename: "MarketData";
+  /**
+   * market id of the associated mark price
+   */
+  market: Markets_markets_data_market;
+  /**
+   * the highest price level on an order book for buy orders.
+   */
+  bestBidPrice: string;
+  /**
+   * the lowest price level on an order book for offer orders.
+   */
+  bestOfferPrice: string;
+  /**
+   * the mark price (actually an unsigned int)
+   */
+  markPrice: string;
+}
+
+export interface Markets_markets_tradableInstrument_instrument_product_settlementAsset {
+  __typename: "Asset";
+  /**
+   * The symbol of the asset (e.g: GBP)
+   */
+  symbol: string;
+}
+
+export interface Markets_markets_tradableInstrument_instrument_product {
+  __typename: "Future";
+  /**
+   * The name of the asset (string)
+   */
+  settlementAsset: Markets_markets_tradableInstrument_instrument_product_settlementAsset;
+}
+
+export interface Markets_markets_tradableInstrument_instrument {
+  __typename: "Instrument";
+  /**
+   * A short non necessarily unique code used to easily describe the instrument (e.g: FX:BTCUSD/DEC18) (string)
+   */
+  code: string;
+  /**
+   * A reference to or instance of a fully specified product, including all required product parameters for that product (Product union)
+   */
+  product: Markets_markets_tradableInstrument_instrument_product;
+}
+
+export interface Markets_markets_tradableInstrument {
+  __typename: "TradableInstrument";
+  /**
+   * An instance of or reference to a fully specified instrument.
+   */
+  instrument: Markets_markets_tradableInstrument_instrument;
+}
+
+export interface Markets_markets {
+  __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;
+  /**
+   * marketData for the given market
+   */
+  data: Markets_markets_data | null;
+  /**
+   * An instance of or reference to a tradable instrument.
+   */
+  tradableInstrument: Markets_markets_tradableInstrument;
+}
+
+export interface Markets {
+  /**
+   * One or more instruments that are trading on the VEGA network
+   */
+  markets: Markets_markets[] | null;
+}

libs/graphql/src/__generated__/MarketsQuery.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { MarketTradingMode, MarketState, AccountType, AuctionTrigger } from "./../../../../__generated__/globalTypes";
+import { MarketTradingMode, MarketState, AccountType, AuctionTrigger } from "./globalTypes";
 
 // ====================================================
 // GraphQL query operation: MarketsQuery
@@ -92,7 +92,7 @@ export interface MarketsQuery_markets_tradableInstrument_instrument {
    */
   metadata: MarketsQuery_markets_tradableInstrument_instrument_metadata;
   /**
-   * Uniquely identify an instrument accrods all instruments available on Vega (string)
+   * Uniquely identify an instrument across all instruments available on Vega (string)
    */
   id: string;
   /**
@@ -362,7 +362,7 @@ export interface MarketsQuery_markets_data_liquidityProviderFeeShare {
    */
   equityLikeShare: string;
   /**
-   * the average entry valuation of the liqidity provider for the market
+   * the average entry valuation of the liquidity provider for the market
    */
   averageEntryValuation: string;
 }
@@ -370,7 +370,7 @@ export interface MarketsQuery_markets_data_liquidityProviderFeeShare {
 export interface MarketsQuery_markets_data {
   __typename: "MarketData";
   /**
-   * the mark price (actually an unsgined int)
+   * the mark price (actually an unsigned int)
    */
   markPrice: string;
   /**
@@ -414,7 +414,7 @@ export interface MarketsQuery_markets_data {
    */
   staticMidPrice: string;
   /**
-   * RFC3339Nano time at which this market price was releavant
+   * RFC3339Nano time at which this market price was relevant
    */
   timestamp: string;
   /**

libs/graphql/src/__generated__/NodesQuery.ts

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

libs/graphql/src/__generated__/OrderEvent.ts

@@ -3,47 +3,18 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import {
-  BusEventType,
-  OrderType,
-  OrderStatus,
-  OrderRejectionReason,
-} from './globalTypes';
+import { BusEventType, OrderType, OrderStatus, OrderRejectionReason } from "./globalTypes";
 
 // ====================================================
 // GraphQL subscription operation: OrderEvent
 // ====================================================
 
 export interface OrderEvent_busEvents_event_TimeUpdate {
-  __typename:
-    | 'TimeUpdate'
-    | 'MarketEvent'
-    | 'TransferResponses'
-    | 'PositionResolution'
-    | 'Trade'
-    | 'Account'
-    | 'Party'
-    | 'MarginLevels'
-    | 'Proposal'
-    | 'Vote'
-    | 'MarketData'
-    | 'NodeSignature'
-    | 'LossSocialization'
-    | 'SettlePosition'
-    | 'Market'
-    | 'Asset'
-    | 'MarketTick'
-    | 'SettleDistressed'
-    | 'AuctionEvent'
-    | 'RiskFactor'
-    | 'Deposit'
-    | 'Withdrawal'
-    | 'OracleSpec'
-    | 'LiquidityProvision';
+  __typename: "TimeUpdate" | "MarketEvent" | "TransferResponses" | "PositionResolution" | "Trade" | "Account" | "Party" | "MarginLevels" | "Proposal" | "Vote" | "MarketData" | "NodeSignature" | "LossSocialization" | "SettlePosition" | "Market" | "Asset" | "MarketTick" | "SettleDistressed" | "AuctionEvent" | "RiskFactor" | "Deposit" | "Withdrawal" | "OracleSpec" | "LiquidityProvision";
 }
 
 export interface OrderEvent_busEvents_event_Order_market {
-  __typename: 'Market';
+  __typename: "Market";
   /**
    * Market full name
    */
@@ -51,7 +22,7 @@ export interface OrderEvent_busEvents_event_Order_market {
 }
 
 export interface OrderEvent_busEvents_event_Order {
-  __typename: 'Order';
+  __typename: "Order";
   /**
    * Type the order type (defaults to PARTY)
    */
@@ -86,12 +57,10 @@ export interface OrderEvent_busEvents_event_Order {
   market: OrderEvent_busEvents_event_Order_market | null;
 }
 
-export type OrderEvent_busEvents_event =
-  | OrderEvent_busEvents_event_TimeUpdate
-  | OrderEvent_busEvents_event_Order;
+export type OrderEvent_busEvents_event = OrderEvent_busEvents_event_TimeUpdate | OrderEvent_busEvents_event_Order;
 
 export interface OrderEvent_busEvents {
-  __typename: 'BusEvent';
+  __typename: "BusEvent";
   /**
    * the id for this event
    */

libs/graphql/src/__generated__/PartyAssetsQuery.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountType } from "./../../../../../__generated__/globalTypes";
+import { AccountType } from "./globalTypes";
 
 // ====================================================
 // GraphQL query operation: PartyAssetsQuery
@@ -104,7 +104,7 @@ export interface PartyAssetsQuery_party {
   id: string;
   delegations: PartyAssetsQuery_party_delegations[] | null;
   /**
-   * The staking informations for this Party
+   * The staking information for this Party
    */
   stake: PartyAssetsQuery_party_stake;
   /**

libs/graphql/src/__generated__/ProposalsQuery.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { ProposalState, ProposalRejectionReason, VoteValue } from "./../../../../__generated__/globalTypes";
+import { ProposalState, ProposalRejectionReason, VoteValue } from "./globalTypes";
 
 // ====================================================
 // GraphQL query operation: ProposalsQuery
@@ -17,6 +17,10 @@ export interface ProposalsQuery_proposals_party {
   id: string;
 }
 
+export interface ProposalsQuery_proposals_terms_change_NewFreeform {
+  __typename: "NewFreeform";
+}
+
 export interface ProposalsQuery_proposals_terms_change_NewMarket_instrument {
   __typename: "InstrumentConfiguration";
   /**
@@ -85,7 +89,7 @@ export interface ProposalsQuery_proposals_terms_change_UpdateNetworkParameter {
   networkParameter: ProposalsQuery_proposals_terms_change_UpdateNetworkParameter_networkParameter;
 }
 
-export type ProposalsQuery_proposals_terms_change = ProposalsQuery_proposals_terms_change_NewMarket | ProposalsQuery_proposals_terms_change_UpdateMarket | ProposalsQuery_proposals_terms_change_NewAsset | ProposalsQuery_proposals_terms_change_UpdateNetworkParameter;
+export type ProposalsQuery_proposals_terms_change = ProposalsQuery_proposals_terms_change_NewFreeform | ProposalsQuery_proposals_terms_change_NewMarket | ProposalsQuery_proposals_terms_change_UpdateMarket | ProposalsQuery_proposals_terms_change_NewAsset | ProposalsQuery_proposals_terms_change_UpdateNetworkParameter;
 
 export interface ProposalsQuery_proposals_terms {
   __typename: "ProposalTerms";
@@ -120,7 +124,7 @@ export interface ProposalsQuery_proposals_votes_yes_votes_party {
    */
   id: string;
   /**
-   * The staking informations for this Party
+   * The staking information for this Party
    */
   stake: ProposalsQuery_proposals_votes_yes_votes_party_stake;
 }
@@ -172,7 +176,7 @@ export interface ProposalsQuery_proposals_votes_no_votes_party {
    */
   id: string;
   /**
-   * The staking informations for this Party
+   * The staking information for this Party
    */
   stake: ProposalsQuery_proposals_votes_no_votes_party_stake;
 }

libs/graphql/src/__generated__/globalTypes.ts

@@ -0,0 +1,234 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+//==============================================================
+// START Enums and Input Objects
+//==============================================================
+
+/**
+ * The various account types we have (used by collateral)
+ */
+export enum AccountType {
+  Bond = "Bond",
+  External = "External",
+  FeeInfrastructure = "FeeInfrastructure",
+  FeeLiquidity = "FeeLiquidity",
+  FeeMaker = "FeeMaker",
+  General = "General",
+  GlobalInsurance = "GlobalInsurance",
+  GlobalReward = "GlobalReward",
+  Insurance = "Insurance",
+  LockWithdraw = "LockWithdraw",
+  Margin = "Margin",
+  PendingTransfers = "PendingTransfers",
+  RewardLpReceivedFees = "RewardLpReceivedFees",
+  RewardMakerReceivedFees = "RewardMakerReceivedFees",
+  RewardMarketProposers = "RewardMarketProposers",
+  RewardTakerPaidFees = "RewardTakerPaidFees",
+  Settlement = "Settlement",
+}
+
+export enum AuctionTrigger {
+  Batch = "Batch",
+  Liquidity = "Liquidity",
+  Opening = "Opening",
+  Price = "Price",
+  Unspecified = "Unspecified",
+}
+
+export enum BusEventType {
+  Account = "Account",
+  Asset = "Asset",
+  Auction = "Auction",
+  Deposit = "Deposit",
+  LiquidityProvision = "LiquidityProvision",
+  LossSocialization = "LossSocialization",
+  MarginLevels = "MarginLevels",
+  Market = "Market",
+  MarketCreated = "MarketCreated",
+  MarketData = "MarketData",
+  MarketTick = "MarketTick",
+  MarketUpdated = "MarketUpdated",
+  NodeSignature = "NodeSignature",
+  OracleSpec = "OracleSpec",
+  Order = "Order",
+  Party = "Party",
+  PositionResolution = "PositionResolution",
+  Proposal = "Proposal",
+  RiskFactor = "RiskFactor",
+  SettleDistressed = "SettleDistressed",
+  SettlePosition = "SettlePosition",
+  TimeUpdate = "TimeUpdate",
+  Trade = "Trade",
+  TransferResponses = "TransferResponses",
+  Vote = "Vote",
+  Withdrawal = "Withdrawal",
+}
+
+/**
+ * The current state of a market
+ */
+export enum MarketState {
+  Active = "Active",
+  Cancelled = "Cancelled",
+  Closed = "Closed",
+  Pending = "Pending",
+  Proposed = "Proposed",
+  Rejected = "Rejected",
+  Settled = "Settled",
+  Suspended = "Suspended",
+  TradingTerminated = "TradingTerminated",
+}
+
+/**
+ * What market trading mode are we in
+ */
+export enum MarketTradingMode {
+  BatchAuction = "BatchAuction",
+  Continuous = "Continuous",
+  MonitoringAuction = "MonitoringAuction",
+  OpeningAuction = "OpeningAuction",
+}
+
+export enum NodeStatus {
+  NonValidator = "NonValidator",
+  Validator = "Validator",
+}
+
+/**
+ * Reason for the order being rejected by the core node
+ */
+export enum OrderRejectionReason {
+  AmendToGTTWithoutExpiryAt = "AmendToGTTWithoutExpiryAt",
+  CannotAmendFromGFAOrGFN = "CannotAmendFromGFAOrGFN",
+  CannotAmendPeggedOrderDetailsOnNonPeggedOrder = "CannotAmendPeggedOrderDetailsOnNonPeggedOrder",
+  CannotAmendToFOKOrIOC = "CannotAmendToFOKOrIOC",
+  CannotAmendToGFAOrGFN = "CannotAmendToGFAOrGFN",
+  EditNotAllowed = "EditNotAllowed",
+  ExpiryAtBeforeCreatedAt = "ExpiryAtBeforeCreatedAt",
+  FOKOrderDuringAuction = "FOKOrderDuringAuction",
+  GFAOrderDuringContinuousTrading = "GFAOrderDuringContinuousTrading",
+  GFNOrderDuringAuction = "GFNOrderDuringAuction",
+  GTCWithExpiryAtNotValid = "GTCWithExpiryAtNotValid",
+  IOCOrderDuringAuction = "IOCOrderDuringAuction",
+  InsufficientAssetBalance = "InsufficientAssetBalance",
+  InsufficientFundsToPayFees = "InsufficientFundsToPayFees",
+  InternalError = "InternalError",
+  InvalidExpirationTime = "InvalidExpirationTime",
+  InvalidMarketId = "InvalidMarketId",
+  InvalidMarketType = "InvalidMarketType",
+  InvalidOrderId = "InvalidOrderId",
+  InvalidOrderReference = "InvalidOrderReference",
+  InvalidPartyId = "InvalidPartyId",
+  InvalidPersistence = "InvalidPersistence",
+  InvalidRemainingSize = "InvalidRemainingSize",
+  InvalidSize = "InvalidSize",
+  InvalidTimeInForce = "InvalidTimeInForce",
+  InvalidType = "InvalidType",
+  MarginCheckFailed = "MarginCheckFailed",
+  MarketClosed = "MarketClosed",
+  MissingGeneralAccount = "MissingGeneralAccount",
+  NonPersistentOrderExceedsPriceBounds = "NonPersistentOrderExceedsPriceBounds",
+  OrderAmendFailure = "OrderAmendFailure",
+  OrderNotFound = "OrderNotFound",
+  OrderOutOfSequence = "OrderOutOfSequence",
+  OrderRemovalFailure = "OrderRemovalFailure",
+  PeggedOrderBuyCannotReferenceBestAskPrice = "PeggedOrderBuyCannotReferenceBestAskPrice",
+  PeggedOrderMustBeGTTOrGTC = "PeggedOrderMustBeGTTOrGTC",
+  PeggedOrderMustBeLimitOrder = "PeggedOrderMustBeLimitOrder",
+  PeggedOrderOffsetMustBeGreaterOrEqualToZero = "PeggedOrderOffsetMustBeGreaterOrEqualToZero",
+  PeggedOrderOffsetMustBeGreaterThanZero = "PeggedOrderOffsetMustBeGreaterThanZero",
+  PeggedOrderSellCannotReferenceBestBidPrice = "PeggedOrderSellCannotReferenceBestBidPrice",
+  PeggedOrderWithoutReferencePrice = "PeggedOrderWithoutReferencePrice",
+  SelfTrading = "SelfTrading",
+  TimeFailure = "TimeFailure",
+  UnableToAmendPeggedOrderPrice = "UnableToAmendPeggedOrderPrice",
+  UnableToRepricePeggedOrder = "UnableToRepricePeggedOrder",
+}
+
+/**
+ * Valid order statuses, these determine several states for an order that cannot be expressed with other fields in Order.
+ */
+export enum OrderStatus {
+  Active = "Active",
+  Cancelled = "Cancelled",
+  Expired = "Expired",
+  Filled = "Filled",
+  Parked = "Parked",
+  PartiallyFilled = "PartiallyFilled",
+  Rejected = "Rejected",
+  Stopped = "Stopped",
+}
+
+export enum OrderType {
+  Limit = "Limit",
+  Market = "Market",
+  Network = "Network",
+}
+
+/**
+ * Reason for the proposal being rejected by the core node
+ */
+export enum ProposalRejectionReason {
+  CloseTimeTooLate = "CloseTimeTooLate",
+  CloseTimeTooSoon = "CloseTimeTooSoon",
+  CouldNotInstantiateMarket = "CouldNotInstantiateMarket",
+  EnactTimeTooLate = "EnactTimeTooLate",
+  EnactTimeTooSoon = "EnactTimeTooSoon",
+  IncompatibleTimestamps = "IncompatibleTimestamps",
+  InsufficientTokens = "InsufficientTokens",
+  InvalidAsset = "InvalidAsset",
+  InvalidAssetDetails = "InvalidAssetDetails",
+  InvalidFeeAmount = "InvalidFeeAmount",
+  InvalidFutureMaturityTimestamp = "InvalidFutureMaturityTimestamp",
+  InvalidFutureProduct = "InvalidFutureProduct",
+  InvalidInstrumentSecurity = "InvalidInstrumentSecurity",
+  InvalidRiskParameter = "InvalidRiskParameter",
+  InvalidShape = "InvalidShape",
+  MajorityThresholdNotReached = "MajorityThresholdNotReached",
+  MarketMissingLiquidityCommitment = "MarketMissingLiquidityCommitment",
+  MissingBuiltinAssetField = "MissingBuiltinAssetField",
+  MissingCommitmentAmount = "MissingCommitmentAmount",
+  MissingERC20ContractAddress = "MissingERC20ContractAddress",
+  NetworkParameterInvalidKey = "NetworkParameterInvalidKey",
+  NetworkParameterInvalidValue = "NetworkParameterInvalidValue",
+  NetworkParameterValidationFailed = "NetworkParameterValidationFailed",
+  NoProduct = "NoProduct",
+  NoRiskParameters = "NoRiskParameters",
+  NoTradingMode = "NoTradingMode",
+  NodeValidationFailed = "NodeValidationFailed",
+  OpeningAuctionDurationTooLarge = "OpeningAuctionDurationTooLarge",
+  OpeningAuctionDurationTooSmall = "OpeningAuctionDurationTooSmall",
+  ParticipationThresholdNotReached = "ParticipationThresholdNotReached",
+  ProductMaturityIsPassed = "ProductMaturityIsPassed",
+  UnsupportedProduct = "UnsupportedProduct",
+  UnsupportedTradingMode = "UnsupportedTradingMode",
+}
+
+/**
+ * Various states a proposal can transition through:
+ * Open ->
+ * - Passed -> Enacted.
+ * - Rejected.
+ * Proposal can enter Failed state from any other state.
+ */
+export enum ProposalState {
+  Declined = "Declined",
+  Enacted = "Enacted",
+  Failed = "Failed",
+  Open = "Open",
+  Passed = "Passed",
+  Rejected = "Rejected",
+  WaitingForNodeVote = "WaitingForNodeVote",
+}
+
+export enum VoteValue {
+  No = "No",
+  Yes = "Yes",
+}
+
+//==============================================================
+// END Enums and Input Objects
+//==============================================================

libs/graphql/src/index.ts

@@ -1,4 +1,13 @@
-export * from './lib/globalTypes';
-export * from './lib/Market';
-export * from './lib/Markets';
-export * from './lib/OrderEvent';
+export * from './__generated__/AssetsQuery';
+export * from './__generated__/globalTypes';
+export * from './__generated__/Guess';
+export * from './__generated__/Market';
+export * from './__generated__/Markets';
+export * from './__generated__/MarketsQuery';
+export * from './__generated__/MarketDataSub';
+export * from './__generated__/MarketDataFields';
+export * from './__generated__/NetworkParametersQuery';
+export * from './__generated__/NodesQuery';
+export * from './__generated__/OrderEvent';
+export * from './__generated__/PartyAssetsQuery';
+export * from './__generated__/ProposalsQuery';

libs/graphql/src/lib/Markets.ts

@@ -1,23 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-// ====================================================
-// GraphQL query operation: Markets
-// ====================================================
-
-export interface Markets_markets {
-  __typename: 'Market';
-  /**
-   * Market ID
-   */
-  id: string;
-}
-
-export interface Markets {
-  /**
-   * One or more instruments that are trading on the VEGA network
-   */
-  markets: Markets_markets[] | null;
-}

libs/graphql/src/lib/globalTypes.ts

@@ -1,137 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-//==============================================================
-// START Enums and Input Objects
-//==============================================================
-
-export enum BusEventType {
-  Account = 'Account',
-  Asset = 'Asset',
-  Auction = 'Auction',
-  Deposit = 'Deposit',
-  LiquidityProvision = 'LiquidityProvision',
-  LossSocialization = 'LossSocialization',
-  MarginLevels = 'MarginLevels',
-  Market = 'Market',
-  MarketCreated = 'MarketCreated',
-  MarketData = 'MarketData',
-  MarketTick = 'MarketTick',
-  MarketUpdated = 'MarketUpdated',
-  NodeSignature = 'NodeSignature',
-  OracleSpec = 'OracleSpec',
-  Order = 'Order',
-  Party = 'Party',
-  PositionResolution = 'PositionResolution',
-  Proposal = 'Proposal',
-  RiskFactor = 'RiskFactor',
-  SettleDistressed = 'SettleDistressed',
-  SettlePosition = 'SettlePosition',
-  TimeUpdate = 'TimeUpdate',
-  Trade = 'Trade',
-  TransferResponses = 'TransferResponses',
-  Vote = 'Vote',
-  Withdrawal = 'Withdrawal',
-}
-
-/**
- * The current state of a market
- */
-export enum MarketState {
-  Active = 'Active',
-  Cancelled = 'Cancelled',
-  Closed = 'Closed',
-  Pending = 'Pending',
-  Proposed = 'Proposed',
-  Rejected = 'Rejected',
-  Settled = 'Settled',
-  Suspended = 'Suspended',
-  TradingTerminated = 'TradingTerminated',
-}
-
-/**
- * What market trading mode are we in
- */
-export enum MarketTradingMode {
-  BatchAuction = 'BatchAuction',
-  Continuous = 'Continuous',
-  MonitoringAuction = 'MonitoringAuction',
-  OpeningAuction = 'OpeningAuction',
-}
-
-/**
- * Reason for the order being rejected by the core node
- */
-export enum OrderRejectionReason {
-  AmendToGTTWithoutExpiryAt = 'AmendToGTTWithoutExpiryAt',
-  CannotAmendFromGFAOrGFN = 'CannotAmendFromGFAOrGFN',
-  CannotAmendPeggedOrderDetailsOnNonPeggedOrder = 'CannotAmendPeggedOrderDetailsOnNonPeggedOrder',
-  CannotAmendToFOKOrIOC = 'CannotAmendToFOKOrIOC',
-  CannotAmendToGFAOrGFN = 'CannotAmendToGFAOrGFN',
-  EditNotAllowed = 'EditNotAllowed',
-  ExpiryAtBeforeCreatedAt = 'ExpiryAtBeforeCreatedAt',
-  FOKOrderDuringAuction = 'FOKOrderDuringAuction',
-  GFAOrderDuringContinuousTrading = 'GFAOrderDuringContinuousTrading',
-  GFNOrderDuringAuction = 'GFNOrderDuringAuction',
-  GTCWithExpiryAtNotValid = 'GTCWithExpiryAtNotValid',
-  IOCOrderDuringAuction = 'IOCOrderDuringAuction',
-  InsufficientAssetBalance = 'InsufficientAssetBalance',
-  InsufficientFundsToPayFees = 'InsufficientFundsToPayFees',
-  InternalError = 'InternalError',
-  InvalidExpirationTime = 'InvalidExpirationTime',
-  InvalidMarketId = 'InvalidMarketId',
-  InvalidMarketType = 'InvalidMarketType',
-  InvalidOrderId = 'InvalidOrderId',
-  InvalidOrderReference = 'InvalidOrderReference',
-  InvalidPartyId = 'InvalidPartyId',
-  InvalidPersistence = 'InvalidPersistence',
-  InvalidRemainingSize = 'InvalidRemainingSize',
-  InvalidSize = 'InvalidSize',
-  InvalidTimeInForce = 'InvalidTimeInForce',
-  InvalidType = 'InvalidType',
-  MarginCheckFailed = 'MarginCheckFailed',
-  MarketClosed = 'MarketClosed',
-  MissingGeneralAccount = 'MissingGeneralAccount',
-  NonPersistentOrderExceedsPriceBounds = 'NonPersistentOrderExceedsPriceBounds',
-  OrderAmendFailure = 'OrderAmendFailure',
-  OrderNotFound = 'OrderNotFound',
-  OrderOutOfSequence = 'OrderOutOfSequence',
-  OrderRemovalFailure = 'OrderRemovalFailure',
-  PeggedOrderBuyCannotReferenceBestAskPrice = 'PeggedOrderBuyCannotReferenceBestAskPrice',
-  PeggedOrderMustBeGTTOrGTC = 'PeggedOrderMustBeGTTOrGTC',
-  PeggedOrderMustBeLimitOrder = 'PeggedOrderMustBeLimitOrder',
-  PeggedOrderOffsetMustBeGreaterOrEqualToZero = 'PeggedOrderOffsetMustBeGreaterOrEqualToZero',
-  PeggedOrderOffsetMustBeGreaterThanZero = 'PeggedOrderOffsetMustBeGreaterThanZero',
-  PeggedOrderSellCannotReferenceBestBidPrice = 'PeggedOrderSellCannotReferenceBestBidPrice',
-  PeggedOrderWithoutReferencePrice = 'PeggedOrderWithoutReferencePrice',
-  SelfTrading = 'SelfTrading',
-  TimeFailure = 'TimeFailure',
-  UnableToAmendPeggedOrderPrice = 'UnableToAmendPeggedOrderPrice',
-  UnableToRepricePeggedOrder = 'UnableToRepricePeggedOrder',
-}
-
-/**
- * Valid order statuses, these determine several states for an order that cannot be expressed with other fields in Order.
- */
-export enum OrderStatus {
-  Active = 'Active',
-  Cancelled = 'Cancelled',
-  Expired = 'Expired',
-  Filled = 'Filled',
-  Parked = 'Parked',
-  PartiallyFilled = 'PartiallyFilled',
-  Rejected = 'Rejected',
-  Stopped = 'Stopped',
-}
-
-export enum OrderType {
-  Limit = 'Limit',
-  Market = 'Market',
-  Network = 'Network',
-}
-
-//==============================================================
-// END Enums and Input Objects
-//==============================================================

libs/graphql/tsconfig.json

@@ -1,7 +1,10 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "module": "CommonJS",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
@@ -14,6 +17,9 @@
   "references": [
     {
       "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
     }
   ]
 }

libs/graphql/tsconfig.lib.json

@@ -2,9 +2,21 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "declaration": true,
-    "types": []
+    "types": ["node"]
   },
-  "include": ["**/*.ts"],
-  "exclude": ["**/*.spec.ts"]
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
 }

libs/graphql/tsconfig.spec.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}

libs/market-list/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/market-list/.eslintrc.json

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

libs/market-list/README.md

@@ -0,0 +1,7 @@
+# market-list
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test market-list` to execute the unit tests via [Jest](https://jestjs.io).

libs/market-list/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  displayName: 'market-list',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': 'babel-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/libs/market-list',
+};

libs/market-list/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@vegaprotocol/market-list",
+  "version": "0.0.1"
+}

libs/market-list/project.json

@@ -0,0 +1,43 @@
+{
+  "root": "libs/market-list",
+  "sourceRoot": "libs/market-list/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nrwl/web:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/market-list",
+        "tsConfig": "libs/market-list/tsconfig.lib.json",
+        "project": "libs/market-list/package.json",
+        "entryFile": "libs/market-list/src/index.ts",
+        "external": ["react/jsx-runtime"],
+        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+        "compiler": "babel",
+        "assets": [
+          {
+            "glob": "libs/market-list/README.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/market-list/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/libs/market-list"],
+      "options": {
+        "jestConfig": "libs/market-list/jest.config.js",
+        "passWithNoTests": true
+      }
+    }
+  }
+}

libs/market-list/src/index.ts

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

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

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import MarketListTable from './market-list-table';
+
+describe('MarketListTable', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <MockedProvider>
+        <MarketListTable width={100} height={100} />
+      </MockedProvider>
+    );
+    expect(baseElement).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,88 @@
+import type { GridApi, ValueFormatterParams } from 'ag-grid-community';
+import {
+  PriceCell,
+  formatNumber,
+  useApplyGridTransaction,
+} from '@vegaprotocol/react-helpers';
+import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
+import { Markets_markets } from '@vegaprotocol/graphql';
+import { AgGridColumn } from 'ag-grid-react';
+import { useRef, useState } from 'react';
+
+interface MarketListTableProps {
+  markets: Markets_markets[];
+  onRowClicked: (marketId: string) => void;
+}
+
+export const MarketListTable = ({
+  markets,
+  onRowClicked,
+}: MarketListTableProps) => {
+  const [initialMarkets] = useState(markets);
+  const gridApi = useRef<GridApi | null>(null);
+  useApplyGridTransaction(markets, gridApi.current);
+
+  return (
+    <AgGrid
+      style={{ width: '100%', height: '100%' }}
+      overlayNoRowsTemplate="No markets"
+      rowData={initialMarkets}
+      getRowNodeId={(data) => data.id}
+      defaultColDef={{
+        flex: 1,
+        resizable: true,
+      }}
+      onGridReady={(params) => {
+        gridApi.current = params.api;
+      }}
+      onRowClicked={({ data }) => onRowClicked(data.id)}
+      components={{ PriceCell }}
+    >
+      <AgGridColumn
+        headerName="Market"
+        field="tradableInstrument.instrument.code"
+      />
+      <AgGridColumn
+        headerName="Settlement asset"
+        field="tradableInstrument.instrument.product.settlementAsset.symbol"
+      />
+      <AgGridColumn
+        headerName="State"
+        field="data"
+        valueFormatter={({ value }: ValueFormatterParams) =>
+          `${value.market.state} (${value.market.tradingMode})`
+        }
+      />
+      <AgGridColumn
+        headerName="Best bid"
+        field="data.bestBidPrice"
+        type="rightAligned"
+        cellRenderer="PriceCell"
+        valueFormatter={({ value, data }: ValueFormatterParams) =>
+          formatNumber(value, data.decimalPlaces)
+        }
+      />
+      <AgGridColumn
+        headerName="Best offer"
+        field="data.bestOfferPrice"
+        type="rightAligned"
+        valueFormatter={({ value, data }: ValueFormatterParams) =>
+          formatNumber(value, data.decimalPlaces)
+        }
+        cellRenderer="PriceCell"
+      />
+      <AgGridColumn
+        headerName="Mark price"
+        field="data.markPrice"
+        type="rightAligned"
+        cellRenderer="PriceCell"
+        valueFormatter={({ value, data }: ValueFormatterParams) =>
+          formatNumber(value, data.decimalPlaces)
+        }
+      />
+      <AgGridColumn headerName="Description" field="name" />
+    </AgGrid>
+  );
+};
+
+export default MarketListTable;

libs/market-list/src/lib/summary-cell.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+/*
+import { useMarketOverview } from '../../../../hooks/use-market-overview'
+import { colorByMarketMovement } from '../../../../lib/vega-colours'
+import { Sparkline } from '../../components/sparkline'
+import { VEGA_TABLE_CLASSES } from '../../components/vega-table'
+*/
+
+export interface SummaryCellProps {
+  value: string; // marketId
+}
+
+export const SummaryCellView = ({ value }: SummaryCellProps) => {
+  // const { sparkline, change, bullish } = useMarketOverview(value)
+  // const color = colorByMarketMovement(bullish)
+
+  return (
+    <>
+      {/* <Sparkline data={sparkline} style={{ marginRight: 4 }} />*/}
+      <span>{'change'}</span>
+    </>
+  );
+};
+
+SummaryCellView.displayName = 'SummaryCellView';
+
+export const SummaryCell = React.memo(SummaryCellView);
+SummaryCell.displayName = 'SummaryCell';

libs/market-list/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/market-list/tsconfig.lib.json

@@ -0,0 +1,22 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

libs/market-list/tsconfig.spec.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}

libs/react-helpers/src/hooks/use-apply-grid-transaction.ts

@@ -0,0 +1,33 @@
+import { GridApi } from 'ag-grid-community';
+import { useEffect } from 'react';
+
+export const useApplyGridTransaction = <T extends { id: string }>(
+  data: T[],
+  gridApi: GridApi | null
+) => {
+  useEffect(() => {
+    if (!gridApi) return;
+
+    const update: T[] = [];
+    const add: T[] = [];
+
+    // split into updates and adds
+    data.forEach((d) => {
+      if (!gridApi) return;
+
+      const rowNode = gridApi.getRowNode(d.id);
+
+      if (rowNode) {
+        update.push(d);
+      } else {
+        add.push(d);
+      }
+    });
+
+    gridApi.applyTransaction({
+      update,
+      add,
+      addIndex: 0,
+    });
+  }, [data, gridApi]);
+};

libs/react-helpers/src/index.ts

@@ -1,4 +1,8 @@
 export * from './lib/context';
-export * from './lib/storage';
 export * from './lib/datetime';
 export * from './lib/decimals';
+export * from './lib/format';
+export * from './lib/grid-cells';
+export * from './lib/storage';
+
+export * from './hooks/use-apply-grid-transaction';

libs/react-helpers/src/lib/format/format.ts

@@ -0,0 +1,54 @@
+import once from 'lodash.once';
+import memoize from 'lodash.memoize';
+import { addDecimal } from '../decimals';
+
+const getUserLocale = () => 'default';
+
+export const splitAt = (index: number) => (x: string) =>
+  [x.slice(0, index), x.slice(index)];
+
+export const getTimeFormat = once(
+  () =>
+    new Intl.DateTimeFormat(getUserLocale(), {
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+    })
+);
+
+export const getDateFormat = once(
+  () =>
+    new Intl.DateTimeFormat(getUserLocale(), {
+      year: 'numeric',
+      month: 'numeric',
+      day: 'numeric',
+    })
+);
+
+export const getDateTimeFormat = once(
+  () =>
+    new Intl.DateTimeFormat(getUserLocale(), {
+      year: 'numeric',
+      month: 'numeric',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+    })
+);
+
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
+export const getNumberFormat = memoize(
+  (minimumFractionDigits: number) =>
+    new Intl.NumberFormat(getUserLocale(), { minimumFractionDigits })
+);
+
+export const getRelativeTimeFormat = once(
+  () => new Intl.RelativeTimeFormat(getUserLocale())
+);
+
+export const formatNumber = (rawValue: string, decimalPlaces: number) => {
+  const x = addDecimal(rawValue, decimalPlaces);
+
+  return getNumberFormat(decimalPlaces).format(Number(x));
+};

libs/react-helpers/src/lib/format/index.ts

@@ -0,0 +1 @@
+export * from './format';

libs/react-helpers/src/lib/grid-cells/flash-cell.tsx

@@ -0,0 +1,98 @@
+/**
+ * A component that will display a number, and when it is updated will use animation to
+ * highlight the direction of change. This defaults to red for downwards, and green for
+ * upwards.
+ *
+ * @author Matt <matt@vega.xyz>
+ * @author Edd <edd@vega.xyz>
+ * @author John <john.walley@mulberryhousesoftware.com>
+ */
+
+import { memo, useRef, useEffect } from 'react';
+import { theme } from '@vegaprotocol/tailwindcss-config';
+import { splitAt } from '../format';
+
+const FLASH_DURATION = 800; // Duration of flash animation in milliseconds
+
+export interface FlashCellProps {
+  /**
+   * The string representation of value. It can be formatted in bespoke ways,
+   * so we can't simply convert value
+   */
+  children: string;
+  /** The numeric representation of 'children' */
+  value: number;
+}
+
+/**
+ * Given two strings, finds the index first character that has changed in string 2
+ *
+ * Used by <FlashCell /> to highlight substrings to highlight the portion of a number that has changed
+ * From: https://stackoverflow.com/questions/32858626/detect-position-of-first-difference-in-2-strings
+ *
+ * @param a String to diff
+ * @param b Second string to diff
+ * @return number Index of first different character, or -1
+ */
+export function findFirstDiffPos(a: string, b: string): number {
+  let i = 0;
+  if (a === b) return -1;
+  if (!a || !b) return -1;
+
+  while (a[i] === b[i]) i++;
+  return i;
+}
+
+/**
+ * Get value from previous render
+ */
+function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T | undefined>();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}
+
+export const FlashCell = memo(({ children, value }: FlashCellProps) => {
+  const ref = useRef<HTMLSpanElement | null>(null);
+  const previousLabel = usePrevious(children);
+  const previousValue = usePrevious(value);
+
+  const indexOfChange = previousLabel
+    ? findFirstDiffPos(previousLabel, children)
+    : 0;
+
+  const splitText = splitAt(indexOfChange)(children);
+
+  if (indexOfChange !== -1 && previousValue !== undefined) {
+    if (value < previousValue) {
+      ref.current?.animate(
+        [
+          { color: theme.colors.vega.pink },
+          { color: theme.colors.vega.pink, offset: 0.8 },
+          { color: 'inherit' },
+        ],
+        FLASH_DURATION
+      );
+    } else if (value > previousValue) {
+      ref.current?.animate(
+        [
+          { color: theme.colors.vega.green },
+          { color: theme.colors.vega.green, offset: 0.8 },
+          { color: 'inherit' },
+        ],
+        FLASH_DURATION
+      );
+    }
+  }
+
+  return (
+    <span data-testid="flash-cell">
+      {splitText[0]}
+      <span ref={ref}>{splitText[1]}</span>
+    </span>
+  );
+});

libs/react-helpers/src/lib/grid-cells/index.tsx

@@ -0,0 +1,2 @@
+export * from './flash-cell';
+export * from './price-cell';

libs/react-helpers/src/lib/grid-cells/price-cell.tsx

@@ -0,0 +1,19 @@
+import { FlashCell } from './flash-cell';
+
+export interface IPriceCellProps {
+  value: number | bigint | null | undefined;
+  valueFormatted: string;
+}
+
+export const PriceCell = ({ value, valueFormatted }: IPriceCellProps) => {
+  if (!value || isNaN(Number(value))) return <span>-</span>;
+  return (
+    <span className="font-mono">
+      <FlashCell value={Number(value)} data-testid="price">
+        {valueFormatted}
+      </FlashCell>
+    </span>
+  );
+};
+
+PriceCell.displayName = 'PriceCell';

package.json

@@ -14,6 +14,7 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.5.8",
+    "@apollo/react-testing": "^4.0.0",
     "@blueprintjs/icons": "^3.32.0",
     "@nrwl/next": "13.8.1",
     "@radix-ui/react-dialog": "^0.1.5",
@@ -34,12 +35,15 @@
     "graphql": "^15.7.2",
     "graphql-ws": "^5.6.3",
     "lodash.debounce": "^4.0.8",
+    "lodash.memoize": "^4.1.2",
+    "lodash.once": "^4.1.1",
     "next": "12.0.7",
     "nx": "^13.8.3",
     "postcss": "^8.4.6",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-hook-form": "^7.27.0",
+    "react-singleton-hook": "^3.2.3",
     "react-syntax-highlighter": "^15.4.5",
     "react-use-websocket": "^3.0.0",
     "react-virtualized-auto-sizer": "^1.0.6",
@@ -74,6 +78,8 @@
     "@testing-library/react-hooks": "7.0.2",
     "@types/classnames": "^2.3.1",
     "@types/jest": "27.0.2",
+    "@types/lodash.memoize": "^4.1.6",
+    "@types/lodash.once": "^4.1.6",
     "@types/node": "16.11.7",
     "@types/prismjs": "^1.26.0",
     "@types/react": "17.0.30",

tsconfig.base.json

@@ -17,6 +17,7 @@
     "paths": {
       "@vegaprotocol/deal-ticket": ["libs/deal-ticket/src/index.ts"],
       "@vegaprotocol/graphql": ["libs/graphql/src/index.ts"],
+      "@vegaprotocol/market-list": ["libs/market-list/src/index.ts"],
       "@vegaprotocol/react-helpers": ["libs/react-helpers/src/index.ts"],
       "@vegaprotocol/tailwindcss-config": [
         "libs/tailwindcss-config/src/index.js"

workspace.json

@@ -5,6 +5,7 @@
     "explorer": "apps/explorer",
     "explorer-e2e": "apps/explorer-e2e",
     "graphql": "libs/graphql",
+    "market-list": "libs/market-list",
     "react-helpers": "libs/react-helpers",
     "tailwindcss-config": "libs/tailwindcss-config",
     "trading": "apps/trading",

yarn.lock

@@ -9,7 +9,7 @@
   dependencies:
     "@jridgewell/trace-mapping" "^0.3.0"
 
-"@apollo/client@^3.5.8":
+"@apollo/client@^3.5.8", "@apollo/client@latest":
   version "3.5.10"
   resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.5.10.tgz#43463108a6e07ae602cca0afc420805a19339a71"
   integrity sha512-tL3iSpFe9Oldq7gYikZK1dcYxp1c01nlSwtsMz75382HcI6fvQXyFXUCJTTK3wgO2/ckaBvRGw7VqjFREdVoRw==
@@ -35,6 +35,13 @@
     apollo-graphql "^0.9.3"
     lodash.xorby "^4.7.0"
 
+"@apollo/react-testing@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@apollo/react-testing/-/react-testing-4.0.0.tgz#9fd1991584510c2ac051d986547ceccbc9c0a30a"
+  integrity sha512-P7Z/flUHpRRZYc3FkIqxZH9XD3FuP2Sgks1IXqGq2Zb7qI0aaTfVeRsLYmZNUcFOh2pTHxs0NXgPnH1VfYOpig==
+  dependencies:
+    "@apollo/client" latest
+
 "@apollographql/apollo-tools@^0.5.2":
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/@apollographql/apollo-tools/-/apollo-tools-0.5.2.tgz#01750a655731a198c3634ee819c463254a7c7767"
@@ -5105,6 +5112,25 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/lodash.memoize@^4.1.6":
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.memoize/-/lodash.memoize-4.1.6.tgz#3221f981790a415cab1a239f25c17efd8b604c23"
+  integrity sha512-mYxjKiKzRadRJVClLKxS4wb3Iy9kzwJ1CkbyKiadVxejnswnRByyofmPMscFKscmYpl36BEEhCMPuWhA1R/1ZQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash.once@^4.1.6":
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.once/-/lodash.once-4.1.6.tgz#f6ea46e3426bc3494b72a45e65efed440103b967"
+  integrity sha512-kawTe2cBNZ5OI4CvTJT9cs8wacGZK4BoakKAGASl/jH3LxflMTuy82wN2U5klYsxYjrABkNWmzgO33volt7urQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.180"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.180.tgz#4ab7c9ddfc92ec4a887886483bc14c79fb380670"
+  integrity sha512-XOKXa1KIxtNXgASAnwj7cnttJxS4fksBRywK/9LzRV5YxrF80BXZIGeQSuoESQ/VkUj30Ae0+YcuHc15wJCB2g==
+
 "@types/mdast@^3.0.0":
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af"
@@ -16462,6 +16488,11 @@ react-shallow-renderer@^16.13.1:
     object-assign "^4.1.1"
     react-is "^16.12.0 || ^17.0.0"
 
+react-singleton-hook@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/react-singleton-hook/-/react-singleton-hook-3.2.3.tgz#1765e67b1910fd163cdcd186a840af82b60ca17e"
+  integrity sha512-DYJ70V8IVUZznygmRYYF+hxwLkGPLrCCTAD1Je7sZYXquE9HpAJqBVeEgb2XIZwxWUw97PN2ho5J/+63YwdKaA==
+
 react-sizeme@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-3.0.2.tgz#4a2f167905ba8f8b8d932a9e35164e459f9020e4"