@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).
349 lines • 19.2 kB
JSX
"use client";
import { Charts, Controls, Elements, Layouts } from "../../../../components";
import { Modal } from "../../../../containers";
import { usePortal, useWindowSize } from "../../../../hooks";
import { Root } from "../../../../lib/style";
import { capitalize, format } from "../../../../lib/utils";
import { Asset } from "../../../../prefabs";
import { Vault } from "../../../../prefabs/treasury";
import { useState } from "react";
export default function Detail(props) {
const { windowSize } = useWindowSize();
const [mobile, setMobile] = useState("chart");
const [tab, setTab] = useState("liquidity");
const [chart, setChart] = useState("rate");
const colorset = {
DEPOSIT: "orange",
WITHDRAW: "blue",
};
const handleDetailModal = (data) => {
const date = format(data?.time || 0, "date").split(" ");
return (<Modal title={"Transaction Detail"} onClose={closeDetail} close>
<Layouts.Col gap={2} style={{ height: "100%" }}>
<Layouts.Contents.InnerContent>
<Layouts.Col gap={1}>
<Layouts.Row fix>
<Layouts.Col>
<Elements.Text color={colorset[`${data?.type}`]} case={"capital"}>
{data?.type}
</Elements.Text>
</Layouts.Col>
<Layouts.Col gap={0}>
<Elements.Text height={1.25} opacity={0.3} align={"right"}>
{date[0]}
</Elements.Text>
<Elements.Text height={1.25} opacity={0.3} align={"right"}>
{date[1]}
</Elements.Text>
</Layouts.Col>
</Layouts.Row>
<Layouts.Divider />
<Layouts.Row fix>
<Elements.Text opacity={0.6} fit>
Volume
</Elements.Text>
<Elements.Text align={"right"}>{data?.amount}</Elements.Text>
<Elements.Text opacity={0.6} style={{ maxWidth: "4em" }}>
{props?.asset?.symbol}
</Elements.Text>
</Layouts.Row>
<Layouts.Row fix>
<Elements.Text opacity={0.6} fit>
{data?.type === "DEPOSIT" ? "Earn" : "Burn"}
</Elements.Text>
<Elements.Text align={"right"}>{data?.meca}</Elements.Text>
<Elements.Text opacity={0.6} style={{ maxWidth: "4em" }}>
MECA
</Elements.Text>
</Layouts.Row>
<Layouts.Divider />
<Layouts.Row fix>
<Elements.Text opacity={0.6} fit>
Share
</Elements.Text>
<Elements.Text align={"right"}>{data?.share}</Elements.Text>
<Elements.Text opacity={0.6} style={{ maxWidth: "4em" }}>
%
</Elements.Text>
</Layouts.Row>
</Layouts.Col>
</Layouts.Contents.InnerContent>
<Layouts.Row>
<Controls.Button onClick={closeDetail}>Close</Controls.Button>
</Layouts.Row>
</Layouts.Col>
</Modal>);
};
const [handleDetail, closeDetail] = usePortal(handleDetailModal);
const recentFormatter = (data) => {
return (data &&
typeof data !== "string" &&
data?.length > 0 &&
data?.map((data) => {
return {
onClick: () => {
handleDetail(null, {
type: data?.type,
time: data?.time,
volume: data?.amount,
meca: data?.meca,
share: data?.share,
});
},
style: { padding: "2em" },
children: [
[
[
{
gap: 0,
style: { maxWidth: "max-content" },
children: [
<>
<Elements.Text color={colorset[`${data?.type}`]} case={"capital"} fit>
{capitalize(data?.type)}
</Elements.Text>
</>,
<>
<Layouts.Row gap={0.5} style={{ opacity: 0.6 }}>
<Elements.Text align={"right"} style={{
fontFeatureSettings: "initial",
}} fit>
{format(data?.share || 0, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
<Elements.Text align={"left"} opacity={0.6} fit>
%
</Elements.Text>
</Layouts.Row>
</>,
],
},
{
gap: 0,
children: [
{
align: "right",
children: (<>
<Elements.Text align={"right"} style={{
fontFeatureSettings: "initial",
}}>
{format(data?.amount || 0, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
<Elements.Text align={"left"} opacity={0.6} case={"upper"} style={{ minWidth: "4em" }} fit>
{props?.asset?.symbol}
</Elements.Text>
</>),
},
{
align: "right",
style: { opacity: 0.3 },
children: (<>
<Elements.Text align={"right"} style={{
fontFeatureSettings: "initial",
}}>
{format(data?.meca || 0, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
<Elements.Text align={"left"} opacity={0.6} case={"upper"} style={{ minWidth: "4em" }} fit>
MECA
</Elements.Text>
</>),
},
],
},
],
],
],
};
}));
};
return (<>
<Layouts.Contents.InnerContent>
<Layouts.Row fix style={{ alignItems: "center" }}>
<Layouts.Row fix style={{ alignItems: "center" }} gap={2} fit>
<Controls.Button scale={0.875} icon={"chevron-left"} style={{ padding: "1em" }} onClick={props?.onBack}/>
<Elements.Avatar size={4} img={require(`../../../../assets/coins/${props?.asset?.symbol?.toLocaleLowerCase()}.png`)} style={{ marginLeft: "-1em" }}/>
<Layouts.Row responsive={"tablet"} gap={1} fit>
<Elements.Text size={2.5} height={1} case={"upper"} style={{ marginRight: "1em" }} responsive={{ device: "mobile", size: 1.5 }}>
{props?.asset?.symbol}
</Elements.Text>
<Elements.Text size={2.5} height={1} case={"capital"} responsive={{ device: "mobile", size: 1.5 }}>
{props?.asset?.name}
</Elements.Text>
</Layouts.Row>
</Layouts.Row>
<Layouts.Row fix align="right">
<Layouts.Row fix fit gap={1} style={{ alignItems: "center" }}>
<Elements.Icon scale={1.5} icon={"caret-up"} change/>
<Elements.Text size={2.5} height={1} responsive={{ device: "mobile", size: 1.75 }} change>
{format(props?.info.per_token, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
</Layouts.Row>
</Layouts.Row>
</Layouts.Row>
<Layouts.Divider style={{ marginTop: "1em" }}/>
<Layouts.Col show={"tablet"} gap={0}>
<Layouts.Row gap={1} fix>
<Controls.Tab active={mobile === "info"} onClick={() => setMobile("info")}>
Info
</Controls.Tab>
<Controls.Tab active={mobile === "chart"} onClick={() => setMobile("chart")}>
Chart
</Controls.Tab>
<Controls.Tab active={mobile === "recent"} onClick={() => setMobile("recent")}>
Recent
</Controls.Tab>
</Layouts.Row>
<Layouts.Divider />
</Layouts.Col>
<Layouts.Contents.GridContainer fullsize area={`'info info' 'recent chart' 'recent trade'`} width={`${props?.responsive ? "0.75fr" : "40em"} 1fr`} height={"max-content 1fr max-content"} gap={3} responsive={[
{
device: "tablet",
area: `'up' 'down'`,
width: "1fr",
height: "1fr max-content",
gap: { col: 0, row: 2 },
},
]} contents={[
{
area: "info",
children: (<Layouts.Contents.SlideContent active={props?.responsive ? mobile === "info" : true}>
<Vault.Containers.Info asset={props?.asset} info={props?.info} responsive={props?.responsive}/>
</Layouts.Contents.SlideContent>),
responsive: [
{
device: "tablet",
area: "up",
},
],
},
{
area: "chart",
children: (<Layouts.Contents.SlideContent active={props?.responsive ? mobile === "chart" : true}>
<Layouts.Contents.InnerContent>
<Layouts.Menu menu={[
[
<>
<Controls.Tab active={chart === "rate"} onClick={() => setChart("rate")}>
Exchange Rate
</Controls.Tab>
</>,
<>
<Controls.Tab active={chart === "volume"} onClick={() => setChart("volume")}>
Volume
</Controls.Tab>
</>,
<>
<Controls.Tab active={chart === "value"} onClick={() => setChart("value")}>
Value
</Controls.Tab>
</>,
],
]}/>
<Layouts.Contents.TabContainer contents={[
{
active: chart === "rate",
children: (<Charts.LightWeight.Candle price={props?.charts?.rate?.price} volume={props?.charts?.rate?.volume} up={"DEPOSIT"} down={"WITHDRAW"}
// color={{ up: "255, 160, 0", down: "0,64,255" }}
fit/>),
},
{
active: chart === "volume",
children: (<Charts.LightWeight.Histogram data={props?.charts?.volume} color={{
default: "0,64,255",
up: "255, 160, 0",
down: "0,64,255"
}} format={(price) => format(price || 0, "currency", {
limit: 4,
fix: 3,
})} fit/>),
},
{
active: chart === "value",
children: (<Charts.LightWeight.Area data={props?.charts?.value} up={"DEPOSIT"} down={"WITHDRAW"} color={{
default: "0,64,255",
}} fit/>),
},
]}/>
</Layouts.Contents.InnerContent>
</Layouts.Contents.SlideContent>),
responsive: [
{
device: "tablet",
area: "up",
},
],
},
{
area: "recent",
children: (<Layouts.Contents.SlideContent active={props?.responsive ? mobile === "recent" : true}>
<Layouts.Contents.InnerContent>
<Layouts.Menu hide="tablet" menu={[
[
<>
<Controls.Tab disabled>Recent</Controls.Tab>
</>,
],
]}/>
<Vault.Containers.Recent list={props?.recent} formatter={recentFormatter} fallback={"There is no history yet."} style={{ height: "100%" }}/>
</Layouts.Contents.InnerContent>
</Layouts.Contents.SlideContent>),
responsive: [
{
device: "mobile",
area: "up",
},
],
},
{
area: "trade",
children: (<Layouts.Contents.InnerContent>
<Layouts.Menu menu={[
[
[
<>
<Controls.Tab active={tab === "liquidity"} onClick={() => {
setTab("liquidity");
}}>
Liquidity
</Controls.Tab>
</>,
],
[
<>
<Controls.Tab active={tab === "history"} onClick={() => {
setTab("history");
}}>
History
</Controls.Tab>
</>,
],
],
]}/>
<Layouts.Contents.TabContainer contents={[
{
active: tab === "liquidity",
children: (<Vault.Containers.Trade base={props?.asset} quote={{
symbol: "MECA",
name: "Coinmeca",
decimals: 18,
address: "0x123456",
}} price={props?.info?.token_per} fee={0.1} responsive={(windowSize.width <= Root.Device.Tablet && windowSize.width > Root.Device.Mobile) ||
windowSize.width <= Root.Device.Mobile}/>),
},
{
active: tab === "history",
children: <Asset.Containers.History.Default list={[]} responsive={props?.responsive}/>,
},
]}/>
</Layouts.Contents.InnerContent>),
responsive: [
{
device: "tablet",
area: "down",
},
],
},
]}/>
</Layouts.Contents.InnerContent>
</>);
}
//# sourceMappingURL=Detail.jsx.map