Skip to content

Commit

Permalink
fix visuals at various widths, loading indicators
Browse files Browse the repository at this point in the history
  • Loading branch information
@apexearth
apexearth committed Jan 14, 2024
1 parent e00e452 commit ad1d75c
Show file tree
Hide file tree
Showing 5 changed files with 193 additions and 145 deletions.
19 changes: 10 additions & 9 deletions components/Container.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
import { ReactNodeLike } from "prop-types";
import React from "react";
import React, { forwardRef } from "react";
import { twMerge } from "tailwind-merge";

export const Container = ({
children,
className,
}: {
children: ReactNodeLike;
className?: string | undefined;
}) => (
export const Container = forwardRef<
HTMLDivElement,
{
children: ReactNodeLike;
className?: string | undefined;
}
>(({ children, className }, ref) => (
<div
ref={ref}
className={twMerge(
"w-full bg-origin-bg-grey rounded md:rounded-lg border-spacing-0",
className,
)}
>
{children}
</div>
);
));
2 changes: 1 addition & 1 deletion pages/proof-of-yield/[timestamp].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { Header, Footer } from "../../components";
import Error from "../404";
import { fetchDailyYields } from "../../queries/fetchDailyYields";

const overrideCss = "px-8 md:px-10 lg:px-10 xl:px-[8.375rem]";
const overrideCss = "px-8 md:px-10 lg:px-10 xl:px-16";

