@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).
182 lines • 11.1 kB
JSX
"use client";
import { Controls, Elements, Layouts } from "../../../../components";
import { useSort } from "../../../../hooks";
import { filter, format, sign } from "../../../../lib/utils";
export default function List(props) {
const { sorting, setSort, sortArrow } = useSort();
const formatter = (data) => {
return (data &&
typeof data !== "string" &&
data?.length > 0 &&
data?.map((data) => ({
onClick: () => {
if (typeof props?.onSelect === "function")
props?.onSelect(data);
},
style: { padding: "2em" },
children: [
[
[
[
{
style: { flex: 1 },
children: [
{
style: { maxWidth: "max-content" },
children: (<Elements.Avatar size={props?.responsive ? 3.5 : 4} style={{ maxWidth: "max-content" }} img={require(`../../../../assets/coins/${data?.stake?.symbol?.toLowerCase()}.png`)}/>),
},
<>
<Layouts.Col gap={0}>
<Elements.Text height={1.25}>{data?.name}</Elements.Text>
<Elements.Text height={1.25} opacity={0.3} fix>
{data?.type ? "Main" : "Derive"}
</Elements.Text>
</Layouts.Col>
</>,
],
},
],
[
{
style: { flex: 2 },
children: [
{
gap: 0,
children: [
{
align: "right",
children: (<>
<Elements.Text align={"right"}>
{format(data?.interest, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
<Elements.Text align={"left"} opacity={0.6} style={{ maxWidth: "6em" }}>
{data?.earn?.symbol}
</Elements.Text>
</>),
},
{
align: "right",
change: sign(data?.interestChange) === "+" ? "green" : sign(data?.interestChange) === "-" && "red",
children: (<>
<Elements.Text align={"right"} change>
{data?.interestChange}
</Elements.Text>
<Elements.Text align={"left"} opacity={0.6} style={{ maxWidth: "6em" }} change>
%
</Elements.Text>
</>),
},
],
},
{
gap: 0,
style: {
...(props?.responsive && {
display: "none",
}),
},
children: [
{
align: "right",
children: (<>
<Elements.Text align={"right"}>
{format(data?.staked, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
<Elements.Text align={"left"} opacity={0.6} style={{ maxWidth: "6em" }}>
{data?.stake?.symbol}
</Elements.Text>
</>),
},
{
align: "right",
style: { opacity: 0.3 },
children: (<>
<Elements.Text align={"right"}>
{sign(data?.stakedChange)}{" "}
{format(data?.stakedChange, "currency", { unit: 9, limit: 12, fix: 3, sign: false })}
</Elements.Text>
<Elements.Text align={"left"} opacity={0.6} style={{ maxWidth: "6em" }}>
{data?.stake?.symbol}
</Elements.Text>
</>),
},
],
},
// {
// style: {
// gap: 0,
// ...(props?.responsive && {
// display: "none",
// }),
// },
// children: [
// <>
// <Layouts.Row gap={1}>
// <Elements.Text align={"right"}>$ {format(data?.tvl, "currency", { unit: 9, limit: 12, fix: 3 })}</Elements.Text>
// </Layouts.Row>
// </>,
// <>
// <Layouts.Row gap={1} style={{ opacity: 0.3 }}>
// <Elements.Text align={"right"} fix>
// {sign(data?.tvl_change)}$ {Math.abs(format(data?.tvl_change, "currency", { unit: 9, limit: 12, fix: 3 }) as number)}
// </Elements.Text>
// </Layouts.Row>
// </>,
// ],
// },
],
},
],
],
],
],
})));
};
const sorts = {
symbol: { key: "symbol", type: "string" },
name: { key: "name", type: "string" },
rewards: { key: "rewards", type: "number" },
rewards_rate: { key: "rewards_rate", type: "number" },
tl: { key: "tl", type: "number" },
tl_change: { key: "tl_change", type: "number" },
};
return (<Layouts.Contents.InnerContent>
<Layouts.Row fix style={{ overflow: "auto hidden" }}>
<Layouts.Row gap={0} fix>
<Controls.Tab iconLeft={sortArrow(sorts.symbol)} onClick={() => setSort(sorts.symbol)}>
Symbol
</Controls.Tab>
<Controls.Tab iconLeft={sortArrow(sorts.name)} onClick={() => setSort(sorts.name)}>
Name
</Controls.Tab>
</Layouts.Row>
<Layouts.Row gap={0} fix>
<Controls.Tab iconLeft={sortArrow(sorts.rewards)} onClick={() => setSort(sorts.rewards)}>
Interest
</Controls.Tab>
<Controls.Tab iconLeft={sortArrow(sorts.rewards_rate)} onClick={() => setSort(sorts.rewards_rate)}>
Interest Rate
</Controls.Tab>
</Layouts.Row>
{/* <Layouts.Row gap={0} fix>
<Controls.Tab iconLeft={sortArrow(sorts.tl)} onClick={() => setSort(sorts.tl)}>
Rewards Change
</Controls.Tab>
<Controls.Tab iconLeft={sortArrow(sorts.tl_change)} onClick={() => setSort(sorts.tl_change)}>
Rewards Change Rate
</Controls.Tab>
</Layouts.Row> */}
<Layouts.Row gap={0} fix>
<Controls.Tab iconLeft={sortArrow(sorts.tl)} onClick={() => setSort(sorts.tl)}>
Total Locked
</Controls.Tab>
<Controls.Tab iconLeft={sortArrow(sorts.tl_change)} onClick={() => setSort(sorts.tl_change)}>
Total Locked Change
</Controls.Tab>
</Layouts.Row>
</Layouts.Row>
<Layouts.Divider />
<Layouts.List list={filter(sorting(props?.farms), props?.filter)} formatter={formatter}/>
</Layouts.Contents.InnerContent>);
}
//# sourceMappingURL=List.jsx.map