Skip to content

Commit

Permalink
feat(mfi-v2-ui): mrgnlend mobile view
Browse files Browse the repository at this point in the history
  • Loading branch information
k0beLeenders committed Sep 8, 2023
1 parent e681766 commit 4b9f859
Show file tree
Hide file tree
Showing 21 changed files with 702 additions and 403 deletions.
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { FC } from "react";
import { Typography, Skeleton } from "@mui/material";
import { numeralFormatter } from "@mrgnlabs/mrgn-common";
import Image from "next/image";
import Link from "next/link";

import { MrgnTooltip } from "~/components/desktop/Tooltip";
import { numeralFormatter } from "@mrgnlabs/mrgn-common";

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

import styles from "./style.module.css";

Expand Down
430 changes: 218 additions & 212 deletions apps/marginfi-v2-ui/src/components/common/AccountSummary/UserStats.tsx

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Button, ButtonProps } from "@mui/material";
import { FC, ReactNode } from "react";
import { Button, ButtonProps } from "@mui/material";

interface AssetRowActionProps extends ButtonProps {
children?: ReactNode;
Expand Down
2 changes: 2 additions & 0 deletions apps/marginfi-v2-ui/src/components/common/AssetList/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
export * from "./BorrowLendToggle";
export * from "./AssetRowAction";
export * from "./AssetRowInputBox";
15 changes: 0 additions & 15 deletions apps/marginfi-v2-ui/src/components/common/HtmlTooltip.tsx

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React, { FC, useCallback, useEffect, useMemo, useState } from "react";
import Image from "next/image";
import { TableCell, TableRow } from "@mui/material";
import { styled } from "@mui/material/styles";
import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
import Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography";
import { useMrgnlendStore, useUserProfileStore } from "~/store";
import Badge from "@mui/material/Badge";
Expand All @@ -21,10 +20,8 @@ import { MarginfiAccountWrapper, PriceBias } from "@mrgnlabs/marginfi-client-v2"
import { borrowOrLend, closeBalance } from "~/utils";
import { useWalletContext } from "~/hooks/useWalletContext";
import { useAssetItemData } from "~/hooks/useAssetItemData";
import { HtmlTooltip } from "~/components/common/HtmlTooltip";

import { AssetRowInputBox } from "./AssetRowInputBox";
import { AssetRowAction } from "./AssetRowAction";
import { MrgnTooltip } from "~/components/common/MrgnTooltip";
import { AssetRowInputBox, AssetRowAction } from "~/components/common/AssetList";

const AssetRow: FC<{
bank: ExtendedBankInfo;
Expand Down Expand Up @@ -156,7 +153,7 @@ const AssetRow: FC<{
align="right"
style={{ fontWeight: 300 }}
>
<HtmlTooltip
<MrgnTooltip
title={
<React.Fragment>
<Typography color="inherit" style={{ fontFamily: "Aeonik Pro" }}>
Expand Down Expand Up @@ -191,7 +188,7 @@ const AssetRow: FC<{
: usdFormatter.format(bank.info.state.price)
: `$${bank.info.state.price.toExponential(2)}`}
</Badge>
</HtmlTooltip>
</MrgnTooltip>
</TableCell>

<TableCell
Expand All @@ -204,7 +201,7 @@ const AssetRow: FC<{
<div className="h-full w-full flex justify-end items-center gap-3">
{bank.meta.tokenSymbol === "UXD" && isInLendingMode && (
<div className="w-1/2 flex justify-center sm:justify-end">
<HtmlTooltip
<MrgnTooltip
title={
<React.Fragment>
<Typography color="inherit" style={{ fontFamily: "Aeonik Pro" }}>
Expand All @@ -222,7 +219,7 @@ const AssetRow: FC<{
placement="left"
>
<Image src="/uxp-icon-white.png" alt="info" height={16} width={16} className="pulse" />
</HtmlTooltip>
</MrgnTooltip>
</div>
)}
<div
Expand All @@ -249,7 +246,7 @@ const AssetRow: FC<{
align="right"
style={{ fontWeight: 300 }}
>
<HtmlTooltip
<MrgnTooltip
title={
<React.Fragment>
<Typography color="inherit" style={{ fontFamily: "Aeonik Pro" }}>
Expand Down Expand Up @@ -304,7 +301,7 @@ const AssetRow: FC<{
)
)}
</Badge>
</HtmlTooltip>
</MrgnTooltip>
</TableCell>

{/*******************************/}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,14 @@ import React, { FC, useEffect, useRef, useState } from "react";
import Image from "next/image";
import { useHotkeys } from "react-hotkeys-hook";
import { Card, Table, TableHead, TableBody, TableContainer, TableCell } from "@mui/material";
import { styled } from "@mui/material/styles";
import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography";

import { useMrgnlendStore, useUserProfileStore } from "~/store";
import { useWalletContext } from "~/hooks/useWalletContext";
import { BorrowLendToggle } from "~/components/common/AssetList/BorrowLendToggle";

import { LoadingAsset, AssetRow } from "./AssetRow";
import { HtmlTooltip } from "~/components/common/HtmlTooltip";
import { MrgnTooltip } from "~/components/common/MrgnTooltip";

const AssetsList: FC = () => {
// const { selectedAccount, nativeSolBalance } = useStore();
Expand Down Expand Up @@ -124,19 +122,21 @@ const AssetsList: FC = () => {
>
<div className="h-full w-full flex justify-end items-center gap-2">
Price
<HtmlTooltip
<MrgnTooltip
title={
<React.Fragment>
<Typography color="inherit" style={{ fontFamily: "Aeonik Pro" }}>
Realtime prices
</Typography>
Powered by Pyth and Switchboard.
<span style={{ fontFamily: "Aeonik Pro", fontWeight: 400 }}>
Powered by Pyth and Switchboard.
</span>
</React.Fragment>
}
placement="top"
>
<Image src="/info_icon.png" alt="info" height={16} width={16} />
</HtmlTooltip>
</MrgnTooltip>
</div>
</TableCell>
<TableCell
Expand All @@ -146,7 +146,7 @@ const AssetsList: FC = () => {
>
<div className="h-full w-full flex justify-end items-center gap-2">
{isInLendingMode ? "APY" : "APR"}
<HtmlTooltip
<MrgnTooltip
title={
<React.Fragment>
<Typography color="inherit" style={{ fontFamily: "Aeonik Pro" }}>
Expand All @@ -162,7 +162,7 @@ const AssetsList: FC = () => {
placement="top"
>
<Image src="/info_icon.png" alt="info" height={16} width={16} />
</HtmlTooltip>
</MrgnTooltip>
</div>
</TableCell>
<TableCell
Expand All @@ -172,21 +172,23 @@ const AssetsList: FC = () => {
>
<div className="h-full w-full flex justify-end items-center gap-2">
{isInLendingMode ? "Weight" : "LTV"}
<HtmlTooltip
<MrgnTooltip
title={
<React.Fragment>
<Typography color="inherit" style={{ fontFamily: "Aeonik Pro" }}>
{isInLendingMode ? "Weight" : "LTV"}
</Typography>
{isInLendingMode
? "How much your assets count for collateral, relative to their USD value. The higher the weight, the more collateral you can borrow against it."
: "How much you can borrow against your free collateral. The higher the LTV, the more you can borrow against your free collateral."}
<span style={{ fontFamily: "Aeonik Pro", fontWeight: 400 }}>
{isInLendingMode
? "How much your assets count for collateral, relative to their USD value. The higher the weight, the more collateral you can borrow against it."
: "How much you can borrow against your free collateral. The higher the LTV, the more you can borrow against your free collateral."}
</span>
</React.Fragment>
}
placement="top"
>
<Image src="/info_icon.png" alt="info" height={16} width={16} />
</HtmlTooltip>
</MrgnTooltip>
</div>
</TableCell>
<TableCell
Expand All @@ -196,21 +198,23 @@ const AssetsList: FC = () => {
>
<div className="h-full w-full flex justify-end items-center gap-2">
{isInLendingMode ? "Deposits" : "Available"}
<HtmlTooltip
<MrgnTooltip
title={
<React.Fragment>
<Typography color="inherit" style={{ fontFamily: "Aeonik Pro" }}>
{isInLendingMode ? "Total deposits" : "Total available"}
</Typography>
{isInLendingMode
? "Total marginfi deposits for each asset. Everything is denominated in native tokens."
: "The amount of tokens available to borrow for each asset. Calculated as the minimum of the asset's borrow limit and available liquidity that has not yet been borrowed."}
<span style={{ fontFamily: "Aeonik Pro", fontWeight: 400 }}>
{isInLendingMode
? "Total marginfi deposits for each asset. Everything is denominated in native tokens."
: "The amount of tokens available to borrow for each asset. Calculated as the minimum of the asset's borrow limit and available liquidity that has not yet been borrowed."}
</span>
</React.Fragment>
}
placement="top"
>
<Image src="/info_icon.png" alt="info" height={16} width={16} />
</HtmlTooltip>
</MrgnTooltip>
</div>
</TableCell>

Expand All @@ -226,7 +230,7 @@ const AssetsList: FC = () => {
>
<div className="h-full w-full flex justify-end items-center gap-2">
Global limit
<HtmlTooltip
<MrgnTooltip
title={
<React.Fragment>
<Typography color="inherit" style={{ fontFamily: "Aeonik Pro" }}>
Expand All @@ -239,7 +243,7 @@ const AssetsList: FC = () => {
placement="top"
>
<Image src="/info_icon.png" alt="info" height={16} width={16} />
</HtmlTooltip>
</MrgnTooltip>
</div>
</TableCell>
)}
Expand All @@ -252,7 +256,7 @@ const AssetsList: FC = () => {
>
<div className="h-full w-full flex justify-end items-center gap-2">
Utilization
<HtmlTooltip
<MrgnTooltip
title={
<React.Fragment>
<Typography color="inherit" style={{ fontFamily: "Aeonik Pro" }}>
Expand All @@ -265,7 +269,7 @@ const AssetsList: FC = () => {
placement="top"
>
<Image src="/info_icon.png" alt="info" height={16} width={16} />
</HtmlTooltip>
</MrgnTooltip>
</div>
</TableCell>
)}
Expand Down Expand Up @@ -315,7 +319,7 @@ const AssetsList: FC = () => {
<span className="gap-1 flex">
Isolated <span className="hidden lg:block">pools</span>
</span>
<HtmlTooltip
<MrgnTooltip
title={
<React.Fragment>
<Typography color="inherit" style={{ fontFamily: "Aeonik Pro" }}>
Expand All @@ -329,7 +333,7 @@ const AssetsList: FC = () => {
placement="top"
>
<Image src="/info_icon.png" alt="info" height={16} width={16} />
</HtmlTooltip>
</MrgnTooltip>
</div>
<TableBody>
{sortedBanks
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { FC } from "react";
import { useMrgnlendStore } from "~/store";
import dynamic from "next/dynamic";

import { useMrgnlendStore } from "~/store";
import { useWalletContext } from "~/hooks/useWalletContext";
import { UserStats } from "~/components/common/AccountSummary";

Expand All @@ -19,7 +20,7 @@ const AccountSummary: FC = () => {

return (
<div className="flex flex-col lg:flex-row w-full justify-between items-center">
<div className="lg:block w-full h-[118px]">
<div className="font-[500] lg:block w-full h-[118px]">
<div className="h-full rounded-xl p-[10px]">
<span className="w-full flex justify-start text-xl">Global stats</span>
<GlobalStats
Expand All @@ -33,10 +34,13 @@ const AccountSummary: FC = () => {

<div className="w-full">
{connected && (
<UserStats
accountSummary={isStoreInitialized && selectedAccount ? accountSummary : null}
healthFactor={accountSummary.healthFactor}
/>
<div className="font-[500] h-full rounded-xl p-[10px]">
<span className="w-full h-full flex justify-start text-xl text-white">Your account</span>
<UserStats
accountSummary={isStoreInitialized && selectedAccount ? accountSummary : null}
healthFactor={accountSummary.healthFactor}
/>
</div>
)}
</div>
</div>
Expand Down
Loading

0 comments on commit 4b9f859

Please sign in to comment.