109 lines
2.6 KiB
TypeScript
109 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,
|
|
OrderStatus,
|
|
} 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>
|
|
);
|
|
};
|