feat: persist table columns - enable in all other tables
This commit is contained in:
@@ -111,7 +111,7 @@ const MarketBottomPanel = memo(
|
||||
onMarketClick={onMarketClick}
|
||||
onOrderTypeClick={onOrderTypeClick}
|
||||
enforceBottomPlaceholder
|
||||
id="bottomOrders"
|
||||
id="marketOrders"
|
||||
/>
|
||||
</VegaWalletContainer>
|
||||
</Tab>
|
||||
@@ -120,6 +120,7 @@ const MarketBottomPanel = memo(
|
||||
<TradingViews.Fills
|
||||
marketId={marketId}
|
||||
onMarketClick={onMarketClick}
|
||||
id="marketFills"
|
||||
/>
|
||||
</VegaWalletContainer>
|
||||
</Tab>
|
||||
@@ -138,6 +139,7 @@ const MarketBottomPanel = memo(
|
||||
<TradingViews.Positions
|
||||
onMarketClick={onMarketClick}
|
||||
noBottomPlaceholder
|
||||
id="marketPositions"
|
||||
/>
|
||||
</VegaWalletContainer>
|
||||
</Tab>
|
||||
@@ -147,6 +149,7 @@ const MarketBottomPanel = memo(
|
||||
pinnedAsset={pinnedAsset}
|
||||
noBottomPlaceholder
|
||||
hideButtons
|
||||
id="marketCollateral"
|
||||
/>
|
||||
</VegaWalletContainer>
|
||||
</Tab>
|
||||
@@ -159,7 +162,10 @@ const MarketBottomPanel = memo(
|
||||
<Tabs storageKey="console-trade-grid-bottom">
|
||||
<Tab id="positions" name={t('Positions')}>
|
||||
<VegaWalletContainer>
|
||||
<TradingViews.Positions onMarketClick={onMarketClick} />
|
||||
<TradingViews.Positions
|
||||
onMarketClick={onMarketClick}
|
||||
id="marketPositions"
|
||||
/>
|
||||
</VegaWalletContainer>
|
||||
</Tab>
|
||||
<Tab id="orders" name={t('Orders')}>
|
||||
@@ -169,6 +175,7 @@ const MarketBottomPanel = memo(
|
||||
onMarketClick={onMarketClick}
|
||||
onOrderTypeClick={onOrderTypeClick}
|
||||
enforceBottomPlaceholder
|
||||
id="marketOrders"
|
||||
/>
|
||||
</VegaWalletContainer>
|
||||
</Tab>
|
||||
@@ -177,12 +184,17 @@ const MarketBottomPanel = memo(
|
||||
<TradingViews.Fills
|
||||
marketId={marketId}
|
||||
onMarketClick={onMarketClick}
|
||||
id="marketFills"
|
||||
/>
|
||||
</VegaWalletContainer>
|
||||
</Tab>
|
||||
<Tab id="accounts" name={t('Collateral')}>
|
||||
<VegaWalletContainer>
|
||||
<TradingViews.Collateral pinnedAsset={pinnedAsset} hideButtons />
|
||||
<TradingViews.Collateral
|
||||
pinnedAsset={pinnedAsset}
|
||||
hideButtons
|
||||
id="marketCollateral"
|
||||
/>
|
||||
</VegaWalletContainer>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -53,6 +53,7 @@ export const Portfolio = () => {
|
||||
<PositionsContainer
|
||||
onMarketClick={onMarketClick}
|
||||
noBottomPlaceholder
|
||||
id="portfolioPositions"
|
||||
/>
|
||||
</VegaWalletContainer>
|
||||
</Tab>
|
||||
@@ -67,7 +68,10 @@ export const Portfolio = () => {
|
||||
</Tab>
|
||||
<Tab id="fills" name={t('Fills')}>
|
||||
<VegaWalletContainer>
|
||||
<FillsContainer onMarketClick={onMarketClick} />
|
||||
<FillsContainer
|
||||
onMarketClick={onMarketClick}
|
||||
id="portfolioFills"
|
||||
/>
|
||||
</VegaWalletContainer>
|
||||
</Tab>
|
||||
<Tab id="ledger-entries" name={t('Ledger entries')}>
|
||||
@@ -87,7 +91,7 @@ export const Portfolio = () => {
|
||||
<Tabs storageKey="console-portfolio-bottom">
|
||||
<Tab id="collateral" name={t('Collateral')}>
|
||||
<VegaWalletContainer>
|
||||
<AccountsContainer />
|
||||
<AccountsContainer id="portfolioCollateral" />
|
||||
</VegaWalletContainer>
|
||||
</Tab>
|
||||
<Tab id="deposits" name={t('Deposits')}>
|
||||
|
||||
@@ -13,10 +13,12 @@ export const AccountsContainer = ({
|
||||
pinnedAsset,
|
||||
hideButtons,
|
||||
noBottomPlaceholder,
|
||||
id,
|
||||
}: {
|
||||
pinnedAsset?: PinnedAsset;
|
||||
hideButtons?: boolean;
|
||||
noBottomPlaceholder?: boolean;
|
||||
id?: string;
|
||||
}) => {
|
||||
const { pubKey, isReadOnly } = useVegaWallet();
|
||||
const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
|
||||
@@ -42,6 +44,7 @@ export const AccountsContainer = ({
|
||||
return (
|
||||
<div className="h-full relative">
|
||||
<AccountManager
|
||||
id={id}
|
||||
partyId={pubKey}
|
||||
onClickAsset={onClickAsset}
|
||||
onClickWithdraw={openWithdrawalDialog}
|
||||
|
||||
@@ -19,6 +19,7 @@ interface AccountManagerProps {
|
||||
isReadOnly: boolean;
|
||||
pinnedAsset?: PinnedAsset;
|
||||
noBottomPlaceholder?: boolean;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export const AccountManager = ({
|
||||
@@ -29,6 +30,7 @@ export const AccountManager = ({
|
||||
isReadOnly,
|
||||
pinnedAsset,
|
||||
noBottomPlaceholder,
|
||||
id,
|
||||
}: AccountManagerProps) => {
|
||||
const gridRef = useRef<AgGridReact | null>(null);
|
||||
const variables = useMemo(() => ({ partyId }), [partyId]);
|
||||
@@ -52,6 +54,7 @@ export const AccountManager = ({
|
||||
return (
|
||||
<div className="relative h-full">
|
||||
<AccountTable
|
||||
id={id}
|
||||
ref={gridRef}
|
||||
rowData={error ? [] : data}
|
||||
onClickAsset={onClickAsset}
|
||||
|
||||
@@ -100,6 +100,7 @@ export interface AccountTableProps extends AgGridReactProps {
|
||||
onClickDeposit?: (assetId: string) => void;
|
||||
isReadOnly: boolean;
|
||||
pinnedAsset?: PinnedAsset;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
|
||||
@@ -149,7 +150,6 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
|
||||
(data) => data.asset.id !== pinnedAssetId
|
||||
)}
|
||||
defaultColDef={{
|
||||
flex: 1,
|
||||
resizable: true,
|
||||
tooltipComponent: TooltipCellComponent,
|
||||
sortable: true,
|
||||
@@ -356,6 +356,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
|
||||
);
|
||||
}
|
||||
}}
|
||||
flex={1}
|
||||
/>
|
||||
}
|
||||
</AgGrid>
|
||||
|
||||
@@ -24,6 +24,7 @@ export const DepositsTable = forwardRef<
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<AgGrid
|
||||
id="depositTable"
|
||||
ref={ref}
|
||||
overlayNoRowsTemplate={t('No deposits')}
|
||||
defaultColDef={{ flex: 1, resizable: true }}
|
||||
|
||||
@@ -6,9 +6,11 @@ import { FillsManager } from './fills-manager';
|
||||
export const FillsContainer = ({
|
||||
marketId,
|
||||
onMarketClick,
|
||||
id,
|
||||
}: {
|
||||
marketId?: string;
|
||||
onMarketClick?: (marketId: string, metaKey?: boolean) => void;
|
||||
id?: string;
|
||||
}) => {
|
||||
const { pubKey } = useVegaWallet();
|
||||
|
||||
@@ -25,6 +27,7 @@ export const FillsContainer = ({
|
||||
partyId={pubKey}
|
||||
marketId={marketId}
|
||||
onMarketClick={onMarketClick}
|
||||
id={id}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -12,12 +12,14 @@ interface FillsManagerProps {
|
||||
partyId: string;
|
||||
marketId?: string;
|
||||
onMarketClick?: (marketId: string, metaKey?: boolean) => void;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export const FillsManager = ({
|
||||
partyId,
|
||||
marketId,
|
||||
onMarketClick,
|
||||
id,
|
||||
}: FillsManagerProps) => {
|
||||
const gridRef = useRef<AgGridReact | null>(null);
|
||||
const scrolledToTop = useRef(true);
|
||||
@@ -70,6 +72,7 @@ export const FillsManager = ({
|
||||
return (
|
||||
<div className="h-full relative">
|
||||
<FillsTable
|
||||
id={id}
|
||||
ref={gridRef}
|
||||
partyId={partyId}
|
||||
rowModelType="infinite"
|
||||
|
||||
@@ -34,6 +34,7 @@ export type Role = typeof TAKER | typeof MAKER | '-';
|
||||
export type Props = (AgGridReactProps | AgReactUiProps) & {
|
||||
partyId: string;
|
||||
onMarketClick?: (marketId: string, metaKey?: boolean) => void;
|
||||
id?: string;
|
||||
};
|
||||
|
||||
export const FillsTable = forwardRef<AgGridReact, Props>(
|
||||
@@ -42,7 +43,7 @@ export const FillsTable = forwardRef<AgGridReact, Props>(
|
||||
<AgGrid
|
||||
ref={ref}
|
||||
overlayNoRowsTemplate={t('No fills')}
|
||||
defaultColDef={{ flex: 1, resizable: true }}
|
||||
defaultColDef={{ resizable: true }}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
getRowId={({ data }) => data?.id}
|
||||
tooltipShowDelay={0}
|
||||
|
||||
@@ -49,11 +49,11 @@ export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
|
||||
(props, ref) => {
|
||||
return (
|
||||
<AgGrid
|
||||
id="ledgerTable"
|
||||
style={{ width: '100%', height: 'calc(100% - 50px)' }}
|
||||
ref={ref}
|
||||
tooltipShowDelay={500}
|
||||
defaultColDef={{
|
||||
flex: 1,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
tooltipComponent: TransferTooltipCellComponent,
|
||||
@@ -203,6 +203,7 @@ export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
|
||||
}
|
||||
filterParams={dateRangeFilterParams}
|
||||
filter={DateRangeFilter}
|
||||
flex={1}
|
||||
/>
|
||||
</AgGrid>
|
||||
);
|
||||
|
||||
@@ -6,9 +6,11 @@ import { PositionsManager } from './positions-manager';
|
||||
export const PositionsContainer = ({
|
||||
onMarketClick,
|
||||
noBottomPlaceholder,
|
||||
id,
|
||||
}: {
|
||||
onMarketClick?: (marketId: string) => void;
|
||||
noBottomPlaceholder?: boolean;
|
||||
id?: string;
|
||||
}) => {
|
||||
const { pubKey, isReadOnly } = useVegaWallet();
|
||||
|
||||
@@ -25,6 +27,7 @@ export const PositionsContainer = ({
|
||||
onMarketClick={onMarketClick}
|
||||
isReadOnly={isReadOnly}
|
||||
noBottomPlaceholder={noBottomPlaceholder}
|
||||
id={id}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -13,6 +13,7 @@ interface PositionsManagerProps {
|
||||
onMarketClick?: (marketId: string) => void;
|
||||
isReadOnly: boolean;
|
||||
noBottomPlaceholder?: boolean;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export const PositionsManager = ({
|
||||
@@ -20,6 +21,7 @@ export const PositionsManager = ({
|
||||
onMarketClick,
|
||||
isReadOnly,
|
||||
noBottomPlaceholder,
|
||||
id,
|
||||
}: PositionsManagerProps) => {
|
||||
const gridRef = useRef<AgGridReact | null>(null);
|
||||
const { data, error, loading, reload } = usePositionsData(partyId, gridRef);
|
||||
@@ -82,6 +84,7 @@ export const PositionsManager = ({
|
||||
onFilterChanged={updateRowCount}
|
||||
onRowDataUpdated={updateRowCount}
|
||||
{...bottomPlaceholderProps}
|
||||
id={id}
|
||||
/>
|
||||
<div className="pointer-events-none absolute inset-0">
|
||||
<AsyncRenderer
|
||||
|
||||
@@ -46,6 +46,7 @@ interface Props extends TypedDataAgGrid<Position> {
|
||||
onMarketClick?: (id: string, metaKey?: boolean) => void;
|
||||
style?: CSSProperties;
|
||||
isReadOnly: boolean;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export interface AmountCellProps {
|
||||
@@ -89,7 +90,6 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
|
||||
ref={ref}
|
||||
tooltipShowDelay={500}
|
||||
defaultColDef={{
|
||||
flex: 1,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
filter: true,
|
||||
@@ -368,6 +368,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
|
||||
return getDateTimeFormat().format(new Date(value));
|
||||
}}
|
||||
minWidth={150}
|
||||
flex={1}
|
||||
/>
|
||||
{onClose && !props.isReadOnly ? (
|
||||
<AgGridColumn
|
||||
@@ -383,6 +384,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
|
||||
) : null
|
||||
}
|
||||
minWidth={80}
|
||||
flex={1}
|
||||
/>
|
||||
) : null}
|
||||
</AgGrid>
|
||||
|
||||
@@ -34,6 +34,7 @@ export const WithdrawalsTable = (
|
||||
const bottomPlaceholderProps = useBottomPlaceholder({ gridRef });
|
||||
return (
|
||||
<AgGrid
|
||||
id="withdrawals"
|
||||
overlayNoRowsTemplate={t('No withdrawals')}
|
||||
defaultColDef={{ flex: 1, resizable: true }}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
|
||||
Reference in New Issue
Block a user