diff --git a/apps/trading/client-pages/market/market.tsx b/apps/trading/client-pages/market/market.tsx index 70532a7b1..2175a48c2 100644 --- a/apps/trading/client-pages/market/market.tsx +++ b/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 ( { return ( navigate('/portfolio')} + pinnedAsset={ + data?.tradableInstrument.instrument.product.settlementAsset + } /> ); - }, [largeScreen, data, onSelect, navigate]); + }, [largeScreen, data]); if (!data && marketId) { return ( diff --git a/apps/trading/client-pages/market/trade-grid.tsx b/apps/trading/client-pages/market/trade-grid.tsx index 960a9ca74..b316a3f54 100644 --- a/apps/trading/client-pages/market/trade-grid.tsx +++ b/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 ( @@ -98,30 +95,27 @@ const MainGrid = memo( - + - - + } + > + - + - + - - + } + > + {FLAGS.STOP_ORDERS ? ( @@ -129,17 +123,14 @@ const MainGrid = memo( ) : null} - + - - + } + > + diff --git a/apps/trading/client-pages/market/trade-panels.tsx b/apps/trading/client-pages/market/trade-panels.tsx index 73fe93627..2868b64e6 100644 --- a/apps/trading/client-pages/market/trade-panels.tsx +++ b/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 = ({ - market, - onSelect, - onClickCollateral, - pinnedAsset, -}: TradePanelsProps) => { - const onMarketClick = useMarketClickHandler(true); - const onOrderTypeClick = useMarketLiquidityClickHandler(); - +export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => { const [view, setView] = useState('candles'); const renderView = () => { - const Component = memo<{ - marketId: string; - onSelect: (marketId: string, metaKey?: boolean) => void; - onMarketClick?: (marketId: string) => void; - onOrderTypeClick?: (marketId: string) => void; - onClickCollateral: () => void; - pinnedAsset?: PinnedAsset; - }>(TradingViews[view].component); + const Component = TradingViews[view].component; if (!Component) { throw new Error(`No component for view: ${view}`); @@ -54,16 +31,7 @@ export const TradePanels = ({ if (!market) return {NO_MARKET}; - return ( - - ); + return ; }; const renderMenu = () => { @@ -71,9 +39,10 @@ export const TradePanels = ({ if ('menu' in viewCfg) { const Menu = viewCfg.menu; + return (
- +
); } diff --git a/apps/trading/client-pages/market/trade-views.tsx b/apps/trading/client-pages/market/trade-views.tsx index 6c6293310..7d81da733 100644 --- a/apps/trading/client-pages/market/trade-views.tsx +++ b/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) => ( ), + 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 }, }; diff --git a/apps/trading/client-pages/portfolio/deposits-container.tsx b/apps/trading/client-pages/portfolio/deposits-container.tsx deleted file mode 100644 index 43e4c387c..000000000 --- a/apps/trading/client-pages/portfolio/deposits-container.tsx +++ /dev/null @@ -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 {t('Please connect Vega wallet')}; - } - return ( -
- - {!isReadOnly && ( -
- -
- )} -
- ); -}; diff --git a/apps/trading/client-pages/portfolio/portfolio.tsx b/apps/trading/client-pages/portfolio/portfolio.tsx index ca1defeb6..5fb0c0b38 100644 --- a/apps/trading/client-pages/portfolio/portfolio.tsx +++ b/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 = () => { - + - + @@ -85,16 +86,21 @@ export const Portfolio = () => { > - + } + > - + }> } + menu={} > diff --git a/apps/trading/client-pages/portfolio/withdrawals-container.tsx b/apps/trading/client-pages/portfolio/withdrawals-container.tsx deleted file mode 100644 index c2df94652..000000000 --- a/apps/trading/client-pages/portfolio/withdrawals-container.tsx +++ /dev/null @@ -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 {t('Please connect Vega wallet')}; - } - return ( - <> -
- -
- {!isReadOnly && ( -
- -
- )} - - ); -}; diff --git a/apps/trading/components/accounts-container/accounts-container.tsx b/apps/trading/components/accounts-container/accounts-container.tsx index 6d586de24..73f2d04a4 100644 --- a/apps/trading/components/accounts-container/accounts-container.tsx +++ b/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 ( -
- { - setView({ type: ViewType.Withdraw, assetId }); - }} - onClickDeposit={(assetId) => { - setView({ type: ViewType.Deposit, assetId }); - }} - onClickTransfer={(assetId) => { - setView({ type: ViewType.Transfer, assetId }); - }} - onMarketClick={onMarketClick} - isReadOnly={isReadOnly} - pinnedAsset={pinnedAsset} - gridProps={gridStoreCallbacks} - /> - {!isReadOnly && !hideButtons && ( -
- - -
- )} -
+ { + setView({ type: ViewType.Withdraw, assetId }); + }} + onClickDeposit={(assetId) => { + setView({ type: ViewType.Deposit, assetId }); + }} + onClickTransfer={(assetId) => { + setView({ type: ViewType.Transfer, assetId }); + }} + onMarketClick={onMarketClick} + isReadOnly={isReadOnly} + pinnedAsset={pinnedAsset} + gridProps={gridStoreCallbacks} + /> ); }; diff --git a/apps/trading/components/accounts-menu/accounts-menu.tsx b/apps/trading/components/accounts-menu/accounts-menu.tsx new file mode 100644 index 000000000..8fe5ae993 --- /dev/null +++ b/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 ( + <> + setView({ type: ViewType.Transfer })} + > + {t('Transfer')} + + setView({ type: ViewType.Deposit })} + > + {t('Deposit')} + + + ); +}; diff --git a/apps/trading/components/accounts-menu/index.ts b/apps/trading/components/accounts-menu/index.ts new file mode 100644 index 000000000..d57480db2 --- /dev/null +++ b/apps/trading/components/accounts-menu/index.ts @@ -0,0 +1 @@ +export * from './accounts-menu'; diff --git a/apps/trading/components/deposits-container/deposits-container.tsx b/apps/trading/components/deposits-container/deposits-container.tsx new file mode 100644 index 000000000..f888ce958 --- /dev/null +++ b/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 {t('Please connect Vega wallet')}; + } + return ( + + ); +}; diff --git a/apps/trading/components/deposits-container/index.ts b/apps/trading/components/deposits-container/index.ts new file mode 100644 index 000000000..e2e846531 --- /dev/null +++ b/apps/trading/components/deposits-container/index.ts @@ -0,0 +1 @@ +export * from './deposits-container'; diff --git a/apps/trading/components/deposits-menu/deposits-menu.tsx b/apps/trading/components/deposits-menu/deposits-menu.tsx new file mode 100644 index 000000000..28c751e84 --- /dev/null +++ b/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 ( + setView({ type: ViewType.Deposit })} + data-testid="deposit-button" + > + {t('Deposit')} + + ); +}; diff --git a/apps/trading/components/deposits-menu/index.ts b/apps/trading/components/deposits-menu/index.ts new file mode 100644 index 000000000..0e3bdad21 --- /dev/null +++ b/apps/trading/components/deposits-menu/index.ts @@ -0,0 +1 @@ +export * from './deposits-menu'; diff --git a/apps/trading/components/fills-container/fills-container.tsx b/apps/trading/components/fills-container/fills-container.tsx index a1f53bfc1..969d246f8 100644 --- a/apps/trading/components/fills-container/fills-container.tsx +++ b/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 = ({ - marketId, - onMarketClick, -}: { - marketId?: string; - onMarketClick?: (marketId: string, metaKey?: boolean) => void; -}) => { +export const FillsContainer = ({ marketId }: { marketId?: string }) => { + const onMarketClick = useMarketClickHandler(true); const { pubKey } = useVegaWallet(); const gridStore = useFillsStore((store) => store.gridStore); diff --git a/apps/trading/components/orders-container/orders-container.tsx b/apps/trading/components/orders-container/orders-container.tsx index d8c5d373e..c67979964 100644 --- a/apps/trading/components/orders-container/orders-container.tsx +++ b/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 ( void; - allKeys?: boolean; -}) => { +export const PositionsContainer = ({ allKeys }: { allKeys?: boolean }) => { + const onMarketClick = useMarketClickHandler(true); const { pubKey, pubKeys, isReadOnly } = useVegaWallet(); const gridStore = usePositionsStore((store) => store.gridStore); diff --git a/apps/trading/components/withdrawals-container/index.ts b/apps/trading/components/withdrawals-container/index.ts new file mode 100644 index 000000000..cd1fdf8ac --- /dev/null +++ b/apps/trading/components/withdrawals-container/index.ts @@ -0,0 +1 @@ +export * from './withdrawals-container'; diff --git a/apps/trading/components/withdrawals-container/withdrawals-container.tsx b/apps/trading/components/withdrawals-container/withdrawals-container.tsx new file mode 100644 index 000000000..517a3b277 --- /dev/null +++ b/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 {t('Please connect Vega wallet')}; + } + return ( + + ); +}; diff --git a/apps/trading/components/withdrawals-menu/index.ts b/apps/trading/components/withdrawals-menu/index.ts new file mode 100644 index 000000000..e0604c5b7 --- /dev/null +++ b/apps/trading/components/withdrawals-menu/index.ts @@ -0,0 +1 @@ +export * from './withdrawals-menu'; diff --git a/apps/trading/components/withdrawals-menu/withdrawals-menu.tsx b/apps/trading/components/withdrawals-menu/withdrawals-menu.tsx new file mode 100644 index 000000000..22f64f40f --- /dev/null +++ b/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 ( + setView({ type: ViewType.Withdraw })} + data-testid="withdraw-dialog-button" + > + {t('Make withdrawal')} + + ); +}; diff --git a/libs/deal-ticket/src/components/deal-ticket-validation/zero-balance-error.tsx b/libs/deal-ticket/src/components/deal-ticket-validation/zero-balance-error.tsx index 7867caf99..be2faa437 100644 --- a/libs/deal-ticket/src/components/deal-ticket-validation/zero-balance-error.tsx +++ b/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')}{' '} - collateral. - - )} } buttonProps={{ diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-container.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-container.tsx index b454de61d..d415bb962 100644 --- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-container.tsx +++ b/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; } diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx index 49bf6c541..b6d2f6172 100644 --- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx +++ b/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} /> @@ -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 (
- +
); } diff --git a/libs/orders/src/lib/components/index.ts b/libs/orders/src/lib/components/index.ts index 5bfd13d7e..9c602b804 100644 --- a/libs/orders/src/lib/components/index.ts +++ b/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'; diff --git a/libs/orders/src/lib/components/open-orders-menu/index.ts b/libs/orders/src/lib/components/open-orders-menu/index.ts new file mode 100644 index 000000000..e1f0befe0 --- /dev/null +++ b/libs/orders/src/lib/components/open-orders-menu/index.ts @@ -0,0 +1 @@ +export * from './open-orders-menu'; diff --git a/libs/orders/src/lib/components/open-orders-menu/open-orders-menu.tsx b/libs/orders/src/lib/components/open-orders-menu/open-orders-menu.tsx new file mode 100644 index 000000000..4ada22fb6 --- /dev/null +++ b/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 ( + { + create({ + orderCancellation: {}, + }); + }} + /> + ); +}; + +const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => ( + + {t('Cancel all')} + +); diff --git a/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx b/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx index 9455e4413..0a2600542 100644 --- a/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx +++ b/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(null); const [viewOrder, setViewOrder] = useState(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 ( <>
@@ -100,9 +89,6 @@ export const OrderListManager = ({ {...gridProps} />
- {!isReadOnly && hasAmendableOrder && ( - - )} {editOrder && ( ); }; - -const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => ( -
- -
-);