From 1a6266e2ec027f719e095924e06c8f6fd150a6fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= Date: Tue, 17 Jan 2023 16:01:24 +0100 Subject: [PATCH 1/2] chore: fix data and no data message update issues in trading data grids (#2620) --- .../portfolio/accounts/accounts.tsx | 21 +- .../portfolio/positions/positions.tsx | 5 +- .../client-pages/liquidity/liquidity.tsx | 185 +++++------------- .../portfolio/deposits-container.tsx | 21 +- libs/accounts/src/lib/accounts-manager.tsx | 11 +- libs/deposits/src/lib/deposits-table.tsx | 17 +- libs/fills/src/lib/use-fills-list.ts | 14 +- .../src/lib/ledger-entries-data-provider.ts | 12 +- libs/ledger/src/lib/ledger-entries.mock.ts | 2 +- .../src/lib/liquidity-data-provider.ts | 66 ++++--- .../src/lib/liquidity-table.spec.tsx | 6 +- libs/liquidity/src/lib/liquidity-table.tsx | 14 +- libs/market-depth/src/lib/depth-chart.tsx | 3 +- .../markets-container/markets-container.tsx | 13 +- .../order-list-manager/use-order-list-data.ts | 14 +- libs/positions/src/lib/positions-manager.tsx | 5 +- .../src/lib/use-positions-data.spec.tsx | 42 +--- libs/positions/src/lib/use-positions-data.tsx | 61 ++---- libs/react-helpers/src/index.ts | 1 + libs/react-helpers/src/lib/ag-grid-update.ts | 28 +++ 20 files changed, 224 insertions(+), 317 deletions(-) create mode 100644 libs/react-helpers/src/lib/ag-grid-update.ts diff --git a/apps/console-lite/src/app/components/portfolio/accounts/accounts.tsx b/apps/console-lite/src/app/components/portfolio/accounts/accounts.tsx index 24c81b37b..c61038a00 100644 --- a/apps/console-lite/src/app/components/portfolio/accounts/accounts.tsx +++ b/apps/console-lite/src/app/components/portfolio/accounts/accounts.tsx @@ -33,17 +33,16 @@ const AccountsManager = () => { update, variables, }); - const getRows = async ({ - successCallback, - startRow, - endRow, - }: IGetRowsParams) => { - const rowsThisBlock = dataRef.current - ? dataRef.current.slice(startRow, endRow) - : []; - const lastRow = dataRef.current ? dataRef.current.length : 0; - successCallback(rowsThisBlock, lastRow); - }; + const getRows = useCallback( + async ({ successCallback, startRow, endRow }: IGetRowsParams) => { + const rowsThisBlock = dataRef.current + ? dataRef.current.slice(startRow, endRow) + : []; + const lastRow = dataRef.current ? dataRef.current.length : 0; + successCallback(rowsThisBlock, lastRow); + }, + [] + ); const { columnDefs, defaultColDef } = useAccountColumnDefinitions(); return ( <> diff --git a/apps/console-lite/src/app/components/portfolio/positions/positions.tsx b/apps/console-lite/src/app/components/portfolio/positions/positions.tsx index 675e24825..55101afb5 100644 --- a/apps/console-lite/src/app/components/portfolio/positions/positions.tsx +++ b/apps/console-lite/src/app/components/portfolio/positions/positions.tsx @@ -13,7 +13,7 @@ import useColumnDefinitions from './use-column-definitions'; const Positions = () => { const gridRef = useRef(null); const { partyId } = useOutletContext<{ partyId: string }>(); - const { data, error, loading } = usePositionsData(partyId, gridRef); + const { data, error, loading, getRows } = usePositionsData(partyId, gridRef); const { columnDefs, defaultColDef } = useColumnDefinitions(); return ( { columnDefs={columnDefs} defaultColDef={defaultColDef} getRowId={getRowId} - rowData={data || undefined} + rowModelType="infinite" + datasource={{ getRows }} components={{ PriceFlashCell }} /> diff --git a/apps/trading/client-pages/liquidity/liquidity.tsx b/apps/trading/client-pages/liquidity/liquidity.tsx index 541ffb973..9cbbe5017 100644 --- a/apps/trading/client-pages/liquidity/liquidity.tsx +++ b/apps/trading/client-pages/liquidity/liquidity.tsx @@ -12,6 +12,7 @@ import { t, useDataProvider, useNetworkParams, + updateGridData, } from '@vegaprotocol/react-helpers'; import * as Schema from '@vegaprotocol/types'; import { @@ -22,21 +23,18 @@ import { Indicator, } from '@vegaprotocol/ui-toolkit'; import { useVegaWallet } from '@vegaprotocol/wallet'; -import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { useCallback, useEffect, useMemo, useRef } from 'react'; import { Header, HeaderStat } from '../../components/header'; import type { AgGridReact } from 'ag-grid-react'; +import type { IGetRowsParams } from 'ag-grid-community'; + import type { LiquidityProvisionData } from '@vegaprotocol/liquidity'; import { Link, useParams } from 'react-router-dom'; import { Links, Routes } from '../../pages/client-router'; -import type { - MarketData, - MarketDataUpdateFieldsFragment, - MarketDealTicket, - SingleMarketFieldsFragment, -} from '@vegaprotocol/market-list'; -import { marketProvider, marketDataProvider } from '@vegaprotocol/market-list'; + +import { useMarket, useStaticMarketData } from '@vegaprotocol/market-list'; export const Liquidity = () => { const params = useParams(); @@ -44,86 +42,42 @@ export const Liquidity = () => { return ; }; +const useReloadLiquidityData = (marketId: string | undefined) => { + const { reload } = useDataProvider({ + dataProvider: liquidityProvisionsDataProvider, + variables: useMemo(() => ({ marketId }), [marketId]), + }); + useEffect(() => { + const interval = setInterval(reload, 10000); + return () => clearInterval(interval); + }, [reload]); +}; + export const LiquidityContainer = ({ marketId, }: { marketId: string | undefined; }) => { const gridRef = useRef(null); - const [market, setMarket] = useState(null); - const variables = useMemo( - () => ({ - marketId: marketId, - }), - [marketId] - ); - - const { data: marketProvision } = useDataProvider< - SingleMarketFieldsFragment, - never - >({ - dataProvider: marketProvider, - variables, - skip: !marketId, - }); - - const updateMarket = useCallback( - ({ data: marketData }: { data: MarketData | null }) => { - if (marketData) { - setMarket({ - ...marketProvision, - data: marketData, - } as MarketDealTicket); - } - return true; - }, - [marketProvision] - ); - - useDataProvider({ - dataProvider: marketDataProvider, - update: updateMarket, - variables, - skip: !marketId || !marketProvision, - }); + const market = useMarket(marketId); const dataRef = useRef(null); - const { reload } = useDataProvider({ - dataProvider: liquidityProvisionsDataProvider, - variables, - }); + // To be removed when liquidityProvision subscriptions are working + useReloadLiquidityData(marketId); const update = useCallback( ({ data }: { data: LiquidityProvisionData[] | null }) => { - if (!gridRef.current?.api) { - return false; - } - if (dataRef.current?.length) { - dataRef.current = data; - gridRef.current.api.refreshInfiniteCache(); - return true; - } - return false; + return updateGridData(dataRef, data, gridRef); }, [gridRef] ); - const { - data: liquidityProviders, - loading, - error, - } = useDataProvider({ + const { data, loading, error } = useDataProvider({ dataProvider: lpAggregatedDataProvider, update, variables: useMemo(() => ({ marketId }), [marketId]), }); - // To be removed when liquidityProvision subscriptions are working - useEffect(() => { - const interval = setInterval(reload, 10000); - return () => clearInterval(interval); - }, [reload]); - const assetDecimalPlaces = market?.tradableInstrument.instrument.product.settlementAsset.decimals || 0; const symbol = @@ -133,28 +87,38 @@ export const LiquidityContainer = ({ NetworkParams.market_liquidity_stakeToCcyVolume, ]); const stakeToCcyVolume = params.market_liquidity_stakeToCcyVolume; - const filteredEdges = useMemo( - () => - liquidityProviders?.filter((e) => - [ - Schema.LiquidityProvisionStatus.STATUS_ACTIVE, - Schema.LiquidityProvisionStatus.STATUS_UNDEPLOYED, - Schema.LiquidityProvisionStatus.STATUS_PENDING, - ].includes(e.status) - ), - [liquidityProviders] + + const getRows = useCallback( + async ({ successCallback, startRow, endRow }: IGetRowsParams) => { + const rowsThisBlock = dataRef.current + ? dataRef.current.slice(startRow, endRow) + : []; + const lastRow = dataRef.current ? dataRef.current.length : 0; + successCallback(rowsThisBlock, lastRow); + }, + [] ); return ( - +
- +
+ !data?.length} + /> +
+
); }; @@ -165,48 +129,13 @@ export const LiquidityViewContainer = ({ }) => { const { pubKey } = useVegaWallet(); const gridRef = useRef(null); - const [market, setMarket] = useState(null); - const variables = useMemo( - () => ({ - marketId: marketId, - }), - [marketId] - ); + const market = useMarket(marketId); + const marketData = useStaticMarketData(marketId); - const { data: marketProvision } = useDataProvider< - SingleMarketFieldsFragment, - never - >({ - dataProvider: marketProvider, - variables, - skip: !marketId, - }); - - const updateMarket = useCallback( - ({ data: marketData }: { data: MarketData | null }) => { - if (marketData) { - setMarket({ - ...marketProvision, - data: marketData, - } as MarketDealTicket); - } - return true; - }, - [marketProvision] - ); - - useDataProvider({ - dataProvider: marketDataProvider, - update: updateMarket, - variables, - skip: !marketId || !marketProvision, - }); const dataRef = useRef(null); - const { reload } = useDataProvider({ - dataProvider: liquidityProvisionsDataProvider, - variables: useMemo(() => ({ marketId }), [marketId]), - }); + // To be removed when liquidityProvision subscriptions are working + useReloadLiquidityData(marketId); const update = useCallback( ({ data }: { data: LiquidityProvisionData[] | null }) => { @@ -233,14 +162,8 @@ export const LiquidityViewContainer = ({ variables: useMemo(() => ({ marketId }), [marketId]), }); - // To be removed when liquidityProvision subscriptions are working - useEffect(() => { - const interval = setInterval(reload, 10000); - return () => clearInterval(interval); - }, [reload]); - - const targetStake = market?.data?.targetStake; - const suppliedStake = market?.data?.suppliedStake; + const targetStake = marketData?.targetStake; + const suppliedStake = marketData?.suppliedStake; const assetDecimalPlaces = market?.tradableInstrument.instrument.product.settlementAsset.decimals || 0; const symbol = @@ -359,7 +282,7 @@ export const LiquidityViewContainer = ({ {myLpEdges && ( { return (
-
- { - return ; - }} +
+ null} /> +
+ !(data && data.length)} + noDataMessage={t('No deposits')} + /> +