feat(mfi-v2-ui): wip menu modal

mrgnlabs · Sep 30, 2023 · 05de465 · 05de465
1 parent 4570b34
commit 05de465
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 8 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileNavbar/MobileNavbar.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileNavbar/MobileNavbar.tsx
@@ -1,10 +1,12 @@
-import { FC, useEffect } from "react";
+import { FC, useEffect, useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { useUserProfileStore } from "~/store";
 import { useRouter } from "next/router";
 import { useFirebaseAccount } from "~/hooks/useFirebaseAccount";
 import { useWalletContext } from "~/hooks/useWalletContext";
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import { MoreModal } from "./MoreModal";
 
 // @todo implement second pretty navbar row
 const MobileNavbar: FC = () => {
@@ -14,39 +16,51 @@ const MobileNavbar: FC = () => {
   const router = useRouter();
   const [fetchPoints] = useUserProfileStore((state) => [state.fetchPoints]);
 
+  const [isMoreModalOpen, setIsMoreModalOpen] = useState(false);
+
   useEffect(() => {
     if (!walletAddress) return;
     fetchPoints(walletAddress.toBase58()).catch(console.error);
   }, [fetchPoints, walletAddress]);
 
   return (
     <header>
-      <nav className="fixed w-full bottom-0 h-[64px] z-50 bg-[#0F1111]">
-        <div className="h-full w-full border-t-2 border-[#1C2125] border-solid text-sm font-[500] text-[#868E95] z-50 px-4 flex justify-around items-center z-10 gap-4 lg:gap-8">
+      <nav className="fixed w-full bottom-0 h-[68px] z-50 bg-[#0F1111]">
+        <div className="h-full w-full border-t-2 pb-3 border-[#1C2125] border-solid text-sm font-[500] text-[#868E95] z-50 px-4 flex justify-around items-center z-10 gap-4 lg:gap-8">
           <Link
             href={"/"}
             className={`${router.pathname === "/" ? "hover-underline-static" : "hover-underline-animation"} block`}
           >
-            <Image className="m-auto" src="/receive_money.svg" alt="wallet icon" width={18.9} height={18.9} />
+            <Image className="m-auto" src="/receive_money.svg" alt="hand with money icon" width={18.9} height={18.9} />
             lend
           </Link>
 
           <Link
             href={"/swap"}
             className={`${router.pathname === "/swap" ? "hover-underline-static" : "hover-underline-animation"}`}
           >
-            <Image className="m-auto" src="/token_swap.svg" alt="wallet icon" width={18.9} height={18.9} />
+            <Image className="m-auto" src="/token_swap.svg" alt="coin swap icon" width={18.9} height={18.9} />
             swap
           </Link>
+
           <Link
             href={"/portfolio"}
             className={`${router.pathname === "/portfolio" ? "hover-underline-static" : "hover-underline-animation"}`}
           >
-            <Image className="m-auto" src="/pie_chart.svg" alt="wallet icon" width={18.9} height={18.9} />
+            <Image className="m-auto" src="/pie_chart.svg" alt="pie chart icon" width={18.9} height={18.9} />
             portfolio
           </Link>
+
+          <div
+            className="flex flex-col"
+            onClick={() => setIsMoreModalOpen(!isMoreModalOpen)}
+          >
+            <MoreHorizIcon className="m-auto w-[18.9px] h-[18.9px]" />
+            more
+          </div>
         </div>
       </nav>
+      <MoreModal isOpen={isMoreModalOpen} handleClose={() => setIsMoreModalOpen(false)} />
     </header>
   );
 };

diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileNavbar/MoreModal.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileNavbar/MoreModal.tsx
@@ -0,0 +1,45 @@
+import { Close } from "@mui/icons-material";
+import { Link, Modal, Slide, Typography } from "@mui/material";
+import Image from "next/image";
+import { FC } from "react";
+
+interface MoreModalProps {
+  isOpen: boolean;
+  handleClose: () => void;
+}
+
+export const MoreModal: FC<MoreModalProps> = ({ isOpen, handleClose }) => {
+  return (
+    <Modal open={isOpen} onClose={handleClose} className="border-none">
+      <Slide direction="up" in={isOpen} mountOnEnter unmountOnExit>
+        <div className="absolute top-0 left-0 w-full h-[calc(100%)] bg-[#0F1111] p-4">
+          <div className="flex flex-row justify-between mb-3">
+            <Link
+              href={"https://app.marginfi.com"}
+              className="h-[35.025px] w-[31.0125px] min-h-[35.025px] min-w-[31.0125px] flex justify-center items-center"
+            >
+              <Image src="/marginfi_logo.png" alt="marginfi logo" height={35.025} width={31.0125} />
+            </Link>
+            <div className="cursor-pointer" onClick={handleClose}>
+              <Close />
+            </div>
+          </div>
+          <div className="flex flex-col gap-2">
+            <Link href={"/"} className="hover-underline-animation">
+              <Typography className="font-aeonik font-[400] text-lg">Lend</Typography>
+            </Link>
+            <Link href={"/stake"} className="hover-underline-animation">
+              <Typography className="font-aeonik font-[400] text-lg">Stake</Typography>
+            </Link>
+            <Link href={"/swap"} className="hover-underline-animation">
+              <Typography className="font-aeonik font-[400] text-lg">Swap</Typography>
+            </Link>
+            <Link href={"/portfolio"} className="hover-underline-animation">
+              <Typography className="font-aeonik font-[400] text-lg">Portfolio</Typography>
+            </Link>
+          </div>
+        </div>
+      </Slide>
+    </Modal>
+  );
+};
diff --git a/apps/marginfi-v2-ui/src/pages/stake.tsx b/apps/marginfi-v2-ui/src/pages/stake.tsx
@@ -8,6 +8,7 @@ import { StakingCard, StakingStats } from "~/components/common/Staking";
 import { OverlaySpinner } from "~/components/desktop/OverlaySpinner";
 import { PageHeader } from "~/components/desktop/PageHeader";
 import { useWalletContext } from "~/hooks/useWalletContext";
+import { Desktop } from "~/mediaQueries";
 import { createLstStore } from "~/store/lstStore";
 import { usePrevious } from "~/utils";
 import { Features, isActive } from "~/utils/featureGates";
@@ -70,7 +71,7 @@ const StakePage = () => {
   return (
     <JupiterProvider connection={connection} wrapUnwrapSOL={false}>
       <PageHeader>stake</PageHeader>
-      <div className="flex flex-col h-full max-w-[480px] w-full justify-center content-center pt-[64px] sm:pt-[16px] gap-4 px-4">
+      <div className="flex flex-col h-full max-w-[480px] w-full justify-center content-center sm:pt-[16px] gap-4 px-4">
         <StakingStats />
         <StakingCard />
         <div className="flex flex-col mt-10 pb-[64px] gap-5 justify-center font-aeonik">
@@ -89,7 +90,9 @@ const StakePage = () => {
           </Typography>
         </div>
       </div>
-      <OverlaySpinner fetching={!initialized || isRefreshingStore} />
+      <Desktop>
+        <OverlaySpinner fetching={!initialized || isRefreshingStore} />
+      </Desktop>
     </JupiterProvider>
   );
 };