-
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.
Merge pull request #234 from k0beLeenders/error-cleanup
fix(mfi-v2-ui): Porfolio page and HTML formatting & rehydration issues
- Loading branch information
Showing
22 changed files
with
1,378 additions
and
892 deletions.
There are no files selected for viewing
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
329 changes: 169 additions & 160 deletions
329
apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetsList.tsx
Large diffs are not rendered by default.
Oops, something went wrong.
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="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
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="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
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> | ||
| ); | ||
| }; |
Oops, something went wrong.