Money Market user data on wallet page

src/api/borrow.ts

@@ -0,0 +1,85 @@
+import { UiPoolDataProvider } from "@aave/contract-helpers"
+import { formatReserves, formatUserSummary } from "@aave/math-utils"
+import { useQuery } from "@tanstack/react-query"
+import { isTestnetRpcUrl } from "api/provider"
+import { useRpcProvider } from "providers/rpcProvider"
+import { useMemo } from "react"
+import {
+  AaveV3HydrationMainnet,
+  AaveV3HydrationTestnet,
+} from "sections/lending/ui-config/addresses"
+import { useAccount } from "sections/web3-connect/Web3Connect.utils"
+import { H160, isEvmAccount } from "utils/evm"
+import { QUERY_KEYS } from "utils/queryKeys"
+
+export const useUserBorrowSummary = (givenAddress?: string) => {
+  const { account } = useAccount()
+  const { api, evm, isLoaded } = useRpcProvider()
+
+  const address = givenAddress || account?.address
+
+  const isEvm = isEvmAccount(address)
+
+  const evmAddress = useMemo(() => {
+    if (!address) return ""
+    if (isEvm) return H160.fromAccount(address)
+    return H160.fromSS58(address)
+  }, [isEvm, address])
+
+  return useQuery(
+    QUERY_KEYS.borrowUserSummary(evmAddress),
+    async () => {
+      const isTestnet = isTestnetRpcUrl(evm.connection.url)
+
+      const contracts = isTestnet
+        ? AaveV3HydrationTestnet
+        : AaveV3HydrationMainnet
+
+      const poolDataContract = new UiPoolDataProvider({
+        uiPoolDataProviderAddress: contracts.UI_POOL_DATA_PROVIDER,
+        provider: evm,
+        chainId: parseFloat(import.meta.env.VITE_EVM_CHAIN_ID),
+      })
+
+      const [reserves, user, timestamp] = await Promise.all([
+        poolDataContract.getReservesHumanized({
+          lendingPoolAddressProvider: contracts.POOL_ADDRESSES_PROVIDER,
+        }),
+        poolDataContract.getUserReservesHumanized({
+          lendingPoolAddressProvider: contracts.POOL_ADDRESSES_PROVIDER,
+          user: evmAddress,
+        }),
+        api.query.timestamp.now(),
+      ])
+
+      const { baseCurrencyData, reservesData } = reserves
+      const { userEmodeCategoryId, userReserves } = user
+
+      const currentTimestamp = timestamp.toNumber() / 1000
+
+      const formattedReserves = formatReserves({
+        currentTimestamp,
+        reserves: reservesData,
+        marketReferencePriceInUsd:
+          baseCurrencyData.marketReferenceCurrencyPriceInUsd,
+        marketReferenceCurrencyDecimals:
+          baseCurrencyData.marketReferenceCurrencyDecimals,
+      })
+
+      return formatUserSummary({
+        currentTimestamp,
+        marketReferencePriceInUsd:
+          baseCurrencyData.marketReferenceCurrencyPriceInUsd,
+        marketReferenceCurrencyDecimals:
+          baseCurrencyData.marketReferenceCurrencyDecimals,
+        userReserves,
+        formattedReserves,
+        userEmodeCategoryId,
+      })
+    },
+    {
+      retry: false,
+      enabled: isLoaded && !!evmAddress,
+    },
+  )
+}

