vega-frontend-monorepo/libs/accounts/src/lib/accounts-manager.tsx

162 lines
4.2 KiB
TypeScript
Raw Normal View History

import { useRef, memo, useState, useCallback } from 'react';
import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import { useDataProvider } from '@vegaprotocol/data-provider';
import type { AgGridReact } from 'ag-grid-react';
import {
aggregatedAccountsDataProvider,
aggregatedAccountDataProvider,
} from './accounts-data-provider';
import type { PinnedAsset } from './accounts-table';
feat(#847): collateral table, add breakdown (#1442) * feat: #847 show progress bar, margin accounts, no used/deposited * feat: #847 add collateral tables * fix: #847 add deposit asset type and fix tests * feat: #847 show deposited value, avaliable and percentage used * fix: #847 add styling fixes * fix: #847 add deposit new asset button * fix: #847 remove disabledSelect to fix withdraw and deposit dialogs * fix: #847 remove global reward from incoming - needs to be party specific * fix: #847 integration tests * fix: #847 default select deposit & withdraw * fix: #847 default select deposit & withdraw * fix: #847 pass asset id as default value * fix: #847 use only bigint no bignumber, remove NaN check * fix: #847 update deposit-form.spec.tsx * fix: revert update on account fields * feat: add storybook set up * chore: ignore apollo errors - to be reverted after API will be fixed * fix: container moved, progress bar in helpers * fix: #847 UI tweaks around accounts container * feat: #847 added useDepositAsset and useWithdrawAsset * fix: #847 fix progress bar in accounts and positions * feat: #847 add storybook * fix: #847 added tooltip and updated filtering * chore: #847 add get account data test * fix: #847 fix lint and type in account story * fix: #847 update data provider * fix: #847 fix get account data dry & lp link * fix: #847 fix breakdown table test * fix: #847 account data provider test * fix: #847 remove deposit new asset button - subscription does not display a sset data * fix: #847 add defaultValue in select otherwise default is not set up * feat: #847 update data provider update method and tables * fix: #847 fix accounts tests * fix: #847 remove unused getRows * fix: add decimals * fix: #847 fix imports * fix: update ids * Update apps/trading/pages/liquidity/[marketId].page.tsx * fix: #847 accounts update method check delta * fix: #847 use vega value formatters and cell renderers * fix: #847 fix imports * fix: #847 handle new account else block comment * fix: accounts and breakdown tables * fix(#847): account data provider improvments * fix: #847 fix formatters null check and add param * fix: #847 fix withdraw test and mock the hook * fix: #847 fix console lite grid select market test * fix: console lite build * fix: revert withdraw limits * fix: remove redundant waitFor use vega cell renderer * fix: breakdown display only use accounts * fix: breakdown display only use accounts * fix: updated accounts table * fix: move update inside try useWithdrawAsset * fix: update trading-accounts test * fix: portfolio-page.test.ts Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com>
2022-09-30 00:40:44 +00:00
import { AccountTable } from './accounts-table';
import { Dialog } from '@vegaprotocol/ui-toolkit';
import BreakdownTable from './breakdown-table';
import type { useDataGridEvents } from '@vegaprotocol/datagrid';
const AccountBreakdown = ({
assetId,
partyId,
onMarketClick,
}: {
assetId: string;
partyId: string;
onMarketClick?: (marketId: string, metaKey?: boolean) => void;
}) => {
const gridRef = useRef<AgGridReact>(null);
const { data } = useDataProvider({
dataProvider: aggregatedAccountDataProvider,
variables: { partyId, assetId },
update: ({ data }) => {
if (gridRef.current?.api && data?.breakdown) {
gridRef.current?.api.setRowData(data?.breakdown);
return true;
}
return false;
},
});
return (
<div
className="h-[35vh] w-full m-auto flex flex-col"
data-testid="usage-breakdown"
>
<h1 className="text-xl mb-4">
{data?.asset?.symbol} {t('usage breakdown')}
</h1>
{data && (
<p className="mb-2 text-sm">
{t('You have %s %s in total.', [
addDecimalsFormatNumber(data.total, data.asset.decimals),
data.asset.symbol,
])}
</p>
)}
<BreakdownTable
ref={gridRef}
data={data?.breakdown || null}
domLayout="autoHeight"
onMarketClick={onMarketClick}
/>
</div>
);
};
export const AccountBreakdownDialog = memo(
({
assetId,
partyId,
onClose,
onMarketClick,
}: {
assetId?: string;
partyId: string;
onClose: () => void;
onMarketClick?: (marketId: string, metaKey?: boolean) => void;
}) => {
return (
<Dialog
size="large"
open={Boolean(assetId)}
onChange={(isOpen) => {
if (!isOpen) {
onClose();
}
}}
>
{assetId && (
<AccountBreakdown
assetId={assetId}
partyId={partyId}
onMarketClick={onMarketClick}
/>
)}
</Dialog>
);
}
);
feat(#847): collateral table, add breakdown (#1442) * feat: #847 show progress bar, margin accounts, no used/deposited * feat: #847 add collateral tables * fix: #847 add deposit asset type and fix tests * feat: #847 show deposited value, avaliable and percentage used * fix: #847 add styling fixes * fix: #847 add deposit new asset button * fix: #847 remove disabledSelect to fix withdraw and deposit dialogs * fix: #847 remove global reward from incoming - needs to be party specific * fix: #847 integration tests * fix: #847 default select deposit & withdraw * fix: #847 default select deposit & withdraw * fix: #847 pass asset id as default value * fix: #847 use only bigint no bignumber, remove NaN check * fix: #847 update deposit-form.spec.tsx * fix: revert update on account fields * feat: add storybook set up * chore: ignore apollo errors - to be reverted after API will be fixed * fix: container moved, progress bar in helpers * fix: #847 UI tweaks around accounts container * feat: #847 added useDepositAsset and useWithdrawAsset * fix: #847 fix progress bar in accounts and positions * feat: #847 add storybook * fix: #847 added tooltip and updated filtering * chore: #847 add get account data test * fix: #847 fix lint and type in account story * fix: #847 update data provider * fix: #847 fix get account data dry & lp link * fix: #847 fix breakdown table test * fix: #847 account data provider test * fix: #847 remove deposit new asset button - subscription does not display a sset data * fix: #847 add defaultValue in select otherwise default is not set up * feat: #847 update data provider update method and tables * fix: #847 fix accounts tests * fix: #847 remove unused getRows * fix: add decimals * fix: #847 fix imports * fix: update ids * Update apps/trading/pages/liquidity/[marketId].page.tsx * fix: #847 accounts update method check delta * fix: #847 use vega value formatters and cell renderers * fix: #847 fix imports * fix: #847 handle new account else block comment * fix: accounts and breakdown tables * fix(#847): account data provider improvments * fix: #847 fix formatters null check and add param * fix: #847 fix withdraw test and mock the hook * fix: #847 fix console lite grid select market test * fix: console lite build * fix: revert withdraw limits * fix: remove redundant waitFor use vega cell renderer * fix: breakdown display only use accounts * fix: breakdown display only use accounts * fix: updated accounts table * fix: move update inside try useWithdrawAsset * fix: update trading-accounts test * fix: portfolio-page.test.ts Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com>
2022-09-30 00:40:44 +00:00
interface AccountManagerProps {
partyId: string;
onClickAsset: (assetId: string) => void;
feat(#847): collateral table, add breakdown (#1442) * feat: #847 show progress bar, margin accounts, no used/deposited * feat: #847 add collateral tables * fix: #847 add deposit asset type and fix tests * feat: #847 show deposited value, avaliable and percentage used * fix: #847 add styling fixes * fix: #847 add deposit new asset button * fix: #847 remove disabledSelect to fix withdraw and deposit dialogs * fix: #847 remove global reward from incoming - needs to be party specific * fix: #847 integration tests * fix: #847 default select deposit & withdraw * fix: #847 default select deposit & withdraw * fix: #847 pass asset id as default value * fix: #847 use only bigint no bignumber, remove NaN check * fix: #847 update deposit-form.spec.tsx * fix: revert update on account fields * feat: add storybook set up * chore: ignore apollo errors - to be reverted after API will be fixed * fix: container moved, progress bar in helpers * fix: #847 UI tweaks around accounts container * feat: #847 added useDepositAsset and useWithdrawAsset * fix: #847 fix progress bar in accounts and positions * feat: #847 add storybook * fix: #847 added tooltip and updated filtering * chore: #847 add get account data test * fix: #847 fix lint and type in account story * fix: #847 update data provider * fix: #847 fix get account data dry & lp link * fix: #847 fix breakdown table test * fix: #847 account data provider test * fix: #847 remove deposit new asset button - subscription does not display a sset data * fix: #847 add defaultValue in select otherwise default is not set up * feat: #847 update data provider update method and tables * fix: #847 fix accounts tests * fix: #847 remove unused getRows * fix: add decimals * fix: #847 fix imports * fix: update ids * Update apps/trading/pages/liquidity/[marketId].page.tsx * fix: #847 accounts update method check delta * fix: #847 use vega value formatters and cell renderers * fix: #847 fix imports * fix: #847 handle new account else block comment * fix: accounts and breakdown tables * fix(#847): account data provider improvments * fix: #847 fix formatters null check and add param * fix: #847 fix withdraw test and mock the hook * fix: #847 fix console lite grid select market test * fix: console lite build * fix: revert withdraw limits * fix: remove redundant waitFor use vega cell renderer * fix: breakdown display only use accounts * fix: breakdown display only use accounts * fix: updated accounts table * fix: move update inside try useWithdrawAsset * fix: update trading-accounts test * fix: portfolio-page.test.ts Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com>
2022-09-30 00:40:44 +00:00
onClickWithdraw?: (assetId?: string) => void;
onClickDeposit?: (assetId?: string) => void;
onClickTransfer?: (assetId?: string) => void;
onMarketClick?: (marketId: string, metaKey?: boolean) => void;
isReadOnly: boolean;
pinnedAsset?: PinnedAsset;
gridProps?: ReturnType<typeof useDataGridEvents>;
}
export const AccountManager = ({
onClickAsset,
onClickWithdraw,
onClickDeposit,
onClickTransfer,
partyId,
isReadOnly,
pinnedAsset,
onMarketClick,
gridProps,
}: AccountManagerProps) => {
const [breakdownAssetId, setBreakdownAssetId] = useState<string>();
const { data, error } = useDataProvider({
dataProvider: aggregatedAccountsDataProvider,
variables: { partyId },
});
const onMarketClickInternal = useCallback(
(...args: Parameters<NonNullable<typeof onMarketClick>>) => {
setBreakdownAssetId(undefined);
if (onMarketClick) {
onMarketClick(...args);
}
},
[onMarketClick]
);
return (
<div className="relative h-full">
<AccountTable
rowData={data}
onClickAsset={onClickAsset}
onClickDeposit={onClickDeposit}
onClickWithdraw={onClickWithdraw}
onClickTransfer={onClickTransfer}
onClickBreakdown={setBreakdownAssetId}
isReadOnly={isReadOnly}
pinnedAsset={pinnedAsset}
overlayNoRowsTemplate={error ? error.message : t('No accounts')}
{...gridProps}
/>
<AccountBreakdownDialog
assetId={breakdownAssetId}
partyId={partyId}
onClose={useCallback(() => setBreakdownAssetId(undefined), [])}
onMarketClick={onMarketClick ? onMarketClickInternal : undefined}
/>
</div>
);
};
feat(#847): collateral table, add breakdown (#1442) * feat: #847 show progress bar, margin accounts, no used/deposited * feat: #847 add collateral tables * fix: #847 add deposit asset type and fix tests * feat: #847 show deposited value, avaliable and percentage used * fix: #847 add styling fixes * fix: #847 add deposit new asset button * fix: #847 remove disabledSelect to fix withdraw and deposit dialogs * fix: #847 remove global reward from incoming - needs to be party specific * fix: #847 integration tests * fix: #847 default select deposit & withdraw * fix: #847 default select deposit & withdraw * fix: #847 pass asset id as default value * fix: #847 use only bigint no bignumber, remove NaN check * fix: #847 update deposit-form.spec.tsx * fix: revert update on account fields * feat: add storybook set up * chore: ignore apollo errors - to be reverted after API will be fixed * fix: container moved, progress bar in helpers * fix: #847 UI tweaks around accounts container * feat: #847 added useDepositAsset and useWithdrawAsset * fix: #847 fix progress bar in accounts and positions * feat: #847 add storybook * fix: #847 added tooltip and updated filtering * chore: #847 add get account data test * fix: #847 fix lint and type in account story * fix: #847 update data provider * fix: #847 fix get account data dry & lp link * fix: #847 fix breakdown table test * fix: #847 account data provider test * fix: #847 remove deposit new asset button - subscription does not display a sset data * fix: #847 add defaultValue in select otherwise default is not set up * feat: #847 update data provider update method and tables * fix: #847 fix accounts tests * fix: #847 remove unused getRows * fix: add decimals * fix: #847 fix imports * fix: update ids * Update apps/trading/pages/liquidity/[marketId].page.tsx * fix: #847 accounts update method check delta * fix: #847 use vega value formatters and cell renderers * fix: #847 fix imports * fix: #847 handle new account else block comment * fix: accounts and breakdown tables * fix(#847): account data provider improvments * fix: #847 fix formatters null check and add param * fix: #847 fix withdraw test and mock the hook * fix: #847 fix console lite grid select market test * fix: console lite build * fix: revert withdraw limits * fix: remove redundant waitFor use vega cell renderer * fix: breakdown display only use accounts * fix: breakdown display only use accounts * fix: updated accounts table * fix: move update inside try useWithdrawAsset * fix: update trading-accounts test * fix: portfolio-page.test.ts Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com>
2022-09-30 00:40:44 +00:00
export default memo(AccountManager);