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): new portfolio comp #401

Merged
merged 1 commit into from
Dec 4, 2023
Merged

feat(mfi-v2-ui): new portfolio comp #401

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
41 changes: 36 additions & 5 deletions apps/marginfi-v2-ui/src/components/common/Portfolio/AssetCard/AssetCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { IconAlertTriangle } from "~/components/ui/icons";
import { Button } from "~/components/ui/button";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "~/components/ui/accordion";
import { useAssetItemData } from "~/hooks/useAssetItemData";
import { Skeleton } from "~/components/ui/skeleton";

interface props {
bank: ActiveBankInfo;
Expand All @@ -16,6 +17,8 @@ interface props {
export const AssetCard: FC<props> = ({ bank, isInLendingMode }) => {
const { rateAP, assetWeight, isBankFilled, isBankHigh, bankCap } = useAssetItemData({ bank, isInLendingMode });

const isIsolated = React.useMemo(() => bank.info.state.isIsolated, [bank]);

const isUserPositionPoorHealth = React.useMemo(() => {
if (!bank || !bank?.position?.liquidationPrice) {
return false;
Expand All @@ -33,7 +36,7 @@ export const AssetCard: FC<props> = ({ bank, isInLendingMode }) => {
return (
<Accordion type="single" collapsible className="bg-background-gray rounded-xl px-3">
<AccordionItem value="key-1">
<AccordionTrigger>
<AccordionTrigger className="hover:no-underline">
<div className="flex justify-between items-center w-full gap-2">
<div className="flex text-left gap-3">
<div className="flex items-center">
Expand All @@ -49,7 +52,9 @@ export const AssetCard: FC<props> = ({ bank, isInLendingMode }) => {
</div>
<dl>
<dt className="font-medium text-lg">{bank.meta.tokenSymbol}</dt>
<dd className="text-[#A1A1A1] text-sm">{rateAP.concat(...[" ", isInLendingMode ? "APY" : "APR"])}</dd>
<dd className={`${isInLendingMode ? "text-[#75BA80]" : "text-[#CF6F6F]"} text-sm`}>
{rateAP.concat(...[" ", isInLendingMode ? "APY" : "APR"])}
</dd>
</dl>
</div>
<div className="font-medium text-lg mr-2">
Expand All @@ -65,6 +70,13 @@ export const AssetCard: FC<props> = ({ bank, isInLendingMode }) => {
<span>Liquidation risk</span>
</div>
)}

{isIsolated && (
<div className="flex w-fit gap-2 text-[#686E75] items-center border border-[#686E75] rounded-3xl px-4 py-0.5">
<span>Isolated pool</span>
</div>
)}

<div className="bg-background p-3 rounded-xl">
<dl className="flex justify-between">
<dt className="text-base font-normal text-muted-foreground">USD value</dt>
Expand All @@ -91,12 +103,31 @@ export const AssetCard: FC<props> = ({ bank, isInLendingMode }) => {
</dd>
</dl>
</div>
<div>
{/* <Button variant="outline">Withdraw </Button>
<Button variant="default">Supply more</Button> */}
<div className="flex w-full gap-3">
<Button className="flex-1 h-12" variant="outline">
Withdraw
</Button>
<Button className="flex-1 h-12" variant="default">
Supply more
</Button>
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
);
};

export const AssetCardSkeleton = () => {
return (
<div className="flex justify-between items-center w-full p-3 gap-2">
<div className="flex items-center space-x-4">
<Skeleton className="h-12 w-12 rounded-full" />
<div className="space-y-2">
<Skeleton className="h-4 w-[50px]" />
<Skeleton className="h-4 w-[65px]" />
</div>
</div>
<Skeleton className="h-6 w-[80px] " />
</div>
);
};
10 changes: 4 additions & 6 deletions apps/marginfi-v2-ui/src/components/common/Portfolio/Portfolio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { ActiveBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";

import { IconInfoCircle } from "~/components/ui/icons";
import { UserStats } from "./UserStats";
import { AssetCard } from "./AssetCard";
import { AssetCard, AssetCardSkeleton } from "./AssetCard";

export const Portfolio = () => {
const [isStoreInitialized, sortedBanks, accountSummary] = useMrgnlendStore((state) => [
Expand Down Expand Up @@ -76,7 +76,7 @@ export const Portfolio = () => {

const healthColor = React.useMemo(() => {
if (accountSummary.healthFactor) {
let color;
let color: string;

if (accountSummary.healthFactor >= 0.5) {
color = "#75BA80"; // green color " : "#",
Expand Down Expand Up @@ -138,8 +138,7 @@ export const Portfolio = () => {
</div>
)
) : (
<></>
// <Skeleton sx={{ bgcolor: "grey.900" }} variant="rounded" width={390} height={215} />
<AssetCardSkeleton />
)}
</div>
<div className="flex flex-col flex-1 gap-4">
Expand All @@ -160,8 +159,7 @@ export const Portfolio = () => {
</div>
)
) : (
<></>
// <Skeleton sx={{ bgcolor: "grey.900" }} variant="rounded" width={390} height={215} />
<AssetCardSkeleton />
)}
</div>
</div>
Expand Down
7 changes: 7 additions & 0 deletions apps/marginfi-v2-ui/src/components/ui/skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { cn } from "~/utils/themeUtils";

function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
return <div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />;
}

export { Skeleton };