feat(mfi-v2-ui): reduce only label

apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCard.tsx

@@ -1,8 +1,8 @@
 import React, { FC, useCallback, useMemo, useState } from "react";
 import { WSOL_MINT } from "@mrgnlabs/mrgn-common";
-import { ExtendedBankInfo, ActionType, getCurrentAction } from "@mrgnlabs/marginfi-v2-ui-state";
+import { ExtendedBankInfo, ActiveBankInfo, ActionType, getCurrentAction } from "@mrgnlabs/marginfi-v2-ui-state";
 import { MarginfiAccountWrapper } from "@mrgnlabs/marginfi-client-v2";
-import { useMrgnlendStore } from "~/store";
+import { useMrgnlendStore, useUiStore } from "~/store";
 import { executeLendingAction, closeBalance, MarginfiActionParams } from "~/utils";
 import { useAssetItemData } from "~/hooks/useAssetItemData";
 import { useWalletContext } from "~/hooks/useWalletContext";
@@ -11,19 +11,25 @@ import { AssetCardStats } from "./AssetCardStats";
 import { AssetCardActions } from "./AssetCardActions";
 import { AssetCardPosition } from "./AssetCardPosition";
 import { AssetCardHeader } from "./AssetCardHeader";
+import { LendingModes } from "~/types";
 
 export const AssetCard: FC<{
   bank: ExtendedBankInfo;
+  activeBank?: ActiveBankInfo;
   nativeSolBalance: number;
   isInLendingMode: boolean;
   isConnected: boolean;
   marginfiAccount: MarginfiAccountWrapper | null;
   inputRefs?: React.MutableRefObject<Record<string, HTMLInputElement | null>>;
   showLSTDialog?: (variant: LSTDialogVariants, callback?: () => void) => void;
-}> = ({ bank, nativeSolBalance, isInLendingMode, marginfiAccount, inputRefs, showLSTDialog }) => {
+}> = ({ bank, activeBank, nativeSolBalance, isInLendingMode, marginfiAccount, inputRefs, showLSTDialog }) => {
   const { rateAP, assetWeight, isBankFilled, isBankHigh, bankCap } = useAssetItemData({ bank, isInLendingMode });
   const [mfiClient, fetchMrgnlendState] = useMrgnlendStore((state) => [state.marginfiClient, state.fetchMrgnlendState]);
   const setIsRefreshingStore = useMrgnlendStore((state) => state.setIsRefreshingStore);
+  const [lendingMode, isFilteredUserPositions] = useUiStore((state) => [
+    state.lendingMode,
+    state.isFilteredUserPositions,
+  ]);
   const [hasLSTDialogShown, setHasLSTDialogShown] = useState<LSTDialogVariants[]>([]);
   const { walletContextState } = useWalletContext();
 
@@ -169,7 +175,10 @@ export const AssetCard: FC<{
         isBankHigh={isBankHigh}
         bankCap={bankCap}
       />
-      {bank.isActive && <AssetCardPosition activeBank={bank} />}
+      {activeBank?.position &&
+        (isFilteredUserPositions || activeBank?.position.isLending === (lendingMode === LendingModes.LEND)) && (
+          <AssetCardPosition activeBank={activeBank} />
+        )}
       <AssetCardActions
         bank={bank}
         inputRefs={inputRefs}

apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardPosition.tsx

@@ -1,42 +1,83 @@
-import React, { FC, useState } from "react";
+import React from "react";
 
-import { usdFormatter } from "@mrgnlabs/mrgn-common";
+import { usdFormatter, numeralFormatter } from "@mrgnlabs/mrgn-common";
 import { ActiveBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
 
-import ExpandLessIcon from "@mui/icons-material/ExpandLess";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { useUiStore } from "~/store";
 
-export const AssetCardPosition: FC<{
+import { MrgnTooltip } from "~/components/common";
+
+import { IconAlertTriangle } from "~/components/ui/icons";
+
+import { cn } from "~/utils";
+
+type AssetCardPositionProps = {
   activeBank: ActiveBankInfo;
-}> = ({ activeBank }) => {
-  const [isCollapsed, setIsCollapsed] = useState<boolean>(true);
+};
+
+export const AssetCardPosition = ({ activeBank }: AssetCardPositionProps) => {
+  const [lendingMode, isFilteredUserPositions] = useUiStore((state) => [
+    state.lendingMode,
+    state.isFilteredUserPositions,
+  ]);
+
+  const isUserPositionPoorHealth = React.useMemo(() => {
+    if (!activeBank || !activeBank.position.liquidationPrice) {
+      return false;
+    }
+
+    const alertRange = 0.2;
+
+    if (activeBank.position.isLending) {
+      return (
+        activeBank.info.state.price <
+        activeBank.position.liquidationPrice + activeBank.position.liquidationPrice * alertRange
+      );
+    } else {
+      return (
+        activeBank.info.state.price >
+        activeBank.position.liquidationPrice - activeBank.position.liquidationPrice * alertRange
+      );
+    }
+  }, [activeBank]);
 
   return (
-    <div className="flex flex-col bg-[#23272B] p-[12px] rounded-lg">
-      <div className="flex flex-row justify-between" onClick={() => setIsCollapsed(!isCollapsed)}>
-        <div className="my-auto">Your position details</div>
-        <span className="cursor-pointer">{isCollapsed ? <ExpandMoreIcon /> : <ExpandLessIcon />}</span>
-      </div>
-      {!isCollapsed && (
-        <div className="flex flex-col gap-[8px] pt-[8px]">
-          <div className="flex flex-row justify-between">
-            <div className="text-[#A1A1A1] my-auto text-sm">
-              {(activeBank as ActiveBankInfo).position.isLending ? "Lending" : "Borrowing"}
-            </div>
-            <div className="text-primary text-sm my-auto">
-              {(activeBank as ActiveBankInfo).position.amount.toFixed(activeBank.info.state.mintDecimals) +
-                " " +
-                activeBank.meta.tokenSymbol}
-            </div>
-          </div>
-          <div className="flex flex-row justify-between">
-            <div className="text-[#A1A1A1] text-sm my-auto">USD value</div>
-            <div className="text-sm my-auto">
-              {usdFormatter.format((activeBank as ActiveBankInfo).position.usdValue)}
-            </div>
-          </div>
-        </div>
-      )}
+    <div className={cn("bg-accent p-3.5 rounded-lg text-sm", isUserPositionPoorHealth && "bg-destructive")}>
+      <h3>
+        Your {isFilteredUserPositions ? (activeBank.position.isLending ? "lending " : "borrowing ") : ""} position
+        details
+      </h3>
+      <dl className="grid grid-cols-2 text-accent-foreground mt-2 w-full space-y-1">
+        <dt>{activeBank.position.isLending ? "Lending" : "Borrowing"}</dt>
+        <dd className="text-white font-medium text-right">
+          {activeBank.position.amount < 0.01 && "< "}
+          {numeralFormatter(activeBank.position.amount) + " " + activeBank.meta.tokenSymbol}
+        </dd>
+        <dt>USD Value</dt>
+        <dd className="text-white font-medium text-right">{usdFormatter.format(activeBank.position.usdValue)}</dd>
+        {activeBank.position.liquidationPrice && activeBank.position.liquidationPrice > 0 && (
+          <>
+            <dt
+              className={cn(
+                "mr-1.5 flex items-center gap-1.5",
+                isUserPositionPoorHealth && "text-destructive-foreground"
+              )}
+            >
+              {isUserPositionPoorHealth && (
+                <MrgnTooltip title="Your account is at risk of liquidation" placement="left">
+                  <IconAlertTriangle size={16} />
+                </MrgnTooltip>
+              )}
+              Liquidation price
+            </dt>
+            <dd className="text-white font-medium text-right">
+              {activeBank.position.liquidationPrice > 0.01
+                ? usdFormatter.format(activeBank.position.liquidationPrice)
+                : `$${activeBank.position.liquidationPrice.toExponential(2)}`}
+            </dd>
+          </>
+        )}
+      </dl>
     </div>
   );
 };

apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/MobileAssetsList.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import Image from "next/image";
 
-import { ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
+import { ExtendedBankInfo, ActiveBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
 import { Skeleton, Typography } from "@mui/material";
 
 import { useMrgnlendStore, useUiStore } from "~/store";
@@ -45,6 +45,11 @@ export const MobileAssetsList = () => {
   const [lstDialogVariant, setLSTDialogVariant] = React.useState<LSTDialogVariants | null>(null);
   const [lstDialogCallback, setLSTDialogCallback] = React.useState<(() => void) | null>(null);
 
+  const activeBankInfos = React.useMemo(
+    () => extendedBankInfos.filter((balance) => balance.isActive),
+    [extendedBankInfos]
+  ) as ActiveBankInfo[];
+
   const sortBanks = React.useCallback(
     (banks: ExtendedBankInfo[]) => {
       if (sortOption.field === "APY") {
@@ -101,6 +106,11 @@ export const MobileAssetsList = () => {
                   {globalBanks.map((bank) => {
                     if (poolFilter === "stable" && !STABLECOINS.includes(bank.meta.tokenSymbol)) return null;
                     if (poolFilter === "lst" && !LSTS.includes(bank.meta.tokenSymbol)) return null;
+
+                    const activeBank = activeBankInfos.filter(
+                      (activeBankInfo) => activeBankInfo.meta.tokenSymbol === bank.meta.tokenSymbol
+                    );
+
                     return (
                       <AssetCard
                         key={bank.meta.tokenSymbol}
@@ -110,6 +120,7 @@ export const MobileAssetsList = () => {
                         isConnected={connected}
                         marginfiAccount={selectedAccount}
                         inputRefs={inputRefs}
+                        activeBank={activeBank[0]}
                         showLSTDialog={(variant: LSTDialogVariants, onClose?: () => void) => {
                           setLSTDialogVariant(variant);
                           setIsLSTDialogOpen(true);
@@ -166,6 +177,10 @@ export const MobileAssetsList = () => {
               isolatedBanks.length > 0 ? (
                 <div className="flex flew-row flex-wrap gap-6 justify-center items-center pt-2">
                   {isolatedBanks.map((bank, i) => {
+                    const activeBank = activeBankInfos.filter(
+                      (activeBankInfo) => activeBankInfo.meta.tokenSymbol === bank.meta.tokenSymbol
+                    );
+
                     return (
                       <AssetCard
                         key={bank.meta.tokenSymbol}
@@ -175,6 +190,7 @@ export const MobileAssetsList = () => {
                         isConnected={connected}
                         marginfiAccount={selectedAccount}
                         inputRefs={inputRefs}
+                        activeBank={activeBank[0]}
                       />
                     );
                   })}

apps/marginfi-v2-ui/src/components/ui/select.tsx

@@ -1,14 +1,14 @@
-import * as React from "react"
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
-import * as SelectPrimitive from "@radix-ui/react-select"
+import * as React from "react";
+import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
+import * as SelectPrimitive from "@radix-ui/react-select";
 
-import { cn } from "~/utils/themeUtils"
+import { cn } from "~/utils/themeUtils";
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -27,8 +27,8 @@ const SelectTrigger = React.forwardRef<
       <CaretSortIcon className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -57,20 +57,16 @@ const SelectContent = React.forwardRef<
       </SelectPrimitive.Viewport>
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
-    {...props}
-  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+  <SelectPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", className)} {...props} />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -79,7 +75,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
@@ -91,28 +87,15 @@ const SelectItem = React.forwardRef<
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-}
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator };

apps/marginfi-v2-ui/src/hooks/useIsMobile.ts

@@ -6,7 +6,7 @@ export const useIsMobile = (): boolean => {
 
   useLayoutEffect(() => {
     const updateSize = (): void => {
-      setIsMobile(window.innerWidth < 768);
+      setIsMobile(window.innerWidth < 1024);
     };
     window.addEventListener("resize", debounce(updateSize, 250));
     updateSize();

apps/marginfi-v2-ui/src/styles/globals.css

@@ -27,9 +27,9 @@
     --muted-highlight: 203 15% 15%;
     --muted-foreground: 240 5% 64.9%;
 
-    --accent: 240 4% 16%;
+    --accent: 210 10% 15%;
     --accent-highlight: 240 4% 21%;
-    --accent-foreground: 0 0% 98%;
+    --accent-foreground: 213 5% 50%;
 
     --destructive: #e06d6f1a;
     --destructive-foreground: 359 65% 65%;