Feat/248: portfolio layout (#476)

* feat: add base portfolio layout

* feat: add positions, order list and withdrawals to portfolio page

* feat: add account container to portfolio page plus wallet management improvments

* fix: remove duplication from portfolio page containers

* fix: format and lint

* fix: remove buggy wallet dialog from portfolio page

* fix: deposit e2e test navigation

* fix: temporarily go straight to withdrawal pages

* fix: formatting

* fix: add formatting

Co-authored-by: Joe <joe@vega.xyz>

apps/trading-e2e/src/support/pages/deposits-page.ts

@@ -7,8 +7,7 @@ export default class DepositsPage extends BasePage {
   amountError = '[role="alert"][aria-describedby="amount"]';
 
   navigateToDeposits() {
-    cy.visit('/portfolio');
+    cy.visit('/portfolio/deposit');
-    cy.get(`a[href='/portfolio/deposit']`).click();
     cy.url().should('include', '/portfolio/deposit');
     cy.getByTestId('deposit-form').should('be.visible');
   }

apps/trading-e2e/src/support/step_definitions/withdrawals.step.ts

@@ -11,13 +11,18 @@ Given('I navigate to withdrawal page', () => {
   cy.visit('/');
   portfolioPage.closeDialog();
   marketPage.validateMarketsAreDisplayed();
-  portfolioPage.navigateToPortfolio();
+
-  portfolioPage.navigateToWithdraw();
+  // portfolioPage.navigateToPortfolio();
+  // portfolioPage.navigateToWithdraw();
+  // Navigation functions commented out due to button being removed and not added back in yet
+  cy.visit('/portfolio/withdraw');
 });
 
 Given('I navigate to withdrawals page', () => {
-  portfolioPage.navigateToPortfolio();
+  // portfolioPage.navigateToPortfolio();
-  portfolioPage.navigateToWithdrawals();
+  // portfolioPage.navigateToWithdrawals();
+  // Navigation functions commented out due to button being removed and not added back in yet
+  cy.visit('/portfolio/withdrawals');
 });
 
 When('I clear ethereum address', () => {

apps/trading/components/grid-tabs/grid-tabs.tsx

@@ -50,7 +50,7 @@ export const GridTabs = ({ children, group }: GridTabsProps) => {
             'text-black dark:text-vega-yellow': isActive,
             'bg-white dark:bg-black': isActive,
             'text-black dark:text-white': !isActive,
-            'bg-black-10 dark:bg-white-10': !isActive,
+            'bg-black-10 dark:bg-white-25': !isActive,
           });
           return (
             <Tabs.Trigger
@@ -62,7 +62,7 @@ export const GridTabs = ({ children, group }: GridTabsProps) => {
             </Tabs.Trigger>
           );
         })}
-        <div className="bg-black-10 dark:bg-white-10 grow"></div>
+        <div className="bg-black-10 dark:bg-white-25 grow"></div>
       </Tabs.List>
       <div className="h-full overflow-auto">
         {Children.map(children, (child) => {

apps/trading/components/grid-tabs/index.ts

@@ -0,0 +1 @@
+export * from './grid-tabs';

apps/trading/pages/markets/trade-grid.tsx

@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import type { ReactNode } from 'react';
 import { useState } from 'react';
-import { GridTab, GridTabs } from './grid-tabs';
 import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
 import { OrderListContainer } from '@vegaprotocol/order-list';
 import { TradesContainer } from '@vegaprotocol/trades';
@@ -13,6 +12,7 @@ import { t } from '@vegaprotocol/react-helpers';
 import { AccountsContainer } from '@vegaprotocol/accounts';
 import { DepthChartContainer } from '@vegaprotocol/market-depth';
 import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
+import { GridTab, GridTabs } from '../../components/grid-tabs';
 import { SelectMarketDialog } from '@vegaprotocol/market-list';
 import { ArrowDown, PriceCellChange } from '@vegaprotocol/ui-toolkit';
 import type { CandleClose } from '@vegaprotocol/types';

apps/trading/pages/portfolio/index.page.tsx

@@ -1,39 +1,79 @@
+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 } from '@vegaprotocol/ui-toolkit';
 
+import { WithdrawalsContainer } from './withdrawals/withdrawals-container';
+import { GridTab, GridTabs } from '../../components/grid-tabs';
+
 const Portfolio = () => {
+  const tabClassName = 'p-[16px] pl-[316px]';
+
   return (
-    <div className="p-24">
+    <Web3Container
-      <h1 className="text-h3 mb-12">{t('Portfolio')}</h1>
+      render={() => (
-      <div className="flex gap-4 mb-12">
+        <div className="h-full text-ui">
-        <AnchorButton data-testid="deposit" href="/portfolio/deposit">
+          <main className="relative h-[calc(100%-200px)]">
-          {t('Deposit')}
+            <aside className="absolute px-[8px] py-[16px] w-[300px] mt-[28px] h-[calc(100%-28px)] w-[300px] overflow-auto">
-        </AnchorButton>
+              <h2 className="text-h4 text-black dark:text-white">
-        <AnchorButton
+                {t('Filters')}
-          data-testid="deposit-tEuro"
+              </h2>
-          href="/portfolio/deposit?assetId=8b52d4a3a4b0ffe733cddbc2b67be273816cfeb6ca4c8b339bac03ffba08e4e4"
+            </aside>
-        >
+            <section>
-          {t('Deposit tEURO')}
+              <GridTabs group="portfolio">
-        </AnchorButton>
+                <GridTab id="positions" name={t('Positions')}>
-      </div>
+                  <div className={tabClassName}>
-      <div className="flex gap-4">
+                    <h4 className="text-h4 text-black dark:text-white">
-        <AnchorButton
+                      {t('Positions')}
-          data-testid="view-withdrawals"
+                    </h4>
-          href="/portfolio/withdrawals"
+                    <PositionsContainer />
-        >
+                  </div>
-          {t('View Withdrawals')}
+                </GridTab>
-        </AnchorButton>
+                <GridTab id="orders" name={t('Orders')}>
-        <AnchorButton data-testid="withdraw" href="/portfolio/withdraw">
+                  <div className={tabClassName}>
-          {t('Withdraw')}
+                    <h4 className="text-h4 text-black dark:text-white">
-        </AnchorButton>
+                      {t('Orders')}
-        <AnchorButton
+                    </h4>
-          data-testid="withdraw-tEuro"
+                    <OrderListContainer />
-          href="/portfolio/withdraw?assetId=8b52d4a3a4b0ffe733cddbc2b67be273816cfeb6ca4c8b339bac03ffba08e4e4"
+                  </div>
-        >
+                </GridTab>
-          {t('Withdraw tEURO')}
+                <GridTab id="fills" name={t('Fills')}>
-        </AnchorButton>
+                  <div className={tabClassName}>
-      </div>
+                    <h4 className="text-h4 text-black dark:text-white">
-    </div>
+                      {t('Fills')}
+                    </h4>
+                  </div>
+                </GridTab>
+                <GridTab id="history" name={t('History')}>
+                  <div className={tabClassName}>
+                    <h4 className="text-h4 text-black dark:text-white">
+                      {t('History')}
+                    </h4>
+                  </div>
+                </GridTab>
+              </GridTabs>
+            </section>
+          </main>
+          <section className="fixed bottom-0 left-0 w-full h-[200px]">
+            <GridTabs group="collaterals">
+              <GridTab id="collateral" name={t('Collateral')}>
+                <AccountsContainer />
+              </GridTab>
+              <GridTab id="deposits" name={t('Deposits')}>
+                <AnchorButton data-testid="deposit" href="/portfolio/deposit">
+                  {t('Deposit')}
+                </AnchorButton>
+              </GridTab>
+              <GridTab id="withdrawals" name={t('Withdrawals')}>
+                <WithdrawalsContainer />
+              </GridTab>
+            </GridTabs>
+          </section>
+        </div>
+      )}
+    />
   );
 };
 

apps/trading/pages/portfolio/withdrawals/index.page.tsx

@@ -2,7 +2,7 @@ import { t } from '@vegaprotocol/react-helpers';
 import { AnchorButton } from '@vegaprotocol/ui-toolkit';
 import { VegaWalletContainer } from '../../../components/vega-wallet-container';
 import { Web3Container } from '../../../components/web3-container';
-import { WithdrawalsPageContainer } from './withdrawals-page-container';
+import { WithdrawalsContainer } from './withdrawals-container';
 
 const Withdrawals = () => {
   return (
@@ -16,7 +16,7 @@ const Withdrawals = () => {
                 {t('Start withdrawal')}
               </AnchorButton>
             </header>
-            <WithdrawalsPageContainer />
+            <WithdrawalsContainer />
           </div>
         )}
       />

apps/trading/pages/portfolio/withdrawals/withdrawals-container.tsx

@@ -2,7 +2,7 @@ import orderBy from 'lodash/orderBy';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { useWithdrawals, WithdrawalsTable } from '@vegaprotocol/withdraws';
 
-export const WithdrawalsPageContainer = () => {
+export const WithdrawalsContainer = () => {
   const { data, loading, error } = useWithdrawals();
 
   return (