From 3e69e53c4e6827d2c1bda6f2bd4c194a7c0a2343 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= Date: Mon, 14 Mar 2022 16:52:02 +0100 Subject: [PATCH] #29 Add market-list-table --- .gitignore | 3 + .prettierignore | 1 + apps/explorer/project.json | 10 - .../src/app/__generated__/globalTypes.ts | 126 ---------- .../src/app/components/search/index.tsx | 2 +- apps/explorer/src/app/routes/assets/index.tsx | 2 +- .../src/app/routes/blocks/id/index.tsx | 5 +- .../src/app/routes/governance/index.tsx | 2 +- .../explorer/src/app/routes/markets/index.tsx | 2 +- .../app/routes/network-parameters/index.tsx | 2 +- .../src/app/routes/parties/id/index.tsx | 2 +- .../src/app/routes/validators/index.tsx | 2 +- apps/trading/.eslintrc.json | 2 +- apps/trading/apollo.config.js | 9 - apps/trading/hooks/use-markets.ts | 131 ++++++++++ apps/trading/lib/apollo-client.ts | 7 +- apps/trading/pages/_app.page.tsx | 6 +- apps/trading/pages/markets/index.page.tsx | 50 ++-- apps/trading/project.json | 10 - apps/trading/tsconfig.json | 2 +- libs/graphql/.babelrc | 12 + libs/graphql/.eslintrc.json | 18 ++ libs/graphql/README.md | 4 +- .../graphql}/apollo.config.js | 1 + libs/graphql/jest.config.js | 9 + libs/graphql/package.json | 3 +- libs/graphql/project.json | 45 +++- .../graphql/src}/__generated__/AssetsQuery.ts | 2 +- .../graphql/src}/__generated__/Guess.ts | 0 .../src/{lib => __generated__}/Market.ts | 22 +- .../src/__generated__/MarketDataFields.ts | 46 ++++ .../src/__generated__/MarketDataSub.ts | 53 ++++ libs/graphql/src/__generated__/Markets.ts | 126 ++++++++++ .../src}/__generated__/MarketsQuery.ts | 10 +- .../__generated__/NetworkParametersQuery.ts | 0 .../graphql/src}/__generated__/NodesQuery.ts | 2 +- .../src/{lib => __generated__}/OrderEvent.ts | 43 +--- .../src}/__generated__/PartyAssetsQuery.ts | 4 +- .../src}/__generated__/ProposalsQuery.ts | 12 +- libs/graphql/src/__generated__/globalTypes.ts | 234 ++++++++++++++++++ libs/graphql/src/index.ts | 17 +- libs/graphql/src/lib/Markets.ts | 23 -- libs/graphql/src/lib/globalTypes.ts | 137 ---------- libs/graphql/tsconfig.json | 8 +- libs/graphql/tsconfig.lib.json | 20 +- libs/graphql/tsconfig.spec.json | 19 ++ libs/market-list/.babelrc | 12 + libs/market-list/.eslintrc.json | 18 ++ libs/market-list/README.md | 7 + libs/market-list/jest.config.js | 9 + libs/market-list/package.json | 4 + libs/market-list/project.json | 43 ++++ libs/market-list/src/index.ts | 1 + .../src/lib/market-list-table.spec.tsx | 14 ++ .../market-list/src/lib/market-list-table.tsx | 88 +++++++ libs/market-list/src/lib/summary-cell.tsx | 29 +++ libs/market-list/tsconfig.json | 25 ++ libs/market-list/tsconfig.lib.json | 22 ++ libs/market-list/tsconfig.spec.json | 19 ++ .../src/hooks/use-apply-grid-transaction.ts | 33 +++ libs/react-helpers/src/index.ts | 6 +- libs/react-helpers/src/lib/format/format.ts | 54 ++++ libs/react-helpers/src/lib/format/index.ts | 1 + .../src/lib/grid-cells/flash-cell.tsx | 98 ++++++++ .../src/lib/grid-cells/index.tsx | 2 + .../src/lib/grid-cells/price-cell.tsx | 19 ++ package.json | 6 + tsconfig.base.json | 1 + workspace.json | 1 + yarn.lock | 33 ++- 70 files changed, 1347 insertions(+), 444 deletions(-) delete mode 100644 apps/explorer/src/app/__generated__/globalTypes.ts delete mode 100644 apps/trading/apollo.config.js create mode 100644 apps/trading/hooks/use-markets.ts create mode 100644 libs/graphql/.babelrc create mode 100644 libs/graphql/.eslintrc.json rename {apps/explorer => libs/graphql}/apollo.config.js (64%) create mode 100644 libs/graphql/jest.config.js rename {apps/explorer/src/app/routes/assets => libs/graphql/src}/__generated__/AssetsQuery.ts (96%) rename {apps/explorer/src/app/components/search => libs/graphql/src}/__generated__/Guess.ts (100%) rename libs/graphql/src/{lib => __generated__}/Market.ts (93%) create mode 100644 libs/graphql/src/__generated__/MarketDataFields.ts create mode 100644 libs/graphql/src/__generated__/MarketDataSub.ts create mode 100644 libs/graphql/src/__generated__/Markets.ts rename {apps/explorer/src/app/routes/markets => libs/graphql/src}/__generated__/MarketsQuery.ts (97%) rename {apps/explorer/src/app/routes/network-parameters => libs/graphql/src}/__generated__/NetworkParametersQuery.ts (100%) rename {apps/explorer/src/app/routes/validators => libs/graphql/src}/__generated__/NodesQuery.ts (96%) rename libs/graphql/src/{lib => __generated__}/OrderEvent.ts (70%) rename {apps/explorer/src/app/routes/parties/id => libs/graphql/src}/__generated__/PartyAssetsQuery.ts (95%) rename {apps/explorer/src/app/routes/governance => libs/graphql/src}/__generated__/ProposalsQuery.ts (93%) create mode 100644 libs/graphql/src/__generated__/globalTypes.ts delete mode 100644 libs/graphql/src/lib/Markets.ts delete mode 100644 libs/graphql/src/lib/globalTypes.ts create mode 100644 libs/graphql/tsconfig.spec.json create mode 100644 libs/market-list/.babelrc create mode 100644 libs/market-list/.eslintrc.json create mode 100644 libs/market-list/README.md create mode 100644 libs/market-list/jest.config.js create mode 100644 libs/market-list/package.json create mode 100644 libs/market-list/project.json create mode 100644 libs/market-list/src/index.ts create mode 100644 libs/market-list/src/lib/market-list-table.spec.tsx create mode 100644 libs/market-list/src/lib/market-list-table.tsx create mode 100644 libs/market-list/src/lib/summary-cell.tsx create mode 100644 libs/market-list/tsconfig.json create mode 100644 libs/market-list/tsconfig.lib.json create mode 100644 libs/market-list/tsconfig.spec.json create mode 100644 libs/react-helpers/src/hooks/use-apply-grid-transaction.ts create mode 100644 libs/react-helpers/src/lib/format/format.ts create mode 100644 libs/react-helpers/src/lib/format/index.ts create mode 100644 libs/react-helpers/src/lib/grid-cells/flash-cell.tsx create mode 100644 libs/react-helpers/src/lib/grid-cells/index.tsx create mode 100644 libs/react-helpers/src/lib/grid-cells/price-cell.tsx diff --git a/.gitignore b/.gitignore index ee5c9d833..a3032528b 100644 --- a/.gitignore +++ b/.gitignore @@ -37,3 +37,6 @@ testem.log # System Files .DS_Store Thumbs.db + +.local.env +.env.local diff --git a/.prettierignore b/.prettierignore index d0b804da2..eb82b9e9f 100644 --- a/.prettierignore +++ b/.prettierignore @@ -2,3 +2,4 @@ /dist /coverage +__generated__ diff --git a/apps/explorer/project.json b/apps/explorer/project.json index 44f9db00a..c63274f86 100644 --- a/apps/explorer/project.json +++ b/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": { diff --git a/apps/explorer/src/app/__generated__/globalTypes.ts b/apps/explorer/src/app/__generated__/globalTypes.ts deleted file mode 100644 index 74aa66291..000000000 --- a/apps/explorer/src/app/__generated__/globalTypes.ts +++ /dev/null @@ -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 -//============================================================== diff --git a/apps/explorer/src/app/components/search/index.tsx b/apps/explorer/src/app/components/search/index.tsx index d1d9d8066..ff6134ea1 100644 --- a/apps/explorer/src/app/components/search/index.tsx +++ b/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; diff --git a/apps/explorer/src/app/routes/assets/index.tsx b/apps/explorer/src/app/routes/assets/index.tsx index 39c337162..e7be5892e 100644 --- a/apps/explorer/src/app/routes/assets/index.tsx +++ b/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 { diff --git a/apps/explorer/src/app/routes/blocks/id/index.tsx b/apps/explorer/src/app/routes/blocks/id/index.tsx index 700f3af01..5e1b73ffc 100644 --- a/apps/explorer/src/app/routes/blocks/id/index.tsx +++ b/apps/explorer/src/app/routes/blocks/id/index.tsx @@ -34,10 +34,7 @@ const Block = () => { Mined by - + {header.proposer_address} diff --git a/apps/explorer/src/app/routes/governance/index.tsx b/apps/explorer/src/app/routes/governance/index.tsx index d9dc20ddc..9c35a17f5 100644 --- a/apps/explorer/src/app/routes/governance/index.tsx +++ b/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') { diff --git a/apps/explorer/src/app/routes/markets/index.tsx b/apps/explorer/src/app/routes/markets/index.tsx index 687a62f88..1fc494e18 100644 --- a/apps/explorer/src/app/routes/markets/index.tsx +++ b/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'; diff --git a/apps/explorer/src/app/routes/network-parameters/index.tsx b/apps/explorer/src/app/routes/network-parameters/index.tsx index 22689c61b..46df31664 100644 --- a/apps/explorer/src/app/routes/network-parameters/index.tsx +++ b/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 { diff --git a/apps/explorer/src/app/routes/parties/id/index.tsx b/apps/explorer/src/app/routes/parties/id/index.tsx index 2b5e2aed6..dd883bdd4 100644 --- a/apps/explorer/src/app/routes/parties/id/index.tsx +++ b/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!) { diff --git a/apps/explorer/src/app/routes/validators/index.tsx b/apps/explorer/src/app/routes/validators/index.tsx index 7d8cad2ef..d27b85c47 100644 --- a/apps/explorer/src/app/routes/validators/index.tsx +++ b/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 { diff --git a/apps/trading/.eslintrc.json b/apps/trading/.eslintrc.json index bc7243829..2548ff963 100644 --- a/apps/trading/.eslintrc.json +++ b/apps/trading/.eslintrc.json @@ -5,7 +5,7 @@ "next", "next/core-web-vitals" ], - "ignorePatterns": ["!**/*", "__generated__"], + "ignorePatterns": ["!**/*"], "overrides": [ { "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], diff --git a/apps/trading/apollo.config.js b/apps/trading/apollo.config.js deleted file mode 100644 index 887eb5abd..000000000 --- a/apps/trading/apollo.config.js +++ /dev/null @@ -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}'], - }, -}; diff --git a/apps/trading/hooks/use-markets.ts b/apps/trading/hooks/use-markets.ts new file mode 100644 index 000000000..c2fd4e570 --- /dev/null +++ b/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([]); + const [error, setError] = useState(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({ + 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({ + 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); diff --git a/apps/trading/lib/apollo-client.ts b/apps/trading/lib/apollo-client.ts index 5b5e956be..134799317 100644 --- a/apps/trading/lib/apollo-client.ts +++ b/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, }, diff --git a/apps/trading/pages/_app.page.tsx b/apps/trading/pages/_app.page.tsx index d4086e7aa..b93d7c834 100644 --- a/apps/trading/pages/_app.page.tsx +++ b/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) { + Welcome to trading! diff --git a/apps/trading/pages/markets/index.page.tsx b/apps/trading/pages/markets/index.page.tsx index 4572c810a..a930be52c 100644 --- a/apps/trading/pages/markets/index.page.tsx +++ b/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 Something went wrong: {error.message}; + } + + if (loading) { + return Loading...; + } return ( - query={MARKETS_QUERY}> - {(data) => ( - <> -

