feat: new stats component, added stats / action box to mobile layout

apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBox.tsx

@@ -38,7 +38,7 @@ export const ActionBox = () => {
             }}
           />
         </div>
-        <p>Supply. Earn interest. Borrow. Repeat.</p>
+        <p className="text-muted-foreground">Supply. Earn interest. Borrow. Repeat.</p>
       </div>
       <div className="p-6 bg-background-gray text-white w-full max-w-[480px] rounded-xl">
         <p className="text-lg mb-3">You {lendingMode === LendingModes.LEND ? "supply" : "borrow"}</p>

apps/marginfi-v2-ui/src/components/common/Stats/Stats.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+import { useMrgnlendStore } from "~/store";
+
+import { cn } from "~/utils";
+
+import { numeralFormatter, usdFormatter } from "@mrgnlabs/mrgn-common";
+
+export const Stats = () => {
+  const [protocolStats] = useMrgnlendStore((state) => [state.protocolStats]);
+
+  const statsList = React.useMemo(() => {
+    return [
+      {
+        label: "Total deposits",
+        value: usdFormatter.format(protocolStats.deposits),
+      },
+      {
+        label: "Total borrows",
+        value: usdFormatter.format(protocolStats.borrows),
+      },
+      {
+        label: "Total points",
+        value: numeralFormatter(protocolStats.pointsTotal),
+      },
+    ];
+  }, [protocolStats]);
+
+  return (
+    <ul className="flex text-muted-foreground gap-4 justify-center mt-10 mb-6 text-sm md:gap-8 md:text-base">
+      {statsList.map((stat, index) => (
+        <li key={index} className={cn(index !== statsList.length - 1 && "border-r-2 border-white/20 pr-8")}>
+          <dl className="space-y-1 md:space-y-2">
+            <dt>{stat.label}</dt>
+            <dd className="font-bold md:text-2xl text-white">{stat.value}</dd>
+          </dl>
+        </li>
+      ))}
+    </ul>
+  );
+};

apps/marginfi-v2-ui/src/components/common/Stats/index.tsx

@@ -0,0 +1 @@
+export * from "./Stats";

apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetsList.tsx

@@ -22,12 +22,10 @@ import {
   STABLECOINS,
   LSTS,
 } from "~/components/common/AssetList";
-import { ActionBox, ActionBoxDialog } from "~/components/common/ActionBox";
 import { Portfolio } from "~/components/common/Portfolio";
 import { MrgnTooltip } from "~/components/common";
 
 import { LendingModes } from "~/types";
-import { Button } from "~/components/ui/button";
 
 const UserPositions = dynamic(async () => (await import("~/components/desktop/UserPositions")).UserPositions, {
   ssr: false,
@@ -174,13 +172,6 @@ const AssetsList = () => {
 
   return (
     <>
-      <div className="flex flex-col justify-center items-center gap-8 mb-16">
-        <ActionBox />
-        <ActionBoxDialog>
-          <Button>Open Action Box Dialog</Button>
-        </ActionBoxDialog>
-      </div>
-
       <AssetListFilters />
 
       <div className="col-span-full">

apps/marginfi-v2-ui/src/pages/index.tsx

@@ -8,16 +8,18 @@ import { shortenAddress } from "@mrgnlabs/mrgn-common";
 import config from "~/config/marginfi";
 import { Desktop, Mobile } from "~/mediaQueries";
 import { useMrgnlendStore } from "~/store";
+import { showErrorToast } from "~/utils/toastUtils";
 import { useConnection } from "~/hooks/useConnection";
 import { useWalletContext } from "~/hooks/useWalletContext";
 
 import { Banner } from "~/components/desktop/Banner";
 import { OverlaySpinner } from "~/components/desktop/OverlaySpinner";
 import { PageHeader } from "~/components/common/PageHeader";
+import { ActionBox } from "~/components/common/ActionBox";
+import { Stats } from "~/components/common/Stats";
 
 import { IconAlertTriangle } from "~/components/ui/icons";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger } from "~/components/ui/select";
-import { showErrorToast } from "~/utils/toastUtils";
 
 const DesktopAccountSummary = dynamic(
   async () => (await import("~/components/desktop/DesktopAccountSummary")).DesktopAccountSummary,
@@ -114,9 +116,10 @@ const Home = () => {
               setIsRefreshing={setIsRefreshingStore}
             />
           )}
-          <DesktopAccountSummary />
+          <Stats />
+          <ActionBox />
         </div>
-        <div className="pt-[16px] pb-[64px] px-4 w-full xl:w-4/5 xl:max-w-7xl gap-4">
+        <div className="pt-[16px] pb-[64px] px-4 w-full xl:w-4/5 xl:max-w-7xl mt-8 gap-4">
           <AssetsList />
         </div>
         <OverlaySpinner fetching={!isStoreInitialized || isRefreshingStore} />
@@ -133,7 +136,9 @@ const Home = () => {
             setIsRefreshing={setIsRefreshingStore}
           />
         )}
-        <div className="flex flex-col w-full h-full justify-start content-start pt-4 px-4 gap-4 mb-20">
+        <Stats />
+        <ActionBox />
+        <div className="flex flex-col w-full h-full justify-start content-start pt-4 px-4 gap-4 mt-8 mb-20">
           <MobileAssetsList />
         </div>
       </Mobile>