diff --git a/apps/marginfi-v2-ui/src/components/Navbar/Navbar.tsx b/apps/marginfi-v2-ui/src/components/Navbar/Navbar.tsx index 21b7bcadcc..ae6577c1db 100644 --- a/apps/marginfi-v2-ui/src/components/Navbar/Navbar.tsx +++ b/apps/marginfi-v2-ui/src/components/Navbar/Navbar.tsx @@ -133,7 +133,12 @@ const Navbar: FC = () => { badgeContent={"l"} invisible={!showBadges} > - + lend @@ -152,7 +157,10 @@ const Navbar: FC = () => { badgeContent={"s"} invisible={!showBadges} > - + swap @@ -170,7 +178,10 @@ const Navbar: FC = () => { badgeContent={"b"} invisible={!showBadges} > - + bridge @@ -190,11 +201,41 @@ const Navbar: FC = () => { invisible={!showBadges} className="hidden md:block" > - + earn + + + stake + + + { } UXP`} - + {connected && currentFirebaseUser ? `${groupedNumberFormatterDyn.format(Math.round(userPointsData.totalPoints))} points` : "points"} diff --git a/apps/marginfi-v2-ui/src/components/Staking/StakingCard/PrimaryButton.tsx b/apps/marginfi-v2-ui/src/components/Staking/StakingCard/PrimaryButton.tsx new file mode 100644 index 0000000000..39c3bb22aa --- /dev/null +++ b/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 = ({ children, disabled, bgColor, ...otherProps }) => ( + +); diff --git a/apps/marginfi-v2-ui/src/components/Staking/StakingCard/StakingCard.tsx b/apps/marginfi-v2-ui/src/components/Staking/StakingCard/StakingCard.tsx new file mode 100644 index 0000000000..3eda1f23c6 --- /dev/null +++ b/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 = ({}) => { + return ( + <> +
+
+ Deposit +
+
+ +
+ 123 + {}}> + MAX + +
+
+ +
+ You will Receive + 314.27 $LST +
+
+ Mint +
+
+ Current price + 1 $LST = 1.13 SOL +
+
+ Fees + 0% +
+
+ + ); +}; diff --git a/apps/marginfi-v2-ui/src/components/Staking/StakingCard/StakingInput.tsx b/apps/marginfi-v2-ui/src/components/Staking/StakingCard/StakingInput.tsx new file mode 100644 index 0000000000..e03930d754 --- /dev/null +++ b/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 = ({}) => { + return ( + } + 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 }, + }} + > + ); +}; + +interface DropDownButtonProps {} + +const DropDownButton: FC = ({}) => { + const selectedTokenUrl = "info_icon.png"; // link up + const token = "SOL"; // link up + const [isModalOpen, setIsModalOpen] = useState(false); + + return ( + <> +
{}} + className="w-[250px] h-[45px] flex flex-row justify-between py-2 px-4 text-white bg-[#303030] rounded-lg cursor-pointer" + > +
+
+ token logo +
+ {token} +
+ +
+ setIsModalOpen(false)} /> + + ); +}; diff --git a/apps/marginfi-v2-ui/src/components/Staking/StakingCard/StakingModal.tsx b/apps/marginfi-v2-ui/src/components/Staking/StakingCard/StakingModal.tsx new file mode 100644 index 0000000000..a682807c0a --- /dev/null +++ b/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 = ({ isOpen, handleClose }) => { + return ( + +
+
+ Select token +
+ +
+
+
+ + ); +}; diff --git a/apps/marginfi-v2-ui/src/components/Staking/StakingCard/WalletIcon.tsx b/apps/marginfi-v2-ui/src/components/Staking/StakingCard/WalletIcon.tsx new file mode 100644 index 0000000000..89dbdfb059 --- /dev/null +++ b/apps/marginfi-v2-ui/src/components/Staking/StakingCard/WalletIcon.tsx @@ -0,0 +1,12 @@ +import * as React from "react"; + +export const WalletIcon: React.FC> = ({ width = 16, height = 17 }) => { + return ( + + + + ); +}; diff --git a/apps/marginfi-v2-ui/src/components/Staking/StakingCard/index.ts b/apps/marginfi-v2-ui/src/components/Staking/StakingCard/index.ts new file mode 100644 index 0000000000..a3b0a8ba48 --- /dev/null +++ b/apps/marginfi-v2-ui/src/components/Staking/StakingCard/index.ts @@ -0,0 +1 @@ +export * from "./StakingCard"; diff --git a/apps/marginfi-v2-ui/src/components/Staking/StakingStats.tsx b/apps/marginfi-v2-ui/src/components/Staking/StakingStats.tsx new file mode 100644 index 0000000000..900d94e4c5 --- /dev/null +++ b/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 = ({ tvl, projectedApy }) => { + return ( +
+
+
+
+ + TVL + + + {tvl ? ( + `$${numeralFormatter(tvl)}` + ) : ( + + )} + +
+
+ +
+
+ + Projected APY + + + {projectedApy ? ( + percentFormatterDyn.format(projectedApy) + ) : ( + + )} + +
+
+
+
+ ); +}; + +const DividerLine = () =>
; diff --git a/apps/marginfi-v2-ui/src/components/Staking/index.ts b/apps/marginfi-v2-ui/src/components/Staking/index.ts new file mode 100644 index 0000000000..09918a5852 --- /dev/null +++ b/apps/marginfi-v2-ui/src/components/Staking/index.ts @@ -0,0 +1 @@ +export * from "./StakingStats"; diff --git a/apps/marginfi-v2-ui/src/pages/stake.tsx b/apps/marginfi-v2-ui/src/pages/stake.tsx new file mode 100644 index 0000000000..1ce37e225f --- /dev/null +++ b/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 ( + <> + +
+ + +
+ + ); +}; + +export default StakePage;