@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).
302 lines • 15.3 kB
JSX
"use client";
import { Elements, Layouts } from "../../../components";
import { useWindowSize } from "../../../hooks";
import { Root } from "../../../lib/style";
import { format, sign } from "../../../lib/utils";
export default function Info(props) {
const { windowSize } = useWindowSize();
return (<Layouts.Contents.InnerContent style={{
...(windowSize.width <= Root.Device.Tablet &&
windowSize.width > 560 && {
flexDirection: "row",
}),
}} scroll>
<Layouts.Row fix responsive="tablet" gap={props?.responsive ? 1 : 4} style={{
flex: 1,
marginTop: "0.5em",
alignItems: "center",
...(props?.responsive && { height: "100%" }),
}}>
<Layouts.Col gap={0.5}>
<Layouts.Row fix gap={1} style={{
alignItems: "center",
padding: "0.5em",
...(props?.responsive && { height: "100%" }),
}}>
<Elements.Text height={1} opacity={0.6} style={{ minWidth: "max-content" }}>
Total Buy
</Elements.Text>
<Elements.Text height={1} align="right" style={{ minWidth: "max-content" }}>
$ {format(props?.info?.total_buy, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
</Layouts.Row>
<Layouts.Row fix gap={1} style={{
alignItems: "center",
padding: "0.5em",
...(props?.responsive && { height: "100%" }),
}}>
<Elements.Text height={1} opacity={0.6} style={{ minWidth: "max-content" }}>
Total Sell
</Elements.Text>
<Elements.Text height={1} align="right" style={{ minWidth: "max-content" }}>
{format(props?.info?.total_sell, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
</Layouts.Row>
</Layouts.Col>
<Layouts.Col gap={0.5}>
<Layouts.Row fix gap={1} style={{
width: "-webkit-fill-available",
alignItems: "center",
padding: "0.5em",
...(props?.responsive && { height: "100%" }),
}}>
<Elements.Text opacity={0.6} style={{ minWidth: "max-content" }}>
Total Return
</Elements.Text>
<Elements.Text height={1} align="right" style={{ minWidth: "max-content" }} color={sign(props?.info?.total_return) === "+" ? "green" : sign(props?.info?.total_return) === "-" && "red"}>
{sign(props?.info?.total_return)}$ {format(props?.info?.total_return, "currency", { unit: 9, limit: 12, fix: 3, sign: false })}
</Elements.Text>
</Layouts.Row>
<Layouts.Row fix gap={1} style={{
alignItems: "center",
padding: "0.5em",
...(props?.responsive && { height: "100%" }),
}}>
<Elements.Text height={1} opacity={0.6} style={{ minWidth: "max-content" }}>
Total Return Rate
</Elements.Text>
<Elements.Text height={1} align="right" style={{ minWidth: "max-content" }} color={sign(props?.info?.total_return_rate) === "+" ? "green" : sign(props?.info?.total_return_rate) === "-" && "red"}>
{sign(props?.info?.total_return_rate)}${" "}
{format(props?.info?.total_return_rate, "currency", { unit: 9, limit: 12, fix: 3, sign: false })}
</Elements.Text>
</Layouts.Row>
</Layouts.Col>
<Layouts.Col gap={0.5}>
<Layouts.Row fix gap={1} style={{
alignItems: "center",
padding: "0.5em",
...(props?.responsive && { height: "100%" }),
}}>
<Elements.Text height={1} opacity={0.6} style={{ minWidth: "max-content" }}>
Avg Buy
</Elements.Text>
<Elements.Text height={1} align="right" style={{ minWidth: "max-content" }}>
$ {format(props?.info?.avg_buy, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
</Layouts.Row>
<Layouts.Row fix gap={1} style={{
alignItems: "center",
padding: "0.5em",
...(props?.responsive && { height: "100%" }),
}}>
<Elements.Text height={1} opacity={0.6} style={{ minWidth: "max-content" }}>
Avg Sell
</Elements.Text>
<Elements.Text height={1} align="right" style={{ minWidth: "max-content" }}>
$ {format(props?.info?.avg_sell, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
</Layouts.Row>
</Layouts.Col>
<Layouts.Col gap={0.5}>
<Layouts.Row fix gap={1} style={{
alignItems: "center",
padding: "0.5em",
...(props?.responsive && { height: "100%" }),
}}>
<Elements.Text height={1} opacity={0.6} style={{ minWidth: "max-content" }}>
Avg Return
</Elements.Text>
<Elements.Text height={1} align="right" style={{ minWidth: "max-content" }} color={sign(props?.info?.avg_return) === "+" ? "green" : sign(props?.info?.avg_return) === "-" && "red"}>
{sign(props?.info?.avg_return)}$ {format(props?.info?.avg_return, "currency", { unit: 9, limit: 12, fix: 3, sign: false })}
</Elements.Text>
</Layouts.Row>
<Layouts.Row fix gap={1} style={{
alignItems: "center",
padding: "0.5em",
...(props?.responsive && { height: "100%" }),
}}>
<Elements.Text height={1} opacity={0.6} style={{ minWidth: "max-content" }}>
Avg Return Rate
</Elements.Text>
<Elements.Text height={1} align="right" style={{ minWidth: "max-content" }} color={sign(props?.info?.avg_return_rate) === "+" ? "green" : sign(props?.info?.avg_return_rate) === "-" && "red"}>
{sign(props?.info?.avg_return_rate)} {format(props?.info?.avg_return_rate, "currency", { unit: 9, limit: 12, fix: 3, sign: false })}{" "}
%
</Elements.Text>
</Layouts.Row>
</Layouts.Col>
</Layouts.Row>
{/* <Layouts.Divider margin={1} vertical={windowSize.width <= Root.Device.Tablet && windowSize.width > 560} />
<Layouts.Row
fix
responsive="tablet"
gap={props?.responsive ? 1 : 4}
style={{
flex: 1,
alignItems: "center",
...(props?.responsive && { height: "100%" }),
}}
>
<Layouts.Col gap={0.5} style={{ opacity: 0.15 }}>
<Layouts.Row
fix
gap={1}
style={{
alignItems: "center",
padding: "0.5em",
...(props?.responsive && { height: "100%" }),
}}
>
<Elements.Text height={1} opacity={0.6} style={{ minWidth: "max-content" }}>
Total Lending Balance
</Elements.Text>
<Elements.Text height={1} align="right" style={{ minWidth: "max-content" }}>
$ {format(props?.info?.total_lending, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
</Layouts.Row>
<Layouts.Row
fix
gap={1}
style={{
alignItems: "center",
padding: "0.5em",
...(props?.responsive && { height: "100%" }),
}}
>
<Elements.Text height={1} opacity={0.6} style={{ minWidth: "max-content" }}>
Total Lending Interest
</Elements.Text>
<Elements.Text height={1} align="right" style={{ minWidth: "max-content" }}>
{format(props?.info?.total_lending_interest, "currency", { unit: 9, limit: 12, fix: 3 })} %
</Elements.Text>
</Layouts.Row>
</Layouts.Col>
<Layouts.Col gap={0.5} style={{ opacity: 0.15 }}>
<Layouts.Row
fix
gap={1}
style={{
alignItems: "center",
padding: "0.5em",
...(props?.responsive && { height: "100%" }),
}}
>
<Elements.Text opacity={0.6} style={{ minWidth: "max-content" }}>
-
</Elements.Text>
<Elements.Text height={1} align="right" style={{ minWidth: "max-content" }}>
{format(0, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
</Layouts.Row>
<Layouts.Row
fix
gap={1}
style={{
alignItems: "center",
padding: "0.5em",
...(props?.responsive && { height: "100%" }),
}}
>
<Elements.Text height={1} opacity={0.6} style={{ minWidth: "max-content" }}>
-
</Elements.Text>
<Elements.Text height={1} align="right" style={{ minWidth: "max-content" }}>
{format(0, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
</Layouts.Row>
</Layouts.Col>
<Layouts.Col gap={0.5}>
<Layouts.Row
fix
gap={1}
style={{
alignItems: "center",
padding: "0.5em",
...(props?.responsive && { height: "100%" }),
}}
>
<Elements.Text height={1} opacity={0.6} style={{ minWidth: "max-content" }}>
Total Open Interest
</Elements.Text>
<Elements.Text
height={1}
align="right"
style={{ minWidth: "max-content" }}
color={sign(props?.info?.total_open_interest) === "+" ? "green" : sign(props?.info?.total_open_interest) === "-" && "red"}
>
{sign(props?.info?.total_open_interest)}{" "}
{format(props?.info?.total_open_interest, "currency", { unit: 9, limit: 12, fix: 3, sign: false })}
</Elements.Text>
</Layouts.Row>
<Layouts.Row
fix
gap={1}
style={{
alignItems: "center",
padding: "0.5em",
...(props?.responsive && { height: "100%" }),
}}
>
<Elements.Text height={1} opacity={0.6} style={{ minWidth: "max-content" }}>
Total Open Interest Rate
</Elements.Text>
<Elements.Text
height={1}
align="right"
style={{ minWidth: "max-content" }}
color={sign(props?.info?.total_open_interest_rate) === "+" ? "green" : sign(props?.info?.total_open_interest_rate) === "-" && "red"}
>
{sign(props?.info?.total_open_interest_rate)}{" "}
{format(props?.info?.total_open_interest_rate, "currency", { unit: 9, limit: 12, fix: 3, sign: false })} %
</Elements.Text>
</Layouts.Row>
</Layouts.Col>
<Layouts.Col gap={0.5}>
<Layouts.Row
fix
gap={1}
style={{
alignItems: "center",
padding: "0.5em",
...(props?.responsive && { height: "100%" }),
}}
>
<Elements.Text height={1} opacity={0.6} style={{ minWidth: "max-content" }}>
Avg Open Interest
</Elements.Text>
<Elements.Text
height={1}
align="right"
style={{ minWidth: "max-content" }}
color={sign(props?.info?.avg_open_interest) === "+" ? "green" : sign(props?.info?.avg_open_interest) === "-" && "red"}
>
{sign(props?.info?.avg_open_interest)}${" "}
{format(props?.info?.avg_open_interest, "currency", { unit: 9, limit: 12, fix: 3, sign: false })}
</Elements.Text>
</Layouts.Row>
<Layouts.Row
fix
gap={1}
style={{
alignItems: "center",
padding: "0.5em",
...(props?.responsive && { height: "100%" }),
}}
>
<Elements.Text height={1} opacity={0.6} style={{ minWidth: "max-content" }}>
Avg Open Interest Rate
</Elements.Text>
<Elements.Text
height={1}
align="right"
style={{ minWidth: "max-content" }}
color={sign(props?.info?.avg_open_interest_rate) === "+" ? "green" : sign(props?.info?.avg_open_interest_rate) === "-" && "red"}
>
{sign(props?.info?.avg_open_interest_rate)}{" "}
{format(props?.info?.avg_open_interest_rate, "currency", { unit: 9, limit: 12, fix: 3, sign: false })} %
</Elements.Text>
</Layouts.Row>
</Layouts.Col>
</Layouts.Row> */}
</Layouts.Contents.InnerContent>);
}
//# sourceMappingURL=Info.jsx.map