6ad2a7676e
* 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 * add button radio component * revert dialog styles * move splash component to ui-toolkit, add story * convert intent to enum * add date-fns, add datetime to helpers * add order types to wallet package, make price undefined if order type is market * tidy up order state by moving submit and transaction hooks out of deal ticket * add types package, delete old generated types from trading project * rename types package to graphql * add order list container and order list component * add test setup for useOrders * add test for use-orders hook * tidy unnecessary diff * regen types and use them in order-list, also change to use applytransaction hook for orderlist grid * make order table columns resizable * make market table not have highlightable cells, use splash for orders errors and loading states, unit test for orderlist container * add tests for order list table * show rejection reason and expires at depending on status and tif * add decimal places to query * only update row if data has changed, add test coverage * add setup tests file to avoid importing jest-dom for every test, add async-renderer component to handle fetch ui logic * install all of lodash but import individually to get tree shaking * add setup tests file for orderlist package * add missing fields to use orders spec mock order * fix act warnings in index page test * fix casing of app import * remove react-singleton-hook, simplify side formatting * fix linting errors
106 lines
2.6 KiB
TypeScript
106 lines
2.6 KiB
TypeScript
import { Icon, Loader } from '@vegaprotocol/ui-toolkit';
|
|
import { ReactNode } from 'react';
|
|
import {
|
|
TransactionState,
|
|
VegaTxStatus,
|
|
} from '../../hooks/use-vega-transaction';
|
|
import { OrderEvent_busEvents_event_Order } from '@vegaprotocol/graphql';
|
|
import { formatNumber } from '@vegaprotocol/react-helpers';
|
|
|
|
interface OrderDialogProps {
|
|
transaction: TransactionState;
|
|
finalizedOrder: OrderEvent_busEvents_event_Order | null;
|
|
}
|
|
|
|
export const OrderDialog = ({
|
|
transaction,
|
|
finalizedOrder,
|
|
}: OrderDialogProps) => {
|
|
// TODO: When wallets support confirming transactions return UI for 'awaiting confirmation' step
|
|
|
|
// Rejected by wallet
|
|
if (transaction.status === VegaTxStatus.Rejected) {
|
|
return (
|
|
<OrderDialogWrapper
|
|
title="Order rejected by wallet"
|
|
icon={<Icon name="warning-sign" size={20} />}
|
|
>
|
|
{transaction.error && (
|
|
<pre className="text-ui break-all whitespace-pre-wrap">
|
|
{JSON.stringify(transaction.error, null, 2)}
|
|
</pre>
|
|
)}
|
|
</OrderDialogWrapper>
|
|
);
|
|
}
|
|
|
|
// Pending consensus
|
|
if (!finalizedOrder) {
|
|
return (
|
|
<OrderDialogWrapper
|
|
title="Awaiting network confirmation"
|
|
icon={<Loader />}
|
|
>
|
|
{transaction.hash && (
|
|
<p className="break-all">Tx hash: {transaction.hash}</p>
|
|
)}
|
|
</OrderDialogWrapper>
|
|
);
|
|
}
|
|
|
|
// Order on network but was rejected
|
|
if (finalizedOrder.status === 'Rejected') {
|
|
return (
|
|
<OrderDialogWrapper
|
|
title="Order failed"
|
|
icon={<Icon name="warning-sign" size={20} />}
|
|
>
|
|
<p>Reason: {finalizedOrder.rejectionReason}</p>
|
|
</OrderDialogWrapper>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<OrderDialogWrapper
|
|
title="Order placed"
|
|
icon={<Icon name="tick" size={20} />}
|
|
>
|
|
<p>Status: {finalizedOrder.status}</p>
|
|
<p>Market: {finalizedOrder.market.name}</p>
|
|
<p>Type: {finalizedOrder.type}</p>
|
|
<p>Amount: {finalizedOrder.size}</p>
|
|
{finalizedOrder.type === 'Limit' && (
|
|
<p>
|
|
Price:{' '}
|
|
{formatNumber(
|
|
finalizedOrder.price,
|
|
finalizedOrder.market.decimalPlaces
|
|
)}
|
|
</p>
|
|
)}
|
|
</OrderDialogWrapper>
|
|
);
|
|
};
|
|
|
|
interface OrderDialogWrapperProps {
|
|
children: ReactNode;
|
|
icon: ReactNode;
|
|
title: string;
|
|
}
|
|
|
|
const OrderDialogWrapper = ({
|
|
children,
|
|
icon,
|
|
title,
|
|
}: OrderDialogWrapperProps) => {
|
|
return (
|
|
<div className="flex gap-12 max-w-full">
|
|
<div className="pt-8 fill-current">{icon}</div>
|
|
<div className="flex-1">
|
|
<h1 className="text-h4">{title}</h1>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|