feat(mfi-v2-ui): menu modal ct'd

mrgnlabs · Oct 2, 2023 · 155ed1e · 155ed1e
1 parent 6e4c8fa
commit 155ed1e
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 15 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/common/icons/Bridge.tsx b/apps/marginfi-v2-ui/src/components/common/icons/Bridge.tsx
@@ -0,0 +1,11 @@
+import React, { FC, HTMLProps } from "react";
+
+const Bridge: FC<HTMLProps<HTMLDivElement>> = ({ color = "#868E95", ...props }) => (
+  <div {...props}>
+    <svg fill={color} xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512">
+      <path d="M32 32C14.3 32 0 46.3 0 64S14.3 96 32 96H72v64H0V288c53 0 96 43 96 96v64c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V384c0-53 43-96 96-96s96 43 96 96v64c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V384c0-53 43-96 96-96V160H504V96h40c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM456 96v64H376V96h80zM328 96v64H248V96h80zM200 96v64H120V96h80z" />
+    </svg>
+  </div>
+);
+
+export { Bridge };
diff --git a/apps/marginfi-v2-ui/src/components/common/icons/Coins.tsx b/apps/marginfi-v2-ui/src/components/common/icons/Coins.tsx
@@ -0,0 +1,9 @@
+import React, { FC, HTMLProps } from "react";
+
+const Coins: FC<HTMLProps<HTMLDivElement>> = ({ color = "#868E95", ...props }) => (
+  <div {...props}>
+    <svg fill={color} xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5C300.6 137.4 248.2 128 192 128c-8.3 0-16.4 .2-24.5 .6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80S512 35.8 512 80zM160.7 161.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4C369.3 204.9 384 221.7 384 240c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c0 0 0 0 0 0c-.1 .1-.3 .1-.4 .2l0 0 0 0c-.3 .2-.6 .3-.9 .5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5zM416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8 .2-3.5 .2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336V300.6c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4V304v5.7V336zm32 0V304 278.1c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7 .2-3.5 .2-5.3zM192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432V396.6c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448z"/></svg>
+  </div>
+);
+
+export { Coins };
diff --git a/apps/marginfi-v2-ui/src/components/common/icons/Hashtag.tsx b/apps/marginfi-v2-ui/src/components/common/icons/Hashtag.tsx
@@ -0,0 +1,11 @@
+import React, { FC, HTMLProps } from "react";
+
+const Hashtag: FC<HTMLProps<HTMLDivElement>> = ({ color = "#868E95", ...props }) => (
+  <div {...props}>
+    <svg fill={color} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+      <path d="M181.3 32.4c17.4 2.9 29.2 19.4 26.3 36.8L197.8 128h95.1l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3s29.2 19.4 26.3 36.8L357.8 128H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H347.1L325.8 320H384c17.7 0 32 14.3 32 32s-14.3 32-32 32H315.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8l9.8-58.7H155.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8L90.2 384H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l21.3-128H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3zM187.1 192L165.8 320h95.1l21.3-128H187.1z" />
+    </svg>
+  </div>
+);
+
+export { Hashtag };
diff --git a/apps/marginfi-v2-ui/src/components/common/icons/Steak.tsx b/apps/marginfi-v2-ui/src/components/common/icons/Steak.tsx
@@ -0,0 +1,18 @@
+import React, { FC, HTMLProps } from "react";
+
+const Steak: FC<HTMLProps<HTMLDivElement>> = ({ color = "#868E95", ...props }) => (
+  <div {...props}>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+      <path d="M0 0h512v512H0z"></path>
+      <g>
+        <path
+          d="M294.818 43.27c-.957.003-1.917.014-2.88.035-46.15.993-96.56 23.687-128.614 54.82-41.965 40.758-91.926 108.163-118.896 173.047-13.486 32.442-21.17 64.22-19.93 91.305 1.24 27.085 10.723 49.188 32.54 65.546 15.71 11.78 28.638 10.986 44.814 2.72 16.175-8.268 34.067-25.324 52.433-45.405 36.732-40.162 74.766-92.452 121.008-107.932 61.794-20.685 98.278-34.43 120.926-46.785 22.646-12.353 31.392-22.466 40.74-39.08 7.302-12.974 8.365-26.067 5.03-39.882-3.334-13.814-11.388-28.167-22.45-41.62-22.127-26.903-56.253-49.946-83.706-60.003-12.75-4.67-26.652-6.79-41.016-6.764zm3.418 24.26c21.21-.103 42.145 4.338 58.493 16.677 47.554 35.895 86.454 58.96 54.377 111.88-32.076 52.923-177.004 58.17-217.56 20.06-1.663-10.596-12.613-91.45 10.176-121.653 12.52-10.007 54.02-26.77 94.513-26.965zm-119.87 43.66c-1.058 1.99-7.086 83.113-10.403 98.937-19.397 9.728-71.78 21.074-73.92 6.977 3.618-16.654 37.1-71.993 84.324-105.915zm278.095 26.248c1.196 3.294 2.213 6.627 3.026 9.996 4.2 17.4 2.736 35.916-6.84 52.933-10.34 18.374-23.007 32.528-47.808 46.057-24.8 13.53-61.8 27.285-123.832 48.05-36.878 12.346-75.83 61.892-113.438 103.012-18.804 20.56-37.417 39.008-57.525 49.285-5.895 3.014-12.05 5.204-18.322 6.418 3.03 1.73 6.143 3.338 9.165 4.728 8.116 3.734 16.547 5.668 17.197 5.686 14.037-.65 29.08-8.326 44.816-21.024 15.82-12.764 32.063-30.284 48.493-48.676 32.86-36.784 65.744-77.523 104.444-90.478 61.817-20.694 98.67-34.278 121.465-46.543 22.794-12.264 31.4-22.235 40.044-39.028 9.733-18.912 10.244-32.256 4.506-46.28-4.33-10.583-12.968-21.73-25.39-34.135zm-314.546 95.466c33.96-.19 69.09 16.75 104.688 36.092-71.258 37.318-141.89 180.326-187.133 133.99-18.206-20.105-19.433-119.77 30.147-153.564 17.043-11.616 34.51-16.418 52.297-16.518zm-36.463 73.213c-5.436.103-10.92 1.77-14.74 4.787-12.34 9.753-21.72 34.145-11.206 45.844 10.057 11.19 35.46 5.816 44.728-6.012 8.262-10.544 5.69-31.088-4.32-40.02-3.632-3.24-9.023-4.7-14.46-4.6z"
+          fill={color}
+          fill-opacity="1"
+        ></path>
+      </g>
+    </svg>
+  </div>
+);
+
+export { Steak };
diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileNavbar/MobileNavbar.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileNavbar/MobileNavbar.tsx
@@ -26,7 +26,7 @@ const MobileNavbar: FC = () => {
 
   const activeLink = useMemo(() => {
     const activeLinkIndex = ORDERED_MOBILE_NAVBAR_LINKS.findIndex((link) => link.href === router.pathname);
-    return activeLinkIndex >= 0 ? `link${activeLinkIndex + 1}` : null;
+    return activeLinkIndex >= 0 ? `link${activeLinkIndex + 1}` : "link0";
   }, [router.pathname]);
 
   useSwipeGesture(() => setIsMoreModalOpen(true));
@@ -39,8 +39,8 @@ const MobileNavbar: FC = () => {
             className="w-1/4 h-full flex flex-col justify-center items-center"
             onClick={() => setIsMoreModalOpen(!isMoreModalOpen)}
           >
-            <Apps className="w-[18.9px] h-[18.9px]" />
-            <div className={`font-aeonik font-[400] text-[#999]`}>
+            <Apps className="w-[18.9px] h-[18.9px]" sx={{color: activeLink === "link0" ? "#DCE85D" : "#999"}} />
+            <div className={`font-aeonik font-[400] text-[#999] ${activeLink === "link0" ? "text-[#DCE85D]" : "text-[#999]"}`}>
             more
             </div>
           </div>

diff --git a/apps/marginfi-v2-ui/src/config/navigationLinks.ts b/apps/marginfi-v2-ui/src/config/navigationLinks.ts
@@ -1,5 +1,8 @@
 import { FC, HTMLProps } from "react";
 import {PieChart, ReceiveMoney, TokenSwap} from "~/components/common/icons";
+import { Bridge } from "~/components/common/icons/Bridge";
+import { Coins } from "~/components/common/icons/Coins";
+import { Steak } from "~/components/common/icons/Steak";
 
 export interface NavLinkInfo {
   href: string;
@@ -17,9 +20,9 @@ export const ORDERED_MOBILE_NAVBAR_LINKS: NavLinkInfo[] = [
   },
   {
     href: "/stake",
-    alt: "coin swap icon",
+    alt: "steak icon",
     label: "stake",
-    Icon: TokenSwap,
+    Icon: Steak,
   },
   {
     href: "/portfolio",
@@ -38,14 +41,38 @@ export const ORDERED_MOBILE_LAUNCHER_LINKS: NavLinkInfo[] = [
   },
   {
     href: "/stake",
-    alt: "coin swap icon",
+    alt: "steak icon",
     label: "stake",
-    Icon: TokenSwap,
+    Icon: Steak,
   },
   {
     href: "/portfolio",
     alt: "pie chart icon",
     label: "portfolio",
     Icon: PieChart,
   },
+  {
+    href: "/swap",
+    alt: "coin swap icon",
+    label: "swap",
+    Icon: TokenSwap,
+  },
+  {
+    href: "/bridge",
+    alt: "pie chart icon",
+    label: "bridge",
+    Icon: Bridge,
+  },
+  {
+    href: "/earn",
+    alt: "coins icon",
+    label: "earn",
+    Icon: Coins,
+  },
+  // {
+  //   href: "/points",
+  //   alt: "hashtag icon",
+  //   label: "points",
+  //   Icon: Hashtag,
+  // },
 ];
diff --git a/apps/marginfi-v2-ui/src/pages/stake.tsx b/apps/marginfi-v2-ui/src/pages/stake.tsx
@@ -8,7 +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, Mobile } from "~/mediaQueries";
+import { Desktop } from "~/mediaQueries";
 import { createLstStore } from "~/store/lstStore";
 import { usePrevious } from "~/utils";
 import { Features, isActive } from "~/utils/featureGates";
@@ -70,16 +70,11 @@ const StakePage = () => {
 
   return (
     <JupiterProvider connection={connection} wrapUnwrapSOL={false}>
+      <PageHeader>stake</PageHeader>
+      <StakingContent />
       <Desktop>
-        <PageHeader>stake</PageHeader>
-        <StakingContent />
         <OverlaySpinner fetching={!initialized || isRefreshingStore} />
       </Desktop>
-
-      <Mobile>
-        <PageHeader>stake</PageHeader>
-        <StakingContent />
-      </Mobile>
     </JupiterProvider>
   );
 };

diff --git a/apps/marginfi-v2-ui/src/styles/globals.css b/apps/marginfi-v2-ui/src/styles/globals.css
@@ -85,6 +85,10 @@ a {
   transition: left 0.25s ease-in-out;
 }
 
+.border-slider.link0 {
+  left: 0%;
+}
+
 .border-slider.link1 {
   left: 25%;
 }