@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).
236 lines • 12.8 kB
JSX
"use client";
import { Controls, Elements, Layouts } from "../../../../components";
import { usePortal, useSort } from "../../../../hooks";
import { filter, format } from "../../../../lib/utils";
import { useState } from "react";
// import { TransactionDetail } from "../modals";
export const colorMap = {
Buy: "green",
Sell: "red",
Long: "green",
Short: "red",
Deposit: "oange",
Withdraw: "blue",
Stake: "orange",
Unstake: "blue",
undefined: "",
"": "",
};
export default function Default(props) {
const { sorting, setSort, sortArrow } = useSort();
const sorts = {
time: { key: "time", type: "number" },
category: { key: "category", type: "number" },
state: { key: "state", type: "number" },
market: { key: "market", type: "string" },
pay: { key: "pay", type: "string" },
item: { key: "item", type: "string" },
price: { key: "price", type: "number" },
amount: { key: "amount", type: "number" },
quantity: { key: "quantity", type: "number" },
fees: { key: "fees", type: "number" },
total: { key: "total", type: "number" },
};
const [history, setHistory] = useState(props?.list || []);
const [process, setProcess] = useState(null);
const [handleDetail, closeDetail] = usePortal();
const historyFormatter = (data) => {
return (data &&
typeof data !== "string" &&
data?.length > 0 &&
data?.map((data) => {
// console.log(props?.assets?.find((a: Token) => console.log(a)));
const pay = props?.assets?.find((a) => a?.address === data?.pay)?.symbol;
const item = props?.assets?.find((a) => a?.address === data?.item)?.symbol;
const date = format(data?.time, "date").split(" ");
return {
onClick: () => handleDetail(),
// <TransactionDetail
// data={{
// base: item,
// quote: pay,
// date: date[0],
// time: date[1],
// category: data?.category,
// option: data?.option,
// state: data?.state,
// price: data?.price,
// amount: data?.amount,
// quantity: data?.quantity,
// fees: data?.fees,
// }}
// onClose={closeDetail}
// />
style: { padding: "2em" },
children: [
{
style: {
flex: 1,
maxWidth: !props?.responsive && "20%",
},
children: [
{
style: {
flexDirection: props?.responsive && "row-reverse",
},
children: [
{
gap: 0,
style: {
maxWidth: "10em",
opacit: 0.3,
},
children: [
<>
<Elements.Text opacity={0.3} style={{
...(props?.responsive && {
width: "100%",
textAlign: "right",
}),
}}>
{date[0]}
</Elements.Text>
</>,
<>
<Elements.Text style={{
...(props?.responsive && {
width: "100%",
textAlign: "right",
}),
}}>
{date[1]}
</Elements.Text>
</>,
],
},
{
gap: 0,
children: [
<>
<Elements.Text color={colorMap[data?.category]}>{data?.category}</Elements.Text>
</>,
<>
<Elements.Text opacity={data?.state === "Pending" || data?.state === "Open" ? 1 : 0.3}>
{data?.state}
</Elements.Text>
</>,
],
},
],
},
],
},
{
style: { flex: 2 },
children: [
[
{
gap: 0,
children: [
{
align: "right",
children: (<>
<Elements.Text align={"right"}>
{format(data?.amount || 0, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
<Elements.Text align={"left"} opacity={0.6} style={{
maxWidth: "4em",
}} fit>
{pay}
</Elements.Text>
</>),
},
{
align: "right",
children: (<>
<Elements.Text align={"right"}>
{format(data?.price || 0, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
<Elements.Text align={"left"} opacity={0.6} style={{
maxWidth: "4em",
}} fit>
{pay}
</Elements.Text>
</>),
},
],
},
{
gap: 0,
children: [
{
align: "right",
children: (<>
<Elements.Text align={"right"}>
{format(data?.quantity || 0, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
<Elements.Text align={"left"} opacity={0.6} style={{
maxWidth: "4em",
}} fit>
{item}
</Elements.Text>
</>),
},
{
align: "right",
children: (<>
<Elements.Text align={"right"}>
- {format(data?.fees || 0, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
<Elements.Text align={"left"} opacity={0.6} style={{
maxWidth: "4em",
}} fit>
{item}
</Elements.Text>
</>),
},
],
},
],
],
},
],
};
}));
};
return (<Layouts.Contents.InnerContent>
<Layouts.Row gap={1} fix>
<Layouts.Row gap={0} fix>
<Controls.Tab iconLeft={sortArrow(sorts.time)} onClick={() => setSort(sorts.time)}>
Time
</Controls.Tab>
<Controls.Tab iconLeft={sortArrow(sorts.category)} onClick={() => setSort(sorts.category)}>
Category
</Controls.Tab>
<Controls.Tab iconLeft={sortArrow(sorts.state)} onClick={() => setSort(sorts.state)}>
State
</Controls.Tab>
</Layouts.Row>
<Layouts.Row gap={0} fix>
<Controls.Tab iconLeft={sortArrow(sorts.market)} onClick={() => setSort(sorts.market)}>
Market
</Controls.Tab>
<Controls.Tab iconLeft={sortArrow(sorts.item)} onClick={() => setSort(sorts.item)}>
Base
</Controls.Tab>
<Controls.Tab iconLeft={sortArrow(sorts.pay)} onClick={() => setSort(sorts.pay)}>
Quote
</Controls.Tab>
</Layouts.Row>
<Layouts.Row gap={0} fix>
<Controls.Tab iconLeft={sortArrow(sorts.price)} onClick={() => setSort(sorts.price)}>
Price
</Controls.Tab>
<Controls.Tab iconLeft={sortArrow(sorts.amount)} onClick={() => setSort(sorts.amount)}>
Amount
</Controls.Tab>
<Controls.Tab iconLeft={sortArrow(sorts.quantity)} onClick={() => setSort(sorts.quantity)}>
Quantity
</Controls.Tab>
</Layouts.Row>
</Layouts.Row>
<Layouts.Divider />
<Layouts.List list={filter(sorting(history), props?.filter)} formatter={historyFormatter} fallback={props?.fallback}/>
</Layouts.Contents.InnerContent>);
}
//# sourceMappingURL=Default.jsx.map