@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).
372 lines • 21.7 kB
JSX
"use strict";
// "use client";
// import { QueryClientProvider } from "@tanstack/react-query";
// import { getQueryClient } from "api";
// import { GetMarketDetail } from "api/market";
// import { Exchange } from "../../../components";
// import { useContracts } from "contracts";
// import { abi } from "contracts/services/market/abi";
// import { useWeb3Client } from "../../../hooks";
// import { useState } from "react";
// import { Controls, Elements, Layouts } from "../../../components";
// import { Modals } from "../../../containers";
// import { Process } from "../../../containers/modals/process/Process";
// import { format } from "../../../lib/utils";
// import { Address } from "viem";
// import { colorMap } from "../containers/History";
// export interface TransactionDetail extends Omit<Process, "process"> {
// process?: boolean;
// data: any;
// onBack?: Function;
// onClose: Function;
// }
// export default function TransactionDetail(props: TransactionDetail) {
// return (
// <QueryClientProvider client={getQueryClient()}>
// <Detail {...props} />
// </QueryClientProvider>
// );
// }
// function Detail(props: TransactionDetail) {
// const [loading, setLoading] = useState<boolean>(false);
// const [process, setProcess] = useState<boolean | null>(null);
// const [operate, setOperate] = useState<string>("");
// const data = props?.data;
// const color = colorMap[data?.category];
// const { publicClient, walletClient } = useWeb3Client();
// const { App, Query } = useContracts(walletClient?.chain?.id);
// const { refetch: refetchHistory } = App.getAllHistory(walletClient?.account?.address);
// const { refetch: refetchAssets } = Query.assetsOf(walletClient?.account?.address);
// const { refetch: refetchOrders } = Query.ordersOf(walletClient?.account?.address);
// const { data: market } = GetMarketDetail(walletClient?.chain?.id as number, data?.market);
// console.log("data?.market", data?.market, market);
// const refetch = () => {
// refetchHistory();
// refetchAssets();
// refetchOrders();
// };
// const handleBack = (e: any) => {
// if (typeof props?.onBack === "function") props?.onBack(e);
// setOperate("");
// setProcess(null);
// setLoading(false);
// };
// const handleClose = (e: any) => {
// if (typeof props?.onClose === "function") props?.onClose(e);
// };
// const cancel = async () => {
// console.log("key", props?.data);
// const { request } = await publicClient!.simulateContract({
// address: props?.data?.market as Address,
// abi,
// functionName: "cancel",
// args: [props?.data?.key],
// account: walletClient!.account,
// });
// await walletClient!.writeContract(request).then((hash) => {
// // alert
// });
// };
// // todo
// const modify = async () => {
// const { request } = await publicClient!.simulateContract({
// address: props?.data?.market as Address,
// abi,
// functionName: "modify",
// args: [props?.data?.key],
// account: walletClient!.account,
// });
// await walletClient!.writeContract(request).then((hash) => {
// // alert
// });
// };
// const claim = async () => {
// const { request } = await publicClient!.simulateContract({
// address: props?.data?.market as Address,
// abi,
// functionName: "claim",
// args: [props?.data?.key],
// account: walletClient!.account,
// });
// await walletClient!.writeContract(request).then((hash) => {
// // alert
// });
// };
// const close = async () => {
// const { request } = await publicClient!.simulateContract({
// address: props?.data?.market as Address,
// abi,
// functionName: "claim",
// args: [props?.data?.key],
// account: walletClient!.account,
// });
// await walletClient!.writeContract(request).then((hash) => {
// // alert
// });
// };
// const liquidate = async () => {
// const { request } = await publicClient!.simulateContract({
// address: props?.data?.market as Address,
// abi,
// functionName: "liquidate",
// args: [props?.data?.key],
// account: walletClient!.account,
// });
// await walletClient!.writeContract(request).then((hash) => {
// // alert
// });
// };
// const handleProcess = async () => {
// setLoading(true);
// try {
// if (operate === "cancel") await cancel();
// if (operate === "modify") await modify();
// if (operate === "claim") await claim();
// if (operate === "close") await close();
// if (operate === "liquidate") await liquidate();
// setProcess(true);
// } catch (e) {
// console.log(e);
// setProcess(false);
// }
// setLoading(false);
// refetch();
// };
// return (
// <Modals.Process
// process={process}
// title={
// operate === ""
// ? "Transaction Detail"
// : operate === "cancel"
// ? "Order Cancellation"
// : operate === "modify"
// ? "Order Modification"
// : operate === "liquidate"
// ? "Position Liquidation"
// : "Position Close "
// }
// content={
// <Layouts.Contents.SlideContainer
// contents={[
// {
// active: operate === "",
// children: (
// <Layouts.Col gap={2} style={{ height: "100%" }}>
// <Layouts.Contents.InnerContent
// style={{
// fontFeatureSettings: `'tnum' on, 'lnum' on`,
// }}
// >
// <Layouts.Col gap={1}>
// <Layouts.Row gap={1} fix>
// <Layouts.Col align={"left"} gap={0}>
// <Elements.Text height={1.5} color={color}>
// {data?.category}
// </Elements.Text>
// <Elements.Text height={1.5} opacity={data?.state === "Pending" ? 1 : 0.3}>
// {data?.state}
// </Elements.Text>
// </Layouts.Col>
// <Layouts.Col gap={0}>
// <Elements.Text height={1.5} opacity={0.3} align={"right"}>
// {data?.date}
// </Elements.Text>
// <Elements.Text height={1.5} opacity={0.3} align={"right"}>
// {data?.time}
// </Elements.Text>
// </Layouts.Col>
// </Layouts.Row>
// <Layouts.Divider />
// <Layouts.Row gap={1} fix>
// <Elements.Text opacity={0.3} fit>
// Price
// </Elements.Text>
// <Elements.Text align={"right"}>{format(data?.price, "currency", { unit: 9, limit: 12, fix: 3 })}</Elements.Text>
// <Elements.Text opacity={0.3} align={"left"} style={{ maxWidth: "6em" }}>
// {data?.quote?.symbol}
// </Elements.Text>
// </Layouts.Row>
// <Layouts.Divider />
// <Layouts.Row gap={1} fix>
// <Elements.Text opacity={0.3} fit>
// Amount
// </Elements.Text>
// <Elements.Text align={"right"}>
// {format(data?.amount, "currency", { unit: 9, limit: 12, fix: 3 })}
// </Elements.Text>
// <Elements.Text opacity={0.3} align={"left"} style={{ maxWidth: "6em" }}>
// {data?.quote?.symbol}
// </Elements.Text>
// </Layouts.Row>
// <Layouts.Row gap={1} fix>
// <Elements.Text opacity={0.3} fit>
// Quantity
// </Elements.Text>
// <Elements.Text align={"right"} color={color}>
// {format(data?.quantity, "currency", { unit: 9, limit: 12, fix: 3 })}
// </Elements.Text>
// <Elements.Text opacity={0.3} align={"left"} style={{ maxWidth: "6em" }}>
// {data?.base?.symbol}
// </Elements.Text>
// </Layouts.Row>
// <Layouts.Divider />
// <Layouts.Row gap={1} fix>
// <Elements.Text opacity={0.3} fit>
// Fees
// </Elements.Text>
// <Elements.Text opacity={0.6} align={"right"}>
// - {format(data?.fees, "currency", { unit: 9, limit: 12, fix: 3 })}
// </Elements.Text>
// <Elements.Text opacity={0.3} align={"left"} style={{ maxWidth: "6em" }}>
// {data?.base?.symbol}
// </Elements.Text>
// </Layouts.Row>
// <Layouts.Row gap={1} fix>
// <Elements.Text opacity={0.3} fit>
// Total
// </Elements.Text>
// <Elements.Text align={"right"} color={color}>
// {format(data?.quantity - data?.fees, "currency", { unit: 9, limit: 12, fix: 3 })}
// </Elements.Text>
// <Elements.Text opacity={0.3} align={"left"} style={{ maxWidth: "6em" }}>
// {data?.base?.symbol}
// </Elements.Text>
// </Layouts.Row>
// </Layouts.Col>
// </Layouts.Contents.InnerContent>
// <Layouts.Row gap={2} style={{ marginTop: "2em" }} fix>
// {data?.state === "Pending" && (
// <>
// <Controls.Button onClick={() => setOperate("cancel")}>Cancel</Controls.Button>
// <Controls.Button onClick={() => setOperate("modify")}>Modify</Controls.Button>
// </>
// )}
// {data?.state === "Open" && <Controls.Button onClick={() => setOperate("close")}>Closing Position</Controls.Button>}
// {data?.state === "Liquidated" && <Controls.Button onClick={() => setOperate("liquidate")}>Liquidate</Controls.Button>}
// <Controls.Button onClick={handleClose}>Close</Controls.Button>
// </Layouts.Row>
// </Layouts.Col>
// ),
// },
// {
// active: operate === "cancel",
// children: (
// <Layouts.Col gap={2} style={{ height: "100%" }}>
// <Layouts.Contents.InnerContent>
// {" "}
// <Layouts.Col gap={2} fill>
// <Elements.Text type={"strong"} height={2} opacity={0.6} align={"center"}>
// Your order will be cancelled. Are you sure?
// </Elements.Text>
// </Layouts.Col>
// </Layouts.Contents.InnerContent>
// <Layouts.Row gap={2}>
// <Controls.Button onClick={() => handleProcess()}>Yes</Controls.Button>
// <Controls.Button onClick={() => setOperate("")}>No</Controls.Button>
// </Layouts.Row>
// </Layouts.Col>
// ),
// },
// {
// active: operate === "modify",
// children: (
// <Layouts.Col gap={2} fill>
// <Elements.Text type={"strong"} height={2} opacity={0.6} align={"center"}>
// Please enter your price and amount or quantity.
// </Elements.Text>
// <Layouts.Col gap={2}>
// <Layouts.Row gap={1} fix>
// <Elements.Text align={"left"} opacity={0.3} fit>
// Market
// </Elements.Text>
// <Elements.Text align={"right"} fix>
// {market?.ticker}
// </Elements.Text>
// </Layouts.Row>
// <Layouts.Divider />
// <Layouts.Row>
// <Elements.Text align={"left"} opacity={0.3} fit>
// Ordered Price
// </Elements.Text>
// <Layouts.Row gap={4} fix>
// <Elements.Text align={"right"} fix>
// {data?.price || 0}
// </Elements.Text>
// <Elements.Text align={"left"} style={{ maxWidth: "7.25em" }} fix>
// {market?.quote?.symbol}
// </Elements.Text>
// </Layouts.Row>
// </Layouts.Row>
// <Layouts.Row>
// <Elements.Text align={"left"} opacity={0.3} fit>
// Ordered Amount
// </Elements.Text>
// <Layouts.Row gap={4} fix>
// <Elements.Text align={"right"} fix>
// {data?.amount || 0}
// </Elements.Text>
// <Elements.Text align={"left"} opacity={0.6} style={{ maxWidth: "7.25em" }} fix>
// {data?.pay?.symbol}
// </Elements.Text>
// </Layouts.Row>
// </Layouts.Row>
// <Layouts.Divider />
// <Exchange.Controls.Order gap={2} id={"buy"} mode={true} assets={[data?.base, data?.quote]} price={157.12} fee={0.1} />
// </Layouts.Col>
// <Layouts.Row>
// <Controls.Button onClick={() => setOperate("")}>Go Back</Controls.Button>
// <Controls.Button onClick={() => handleProcess()}>Modify</Controls.Button>
// </Layouts.Row>
// </Layouts.Col>
// ),
// },
// {
// active: operate === "close",
// children: (
// <Layouts.Col gap={2} fill>
// <Elements.Text type={"strong"} height={2} opacity={0.6} align={"center"}>
// This position will be closed. Are you sure?
// </Elements.Text>
// <Layouts.Row>
// <Controls.Button onClick={() => handleProcess()}>Yes</Controls.Button>
// <Controls.Button onClick={() => setOperate("")}>No</Controls.Button>
// </Layouts.Row>
// </Layouts.Col>
// ),
// },
// {
// active: operate === "liquidate",
// children: (
// <Layouts.Col gap={2} fill>
// <Elements.Text type={"strong"} height={2} opacity={0.6} align={"center"}>
// This position will be liquidated. Are you sure?
// </Elements.Text>
// <Layouts.Row>
// <Controls.Button onClick={() => handleProcess()}>Yes</Controls.Button>
// <Controls.Button onClick={() => setOperate("")}>No</Controls.Button>
// </Layouts.Row>
// </Layouts.Col>
// ),
// },
// ]}
// />
// }
// failure={{
// message: props?.failure?.message || "Processing has failed.",
// children: <Controls.Button onClick={(e: any) => handleBack(e)}>Go Back</Controls.Button>,
// }}
// loading={{
// active: props?.loading?.active || loading,
// message: props?.loading?.message || "Please wait until the processing is complete.",
// }}
// success={{
// message: props?.success?.message || "Processing succeeded.",
// children: <Controls.Button onClick={(e: any) => handleClose(e)}>OK</Controls.Button>,
// }}
// onClose={handleClose}
// close
// />
// );
// }
//# sourceMappingURL=TransactionDetail.jsx.map