diff --git a/apps/marginfi-v2-ui/src/components/common/icons/Bridge.tsx b/apps/marginfi-v2-ui/src/components/common/icons/Bridge.tsx new file mode 100644 index 0000000000..f50c43ed5e --- /dev/null +++ b/apps/marginfi-v2-ui/src/components/common/icons/Bridge.tsx @@ -0,0 +1,11 @@ +import React, { FC, HTMLProps } from "react"; + +const Bridge: FC> = ({ color = "#868E95", ...props }) => ( +
+ + + +
+); + +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 new file mode 100644 index 0000000000..2d23cae0ba --- /dev/null +++ b/apps/marginfi-v2-ui/src/components/common/icons/Coins.tsx @@ -0,0 +1,9 @@ +import React, { FC, HTMLProps } from "react"; + +const Coins: FC> = ({ color = "#868E95", ...props }) => ( +
+ +
+); + +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 new file mode 100644 index 0000000000..293540474c --- /dev/null +++ b/apps/marginfi-v2-ui/src/components/common/icons/Hashtag.tsx @@ -0,0 +1,11 @@ +import React, { FC, HTMLProps } from "react"; + +const Hashtag: FC> = ({ color = "#868E95", ...props }) => ( +
+ + + +
+); + +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 new file mode 100644 index 0000000000..367efc64d4 --- /dev/null +++ b/apps/marginfi-v2-ui/src/components/common/icons/Steak.tsx @@ -0,0 +1,18 @@ +import React, { FC, HTMLProps } from "react"; + +const Steak: FC> = ({ color = "#868E95", ...props }) => ( +
+ + + + + + +
+); + +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 index 76736bc0cc..08d47b16e9 100644 --- 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)} > - -
+ +
more
diff --git a/apps/marginfi-v2-ui/src/config/navigationLinks.ts b/apps/marginfi-v2-ui/src/config/navigationLinks.ts index 29a2a73491..c6795ee6a5 100644 --- 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,9 +41,9 @@ export const ORDERED_MOBILE_LAUNCHER_LINKS: NavLinkInfo[] = [ }, { href: "/stake", - alt: "coin swap icon", + alt: "steak icon", label: "stake", - Icon: TokenSwap, + Icon: Steak, }, { href: "/portfolio", @@ -48,4 +51,28 @@ export const ORDERED_MOBILE_LAUNCHER_LINKS: NavLinkInfo[] = [ 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 index 57c41af72a..3f12e07bf2 100644 --- 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 ( + stake + - stake - - - - stake - - ); }; diff --git a/apps/marginfi-v2-ui/src/styles/globals.css b/apps/marginfi-v2-ui/src/styles/globals.css index 1d703d4149..4e46cf4ac7 100644 --- 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%; }