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

fix(#2413): collateral table to have separate used available cells (#2436)

Browse Source 
* fix(#2413): separate collateral used and available cells

* fix(#2413): fix accounts table test update

* fix(#2413): move progress bar in breakdown.tsx
This commit is contained in:
m.ray 2022-12-21 05:35:15 -05:00 committed by GitHub
parent 87e1f9998e
commit b6c448b630
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 68 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
libs/accounts/src/lib/accounts-table.spec.tsx
View File

@ -38,7 +38,7 @@ describe('AccountsTable', () => {
<AccountTable rowData={singleRowData} onClickAsset={() => null} />
);
});
const expectedHeaders = ['Asset', 'Total', 'Used', '', ''];
const expectedHeaders = ['Asset', 'Total', 'Used', 'Available', '', ''];
const headers = await screen.findAllByRole('columnheader');
expect(headers).toHaveLength(expectedHeaders.length);
expect(
@ -56,7 +56,8 @@ describe('AccountsTable', () => {
const expectedValues = [
'tBTC',
'1,256.00',
'1,256.001,256.00',
'1,256.00',
'1,256.00',
'Breakdown',
'Deposit',
];

77
libs/accounts/src/lib/accounts-table.tsx
View File

@ -1,21 +1,11 @@
import { forwardRef, useState } from 'react';
import type { ValueFormatterParams } from 'ag-grid-community';
import {
addDecimalsFormatNumber,
isNumeric,
t,
} from '@vegaprotocol/react-helpers';
import type {
ValueProps,
VegaICellRendererParams,
} from '@vegaprotocol/ui-toolkit';
import {
Button,
ButtonLink,
Dialog,
Intent,
progressBarCellRendererSelector,
} from '@vegaprotocol/ui-toolkit';
import type { VegaICellRendererParams } from '@vegaprotocol/ui-toolkit';
import { Button, ButtonLink, Dialog } from '@vegaprotocol/ui-toolkit';
import { TooltipCellComponent } from '@vegaprotocol/ui-toolkit';
import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
import { AgGridColumn } from 'ag-grid-react';
@ -25,33 +15,6 @@ import type { VegaValueFormatterParams } from '@vegaprotocol/ui-toolkit';
import BreakdownTable from './breakdown-table';
import type { AccountFields } from './accounts-data-provider';
export const progressBarValueFormatter = ({
data,
node,
}: ValueFormatterParams): ValueProps['valueFormatted'] | undefined => {
if (!data || node?.rowPinned) {
return undefined;
}
const min = BigInt(data.used);
const mid = BigInt(data.available);
const max = BigInt(data.deposited);
const range = max > min ? max : min;
return {
low: addDecimalsFormatNumber(min.toString(), data.asset.decimals, 4),
high: addDecimalsFormatNumber(mid.toString(), data.asset.decimals, 4),
value: range ? Number((min * BigInt(100)) / range) : 0,
intent: Intent.Warning,
};
};
export const progressBarHeaderComponentParams = {
template:
'<div class="ag-cell-label-container" role="presentation">' +
` <span>${t('Available')}</span>` +
' <span ref="eText" class="ag-header-cell-text"></span>' +
'</div>',
};
export interface GetRowsParams extends Omit<IGetRowsParams, 'successCallback'> {
successCallback(rowsThisBlock: AccountFields[], lastRow?: number): void;
}
@ -134,12 +97,36 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
<AgGridColumn
headerName={t('Used')}
field="used"
flex={2}
minWidth={150}
maxWidth={500}
headerComponentParams={progressBarHeaderComponentParams}
cellRendererSelector={progressBarCellRendererSelector}
valueFormatter={progressBarValueFormatter}
headerTooltip={t(
'This is the amount of collateral used from your general account.'
)}
valueFormatter={({
value,
data,
}: VegaValueFormatterParams<AccountFields, 'used'>) =>
data &&
data.asset &&
isNumeric(value) &&
addDecimalsFormatNumber(value, data.asset.decimals)
}
maxWidth={300}
/>
<AgGridColumn
headerName={t('Available')}
field="available"
headerTooltip={t(
'This is the amount of collateral available in your general account.'
)}
valueFormatter={({
value,
data,
}: VegaValueFormatterParams<AccountFields, 'available'>) =>
data &&
data.asset &&
isNumeric(value) &&
addDecimalsFormatNumber(value, data.asset.decimals)
}
maxWidth={300}
/>
<AgGridColumn
headerName=""

38
libs/accounts/src/lib/breakdown-table.tsx
View File

@ -5,19 +5,47 @@ import {
PriceCell,
t,
} from '@vegaprotocol/react-helpers';
import type { VegaValueFormatterParams } from '@vegaprotocol/ui-toolkit';
import {
AgGridDynamic as AgGrid,
Intent,
progressBarCellRendererSelector,
} from '@vegaprotocol/ui-toolkit';
import { AgGridColumn } from 'ag-grid-react';
import type { AgGridReact, AgGridReactProps } from 'ag-grid-react';
import type { AccountFields } from './accounts-data-provider';
import { AccountTypeMapping } from '@vegaprotocol/types';
import {
progressBarHeaderComponentParams,
progressBarValueFormatter,
} from './accounts-table';
import type {
ValueProps,
VegaValueFormatterParams,
} from '@vegaprotocol/ui-toolkit';
import type { ValueFormatterParams } from 'ag-grid-community';
export const progressBarValueFormatter = ({
data,
node,
}: ValueFormatterParams): ValueProps['valueFormatted'] | undefined => {
if (!data || node?.rowPinned) {
return undefined;
}
const min = BigInt(data.used);
const mid = BigInt(data.available);
const max = BigInt(data.deposited);
const range = max > min ? max : min;
return {
low: addDecimalsFormatNumber(min.toString(), data.asset.decimals, 4),
high: addDecimalsFormatNumber(mid.toString(), data.asset.decimals, 4),
value: range ? Number((min * BigInt(100)) / range) : 0,
intent: Intent.Warning,
};
};
export const progressBarHeaderComponentParams = {
template:
'<div class="ag-cell-label-container" role="presentation">' +
` <span>${t('Available')}</span>` +
' <span ref="eText" class="ag-header-cell-text"></span>' +
'</div>',
};
interface BreakdownTableProps extends AgGridReactProps {
data: AccountFields[] | null;