const YieldOnDay = ({
navLinks,
Expand Down
57 changes: 36 additions & 21 deletions pages/proof-of-yield/[timestamp]/[strategy].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,16 +166,20 @@ const YieldSourceStrategy = ({
/>
</div>
<div className="flex flex-wrap justify-center font-bold text-lg md:text-2xl leading-[32px] md:leading-[48px]">
{allocation === undefined
? "..."
: Number(formatEther(BigInt(allocation))).toLocaleString(
"en-US",
{
notation: "compact",
minimumFractionDigits: 3,
maximumFractionDigits: 3,
},
)}
{allocation === undefined ? (
<div className="flex items-center h-[48px]">
<div className="horizontal-loader" />
</div>
) : (
Number(formatEther(BigInt(allocation))).toLocaleString(
"en-US",
{
notation: "compact",
minimumFractionDigits: 3,
maximumFractionDigits: 3,
},
)
)}
{allocation && (
<span className="font-normal ml-2 text-origin-white/70">
(
Expand All @@ -200,8 +204,15 @@ const YieldSourceStrategy = ({
tooltipClassName="whitespace-nowrap text-center"
/>
</div>

<div className="font-bold text-lg md:text-2xl leading-[32px] md:leading-[48px]">
{apy === undefined ? "..." : `${(apy * 100).toFixed(1)}%`}
{apy === undefined ? (
<div className="flex items-center h-[48px]">
<div className="horizontal-loader" />
</div>
) : (
`${(apy * 100).toFixed(1)}%`
)}
</div>
</div>
<div className="flex flex-col items-center justify-center h-32">
Expand All @@ -214,16 +225,20 @@ const YieldSourceStrategy = ({
/>
</div>
<div className="font-bold text-lg md:text-2xl leading-[32px] md:leading-[48px]">
{earnings === undefined
? "..."
: Number(formatEther(BigInt(earnings))).toLocaleString(
"en-US",
{
notation: "compact",
minimumFractionDigits: 2,
maximumFractionDigits: 2,
},
)}
{earnings === undefined ? (
<div className="flex items-center h-[48px]">
<div className="horizontal-loader" />
</div>
) : (
Number(formatEther(BigInt(earnings))).toLocaleString(
"en-US",
{
notation: "compact",
minimumFractionDigits: 2,
maximumFractionDigits: 2,
},
)
)}
</div>
</div>
</ContainerBody>
Expand Down
215 changes: 111 additions & 104 deletions sections/proof-of-yield/YieldSources.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { Container } from "../../components/Container";
import { strategies } from "./utils/strategies";
import { DailyYield } from "../../queries/fetchDailyYields";
import Tooltip from "../../components/proof-of-yield/Tooltip";
import { useElementSize } from "usehooks-ts";

const YieldSources = ({
strategiesLatest,
Expand All @@ -20,6 +21,8 @@ const YieldSources = ({
strategiesLatest: DailyYield[];
strategyHistory: Record<string, DailyYield[]>;
}) => {
const [ref, { width }] = useElementSize<HTMLDivElement>();
const isSmall = width < 700;
const totalBalance = strategiesLatest.reduce(
(sum, next) => sum + BigInt(next.balance),
BigInt(0),
Expand All @@ -31,85 +34,90 @@ const YieldSources = ({
.slice(0, 10);

return (
<Container>
<Container ref={ref}>
<ContainerHeader className="flex justify-between items-start">
<span>Yield Sources</span>
</ContainerHeader>
<table className="w-full mb-2">
{/* Header */}
<thead>
<tr>
<Header className="justify-start">Strategy</Header>
<Header className="justify-end" tooltip={`APY on ${to}`}>
APY
</Header>
<Header className="justify-end" tooltip={`${from} through ${to}`}>
30-day trend
</Header>
<Header className="justify-end" tooltip={`Earnings on ${to}`}>
Earnings
</Header>
<Header className="justify-end" tooltip={`Allocation on ${to}`}>
Allocation
</Header>
<Header className="w-2 md:w-8" />
</tr>
</thead>
{/* Content */}
<tbody>
{strategiesLatest.map(
({ strategy, asset, balance, earningsChange, apy, timestamp }) => {
const strategyInfo = strategies.find(
(s) => s.address === strategy && s.asset === asset,
);
const strategyName =
strategyInfo.name ?? shortenAddress(strategy);
const strategyPath = strategyInfo.path;
const day = timestamp.slice(0, 10);
return (
<Row
key={strategyPath}
href={`/proof-of-yield/${day}/${strategyPath}`}
elements={[
strategyName,
<div className="flex justify-end">
{(apy * 100).toFixed(2) + "%"}
</div>,
<div className="flex justify-center h-10 w-full">
<div className="w-24">
<SparklineChart
data={strategyHistory[`${strategy}+${asset}`].map(
(d) => d.apy,
)}
/>
</div>
</div>,
<div className="flex justify-end">
{Number(formatEther(BigInt(earningsChange))).toFixed(4)}
</div>,
<div className="flex justify-end">
{`${dn.format(
dn.mul(dn.div(balance, totalBalance, 18), 100),
{
digits: 1,
trailingZeros: true,
},
)}%`}
</div>,
<Image
src={assetRootPath("/images/ext-link-white.svg")}
width="14"
height="14"
alt="ext-link"
className="inline md:ml-2 min-w-[8px] min-h-[8px] w-[8px] h-[8px] md:w-[14px] md:h-[14px]"
/>,
]}
/>
);
},
)}
</tbody>
</table>
{/* Header */}
<div
className={twMerge(
"grid",
isSmall
? "grid-cols-[6fr_2fr_2fr_1fr]"
: "grid-cols-[6fr_2fr_2fr_2fr_2fr_1fr]",
)}
>
<Header className="justify-start">Strategy</Header>
<Header className="justify-end" tooltip={`APY on ${to}`}>
APY
</Header>
<Header
className={twMerge("justify-end", isSmall ? "hidden" : "flex")}
tooltip={`${from} through ${to}`}
>
30-day trend
</Header>
<Header className="justify-end" tooltip={`Earnings on ${to}`}>
Earnings
</Header>
<Header
className={twMerge("justify-end", isSmall ? "hidden" : "flex")}
tooltip={`Allocation on ${to}`}
>
Allocation
</Header>
<Header className={isSmall ? "pr-2" : "pr-4"} />
</div>
{/* Content */}
{strategiesLatest.map(
({ strategy, asset, balance, earningsChange, apy, timestamp }) => {
const strategyInfo = strategies.find(
(s) => s.address === strategy && s.asset === asset,
);
const strategyName = strategyInfo.name ?? shortenAddress(strategy);
const strategyPath = strategyInfo.path;
const day = timestamp.slice(0, 10);
return (
<Row
key={strategyPath}
href={`/proof-of-yield/${day}/${strategyPath}`}
isSmall={isSmall}
classNames={[
"",
"justify-end",
isSmall ? "hidden" : "flex",
isSmall ? "hidden" : "justify-end flex",
"justify-end",
"justify-end",
]}
elements={[
<div className="truncate">{strategyName}</div>,
(apy * 100).toFixed(2) + "%",
<SparklineChart
data={strategyHistory[`${strategy}+${asset}`].map(
(d) => d.apy,
)}
/>,
Number(formatEther(BigInt(earningsChange))).toFixed(4),
`${dn.format(dn.mul(dn.div(balance, totalBalance, 18), 100), {
digits: 1,
trailingZeros: true,
})}%`,
<Image
src={assetRootPath("/images/ext-link-white.svg")}
width="14"
height="14"
alt="ext-link"
className={twMerge(
"inline min-w-[8px] min-h-[8px] ",
isSmall ? "w-[8px] h-[8px]" : "ml-2 w-[14px] h-[14px]",
)}
/>,
]}
/>
);
},
)}
</Container>
);
};
Expand All @@ -125,50 +133,49 @@ const Header = ({
className?: string | undefined;
tooltip?: string;
}) => (
<th
className={
"text-xs md:text-sm text-origin-white/60 px-2 first:pl-3 last:pr-3 md:first:pl-8 md:last:pr-4 py-2"
}
<div
className={twMerge(
"flex items-center gap-1.5 text-xs md:text-sm text-origin-white/60 px-2 first:pl-3 last:pr-3 md:first:pl-8 md:last:pr-4 py-2",
className,
)}
>
<div className={twMerge("flex items-center gap-2", className)}>
{children}
{tooltip && (
<Tooltip tooltipClassName="whitespace-nowrap" info={tooltip} />
)}
</div>
</th>
{children}
{tooltip && <Tooltip tooltipClassName="whitespace-nowrap" info={tooltip} />}
</div>
);

const Row = ({
elements,
classNames,
href,
isSmall,
}: {
elements: ReactNodeLike[];
classNames: string[];
href: string;
isSmall: boolean;
}) => (
<tr
className="hover:bg-white/5 cursor-pointer"
onClick={(e) => {
let target = e.shiftKey ? "_blank" : e.metaKey ? undefined : "_self";
window.open(href, target);
e.preventDefault();
return false;
}}
onMouseDown={(e) => {
if (e.button === 1) {
window.open(href);
}
}}
<a
className={twMerge(
"grid hover:bg-white/5 cursor-pointer",
isSmall
? "grid-cols-[6fr_2fr_2fr_1fr]"
: "grid-cols-[6fr_2fr_2fr_2fr_2fr_1fr]",
)}
href={href}
>
{elements.map((element, i) => (
<td
<div
key={i}
className="table-cell align-middle text-sm md:text-base text-origin-white px-2 first:pl-3 last:pr-3 md:first:pl-8 md:last:pr-4 py-2 h-12"
className={twMerge(
"flex items-center truncate text-sm md:text-base text-origin-white px-2 first:pl-3 last:pr-3 md:first:pl-8 md:last:pr-4 py-2 h-12",
classNames[i],
)}
>
{element}
</td>
</div>
))}
</tr>
</a>
);

const SparklineChart = ({ data }) => {
Expand Down
Loading

0 comments on commit ad1d75c

Please sign in to comment.