)}
{poolFilter !== "stable" && poolFilter !== "lst" && (
<>
-
+
Isolated pools
@@ -280,9 +286,8 @@ const AssetsList = () => {
- {isolatedBanks
- .filter((b) => b.info.state.isIsolated)
- .map((bank) => {
+ {isolatedBanks.length ? (
+ isolatedBanks.map((bank) => {
const activeBank = activeBankInfos.filter(
(activeBankInfo) => activeBankInfo.meta.tokenSymbol === bank.meta.tokenSymbol
);
@@ -308,7 +313,14 @@ const AssetsList = () => {
bankMetadata={bank.meta}
/>
);
- })}
+ })
+ ) : (
+
+
+ No isolated banks found.
+
+
+ )}
diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCard.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCard.tsx
index cb121670f7..4bc5ea7fe0 100644
--- a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCard.tsx
+++ b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCard.tsx
@@ -1,37 +1,29 @@
-import React, { FC, useCallback, useMemo, useState } from "react";
+import React, { FC, useMemo } from "react";
import { WSOL_MINT } from "@mrgnlabs/mrgn-common";
import { ExtendedBankInfo, ActiveBankInfo, ActionType, getCurrentAction } from "@mrgnlabs/marginfi-v2-ui-state";
-import { MarginfiAccountWrapper } from "@mrgnlabs/marginfi-client-v2";
-import { useMrgnlendStore, useUiStore } from "~/store";
-import { executeLendingAction, closeBalance, MarginfiActionParams } from "~/utils";
+
+import { useUiStore } from "~/store";
+import { LendingModes } from "~/types";
+
import { useAssetItemData } from "~/hooks/useAssetItemData";
-import { useWalletContext } from "~/hooks/useWalletContext";
import { LSTDialogVariants } from "~/components/common/AssetList";
+
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
>;
- showLSTDialog?: (variant: LSTDialogVariants, callback?: () => void) => void;
-}> = ({ bank, activeBank, nativeSolBalance, isInLendingMode, marginfiAccount, inputRefs, showLSTDialog }) => {
+}> = ({ bank, activeBank, nativeSolBalance, isInLendingMode }) => {
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([]);
- const { walletContextState } = useWalletContext();
const totalDepositsOrBorrows = useMemo(
() =>
@@ -54,111 +46,6 @@ export const AssetCard: FC<{
const currentAction: ActionType = useMemo(() => getCurrentAction(isInLendingMode, bank), [isInLendingMode, bank]);
- const handleCloseBalance = useCallback(async () => {
- try {
- await closeBalance({ marginfiAccount, bank });
- } catch (error) {
- return;
- }
-
- try {
- setIsRefreshingStore(true);
- await fetchMrgnlendState();
- } catch (error: any) {
- console.log("Error while reloading state");
- console.log(error);
- }
- }, [bank, marginfiAccount, fetchMrgnlendState, setIsRefreshingStore]);
-
- const executeLendingActionCb = useCallback(
- async (
- amount: number,
- {
- mfiClient,
- actionType: currentAction,
- bank,
- nativeSolBalance,
- marginfiAccount,
- walletContextState,
- }: Omit
- ) => {
- await executeLendingAction({
- mfiClient,
- actionType: currentAction,
- bank,
- amount,
- nativeSolBalance,
- marginfiAccount,
- walletContextState,
- });
-
- // -------- Refresh state
- try {
- setIsRefreshingStore(true);
- await fetchMrgnlendState();
- } catch (error: any) {
- console.log("Error while reloading state");
- console.log(error);
- }
- },
- [fetchMrgnlendState, setIsRefreshingStore]
- );
-
- const handleLendingAction = useCallback(
- async (borrowOrLendAmount: number) => {
- if (
- currentAction === ActionType.Deposit &&
- (bank.meta.tokenSymbol === "SOL" || bank.meta.tokenSymbol === "stSOL") &&
- !hasLSTDialogShown.includes(bank.meta.tokenSymbol as LSTDialogVariants) &&
- showLSTDialog
- ) {
- setHasLSTDialogShown((prev) => [...prev, bank.meta.tokenSymbol as LSTDialogVariants]);
- showLSTDialog(bank.meta.tokenSymbol as LSTDialogVariants, async () => {
- await executeLendingActionCb(borrowOrLendAmount, {
- mfiClient,
- actionType: currentAction,
- bank,
- nativeSolBalance,
- marginfiAccount,
- walletContextState,
- });
- });
- return;
- }
-
- await executeLendingActionCb(borrowOrLendAmount, {
- mfiClient,
- actionType: currentAction,
- bank,
- nativeSolBalance,
- marginfiAccount,
- walletContextState,
- });
-
- if (
- currentAction === ActionType.Withdraw &&
- (bank.meta.tokenSymbol === "SOL" || bank.meta.tokenSymbol === "stSOL") &&
- !hasLSTDialogShown.includes(bank.meta.tokenSymbol as LSTDialogVariants) &&
- showLSTDialog
- ) {
- setHasLSTDialogShown((prev) => [...prev, bank.meta.tokenSymbol as LSTDialogVariants]);
- showLSTDialog(bank.meta.tokenSymbol as LSTDialogVariants);
- return;
- }
- },
- [
- currentAction,
- bank,
- hasLSTDialogShown,
- showLSTDialog,
- executeLendingActionCb,
- mfiClient,
- nativeSolBalance,
- marginfiAccount,
- walletContextState,
- ]
- );
-
return (
)}
-
+
);
};
diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardActions.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardActions.tsx
index 5370b86aa0..75beb9fe14 100644
--- a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardActions.tsx
+++ b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardActions.tsx
@@ -1,70 +1,38 @@
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 { ActionBoxDialog } from "~/components/common/ActionBox";
+import { useUiStore } from "~/store";
export const AssetCardActions: FC<{
bank: ExtendedBankInfo;
- isBankFilled: boolean;
- isInLendingMode: boolean;
currentAction: ActionType;
- inputRefs?: React.MutableRefObject
>;
- onCloseBalance: () => void;
- onBorrowOrLend: (amount: number) => void;
-}> = ({ bank, inputRefs, currentAction, onCloseBalance, onBorrowOrLend }) => {
- const [borrowOrLendAmount, setBorrowOrLendAmount] = useState(0);
-
- const maxAmount = useMemo(() => {
- switch (currentAction) {
- case ActionType.Deposit:
- return bank.userInfo.maxDeposit;
- case ActionType.Withdraw:
- return bank.userInfo.maxWithdraw;
- case ActionType.Borrow:
- return bank.userInfo.maxBorrow;
- case ActionType.Repay:
- return bank.userInfo.maxRepay;
- }
- }, [bank.userInfo, currentAction]);
+}> = ({ bank, currentAction }) => {
+ const [setSelectedToken] = useUiStore((state) => [state.setSelectedToken]);
- 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]
- );
+ const isDust = React.useMemo(() => bank.isActive && bank.position.isDust, [bank]);
+ const showCloseBalance = React.useMemo(
+ () => currentAction === ActionType.Withdraw && isDust,
+ [currentAction, isDust]
+ ); // Only case we should show close balance is when we are withdrawing a dust balance, since user receives 0 tokens back (vs repaying a dust balance where the input box will show the smallest unit of the token)
return (
<>
-
onBorrowOrLend(borrowOrLendAmount)}
- />
- (isDust ? onCloseBalance() : onBorrowOrLend(borrowOrLendAmount))}
- disabled={isDisabled}
- >
- {isDust ? "Close" : currentAction}
-
+
+ setSelectedToken(bank)}
+ >
+ {showCloseBalance ? "Close" : currentAction}
+
+
- {poolFilter !== "isolated" && (
-
-
- Global pool
-
- {isStoreInitialized && globalBanks ? (
- globalBanks.length > 0 ? (
-
- {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 (
-
void) => {
- setLSTDialogVariant(variant);
- setIsLSTDialogOpen(true);
- if (onClose) {
- setLSTDialogCallback(() => onClose);
- }
- }}
- />
- );
- })}
-
+ {userMode === UserMode.PRO && (
+
+ {poolFilter !== "isolated" && (
+
+
+ Global pool
+
+ {isStoreInitialized && globalBanks ? (
+ globalBanks.length > 0 ? (
+
+ {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 (
+
+ );
+ })}
+
+ ) : (
+
+ No {isInLendingMode ? "lending" : "borrowing"} {isFilteredUserPositions ? "positions" : "pools"}{" "}
+ found.
+
+ )
) : (
-
- No {isInLendingMode ? "lending" : "borrowing"} {isFilteredUserPositions ? "positions" : "pools"}{" "}
- found.
-
- )
- ) : (
-
- {[...Array(6)].map((_, i) => (
-
- ))}
-
- )}
-
- )}
- {poolFilter !== "stable" && poolFilter !== "lst" && (
-
-
- Isolated pools
-
-
- Isolated pools are risky ⚠️
-
- Assets in isolated pools cannot be used as collateral. When you borrow an isolated asset, you cannot
- borrow other assets. Isolated pools should be considered particularly risky. As always, remember
- that marginfi is a decentralized protocol and all deposited funds are at risk.
-
- }
- placement="top"
- >
-
-
-
-
- {isStoreInitialized && globalBanks ? (
- isolatedBanks.length > 0 ? (
-
- {isolatedBanks.map((bank, i) => {
- const activeBank = activeBankInfos.filter(
- (activeBankInfo) => activeBankInfo.meta.tokenSymbol === bank.meta.tokenSymbol
- );
-
- return (
-
- );
- })}
+
+ {[...Array(6)].map((_, i) => (
+
+ ))}
+ )}
+
+ )}
+ {poolFilter !== "stable" && poolFilter !== "lst" && (
+
+
+ Isolated pools
+
+
+ Isolated pools are risky ⚠️
+
+ Assets in isolated pools cannot be used as collateral. When you borrow an isolated asset, you
+ cannot borrow other assets. Isolated pools should be considered particularly risky. As always,
+ remember that marginfi is a decentralized protocol and all deposited funds are at risk.
+
+ }
+ placement="top"
+ >
+
+
+
+
+ {isStoreInitialized && globalBanks ? (
+ isolatedBanks.length > 0 ? (
+
+ {isolatedBanks.map((bank, i) => {
+ const activeBank = activeBankInfos.filter(
+ (activeBankInfo) => activeBankInfo.meta.tokenSymbol === bank.meta.tokenSymbol
+ );
+
+ return (
+
+ );
+ })}
+
+ ) : (
+
+ No {isInLendingMode ? "lending" : "borrowing"} {isFilteredUserPositions ? "positions" : "pools"}{" "}
+ found.
+
+ )
) : (
-
- No {isInLendingMode ? "lending" : "borrowing"} {isFilteredUserPositions ? "positions" : "pools"}{" "}
- found.
-
- )
- ) : (
-
- {[...Array(6)].map((_, i) => (
-
- ))}
-
- )}
-
- )}
-
+
+ {[...Array(6)].map((_, i) => (
+
+ ))}
+
+ )}
+
+ )}
+
+ )}
+ {walletAddress &&
}
{
-
+ {/*
*/}
{!connected ? null : currentFirebaseUser ? (
) : hasUser === null ? (
@@ -167,8 +167,6 @@ const PortfolioPage = () => {
nativeSolBalance={nativeSolBalance}
bank={bank}
isInLendingMode={true}
- isConnected={connected}
- marginfiAccount={selectedAccount}
/>
))}
@@ -198,8 +196,6 @@ const PortfolioPage = () => {
nativeSolBalance={nativeSolBalance}
bank={bank}
isInLendingMode={false}
- isConnected={connected}
- marginfiAccount={selectedAccount}
/>
))}