From 07abc2b1ebfadcffe561b859c184dad9d3d867ee Mon Sep 17 00:00:00 2001 From: "m.ray" <16125548+MadalinaRaicu@users.noreply.github.com> Date: Wed, 13 Jul 2022 16:23:46 +0200 Subject: [PATCH] Chore/657 refactor wallet and orders libs (#709) * feat: 470 edit orders hook and @vegaprotocol/vegawallet-service-api-client@0.4.14 * fix: 470 add methods for dialog intent and title * fix: #657 rename order-list lib to orders * chore: #657 move hooks to orders lib * chore: #657 vega tx dialog used for order cancellation and order submission * chore: #657 use client subscribe and unsubscribe on reset, refactor vegatxdialog * fix: #657 revert script src=./env-config.js ending * fix: #657 format project.json * Update project.json * fix: #657 cancel all subs and async tasks in useffect cleanup function * feat: #657 styling updates on vega order dialog * fix: #657 rename set dialog open and awaiting confirmation dialog update * fix: #657 updates on cancel order id check * fix: #657 fix vega tx dialog test * fix: #657 fix cypress trading-deal-tciket test * fix: #657 fix data-testid market test * Update libs/orders/README.md Co-authored-by: Dexter Edwards * Update libs/wallet/src/vega-order-transaction-dialog/vega-order-transaction-dialog.tsx Co-authored-by: Dexter Edwards * Update libs/wallet/src/vega-transaction-dialog/vega-transaction-dialog.tsx Co-authored-by: Dexter Edwards * Update libs/wallet/src/vega-order-transaction-dialog/vega-order-transaction-dialog.tsx Co-authored-by: Dexter Edwards * Update libs/wallet/src/vega-order-transaction-dialog/vega-order-transaction-dialog.tsx Co-authored-by: Dexter Edwards * fix: #657 remove the magic string and use the ordertype enum from types package * fix: #657 guarantee that order.id is present at this point or we need to determine the id of the order * fix: #657 fix translation in dialog * fix: #657 rename wallet types, delete ticket query, set finalized order null in submit * fix: #657 fix deal ticket steps test * fix: #657 remove settings.json * fix: #657 use order submit in orders lib * fix: #463 final modal links to block explorer * fix: #745 long/short instead of buy/sell * fix: #657 use only one vega tx dialog * fix: #657 keep ref of subscription and unsubscribe * fix: #657 hide cancelled orders * fix: #657 sub only when id set * fix: WIP: trying to unsub when order updated * fix: #745 long/short instead of buy/sell * fix: ensure observable defined * fix: #657 remove redundant test * Update libs/orders/src/lib/order-hooks/use-order-submit.ts * fix: failing test due to resizeobserver loop limit exceeded * fix: lint * fix: #657 fix test resize observer loop limit exceeded Co-authored-by: Dexter Edwards Co-authored-by: Matthew Russell Co-authored-by: Joe --- .../deal-ticket/deal-ticket-steps.tsx | 15 +- .../src/integration/trading-accounts.cy.ts | 4 + .../src/integration/trading-deal-ticket.cy.ts | 2 +- .../src/integration/trading-positions.cy.ts | 1 + .../src/support/mocks/generate-orders.ts | 2 +- .../pages/__generated__/MarketsLanding.ts | 6 +- apps/trading/pages/index.page.tsx | 9 +- .../trading/pages/markets/[marketId].page.tsx | 1 + apps/trading/pages/markets/trade-grid.tsx | 2 +- apps/trading/pages/portfolio/index.page.tsx | 2 +- .../src/components/deal-ticket-amount.tsx | 10 +- .../components/deal-ticket-limit-amount.tsx | 2 +- .../src/components/deal-ticket-manager.tsx | 82 ++---- .../components/deal-ticket-market-amount.tsx | 2 +- .../src/components/deal-ticket.spec.tsx | 40 ++- .../src/components/deal-ticket.tsx | 14 +- .../src/components/side-selector.tsx | 12 +- .../src/components/time-in-force-selector.tsx | 23 +- .../src/components/type-selector.tsx | 10 +- .../src/hooks/__generated__/OrderEvent.ts | 114 -------- .../src/hooks/use-order-submit.spec.tsx | 176 ------------- .../deal-ticket/src/hooks/use-order-submit.ts | 102 ------- libs/deal-ticket/src/index.ts | 3 - .../src/utils/get-default-order.ts | 28 -- .../__generated__/MarketList.ts | 6 +- .../markets-data-provider.ts | 1 + .../src/lib/utils/market-list.utils.ts | 9 +- libs/order-list/README.md | 7 - libs/order-list/package.json | 4 - .../cancel-dialog.spec.tsx | 65 ----- .../cancel-order-dialog/cancel-dialog.tsx | 65 ----- .../components/cancel-order-dialog/index.ts | 1 - libs/order-list/src/lib/index.ts | 1 - libs/{order-list => orders}/.babelrc | 0 libs/{order-list => orders}/.eslintrc.json | 0 .../{order-list => orders}/.storybook/main.js | 0 .../.storybook/preview-head.html | 0 .../.storybook/preview.js | 0 .../.storybook/tsconfig.json | 0 libs/orders/README.md | 7 + libs/{order-list => orders}/jest.config.js | 4 +- libs/orders/package.json | 4 + libs/{order-list => orders}/postcss.config.js | 0 libs/{order-list => orders}/project.json | 26 +- libs/{order-list => orders}/src/index.ts | 0 .../components/__generated__/OrderFields.ts | 0 .../lib/components/__generated__/OrderSub.ts | 0 .../lib/components}/__generated__/Orders.ts | 4 +- .../src/lib/components/__generated__/index.ts | 0 .../src/lib/components/index.ts | 1 - .../lib/components/mocks/generate-orders.ts | 2 +- .../src/lib/components/mocks/index.ts | 0 .../__generated__/OrderFields.ts | 0 .../__generated__/OrderSub.ts | 0 .../__generated__/Orders.ts | 0 .../components/order-data-provider/index.ts | 0 .../order-data-provider.spec.ts | 0 .../order-data-provider.ts | 0 .../lib/components/order-list-container.tsx | 0 .../components/order-list-manager/index.ts | 0 .../order-list-manager.spec.tsx | 0 .../order-list-manager/order-list-manager.tsx | 1 + .../src/lib/components/order-list/index.ts | 0 .../components/order-list/order-list.spec.tsx | 6 +- .../order-list/order-list.stories.tsx | 10 +- .../lib/components/order-list/order-list.tsx | 38 ++- libs/orders/src/lib/index.ts | 4 + libs/orders/src/lib/market.ts | 13 + .../order-hooks/__generated__/OrderEvent.ts | 10 +- .../lib}/order-hooks/__generated__/index.ts | 0 .../src/lib}/order-hooks/index.ts | 2 + .../src/lib}/order-hooks/order-event-query.ts | 2 + .../order-hooks/use-order-cancel.spec.tsx | 93 ++++++- .../src/lib/order-hooks/use-order-cancel.tsx | 117 ++++++++ .../lib/order-hooks/use-order-submit.spec.tsx | 224 ++++++++++++++++ .../src/lib/order-hooks/use-order-submit.ts | 123 +++++++++ .../use-order-validation.spec.tsx | 38 +-- .../lib/order-hooks}/use-order-validation.tsx | 10 +- .../orders/src/lib/utils/get-default-order.ts | 32 +++ libs/orders/src/lib/utils/index.ts | 2 + .../src/lib}/utils/validate-size.ts | 0 .../{order-list => orders}/src/setup-tests.ts | 0 libs/{order-list => orders}/src/styles.scss | 0 .../{order-list => orders}/tailwind.config.js | 0 libs/{order-list => orders}/tsconfig.json | 0 libs/{order-list => orders}/tsconfig.lib.json | 0 .../{order-list => orders}/tsconfig.spec.json | 0 libs/wallet/src/connectors/rest-connector.ts | 2 +- libs/wallet/src/connectors/vega-connector.ts | 2 +- libs/wallet/src/context.ts | 2 +- libs/wallet/src/index.ts | 5 +- libs/wallet/src/manage-dialog/index.ts | 1 + .../manage-dialog.spec.tsx | 8 +- .../src/{ => manage-dialog}/manage-dialog.tsx | 2 +- .../src/order-hooks/use-order-cancel.tsx | 83 ------ libs/wallet/src/provider.tsx | 2 +- libs/wallet/src/use-vega-transaction.ts | 2 +- .../vega-order-transaction-dialog/index.ts | 1 - .../vega-order-transaction-dialog.spec.tsx | 159 ----------- .../vega-order-transaction-dialog.tsx | 160 ----------- .../src/vega-transaction-dialog/index.ts | 1 + .../vega-transaction-dialog.spec.tsx | 234 ++++++++++++++++ .../vega-transaction-dialog.tsx | 249 ++++++++++++++++++ libs/wallet/src/{types.ts => wallet-types.ts} | 26 +- package.json | 2 +- tsconfig.base.json | 2 +- workspace.json | 2 +- yarn.lock | 8 +- 108 files changed, 1360 insertions(+), 1187 deletions(-) delete mode 100644 libs/deal-ticket/src/hooks/__generated__/OrderEvent.ts delete mode 100644 libs/deal-ticket/src/hooks/use-order-submit.spec.tsx delete mode 100644 libs/deal-ticket/src/hooks/use-order-submit.ts delete mode 100644 libs/deal-ticket/src/utils/get-default-order.ts delete mode 100644 libs/order-list/README.md delete mode 100644 libs/order-list/package.json delete mode 100644 libs/order-list/src/lib/components/cancel-order-dialog/cancel-dialog.spec.tsx delete mode 100644 libs/order-list/src/lib/components/cancel-order-dialog/cancel-dialog.tsx delete mode 100644 libs/order-list/src/lib/components/cancel-order-dialog/index.ts delete mode 100644 libs/order-list/src/lib/index.ts rename libs/{order-list => orders}/.babelrc (100%) rename libs/{order-list => orders}/.eslintrc.json (100%) rename libs/{order-list => orders}/.storybook/main.js (100%) rename libs/{order-list => orders}/.storybook/preview-head.html (100%) rename libs/{order-list => orders}/.storybook/preview.js (100%) rename libs/{order-list => orders}/.storybook/tsconfig.json (100%) create mode 100644 libs/orders/README.md rename libs/{order-list => orders}/jest.config.js (71%) create mode 100644 libs/orders/package.json rename libs/{order-list => orders}/postcss.config.js (100%) rename libs/{order-list => orders}/project.json (65%) rename libs/{order-list => orders}/src/index.ts (100%) rename libs/{order-list => orders}/src/lib/components/__generated__/OrderFields.ts (100%) rename libs/{order-list => orders}/src/lib/components/__generated__/OrderSub.ts (100%) rename libs/{order-list/src/lib/components/order-data-provider => orders/src/lib/components}/__generated__/Orders.ts (99%) rename libs/{order-list => orders}/src/lib/components/__generated__/index.ts (100%) rename libs/{order-list => orders}/src/lib/components/index.ts (84%) rename libs/{order-list => orders}/src/lib/components/mocks/generate-orders.ts (98%) rename libs/{order-list => orders}/src/lib/components/mocks/index.ts (100%) rename libs/{order-list => orders}/src/lib/components/order-data-provider/__generated__/OrderFields.ts (100%) rename libs/{order-list => orders}/src/lib/components/order-data-provider/__generated__/OrderSub.ts (100%) rename libs/{order-list/src/lib/components => orders/src/lib/components/order-data-provider}/__generated__/Orders.ts (100%) rename libs/{order-list => orders}/src/lib/components/order-data-provider/index.ts (100%) rename libs/{order-list => orders}/src/lib/components/order-data-provider/order-data-provider.spec.ts (100%) rename libs/{order-list => orders}/src/lib/components/order-data-provider/order-data-provider.ts (100%) rename libs/{order-list => orders}/src/lib/components/order-list-container.tsx (100%) rename libs/{order-list => orders}/src/lib/components/order-list-manager/index.ts (100%) rename libs/{order-list => orders}/src/lib/components/order-list-manager/order-list-manager.spec.tsx (100%) rename libs/{order-list => orders}/src/lib/components/order-list-manager/order-list-manager.tsx (96%) rename libs/{order-list => orders}/src/lib/components/order-list/index.ts (100%) rename libs/{order-list => orders}/src/lib/components/order-list/order-list.spec.tsx (96%) rename libs/{order-list => orders}/src/lib/components/order-list/order-list.stories.tsx (84%) rename libs/{order-list => orders}/src/lib/components/order-list/order-list.tsx (79%) create mode 100644 libs/orders/src/lib/index.ts create mode 100644 libs/orders/src/lib/market.ts rename libs/{wallet/src => orders/src/lib}/order-hooks/__generated__/OrderEvent.ts (92%) rename libs/{wallet/src => orders/src/lib}/order-hooks/__generated__/index.ts (100%) rename libs/{wallet/src => orders/src/lib}/order-hooks/index.ts (58%) rename libs/{wallet/src => orders/src/lib}/order-hooks/order-event-query.ts (92%) rename libs/{wallet/src => orders/src/lib}/order-hooks/use-order-cancel.spec.tsx (56%) create mode 100644 libs/orders/src/lib/order-hooks/use-order-cancel.tsx create mode 100644 libs/orders/src/lib/order-hooks/use-order-submit.spec.tsx create mode 100644 libs/orders/src/lib/order-hooks/use-order-submit.ts rename libs/{deal-ticket/src/hooks => orders/src/lib/order-hooks}/use-order-validation.spec.tsx (81%) rename libs/{deal-ticket/src/hooks => orders/src/lib/order-hooks}/use-order-validation.tsx (92%) create mode 100644 libs/orders/src/lib/utils/get-default-order.ts create mode 100644 libs/orders/src/lib/utils/index.ts rename libs/{deal-ticket/src => orders/src/lib}/utils/validate-size.ts (100%) rename libs/{order-list => orders}/src/setup-tests.ts (100%) rename libs/{order-list => orders}/src/styles.scss (100%) rename libs/{order-list => orders}/tailwind.config.js (100%) rename libs/{order-list => orders}/tsconfig.json (100%) rename libs/{order-list => orders}/tsconfig.lib.json (100%) rename libs/{order-list => orders}/tsconfig.spec.json (100%) create mode 100644 libs/wallet/src/manage-dialog/index.ts rename libs/wallet/src/{ => manage-dialog}/manage-dialog.spec.tsx (90%) rename libs/wallet/src/{ => manage-dialog}/manage-dialog.tsx (98%) delete mode 100644 libs/wallet/src/order-hooks/use-order-cancel.tsx delete mode 100644 libs/wallet/src/vega-order-transaction-dialog/index.ts delete mode 100644 libs/wallet/src/vega-order-transaction-dialog/vega-order-transaction-dialog.spec.tsx delete mode 100644 libs/wallet/src/vega-order-transaction-dialog/vega-order-transaction-dialog.tsx create mode 100644 libs/wallet/src/vega-transaction-dialog/index.ts create mode 100644 libs/wallet/src/vega-transaction-dialog/vega-transaction-dialog.spec.tsx create mode 100644 libs/wallet/src/vega-transaction-dialog/vega-transaction-dialog.tsx rename libs/wallet/src/{types.ts => wallet-types.ts} (60%) diff --git a/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-steps.tsx b/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-steps.tsx index fae8c9234..db2ae968d 100644 --- a/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-steps.tsx +++ b/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-steps.tsx @@ -2,25 +2,28 @@ import * as React from 'react'; import { useForm, Controller } from 'react-hook-form'; import Box from '@mui/material/Box'; import { Stepper } from '../stepper'; -import type { DealTicketQuery_market, Order } from '@vegaprotocol/deal-ticket'; +import type { DealTicketQuery_market } from '@vegaprotocol/deal-ticket'; import { Button, InputError } from '@vegaprotocol/ui-toolkit'; import { ExpirySelector, SideSelector, TimeInForceSelector, TypeSelector, - getDefaultOrder, - useOrderValidation, - useOrderSubmit, DealTicketAmount, MarketSelector, } from '@vegaprotocol/deal-ticket'; +import type { Order } from '@vegaprotocol/orders'; import { - OrderTimeInForce, - OrderType, + VegaWalletOrderTimeInForce as OrderTimeInForce, + VegaWalletOrderType as OrderType, VegaTxStatus, } from '@vegaprotocol/wallet'; import { t, addDecimal, toDecimal } from '@vegaprotocol/react-helpers'; +import { + getDefaultOrder, + useOrderValidation, + useOrderSubmit, +} from '@vegaprotocol/orders'; import { useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; import MarketNameRenderer from '../simple-market-list/simple-market-renderer'; diff --git a/apps/trading-e2e/src/integration/trading-accounts.cy.ts b/apps/trading-e2e/src/integration/trading-accounts.cy.ts index afefabbed..388b8102a 100644 --- a/apps/trading-e2e/src/integration/trading-accounts.cy.ts +++ b/apps/trading-e2e/src/integration/trading-accounts.cy.ts @@ -18,21 +18,25 @@ describe('accounts', () => { cy.getByTestId('tab-accounts').should('be.visible'); cy.getByTestId('tab-accounts') + .should('be.visible') .get(`[row-id='General-tEURO-null']`) .find('[col-id="asset.symbol"]') .should('have.text', 'tEURO'); cy.getByTestId('tab-accounts') + .should('be.visible') .get(`[row-id='General-tEURO-null']`) .find('[col-id="type"]') .should('have.text', 'General'); cy.getByTestId('tab-accounts') + .should('be.visible') .get(`[row-id='General-tEURO-null']`) .find('[col-id="market.name"]') .should('have.text', '—'); cy.getByTestId('tab-accounts') + .should('be.visible') .get(`[row-id='General-tEURO-null']`) .find('[col-id="balance"]') .should('have.text', '1,000.00000'); diff --git a/apps/trading-e2e/src/integration/trading-deal-ticket.cy.ts b/apps/trading-e2e/src/integration/trading-deal-ticket.cy.ts index b1015fc6b..6f20e96ec 100644 --- a/apps/trading-e2e/src/integration/trading-deal-ticket.cy.ts +++ b/apps/trading-e2e/src/integration/trading-deal-ticket.cy.ts @@ -33,7 +33,7 @@ describe('deal ticket orders', () => { const orderTIFDropDown = 'order-tif'; const placeOrderBtn = 'place-order'; const orderStatusHeader = 'order-status-header'; - const orderTransactionHash = 'tx-hash'; + const orderTransactionHash = 'tx-block-explorer'; before(() => { cy.mockGQL((req) => { diff --git a/apps/trading-e2e/src/integration/trading-positions.cy.ts b/apps/trading-e2e/src/integration/trading-positions.cy.ts index 8b362e9db..e1c2d4e45 100644 --- a/apps/trading-e2e/src/integration/trading-positions.cy.ts +++ b/apps/trading-e2e/src/integration/trading-positions.cy.ts @@ -19,6 +19,7 @@ describe('positions', () => { cy.getByTestId('tab-positions').should('be.visible'); cy.getByTestId('tab-positions') .get('[col-id="market.tradableInstrument.instrument.code"]') + .should('be.visible') .each(($marketSymbol) => { cy.wrap($marketSymbol).invoke('text').should('not.be.empty'); }); diff --git a/apps/trading-e2e/src/support/mocks/generate-orders.ts b/apps/trading-e2e/src/support/mocks/generate-orders.ts index 6c7219f62..08ec6ea23 100644 --- a/apps/trading-e2e/src/support/mocks/generate-orders.ts +++ b/apps/trading-e2e/src/support/mocks/generate-orders.ts @@ -1,6 +1,6 @@ import merge from 'lodash/merge'; import type { PartialDeep } from 'type-fest'; -import type { Orders, Orders_party_orders } from '@vegaprotocol/order-list'; +import type { Orders, Orders_party_orders } from '@vegaprotocol/orders'; import { OrderStatus, OrderTimeInForce, diff --git a/apps/trading/pages/__generated__/MarketsLanding.ts b/apps/trading/pages/__generated__/MarketsLanding.ts index 266864354..edc7cb8fe 100644 --- a/apps/trading/pages/__generated__/MarketsLanding.ts +++ b/apps/trading/pages/__generated__/MarketsLanding.ts @@ -3,7 +3,7 @@ // @generated // This file was automatically generated and should not be edited. -import { MarketTradingMode } from "@vegaprotocol/types"; +import { MarketTradingMode, MarketState } from "@vegaprotocol/types"; // ==================================================== // GraphQL query operation: MarketsLanding @@ -27,6 +27,10 @@ export interface MarketsLanding_markets { * Current mode of execution of the market */ tradingMode: MarketTradingMode; + /** + * Current state of the market + */ + state: MarketState; /** * timestamps for state changes in the market */ diff --git a/apps/trading/pages/index.page.tsx b/apps/trading/pages/index.page.tsx index ee52b352b..d33792245 100644 --- a/apps/trading/pages/index.page.tsx +++ b/apps/trading/pages/index.page.tsx @@ -1,7 +1,7 @@ import { gql, useQuery } from '@apollo/client'; import { MarketTradingMode } from '@vegaprotocol/types'; import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; -import sortBy from 'lodash/sortBy'; +import orderBy from 'lodash/orderBy'; import { useRouter } from 'next/router'; import { useEffect } from 'react'; import { useGlobalStore } from '../stores'; @@ -12,6 +12,7 @@ const MARKETS_QUERY = gql` markets { id tradingMode + state marketTimestamps { open } @@ -20,13 +21,13 @@ const MARKETS_QUERY = gql` `; const marketList = ({ markets }: MarketsLanding) => - sortBy( + orderBy( markets?.filter( ({ marketTimestamps, tradingMode }) => marketTimestamps.open && tradingMode === MarketTradingMode.Continuous ) || [], - 'marketTimestamps.open', - 'id' + ['state', 'marketTimestamps.open', 'id'], + ['asc', 'asc', 'asc'] ); export function Index() { diff --git a/apps/trading/pages/markets/[marketId].page.tsx b/apps/trading/pages/markets/[marketId].page.tsx index a1cfc4844..463c3d16b 100644 --- a/apps/trading/pages/markets/[marketId].page.tsx +++ b/apps/trading/pages/markets/[marketId].page.tsx @@ -81,6 +81,7 @@ const MarketPage = ({ id }: { id?: string }) => { return ( query={MARKET_QUERY} + data-testid="market" options={{ variables: { marketId, diff --git a/apps/trading/pages/markets/trade-grid.tsx b/apps/trading/pages/markets/trade-grid.tsx index 2f150c99a..1aac09459 100644 --- a/apps/trading/pages/markets/trade-grid.tsx +++ b/apps/trading/pages/markets/trade-grid.tsx @@ -6,7 +6,7 @@ import { DealTicketContainer, MarketInfoContainer, } from '@vegaprotocol/deal-ticket'; -import { OrderListContainer } from '@vegaprotocol/order-list'; +import { OrderListContainer } from '@vegaprotocol/orders'; import { TradesContainer } from '@vegaprotocol/trades'; import { PositionsContainer } from '@vegaprotocol/positions'; import { OrderbookContainer } from '@vegaprotocol/market-depth'; diff --git a/apps/trading/pages/portfolio/index.page.tsx b/apps/trading/pages/portfolio/index.page.tsx index 43310c627..8deed921b 100644 --- a/apps/trading/pages/portfolio/index.page.tsx +++ b/apps/trading/pages/portfolio/index.page.tsx @@ -1,7 +1,7 @@ import { Web3Container } from '../../components/web3-container'; import { t } from '@vegaprotocol/react-helpers'; import { PositionsContainer } from '@vegaprotocol/positions'; -import { OrderListContainer } from '@vegaprotocol/order-list'; +import { OrderListContainer } from '@vegaprotocol/orders'; import { AccountsContainer } from '@vegaprotocol/accounts'; import { AnchorButton, Tab, Tabs } from '@vegaprotocol/ui-toolkit'; import { WithdrawalsContainer } from './withdrawals/withdrawals-container'; diff --git a/libs/deal-ticket/src/components/deal-ticket-amount.tsx b/libs/deal-ticket/src/components/deal-ticket-amount.tsx index b497d5554..000153aea 100644 --- a/libs/deal-ticket/src/components/deal-ticket-amount.tsx +++ b/libs/deal-ticket/src/components/deal-ticket-amount.tsx @@ -1,11 +1,11 @@ import type { UseFormRegister } from 'react-hook-form'; -import { OrderType } from '@vegaprotocol/wallet'; -import type { Order } from '../utils/get-default-order'; +import { VegaWalletOrderType } from '@vegaprotocol/wallet'; +import type { Order } from '@vegaprotocol/orders'; import { DealTicketMarketAmount } from './deal-ticket-market-amount'; import { DealTicketLimitAmount } from './deal-ticket-limit-amount'; export interface DealTicketAmountProps { - orderType: OrderType; + orderType: VegaWalletOrderType; step: number; register: UseFormRegister; quoteName: string; @@ -17,9 +17,9 @@ export const DealTicketAmount = ({ ...props }: DealTicketAmountProps) => { switch (orderType) { - case OrderType.Market: + case VegaWalletOrderType.Market: return ; - case OrderType.Limit: + case VegaWalletOrderType.Limit: return ; default: { throw new Error('Invalid ticket type'); diff --git a/libs/deal-ticket/src/components/deal-ticket-limit-amount.tsx b/libs/deal-ticket/src/components/deal-ticket-limit-amount.tsx index ffd16b738..87622b3f4 100644 --- a/libs/deal-ticket/src/components/deal-ticket-limit-amount.tsx +++ b/libs/deal-ticket/src/components/deal-ticket-limit-amount.tsx @@ -1,6 +1,6 @@ import { FormGroup, Input } from '@vegaprotocol/ui-toolkit'; import { t } from '@vegaprotocol/react-helpers'; -import { validateSize } from '../utils/validate-size'; +import { validateSize } from '@vegaprotocol/orders'; import type { DealTicketAmountProps } from './deal-ticket-amount'; export type DealTicketLimitAmountProps = Omit< diff --git a/libs/deal-ticket/src/components/deal-ticket-manager.tsx b/libs/deal-ticket/src/components/deal-ticket-manager.tsx index f23ec326b..b202f6c6f 100644 --- a/libs/deal-ticket/src/components/deal-ticket-manager.tsx +++ b/libs/deal-ticket/src/components/deal-ticket-manager.tsx @@ -1,11 +1,10 @@ import type { ReactNode } from 'react'; -import { useEffect, useState } from 'react'; -import { Dialog, Intent } from '@vegaprotocol/ui-toolkit'; -import { OrderStatus } from '@vegaprotocol/types'; -import { VegaOrderTransactionDialog, VegaTxStatus } from '@vegaprotocol/wallet'; +import { useState } from 'react'; +import { VegaTransactionDialog, VegaTxStatus } from '@vegaprotocol/wallet'; import { DealTicket } from './deal-ticket'; -import { useOrderSubmit } from '../hooks/use-order-submit'; import type { DealTicketQuery_market } from './__generated__/DealTicketQuery'; +import { useOrderSubmit } from '@vegaprotocol/orders'; +import { OrderStatus } from '@vegaprotocol/types'; export interface DealTicketManagerProps { market: DealTicketQuery_market; @@ -18,43 +17,20 @@ export const DealTicketManager = ({ }: DealTicketManagerProps) => { const [orderDialogOpen, setOrderDialogOpen] = useState(false); const { submit, transaction, finalizedOrder, reset } = useOrderSubmit(market); - - const getDialogIntent = (status: VegaTxStatus) => { - if (finalizedOrder) { - if ( - finalizedOrder.status === OrderStatus.Active || - finalizedOrder.status === OrderStatus.Filled || - finalizedOrder.status === OrderStatus.PartiallyFilled - ) { - return Intent.Success; - } - - if (finalizedOrder.status === OrderStatus.Parked) { - return Intent.Warning; - } - - return Intent.Danger; + const getDialogTitle = (status?: string) => { + switch (status) { + case OrderStatus.Active: + return 'Order submitted'; + case OrderStatus.Filled: + return 'Order filled'; + case OrderStatus.PartiallyFilled: + return 'Order partially filled'; + case OrderStatus.Parked: + return 'Order parked'; + default: + return 'Submission failed'; } - - if (status === VegaTxStatus.Requested) { - return Intent.Warning; - } - - if (status === VegaTxStatus.Error) { - return Intent.Danger; - } - - return Intent.None; }; - - useEffect(() => { - if (transaction.status !== VegaTxStatus.Default || finalizedOrder) { - setOrderDialogOpen(true); - } else { - setOrderDialogOpen(false); - } - }, [finalizedOrder, transaction.status]); - return ( <> {children || ( @@ -69,23 +45,15 @@ export const DealTicketManager = ({ } /> )} - { - setOrderDialogOpen(isOpen); - - // If closing reset - if (!isOpen) { - reset(); - } - }} - intent={getDialogIntent(transaction.status)} - > - - + ); }; diff --git a/libs/deal-ticket/src/components/deal-ticket-market-amount.tsx b/libs/deal-ticket/src/components/deal-ticket-market-amount.tsx index 483e721cc..881f3c439 100644 --- a/libs/deal-ticket/src/components/deal-ticket-market-amount.tsx +++ b/libs/deal-ticket/src/components/deal-ticket-market-amount.tsx @@ -1,6 +1,6 @@ import { FormGroup, Input } from '@vegaprotocol/ui-toolkit'; import { t } from '@vegaprotocol/react-helpers'; -import { validateSize } from '../utils/validate-size'; +import { validateSize } from '@vegaprotocol/orders'; import type { DealTicketAmountProps } from './deal-ticket-amount'; export type DealTicketMarketAmountProps = Omit< diff --git a/libs/deal-ticket/src/components/deal-ticket.spec.tsx b/libs/deal-ticket/src/components/deal-ticket.spec.tsx index 50a8ee1fa..2b06c0c6e 100644 --- a/libs/deal-ticket/src/components/deal-ticket.spec.tsx +++ b/libs/deal-ticket/src/components/deal-ticket.spec.tsx @@ -1,7 +1,7 @@ import { VegaWalletContext, - OrderTimeInForce, - OrderType, + VegaWalletOrderTimeInForce, + VegaWalletOrderType, } from '@vegaprotocol/wallet'; import { addDecimal } from '@vegaprotocol/react-helpers'; import { fireEvent, render, screen, act } from '@testing-library/react'; @@ -64,7 +64,7 @@ it('Displays ticket defaults', () => { // Assert defaults are used expect( - screen.getByTestId(`order-type-${OrderType.Market}-selected`) + screen.getByTestId(`order-type-${VegaWalletOrderType.Market}-selected`) ).toBeInTheDocument(); expect( screen.queryByTestId('order-side-SIDE_BUY-selected') @@ -75,7 +75,9 @@ it('Displays ticket defaults', () => { expect(screen.getByTestId('order-size')).toHaveDisplayValue( String(1 / Math.pow(10, market.positionDecimalPlaces)) ); - expect(screen.getByTestId('order-tif')).toHaveValue(OrderTimeInForce.IOC); + expect(screen.getByTestId('order-tif')).toHaveValue( + VegaWalletOrderTimeInForce.IOC + ); // Assert last price is shown expect(screen.getByTestId('last-price')).toHaveTextContent( @@ -101,9 +103,11 @@ it('Can edit deal ticket', async () => { expect(screen.getByTestId('order-size')).toHaveDisplayValue('200'); fireEvent.change(screen.getByTestId('order-tif'), { - target: { value: OrderTimeInForce.IOC }, + target: { value: VegaWalletOrderTimeInForce.IOC }, }); - expect(screen.getByTestId('order-tif')).toHaveValue(OrderTimeInForce.IOC); + expect(screen.getByTestId('order-tif')).toHaveValue( + VegaWalletOrderTimeInForce.IOC + ); // Switch to limit order fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT')); @@ -113,7 +117,7 @@ it('Can edit deal ticket', async () => { // Check all TIF options shown expect(screen.getByTestId('order-tif').children).toHaveLength( - Object.keys(OrderTimeInForce).length + Object.keys(VegaWalletOrderTimeInForce).length ); }); @@ -130,26 +134,34 @@ it('Handles TIF select box dependent on order type', () => { // Switch to limit order and check all TIF options shown fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT')); expect(screen.getByTestId('order-tif').children).toHaveLength( - Object.keys(OrderTimeInForce).length + Object.keys(VegaWalletOrderTimeInForce).length ); // Change to GTC fireEvent.change(screen.getByTestId('order-tif'), { - target: { value: OrderTimeInForce.GTC }, + target: { value: VegaWalletOrderTimeInForce.GTC }, }); - expect(screen.getByTestId('order-tif')).toHaveValue(OrderTimeInForce.GTC); + expect(screen.getByTestId('order-tif')).toHaveValue( + VegaWalletOrderTimeInForce.GTC + ); // Switch back to market order and TIF should now be IOC fireEvent.click(screen.getByTestId('order-type-TYPE_MARKET')); - expect(screen.getByTestId('order-tif')).toHaveValue(OrderTimeInForce.IOC); + expect(screen.getByTestId('order-tif')).toHaveValue( + VegaWalletOrderTimeInForce.IOC + ); // Switch tif to FOK fireEvent.change(screen.getByTestId('order-tif'), { - target: { value: OrderTimeInForce.FOK }, + target: { value: VegaWalletOrderTimeInForce.FOK }, }); - expect(screen.getByTestId('order-tif')).toHaveValue(OrderTimeInForce.FOK); + expect(screen.getByTestId('order-tif')).toHaveValue( + VegaWalletOrderTimeInForce.FOK + ); // Change back to limit and check we are still on FOK fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT')); - expect(screen.getByTestId('order-tif')).toHaveValue(OrderTimeInForce.FOK); + expect(screen.getByTestId('order-tif')).toHaveValue( + VegaWalletOrderTimeInForce.FOK + ); }); diff --git a/libs/deal-ticket/src/components/deal-ticket.tsx b/libs/deal-ticket/src/components/deal-ticket.tsx index eb4a87724..8daf81b18 100644 --- a/libs/deal-ticket/src/components/deal-ticket.tsx +++ b/libs/deal-ticket/src/components/deal-ticket.tsx @@ -1,17 +1,19 @@ import { useCallback } from 'react'; import { useForm, Controller } from 'react-hook-form'; -import { OrderType, OrderTimeInForce } from '@vegaprotocol/wallet'; +import { + VegaWalletOrderType, + VegaWalletOrderTimeInForce, +} from '@vegaprotocol/wallet'; import { t, addDecimal, toDecimal } from '@vegaprotocol/react-helpers'; import { Button, InputError } from '@vegaprotocol/ui-toolkit'; import { TypeSelector } from './type-selector'; import { SideSelector } from './side-selector'; import { DealTicketAmount } from './deal-ticket-amount'; import { TimeInForceSelector } from './time-in-force-selector'; -import { useOrderValidation } from '../hooks/use-order-validation'; import type { DealTicketQuery_market } from './__generated__/DealTicketQuery'; -import type { Order } from '../utils/get-default-order'; -import { getDefaultOrder } from '../utils/get-default-order'; import { ExpirySelector } from './expiry-selector'; +import type { Order } from '@vegaprotocol/orders'; +import { getDefaultOrder, useOrderValidation } from '@vegaprotocol/orders'; export type TransactionStatus = 'default' | 'pending'; @@ -97,8 +99,8 @@ export const DealTicket = ({ /> )} /> - {orderType === OrderType.Limit && - orderTimeInForce === OrderTimeInForce.GTT && ( + {orderType === VegaWalletOrderType.Limit && + orderTimeInForce === VegaWalletOrderTimeInForce.GTT && ( void; + value: VegaWalletOrderSide; + onSelect: (side: VegaWalletOrderSide) => void; } export const SideSelector = ({ value, onSelect }: SideSelectorProps) => { - const toggles = Object.entries(OrderSide).map(([label, value]) => ({ - label, + const toggles = Object.entries(VegaWalletOrderSide).map(([label, value]) => ({ + label: label === 'Buy' ? 'Long' : 'Short', value, })); @@ -21,7 +21,7 @@ export const SideSelector = ({ value, onSelect }: SideSelectorProps) => { name="order-side" toggles={toggles} checkedValue={value} - onChange={(e) => onSelect(e.target.value as OrderSide)} + onChange={(e) => onSelect(e.target.value as VegaWalletOrderSide)} /> ); diff --git a/libs/deal-ticket/src/components/time-in-force-selector.tsx b/libs/deal-ticket/src/components/time-in-force-selector.tsx index e6d9c3282..6f7dd17b7 100644 --- a/libs/deal-ticket/src/components/time-in-force-selector.tsx +++ b/libs/deal-ticket/src/components/time-in-force-selector.tsx @@ -1,11 +1,14 @@ import { FormGroup, Select } from '@vegaprotocol/ui-toolkit'; -import { OrderTimeInForce, OrderType } from '@vegaprotocol/wallet'; +import { + VegaWalletOrderTimeInForce, + VegaWalletOrderType, +} from '@vegaprotocol/wallet'; import { t } from '@vegaprotocol/react-helpers'; interface TimeInForceSelectorProps { - value: OrderTimeInForce; - orderType: OrderType; - onSelect: (tif: OrderTimeInForce) => void; + value: VegaWalletOrderTimeInForce; + orderType: VegaWalletOrderType; + onSelect: (tif: VegaWalletOrderTimeInForce) => void; } export const TimeInForceSelector = ({ @@ -14,12 +17,12 @@ export const TimeInForceSelector = ({ onSelect, }: TimeInForceSelectorProps) => { const options = - orderType === OrderType.Limit - ? Object.entries(OrderTimeInForce) - : Object.entries(OrderTimeInForce).filter( + orderType === VegaWalletOrderType.Limit + ? Object.entries(VegaWalletOrderTimeInForce) + : Object.entries(VegaWalletOrderTimeInForce).filter( ([_, timeInForce]) => - timeInForce === OrderTimeInForce.FOK || - timeInForce === OrderTimeInForce.IOC + timeInForce === VegaWalletOrderTimeInForce.FOK || + timeInForce === VegaWalletOrderTimeInForce.IOC ); return ( @@ -27,7 +30,7 @@ export const TimeInForceSelector = ({