diff --git a/apps/marginfi-v2-ui/src/components/common/AssetList/AssetListFilters.tsx b/apps/marginfi-v2-ui/src/components/common/AssetList/AssetListFilters.tsx index f2e321f554..07e16616d7 100644 --- a/apps/marginfi-v2-ui/src/components/common/AssetList/AssetListFilters.tsx +++ b/apps/marginfi-v2-ui/src/components/common/AssetList/AssetListFilters.tsx @@ -81,6 +81,8 @@ export const AssetListFilters = () => { All pools Isolated pools + Stablecoins + LSTs diff --git a/apps/marginfi-v2-ui/src/components/common/AssetList/AssetListFilters.utils.tsx b/apps/marginfi-v2-ui/src/components/common/AssetList/AssetListFilters.utils.tsx index 696af1bbb1..93e00b7f3c 100644 --- a/apps/marginfi-v2-ui/src/components/common/AssetList/AssetListFilters.utils.tsx +++ b/apps/marginfi-v2-ui/src/components/common/AssetList/AssetListFilters.utils.tsx @@ -1,6 +1,10 @@ import { ExtendedBankInfo, Emissions } from "@mrgnlabs/marginfi-v2-ui-state"; import type { sortDirection } from "~/types"; +export const STABLECOINS = ["USDC", "USDT", "UXD"]; + +export const LSTS = ["LST", "stSOL", "jitoSOL", "bSOL", "mSOL"]; + export const sortApRate = (banks: ExtendedBankInfo[], isInLendingMode: boolean, direction: sortDirection) => { return banks.sort((a, b) => { const apRateA = diff --git a/apps/marginfi-v2-ui/src/components/common/AssetList/NewAsssetBanner.tsx b/apps/marginfi-v2-ui/src/components/common/AssetList/NewAsssetBanner.tsx index f3ff052e72..ec0aa5a70d 100644 --- a/apps/marginfi-v2-ui/src/components/common/AssetList/NewAsssetBanner.tsx +++ b/apps/marginfi-v2-ui/src/components/common/AssetList/NewAsssetBanner.tsx @@ -44,14 +44,14 @@ export const NewAssetBanner = ({ asset, image }: NewAssetBannerProps) => { const deposit = React.useCallback(() => { setLendingMode(LendingModes.LEND); - if (poolFilter === PoolTypes.ALL) setPoolFilter(PoolTypes.ALL); + if (poolFilter !== PoolTypes.ALL) setPoolFilter(PoolTypes.ALL); setIsFilteredUserPositions(false); setTimeout(() => highlightAsset(), 100); }, [setLendingMode, poolFilter, setPoolFilter, asset, setIsFilteredUserPositions, highlightAsset]); const borrow = React.useCallback(() => { setLendingMode(LendingModes.BORROW); - if (poolFilter === PoolTypes.ALL) setPoolFilter(PoolTypes.ALL); + if (poolFilter !== PoolTypes.ALL) setPoolFilter(PoolTypes.ALL); setIsFilteredUserPositions(false); setTimeout(() => highlightAsset(), 100); }, [setLendingMode, poolFilter, setPoolFilter, asset, setIsFilteredUserPositions, highlightAsset]); diff --git a/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetsList.tsx b/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetsList.tsx index 4cf9542191..d54c8debb2 100644 --- a/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetsList.tsx +++ b/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetsList.tsx @@ -10,7 +10,15 @@ import { useMrgnlendStore, useUserProfileStore, useUiStore } from "~/store"; import { useWalletContext } from "~/hooks/useWalletContext"; import { LoadingAsset, AssetRow } from "./AssetRow"; -import { LSTDialog, LSTDialogVariants, AssetListFilters, sortApRate, sortTvl } from "~/components/common/AssetList"; +import { + LSTDialog, + LSTDialogVariants, + AssetListFilters, + sortApRate, + sortTvl, + STABLECOINS, + LSTS, +} from "~/components/common/AssetList"; import { MrgnTooltip } from "~/components/common"; import { LendingModes } from "~/types"; @@ -356,8 +364,10 @@ const AssetsList: FC = () => { {globalBanks .filter((b) => !b.info.state.isIsolated) - .map((bank, i) => - isStoreInitialized ? ( + .map((bank, i) => { + if (poolFilter === "stable" && !STABLECOINS.includes(bank.meta.tokenSymbol)) return null; + if (poolFilter === "lst" && !LSTS.includes(bank.meta.tokenSymbol)) return null; + return isStoreInitialized ? ( { isInLendingMode={isInLendingMode} bankMetadata={bank.meta} /> - ) - )} + ); + })} )} - - - - -
- - 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" - > - - -
-
- -
- Price - - - Realtime prices - - - Powered by Pyth and Switchboard. - - - } - placement="top" - > - - -
-
- -
- {isInLendingMode ? "APY" : "APR"} - - - {isInLendingMode ? "APY" : "APR"} - - - {isInLendingMode - ? "What you'll earn on deposits over a year. This includes compounding. All marginfi deposits are compounded hourly." - : "What you'll pay for your borrows, or the price of a loan. This does not include compounding. All marginfi borrows are compounded hourly."} - - - } - placement="top" - > - - -
-
- -
- {isInLendingMode ? "Weight" : "LTV"} - - - {isInLendingMode ? "Weight" : "LTV"} - - - {isInLendingMode - ? "How much your assets count for collateral, relative to their USD value. The higher the weight, the more collateral you can borrow against it." - : "How much you can borrow against your free collateral. The higher the LTV, the more you can borrow against your free collateral."} - - - } - placement="top" - > - - -
-
- -
- {isInLendingMode ? "Deposits" : "Available"} - - - {isInLendingMode ? "Total deposits" : "Total available"} - - - {isInLendingMode - ? "Total marginfi deposits for each asset. Everything is denominated in native tokens." - : "The amount of tokens available to borrow for each asset. Calculated as the minimum of the asset's borrow limit and available liquidity that has not yet been borrowed."} - - - } - placement="top" - > - - -
-
- - {/*******************************/} - {/* [START]: ZOOM-BASED COLUMNS */} - {/*******************************/} - - {lendZoomLevel < 2 && ( + {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" + > + + +
+
- Global limit + Price - {isInLendingMode ? "Global deposit cap" : "Global borrow cap"} + Realtime prices - Each marginfi pool has global deposit and borrow limits, also known as caps. This is - the total amount that all users combined can deposit or borrow of a given token. + + Powered by Pyth and Switchboard. + + + } + placement="top" + > + + +
+
+ +
+ {isInLendingMode ? "APY" : "APR"} + + + {isInLendingMode ? "APY" : "APR"} + + + {isInLendingMode + ? "What you'll earn on deposits over a year. This includes compounding. All marginfi deposits are compounded hourly." + : "What you'll pay for your borrows, or the price of a loan. This does not include compounding. All marginfi borrows are compounded hourly."} + } placement="top" @@ -545,24 +475,24 @@ const AssetsList: FC = () => {
- )} - - {lendZoomLevel < 3 && (
- Utilization + {isInLendingMode ? "Weight" : "LTV"} - Pool utilization + {isInLendingMode ? "Weight" : "LTV"} - What percentage of supplied tokens have been borrowed. This helps determine interest - rates. This is not based on the global pool limits, which can limit utilization. + + {isInLendingMode + ? "How much your assets count for collateral, relative to their USD value. The higher the weight, the more collateral you can borrow against it." + : "How much you can borrow against your free collateral. The higher the LTV, the more you can borrow against your free collateral."} + } placement="top" @@ -571,48 +501,130 @@ const AssetsList: FC = () => {
- )} - - {/*******************************/} - {/* [END]: ZOOM-BASED COLUMNS */} - {/*******************************/} - - -
Wallet Amt.
-
- - -
-
- - {isolatedBanks - .filter((b) => b.info.state.isIsolated) - .map((bank) => - isStoreInitialized ? ( - - ) : ( - - ) - )} - -
+ +
+ {isInLendingMode ? "Deposits" : "Available"} + + + {isInLendingMode ? "Total deposits" : "Total available"} + + + {isInLendingMode + ? "Total marginfi deposits for each asset. Everything is denominated in native tokens." + : "The amount of tokens available to borrow for each asset. Calculated as the minimum of the asset's borrow limit and available liquidity that has not yet been borrowed."} + + + } + placement="top" + > + info + +
+
+ + {/*******************************/} + {/* [START]: ZOOM-BASED COLUMNS */} + {/*******************************/} + + {lendZoomLevel < 2 && ( + +
+ Global limit + + + {isInLendingMode ? "Global deposit cap" : "Global borrow cap"} + + Each marginfi pool has global deposit and borrow limits, also known as caps. This is + the total amount that all users combined can deposit or borrow of a given token. + + } + placement="top" + > + info + +
+
+ )} + + {lendZoomLevel < 3 && ( + +
+ Utilization + + + Pool utilization + + What percentage of supplied tokens have been borrowed. This helps determine interest + rates. This is not based on the global pool limits, which can limit utilization. + + } + placement="top" + > + info + +
+
+ )} + + {/*******************************/} + {/* [END]: ZOOM-BASED COLUMNS */} + {/*******************************/} + + +
Wallet Amt.
+
+ + + + + + {isolatedBanks + .filter((b) => b.info.state.isIsolated) + .map((bank) => + isStoreInitialized ? ( + + ) : ( + + ) + )} + + + )} diff --git a/apps/marginfi-v2-ui/src/types.ts b/apps/marginfi-v2-ui/src/types.ts index 4f3d0838c5..473aa36c01 100644 --- a/apps/marginfi-v2-ui/src/types.ts +++ b/apps/marginfi-v2-ui/src/types.ts @@ -87,6 +87,8 @@ export enum LendingModes { export enum PoolTypes { ALL = "all", ISOLATED = "isolated", + STABLE = "stable", + LST = "lst", } export type SortAssetOption = {