@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).
121 lines • 5.5 kB
JSX
"use client";
import { Controls, Elements, Layouts } from "../../../components";
import { useSort } from "../../../hooks";
import { filter, format } from "../../../lib/utils";
export default function Asset(props) {
const { sorting, setSort, sortArrow } = useSort();
const sorts = {
symbol: { key: "symbol", type: "string" },
name: { key: "name", type: "string" },
balance: { key: "balance", type: "number" },
value: { key: "value", type: "number" },
};
const formatter = (data) => {
return (typeof data !== "string" &&
data?.length > 0 &&
data?.map((data, i) => ({
children: [
[
{
style: { width: "max-content" },
children: [
<>
<Elements.Avatar
// length={8}
size={3} img={data?.logo}/>
</>,
[
<>
<Elements.Text type="strong" case={"upper"} height={1}>
{data?.symbol}
</Elements.Text>
</>,
<>
<Elements.Text type="p" height={1} opacity={0.45}>
{data?.name}
</Elements.Text>
</>,
],
],
},
],
{
align: "right",
children: [
<>
<Elements.Text type="strong">{data?.balance}</Elements.Text>
</>,
<>
<Elements.Text type="p" opacity={0.45}>
${" "}
{format(parseFloat(format(data?.balance, "number")) * parseFloat(format(data?.value, "number")), "currency", {
unit: 9,
limit: 12,
fix: 3,
})}
{/* {data?.using} */}
</Elements.Text>
</>,
],
},
// [
// {
// align: "right",
// children: (
// <Elements.Text>
// $ {format((format(data?.balance, "number") as number) * (format(data?.value, "number") as number), "currency", { unit: 9, limit: 12, fix: 3 })}
// </Elements.Text>
// ),
// },
// ],
],
onClick: (props) => alert(props.children),
})));
};
return (<>
<Layouts.Row gap={1} style={{ padding: "1em" }} fix>
<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.balance)} onClick={() => setSort(sorts.balance)}>
Balance
</Controls.Tab>
<Controls.Tab iconLeft={sortArrow(sorts.value)} onClick={() => setSort(sorts.value)}>
Value
</Controls.Tab>
</Layouts.Row>
{/* <Layouts.Row gap={0} fix>
<Controls.Tab iconLeft={sortArrow(sorts.value)} onClick={() => setSort(sorts.value)}>
Value
</Controls.Tab>
</Layouts.Row> */}
</Layouts.Row>
<Layouts.Divider strong/>
<Layouts.Table list={[
{
style: { height: "6.5em" },
onClick: () => { },
children: [
{
children: <Elements.Text type={"strong"}>Total of all your assets</Elements.Text>,
},
{
align: "right",
children: <Elements.Text align={"right"}>$ {format(123456789, "currency", { unit: 9, limit: 12, fix: 3 })}</Elements.Text>,
},
],
},
]} fallback="There is no data."/>
<Layouts.Divider strong/>
<Layouts.Contents.InnerContent scroll>
<Layouts.Table list={filter(sorting(props?.list), props?.filter)} formatter={formatter} fallback="There is no data."/>
</Layouts.Contents.InnerContent>
</>);
}
//# sourceMappingURL=Asset.jsx.map