vega-frontend-monorepo/apps/trading/components/deal-ticket-container/deal-ticket-container.tsx
Matthew Russell 313e6e1217
Feat/63 Deal ticket (#82)
* scaffold dealticket package, remove trading views from react-helpers

* add deal ticket component, add intent utils, expand dialog and form group styles

* add splash component, show market not found message if market doesnt exist

* tidy up error handling

* add handleError method for vega tx hook

* add better testname for provider test, flesh out tests a bit more for deal ticket

* Add unit tests for useVegaTransaction and useOrderSubmit hooks

* add wrapper component for order dialog styles

* add vega styled loader to ui toolkit and use in order dialog

* add title prop to order dialog

* split limit and market tickets into own files

* add button radio component

* revert dialog styles

* move splash component to ui-toolkit, add story

* convert intent to enum

* Make button always type=button unless type prop is passed

* inline filter logic for tif selector

* add date-fns, add datetime to helpers

* add order types to wallet package, make price undefined if order type is market

* use enums in deal ticket logic

* tidy up order state by moving submit and transaction hooks out of deal ticket

* add comment for dialog styles

* remove decimal from price input

* add types package, delete old generated types from trading project

* rename types package to graphql

* update generate command to point to correct locations

* fix use order submit test

* use intent shadow helper

* remove date-fns and format manually, update submit button error to use input-error

* remove stray console.log
2022-03-17 12:35:46 -07:00

75 lines
2.0 KiB
TypeScript

import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
import { DealTicket } from '@vegaprotocol/deal-ticket';
import { OrderStatus } from '@vegaprotocol/graphql';
import { useOrderSubmit } from '../../hooks/use-order-submit';
import { useEffect, useState } from 'react';
import { VegaTxStatus } from '../../hooks/use-vega-transaction';
import { OrderDialog } from './order-dialog';
export const DealTicketContainer = ({ market }) => {
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;
}
if (status === VegaTxStatus.Rejected) {
return Intent.Danger;
}
return Intent.Progress;
};
useEffect(() => {
if (transaction.status !== VegaTxStatus.Default) {
setOrderDialogOpen(true);
}
}, [transaction.status]);
return (
<>
<DealTicket
market={market}
submit={submit}
transactionStatus={
transaction.status === VegaTxStatus.AwaitingConfirmation ||
transaction.status === VegaTxStatus.Pending
? 'pending'
: 'default'
}
/>
<Dialog
open={orderDialogOpen}
onChange={(isOpen) => {
setOrderDialogOpen(isOpen);
// If closing reset
if (!isOpen) {
reset();
}
}}
intent={getDialogIntent(transaction.status)}
>
<OrderDialog
transaction={transaction}
finalizedOrder={finalizedOrder}
/>
</Dialog>
</>
);
};