8e6c066b99
* feat: scaffold fills components * feat: add query for fills and populate data in basic table * feat: refactor portfolio page to use grid and add fills container * feat: add infinite scroll for fills * feat: try with data provider, get infinite scroll working * chore: remove infinite scrolling as subsequent pr will add it * chore: reorder columns * chore: remove Autosizer from portfolio grid children as its not needed * chore: move fills tab to the end * feat: add storybook, format cells * feat: add unit test for fills table * feat: convert lib to next lib * feat: add pagination variables to fills query to only get latest 300 * fix: fills data provider update function to return result of produce * fix: yarn.lock * fix: cypress run by moving test helpers * fix: re add test helpers for unit tests * fix: global connection tests * fix: use fills from mocks * feat: add update handler for fills * chore: move value formatter functions into module scope
99 lines
3.0 KiB
TypeScript
99 lines
3.0 KiB
TypeScript
import { Web3Container } from '../../components/web3-container';
|
|
import { t } from '@vegaprotocol/react-helpers';
|
|
import { PositionsContainer } from '@vegaprotocol/positions';
|
|
import { OrderListContainer } from '@vegaprotocol/order-list';
|
|
import { AccountsContainer } from '@vegaprotocol/accounts';
|
|
import { AnchorButton, Tab, Tabs } from '@vegaprotocol/ui-toolkit';
|
|
import { WithdrawalsContainer } from './withdrawals/withdrawals-container';
|
|
import { FillsContainer } from '@vegaprotocol/fills';
|
|
import classNames from 'classnames';
|
|
import type { ReactNode } from 'react';
|
|
|
|
const Portfolio = () => {
|
|
const wrapperClasses = classNames(
|
|
'h-full max-h-full',
|
|
'grid gap-4 grid-rows-[1fr_300px]',
|
|
'bg-black-10 dark:bg-white-10',
|
|
'text-ui'
|
|
);
|
|
const tabContentClassName = 'h-full grid gap-4 grid-rows-[min-content_1fr]';
|
|
return (
|
|
<div className={wrapperClasses}>
|
|
<PortfolioGridChild>
|
|
<Tabs>
|
|
<Tab id="positions" name={t('Positions')}>
|
|
<div className={tabContentClassName}>
|
|
<h4 className="text-h4 text-black dark:text-white p-8">
|
|
{t('Positions')}
|
|
</h4>
|
|
<div>
|
|
<PositionsContainer />
|
|
</div>
|
|
</div>
|
|
</Tab>
|
|
<Tab id="orders" name={t('Orders')}>
|
|
<div className={tabContentClassName}>
|
|
<h4 className="text-h4 text-black dark:text-white p-8">
|
|
{t('Orders')}
|
|
</h4>
|
|
<div>
|
|
<OrderListContainer />
|
|
</div>
|
|
</div>
|
|
</Tab>
|
|
<Tab id="fills" name={t('Fills')}>
|
|
<div className={tabContentClassName}>
|
|
<h4 className="text-h4 text-black dark:text-white p-8">
|
|
{t('Fills')}
|
|
</h4>
|
|
<div>
|
|
<FillsContainer />
|
|
</div>
|
|
</div>
|
|
</Tab>
|
|
</Tabs>
|
|
</PortfolioGridChild>
|
|
<PortfolioGridChild>
|
|
<Tabs>
|
|
<Tab id="collateral" name={t('Collateral')}>
|
|
<AccountsContainer />
|
|
</Tab>
|
|
<Tab id="deposits" name={t('Deposits')}>
|
|
<div className={tabContentClassName}>
|
|
<div className="p-8">
|
|
<AnchorButton data-testid="deposit" href="/portfolio/deposit">
|
|
{t('Deposit')}
|
|
</AnchorButton>
|
|
</div>
|
|
</div>
|
|
</Tab>
|
|
<Tab id="withdrawals" name={t('Withdrawals')}>
|
|
<Web3Container>
|
|
<WithdrawalsContainer />
|
|
</Web3Container>
|
|
</Tab>
|
|
</Tabs>
|
|
</PortfolioGridChild>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Portfolio.getInitialProps = () => ({
|
|
page: 'portfolio',
|
|
});
|
|
|
|
export default Portfolio;
|
|
|
|
interface PortfolioGridChildProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const PortfolioGridChild = ({
|
|
children,
|
|
className,
|
|
}: PortfolioGridChildProps) => {
|
|
const gridChildClasses = classNames('bg-white dark:bg-black', className);
|
|
return <section className={gridChildClasses}>{children}</section>;
|
|
};
|