LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Maciek 2023-02-16 17:30:32 +01:00 committed by GitHub
parent 9dfed0a211
commit b2a115f935
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 136 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/trading/client-pages/portfolio/deposits-container.tsx
View File

@ -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>

3
apps/trading/client-pages/portfolio/withdrawals-container.tsx
View File

@ -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>

8
libs/accounts/src/lib/accounts-manager.tsx
View File

@ -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>

2
libs/deal-ticket/src/components/deal-ticket/deal-ticket-container.tsx
View File

@ -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

3
libs/fills/src/lib/fills-manager.tsx
View File

@ -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>

4
libs/fills/src/lib/use-fills-list.ts
View File

@ -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 };
};

9
libs/governance/src/lib/proposals-list/proposals-list.tsx
View File

@ -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"

1
libs/ledger/src/lib/LedgerEntries.graphql
View File

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

3
libs/ledger/src/lib/__generated__/LedgerEntries.ts generated
View File

@ -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

11
libs/ledger/src/lib/ledger-entries-data-provider.ts
View File

@ -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 };
};

1
libs/ledger/src/lib/ledger-entries.mock.ts
View File

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

19
libs/ledger/src/lib/ledger-manager.tsx
View File

@ -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({
partyId,
filter,
gridRef,
});
const { data, error, loading, getRows, reload } =
useLedgerEntriesDataProvider({
partyId,
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>

3
libs/market-depth/src/lib/orderbook-manager.tsx
View File

@ -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}

4
libs/market-info/src/components/market-info/info-market.tsx
View File

@ -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)} />
) : (

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

@ -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>

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

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

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

@ -83,14 +83,15 @@ export const OrderListManager = ({
const create = useVegaTransactionStore((state) => state.create);
const hasActiveOrder = useHasActiveOrder(marketId);
const { data, error, loading, addNewRows, getRows } = useOrderListData({
partyId,
marketId,
sort,
filter,
gridRef,
scrolledToTop,
});
const { data, error, loading, addNewRows, getRows, reload } =
useOrderListData({
partyId,
marketId,
sort,
filter,
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>

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

@ -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 };
};

10
libs/orders/src/lib/components/order-list/order-list.tsx
View File

@ -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}
>

9
libs/positions/src/lib/positions-manager.tsx
View File

@ -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>

3
libs/positions/src/lib/use-positions-data.tsx
View File

@ -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,
};
};

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

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

2
libs/react-helpers/src/lib/pagination.ts
View File

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

4
libs/trades/src/lib/trades-container.tsx
View File

@ -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'}

23
libs/ui-toolkit/src/components/async-renderer/async-renderer.spec.tsx Normal file
View File

@ -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();
});
});

27
libs/ui-toolkit/src/components/async-renderer/async-renderer.tsx
View File

@ -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>
{errorMessage
? errorMessage
: t(`Something went wrong: ${error.message}`)}
</Splash>
<div className="h-full flex items-center justify-center">
<div className="h-12 flex flex-col items-center">
<Splash>
{errorMessage
? 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>
);
}
}