Merge pull request #2241 from dfinity/akos/defi-page-2

defi page update for cketh

docusaurus.config.js

@@ -10,7 +10,7 @@ const lightCodeTheme = require("./codeblock-theme");
 const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 const simplePlantUML = require("@akebifiky/remark-simple-plantuml");
 const homeShowcaseProjectsPlugin = require("./plugins/home-showcase");
-const icpPricePlugin = require("./plugins/icp-price");
+const cryptoPricePlugin = require("./plugins/crypto-price");
 const xdrPricePlugin = require("./plugins/xdr-price");
 const icpXdrPricePlugin = require("./plugins/icp-xdr-price");
 const tailwindPlugin = require("./plugins/tailwind");
@@ -481,7 +481,7 @@ const config = {
     "docusaurus-plugin-sass",
     customWebpack,
     tailwindPlugin,
-    icpPricePlugin,
+    cryptoPricePlugin,
     icpXdrPricePlugin,
     xdrPricePlugin,
     homeShowcaseProjectsPlugin,

plugins/crypto-price.js

@@ -0,0 +1,27 @@
+const fetch = require("node-fetch-retry");
+
+/** @type {import('@docusaurus/types').PluginModule} */
+const icpPricePlugin = async function (context, options) {
+  return {
+    name: "crypto-price",
+    async loadContent() {
+      const tickers = await Promise.all([
+        fetch("https://api.coinbase.com/v2/prices/ICP-USD/buy", {
+          retry: 10,
+          pause: 500,
+        }).then((res) => res.json()),
+        fetch("https://api.coinbase.com/v2/prices/BTC-USD/buy", {
+          retry: 10,
+          pause: 500,
+        }).then((res) => res.json()),
+      ]);
+      return { icp: +tickers[0].data.amount, btc: +tickers[1].data.amount };
+    },
+    async contentLoaded({ content, actions }) {
+      const { setGlobalData } = actions;
+      setGlobalData(content);
+    },
+  };
+};
+
+module.exports = icpPricePlugin;

src/components/Common/RotatingStatsPanel/index.tsx

@@ -0,0 +1,122 @@
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+import { SpringCounter } from "../../LandingPage/PreHero/Counters";
+import { Stat, StatsPanel } from "../Stats";
+
+export type RotatingStat = {
+  title: string;
+  value: number | (() => number);
+  format: (value: number) => string;
+  fallbackValue?: string;
+};
+
+const FadeInOutTitle: React.FC<{
+  title: string;
+}> = ({ title }) => {
+  const [currentTitle, setCurrentTitle] = useState(title);
+  const [nextTitle, setNextTitle] = useState(title);
+
+  useEffect(() => {
+    setNextTitle(title);
+    const handle = setTimeout(() => {
+      setCurrentTitle(title);
+    }, 300);
+    return () => clearTimeout(handle);
+  }, [title]);
+
+  return (
+    <span className="inline-grid text-center">
+      <span
+        className={clsx(
+          "col-start-1 row-start-1 duration-300",
+          currentTitle !== nextTitle
+            ? "opacity-0 transition-opacity"
+            : "opacity-1 transition-none"
+        )}
+      >
+        {currentTitle}
+      </span>
+      {currentTitle !== nextTitle && (
+        <span className="col-start-1 row-start-1 stat-fade-in">
+          {nextTitle}
+        </span>
+      )}
+    </span>
+  );
+};
+
+const layoutClasses = {
+  2: "grid grid-cols-1 sm:grid-cols-2 md:justify-between gap-10",
+  3: "grid grid-cols-1 md:grid-cols-3 md:justify-between gap-10",
+  4: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 md:justify-between gap-10",
+};
+
+const RotatingStatPanel: React.FC<{
+  stats: RotatingStat[][];
+  rotationIndexes: number[];
+}> = ({ stats, rotationIndexes }) => {
+  const [activeIndexes, setActiveIndexes] = useState(
+    rotationIndexes.map(() => 0)
+  );
+  const [rotationIndex, setRotationIndex] = useState(0);
+  const [windowFocused, setWindowFocused] = useState(true);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (!windowFocused) {
+        return;
+      }
+
+      const newActiveIndexes = [...activeIndexes];
+      const nextIndexToChange = rotationIndexes[rotationIndex];
+      newActiveIndexes[nextIndexToChange] =
+        (newActiveIndexes[nextIndexToChange] + 1) %
+        stats[nextIndexToChange].length;
+
+      setActiveIndexes(newActiveIndexes);
+      setRotationIndex((i) => (i + 1) % rotationIndexes.length);
+    }, 2000);
+
+    return () => clearInterval(interval);
+  }, [activeIndexes, rotationIndex, windowFocused]);
+
+  useEffect(() => {
+    const onVisibilityChange = () => setWindowFocused(!document.hidden);
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
+  }, []);
+
+  const statsToDisplay = activeIndexes.map((index, i) => stats[i][index]);
+
+  const layoutClass = layoutClasses[statsToDisplay.length];
+
+  return (
+    <StatsPanel className={layoutClass}>
+      {statsToDisplay.map((stat, index) => {
+        const value =
+          typeof stat.value === "function" ? stat.value() : stat.value;
+        return (
+          <Stat
+            key={index}
+            title={<FadeInOutTitle title={stat.title} />}
+            titleClassName="whitespace-nowrap"
+            value={
+              <SpringCounter
+                initialValue={value}
+                initialTarget={value}
+                target={value}
+                format={stat.format}
+                springConfig={[3, 1, 8]}
+              />
+            }
+            fallbackValue={stat.fallbackValue}
+          />
+        );
+      })}
+    </StatsPanel>
+  );
+};
+
+export default RotatingStatPanel;

