Update supply modal

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",

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)
               }
             }}
           >

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<AddStablepoolLiquidityProps, "onSubmitted"> & {
         isIsolated?: boolean
@@ -124,7 +126,11 @@ export const SupplyAssetsTable = () => {
             <AddStablepoolLiquidityWrapper
               {...modalProps}
               initialOption="stablepool"
-              title={t("supply")}
+              title={t("supply.withSymbol", {
+                symbol: modalProps.erc20Id
+                  ? getAssetWithFallback(modalProps.erc20Id).symbol
+                  : undefined,
+              })}
               closable
               onSubmitted={() => setModalProps(undefined)}
             />

apps/main/src/modules/borrow/reserve/components/ReserveActions.tsx

@@ -73,7 +73,7 @@ export const ReserveActions: React.FC<ReserveActionsProps> = ({ reserve }) => {
           />
           <Button
             disabled={disableSupplyButton}
-            onClick={() => openSupply(reserve.underlyingAsset)}
+            onClick={() => openSupply(reserve.underlyingAsset, reserve.symbol)}
           >
             {t("borrow:supply")}
           </Button>

apps/main/src/modules/liquidity/components/SupplyIsolatedLiquidity/SupplyIsolatedLiquidity.tsx

@@ -13,14 +13,15 @@ import {
   ModalContentDivider,
   ModalFooter,
   ModalHeader,
+  Skeleton,
   Stack,
   SummaryRow,
 } from "@galacticcouncil/ui/components"
 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 <SupplyIsolatedLiquiditySkeleton />
 
+  const aToken = isErc20AToken(relatedAToken) ? relatedAToken : undefined
+
+  if (!aToken) throw new Error("A token is not found")
+
   return (
     <SupplyIsolatedLiquidityBody
       initialAsset={initialAsset}
@@ -98,7 +104,7 @@ const SupplyIsolatedLiquidityBody = ({
   initialAsset: TAssetData
   selectabledAssets: TAssetWithBalance[]
   assetId: string
-  aToken: TErc20
+  aToken: TErc20AToken
   userBorrowData: ExtendedFormattedUser
   userReserve: ComputedUserReserveData
   onSubmitted: () => void
@@ -117,6 +123,9 @@ const SupplyIsolatedLiquidityBody = ({
     isBlockedSupply,
     minReceiveAmountShifted,
     apys,
+    spotPriceData,
+    isPriceLoading,
+    isAaveSupply,
   } = useSupplyIsolatedLiquidity({
     initialAsset,
     supplyAssetId: assetId,
@@ -128,7 +137,10 @@ const SupplyIsolatedLiquidityBody = ({
 
   return (
     <FormProvider {...form}>
-      <ModalHeader title={t("borrow:supply")} closable />
+      <ModalHeader
+        title={t("borrow:supply.withSymbol", { symbol: initialAsset.symbol })}
+        closable
+      />
       <form onSubmit={form.handleSubmit(onSubmit)} autoComplete="off">
         <ModalBody>
           <AssetSelectFormField<TSupplyIsolatedLiquidityFormValues>
@@ -153,11 +165,6 @@ const SupplyIsolatedLiquidityBody = ({
                 sx={{ my: 0 }}
               />
             ))}
-            <SummaryRow
-              label={t("tradeLimit")}
-              content={<TradeLimit type={TradeLimitType.Trade} />}
-              sx={{ my: 0 }}
-            />
             {!isBlockedByBorrowedAssets && (
               <SummaryRow
                 label={t("minimumReceived")}
@@ -168,6 +175,31 @@ const SupplyIsolatedLiquidityBody = ({
                 sx={{ my: 0 }}
               />
             )}
+
+            <SummaryRow
+              label={t("tradeLimit")}
+              content={<TradeLimit type={TradeLimitType.Trade} />}
+              sx={{ my: 0 }}
+            />
+
+            {!isAaveSupply && (
+              <SummaryRow
+                label={t("price")}
+                content={
+                  isPriceLoading ? (
+                    <Skeleton width={50} height="100%" />
+                  ) : (
+                    t("liquidity:liquidity.remove.stablepool.modal.price", {
+                      poolSymbol: form.watch("asset").symbol,
+                      value: spotPriceData?.spotPrice,
+                      symbol: aToken.symbol,
+                    })
+                  )
+                }
+                sx={{ my: 0 }}
+              />
+            )}
+
             {collateralType && (
               <SummaryRow
                 label={t("borrow:collateral")}

apps/main/src/modules/liquidity/components/SupplyIsolatedLiquidity/SupplyIsolatedLiquidity.utils.ts

@@ -22,14 +22,15 @@ import { useDebounce } from "use-debounce"
 import z from "zod"
 
 import { healthFactorQuery } from "@/api/aave"
-import { TAssetData, TErc20 } from "@/api/assets"
+import { TAssetData, TErc20AToken } from "@/api/assets"
 import {
   lendingPoolAddressProvider,
   useBorrowAssetsApy,
   useBorrowDisableCollateralTxs,
   userBorrowSummaryQueryKey,
   useSetUsageAsCollateralTx,
 } from "@/api/borrow"
+import { spotPriceQuery } from "@/api/spotPrice"
 import { bestSellWithTxQuery } from "@/api/trade"
 import i18n from "@/i18n"
 import { useMinimumTradeAmount } from "@/modules/liquidity/components/RemoveLiquidity/RemoveMoneyMarketLiquidity.utils"
@@ -55,7 +56,7 @@ export const useSupplyIsolatedLiquidity = ({
 }: {
   supplyAssetId: string
   initialAsset: TAssetData
-  aToken: TErc20
+  aToken: TErc20AToken
   userBorrowData: ExtendedFormattedUser
   userReserve: ComputedUserReserveData
   onSubmitted: () => 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,
   }
 }
 

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}`}
     >
       <TxModalWrapper
         action="supply"

packages/money-market/src/hooks/useModal.tsx

@@ -36,6 +36,7 @@ export enum ModalType {
 
 export interface ModalArgsType {
   underlyingAsset?: string
+  symbol?: string
   support?: boolean
   power?: string
   icon?: string
@@ -54,7 +55,7 @@ export type TxStateType = {
 }
 
 export interface ModalContextType<T extends ModalArgsType> {
-  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 (
     <ModalContext.Provider
       value={{
-        openSupply: (underlyingAsset) => {
+        openSupply: (underlyingAsset, symbol) => {
           setType(ModalType.Supply)
-          setArgs({ underlyingAsset })
+          setArgs({ underlyingAsset, symbol })
         },
         openWithdraw: (underlyingAsset) => {
           setType(ModalType.Withdraw)