90 lines
2.6 KiB
TypeScript
90 lines
2.6 KiB
TypeScript
import { useDataProvider } from '@vegaprotocol/data-provider';
|
|
import { useDataGridEvents } from '@vegaprotocol/datagrid';
|
|
import {
|
|
lpAggregatedDataProvider,
|
|
type Filter,
|
|
LiquidityTable,
|
|
liquidityProvisionsDataProvider,
|
|
} from '@vegaprotocol/liquidity';
|
|
import { getAsset, useMarket } from '@vegaprotocol/markets';
|
|
import {
|
|
NetworkParams,
|
|
useNetworkParams,
|
|
} from '@vegaprotocol/network-parameters';
|
|
import type { DataGridSlice } from '../../stores/datagrid-store-slice';
|
|
import { createDataGridSlice } from '../../stores/datagrid-store-slice';
|
|
import { useEffect } from 'react';
|
|
import { create } from 'zustand';
|
|
import { persist } from 'zustand/middleware';
|
|
import { useT } from '../../lib/use-t';
|
|
|
|
export const LiquidityContainer = ({
|
|
marketId,
|
|
filter,
|
|
}: {
|
|
marketId: string | undefined;
|
|
filter?: Filter;
|
|
}) => {
|
|
const t = useT();
|
|
const gridStore = useLiquidityStore((store) => store.gridStore);
|
|
const updateGridStore = useLiquidityStore((store) => store.updateGridStore);
|
|
|
|
const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
|
|
updateGridStore(colState);
|
|
});
|
|
const { data: market } = useMarket(marketId);
|
|
|
|
// To be removed when liquidityProvision subscriptions are working
|
|
useReloadLiquidityData(marketId);
|
|
|
|
const { data, error } = useDataProvider({
|
|
dataProvider: lpAggregatedDataProvider,
|
|
variables: { marketId: marketId || '', filter },
|
|
skip: !marketId,
|
|
});
|
|
|
|
const itemAsset = market && getAsset(market);
|
|
|
|
const assetDecimalPlaces = itemAsset?.decimals || 0;
|
|
const quantum = itemAsset?.quantum || 0;
|
|
const symbol = itemAsset?.symbol;
|
|
|
|
const { params } = useNetworkParams([
|
|
NetworkParams.market_liquidity_stakeToCcyVolume,
|
|
]);
|
|
const stakeToCcyVolume = params.market_liquidity_stakeToCcyVolume;
|
|
|
|
return (
|
|
<div className="h-full relative">
|
|
<LiquidityTable
|
|
rowData={data}
|
|
symbol={symbol}
|
|
assetDecimalPlaces={assetDecimalPlaces}
|
|
quantum={quantum}
|
|
stakeToCcyVolume={stakeToCcyVolume}
|
|
overlayNoRowsTemplate={error ? error.message : t('No data')}
|
|
{...gridStoreCallbacks}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const useReloadLiquidityData = (marketId: string | undefined) => {
|
|
const { reload } = useDataProvider({
|
|
dataProvider: liquidityProvisionsDataProvider,
|
|
variables: { marketId: marketId || '' },
|
|
update: () => true,
|
|
skip: !marketId,
|
|
});
|
|
useEffect(() => {
|
|
const interval = setInterval(reload, 30000);
|
|
return () => clearInterval(interval);
|
|
}, [reload]);
|
|
};
|
|
|
|
const useLiquidityStore = create<DataGridSlice>()(
|
|
persist(createDataGridSlice, {
|
|
name: 'vega_ledger_store',
|
|
})
|
|
);
|