feat(mfi-v2-ui): design touch-ups

apps/marginfi-v2-ui/next.config.js

@@ -110,4 +110,4 @@ config = withSentryConfig(
   }
 );
 
-module.exports = withPWA(config);
+module.exports = process.env.NODE_ENV === 'development' ? config : withPWA(config);

apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetRow/AssetRow.tsx

@@ -5,7 +5,6 @@ import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { useMrgnlendStore, useUserProfileStore } from "~/store";
 import Badge from "@mui/material/Badge";
-
 import {
   WSOL_MINT,
   groupedNumberFormatterDyn,
@@ -19,7 +18,6 @@ import { MarginfiAccountWrapper, PriceBias } from "@mrgnlabs/marginfi-client-v2"
 import { MrgnTooltip } from "~/components/common/MrgnTooltip";
 import { AssetRowInputBox, AssetRowAction } from "~/components/common/AssetList";
 import { useAssetItemData } from "~/hooks/useAssetItemData";
-import { useWalletContext } from "~/hooks/useWalletContext";
 import { closeBalance, borrowOrLend } from "~/utils";
 
 export const EMISSION_MINT_INFO_MAP = new Map<string, { tokenSymbol: string; tokenLogoUri: string }>([
@@ -59,7 +57,6 @@ const AssetRow: FC<{
   showHotkeyBadges,
   badgeContent,
 }) => {
-  const { connected, openWalletSelector } = useWalletContext();
   const [lendZoomLevel, denominationUSD] = useUserProfileStore((state) => [state.lendZoomLevel, state.denominationUSD]);
   const setIsRefreshingStore = useMrgnlendStore((state) => state.setIsRefreshingStore);
   const [mfiClient, fetchMrgnlendState] = useMrgnlendStore((state) => [state.marginfiClient, state.fetchMrgnlendState]);
@@ -76,18 +73,10 @@ const AssetRow: FC<{
 
   const [borrowOrLendAmount, setBorrowOrLendAmount] = useState(0);
 
-  const isDust = useMemo(
-    () => bank.isActive && uiToNative(bank.position.amount, bank.info.state.mintDecimals).isZero(),
-    [bank]
-  );
-  const currentAction: ActionType | "Connect" = useMemo(
-    () => (connected ? getCurrentAction(isInLendingMode, bank) : "Connect"),
-    [connected, isInLendingMode, bank]
-  );
+  const currentAction: ActionType = useMemo(() => getCurrentAction(isInLendingMode, bank), [isInLendingMode, bank]);
+
   const maxAmount = useMemo(() => {
     switch (currentAction) {
-      case "Connect":
-        return 0;
       case ActionType.Deposit:
         return bank.userInfo.maxDeposit;
       case ActionType.Withdraw:
@@ -99,6 +88,20 @@ const AssetRow: FC<{
     }
   }, [bank, currentAction]);
 
+  const isDust = useMemo(
+    () => bank.isActive && uiToNative(bank.position.amount, bank.info.state.mintDecimals).isZero(),
+    [bank]
+  );
+
+  const isDisabled = useMemo(
+    () =>
+      (isDust &&
+        uiToNative(bank.userInfo.tokenAccount.balance, bank.info.state.mintDecimals).isZero() &&
+        currentAction == ActionType.Borrow) ||
+      (!isDust && maxAmount === 0),
+    [currentAction, bank, isDust, maxAmount]
+  );
+
   // Reset b/l amounts on toggle
   useEffect(() => {
     setBorrowOrLendAmount(0);
@@ -400,7 +403,7 @@ const AssetRow: FC<{
             maxValue={maxAmount}
             maxDecimals={bank.info.state.mintDecimals}
             inputRefs={inputRefs}
-            disabled={isDust || currentAction === "Connect" || maxAmount === 0}
+            disabled={isDust || maxAmount === 0}
             onEnter={handleBorrowOrLend}
           />
         </Badge>
@@ -414,22 +417,12 @@ const AssetRow: FC<{
           <div className="h-full w-full flex justify-end items-center xl:ml-0 pl-2 sm:px-2">
             <AssetRowAction
               bgColor={
-                currentAction === "Connect" ||
-                currentAction === ActionType.Deposit ||
-                currentAction === ActionType.Borrow
+                currentAction === ActionType.Deposit || currentAction === ActionType.Borrow
                   ? "rgb(227, 227, 227)"
                   : "rgba(0,0,0,0)"
               }
-              onClick={
-                currentAction === "Connect" ? openWalletSelector : isDust ? handleCloseBalance : handleBorrowOrLend
-              }
-              disabled={
-                currentAction !== "Connect" &&
-                ((isDust &&
-                  uiToNative(bank.userInfo.tokenAccount.balance, bank.info.state.mintDecimals).isZero() &&
-                  currentAction == ActionType.Borrow) ||
-                  (!isDust && maxAmount === 0))
-              }
+              onClick={isDust ? handleCloseBalance : handleBorrowOrLend}
+              disabled={isDisabled}
             >
               {isDust ? "Close" : currentAction}
             </AssetRowAction>

apps/marginfi-v2-ui/src/components/desktop/UserPositions/UserPositionRow/UserPositionRow.tsx

@@ -21,14 +21,23 @@ interface UserPositionRowProps {
 const UserPositionRow: FC<UserPositionRowProps> = ({ activeBankInfo, marginfiAccount, reloadPositions }) => {
   const [withdrawOrRepayAmount, setWithdrawOrRepayAmount] = useState(0);
 
+  const maxAmount = useMemo(
+    () => (activeBankInfo.position.isLending ? activeBankInfo.userInfo.maxWithdraw : activeBankInfo.userInfo.maxRepay),
+    [activeBankInfo]
+  );
+
   const isDust = useMemo(
     () => uiToNative(activeBankInfo.position.amount, activeBankInfo.info.state.mintDecimals).isZero(),
     [activeBankInfo]
   );
 
-  const maxAmount = useMemo(
-    () => (activeBankInfo.position.isLending ? activeBankInfo.userInfo.maxWithdraw : activeBankInfo.userInfo.maxRepay),
-    [activeBankInfo]
+  const isDisabled = useMemo(
+    () =>
+      (isDust &&
+        uiToNative(activeBankInfo.userInfo.tokenAccount.balance, activeBankInfo.info.state.mintDecimals).isZero() &&
+        !activeBankInfo.position.isLending) ||
+      (!isDust && maxAmount === 0),
+    [isDust, activeBankInfo, maxAmount]
   );
 
   const closeBalance = useCallback(async () => {
@@ -182,18 +191,7 @@ const UserPositionRow: FC<UserPositionRowProps> = ({ activeBankInfo, marginfiAcc
 
       <TableCell className="text-white font-aeonik p-0 border-none" align="right">
         <div className="h-full w-full flex justify-end items-center pl-2 sm:px-2">
-          <UserPositionRowAction
-            onClick={isDust ? closeBalance : withdrawOrRepay}
-            disabled={
-              (isDust &&
-                uiToNative(
-                  activeBankInfo.userInfo.tokenAccount.balance,
-                  activeBankInfo.info.state.mintDecimals
-                ).isZero() &&
-                !activeBankInfo.position.isLending) ||
-              (!isDust && maxAmount === 0)
-            }
-          >
+          <UserPositionRowAction onClick={isDust ? closeBalance : withdrawOrRepay} disabled={isDisabled}>
             {isDust ? "Close" : activeBankInfo.position.isLending ? "Withdraw" : "Repay"}
           </UserPositionRowAction>
         </div>

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

@@ -1,17 +1,12 @@
 import React, { FC, useCallback, useMemo } from "react";
-
 import { WSOL_MINT } from "@mrgnlabs/mrgn-common";
 import { ExtendedBankInfo, ActionType, getCurrentAction } from "@mrgnlabs/marginfi-v2-ui-state";
 import { MarginfiAccountWrapper } from "@mrgnlabs/marginfi-client-v2";
-
 import { useMrgnlendStore } from "~/store";
 import { borrowOrLend, closeBalance } from "~/utils";
-import { useWalletContext } from "~/hooks/useWalletContext";
 import { useAssetItemData } from "~/hooks/useAssetItemData";
-
 import { AssetCardStats } from "./AssetCardStats";
 import { AssetCardActions } from "./AssetCardActions";
-
 import { AssetCardPosition } from "./AssetCardPosition";
 import { AssetCardHeader } from "./AssetCardHeader";
 
@@ -26,7 +21,7 @@ export const AssetCard: FC<{
   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 { connected } = useWalletContext();
+
   const totalDepositsOrBorrows = useMemo(
     () =>
       isInLendingMode

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

@@ -1,21 +1,17 @@
 import React, { FC, useMemo, useState } from "react";
-
 import { ExtendedBankInfo, ActionType } from "@mrgnlabs/marginfi-v2-ui-state";
 import { uiToNative } from "@mrgnlabs/mrgn-common";
-
 import { AssetRowAction, AssetRowInputBox } from "~/components/common/AssetList";
-import { useWalletContext } from "~/hooks/useWalletContext";
 
 export const AssetCardActions: FC<{
   bank: ExtendedBankInfo;
   isBankFilled: boolean;
   isInLendingMode: boolean;
-  currentAction: ActionType | "Connect";
+  currentAction: ActionType;
   inputRefs?: React.MutableRefObject<Record<string, HTMLInputElement | null>>;
   onCloseBalance: () => void;
   onBorrowOrLend: (amount: number) => void;
-}> = ({ bank, inputRefs, isBankFilled, currentAction, onCloseBalance, onBorrowOrLend }) => {
-  const { openWalletSelector } = useWalletContext();
+}> = ({ bank, inputRefs, currentAction, onCloseBalance, onBorrowOrLend }) => {
   const [borrowOrLendAmount, setBorrowOrLendAmount] = useState<number>(0);
 
   const maxAmount = useMemo(() => {
@@ -38,9 +34,10 @@ export const AssetCardActions: FC<{
 
   const isDisabled = useMemo(
     () =>
-      currentAction !== "Connect" &&
-      ((isDust && uiToNative(bank.userInfo.tokenAccount.balance, bank.info.state.mintDecimals).isZero()) ||
-        maxAmount === 0),
+      (isDust &&
+        uiToNative(bank.userInfo.tokenAccount.balance, bank.info.state.mintDecimals).isZero() &&
+        currentAction == ActionType.Borrow) ||
+      (!isDust && maxAmount === 0),
     [currentAction, bank, isDust, maxAmount]
   );
 
@@ -54,22 +51,16 @@ export const AssetCardActions: FC<{
           maxValue={maxAmount}
           maxDecimals={bank.info.state.mintDecimals}
           inputRefs={inputRefs}
-          disabled={isDust || currentAction === "Connect" || maxAmount === 0}
+          disabled={isDust || maxAmount === 0}
           onEnter={() => onBorrowOrLend(borrowOrLendAmount)}
         />
         <AssetRowAction
           bgColor={
-            currentAction === "Connect" || currentAction === ActionType.Deposit || currentAction === ActionType.Borrow
+            currentAction === ActionType.Deposit || currentAction === ActionType.Borrow
               ? "rgb(227, 227, 227)"
               : "rgba(0,0,0,0)"
           }
-          onClick={() =>
-            currentAction === "Connect"
-              ? openWalletSelector()
-              : isDust
-              ? onCloseBalance()
-              : onBorrowOrLend(borrowOrLendAmount)
-          }
+          onClick={() => (isDust ? onCloseBalance() : onBorrowOrLend(borrowOrLendAmount))}
           disabled={isDisabled}
         >
           {isDust ? "Close" : currentAction}

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

@@ -1,4 +1,4 @@
-import React, { FC, useMemo, useRef, useState } from "react";
+import React, { FC, useCallback, useMemo, useRef, useState } from "react";
 import Image from "next/image";
 import { ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
 import { FormControl, MenuItem, Select, SelectChangeEvent, Skeleton, Typography } from "@mui/material";
@@ -11,7 +11,7 @@ import { SORT_OPTIONS_MAP, SortAssetOption, SortType, sortApRate, sortTvl } from
 
 export const MobileAssetsList: FC = () => {
   const [isFiltered, setIsFiltered] = useState(false);
-  const [sortOption, setSortOption] = useState<SortAssetOption>();
+  const [sortOption, setSortOption] = useState<SortAssetOption>(SORT_OPTIONS_MAP.TVL_DESC);
   const togglePositions = () => setIsFiltered((previousState) => !previousState);
 
   const { connected } = useWalletContext();
@@ -24,15 +24,18 @@ export const MobileAssetsList: FC = () => {
   const inputRefs = useRef<Record<string, HTMLInputElement | null>>({});
   const [isInLendingMode, setIsInLendingMode] = useState(true);
 
-  const sortBanks = (banks: ExtendedBankInfo[]) => {
-    if (sortOption?.field === "APY") {
-      return sortApRate(banks, isInLendingMode, sortOption.direction);
-    } else if (sortOption?.field === "TVL") {
-      return sortTvl(banks, sortOption.direction);
-    } else {
-      return banks;
-    }
-  };
+  const sortBanks = useCallback(
+    (banks: ExtendedBankInfo[]) => {
+      if (sortOption.field === "APY") {
+        return sortApRate(banks, isInLendingMode, sortOption.direction);
+      } else if (sortOption.field === "TVL") {
+        return sortTvl(banks, sortOption.direction);
+      } else {
+        return banks;
+      }
+    },
+    [isInLendingMode, sortOption]
+  );
 
   const globalBanks = useMemo(() => {
     const filteredBanks =
@@ -44,7 +47,7 @@ export const MobileAssetsList: FC = () => {
     } else {
       return filteredBanks;
     }
-  }, [sortedBanks, isFiltered, sortOption]);
+  }, [sortedBanks, sortOption, isFiltered, sortBanks]);
 
   const isolatedBanks = useMemo(() => {
     const filteredBanks =
@@ -55,7 +58,7 @@ export const MobileAssetsList: FC = () => {
     } else {
       return filteredBanks;
     }
-  }, [sortedBanks, isFiltered, sortOption]);
+  }, [sortedBanks, sortOption, isFiltered, sortBanks]);
 
   const handleSortChange = (event: SelectChangeEvent) => {
     setSortOption(SORT_OPTIONS_MAP[event.target.value as SortType]);
@@ -85,7 +88,7 @@ export const MobileAssetsList: FC = () => {
         <div>
           <FormControl sx={{ m: 1, width: "102px", height: "36px", color: "white", margin: 0 }}>
             <Select
-              value={sortOption?.value ?? ""}
+              value={sortOption.value}
               onChange={handleSortChange}
               inputProps={{ "aria-label": "Without label" }}
               disableUnderline
@@ -105,29 +108,31 @@ export const MobileAssetsList: FC = () => {
                 fontSize: "16px",
                 fontWeight: 400,
                 marginRight: "4px",
-                padding: "8px 16px",
+                padding: "8px 12px",
                 borderWidth: 0,
                 backgroundColor: "#22282c",
                 borderRadius: "6px",
                 "& .MuiSvgIcon-root": {
                   color: "white",
-                  marginRight: "6px",
                 },
               }}
             >
-              <MenuItem value="" sx={{ color: "#A1A1A1", backgroundColor: "#22282c" }}>
-                <em>None</em>
-              </MenuItem>
               {Object.values(SORT_OPTIONS_MAP).map((option) => (
                 <MenuItem
                   key={option.value}
                   sx={{
                     color: "white",
                     backgroundColor: "#22282c",
+                    display: "flex",
+                    justifyContent: "space-around",
+                    alignItems: "center",
+                    width: "100%",
+                    paddingRight: "12px",
                   }}
                   value={option.value}
                 >
                   {isInLendingMode || !option.borrowLabel ? option.label : option.borrowLabel}
+                  <option.Icon className="w-[18px] h-[18px]" />
                 </MenuItem>
               ))}
             </Select>
@@ -141,7 +146,7 @@ export const MobileAssetsList: FC = () => {
         {isStoreInitialized && globalBanks ? (
           globalBanks.length > 0 ? (
             <div className="flex flew-row flex-wrap gap-6 justify-center items-center pt-2">
-              {globalBanks.map((bank, i) => (
+              {globalBanks.map((bank) => (
                 <AssetCard
                   key={bank.meta.tokenSymbol}
                   nativeSolBalance={nativeSolBalance}