Skip to content

Commit

Permalink
feat: yield page finished & portfolio page wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@k0beLeenders
k0beLeenders committed Dec 9, 2024
1 parent 5235d07 commit 3aeeaac
Show file tree
Hide file tree
Showing 12 changed files with 300 additions and 210 deletions.
8 changes: 4 additions & 4 deletions apps/marginfi-v2-trading/src/components/common/Portfolio/PositionCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,17 @@ import { useGroupBanks, useGroupPosition } from "~/hooks/arenaHooks";
import { PositionActionButtons } from "~/components/common/Portfolio";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";

import type { GroupData } from "~/store/tradeStore";
import { ArenaPoolV2Extended } from "~/store/tradeStoreV2";

type PositionCardProps = {
groupData: GroupData;
groupData: ArenaPoolV2Extended;
size?: "sm" | "lg";
};

export const PositionCard = ({ size = "lg", groupData }: PositionCardProps) => {
const isMobile = useIsMobile();
const { borrowBank } = useGroupBanks({ group: groupData });
const { positionSizeUsd, totalUsdValue, leverage } = useGroupPosition({ group: groupData });
// const { borrowBank } = useGroupBanks({ groupData: groupData });
// const { positionSizeUsd, totalUsdValue, leverage } = useGroupPosition({ group: groupData });

const healthColor = React.useMemo(() => {
if (groupData.accountSummary.healthFactor) {
Expand Down
95 changes: 43 additions & 52 deletions apps/marginfi-v2-trading/src/components/common/Yield/YieldCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,59 +18,46 @@ import { useWallet } from "~/components/wallet-v2/hooks/use-wallet.hook";

import { ActionBox, ActionBoxProvider } from "~/components/action-box-v2";
import { Button } from "~/components/ui/button";
import { ArenaPoolV2Extended, GroupStatus } from "~/store/tradeStoreV2";
import { useActionBoxProps } from "~/hooks/useActionBoxProps";

interface YieldCardProps {
group: GroupData;
pool: ArenaPoolV2Extended;
}

export const YieldCard = ({ group }: YieldCardProps) => {
export const YieldCard = ({ pool }: YieldCardProps) => {
const { connection } = useConnection();
const { wallet, connected } = useWallet();
const [fetchTradeState, nativeSolBalance, portfolio] = useTradeStore((state) => [
state.fetchTradeState,
state.nativeSolBalance,
state.portfolio,
]);
const positionInfo = React.useMemo(() => getGroupPositionInfo({ group }), [group]);
const isLeveraged = React.useMemo(() => positionInfo === "LONG" || positionInfo === "SHORT", [positionInfo]);

const collateralBank = group.pool.quoteTokens[0];

const isLPPosition = React.useCallback(
(bank: ArenaBank) => {
if (!portfolio) return false;
return portfolio.lpPositions.some((group) => group.groupPk.equals(bank.info.rawBank.group));
},
[portfolio]
);

return (
<div
key={group.client.group.address.toBase58()}
className="relative bg-background border rounded-xl mb-12 pt-5 pb-2 px-4"
>
<div key={pool.groupPk.toBase58()} className="relative bg-background border rounded-xl mb-12 pt-5 pb-2 px-4">
<Link
href={`/trade/${group.client.group.address.toBase58()}`}
href={`/trade/${pool.groupPk.toBase58()}`}
className="group bg-background border rounded-xl absolute -top-5 left-3.5 px-2 py-1.5 flex items-center gap-2 transition-colors hover:bg-accent"
>
<div className="flex items-center -space-x-2.5">
<Image
src={group.pool.token.meta.tokenLogoUri}
alt={group.pool.token.meta.tokenSymbol}
src={pool.tokenBank.meta.tokenLogoUri}
alt={pool.tokenBank.meta.tokenSymbol}
width={24}
height={24}
className="rounded-full bg-background z-10"
/>
<Image
src={collateralBank.meta.tokenLogoUri}
alt={collateralBank.meta.tokenSymbol}
src={pool.quoteBank.meta.tokenLogoUri}
alt={pool.quoteBank.meta.tokenSymbol}
width={24}
height={24}
className="rounded-full"
/>
</div>
<span>
{group.pool.token.meta.tokenSymbol}/{collateralBank.meta.tokenSymbol}
{pool.tokenBank.meta.tokenSymbol}/{pool.quoteBank.meta.tokenSymbol}
</span>
<div className="flex items-center gap-1 text-mrgn-green">
<span>Trade</span>
Expand All @@ -79,10 +66,8 @@ export const YieldCard = ({ group }: YieldCardProps) => {
</Link>
<YieldItem
className="pt-2 pb-4 border-b items-center"
group={group}
bank={group.pool.token}
isLeveraged={isLeveraged}
isLPPosition={isLPPosition(group.pool.token)}
pool={pool}
bankType="TOKEN"
connected={connected}
connection={connection}
wallet={wallet}
Expand All @@ -91,10 +76,8 @@ export const YieldCard = ({ group }: YieldCardProps) => {
/>
<YieldItem
className="pt-4 pb-2 items-center"
group={group}
bank={collateralBank}
isLeveraged={isLeveraged}
isLPPosition={isLPPosition(collateralBank)}
pool={pool}
bankType="COLLATERAL"
connected={connected}
connection={connection}
wallet={wallet}
Expand All @@ -106,28 +89,36 @@ export const YieldCard = ({ group }: YieldCardProps) => {
};

const YieldItem = ({
group,
bank,
className,
isLeveraged,
isLPPosition,
pool,
bankType,
connected,
className,
connection,
wallet,
nativeSolBalance,
fetchTradeState,
}: {
group: GroupData;
bank: ArenaBank;
className?: string;
isLeveraged?: boolean;
isLPPosition?: boolean;
pool: ArenaPoolV2Extended;
bankType: "COLLATERAL" | "TOKEN";
connected: boolean;
className?: string;
connection: Connection;
wallet: Wallet;
nativeSolBalance: number;
fetchTradeState: (args: { connection: Connection; wallet: Wallet }) => void;
}) => {
const { marginfiClient, wrappedAccount, accountSummary } = useActionBoxProps(pool.groupPk, [
pool.tokenBank,
pool.quoteBank,
]);

const bank = React.useMemo(() => (bankType === "COLLATERAL" ? pool.quoteBank : pool.tokenBank), [bankType, pool]);

const isProvidingLiquidity = React.useMemo(
() => bank.isActive && bank.position.isLending && pool.status === GroupStatus.LP,
[bank, pool]
);

return (
<div className={cn("items-center", className)}>
<div className="flex items-center gap-2">
Expand All @@ -152,7 +143,7 @@ const YieldItem = ({
<span className="text-mrgn-success">{percentFormatter.format(aprToApy(bank.info.state.lendingRate))}</span>
</div>
</div>
{bank.isActive && bank.position.isLending && isLPPosition && (
{bank.isActive && isProvidingLiquidity && (
<div className="text-sm mb-4">
<span className="text-muted-foreground">Supplied</span>{" "}
{usdFormatter.format(bank.position.amount * bank.info.oraclePrice.priceRealtime.price.toNumber())}
Expand All @@ -167,15 +158,15 @@ const YieldItem = ({
<ActionBoxProvider
banks={[bank]}
nativeSolBalance={nativeSolBalance}
marginfiClient={group.client}
selectedAccount={group.selectedAccount}
marginfiClient={marginfiClient}
selectedAccount={wrappedAccount}
connected={connected}
accountSummaryArg={group.accountSummary}
accountSummaryArg={accountSummary}
showActionComplete={false}
hidePoolStats={["type"]}
>
<div className="flex flex-col gap-2 md:flex-row">
{bank.isActive && !isLeveraged && bank.position.isLending && group.selectedAccount && (
{isProvidingLiquidity && (
<>
<ActionBox.Lend
isDialog={true}
Expand All @@ -187,7 +178,7 @@ const YieldItem = ({
showAvailableCollateral: false,
captureEvent: () => {
capture("yield_withdraw_btn_click", {
group: group.client.group.address.toBase58(),
group: pool.groupPk.toBase58(),
bank: bank.meta.tokenSymbol,
});
},
Expand All @@ -204,7 +195,7 @@ const YieldItem = ({
variant="outline"
onClick={() => {
capture("position_add_btn_click", {
group: group.client.group.address.toBase58(),
group: pool.groupPk.toBase58(),
bank: bank.meta.tokenSymbol,
});
}}
Expand All @@ -218,7 +209,7 @@ const YieldItem = ({
</>
)}

{isLeveraged ? (
{pool.status === GroupStatus.LONG || pool.status === GroupStatus.SHORT ? (
<div>
<p className="text-xs text-muted-foreground mb-2">
You cannot provide liquidity with an open trade.{" "}
Expand All @@ -245,7 +236,7 @@ const YieldItem = ({
showAvailableCollateral: false,
captureEvent: () => {
capture("position_add_btn_click", {
group: group.client.group.address.toBase58(),
group: pool.groupPk.toBase58(),
bank: bank.meta.tokenSymbol,
});
},
Expand All @@ -263,7 +254,7 @@ const YieldItem = ({
className="gap-1 min-w-16"
onClick={() => {
capture("position_add_btn_click", {
group: group.client.group.address.toBase58(),
group: pool.groupPk.toBase58(),
bank: bank.meta.tokenSymbol,
});
}}
Expand Down
Loading

0 comments on commit 3aeeaac

Please sign in to comment.