src/api/external/bifrost.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query"
+import { useQuery, UseQueryOptions } from "@tanstack/react-query"
 import { QUERY_KEYS } from "utils/queryKeys"
 
 type BifrostAPY = {
@@ -7,10 +7,19 @@ type BifrostAPY = {
   apyReward: string
 }
 
-export const useBifrostVDotApy = () => {
-  return useQuery(QUERY_KEYS.bifrostVDotApy, async () => {
-    const res = await fetch("https://dapi.bifrost.io/api/site")
-    const data = await res.json()
-    return data["vDOT"] as BifrostAPY
-  })
+export const useBifrostVDotApy = (
+  options: UseQueryOptions<BifrostAPY> = {},
+) => {
+  return useQuery<BifrostAPY>(
+    QUERY_KEYS.bifrostVDotApy,
+    async () => {
+      const res = await fetch("https://dapi.bifrost.io/api/site")
+      const data = await res.json()
+      return data["vDOT"] as BifrostAPY
+    },
+    {
+      refetchOnWindowFocus: false,
+      ...options,
+    },
+  )
 }

src/api/provider.ts

@@ -21,6 +21,7 @@ import { identity, undefinedNoop } from "utils/helpers"
 import { ExternalAssetCursor } from "@galacticcouncil/apps"
 import { getExternalId } from "utils/externalAssets"
 import { pingRpc } from "utils/rpc"
+import { PolkadotEvmRpcProvider } from "utils/provider"
 
 export type TEnv = "testnet" | "mainnet"
 export type ProviderProps = {
@@ -273,8 +274,11 @@ export const useProviderData = () => {
 
       const balanceClient = new BalanceClient(api)
 
+      const evm = new PolkadotEvmRpcProvider(api)
+
       return {
         api,
+        evm,
         tradeRouter,
         poolService,
         balanceClient,

src/providers/rpcProvider.tsx

@@ -18,9 +18,11 @@ import { useDisplayAssetStore } from "utils/displayAsset"
 import { useShareTokens } from "api/xyk"
 import { AssetsProvider } from "./assets"
 import { differenceInHours } from "date-fns"
+import { PolkadotEvmRpcProvider } from "utils/provider"
 
 type TProviderContext = {
   api: ApiPromise
+  evm: PolkadotEvmRpcProvider
   tradeRouter: TradeRouter
   poolService: PoolService
   balanceClient: BalanceClient
@@ -30,6 +32,7 @@ type TProviderContext = {
 const ProviderContext = createContext<TProviderContext>({
   isLoaded: false,
   api: {} as TProviderContext["api"],
+  evm: {} as TProviderContext["evm"],
   tradeRouter: {} as TradeRouter,
   featureFlags: {} as TProviderContext["featureFlags"],
   poolService: {} as TProviderContext["poolService"],
@@ -103,6 +106,7 @@ export const RpcProvider = ({ children }: { children: ReactNode }) => {
       return {
         poolService: providerData.poolService,
         api: providerData.api,
+        evm: providerData.evm,
         tradeRouter: providerData.tradeRouter,
         balanceClient: providerData.balanceClient,
         featureFlags: providerData.featureFlags,
@@ -113,6 +117,7 @@ export const RpcProvider = ({ children }: { children: ReactNode }) => {
     return {
       isLoaded: false,
       api: {} as TProviderContext["api"],
+      evm: {} as TProviderContext["evm"],
       tradeRouter: {} as TradeRouter,
       balanceClient: {} as BalanceClient,
       featureFlags: {

src/sections/lending/ui/header/DashboardHeaderValues.tsx

@@ -82,7 +82,9 @@ export const DashboardHeaderValues: FC<{
       (BN(underlyingBalance).gt(0) || BN(totalBorrows).gt(0)),
   )
 
-  const { data: vDotApy, isLoading: isVDotApyLoading } = useBifrostVDotApy()
+  const { data: vDotApy, isLoading: isVDotApyLoading } = useBifrostVDotApy({
+    enabled: vDotSuppliedOrBorrowed,
+  })
 
   return (
     <>

src/sections/wallet/assets/WalletAssets.utils.ts

@@ -8,6 +8,7 @@ import { useDisplayShareTokenPrice } from "utils/displayAsset"
 import { useAssetsData } from "./table/data/WalletAssetsTableData.utils"
 import { useAccountAssets } from "api/deposits"
 import BigNumber from "bignumber.js"
+import { useUserBorrowSummary } from "api/borrow"
 
 type AssetCategory = "all" | "assets" | "liquidity" | "farming"
 
@@ -46,6 +47,7 @@ export const useWalletAssetsTotals = ({
 }: {
   address?: string
 } = {}) => {
+  const borrows = useUserBorrowSummary(address)
   const assets = useAssetsData({ isAllAssets: false, address })
   const lpPositions = useOmnipoolPositionsData({ address })
   const farmsTotal = useFarmDepositsTotal(address)
@@ -61,6 +63,8 @@ export const useWalletAssetsTotals = ({
     shareTokenBalances.map((token) => token.asset.id),
   )
 
+  console.log(borrows.error)
+
   const assetsTotal = useMemo(
     () =>
       assets.data.reduce((acc, cur) => {
@@ -103,17 +107,21 @@ export const useWalletAssetsTotals = ({
     }, "0")
   }, [shareTokenBalances, spotPrices.data])
 
+  const borrowsTotal = borrows.data?.totalBorrowsUSD ?? "0"
+
   const balanceTotal = useMemo(
     () =>
       BigNumber(assetsTotal)
         .plus(farmsTotal.value)
         .plus(lpTotal)
         .plus(xykTotal)
+        .plus(borrowsTotal)
         .toString(),
-    [assetsTotal, farmsTotal.value, lpTotal, xykTotal],
+    [assetsTotal, farmsTotal.value, lpTotal, xykTotal, borrowsTotal],
   )
 
   const isLoading =
+    borrows.isLoading ||
     assets.isLoading ||
     lpPositions.isLoading ||
     farmsTotal.isLoading ||
@@ -125,6 +133,7 @@ export const useWalletAssetsTotals = ({
     farmsTotal: farmsTotal.value,
     lpTotal: BigNumber(lpTotal).plus(xykTotal).toString(),
     balanceTotal,
+    borrowsTotal: borrows.data?.totalBorrowsUSD ?? "0",
     isLoading,
   }
 }

src/sections/wallet/assets/header/WalletAssetsHeader.tsx

@@ -8,11 +8,18 @@ type Props = { disconnected?: boolean }
 
 export const WalletAssetsHeader = ({ disconnected }: Props) => {
   const { t } = useTranslation()
-  const { isLoading, balanceTotal, assetsTotal, farmsTotal, lpTotal } =
-    useWalletAssetsTotals()
+  const {
+    isLoading,
+    balanceTotal,
+    assetsTotal,
+    farmsTotal,
+    borrowsTotal,
+    lpTotal,
+  } = useWalletAssetsTotals()
+
   return (
     <HeaderValues
-      skeletonHeight={[19, 38]}
+      skeletonHeight={[19, 28]}
       sx={{ align: ["normal", "end"] }}
       values={[
         {
@@ -21,7 +28,7 @@ export const WalletAssetsHeader = ({ disconnected }: Props) => {
           content: (
             <WalletAssetsHeaderDisplay
               isLoading={isLoading}
-              fontSize={[19, 30]}
+              fontSize={[19, 24]}
               value={balanceTotal}
             />
           ),
@@ -32,7 +39,7 @@ export const WalletAssetsHeader = ({ disconnected }: Props) => {
           content: (
             <WalletAssetsHeaderDisplay
               isLoading={isLoading}
-              fontSize={[19, 30]}
+              fontSize={[19, 24]}
               value={assetsTotal}
             />
           ),
@@ -43,7 +50,7 @@ export const WalletAssetsHeader = ({ disconnected }: Props) => {
           content: (
             <WalletAssetsHeaderDisplay
               isLoading={isLoading}
-              fontSize={[19, 30]}
+              fontSize={[19, 24]}
               value={lpTotal}
             />
           ),
@@ -54,11 +61,22 @@ export const WalletAssetsHeader = ({ disconnected }: Props) => {
           content: (
             <WalletAssetsHeaderDisplay
               isLoading={isLoading}
-              fontSize={[19, 30]}
+              fontSize={[19, 24]}
               value={farmsTotal}
             />
           ),
         },
+        {
+          label: "Borrows",
+          disconnected: disconnected,
+          content: (
+            <WalletAssetsHeaderDisplay
+              isLoading={isLoading}
+              fontSize={[19, 24]}
+              value={borrowsTotal}
+            />
+          ),
+        },
       ]}
     />
   )

src/utils/provider.ts

@@ -0,0 +1,28 @@
+import { getNetwork, JsonRpcProvider, Network } from "@ethersproject/providers"
+import { ApiPromise, WsProvider } from "@polkadot/api"
+
+export class PolkadotEvmRpcProvider extends JsonRpcProvider {
+  provider: WsProvider
+
+  constructor(api: ApiPromise) {
+    const provider = PolkadotEvmRpcProvider.getProviderInstance(api)
+    const path = provider.endpoint
+    super(path)
+    this.provider = provider
+  }
+
+  async _uncachedDetectNetwork(): Promise<Network> {
+    const chainId = await this.send("eth_chainId", [])
+    return getNetwork(parseInt(chainId, 16))
+  }
+
+  static getProviderInstance(api: ApiPromise) {
+    // @ts-expect-error Property '_options' is protected
+    const options = api?._options
+    return options?.provider as WsProvider
+  }
+
+  send(method: string, params: Array<any> = []): Promise<any> {
+    return this.provider.send(method, params)
+  }
+}

src/utils/queryKeys.ts

@@ -331,4 +331,5 @@ export const QUERY_KEYS = {
   ) => ["xcmTransfer", asset, srcAddr, srcChain, dstAddr, dstChain],
   externalApi: (chain: string) => ["externalApi", chain],
   bifrostVDotApy: ["bifrostVDotApy"],
+  borrowUserSummary: (address: string) => ["borrowUserSummary", address],
 } as const