From ad1d75c380a59aa7a9e4009ab0d4f6da8c1faa3e Mon Sep 17 00:00:00 2001
From: Chris Jacobs <apexearth@gmail.com>
Date: Sun, 14 Jan 2024 11:30:24 -0800
Subject: [PATCH] fix visuals at various widths, loading indicators

---
 components/Container.tsx                      |  19 +-
 pages/proof-of-yield/[timestamp].tsx          |   2 +-
 .../proof-of-yield/[timestamp]/[strategy].tsx |  57 +++--
 sections/proof-of-yield/YieldSources.tsx      | 215 +++++++++---------
 styles/globals.css                            |  45 +++-
 5 files changed, 193 insertions(+), 145 deletions(-)

diff --git a/components/Container.tsx b/components/Container.tsx
index 31df9e0..bec45d4 100644
--- a/components/Container.tsx
+++ b/components/Container.tsx
@@ -1,15 +1,16 @@
 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,
@@ -17,4 +18,4 @@ export const Container = ({
   >
     {children}
   </div>
-);
+));
diff --git a/pages/proof-of-yield/[timestamp].tsx b/pages/proof-of-yield/[timestamp].tsx
index 2bc70f9..b480438 100644
--- a/pages/proof-of-yield/[timestamp].tsx
+++ b/pages/proof-of-yield/[timestamp].tsx
@@ -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,
diff --git a/pages/proof-of-yield/[timestamp]/[strategy].tsx b/pages/proof-of-yield/[timestamp]/[strategy].tsx
index 3b1853a..b585086 100644
--- a/pages/proof-of-yield/[timestamp]/[strategy].tsx
+++ b/pages/proof-of-yield/[timestamp]/[strategy].tsx
@@ -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">
                         (
@@ -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">
@@ -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>
diff --git a/sections/proof-of-yield/YieldSources.tsx b/sections/proof-of-yield/YieldSources.tsx
index 7688b24..7d025e4 100644
--- a/sections/proof-of-yield/YieldSources.tsx
+++ b/sections/proof-of-yield/YieldSources.tsx
@@ -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,
@@ -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),
@@ -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>
   );
 };
@@ -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 }) => {
diff --git a/styles/globals.css b/styles/globals.css
index 4e72174..0fbd5a0 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -147,9 +147,9 @@ body {
 
 .text-gradient2 {
   background-image: -webkit-linear-gradient(
-    bottom,
-    #b361e6 -28.99%,
-    #6a36fc 144%
+      bottom,
+      #b361e6 -28.99%,
+      #6a36fc 144%
   );
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -188,18 +188,18 @@ body {
 .gradient2 {
   color: #fafbfb;
   background-image: -webkit-linear-gradient(
-    left,
-    #8c66fc -28.99%,
-    #0274f1 144.97%
+      left,
+      #8c66fc -28.99%,
+      #0274f1 144.97%
   );
 }
 
 .gradient4 {
   color: #fafbfb;
   background-image: -webkit-linear-gradient(
-    left,
-    #8c66fc33 -28.99%,
-    #0274f133 144.97%
+      left,
+      #8c66fc33 -28.99%,
+      #0274f133 144.97%
   );
 }
 
@@ -218,4 +218,29 @@ body {
 
 .balance {
   text-wrap: balance;
-}
\ No newline at end of file
+}
+
+.horizontal-loader {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow: 32px 0 #fff, -32px 0 #fff;
+  position: relative;
+  animation: horizontal-loader-flash .8s ease-out infinite alternate;
+}
+
+@keyframes horizontal-loader-flash {
+  0% {
+    background-color: #FFF2;
+    box-shadow: 32px 0 #FFF2, -32px 0 #FFF;
+  }
+  50% {
+    background-color: #FFF;
+    box-shadow: 32px 0 #FFF2, -32px 0 #FFF2;
+  }
+  100% {
+    background-color: #FFF2;
+    box-shadow: 32px 0 #FFF, -32px 0 #FFF2;
+  }
+}