chore(trading): handle timeout and offline errors (#2918)

apps/trading/client-pages/portfolio/deposits-container.tsx

@@ -6,7 +6,7 @@ import { useVegaWallet } from '@vegaprotocol/wallet';
 
 export const DepositsContainer = () => {
   const { pubKey, isReadOnly } = useVegaWallet();
-  const { data, loading, error } = useDataProvider({
+  const { data, loading, error, reload } = useDataProvider({
     dataProvider: depositsProvider,
     variables: { partyId: pubKey || '' },
     skip: !pubKey,
@@ -27,6 +27,7 @@ export const DepositsContainer = () => {
             error={error}
             noDataCondition={(data) => !(data && data.length)}
             noDataMessage={t('No deposits')}
+            reload={reload}
           />
         </div>
       </div>

apps/trading/client-pages/portfolio/withdrawals-container.tsx

@@ -10,7 +10,7 @@ import { VegaWalletContainer } from '../../components/vega-wallet-container';
 
 export const WithdrawalsContainer = () => {
   const { pubKey, isReadOnly } = useVegaWallet();
-  const { data, loading, error } = useDataProvider({
+  const { data, loading, error, reload } = useDataProvider({
     dataProvider: withdrawalProvider,
     variables: { partyId: pubKey || '' },
     skip: !pubKey,
@@ -33,6 +33,7 @@ export const WithdrawalsContainer = () => {
               error={error}
               noDataCondition={(data) => !(data && data.length)}
               noDataMessage={t('No withdrawals')}
+              reload={reload}
             />
           </div>
         </div>

libs/accounts/src/lib/accounts-manager.tsx

@@ -24,7 +24,10 @@ export const AccountManager = ({
   const gridRef = useRef<AgGridReact | null>(null);
   const variables = useMemo(() => ({ partyId }), [partyId]);
 
-  const { data, loading, error } = useDataProvider<AccountFields[], never>({
+  const { data, loading, error, reload } = useDataProvider<
+    AccountFields[],
+    never
+  >({
     dataProvider: aggregatedAccountsDataProvider,
     variables,
   });
@@ -32,7 +35,7 @@ export const AccountManager = ({
     <div className="relative h-full">
       <AccountTable
         ref={gridRef}
-        rowData={data}
+        rowData={error ? [] : data}
         onClickAsset={onClickAsset}
         onClickDeposit={onClickDeposit}
         onClickWithdraw={onClickWithdraw}
@@ -46,6 +49,7 @@ export const AccountManager = ({
           error={error}
           loading={loading}
           noDataMessage={t('No accounts')}
+          reload={reload}
         />
       </div>
     </div>

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

@@ -25,6 +25,7 @@ export const DealTicketContainer = ({
     data: marketData,
     error: marketDataError,
     loading: marketDataLoading,
+    reload,
   } = useThrottledDataProvider(
     {
       dataProvider: marketDataProvider,
@@ -39,6 +40,7 @@ export const DealTicketContainer = ({
       data={market && marketData}
       loading={marketLoading || marketDataLoading}
       error={marketError || marketDataError}
+      reload={reload}
     >
       {market && marketData ? (
         <DealTicket

libs/fills/src/lib/fills-manager.tsx

@@ -19,7 +19,7 @@ export const FillsManager = ({
 }: FillsManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
   const scrolledToTop = useRef(true);
-  const { data, error, loading, addNewRows, getRows } = useFillsList({
+  const { data, error, loading, addNewRows, getRows, reload } = useFillsList({
     partyId,
     marketId,
     gridRef,
@@ -55,6 +55,7 @@ export const FillsManager = ({
           data={data}
           noDataMessage={t('No fills')}
           noDataCondition={(data) => !(data && data.length)}
+          reload={reload}
         />
       </div>
     </div>

libs/fills/src/lib/use-fills-list.ts

@@ -78,7 +78,7 @@ export const useFillsList = ({
 
   const variables = useMemo(() => ({ partyId, marketId }), [partyId, marketId]);
 
-  const { data, error, loading, load, totalCount } = useDataProvider<
+  const { data, error, loading, load, totalCount, reload } = useDataProvider<
     (TradeEdge | null)[],
     Trade[]
   >({
@@ -95,5 +95,5 @@ export const useFillsList = ({
     load,
     newRows
   );
-  return { data, error, loading, addNewRows, getRows };
+  return { data, error, loading, addNewRows, getRows, reload };
 };

libs/governance/src/lib/proposals-list/proposals-list.tsx

@@ -29,14 +29,19 @@ export const ProposalsList = () => {
       proposalType: Types.ProposalType.TYPE_NEW_MARKET,
     };
   }, []);
-  const { data, loading, error } = useDataProvider({
+  const { data, loading, error, reload } = useDataProvider({
     dataProvider: proposalsListDataProvider,
     variables,
   });
   const filteredData = getNewMarketProposals(data || []);
   const { columnDefs, defaultColDef } = useColumnDefs();
   return (
-    <AsyncRenderer loading={loading} error={error} data={filteredData}>
+    <AsyncRenderer
+      loading={loading}
+      error={error}
+      data={filteredData}
+      reload={reload}
+    >
       <AgGrid
         ref={gridRef}
         domLayout="autoHeight"

libs/ledger/src/lib/LedgerEntries.graphql

@@ -35,6 +35,7 @@ query LedgerEntries(
       node {
         ...LedgerEntry
       }
+      cursor
     }
     pageInfo {
       startCursor

libs/ledger/src/lib/__generated__/LedgerEntries.ts

@@ -14,7 +14,7 @@ export type LedgerEntriesQueryVariables = Types.Exact<{
 }>;
 
 
-export type LedgerEntriesQuery = { __typename?: 'Query', ledgerEntries: { __typename?: 'AggregatedLedgerEntriesConnection', edges: Array<{ __typename?: 'AggregatedLedgerEntriesEdge', node: { __typename?: 'AggregatedLedgerEntry', vegaTime: any, quantity: string, assetId?: string | null, transferType?: Types.TransferType | null, toAccountType?: Types.AccountType | null, toAccountMarketId?: string | null, toAccountPartyId?: string | null, toAccountBalance: string, fromAccountType?: Types.AccountType | null, fromAccountMarketId?: string | null, fromAccountPartyId?: string | null, fromAccountBalance: string } } | null>, pageInfo: { __typename?: 'PageInfo', startCursor: string, endCursor: string, hasNextPage: boolean, hasPreviousPage: boolean } } };
+export type LedgerEntriesQuery = { __typename?: 'Query', ledgerEntries: { __typename?: 'AggregatedLedgerEntriesConnection', edges: Array<{ __typename?: 'AggregatedLedgerEntriesEdge', cursor: string, node: { __typename?: 'AggregatedLedgerEntry', vegaTime: any, quantity: string, assetId?: string | null, transferType?: Types.TransferType | null, toAccountType?: Types.AccountType | null, toAccountMarketId?: string | null, toAccountPartyId?: string | null, toAccountBalance: string, fromAccountType?: Types.AccountType | null, fromAccountMarketId?: string | null, fromAccountPartyId?: string | null, fromAccountBalance: string } } | null>, pageInfo: { __typename?: 'PageInfo', startCursor: string, endCursor: string, hasNextPage: boolean, hasPreviousPage: boolean } } };
 
 export const LedgerEntryFragmentDoc = gql`
     fragment LedgerEntry on AggregatedLedgerEntry {
@@ -43,6 +43,7 @@ export const LedgerEntriesDocument = gql`
       node {
         ...LedgerEntry
       }
+      cursor
     }
     pageInfo {
       startCursor

libs/ledger/src/lib/ledger-entries-data-provider.ts

@@ -128,7 +128,11 @@ export const ledgerEntriesProvider = makeDerivedDataProvider<
       const marketReceiver = markets.find(
         (market: Market) => market.id === entry.toAccountMarketId
       );
-      return { node: { ...entry, asset, marketSender, marketReceiver } };
+      const cursor = edge?.cursor;
+      return {
+        node: { ...entry, asset, marketSender, marketReceiver },
+        cursor,
+      };
     });
   }
 );
@@ -172,14 +176,13 @@ export const useLedgerEntriesDataProvider = ({
       data: (AggregatedLedgerEntriesEdge | null)[] | null;
       totalCount?: number;
     }) => {
-      dataRef.current = data;
       totalCountRef.current = totalCount;
       return updateGridData(dataRef, data, gridRef);
     },
     [gridRef]
   );
 
-  const { data, error, loading, load, totalCount } = useDataProvider({
+  const { data, error, loading, load, totalCount, reload } = useDataProvider({
     dataProvider: ledgerEntriesProvider,
     update,
     insert,
@@ -193,5 +196,5 @@ export const useLedgerEntriesDataProvider = ({
     totalCountRef,
     load
   );
-  return { loading, error, data, getRows };
+  return { loading, error, data, getRows, reload };
 };

libs/ledger/src/lib/ledger-entries.mock.ts

@@ -16,6 +16,7 @@ export const ledgerEntriesQuery = (
       edges: ledgerEntries.map((node) => ({
         __typename: 'AggregatedLedgerEntriesEdge',
         node,
+        cursor: 'cursor-1',
       })),
       pageInfo: {
         startCursor:

libs/ledger/src/lib/ledger-manager.tsx

@@ -21,11 +21,12 @@ export const LedgerManager = ({ partyId }: LedgerManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
   const [filter, setFilter] = useState<Filter | undefined>();
 
-  const { data, error, loading, getRows } = useLedgerEntriesDataProvider({
+  const { data, error, loading, getRows, reload } =
-    partyId,
+    useLedgerEntriesDataProvider({
-    filter,
+      partyId,
-    gridRef,
+      filter,
-  });
+      gridRef,
+    });
 
   const onFilterChanged = useCallback(
     (event: FilterChangedEvent) => {
@@ -38,7 +39,11 @@ export const LedgerManager = ({ partyId }: LedgerManagerProps) => {
     },
     [filter]
   );
-
+  const getRowId = useCallback(
+    ({ data }: { data: Types.AggregatedLedgerEntry }) =>
+      `${data.vegaTime}-${data.fromAccountPartyId}-${data.toAccountPartyId}`,
+    []
+  );
   return (
     <div className="h-full relative">
       <LedgerTable
@@ -46,6 +51,7 @@ export const LedgerManager = ({ partyId }: LedgerManagerProps) => {
         rowModelType="infinite"
         datasource={{ getRows }}
         onFilterChanged={onFilterChanged}
+        getRowId={getRowId}
       />
       <div className="pointer-events-none absolute inset-0">
         <AsyncRenderer
@@ -54,6 +60,7 @@ export const LedgerManager = ({ partyId }: LedgerManagerProps) => {
           data={data}
           noDataMessage={t('No entries')}
           noDataCondition={(data) => !(data && data.length)}
+          reload={reload}
         />
       </div>
     </div>

libs/market-depth/src/lib/orderbook-manager.tsx

@@ -85,7 +85,7 @@ export const OrderbookManager = ({ marketId }: OrderbookManagerProps) => {
     [marketId, updateOrderbookData]
   );
 
-  const { data, error, loading, flush } = useDataProvider({
+  const { data, error, loading, flush, reload } = useDataProvider({
     dataProvider: marketDepthProvider,
     update,
     variables,
@@ -156,6 +156,7 @@ export const OrderbookManager = ({ marketId }: OrderbookManagerProps) => {
       loading={loading || marketDataLoading || marketLoading}
       error={error || marketDataError || marketError}
       data={data}
+      reload={reload}
     >
       <Orderbook
         {...orderbookData}

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

@@ -69,14 +69,14 @@ export const MarketInfoContainer = ({
     [marketId, yTimestamp]
   );
 
-  const { data, loading, error } = useDataProvider({
+  const { data, loading, error, reload } = useDataProvider({
     dataProvider: marketInfoDataProvider,
     skipUpdates: true,
     variables,
   });
 
   return (
-    <AsyncRenderer data={data} loading={loading} error={error}>
+    <AsyncRenderer data={data} loading={loading} error={error} reload={reload}>
       {data && data.market ? (
         <Info market={data.market} onSelect={(id) => onSelect?.(id)} />
       ) : (

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

@@ -10,7 +10,7 @@ interface MarketsContainerProps {
 }
 
 export const MarketsContainer = ({ onSelect }: MarketsContainerProps) => {
-  const { data, error, loading } = useDataProvider({
+  const { data, error, loading, reload } = useDataProvider({
     dataProvider,
     skipUpdates: true,
   });
@@ -18,7 +18,8 @@ export const MarketsContainer = ({ onSelect }: MarketsContainerProps) => {
   return (
     <div className="h-full relative">
       <MarketListTable
-        rowData={data}
+        rowData={error ? [] : data}
+        noRowsOverlayComponent={() => null}
         onRowClicked={(rowEvent: RowClickedEvent) => {
           const { data, event } = rowEvent;
           // filters out clicks on the symbol column because it should display asset details
@@ -36,6 +37,7 @@ export const MarketsContainer = ({ onSelect }: MarketsContainerProps) => {
           error={error}
           data={data}
           noDataMessage={t('No markets')}
+          reload={reload}
         />
       </div>
     </div>

libs/orders/src/lib/components/order-data-provider/order-data-provider.ts

@@ -155,6 +155,7 @@ export const ordersProvider = makeDataProvider({
     append,
     first: 100,
   },
+  additionalContext: { isEnlargedTimeout: true },
 });
 
 export const ordersWithMarketProvider = makeDerivedDataProvider<

libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx

@@ -83,14 +83,15 @@ export const OrderListManager = ({
   const create = useVegaTransactionStore((state) => state.create);
   const hasActiveOrder = useHasActiveOrder(marketId);
 
-  const { data, error, loading, addNewRows, getRows } = useOrderListData({
+  const { data, error, loading, addNewRows, getRows, reload } =
-    partyId,
+    useOrderListData({
-    marketId,
+      partyId,
-    sort,
+      marketId,
-    filter,
+      sort,
-    gridRef,
+      filter,
-    scrolledToTop,
+      gridRef,
-  });
+      scrolledToTop,
+    });
 
   const onBodyScrollEnd = (event: BodyScrollEndEvent) => {
     if (event.top === 0) {
@@ -128,7 +129,7 @@ export const OrderListManager = ({
   return (
     <>
       <div className="h-full relative grid grid-rows-[1fr,min-content]">
-        <div className="h-full relative">
+        <div className="relative">
           <OrderListTable
             ref={gridRef}
             rowModelType="infinite"
@@ -149,6 +150,8 @@ export const OrderListManager = ({
             setEditOrder={setEditOrder}
             onMarketClick={onMarketClick}
             isReadOnly={isReadOnly}
+            hasActiveOrder={hasActiveOrder}
+            blockLoadDebounceMillis={100}
           />
           <div className="pointer-events-none absolute inset-0">
             <AsyncRenderer
@@ -157,6 +160,7 @@ export const OrderListManager = ({
               data={data}
               noDataMessage={t('No orders')}
               noDataCondition={(data) => !(data && data.length)}
+              reload={reload}
             />
           </div>
         </div>

libs/orders/src/lib/components/order-list-manager/use-order-list-data.ts

@@ -119,7 +119,7 @@ export const useOrderListData = ({
     [gridRef]
   );
 
-  const { data, error, loading, load, totalCount } = useDataProvider({
+  const { data, error, loading, load, totalCount, reload } = useDataProvider({
     dataProvider: ordersWithMarketProvider,
     update,
     insert,
@@ -133,5 +133,5 @@ export const useOrderListData = ({
     load,
     newRows
   );
-  return { loading, error, data, addNewRows, getRows };
+  return { loading, error, data, addNewRows, getRows, reload };
 };

libs/orders/src/lib/components/order-list/order-list.tsx

@@ -33,20 +33,24 @@ export type OrderListTableProps = OrderListProps & {
   setEditOrder: (order: Order) => void;
   onMarketClick?: (marketId: string) => void;
   isReadOnly: boolean;
+  hasActiveOrder?: boolean;
 };
 
 export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
-  ({ cancel, setEditOrder, onMarketClick, ...props }, ref) => {
+  ({ cancel, setEditOrder, onMarketClick, hasActiveOrder, ...props }, ref) => {
     return (
       <AgGrid
         ref={ref}
-        overlayNoRowsTemplate="No orders"
+        overlayNoRowsTemplate={t('No orders')}
         defaultColDef={{
           flex: 1,
           resizable: true,
           filterParams: { buttons: ['reset'] },
         }}
-        style={{ width: '100%', height: '100%' }}
+        style={{
+          width: '100%',
+          height: hasActiveOrder ? 'calc(100% - 46px)' : '100%',
+        }}
         getRowId={({ data }) => data.id}
         {...props}
       >

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

@@ -18,7 +18,11 @@ export const PositionsManager = ({
   isReadOnly,
 }: PositionsManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
-  const { data, error, loading } = usePositionsData(partyId, gridRef, true);
+  const { data, error, loading, reload } = usePositionsData(
+    partyId,
+    gridRef,
+    true
+  );
   const create = useVegaTransactionStore((store) => store.create);
   const onClose = ({
     marketId,
@@ -51,7 +55,7 @@ export const PositionsManager = ({
   return (
     <div className="h-full relative">
       <PositionsTable
-        rowData={data}
+        rowData={error ? [] : data}
         ref={gridRef}
         onMarketClick={onMarketClick}
         onClose={onClose}
@@ -65,6 +69,7 @@ export const PositionsManager = ({
           data={data}
           noDataMessage={t('No positions')}
           noDataCondition={(data) => !(data && data.length)}
+          reload={reload}
         />
       </div>
     </div>

libs/positions/src/lib/use-positions-data.tsx

@@ -25,7 +25,7 @@ export const usePositionsData = (
     },
     [gridRef, clientSideModel]
   );
-  const { data, error, loading } = useDataProvider({
+  const { data, error, loading, reload } = useDataProvider({
     dataProvider: positionsMetricsProvider,
     update,
     variables,
@@ -45,5 +45,6 @@ export const usePositionsData = (
     error,
     loading,
     getRows,
+    reload,
   };
 };

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

@@ -80,6 +80,7 @@ export const useDataProvider = <
     }
   }, []);
   const reload = useCallback((force = false) => {
+    initialized.current = false;
     if (reloadRef.current) {
       reloadRef.current(force);
     }

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

@@ -17,7 +17,7 @@ const getLastRow = (
       lastRow = totalCount;
     }
   } else if (blockLength < endRow - startRow) {
-    lastRow = blockLength;
+    lastRow = blockLength + startRow;
   }
   return lastRow;
 };

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

@@ -82,7 +82,7 @@ export const TradesContainer = ({ marketId }: TradesContainerProps) => {
     []
   );
 
-  const { data, error, loading, load, totalCount } = useDataProvider({
+  const { data, error, loading, load, totalCount, reload } = useDataProvider({
     dataProvider: tradesWithMarketProvider,
     update,
     insert,
@@ -107,7 +107,7 @@ export const TradesContainer = ({ marketId }: TradesContainerProps) => {
   };
 
   return (
-    <AsyncRenderer loading={loading} error={error} data={data}>
+    <AsyncRenderer loading={loading} error={error} data={data} reload={reload}>
       <TradesTable
         ref={gridRef}
         rowModelType={data?.length ? 'infinite' : 'clientSide'}

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

@@ -0,0 +1,23 @@
+import { render, act, screen } from '@testing-library/react';
+import { AsyncRenderer } from './async-renderer';
+
+describe('AsyncRenderer', () => {
+  it('timeout error should render button', async () => {
+    const reload = jest.fn();
+    await act(() => {
+      render(
+        <AsyncRenderer
+          reload={reload}
+          error={new Error('Timeout exceeded')}
+          loading={false}
+          data={undefined}
+        />
+      );
+    });
+    expect(screen.getByRole('button')).toBeInTheDocument();
+    await act(() => {
+      screen.getByRole('button').click();
+    });
+    expect(reload).toHaveBeenCalled();
+  });
+});

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

@@ -1,6 +1,7 @@
 import { Splash } from '../splash';
 import type { ReactNode } from 'react';
 import { t } from '@vegaprotocol/react-helpers';
+import { Button } from '../button';
 
 interface AsyncRendererProps<T> {
   loading: boolean;
@@ -12,6 +13,7 @@ interface AsyncRendererProps<T> {
   children?: ReactNode | null;
   render?: (data: T) => ReactNode;
   noDataCondition?(data?: T): boolean;
+  reload?: () => void;
 }
 
 export function AsyncRenderer<T = object>({
@@ -24,15 +26,30 @@ export function AsyncRenderer<T = object>({
   noDataCondition,
   children,
   render,
+  reload,
 }: AsyncRendererProps<T>) {
   if (error) {
     if (!data) {
       return (
-        <Splash>
+        <div className="h-full flex items-center justify-center">
-          {errorMessage
+          <div className="h-12 flex flex-col  items-center">
-            ? errorMessage
+            <Splash>
-            : t(`Something went wrong: ${error.message}`)}
+              {errorMessage
-        </Splash>
+                ? errorMessage
+                : t(`Something went wrong: ${error.message}`)}
+            </Splash>
+            {reload && error.message === 'Timeout exceeded' && (
+              <Button
+                size="sm"
+                className="pointer-events-auto"
+                type="button"
+                onClick={reload}
+              >
+                {t('Try again')}
+              </Button>
+            )}
+          </div>
+        </div>
       );
     }
   }