chore(trading): remove floating buttons (#4512)

apps/trading/client-pages/market/market.tsx

@@ -10,7 +10,6 @@ import { TradeGrid } from './trade-grid';
 import { TradePanels } from './trade-panels';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
-import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 import { ViewType, useSidebar } from '../../components/sidebar';
 
 const calculatePrice = (markPrice?: string, decimalPlaces?: number) => {
@@ -65,8 +64,6 @@ export const MarketPage = () => {
   const update = useGlobalStore((store) => store.update);
   const lastMarketId = useGlobalStore((store) => store.marketId);
 
-  const onSelect = useMarketClickHandler();
-
   const { data, error, loading } = useMarket(marketId);
 
   useEffect(() => {
@@ -87,7 +84,6 @@ export const MarketPage = () => {
       return (
         <TradeGrid
           market={data}
-          onSelect={onSelect}
           pinnedAsset={
             data?.tradableInstrument.instrument.product.settlementAsset
           }
@@ -97,11 +93,12 @@ export const MarketPage = () => {
     return (
       <TradePanels
         market={data}
-        onSelect={onSelect}
+        pinnedAsset={
-        onClickCollateral={() => navigate('/portfolio')}
+          data?.tradableInstrument.instrument.product.settlementAsset
+        }
       />
     );
-  }, [largeScreen, data, onSelect, navigate]);
+  }, [largeScreen, data]);
 
   if (!data && marketId) {
     return (

apps/trading/client-pages/market/trade-grid.tsx

@@ -9,7 +9,6 @@ import { OracleBanner } from '@vegaprotocol/markets';
 import type { Market } from '@vegaprotocol/markets';
 import { Filter } from '@vegaprotocol/orders';
 import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
-import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 import {
   ResizableGrid,
   ResizableGridPanel,
@@ -24,7 +23,6 @@ import { FLAGS } from '@vegaprotocol/environment';
 
 interface TradeGridProps {
   market: Market | null;
-  onSelect: (marketId: string, metaKey?: boolean) => void;
   pinnedAsset?: PinnedAsset;
 }
 
@@ -40,7 +38,6 @@ const MainGrid = memo(
     const [sizesMiddle, handleOnMiddleLayoutChange] = usePaneLayout({
       id: 'middle-1',
     });
-    const onMarketClick = useMarketClickHandler(true);
 
     return (
       <ResizableGrid vertical onChange={handleOnLayoutChange}>
@@ -98,30 +95,27 @@ const MainGrid = memo(
           <TradeGridChild>
             <Tabs storageKey="console-trade-grid-bottom">
               <Tab id="positions" name={t('Positions')}>
-                <TradingViews.positions.component
+                <TradingViews.positions.component />
-                  onMarketClick={onMarketClick}
-                />
               </Tab>
-              <Tab id="open-orders" name={t('Open')}>
+              <Tab
-                <TradingViews.orders.component
+                id="open-orders"
-                  marketId={marketId}
+                name={t('Open')}
-                  filter={Filter.Open}
+                menu={<TradingViews.activeOrders.menu marketId={marketId} />}
-                />
+              >
+                <TradingViews.orders.component filter={Filter.Open} />
               </Tab>
               <Tab id="closed-orders" name={t('Closed')}>
-                <TradingViews.orders.component
+                <TradingViews.orders.component filter={Filter.Closed} />
-                  marketId={marketId}
-                  filter={Filter.Closed}
-                />
               </Tab>
               <Tab id="rejected-orders" name={t('Rejected')}>
-                <TradingViews.orders.component
+                <TradingViews.orders.component filter={Filter.Rejected} />
-                  marketId={marketId}
-                  filter={Filter.Rejected}
-                />
               </Tab>
-              <Tab id="orders" name={t('All')}>
+              <Tab
-                <TradingViews.orders.component marketId={marketId} />
+                id="orders"
+                name={t('All')}
+                menu={<TradingViews.orders.menu marketId={marketId} />}
+              >
+                <TradingViews.orders.component />
               </Tab>
               {FLAGS.STOP_ORDERS ? (
                 <Tab id="stop-orders" name={t('Stop orders')}>
@@ -129,17 +123,14 @@ const MainGrid = memo(
                 </Tab>
               ) : null}
               <Tab id="fills" name={t('Fills')}>
-                <TradingViews.fills.component
+                <TradingViews.fills.component marketId={marketId} />
-                  marketId={marketId}
-                  onMarketClick={onMarketClick}
-                />
               </Tab>
-              <Tab id="accounts" name={t('Collateral')}>
+              <Tab
-                <TradingViews.collateral.component
+                id="accounts"
-                  pinnedAsset={pinnedAsset}
+                name={t('Collateral')}
-                  onMarketClick={onMarketClick}
+                menu={<TradingViews.collateral.menu />}
-                  hideButtons
+              >
-                />
+                <TradingViews.collateral.component pinnedAsset={pinnedAsset} />
               </Tab>
             </Tabs>
           </TradeGridChild>

apps/trading/client-pages/market/trade-panels.tsx

@@ -1,13 +1,9 @@
 import type { PinnedAsset } from '@vegaprotocol/accounts';
 import type { Market } from '@vegaprotocol/markets';
 import { OracleBanner } from '@vegaprotocol/markets';
-import {
-  useMarketClickHandler,
-  useMarketLiquidityClickHandler,
-} from '../../lib/hooks/use-market-click-handler';
 import type { TradingView } from './trade-views';
 import { TradingViews } from './trade-views';
-import { memo, useState } from 'react';
+import { useState } from 'react';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { NO_MARKET } from './constants';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -20,33 +16,14 @@ import { FLAGS } from '@vegaprotocol/environment';
 
 interface TradePanelsProps {
   market: Market | null;
-  onSelect: (marketId: string, metaKey?: boolean) => void;
-  onMarketClick?: (marketId: string) => void;
-  onOrderTypeClick?: (marketId: string) => void;
-  onClickCollateral: () => void;
   pinnedAsset?: PinnedAsset;
 }
 
-export const TradePanels = ({
+export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
-  market,
-  onSelect,
-  onClickCollateral,
-  pinnedAsset,
-}: TradePanelsProps) => {
-  const onMarketClick = useMarketClickHandler(true);
-  const onOrderTypeClick = useMarketLiquidityClickHandler();
-
   const [view, setView] = useState<TradingView>('candles');
 
   const renderView = () => {
-    const Component = memo<{
+    const Component = TradingViews[view].component;
-      marketId: string;
-      onSelect: (marketId: string, metaKey?: boolean) => void;
-      onMarketClick?: (marketId: string) => void;
-      onOrderTypeClick?: (marketId: string) => void;
-      onClickCollateral: () => void;
-      pinnedAsset?: PinnedAsset;
-    }>(TradingViews[view].component);
 
     if (!Component) {
       throw new Error(`No component for view: ${view}`);
@@ -54,16 +31,7 @@ export const TradePanels = ({
 
     if (!market) return <Splash>{NO_MARKET}</Splash>;
 
-    return (
+    return <Component marketId={market?.id} pinnedAsset={pinnedAsset} />;
-      <Component
-        marketId={market?.id}
-        onSelect={onSelect}
-        onClickCollateral={onClickCollateral}
-        pinnedAsset={pinnedAsset}
-        onMarketClick={onMarketClick}
-        onOrderTypeClick={onOrderTypeClick}
-      />
-    );
   };
 
   const renderMenu = () => {
@@ -71,9 +39,10 @@ export const TradePanels = ({
 
     if ('menu' in viewCfg) {
       const Menu = viewCfg.menu;
+
       return (
         <div className="flex gap-1 p-1 bg-vega-clight-800 dark:bg-vega-cdark-800 border-b border-default">
-          <Menu />
+          <Menu marketId={market?.id || ''} />
         </div>
       );
     }

apps/trading/client-pages/market/trade-views.tsx

@@ -6,7 +6,7 @@ import {
   CandlesChartContainer,
   CandlesMenu,
 } from '@vegaprotocol/candles-chart';
-import { Filter } from '@vegaprotocol/orders';
+import { Filter, OpenOrdersMenu } from '@vegaprotocol/orders';
 import { NO_MARKET } from './constants';
 import { OrderbookContainer } from '../../components/orderbook-container';
 import { FillsContainer } from '../../components/fills-container';
@@ -16,6 +16,7 @@ import { LiquidityContainer } from '../../components/liquidity-container';
 import type { OrderContainerProps } from '../../components/orders-container';
 import { OrdersContainer } from '../../components/orders-container';
 import { StopOrdersContainer } from '../../components/stop-orders-container';
+import { AccountsMenu } from '../../components/accounts-menu';
 
 type MarketDependantView =
   | typeof CandlesChartContainer
@@ -62,6 +63,7 @@ export const TradingViews = {
     component: (props: OrderContainerProps) => (
       <OrdersContainer {...props} filter={Filter.Open} />
     ),
+    menu: OpenOrdersMenu,
   },
   closedOrders: {
     label: 'Closed',
@@ -78,11 +80,16 @@ export const TradingViews = {
   orders: {
     label: 'All',
     component: OrdersContainer,
+    menu: OpenOrdersMenu,
   },
   stopOrders: {
     label: 'Stop',
     component: StopOrdersContainer,
   },
-  collateral: { label: 'Collateral', component: AccountsContainer },
+  collateral: {
+    label: 'Collateral',
+    component: AccountsContainer,
+    menu: AccountsMenu,
+  },
   fills: { label: 'Fills', component: FillsContainer },
 };

apps/trading/client-pages/portfolio/deposits-container.tsx

@@ -1,40 +0,0 @@
-import { Button, Splash } from '@vegaprotocol/ui-toolkit';
-import { DepositsTable } from '@vegaprotocol/deposits';
-import { depositsProvider } from '@vegaprotocol/deposits';
-import { t } from '@vegaprotocol/i18n';
-import { useDataProvider } from '@vegaprotocol/data-provider';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useSidebar, ViewType } from '../../components/sidebar';
-
-export const DepositsContainer = () => {
-  const { pubKey, isReadOnly } = useVegaWallet();
-  const { data, error } = useDataProvider({
-    dataProvider: depositsProvider,
-    variables: { partyId: pubKey || '' },
-    skip: !pubKey,
-  });
-  const setView = useSidebar((store) => store.setView);
-  if (!pubKey) {
-    return <Splash>{t('Please connect Vega wallet')}</Splash>;
-  }
-  return (
-    <div className="h-full">
-      <DepositsTable
-        rowData={data}
-        overlayNoRowsTemplate={error ? error.message : t('No deposits')}
-      />
-      {!isReadOnly && (
-        <div className="h-auto flex justify-end p-2 bottom-0 right-0 absolute dark:bg-black/75 bg-white/75 rounded">
-          <Button
-            variant="primary"
-            size="sm"
-            onClick={() => setView({ type: ViewType.Deposit })}
-            data-testid="deposit-button"
-          >
-            {t('Deposit')}
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-};

apps/trading/client-pages/portfolio/portfolio.tsx

@@ -6,12 +6,11 @@ import { t } from '@vegaprotocol/i18n';
 import { useIncompleteWithdrawals } from '@vegaprotocol/withdraws';
 import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
 import { usePageTitleStore } from '../../stores';
-import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 import { AccountsContainer } from '../../components/accounts-container';
-import { DepositsContainer } from './deposits-container';
+import { DepositsContainer } from '../../components/deposits-container';
 import { FillsContainer } from '../../components/fills-container';
 import { PositionsContainer } from '../../components/positions-container';
-import { WithdrawalsContainer } from './withdrawals-container';
+import { WithdrawalsContainer } from '../../components/withdrawals-container';
 import { OrdersContainer } from '../../components/orders-container';
 import { LedgerContainer } from '../../components/ledger-container';
 import { AccountHistoryContainer } from './account-history-container';
@@ -21,6 +20,9 @@ import {
   usePaneLayout,
 } from '../../components/resizable-grid';
 import { ViewType, useSidebar } from '../../components/sidebar';
+import { AccountsMenu } from '../../components/accounts-menu';
+import { DepositsMenu } from '../../components/deposits-menu';
+import { WithdrawalsMenu } from '../../components/withdrawals-menu';
 
 const WithdrawalsIndicator = () => {
   const { ready } = useIncompleteWithdrawals();
@@ -51,7 +53,6 @@ export const Portfolio = () => {
     }
   }, [init, view, setView]);
 
-  const onMarketClick = useMarketClickHandler(true);
   const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'portfolio' });
   const wrapperClasses = 'p-0.5 h-full max-h-full flex flex-col';
   return (
@@ -64,13 +65,13 @@ export const Portfolio = () => {
                 <AccountHistoryContainer />
               </Tab>
               <Tab id="positions" name={t('Positions')}>
-                <PositionsContainer onMarketClick={onMarketClick} allKeys />
+                <PositionsContainer allKeys />
               </Tab>
               <Tab id="orders" name={t('Orders')}>
                 <OrdersContainer />
               </Tab>
               <Tab id="fills" name={t('Fills')}>
-                <FillsContainer onMarketClick={onMarketClick} />
+                <FillsContainer />
               </Tab>
               <Tab id="ledger-entries" name={t('Ledger entries')}>
                 <LedgerContainer />
@@ -85,16 +86,21 @@ export const Portfolio = () => {
         >
           <PortfolioGridChild>
             <Tabs storageKey="console-portfolio-bottom">
-              <Tab id="collateral" name={t('Collateral')}>
+              <Tab
+                id="collateral"
+                name={t('Collateral')}
+                menu={<AccountsMenu />}
+              >
                 <AccountsContainer />
               </Tab>
-              <Tab id="deposits" name={t('Deposits')}>
+              <Tab id="deposits" name={t('Deposits')} menu={<DepositsMenu />}>
                 <DepositsContainer />
               </Tab>
               <Tab
                 id="withdrawals"
                 name={t('Withdrawals')}
                 indicator={<WithdrawalsIndicator />}
+                menu={<WithdrawalsMenu />}
               >
                 <WithdrawalsContainer />
               </Tab>

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

@@ -1,49 +0,0 @@
-import { Button, Splash } from '@vegaprotocol/ui-toolkit';
-import {
-  withdrawalProvider,
-  WithdrawalsTable,
-  useIncompleteWithdrawals,
-} from '@vegaprotocol/withdraws';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { t } from '@vegaprotocol/i18n';
-import { useDataProvider } from '@vegaprotocol/data-provider';
-import { ViewType, useSidebar } from '../../components/sidebar';
-
-export const WithdrawalsContainer = () => {
-  const { pubKey, isReadOnly } = useVegaWallet();
-  const { data, error } = useDataProvider({
-    dataProvider: withdrawalProvider,
-    variables: { partyId: pubKey || '' },
-    skip: !pubKey,
-  });
-  const setView = useSidebar((store) => store.setView);
-  const { ready, delayed } = useIncompleteWithdrawals();
-  if (!pubKey) {
-    return <Splash>{t('Please connect Vega wallet')}</Splash>;
-  }
-  return (
-    <>
-      <div className="h-full relative">
-        <WithdrawalsTable
-          data-testid="withdrawals-history"
-          rowData={data}
-          overlayNoRowsTemplate={error ? error.message : t('No withdrawals')}
-          ready={ready}
-          delayed={delayed}
-        />
-      </div>
-      {!isReadOnly && (
-        <div className="h-auto flex justify-end p-2 bottom-0 right-0 absolute dark:bg-black/75 bg-white/75 rounded">
-          <Button
-            variant="primary"
-            size="sm"
-            onClick={() => setView({ type: ViewType.Withdraw })}
-            data-testid="withdraw-dialog-button"
-          >
-            {t('Make withdrawal')}
-          </Button>
-        </div>
-      )}
-    </>
-  );
-};

apps/trading/components/accounts-container/accounts-container.tsx

@@ -1,5 +1,4 @@
 import { useCallback } from 'react';
-import { Button } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
@@ -12,16 +11,14 @@ import { useDataGridEvents } from '@vegaprotocol/datagrid';
 import type { DataGridSlice } from '../../stores/datagrid-store-slice';
 import { createDataGridSlice } from '../../stores/datagrid-store-slice';
 import { ViewType, useSidebar } from '../sidebar';
+import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 
 export const AccountsContainer = ({
   pinnedAsset,
-  hideButtons,
-  onMarketClick,
 }: {
   pinnedAsset?: PinnedAsset;
-  hideButtons?: boolean;
-  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
 }) => {
+  const onMarketClick = useMarketClickHandler(true);
   const { pubKey, isReadOnly } = useVegaWallet();
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
   const setView = useSidebar((store) => store.setView);
@@ -48,44 +45,23 @@ export const AccountsContainer = ({
   }
 
   return (
-    <div className="h-full relative">
+    <AccountManager
-      <AccountManager
+      partyId={pubKey}
-        partyId={pubKey}
+      onClickAsset={onClickAsset}
-        onClickAsset={onClickAsset}
+      onClickWithdraw={(assetId) => {
-        onClickWithdraw={(assetId) => {
+        setView({ type: ViewType.Withdraw, assetId });
-          setView({ type: ViewType.Withdraw, assetId });
+      }}
-        }}
+      onClickDeposit={(assetId) => {
-        onClickDeposit={(assetId) => {
+        setView({ type: ViewType.Deposit, assetId });
-          setView({ type: ViewType.Deposit, assetId });
+      }}
-        }}
+      onClickTransfer={(assetId) => {
-        onClickTransfer={(assetId) => {
+        setView({ type: ViewType.Transfer, assetId });
-          setView({ type: ViewType.Transfer, assetId });
+      }}
-        }}
+      onMarketClick={onMarketClick}
-        onMarketClick={onMarketClick}
+      isReadOnly={isReadOnly}
-        isReadOnly={isReadOnly}
+      pinnedAsset={pinnedAsset}
-        pinnedAsset={pinnedAsset}
+      gridProps={gridStoreCallbacks}
-        gridProps={gridStoreCallbacks}
+    />
-      />
-      {!isReadOnly && !hideButtons && (
-        <div className="flex gap-2 justify-end p-2 absolute bottom-0 right-0 dark:bg-black/75 bg-white/75 rounded">
-          <Button
-            variant="primary"
-            size="sm"
-            data-testid="open-transfer"
-            onClick={() => setView({ type: ViewType.Transfer })}
-          >
-            {t('Transfer')}
-          </Button>
-          <Button
-            variant="primary"
-            size="sm"
-            onClick={() => setView({ type: ViewType.Deposit })}
-          >
-            {t('Deposit')}
-          </Button>
-        </div>
-      )}
-    </div>
   );
 };
 

apps/trading/components/accounts-menu/accounts-menu.tsx

@@ -0,0 +1,27 @@
+import { t } from '@vegaprotocol/i18n';
+import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { ViewType, useSidebar } from '../sidebar';
+
+export const AccountsMenu = () => {
+  const setView = useSidebar((store) => store.setView);
+
+  return (
+    <>
+      <TradingButton
+        intent={Intent.Primary}
+        size="extra-small"
+        data-testid="open-transfer"
+        onClick={() => setView({ type: ViewType.Transfer })}
+      >
+        {t('Transfer')}
+      </TradingButton>
+      <TradingButton
+        intent={Intent.Primary}
+        size="extra-small"
+        onClick={() => setView({ type: ViewType.Deposit })}
+      >
+        {t('Deposit')}
+      </TradingButton>
+    </>
+  );
+};

apps/trading/components/accounts-menu/index.ts

@@ -0,0 +1 @@
+export * from './accounts-menu';

apps/trading/components/deposits-container/deposits-container.tsx

@@ -0,0 +1,24 @@
+import { Splash } from '@vegaprotocol/ui-toolkit';
+import { DepositsTable } from '@vegaprotocol/deposits';
+import { depositsProvider } from '@vegaprotocol/deposits';
+import { t } from '@vegaprotocol/i18n';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+
+export const DepositsContainer = () => {
+  const { pubKey } = useVegaWallet();
+  const { data, error } = useDataProvider({
+    dataProvider: depositsProvider,
+    variables: { partyId: pubKey || '' },
+    skip: !pubKey,
+  });
+  if (!pubKey) {
+    return <Splash>{t('Please connect Vega wallet')}</Splash>;
+  }
+  return (
+    <DepositsTable
+      rowData={data}
+      overlayNoRowsTemplate={error ? error.message : t('No deposits')}
+    />
+  );
+};

apps/trading/components/deposits-container/index.ts

@@ -0,0 +1 @@
+export * from './deposits-container';

apps/trading/components/deposits-menu/deposits-menu.tsx

@@ -0,0 +1,18 @@
+import { t } from '@vegaprotocol/i18n';
+import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { ViewType, useSidebar } from '../sidebar';
+
+export const DepositsMenu = () => {
+  const setView = useSidebar((store) => store.setView);
+
+  return (
+    <TradingButton
+      intent={Intent.Primary}
+      size="extra-small"
+      onClick={() => setView({ type: ViewType.Deposit })}
+      data-testid="deposit-button"
+    >
+      {t('Deposit')}
+    </TradingButton>
+  );
+};

apps/trading/components/deposits-menu/index.ts

@@ -0,0 +1 @@
+export * from './deposits-menu';

apps/trading/components/fills-container/fills-container.tsx

@@ -7,14 +7,10 @@ import { t } from '@vegaprotocol/i18n';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import type { DataGridSlice } from '../../stores/datagrid-store-slice';
 import { createDataGridSlice } from '../../stores/datagrid-store-slice';
+import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 
-export const FillsContainer = ({
+export const FillsContainer = ({ marketId }: { marketId?: string }) => {
-  marketId,
+  const onMarketClick = useMarketClickHandler(true);
-  onMarketClick,
-}: {
-  marketId?: string;
-  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
-}) => {
   const { pubKey } = useVegaWallet();
 
   const gridStore = useFillsStore((store) => store.gridStore);

apps/trading/components/orders-container/orders-container.tsx

@@ -25,11 +25,10 @@ export const FilterStatusValue = {
 };
 
 export interface OrderContainerProps {
-  marketId?: string;
   filter?: Filter;
 }
 
-export const OrdersContainer = ({ marketId, filter }: OrderContainerProps) => {
+export const OrdersContainer = ({ filter }: OrderContainerProps) => {
   const { pubKey, isReadOnly } = useVegaWallet();
   const onMarketClick = useMarketClickHandler(true);
   const onOrderTypeClick = useMarketLiquidityClickHandler();
@@ -45,7 +44,6 @@ export const OrdersContainer = ({ marketId, filter }: OrderContainerProps) => {
   return (
     <OrderListManager
       partyId={pubKey}
-      marketId={marketId}
       filter={filter}
       onMarketClick={onMarketClick}
       onOrderTypeClick={onOrderTypeClick}

apps/trading/components/positions-container/positions-container.tsx

@@ -7,14 +7,10 @@ import type { DataGridSlice } from '../../stores/datagrid-store-slice';
 import { createDataGridSlice } from '../../stores/datagrid-store-slice';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
+import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 
-export const PositionsContainer = ({
+export const PositionsContainer = ({ allKeys }: { allKeys?: boolean }) => {
-  onMarketClick,
+  const onMarketClick = useMarketClickHandler(true);
-  allKeys,
-}: {
-  onMarketClick?: (marketId: string) => void;
-  allKeys?: boolean;
-}) => {
   const { pubKey, pubKeys, isReadOnly } = useVegaWallet();
 
   const gridStore = usePositionsStore((store) => store.gridStore);

apps/trading/components/withdrawals-container/index.ts

@@ -0,0 +1 @@
+export * from './withdrawals-container';

apps/trading/components/withdrawals-container/withdrawals-container.tsx

@@ -0,0 +1,31 @@
+import { Splash } from '@vegaprotocol/ui-toolkit';
+import {
+  withdrawalProvider,
+  WithdrawalsTable,
+  useIncompleteWithdrawals,
+} from '@vegaprotocol/withdraws';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import { t } from '@vegaprotocol/i18n';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+
+export const WithdrawalsContainer = () => {
+  const { pubKey } = useVegaWallet();
+  const { data, error } = useDataProvider({
+    dataProvider: withdrawalProvider,
+    variables: { partyId: pubKey || '' },
+    skip: !pubKey,
+  });
+  const { ready, delayed } = useIncompleteWithdrawals();
+  if (!pubKey) {
+    return <Splash>{t('Please connect Vega wallet')}</Splash>;
+  }
+  return (
+    <WithdrawalsTable
+      data-testid="withdrawals-history"
+      rowData={data}
+      overlayNoRowsTemplate={error ? error.message : t('No withdrawals')}
+      ready={ready}
+      delayed={delayed}
+    />
+  );
+};

apps/trading/components/withdrawals-menu/index.ts

@@ -0,0 +1 @@
+export * from './withdrawals-menu';

apps/trading/components/withdrawals-menu/withdrawals-menu.tsx

@@ -0,0 +1,18 @@
+import { t } from '@vegaprotocol/i18n';
+import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { ViewType, useSidebar } from '../sidebar';
+
+export const WithdrawalsMenu = () => {
+  const setView = useSidebar((store) => store.setView);
+
+  return (
+    <TradingButton
+      intent={Intent.Primary}
+      size="extra-small"
+      onClick={() => setView({ type: ViewType.Withdraw })}
+      data-testid="withdraw-dialog-button"
+    >
+      {t('Make withdrawal')}
+    </TradingButton>
+  );
+};

libs/deal-ticket/src/components/deal-ticket-validation/zero-balance-error.tsx

@@ -1,4 +1,4 @@
-import { Intent, Notification, Link } from '@vegaprotocol/ui-toolkit';
+import { Intent, Notification } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 
 interface ZeroBalanceErrorProps {
@@ -6,13 +6,11 @@ interface ZeroBalanceErrorProps {
     id: string;
     symbol: string;
   };
-  onClickCollateral?: () => void;
   onDeposit: (assetId: string) => void;
 }
 
 export const ZeroBalanceError = ({
   asset,
-  onClickCollateral,
   onDeposit,
 }: ZeroBalanceErrorProps) => {
   return (
@@ -25,12 +23,6 @@ export const ZeroBalanceError = ({
             'You need %s in your wallet to trade in this market. ',
             asset.symbol
           )}
-          {onClickCollateral && (
-            <>
-              {t('See all your')}{' '}
-              <Link onClick={onClickCollateral}>collateral</Link>.
-            </>
-          )}
         </>
       }
       buttonProps={{

libs/deal-ticket/src/components/deal-ticket/deal-ticket-container.tsx

@@ -17,7 +17,6 @@ import { FLAGS } from '@vegaprotocol/environment';
 interface DealTicketContainerProps {
   marketId: string;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
-  onClickCollateral?: () => void;
   onDeposit: (assetId: string) => void;
 }
 

libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx

@@ -74,7 +74,6 @@ export interface DealTicketProps {
   marketPrice?: string | null;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
   submit: (order: OrderSubmission) => void;
-  onClickCollateral?: () => void;
   onDeposit: (assetId: string) => void;
 }
 
@@ -121,7 +120,6 @@ export const DealTicket = ({
   marketData,
   marketPrice,
   submit,
-  onClickCollateral,
   onDeposit,
 }: DealTicketProps) => {
   const { pubKey, isReadOnly } = useVegaWallet();
@@ -530,7 +528,6 @@ export const DealTicket = ({
         }
         isReadOnly={isReadOnly}
         pubKey={pubKey}
-        onClickCollateral={onClickCollateral}
         onDeposit={onDeposit}
       />
       <DealTicketButton side={side} />
@@ -566,7 +563,6 @@ interface SummaryMessageProps {
   margin: string;
   isReadOnly: boolean;
   pubKey: string | null;
-  onClickCollateral?: () => void;
   onDeposit: (assetId: string) => void;
 }
 
@@ -596,7 +592,6 @@ const SummaryMessage = memo(
     margin,
     isReadOnly,
     pubKey,
-    onClickCollateral,
     onDeposit,
   }: SummaryMessageProps) => {
     // Specific error UI for if balance is so we can
@@ -608,11 +603,7 @@ const SummaryMessage = memo(
     if (error?.type === SummaryValidationType.NoCollateral) {
       return (
         <div className="mb-2">
-          <ZeroBalanceError
+          <ZeroBalanceError asset={asset} onDeposit={onDeposit} />
-            asset={asset}
-            onClickCollateral={onClickCollateral}
-            onDeposit={onDeposit}
-          />
         </div>
       );
     }

libs/orders/src/lib/components/index.ts

@@ -1,3 +1,4 @@
+export * from './open-orders-menu';
 export * from './order-data-provider';
 export * from './order-list';
 export * from './order-list-manager';

libs/orders/src/lib/components/open-orders-menu/index.ts

@@ -0,0 +1 @@
+export * from './open-orders-menu';

libs/orders/src/lib/components/open-orders-menu/open-orders-menu.tsx

@@ -0,0 +1,39 @@
+import { t } from '@vegaprotocol/i18n';
+import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { useVegaTransactionStore, useVegaWallet } from '@vegaprotocol/wallet';
+import { useHasAmendableOrder } from '../../order-hooks';
+
+export const OpenOrdersMenu = ({ marketId }: { marketId: string }) => {
+  const { isReadOnly } = useVegaWallet();
+  const create = useVegaTransactionStore((state) => state.create);
+  const hasAmendableOrder = useHasAmendableOrder(marketId);
+
+  if (isReadOnly) {
+    return null;
+  }
+
+  if (!hasAmendableOrder) {
+    return null;
+  }
+
+  return (
+    <CancelAllOrdersButton
+      onClick={() => {
+        create({
+          orderCancellation: {},
+        });
+      }}
+    />
+  );
+};
+
+const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => (
+  <TradingButton
+    intent={Intent.Primary}
+    size="extra-small"
+    onClick={onClick}
+    data-testid="cancelAll"
+  >
+    {t('Cancel all')}
+  </TradingButton>
+);

libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx

@@ -1,9 +1,7 @@
 import { t } from '@vegaprotocol/i18n';
 import { useCallback, useRef, useState } from 'react';
-import { Button } from '@vegaprotocol/ui-toolkit';
 import type { AgGridReact } from 'ag-grid-react';
 import { OrderListTable } from '../order-list/order-list';
-import { useHasAmendableOrder } from '../../order-hooks/use-has-amendable-order';
 import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { ordersWithMarketProvider } from '../order-data-provider/order-data-provider';
@@ -24,7 +22,6 @@ export enum Filter {
 
 export interface OrderListManagerProps {
   partyId: string;
-  marketId?: string;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
   onOrderTypeClick?: (marketId: string, metaKey?: boolean) => void;
   isReadOnly: boolean;
@@ -34,7 +31,6 @@ export interface OrderListManagerProps {
 
 export const OrderListManager = ({
   partyId,
-  marketId,
   onMarketClick,
   onOrderTypeClick,
   isReadOnly,
@@ -45,7 +41,6 @@ export const OrderListManager = ({
   const [editOrder, setEditOrder] = useState<Order | null>(null);
   const [viewOrder, setViewOrder] = useState<Order | null>(null);
   const create = useVegaTransactionStore((state) => state.create);
-  const hasAmendableOrder = useHasAmendableOrder(marketId);
   const variables =
     filter === Filter.Open
       ? { partyId, filter: { liveOnly: true } }
@@ -76,12 +71,6 @@ export const OrderListManager = ({
     [create]
   );
 
-  const cancelAll = useCallback(() => {
-    create({
-      orderCancellation: {},
-    });
-  }, [create]);
-
   return (
     <>
       <div className="h-full relative">
@@ -100,9 +89,6 @@ export const OrderListManager = ({
           {...gridProps}
         />
       </div>
-      {!isReadOnly && hasAmendableOrder && (
-        <CancelAllOrdersButton onClick={cancelAll} />
-      )}
       {editOrder && (
         <OrderEditDialog
           isOpen={Boolean(editOrder)}
@@ -148,16 +134,3 @@ export const OrderListManager = ({
     </>
   );
 };
-
-const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => (
-  <div className="dark:bg-black/75 bg-white/75 h-auto flex justify-end p-2 absolute bottom-0 right-0 rounded">
-    <Button
-      variant="primary"
-      size="sm"
-      onClick={onClick}
-      data-testid="cancelAll"
-    >
-      {t('Cancel all')}
-    </Button>
-  </div>
-);