-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(mfi-v2-ui): Point page restructuring
- Loading branch information
1 parent
37b1423
commit b5cd0d4
Showing
13 changed files
with
717 additions
and
585 deletions.
There are no files selected for viewing
24 changes: 24 additions & 0 deletions
24
apps/marginfi-v2-ui/src/components/desktop/Points/PointsCheckingUser.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import React, { FC } from "react"; | ||
| import { Card, CardContent, CircularProgress } from "@mui/material"; | ||
|
|
||
| interface PointsCheckingUserProps {} | ||
|
|
||
| export const PointsCheckingUser: FC<PointsCheckingUserProps> = ({}) => { | ||
| return ( | ||
| <Card className="w-2/3 bg-[#131619] h-full h-24 rounded-xl" elevation={0}> | ||
| <CardContent> | ||
| <div className="w-full flex flex-col justify-evenly items-center p-2 text-base text-white font-aeonik font-[400] rounded-xl text-center"> | ||
| <div> | ||
| <span className="text-2xl font-[500]">Access upgraded features</span> | ||
| <br /> | ||
| <br /> | ||
| </div> | ||
| <div className="flex gap-3 justify-center items-center"> | ||
| <div className="w-full flex justify-center items-center">Retrieving data</div> | ||
| <CircularProgress size="20px" sx={{ color: "#e1e1e1" }} /> | ||
| </div> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| ); | ||
| }; |
25 changes: 25 additions & 0 deletions
25
apps/marginfi-v2-ui/src/components/desktop/Points/PointsConnectWallet.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import React, { FC } from "react"; | ||
| import { Card, CardContent } from "@mui/material"; | ||
|
|
||
| import { WalletButton } from "~/components/common/Navbar"; | ||
|
|
||
| interface PointsConnectWalletProps {} | ||
|
|
||
| export const PointsConnectWallet: FC<PointsConnectWalletProps> = ({}) => { | ||
| return ( | ||
| <Card className="w-2/3 bg-[#131619] h-full h-24 rounded-xl" elevation={0}> | ||
| <CardContent> | ||
| <div className="w-full flex flex-col justify-evenly items-center p-2 text-base text-white font-aeonik font-[400] rounded-xl text-center"> | ||
| <div> | ||
| <span className="text-2xl font-[500]">Access upgraded features</span> | ||
| <br /> | ||
| <br /> | ||
| </div> | ||
| <div className="w-full flex justify-center items-center"> | ||
| <WalletButton /> | ||
| </div> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| ); | ||
| }; |
154 changes: 154 additions & 0 deletions
154
apps/marginfi-v2-ui/src/components/desktop/Points/PointsLeaderBoard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,154 @@ | ||
| import React, { FC } from "react"; | ||
| import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"; | ||
|
|
||
| import { groupedNumberFormatterDyn } from "@mrgnlabs/mrgn-common"; | ||
| import { LeaderboardRow } from "@mrgnlabs/marginfi-v2-ui-state"; | ||
|
|
||
| interface PointsLeaderBoardProps { | ||
| leaderboardData: LeaderboardRow[]; | ||
| currentUserId: string; | ||
| } | ||
|
|
||
| export const PointsLeaderBoard: FC<PointsLeaderBoardProps> = ({ leaderboardData, currentUserId }) => { | ||
| return ( | ||
| <TableContainer component={Paper} className="h-full w-4/5 sm:w-full bg-[#131619] rounded-xl overflow-x-auto"> | ||
| <Table> | ||
| <TableHead> | ||
| <TableRow> | ||
| <TableCell | ||
| align="center" | ||
| className="text-white text-base font-aeonik border-none pl-2" | ||
| style={{ fontWeight: 500 }} | ||
| > | ||
| Rank | ||
| </TableCell> | ||
| <TableCell className="text-white text-base font-aeonik border-none" style={{ fontWeight: 500 }}> | ||
| User | ||
| </TableCell> | ||
| <TableCell | ||
| className="text-white text-base font-aeonik border-none" | ||
| align="right" | ||
| style={{ fontWeight: 500 }} | ||
| > | ||
| Lending Points | ||
| </TableCell> | ||
| <TableCell | ||
| className="text-white text-base font-aeonik border-none" | ||
| align="right" | ||
| style={{ fontWeight: 500 }} | ||
| > | ||
| Borrowing Points | ||
| </TableCell> | ||
| <TableCell | ||
| className="text-white text-base font-aeonik border-none" | ||
| align="right" | ||
| style={{ fontWeight: 500 }} | ||
| > | ||
| Referral Points | ||
| </TableCell> | ||
| <TableCell | ||
| className="text-white text-base font-aeonik border-none" | ||
| align="right" | ||
| style={{ fontWeight: 500 }} | ||
| > | ||
| Social Points | ||
| </TableCell> | ||
| <TableCell | ||
| className="text-white text-base font-aeonik border-none" | ||
| align="right" | ||
| style={{ fontWeight: 500 }} | ||
| > | ||
| Total Points | ||
| </TableCell> | ||
| </TableRow> | ||
| </TableHead> | ||
| <TableBody> | ||
| {leaderboardData.map((row: LeaderboardRow, index: number) => ( | ||
| <TableRow key={row.id} className={`${row.id === currentUserId ? "glow" : ""}`}> | ||
| <TableCell | ||
| align="center" | ||
| className={`${index <= 2 ? "text-2xl" : "text-base"} border-none font-aeonik ${ | ||
| row.id === currentUserId ? "text-[#DCE85D]" : "text-white" | ||
| }`} | ||
| > | ||
| {index === 0 ? "🥇" : index === 1 ? "🥈" : index === 2 ? "🥉" : index + 1} | ||
| </TableCell> | ||
| <TableCell | ||
| className={`text-base border-none font-aeonik ${ | ||
| row.id === currentUserId ? "text-[#DCE85D]" : "text-white" | ||
| }`} | ||
| style={{ fontWeight: 400 }} | ||
| > | ||
| <a | ||
| href={`https://solscan.io/account/${row.id}`} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| style={{ textDecoration: "none", color: "inherit" }} | ||
| className="hover:text-[#7fff00]" | ||
| > | ||
| {`${row.id.slice(0, 5)}...${row.id.slice(-5)}`} | ||
| <style jsx>{` | ||
| a:hover { | ||
| text-decoration: underline; | ||
| } | ||
| `}</style> | ||
| </a> | ||
| </TableCell> | ||
| <TableCell | ||
| align="right" | ||
| className={`text-base border-none font-aeonik ${ | ||
| row.id === currentUserId ? "text-[#DCE85D]" : "text-white" | ||
| }`} | ||
| style={{ fontWeight: 400 }} | ||
| > | ||
| {groupedNumberFormatterDyn.format(Math.round(row.total_activity_deposit_points))} | ||
| </TableCell> | ||
| <TableCell | ||
| align="right" | ||
| className={`text-base border-none font-aeonik ${ | ||
| row.id === currentUserId ? "text-[#DCE85D]" : "text-white" | ||
| }`} | ||
| style={{ fontWeight: 400 }} | ||
| > | ||
| {groupedNumberFormatterDyn.format(Math.round(row.total_activity_borrow_points))} | ||
| </TableCell> | ||
| <TableCell | ||
| align="right" | ||
| className={`text-base border-none font-aeonik ${ | ||
| row.id === currentUserId ? "text-[#DCE85D]" : "text-white" | ||
| }`} | ||
| style={{ fontWeight: 400 }} | ||
| > | ||
| {groupedNumberFormatterDyn.format( | ||
| Math.round(row.total_referral_deposit_points + row.total_referral_borrow_points) | ||
| )} | ||
| </TableCell> | ||
| <TableCell | ||
| align="right" | ||
| className={`text-base border-none font-aeonik ${ | ||
| row.id === currentUserId ? "text-[#DCE85D]" : "text-white" | ||
| }`} | ||
| style={{ fontWeight: 400 }} | ||
| > | ||
| {groupedNumberFormatterDyn.format(Math.round(row.socialPoints ? row.socialPoints : 0))} | ||
| </TableCell> | ||
| <TableCell | ||
| align="right" | ||
| className={`text-base border-none font-aeonik ${ | ||
| row.id === currentUserId ? "text-[#DCE85D]" : "text-white" | ||
| }`} | ||
| style={{ fontWeight: 400 }} | ||
| > | ||
| {groupedNumberFormatterDyn.format( | ||
| Math.round( | ||
| row.total_deposit_points + row.total_borrow_points + (row.socialPoints ? row.socialPoints : 0) | ||
| ) | ||
| )} | ||
| </TableCell> | ||
| </TableRow> | ||
| ))} | ||
| </TableBody> | ||
| </Table> | ||
| </TableContainer> | ||
| ); | ||
| }; |
155 changes: 155 additions & 0 deletions
155
apps/marginfi-v2-ui/src/components/desktop/Points/PointsOverview.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,155 @@ | ||
| import Image from "next/image"; | ||
| import { MarginfiAccountWrapper } from "@mrgnlabs/marginfi-client-v2"; | ||
| import { Card, CardContent, Skeleton, TableCell, TableRow, Typography } from "@mui/material"; | ||
| import React, { FC, useCallback, useMemo, useState } from "react"; | ||
| import { toast } from "react-toastify"; | ||
| import { | ||
| groupedNumberFormatter, | ||
| uiToNative, | ||
| usdFormatter, | ||
| numeralFormatter, | ||
| groupedNumberFormatterDyn, | ||
| } from "@mrgnlabs/mrgn-common"; | ||
| import { MrgnTooltip } from "~/components/common/MrgnTooltip"; | ||
| import { AccountSummary, UserPointsData } from "@mrgnlabs/marginfi-v2-ui-state"; | ||
|
|
||
| interface PointsLeaderBoardProps { | ||
| userPointsData: UserPointsData; | ||
| } | ||
|
|
||
| export const PointsOverview: FC<PointsLeaderBoardProps> = ({ userPointsData }) => { | ||
| return ( | ||
| <> | ||
| <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 w-2/3"> | ||
| <Card className="bg-[#131619] h-full h-24 rounded-xl" elevation={0}> | ||
| <CardContent> | ||
| <Typography color="#868E95" className="font-aeonik font-[300] text-base flex gap-1" gutterBottom> | ||
| Total Points | ||
| <div className="self-center"> | ||
| <MrgnTooltip | ||
| title={ | ||
| <> | ||
| <Typography color="inherit" style={{ fontFamily: "Aeonik Pro" }}> | ||
| Points | ||
| </Typography> | ||
| Points refresh every 24 hours. | ||
| </> | ||
| } | ||
| placement="top" | ||
| > | ||
| <Image src="/info_icon.png" alt="info" height={16} width={16} /> | ||
| </MrgnTooltip> | ||
| </div> | ||
| </Typography> | ||
| <Typography color="#fff" className="font-aeonik font-[500] text-3xl" component="div"> | ||
| {userPointsData.totalPoints > 0 ? ( | ||
| numeralFormatter(userPointsData.totalPoints) | ||
| ) : ( | ||
| <Skeleton variant="rectangular" animation="wave" className="w-1/3 rounded-md top-[4px]" /> | ||
| )} | ||
| </Typography> | ||
| </CardContent> | ||
| </Card> | ||
| <Card className="bg-[#131619] h-full h-24 rounded-xl" elevation={0}> | ||
| <CardContent> | ||
| <Typography color="#868E95" className="font-aeonik font-[300] text-base" gutterBottom> | ||
| Global Rank {/* TODO: fix that with dedicated query */} | ||
| </Typography> | ||
| <Typography color="#fff" className="font-aeonik font-[500] text-3xl" component="div"> | ||
| {userPointsData.userRank && userPointsData.userRank > 0 ? ( | ||
| `#${groupedNumberFormatterDyn.format(userPointsData.userRank)}` | ||
| ) : ( | ||
| <Skeleton variant="rectangular" animation="wave" className="w-1/3 rounded-md top-[4px]" /> | ||
| )} | ||
| </Typography> | ||
| </CardContent> | ||
| </Card> | ||
| </div> | ||
| <div className="grid grid-cols-1 lg:grid-cols-3 gap-5 w-2/3"> | ||
| <Card className="bg-[#131619] h-full h-24 rounded-xl" elevation={0}> | ||
| <CardContent> | ||
| <Typography color="#868E95" className="font-aeonik font-[300] text-base flex gap-1" gutterBottom> | ||
| Lending Points | ||
| <div className="self-center"> | ||
| <MrgnTooltip | ||
| title={ | ||
| <> | ||
| <Typography color="inherit" style={{ fontFamily: "Aeonik Pro" }}> | ||
| Lending | ||
| </Typography> | ||
| Lending earns 1 point per dollar lent per day. | ||
| </> | ||
| } | ||
| placement="top" | ||
| > | ||
| <Image src="/info_icon.png" alt="info" height={16} width={16} /> | ||
| </MrgnTooltip> | ||
| </div> | ||
| </Typography> | ||
| <Typography color="#fff" component="div" className="font-aeonik font-[500] text-2xl"> | ||
| {userPointsData.depositPoints > 0 ? ( | ||
| numeralFormatter(userPointsData.depositPoints) | ||
| ) : ( | ||
| <Skeleton variant="rectangular" animation="wave" className="w-1/3 rounded-md top-[4px]" /> | ||
| )} | ||
| </Typography> | ||
| </CardContent> | ||
| </Card> | ||
| <Card className="bg-[#131619] h-full h-24 rounded-xl" elevation={0}> | ||
| <CardContent> | ||
| <Typography color="#868E95" className="font-aeonik font-[300] text-base flex gap-1" gutterBottom> | ||
| Borrowing Points | ||
| <div className="self-center"> | ||
| <MrgnTooltip | ||
| title={ | ||
| <> | ||
| <Typography color="inherit" style={{ fontFamily: "Aeonik Pro" }}> | ||
| Borrowing | ||
| </Typography> | ||
| Borrowing earns 4 points per dollar borrowed per day. | ||
| </> | ||
| } | ||
| placement="top" | ||
| > | ||
| <Image src="/info_icon.png" alt="info" height={16} width={16} /> | ||
| </MrgnTooltip> | ||
| </div> | ||
| </Typography> | ||
| <Typography color="#fff" className="font-aeonik font-[500] text-2xl" component="div"> | ||
| {userPointsData.borrowPoints > 0 ? ( | ||
| numeralFormatter(userPointsData.borrowPoints) | ||
| ) : ( | ||
| <Skeleton variant="rectangular" animation="wave" className="w-1/3 rounded-md top-[4px]" /> | ||
| )} | ||
| </Typography> | ||
| </CardContent> | ||
| </Card> | ||
| <Card className="bg-[#131619] h-full h-24 rounded-xl" elevation={0}> | ||
| <CardContent> | ||
| <Typography color="#868E95" className="font-aeonik font-[300] text-base flex gap-1" gutterBottom> | ||
| Referral Points | ||
| <div className="self-center"> | ||
| <MrgnTooltip | ||
| title={ | ||
| <> | ||
| <Typography color="inherit" style={{ fontFamily: "Aeonik Pro" }}> | ||
| Earn more with friends | ||
| </Typography> | ||
| Earn 10% of the points any user you refer earns. | ||
| </> | ||
| } | ||
| placement="top" | ||
| > | ||
| <Image src="/info_icon.png" alt="info" height={16} width={16} /> | ||
| </MrgnTooltip> | ||
| </div> | ||
| </Typography> | ||
| <Typography color="#fff" className="font-aeonik font-[500] text-2xl" component="div"> | ||
| {userPointsData.referralPoints > 0 ? numeralFormatter(userPointsData.referralPoints) : "-"} | ||
| </Typography> | ||
| </CardContent> | ||
| </Card> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.