diff --git a/apps/main/src/i18n/locales/en/borrow.json b/apps/main/src/i18n/locales/en/borrow.json index bbd46d4b6b..7add7241a8 100644 --- a/apps/main/src/i18n/locales/en/borrow.json +++ b/apps/main/src/i18n/locales/en/borrow.json @@ -89,6 +89,7 @@ "supplied.table.empty": "Nothing supplied yet", "supplied.table.title": "Your supplies", "supply": "Supply", + "supply.withSymbol": "Supply {{ symbol }}", "isolated": "Isolated", "supply.assetCannotBeCollateral": "Asset cannot be used as collateral.", "supply.available": "Available to supply", diff --git a/apps/main/src/modules/borrow/dashboard/components/supply-assets/SupplyAssetsTable.columns.tsx b/apps/main/src/modules/borrow/dashboard/components/supply-assets/SupplyAssetsTable.columns.tsx index 6a20b563e7..0802926c6f 100644 --- a/apps/main/src/modules/borrow/dashboard/components/supply-assets/SupplyAssetsTable.columns.tsx +++ b/apps/main/src/modules/borrow/dashboard/components/supply-assets/SupplyAssetsTable.columns.tsx @@ -187,7 +187,7 @@ export const useSupplyAssetsTableColumns = ( }, }, cell: ({ row }) => { - const { underlyingAsset, isIsolated } = row.original + const { underlyingAsset, isIsolated, symbol } = row.original const isDisabled = (!isIsolated && getIsSupplyDisabled(row.original)) || !isConnected @@ -217,7 +217,7 @@ export const useSupplyAssetsTableColumns = ( isIsolated, }) } else { - openSupply(underlyingAsset) + openSupply(underlyingAsset, symbol) } }} > @@ -237,7 +237,7 @@ export const useSupplyAssetsTableColumns = ( const actionsColumnMobile = columnHelper.display({ id: "actions", cell: ({ row }) => { - const { underlyingAsset } = row.original + const { underlyingAsset, symbol } = row.original const isDisabled = getIsSupplyDisabled(row.original) || !isConnected return ( @@ -264,7 +264,7 @@ export const useSupplyAssetsTableColumns = ( stableswapId: assetId, }) } else { - openSupply(underlyingAsset) + openSupply(underlyingAsset, symbol) } }} > diff --git a/apps/main/src/modules/borrow/dashboard/components/supply-assets/SupplyAssetsTable.tsx b/apps/main/src/modules/borrow/dashboard/components/supply-assets/SupplyAssetsTable.tsx index 205dd69f48..87e81152f0 100644 --- a/apps/main/src/modules/borrow/dashboard/components/supply-assets/SupplyAssetsTable.tsx +++ b/apps/main/src/modules/borrow/dashboard/components/supply-assets/SupplyAssetsTable.tsx @@ -25,9 +25,11 @@ import { AddStablepoolLiquidityWrapper, } from "@/modules/liquidity/components/AddStablepoolLiquidity/AddStablepoolLiquidity" import { SupplyIsolatedLiquidity } from "@/modules/liquidity/components/SupplyIsolatedLiquidity/SupplyIsolatedLiquidity" +import { useAssets } from "@/providers/assetsProvider" export const SupplyAssetsTable = () => { const { t } = useTranslation("borrow") + const { getAssetWithFallback } = useAssets() const [modalProps, setModalProps] = useState< | (Omit & { isIsolated?: boolean @@ -124,7 +126,11 @@ export const SupplyAssetsTable = () => { setModalProps(undefined)} /> diff --git a/apps/main/src/modules/borrow/reserve/components/ReserveActions.tsx b/apps/main/src/modules/borrow/reserve/components/ReserveActions.tsx index 3d50717a65..35be7f1bbe 100644 --- a/apps/main/src/modules/borrow/reserve/components/ReserveActions.tsx +++ b/apps/main/src/modules/borrow/reserve/components/ReserveActions.tsx @@ -73,7 +73,7 @@ export const ReserveActions: React.FC = ({ reserve }) => { /> diff --git a/apps/main/src/modules/liquidity/components/SupplyIsolatedLiquidity/SupplyIsolatedLiquidity.tsx b/apps/main/src/modules/liquidity/components/SupplyIsolatedLiquidity/SupplyIsolatedLiquidity.tsx index 8cab078791..e463cfb2f7 100644 --- a/apps/main/src/modules/liquidity/components/SupplyIsolatedLiquidity/SupplyIsolatedLiquidity.tsx +++ b/apps/main/src/modules/liquidity/components/SupplyIsolatedLiquidity/SupplyIsolatedLiquidity.tsx @@ -13,6 +13,7 @@ import { ModalContentDivider, ModalFooter, ModalHeader, + Skeleton, Stack, SummaryRow, } from "@galacticcouncil/ui/components" @@ -20,7 +21,7 @@ import { getAddressFromAssetId } from "@galacticcouncil/utils" import { FormProvider } from "react-hook-form" import { useTranslation } from "react-i18next" -import { TAssetData, TErc20 } from "@/api/assets" +import { TAssetData, TErc20AToken } from "@/api/assets" import { useUserBorrowSummary } from "@/api/borrow/queries" import { TAssetWithBalance, @@ -46,13 +47,14 @@ export const SupplyIsolatedLiquidity = ({ assetId: string onSubmitted: () => void }) => { - const { tradable, native, getRelatedAToken } = useAssets() + const { tradable, native, getRelatedAToken, isErc20AToken } = useAssets() const { data: userBorrowData } = useUserBorrowSummary() - const aToken = getRelatedAToken(assetId) + const relatedAToken = getRelatedAToken(assetId) + const selectabledAssets = useAssetSelectModalAssets({ assets: tradable, search: "", - ignoreAssetIds: aToken ? [aToken.id] : undefined, + ignoreAssetIds: relatedAToken ? [relatedAToken.id] : undefined, highPriorityAssetIds: [assetId], lowPriorityAssetIds: [native.id], }) @@ -67,12 +69,16 @@ export const SupplyIsolatedLiquidity = ({ if ( selectabledAssets.isLoading || !initialAsset || - !aToken || + !relatedAToken || !userBorrowData || !userReserve ) return + const aToken = isErc20AToken(relatedAToken) ? relatedAToken : undefined + + if (!aToken) throw new Error("A token is not found") + return ( void @@ -117,6 +123,9 @@ const SupplyIsolatedLiquidityBody = ({ isBlockedSupply, minReceiveAmountShifted, apys, + spotPriceData, + isPriceLoading, + isAaveSupply, } = useSupplyIsolatedLiquidity({ initialAsset, supplyAssetId: assetId, @@ -128,7 +137,10 @@ const SupplyIsolatedLiquidityBody = ({ return ( - +
@@ -153,11 +165,6 @@ const SupplyIsolatedLiquidityBody = ({ sx={{ my: 0 }} /> ))} - } - sx={{ my: 0 }} - /> {!isBlockedByBorrowedAssets && ( )} + + } + sx={{ my: 0 }} + /> + + {!isAaveSupply && ( + + ) : ( + t("liquidity:liquidity.remove.stablepool.modal.price", { + poolSymbol: form.watch("asset").symbol, + value: spotPriceData?.spotPrice, + symbol: aToken.symbol, + }) + ) + } + sx={{ my: 0 }} + /> + )} + {collateralType && ( void @@ -87,6 +88,13 @@ export const useSupplyIsolatedLiquidity = ({ const [amountIn, assetIn] = form.watch(["amount", "asset"]) + const isAaveSupply = aToken.underlyingAssetId === assetIn.id + + const { data: spotPriceData, isLoading: isPriceLoading } = useQuery({ + ...spotPriceQuery(rpc, assetIn.id, aToken.id), + enabled: !isAaveSupply, + }) + const [debouncedAmountIn] = useDebounce(amountIn, 300) const collateralType = getAssetCollateralType( @@ -139,7 +147,10 @@ export const useSupplyIsolatedLiquidity = ({ }), ) - const minReceiveAmount = getMinimumTradeAmount(trade?.swap)?.toString() ?? "0" + const minReceiveAmount = + (isAaveSupply + ? trade?.swap.amountOut + : getMinimumTradeAmount(trade?.swap)?.toString()) ?? "0" const minReceiveAmountShifted = scaleHuman(minReceiveAmount, aToken.decimals) const { data: healthFactor } = useQuery( @@ -206,6 +217,9 @@ export const useSupplyIsolatedLiquidity = ({ isBlockedSupply, minReceiveAmountShifted, apys, + spotPriceData, + isPriceLoading, + isAaveSupply, } } diff --git a/packages/money-market/src/components/transactions/supply/SupplyModal.tsx b/packages/money-market/src/components/transactions/supply/SupplyModal.tsx index a08828f847..c00d33e4a2 100644 --- a/packages/money-market/src/components/transactions/supply/SupplyModal.tsx +++ b/packages/money-market/src/components/transactions/supply/SupplyModal.tsx @@ -13,6 +13,7 @@ import { SupplyModalContent } from "./SupplyModalContent" export const SupplyModal = () => { const { type, close, args } = useModalContext() as ModalContextType<{ underlyingAsset: string + symbol: string }> const isStrategyAsset = MONEY_MARKET_STRATEGY_ASSETS.includes( @@ -24,7 +25,7 @@ export const SupplyModal = () => { variant="popup" open={type === ModalType.Supply} setOpen={close} - title="Supply" + title={`Supply ${args.symbol}`} > { - openSupply: (underlyingAsset: string) => void + openSupply: (underlyingAsset: string, symbol: string) => void openWithdraw: (underlyingAsset: string) => void openBorrow: (underlyingAsset: string) => void openRepay: ( @@ -104,9 +105,9 @@ export const ModalContextProvider: React.FC<{ children?: React.ReactNode }> = ({ return ( { + openSupply: (underlyingAsset, symbol) => { setType(ModalType.Supply) - setArgs({ underlyingAsset }) + setArgs({ underlyingAsset, symbol }) }, openWithdraw: (underlyingAsset) => { setType(ModalType.Withdraw)