Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(mfi-v2-ui): Mobile portfolio page #230

Closed
wants to merge 3 commits into from
Closed

feat(mfi-v2-ui): Mobile portfolio page #230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
37b1423
feat(mfi-v2-ui): WIP porfolio page
k0beLeenders Sep 10, 2023
b5cd0d4
feat(mfi-v2-ui): Point page restructuring
k0beLeenders Sep 11, 2023
4899b14
feat(mfi-v2-ui): Portfolio page
k0beLeenders Sep 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions apps/marginfi-v2-ui/src/components/desktop/Points/PointsCheckingUser.tsx
View file
Open in desktop
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="max-w-[800px] mx-auto w-full 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 apps/marginfi-v2-ui/src/components/desktop/Points/PointsConnectWallet.tsx
View file
Open in desktop
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="max-w-[800px] mx-auto w-full 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 apps/marginfi-v2-ui/src/components/desktop/Points/PointsLeaderBoard.tsx
View file
Open in desktop
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>
);
};
149 changes: 149 additions & 0 deletions apps/marginfi-v2-ui/src/components/desktop/Points/PointsOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
import React, { FC } from "react";
import Image from "next/image";
import { Card, CardContent, Skeleton, Typography } from "@mui/material";

import { numeralFormatter, groupedNumberFormatterDyn } from "@mrgnlabs/mrgn-common";
import { UserPointsData } from "@mrgnlabs/marginfi-v2-ui-state";

import { MrgnTooltip } from "~/components/common/MrgnTooltip";

interface PointsOverviewProps {
userPointsData: UserPointsData;
}

export const PointsOverview: FC<PointsOverviewProps> = ({ userPointsData }) => {
return (
<>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5 max-w-[800px] mx-auto w-full">
<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 max-w-[800px] mx-auto w-full">
<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>
</>
);
};
Loading