* feat: 447 Refactored 'progress' intent to be 'prompt' as now white. Added yellow 'selected' intent * feat: 447 Colour consolidation * feat: 447 Colour consolidation extra renaming * feat: 447 Fixing specified red colours * feat: 447 Removed unused darker red * feat: 447 Documenting additional colours in storybook * feat: 447 Buttons updated (except 'accent', which will probably get removed when navs built) * feat: 447 Text inputs updated * feat:frontend-monorepo-447: Trading nav * feat:frontend-monorepo-447: Updated toggle button colours * feat:frontend-monorepo-447: Custom checkboxes * feat:frontend-monorepo-447: Tweaks to radio buttons * feat:frontend-monorepo-447: Input dates get dark color scheme in dark mode * feat:frontend-monorepo-447: Dropdown updates * feat:frontend-monorepo-447: Icon menu * feat:frontend-monorepo-447: Focus visual styles moved to focus-visible for radios and toggle * feat:frontend-monorepo-447: Tweak to focus styles for text input and textarea * feat:frontend-monorepo-447: Labeled input * feat:frontend-monorepo-447: Labeled input description red when in error * feat:frontend-monorepo-447: Tooltip visual update * feat:frontend-monorepo-447: Added disabled state to checkbox * feat:frontend-monorepo-447: Custom select with radix * feat:frontend-monorepo-447: Reverted back to native Select for a11y concerns * feat:frontend-monorepo-447: Added visual cue for dropdown items when multiple can be selected * feat:frontend-monorepo-447: Removed shadow from buttons in Explorer where it looked wrong * feat:frontend-monorepo-447: Added box shadow classes into tailwind theme * feat:frontend-monorepo-447: Colour primitives documentation updated * feat:frontend-monorepo-447: Cleaning up box shadow use further * feat:frontend-monorepo-447: Intents util updated * feat:frontend-monorepo-447: Dialog component updated * feat:frontend-monorepo-447: Callout component updated * feat:frontend-monorepo-447: Adjusted apps to handle toolkit changes * feat:frontend-monorepo-447: Moved tabs to ui-toolkit and styled * feat:frontend-monorepo-447: Fixed ui-toolkit tests * feat:frontend-monorepo-447: Token eth wallet made dark to support new buttons * feat:frontend-monorepo-447: Ran prettier * frontend-monorepo-447: Simplified button class functions and exported for use on other elements * frontend-monorepo-447: Used newly exported button classes on Link elements in eth-wallet * frontend-monorepo-447: Moved trading nav from ui-toolkit to trading app * frontend-monorepo-447: Simplified intents and updated stories * frontend-monorepo-447: Using classnames in requested spot * frontend-monorepo-447: Removed unnecessary 'asChild' prop on dropdown triggers * frontend-monorepo-447: Made use of the XPrimitive Radix naming convention * frontend-monorepo-447: Simplified types in 'getButtonClasses' * frontend-monorepo-447: Added 'asChild' to dropdown trigger to avoid nested buttons * frontend-monorepo-447: Moved input label and description into Formgroup component. Refactored based on tweaked structure * frontend-monorepo-447: Externally linked input label * frontend-monorepo-447: Adding correct text colours to Intent.None backgrounds * frontend-monorepo-447: Improved intent function name * frontend-monorepo-447: Removed new navbar until implementation ticket is picked up * frontend-monorepo-447: using testing-library/user-event for tab click unit tests * frontend-monorepo-447: Removed unused button import * frontend-monorepo-447: Little extra use of classnames in form-group.tsx * feat: make navbar pink for light mode * fix: problem with theme not switching when dependent in js on theme value * fix: bg of row hover * fix: dont use vega pink for sell red * fix: type error in generate orders func * fix: lint Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
81 lines
2.8 KiB
TypeScript
81 lines
2.8 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';
|
|
|
|
const Portfolio = () => {
|
|
const tabClassName = 'p-[16px] pl-[316px]';
|
|
|
|
return (
|
|
<Web3Container>
|
|
<div className="h-full text-ui">
|
|
<main className="relative h-[calc(100%-200px)]">
|
|
<aside className="absolute px-[8px] py-[16px] w-[300px] mt-[28px] h-[calc(100%-28px)] w-[300px] overflow-auto">
|
|
<h2 className="text-h4 text-black dark:text-white">
|
|
{t('Filters')}
|
|
</h2>
|
|
</aside>
|
|
<section data-testid="portfolio-grid">
|
|
<Tabs>
|
|
<Tab id="positions" name={t('Positions')}>
|
|
<div className={tabClassName}>
|
|
<h4 className="text-h4 text-black dark:text-white">
|
|
{t('Positions')}
|
|
</h4>
|
|
<PositionsContainer />
|
|
</div>
|
|
</Tab>
|
|
<Tab id="orders" name={t('Orders')}>
|
|
<div className={tabClassName}>
|
|
<h4 className="text-h4 text-black dark:text-white">
|
|
{t('Orders')}
|
|
</h4>
|
|
<OrderListContainer />
|
|
</div>
|
|
</Tab>
|
|
<Tab id="fills" name={t('Fills')}>
|
|
<div className={tabClassName}>
|
|
<h4 className="text-h4 text-black dark:text-white">
|
|
{t('Fills')}
|
|
</h4>
|
|
</div>
|
|
</Tab>
|
|
<Tab id="history" name={t('History')}>
|
|
<div className={tabClassName}>
|
|
<h4 className="text-h4 text-black dark:text-white">
|
|
{t('History')}
|
|
</h4>
|
|
</div>
|
|
</Tab>
|
|
</Tabs>
|
|
</section>
|
|
</main>
|
|
<section className="fixed bottom-0 left-0 w-full h-[200px]">
|
|
<Tabs>
|
|
<Tab id="collateral" name={t('Collateral')}>
|
|
<AccountsContainer />
|
|
</Tab>
|
|
<Tab id="deposits" name={t('Deposits')}>
|
|
<AnchorButton data-testid="deposit" href="/portfolio/deposit">
|
|
{t('Deposit')}
|
|
</AnchorButton>
|
|
</Tab>
|
|
<Tab id="withdrawals" name={t('Withdrawals')}>
|
|
<WithdrawalsContainer />
|
|
</Tab>
|
|
</Tabs>
|
|
</section>
|
|
</div>
|
|
</Web3Container>
|
|
);
|
|
};
|
|
|
|
Portfolio.getInitialProps = () => ({
|
|
page: 'portfolio',
|
|
});
|
|
|
|
export default Portfolio;
|