Markets

- - - )} - + + push(`${pathname}/${id}?portfolio=orders&trade=orderbook`) + } + /> ); }; diff --git a/apps/trading/project.json b/apps/trading/project.json index f96461b2e..2e9f6071b 100644 --- a/apps/trading/project.json +++ b/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": [] diff --git a/apps/trading/tsconfig.json b/apps/trading/tsconfig.json index f7e818fd1..7f521fe09 100644 --- a/apps/trading/tsconfig.json +++ b/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"] } diff --git a/libs/graphql/.babelrc b/libs/graphql/.babelrc new file mode 100644 index 000000000..ccae900be --- /dev/null +++ b/libs/graphql/.babelrc @@ -0,0 +1,12 @@ +{ + "presets": [ + [ + "@nrwl/react/babel", + { + "runtime": "automatic", + "useBuiltIns": "usage" + } + ] + ], + "plugins": [] +} diff --git a/libs/graphql/.eslintrc.json b/libs/graphql/.eslintrc.json new file mode 100644 index 000000000..db820c5d0 --- /dev/null +++ b/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": {} + } + ] +} diff --git a/libs/graphql/README.md b/libs/graphql/README.md index 90e4d61d8..6342967d9 100644 --- a/libs/graphql/README.md +++ b/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). diff --git a/apps/explorer/apollo.config.js b/libs/graphql/apollo.config.js similarity index 64% rename from apps/explorer/apollo.config.js rename to libs/graphql/apollo.config.js index 97e1c2c59..0a0c2499e 100644 --- a/apps/explorer/apollo.config.js +++ b/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}'], }, }; diff --git a/libs/graphql/jest.config.js b/libs/graphql/jest.config.js new file mode 100644 index 000000000..51bb43cdc --- /dev/null +++ b/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', +}; diff --git a/libs/graphql/package.json b/libs/graphql/package.json index 7b0a2b1d3..d2fdb2ce1 100644 --- a/libs/graphql/package.json +++ b/libs/graphql/package.json @@ -1,5 +1,4 @@ { "name": "@vegaprotocol/graphql", - "version": "0.0.1", - "type": "commonjs" + "version": "0.0.1" } diff --git a/libs/graphql/project.json b/libs/graphql/project.json index 90fff2a0b..071816ba2 100644 --- a/libs/graphql/project.json +++ b/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": [] + } } diff --git a/apps/explorer/src/app/routes/assets/__generated__/AssetsQuery.ts b/libs/graphql/src/__generated__/AssetsQuery.ts similarity index 96% rename from apps/explorer/src/app/routes/assets/__generated__/AssetsQuery.ts rename to libs/graphql/src/__generated__/AssetsQuery.ts index 99a430f5e..ea9b6f249 100644 --- a/apps/explorer/src/app/routes/assets/__generated__/AssetsQuery.ts +++ b/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 diff --git a/apps/explorer/src/app/components/search/__generated__/Guess.ts b/libs/graphql/src/__generated__/Guess.ts similarity index 100% rename from apps/explorer/src/app/components/search/__generated__/Guess.ts rename to libs/graphql/src/__generated__/Guess.ts diff --git a/libs/graphql/src/lib/Market.ts b/libs/graphql/src/__generated__/Market.ts similarity index 93% rename from libs/graphql/src/lib/Market.ts rename to libs/graphql/src/__generated__/Market.ts index fbba42220..61cf341ce 100644 --- a/libs/graphql/src/lib/Market.ts +++ b/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 ) diff --git a/libs/graphql/src/__generated__/MarketDataFields.ts b/libs/graphql/src/__generated__/MarketDataFields.ts new file mode 100644 index 000000000..eb9675cbe --- /dev/null +++ b/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; +} diff --git a/libs/graphql/src/__generated__/MarketDataSub.ts b/libs/graphql/src/__generated__/MarketDataSub.ts new file mode 100644 index 000000000..9e88d087f --- /dev/null +++ b/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; +} diff --git a/libs/graphql/src/__generated__/Markets.ts b/libs/graphql/src/__generated__/Markets.ts new file mode 100644 index 000000000..e7b0cd958 --- /dev/null +++ b/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; +} diff --git a/apps/explorer/src/app/routes/markets/__generated__/MarketsQuery.ts b/libs/graphql/src/__generated__/MarketsQuery.ts similarity index 97% rename from apps/explorer/src/app/routes/markets/__generated__/MarketsQuery.ts rename to libs/graphql/src/__generated__/MarketsQuery.ts index b507f79aa..18707af7a 100644 --- a/apps/explorer/src/app/routes/markets/__generated__/MarketsQuery.ts +++ b/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; /** diff --git a/apps/explorer/src/app/routes/network-parameters/__generated__/NetworkParametersQuery.ts b/libs/graphql/src/__generated__/NetworkParametersQuery.ts similarity index 100% rename from apps/explorer/src/app/routes/network-parameters/__generated__/NetworkParametersQuery.ts rename to libs/graphql/src/__generated__/NetworkParametersQuery.ts diff --git a/apps/explorer/src/app/routes/validators/__generated__/NodesQuery.ts b/libs/graphql/src/__generated__/NodesQuery.ts similarity index 96% rename from apps/explorer/src/app/routes/validators/__generated__/NodesQuery.ts rename to libs/graphql/src/__generated__/NodesQuery.ts index 5ed4289a6..0b8079143 100644 --- a/apps/explorer/src/app/routes/validators/__generated__/NodesQuery.ts +++ b/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 diff --git a/libs/graphql/src/lib/OrderEvent.ts b/libs/graphql/src/__generated__/OrderEvent.ts similarity index 70% rename from libs/graphql/src/lib/OrderEvent.ts rename to libs/graphql/src/__generated__/OrderEvent.ts index 33cabf251..9d93b9fbf 100644 --- a/libs/graphql/src/lib/OrderEvent.ts +++ b/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 */ diff --git a/apps/explorer/src/app/routes/parties/id/__generated__/PartyAssetsQuery.ts b/libs/graphql/src/__generated__/PartyAssetsQuery.ts similarity index 95% rename from apps/explorer/src/app/routes/parties/id/__generated__/PartyAssetsQuery.ts rename to libs/graphql/src/__generated__/PartyAssetsQuery.ts index ab6f3e83f..1fe3f42fa 100644 --- a/apps/explorer/src/app/routes/parties/id/__generated__/PartyAssetsQuery.ts +++ b/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; /** diff --git a/apps/explorer/src/app/routes/governance/__generated__/ProposalsQuery.ts b/libs/graphql/src/__generated__/ProposalsQuery.ts similarity index 93% rename from apps/explorer/src/app/routes/governance/__generated__/ProposalsQuery.ts rename to libs/graphql/src/__generated__/ProposalsQuery.ts index ff64977e9..f47bef14f 100644 --- a/apps/explorer/src/app/routes/governance/__generated__/ProposalsQuery.ts +++ b/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; } diff --git a/libs/graphql/src/__generated__/globalTypes.ts b/libs/graphql/src/__generated__/globalTypes.ts new file mode 100644 index 000000000..e4c7a3e64 --- /dev/null +++ b/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 +//============================================================== diff --git a/libs/graphql/src/index.ts b/libs/graphql/src/index.ts index 34e1ecfc8..3e7077947 100644 --- a/libs/graphql/src/index.ts +++ b/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'; diff --git a/libs/graphql/src/lib/Markets.ts b/libs/graphql/src/lib/Markets.ts deleted file mode 100644 index 52c4f04fd..000000000 --- a/libs/graphql/src/lib/Markets.ts +++ /dev/null @@ -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; -} diff --git a/libs/graphql/src/lib/globalTypes.ts b/libs/graphql/src/lib/globalTypes.ts deleted file mode 100644 index 7848b1dcd..000000000 --- a/libs/graphql/src/lib/globalTypes.ts +++ /dev/null @@ -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 -//============================================================== diff --git a/libs/graphql/tsconfig.json b/libs/graphql/tsconfig.json index 696b638de..4c089585e 100644 --- a/libs/graphql/tsconfig.json +++ b/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" } ] } diff --git a/libs/graphql/tsconfig.lib.json b/libs/graphql/tsconfig.lib.json index a8b9431f9..252904bb7 100644 --- a/libs/graphql/tsconfig.lib.json +++ b/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"] } diff --git a/libs/graphql/tsconfig.spec.json b/libs/graphql/tsconfig.spec.json new file mode 100644 index 000000000..67f149c4c --- /dev/null +++ b/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" + ] +} diff --git a/libs/market-list/.babelrc b/libs/market-list/.babelrc new file mode 100644 index 000000000..ccae900be --- /dev/null +++ b/libs/market-list/.babelrc @@ -0,0 +1,12 @@ +{ + "presets": [ + [ + "@nrwl/react/babel", + { + "runtime": "automatic", + "useBuiltIns": "usage" + } + ] + ], + "plugins": [] +} diff --git a/libs/market-list/.eslintrc.json b/libs/market-list/.eslintrc.json new file mode 100644 index 000000000..734ddacee --- /dev/null +++ b/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": {} + } + ] +} diff --git a/libs/market-list/README.md b/libs/market-list/README.md new file mode 100644 index 000000000..129c47d2b --- /dev/null +++ b/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). diff --git a/libs/market-list/jest.config.js b/libs/market-list/jest.config.js new file mode 100644 index 000000000..a5c40cc3b --- /dev/null +++ b/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', +}; diff --git a/libs/market-list/package.json b/libs/market-list/package.json new file mode 100644 index 000000000..3dd740a11 --- /dev/null +++ b/libs/market-list/package.json @@ -0,0 +1,4 @@ +{ + "name": "@vegaprotocol/market-list", + "version": "0.0.1" +} diff --git a/libs/market-list/project.json b/libs/market-list/project.json new file mode 100644 index 000000000..cbd8cd093 --- /dev/null +++ b/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 + } + } + } +} diff --git a/libs/market-list/src/index.ts b/libs/market-list/src/index.ts new file mode 100644 index 000000000..a681b7d24 --- /dev/null +++ b/libs/market-list/src/index.ts @@ -0,0 +1 @@ +export * from './lib/market-list-table'; diff --git a/libs/market-list/src/lib/market-list-table.spec.tsx b/libs/market-list/src/lib/market-list-table.spec.tsx new file mode 100644 index 000000000..1989c52d2 --- /dev/null +++ b/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( + + + + ); + expect(baseElement).toBeTruthy(); + }); +}); diff --git a/libs/market-list/src/lib/market-list-table.tsx b/libs/market-list/src/lib/market-list-table.tsx new file mode 100644 index 000000000..70afd331e --- /dev/null +++ b/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(null); + useApplyGridTransaction(markets, gridApi.current); + + return ( + data.id} + defaultColDef={{ + flex: 1, + resizable: true, + }} + onGridReady={(params) => { + gridApi.current = params.api; + }} + onRowClicked={({ data }) => onRowClicked(data.id)} + components={{ PriceCell }} + > + + + + `${value.market.state} (${value.market.tradingMode})` + } + /> + + formatNumber(value, data.decimalPlaces) + } + /> + + formatNumber(value, data.decimalPlaces) + } + cellRenderer="PriceCell" + /> + + formatNumber(value, data.decimalPlaces) + } + /> + + + ); +}; + +export default MarketListTable; diff --git a/libs/market-list/src/lib/summary-cell.tsx b/libs/market-list/src/lib/summary-cell.tsx new file mode 100644 index 000000000..1d558ee9d --- /dev/null +++ b/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 ( + <> + {/* */} + {'change'} + + ); +}; + +SummaryCellView.displayName = 'SummaryCellView'; + +export const SummaryCell = React.memo(SummaryCellView); +SummaryCell.displayName = 'SummaryCell'; diff --git a/libs/market-list/tsconfig.json b/libs/market-list/tsconfig.json new file mode 100644 index 000000000..4c089585e --- /dev/null +++ b/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" + } + ] +} diff --git a/libs/market-list/tsconfig.lib.json b/libs/market-list/tsconfig.lib.json new file mode 100644 index 000000000..252904bb7 --- /dev/null +++ b/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"] +} diff --git a/libs/market-list/tsconfig.spec.json b/libs/market-list/tsconfig.spec.json new file mode 100644 index 000000000..67f149c4c --- /dev/null +++ b/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" + ] +} diff --git a/libs/react-helpers/src/hooks/use-apply-grid-transaction.ts b/libs/react-helpers/src/hooks/use-apply-grid-transaction.ts new file mode 100644 index 000000000..4eda7be25 --- /dev/null +++ b/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 = ( + 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]); +}; diff --git a/libs/react-helpers/src/index.ts b/libs/react-helpers/src/index.ts index 3a01e2b38..17009c30a 100644 --- a/libs/react-helpers/src/index.ts +++ b/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'; diff --git a/libs/react-helpers/src/lib/format/format.ts b/libs/react-helpers/src/lib/format/format.ts new file mode 100644 index 000000000..cd0478c81 --- /dev/null +++ b/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)); +}; diff --git a/libs/react-helpers/src/lib/format/index.ts b/libs/react-helpers/src/lib/format/index.ts new file mode 100644 index 000000000..16c5b2b50 --- /dev/null +++ b/libs/react-helpers/src/lib/format/index.ts @@ -0,0 +1 @@ +export * from './format'; diff --git a/libs/react-helpers/src/lib/grid-cells/flash-cell.tsx b/libs/react-helpers/src/lib/grid-cells/flash-cell.tsx new file mode 100644 index 000000000..ce7db8c6b --- /dev/null +++ b/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 + * @author Edd + * @author John + */ + +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 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(value: T): T | undefined { + const ref = useRef(); + + useEffect(() => { + ref.current = value; + }, [value]); + + return ref.current; +} + +export const FlashCell = memo(({ children, value }: FlashCellProps) => { + const ref = useRef(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 ( + + {splitText[0]} + {splitText[1]} + + ); +}); diff --git a/libs/react-helpers/src/lib/grid-cells/index.tsx b/libs/react-helpers/src/lib/grid-cells/index.tsx new file mode 100644 index 000000000..aa17139a9 --- /dev/null +++ b/libs/react-helpers/src/lib/grid-cells/index.tsx @@ -0,0 +1,2 @@ +export * from './flash-cell'; +export * from './price-cell'; diff --git a/libs/react-helpers/src/lib/grid-cells/price-cell.tsx b/libs/react-helpers/src/lib/grid-cells/price-cell.tsx new file mode 100644 index 000000000..27daa50d1 --- /dev/null +++ b/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 -; + return ( + + + {valueFormatted} + + + ); +}; + +PriceCell.displayName = 'PriceCell'; diff --git a/package.json b/package.json index a0d575d35..818aab10e 100644 --- a/package.json +++ b/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", diff --git a/tsconfig.base.json b/tsconfig.base.json index e145ef6ad..40946e97c 100644 --- a/tsconfig.base.json +++ b/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" diff --git a/workspace.json b/workspace.json index 9d59509b2..c9dcf01bb 100644 --- a/workspace.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index f1f2ccd93..b18e6114d 100644 --- a/yarn.lock +++ b/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"