313e6e1217
* 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
96 lines
2.4 KiB
TypeScript
96 lines
2.4 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';
|
|
|
|
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>Amount: {finalizedOrder.size}</p>
|
|
{finalizedOrder.type === 'Limit' && <p>Price: {finalizedOrder.price}</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>
|
|
);
|
|
};
|