src/components/Common/Stats/index.tsx

@@ -16,9 +16,17 @@ const Fallback: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   );
 };
 
-export const StatsPanel: React.FC<{ children: ReactNode }> = ({ children }) => {
+export const StatsPanel: React.FC<{
+  children: ReactNode;
+  className?: string;
+}> = ({ children, className }) => {
   return (
-    <div className="mt-20 backdrop-blur-md bg-white/80 border border-white border-solid rounded-xl py-12 px-6 md:px-20 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 md:justify-between gap-10">
+    <div
+      className={clsx(
+        "mt-20 backdrop-blur-md bg-white/80 border border-white border-solid rounded-xl py-12 px-6 md:px-20 ",
+        className
+      )}
+    >
       {children}
     </div>
   );

src/components/Common/VideoCard/index.tsx

@@ -1,7 +1,7 @@
 import Link from "@docusaurus/Link";
 import PlaySVG from "@site/static/img/svgIcons/play.svg";
 import clsx from "clsx";
-import React from "react";
+import React, { ReactNode } from "react";
 
 export const PlayButton: React.FC<{}> = ({}) => {
   return (
@@ -33,7 +33,7 @@ export const ImageOnlyVideoCard: React.FC<{
 const VideoCard: React.FC<{
   title: string;
   label: string;
-  description?: string;
+  description?: ReactNode;
   image: string;
   link: string;
   withPlayButton?: boolean;

src/components/LandingPage/BackgroundPanel/index.tsx

@@ -27,16 +27,16 @@ const BackgroundPanel: React.FC<{
       {inView && <DarkHeroStyles bgColor="transparent" />}
       <div
         className={clsx(
-          "fixed z-[10] inset-0 pointer-events-none transition-opacity duration-500",
+          "fixed z-[10] inset-0 transition-opacity duration-500",
           className,
-          inView ? "opacity-100" : "opacity-0"
+          inView ? "opacity-100" : "opacity-0 pointer-events-none"
         )}
       ></div>
-      <div ref={ref} className="relative z-[13] " id={id}>
+      <div ref={ref} className="relative z-[13] pointer-events-none" id={id}>
         <BackgroundPanelContext.Provider value={inView}>
           <div
             style={{ opacity: inView ? 1 : 0 }}
-            className="transition-opacity"
+            className="transition-opacity pointer-events-auto"
           >
             {children}
           </div>

src/components/LandingPage/PreHero/Counters.tsx

@@ -25,9 +25,9 @@ export const SpringCounter: React.FC<{
     function paint() {
       if (spring.current) {
         spring.current.update(60);
-        const nextValue = format(Math.round(spring.current.x));
+        const nextValue = format(spring.current.x);
         if (lastValue !== nextValue) {
-          ref.current.innerText = format(Math.round(spring.current.x));
+          ref.current.innerText = format(spring.current.x);
           lastValue = nextValue;
         }
       }
@@ -39,7 +39,7 @@ export const SpringCounter: React.FC<{
     return () => {
       lastHandle >= 0 && cancelAnimationFrame(lastHandle);
     };
-  }, []);
+  }, [format, target, initialValue, initialTarget]);
 
   useEffect(() => {
     if (!spring.current) {

src/components/NodeProvidersPage/Stats/index.tsx

@@ -30,7 +30,7 @@ const Stats: React.FC = () => {
   );
 
   return (
-    <StatsPanel>
+    <StatsPanel className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 md:justify-between gap-10">
       <Stat
         title="Node providers"
         value={

src/pages/community.tsx

@@ -346,10 +346,10 @@ const RotatingStatPanel: React.FC<{}> = () => {
   const statsToDisplay = activeIndexes.map((index, i) => stats[i][index]);
 
   return (
-    <StatsPanel>
+    <StatsPanel className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 md:justify-between gap-10">
       {statsToDisplay.map((stat, index) => (
         <Stat
-          key={index}
+          key={stat.title}
           title={<FadeInOutTitle title={stat.title} />}
           titleClassName="whitespace-nowrap"
           value={