@coinmeca/ui
Version:
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
137 lines • 7 kB
JSX
"use client";
import { useState } from "react";
import { Controls, Elements, Layouts } from "../../../../components";
import { Modals } from "../../../../containers";
export default function Confirmation(props) {
const mode = typeof props?.mode === "undefined" ? true : props?.mode;
const color = {
buy: props?.color?.buy || "green",
sell: props?.color?.sell || "red",
};
const [process, setProcess] = useState(null);
const [loading, setLoading] = useState(false);
const execute = async () => {
setProcess(await props.onProcess());
};
const handleClose = (e) => {
if (typeof props?.onClose === "function")
props?.onClose(e);
};
const confirm = (confirm) => {
const gap = {
row: 2,
space: {
small: { padding: "0 0.5em" },
},
};
const text = {
height: 1.5,
opacity: 0.45,
label: { flex: 0 },
setting: { fontFeatureSettings: `"tnum" on,"lnum" on` },
width: { width: "100%", maxWidth: `${4}em` },
align: "right",
};
return (<Layouts.Col gap={2} style={{ height: "100%" }}>
<Layouts.Contents.InnerContent style={{ justifyContent: "center", ...text?.setting }}>
<Layouts.Col gap={1}>
<Layouts.Row gap={gap.row} style={gap.space.small} fix>
<Elements.Text height={text.height} opacity={text.opacity} fit>
Price
</Elements.Text>
<Layouts.Row gap={gap.row} fix>
<Elements.Text color={mode ? color.buy : color.sell} height={text.height} align={text.align}>
{props?.order?.price}
</Elements.Text>
<Elements.Text height={text.height} opacity={text.opacity} style={text.width}>
{"eth".toUpperCase()}
</Elements.Text>
</Layouts.Row>
</Layouts.Row>
<Layouts.Divider />
<Layouts.Row gap={gap.row} style={gap.space.small} fix>
<Elements.Text height={text.height} opacity={text.opacity} fit>
Amount
</Elements.Text>
<Layouts.Row gap={gap.row} fix>
<Elements.Text height={text.height} align={text.align}>
{props?.order?.amount}
</Elements.Text>
<Elements.Text height={text.height} opacity={text.opacity} style={text.width}>
{"eth".toUpperCase()}
</Elements.Text>
</Layouts.Row>
</Layouts.Row>
<Layouts.Row gap={gap.row} style={gap.space.small} fix>
<Elements.Text height={text.height} opacity={text.opacity} fit>
Quantity
</Elements.Text>
<Layouts.Row gap={gap.row} fix>
<Elements.Text color={mode ? color.buy : color.sell} height={text.height} align={text.align}>
{props?.order?.quantity}
</Elements.Text>
<Elements.Text height={text.height} opacity={text.opacity} style={text.width}>
{"eth".toUpperCase()}
</Elements.Text>
</Layouts.Row>
</Layouts.Row>
<Layouts.Divider />
<Layouts.Row gap={gap.row} style={gap.space.small} fix>
<Elements.Text height={text.height} opacity={text.opacity} fit>
Fees
</Elements.Text>
<Layouts.Row gap={gap.row} fix>
<Elements.Text opacity={0.45} height={text.height} align={text.align}>
- {props?.order?.fees}
</Elements.Text>
<Elements.Text height={text.height} opacity={text.opacity} style={text.width}>
{"eth".toUpperCase()}
</Elements.Text>
</Layouts.Row>
</Layouts.Row>
<Layouts.Row gap={gap.row} style={gap.space.small} fix>
<Elements.Text height={text.height} opacity={text.opacity} fit>
Total
</Elements.Text>
<Layouts.Row gap={gap.row} fix>
<Elements.Text color={mode ? color.buy : color.sell} height={text.height} align={text.align}>
{props?.order?.total}
</Elements.Text>
<Elements.Text height={text.height} opacity={text.opacity} style={text.width}>
{"eth".toUpperCase()}
</Elements.Text>
</Layouts.Row>
</Layouts.Row>
</Layouts.Col>
</Layouts.Contents.InnerContent>
<Controls.Button onClick={confirm}>Confirm</Controls.Button>
</Layouts.Col>);
};
return (<Modals.Process process={process} title={`${mode ? "Buy" : "Sell"} Confirmation`} content={confirm(async () => {
setLoading(true);
await execute();
setLoading(false);
})} failure={{
message: "Your order failed to process.",
children: (<Controls.Button onClick={(e) => {
setProcess(null);
}}>
Go Back
</Controls.Button>),
}} loading={{
active: loading,
message: "Please wait while your transaction is being processed.",
}} success={{
message: "Your order has been successfully completed.",
children: (<Controls.Button onClick={(e) => {
handleClose(e);
setProcess(null);
setLoading(false);
}}>
OK
</Controls.Button>),
}} onClose={(e) => {
handleClose(e);
}} close={!loading}/>);
}
//# sourceMappingURL=Confirmation.jsx.map