feat: Market summary section

apps/flame-defi/app/earn/components/MarketSummary/MarketSummary.tsx

@@ -0,0 +1,11 @@
+import { MarketSummaryCard } from "./MarketSummaryCard";
+
+export const MarketSummary = () => {
+  return (
+    <div className="flex flex-col gap-2 md:flex-row">
+      {/* TODO: Use fetched values. */}
+      <MarketSummaryCard label="Total Deposits" value={75000} />
+      <MarketSummaryCard label="Total Borrow" value={1000000} />
+    </div>
+  );
+};

apps/flame-defi/app/earn/components/MarketSummary/MarketSummaryCard.tsx

@@ -0,0 +1,65 @@
+import { Skeleton } from "@repo/ui/shadcn-primitives";
+import Big from "big.js";
+import React, { useEffect, useState } from "react";
+import { FormattedNumber } from "react-intl";
+import { Card } from "../Card";
+
+interface MarketSummaryCardProps {
+  label: React.ReactNode;
+  value: number;
+}
+
+export const MarketSummaryCard = ({ label, value }: MarketSummaryCardProps) => {
+  const [count, setCount] = useState<number | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const counter = (minimum: number, maximum: number) => {
+      for (let count = minimum; count <= maximum; count++) {
+        setTimeout(() => {
+          if (isMounted) {
+            setCount(count);
+          }
+        }, 5000);
+      }
+    };
+
+    const minimum = value - 10000;
+    counter(minimum < 0 ? 0 : minimum, value);
+
+    return () => {
+      isMounted = false;
+    };
+  }, [value]);
+
+  return (
+    <Card className="flex flex-col rounded-xl p-5 space-y-1">
+      <span className="text-xs/3 text-grey-light">{label}</span>
+
+      <div className="relative">
+        {/* Reserve space for animation to prevent card size increasing with counter value. */}
+        <span className="text-3xl/8 font-dot opacity-0">
+          <FormattedNumber
+            value={+new Big(value).toFixed()}
+            style="currency"
+            currency="USD"
+            maximumFractionDigits={0}
+          />
+        </span>
+        <span className="text-3xl/8 font-dot w-full absolute top-0 left-0">
+          <Skeleton isLoading={count === null}>
+            <span>
+              <FormattedNumber
+                value={+new Big(count ?? 0).toFixed()}
+                style="currency"
+                currency="USD"
+                maximumFractionDigits={0}
+              />
+            </span>
+          </Skeleton>
+        </span>
+      </div>
+    </Card>
+  );
+};

apps/flame-defi/app/earn/components/MarketSummary/index.ts

@@ -0,0 +1 @@
+export { MarketSummary } from "./MarketSummary";

apps/flame-defi/app/earn/sections/TableSection/TableSection.tsx

@@ -1,4 +1,5 @@
 import { Card } from "earn/components/Card";
+import { MarketSummary } from "earn/components/MarketSummary";
 import { Table, TablePagination, TableSearch } from "earn/components/Table";
 import { useTable } from "earn/hooks/useTable";
 
@@ -7,6 +8,11 @@ export const TableSection = () => {
 
   return (
     <section className="flex flex-col p-4 md:p-20">
+      <div className="flex flex-col justify-between gap-4 mt-20 mb-6 md:flex-row md:mb-4 md:mt-0">
+        <h1 className="text-xl/6">Lend</h1>
+        <MarketSummary />
+      </div>
+
       <div className="flex w-full mb-4">
         <TableSearch />
       </div>