feat(mfi-v2-ui): added lst page design

apps/marginfi-v2-ui/src/components/Navbar/Navbar.tsx

@@ -133,7 +133,12 @@ const Navbar: FC = () => {
               badgeContent={"l"}
               invisible={!showBadges}
             >
-              <Link href={"/"} className={`${router.pathname === "/" ? "hover-underline-static" : "hover-underline-animation"} hidden md:block`}>
+              <Link
+                href={"/"}
+                className={`${
+                  router.pathname === "/" ? "hover-underline-static" : "hover-underline-animation"
+                } hidden md:block`}
+              >
                 lend
               </Link>
             </Badge>
@@ -152,7 +157,10 @@ const Navbar: FC = () => {
               badgeContent={"s"}
               invisible={!showBadges}
             >
-              <Link href={"/swap"} className={`${router.pathname === "/swap" ? "hover-underline-static" : "hover-underline-animation"}`}>
+              <Link
+                href={"/swap"}
+                className={`${router.pathname === "/swap" ? "hover-underline-static" : "hover-underline-animation"}`}
+              >
                 swap
               </Link>
             </Badge>
@@ -170,7 +178,10 @@ const Navbar: FC = () => {
               badgeContent={"b"}
               invisible={!showBadges}
             >
-              <Link href={"/bridge"} className={`${router.pathname === "/bridge" ? "hover-underline-static" : "hover-underline-animation"}`}>
+              <Link
+                href={"/bridge"}
+                className={`${router.pathname === "/bridge" ? "hover-underline-static" : "hover-underline-animation"}`}
+              >
                 bridge
               </Link>
             </Badge>
@@ -190,11 +201,41 @@ const Navbar: FC = () => {
               invisible={!showBadges}
               className="hidden md:block"
             >
-              <Link href={"/earn"} className={`${router.pathname === "/earn" ? "hover-underline-static" : "hover-underline-animation"} hidden md:block`}>
+              <Link
+                href={"/earn"}
+                className={`${
+                  router.pathname === "/earn" ? "hover-underline-static" : "hover-underline-animation"
+                } hidden md:block`}
+              >
                 earn
               </Link>
             </Badge>
 
+            <Badge
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "right",
+              }}
+              sx={{
+                "& .MuiBadge-badge": {
+                  backgroundColor: "rgb(220, 232, 93)",
+                  color: "#1C2125",
+                },
+              }}
+              badgeContent={"e"}
+              invisible={!showBadges}
+              className="hidden md:block"
+            >
+              <Link
+                href={"/stake"}
+                className={`${
+                  router.pathname === "/stake" ? "hover-underline-static" : "hover-underline-animation"
+                } hidden md:block`}
+              >
+                stake
+              </Link>
+            </Badge>
+
             <Badge
               anchorOrigin={{
                 vertical: "bottom",
@@ -236,7 +277,12 @@ const Navbar: FC = () => {
                   } UXP`}
             </div>
 
-            <Link href={"/points"} className={`${router.pathname === "/points" ? "hover-underline-static" : "hover-underline-animation"} whitespace-nowrap`}>
+            <Link
+              href={"/points"}
+              className={`${
+                router.pathname === "/points" ? "hover-underline-static" : "hover-underline-animation"
+              } whitespace-nowrap`}
+            >
               {connected && currentFirebaseUser
                 ? `${groupedNumberFormatterDyn.format(Math.round(userPointsData.totalPoints))} points`
                 : "points"}

apps/marginfi-v2-ui/src/components/Staking/StakingCard/PrimaryButton.tsx

@@ -0,0 +1,28 @@
+import React, { FC, ReactNode } from "react";
+import { Button, ButtonProps } from "@mui/material";
+
+// Put this in common folder in the future when all is merged
+
+interface PrimaryButtonProps extends ButtonProps {
+  children?: ReactNode;
+  bgColor?: string;
+}
+
+export const PrimaryButton: FC<PrimaryButtonProps> = ({ children, disabled, bgColor, ...otherProps }) => (
+  <Button
+    style={{
+      width: "100%",
+      textTransform: "capitalize",
+      backgroundColor: disabled ? "gray" : bgColor ? bgColor : "rgb(227, 227, 227)",
+      border: disabled ? "gray" : bgColor ? "solid 1px rgb(227, 227, 227)" : "solid 1px transparent",
+      color: bgColor === "rgba(0,0,0,0)" && !disabled ? "rgb(227, 227, 227)" : "black",
+      fontWeight: 400,
+      fontFamily: "Aeonik Pro",
+      zIndex: 10,
+    }}
+    {...otherProps}
+    disabled={disabled}
+  >
+    {children}
+  </Button>
+);

apps/marginfi-v2-ui/src/components/Staking/StakingCard/StakingCard.tsx

@@ -0,0 +1,45 @@
+import { FC } from "react";
+import { Typography } from "@mui/material";
+
+import { StakingInput } from "./StakingInput";
+import { WalletIcon } from "./WalletIcon";
+import { PrimaryButton } from "./PrimaryButton";
+
+interface StakingCardProps {}
+
+export const StakingCard: FC<StakingCardProps> = ({}) => {
+  return (
+    <>
+      <div className="relative flex flex-col gap-2 rounded-xl bg-[#1C2023] px-8 py-6 w-[480px]">
+        <div className="flex flex-row justify-between w-full">
+          <Typography className="font-aeonik font-[400] text-lg">Deposit</Typography>
+          <div className="flex flex-row gap-2 my-auto">
+            <div>
+              <WalletIcon />
+            </div>
+            <Typography className="font-aeonik font-[400] text-sm my-auto">123</Typography>
+            <a className="font-aeonik font-[700] text-base cursor-pointer" onClick={() => {}}>
+              MAX
+            </a>
+          </div>
+        </div>
+        <StakingInput />
+        <div className="flex flex-row justify-between w-full my-auto pt-2">
+          <Typography className="font-aeonik font-[400] text-lg">You will Receive</Typography>
+          <Typography className="font-aeonik font-[700] text-2xl text-[#75BA80]">314.27 $LST</Typography>
+        </div>
+        <div className="py-7">
+          <PrimaryButton>Mint</PrimaryButton>
+        </div>
+        <div className="flex flex-row justify-between w-full my-auto">
+          <Typography className="font-aeonik font-[400] text-base">Current price</Typography>
+          <Typography className="font-aeonik font-[700] text-lg">1 $LST = 1.13 SOL</Typography>
+        </div>
+        <div className="flex flex-row justify-between w-full my-auto">
+          <Typography className="font-aeonik font-[400] text-base">Fees</Typography>
+          <Typography className="font-aeonik font-[700] text-lg">0%</Typography>
+        </div>
+      </div>
+    </>
+  );
+};

apps/marginfi-v2-ui/src/components/Staking/StakingCard/StakingInput.tsx

@@ -0,0 +1,48 @@
+import { FC, useState } from "react";
+import { Typography, InputBase } from "@mui/material";
+import { ArrowDropDown } from "@mui/icons-material";
+import Image from "next/image";
+
+import { StakingModal } from "./StakingModal";
+
+interface StakingInputProps {}
+
+export const StakingInput: FC<StakingInputProps> = ({}) => {
+  return (
+    <InputBase
+      startAdornment={<DropDownButton />}
+      className="text-white bg-[#0F1111] text-3xl p-3 rounded-xl"
+      type="number"
+      sx={{
+        input: { textAlign: "right", MozAppearance: "textfield" },
+        "input::-webkit-inner-spin-button": { WebkitAppearance: "none", margin: 0 },
+      }}
+    ></InputBase>
+  );
+};
+
+interface DropDownButtonProps {}
+
+const DropDownButton: FC<DropDownButtonProps> = ({}) => {
+  const selectedTokenUrl = "info_icon.png"; // link up
+  const token = "SOL"; // link up
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <div
+        onClick={() => {}}
+        className="w-[250px] h-[45px] flex flex-row justify-between py-2 px-4 text-white bg-[#303030] rounded-lg cursor-pointer"
+      >
+        <div className="flex flex-row gap-3">
+          <div className="m-auto">
+            <Image src={`/${selectedTokenUrl}`} alt="token logo" height={24} width={24} />
+          </div>
+          <Typography className="font-aeonik font-[700] text-lg leading-none my-auto">{token}</Typography>
+        </div>
+        <ArrowDropDown />
+      </div>
+      <StakingModal isOpen={isModalOpen} handleClose={() => setIsModalOpen(false)} />
+    </>
+  );
+};

apps/marginfi-v2-ui/src/components/Staking/StakingCard/StakingModal.tsx

@@ -0,0 +1,34 @@
+import { Typography, Skeleton, Input, InputBase, Modal, Box } from "@mui/material";
+import Image from "next/image";
+import Link from "next/link";
+import { FC } from "react";
+import { MrgnTooltip } from "~/components/Tooltip";
+
+import { numeralFormatter, percentFormatterDyn } from "@mrgnlabs/mrgn-common";
+import { ArrowDropDown, Close } from "@mui/icons-material";
+
+interface StakingModalProps {
+  isOpen: boolean;
+  handleClose: () => void;
+}
+
+export const StakingModal: FC<StakingModalProps> = ({ isOpen, handleClose }) => {
+  return (
+    <Modal
+      open={isOpen}
+      onClose={handleClose}
+      aria-labelledby="parent-modal-title"
+      aria-describedby="parent-modal-description"
+      className="border-none"
+    >
+      <div className="mx-auto mt-40 rounded-xl bg-[#1C2023] w-[400px] h-[500px] p-4">
+        <div className="flex flex-row justify-between">
+          <Typography className="font-aeonik font-[700] text-2xl inline">Select token</Typography>
+          <div className="cursor-pointer" onClick={handleClose}>
+            <Close />
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};

apps/marginfi-v2-ui/src/components/Staking/StakingCard/WalletIcon.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+export const WalletIcon: React.FC<React.SVGAttributes<SVGElement>> = ({ width = 16, height = 17 }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 16 17" fill="none">
+      <path
+        d="M13.5 5.125H3.5C3.33424 5.125 3.17527 5.05915 3.05806 4.94194C2.94085 4.82473 2.875 4.66576 2.875 4.5C2.875 4.33424 2.94085 4.17527 3.05806 4.05806C3.17527 3.94085 3.33424 3.875 3.5 3.875H12C12.0995 3.875 12.1948 3.83549 12.2652 3.76517C12.3355 3.69484 12.375 3.59946 12.375 3.5C12.375 3.40054 12.3355 3.30516 12.2652 3.23483C12.1948 3.16451 12.0995 3.125 12 3.125H3.5C3.13533 3.125 2.78559 3.26987 2.52773 3.52773C2.26987 3.78559 2.125 4.13533 2.125 4.5V12.5C2.125 12.8647 2.26987 13.2144 2.52773 13.4723C2.78559 13.7301 3.13533 13.875 3.5 13.875H13.5C13.7321 13.875 13.9546 13.7828 14.1187 13.6187C14.2828 13.4546 14.375 13.2321 14.375 13V6C14.375 5.76794 14.2828 5.54538 14.1187 5.38128C13.9546 5.21719 13.7321 5.125 13.5 5.125ZM13.625 13C13.625 13.0332 13.6118 13.0649 13.5884 13.0884C13.5649 13.1118 13.5332 13.125 13.5 13.125H3.5C3.33424 13.125 3.17527 13.0592 3.05806 12.9419C2.94085 12.8247 2.875 12.6658 2.875 12.5V5.72437C3.06837 5.82363 3.28265 5.87527 3.5 5.875H13.5C13.5332 5.875 13.5649 5.88817 13.5884 5.91161C13.6118 5.93505 13.625 5.96685 13.625 6V13ZM11.875 9.25C11.875 9.37361 11.8383 9.49445 11.7697 9.59723C11.701 9.70001 11.6034 9.78012 11.4892 9.82743C11.375 9.87473 11.2493 9.88711 11.1281 9.86299C11.0068 9.83887 10.8955 9.77935 10.8081 9.69194C10.7206 9.60453 10.6611 9.49317 10.637 9.37193C10.6129 9.25069 10.6253 9.12503 10.6726 9.01082C10.7199 8.89662 10.8 8.79901 10.9028 8.73033C11.0055 8.66166 11.1264 8.625 11.25 8.625C11.4158 8.625 11.5747 8.69085 11.6919 8.80806C11.8092 8.92527 11.875 9.08424 11.875 9.25Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

apps/marginfi-v2-ui/src/components/Staking/StakingCard/index.ts

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

apps/marginfi-v2-ui/src/components/Staking/StakingStats.tsx

@@ -0,0 +1,59 @@
+import { FC } from "react";
+import { Typography, Skeleton } from "@mui/material";
+
+import { numeralFormatter, percentFormatterDyn } from "@mrgnlabs/mrgn-common";
+
+interface StakingStatsProps {
+  tvl: number;
+  projectedApy: number;
+}
+
+export const StakingStats: FC<StakingStatsProps> = ({ tvl, projectedApy }) => {
+  return (
+    <div className="h-full rounded-xl font-[500] p-[10px]">
+      <div className="flex flex-row justify-center gap-8 w-full min-w-1/2 mt-[20px]">
+        <div className="h-full">
+          <div>
+            <Typography
+              color="#868E95"
+              className="font-aeonik font-[300] text-xs flex gap-1"
+              gutterBottom
+              component="div"
+            >
+              TVL
+            </Typography>
+            <Typography color="#fff" className="font-aeonik font-[500] text-lg md:text-xl" component="div">
+              {tvl ? (
+                `$${numeralFormatter(tvl)}`
+              ) : (
+                <Skeleton variant="rectangular" animation="wave" className="w-1/3 rounded-md top-[4px]" />
+              )}
+            </Typography>
+          </div>
+        </div>
+        <DividerLine />
+        <div className="h-full">
+          <div>
+            <Typography
+              color="#868E95"
+              className="font-aeonik font-[300] text-xs flex gap-1"
+              gutterBottom
+              component="div"
+            >
+              Projected APY
+            </Typography>
+            <Typography color="#fff" className="font-aeonik font-[500] text-lg md:text-xl" component="div">
+              {projectedApy ? (
+                percentFormatterDyn.format(projectedApy)
+              ) : (
+                <Skeleton variant="rectangular" animation="wave" className="w-1/3 rounded-md top-[4px]" />
+              )}
+            </Typography>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const DividerLine = () => <div style={{ width: "1px", borderLeft: "1px solid #555" }} />;

apps/marginfi-v2-ui/src/components/Staking/index.ts

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

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

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+import { PageHeader } from "~/components/PageHeader";
+import { StakingStats } from "~/components/Staking";
+import { StakingCard } from "~/components/Staking/StakingCard/StakingCard";
+
+const StakePage = () => {
+  return (
+    <>
+      <PageHeader text={"$LST"} />
+      <div className="flex flex-col h-full justify-center content-center pt-[64px] sm:pt-[16px] gap-4">
+        <StakingStats tvl={1250} projectedApy={0.5215} />
+        <StakingCard />
+      </div>
+    </>
+  );
+};
+
+export default StakePage;