feat: multi market support

apps/frontend-v2/src/components/DashboardView/Header.tsx

@@ -1,14 +1,15 @@
-import { useBorrowRate, useSupplyRate, useUserSupplyBorrow } from '@/hooks';
-import { usePrice } from '@/hooks';
-import { useUserCollateralAssets } from '@/hooks';
 import {
-  TOKENS_BY_SYMBOL,
-  TOKENS_LIST,
-  formatUnits,
-  getBorrowApr,
-  getSupplyApr,
-  getTotalSuppliedBalance,
-} from '@/utils';
+  useBorrowCapacity,
+  useBorrowRate,
+  useCollateralConfigurations,
+  useMarketConfiguration,
+  usePrice,
+  useSupplyRate,
+  useUserCollateralAssets,
+  useUserSupplyBorrow,
+} from '@/hooks';
+
+import { formatUnits, getBorrowApr, getSupplyApr } from '@/utils';
 import BigNumber from 'bignumber.js';
 import React, { useMemo } from 'react';
 
@@ -17,42 +18,70 @@ export const Header = () => {
   const { data: supplyRate } = useSupplyRate();
   const { data: userSupplyBorrow } = useUserSupplyBorrow();
   const { data: userCollateralAssets } = useUserCollateralAssets();
-  const { data: priceData } = usePrice(TOKENS_LIST.map((i) => i.assetId));
-
-  // TODO[Martin]: Later implement this using loading and error states.
-  const borrowedBalance = useMemo(() => {
-    if (userSupplyBorrow == null) return new BigNumber(0);
-    return userSupplyBorrow[1];
-  }, [userSupplyBorrow]);
-  const suppliedBalance = useMemo(() => {
-    if (userSupplyBorrow == null) return new BigNumber(0);
-    return userSupplyBorrow[0];
-  }, [userSupplyBorrow]);
+  const { data: priceData } = usePrice();
+  const { data: marketConfiguration } = useMarketConfiguration();
+  const { data: colateralConfigurations } = useCollateralConfigurations();
+  const { data: borrowCapacity } = useBorrowCapacity();
 
   const totalSuppliedBalance = useMemo(() => {
-    return getTotalSuppliedBalance(
-      suppliedBalance,
-      userCollateralAssets ?? {},
-      priceData?.prices ?? {}
+    if (
+      !marketConfiguration ||
+      !userSupplyBorrow ||
+      !priceData ||
+      !userCollateralAssets ||
+      !colateralConfigurations
+    ) {
+      return BigNumber(0).toFormat(2);
+    }
+
+    const baseTokenSupliedBalance = formatUnits(
+      userSupplyBorrow.supplied.times(
+        priceData.prices[marketConfiguration.baseToken]
+      ),
+      marketConfiguration.baseTokenDecimals
     );
-  }, [userSupplyBorrow, userCollateralAssets, priceData]);
 
-  const borrowed = formatUnits(
-    borrowedBalance ?? new BigNumber(0),
-    TOKENS_BY_SYMBOL.USDC.decimals
-  ).toFormat(2);
+    const collateralSuppiedBalance = Object.entries(
+      userCollateralAssets
+    ).reduce((acc, [key, value]) => {
+      return acc.plus(
+        formatUnits(
+          value.times(priceData.prices[key]),
+          colateralConfigurations[key].decimals
+        )
+      );
+    }, new BigNumber(0));
+
+    return baseTokenSupliedBalance.plus(collateralSuppiedBalance).toFormat(2);
+  }, [
+    userSupplyBorrow,
+    userCollateralAssets,
+    priceData,
+    marketConfiguration,
+    colateralConfigurations,
+  ]);
 
   const borrowApr = useMemo(() => getBorrowApr(borrowRate), [borrowRate]);
 
   const supplyApr = useMemo(() => getSupplyApr(supplyRate), [supplyRate]);
 
+  if (!marketConfiguration) return <div>Loading...</div>;
+
   return (
     <div className="flex justify-between">
       <div>Supplied Balance: {totalSuppliedBalance}$</div>
       <div>
         Supply{supplyApr}/borrow APR{borrowApr}
       </div>
-      <div>Borrowed balance: {borrowed}$</div>
+      <div>
+        Borrowed balance:{' '}
+        {formatUnits(
+          userSupplyBorrow?.borrowed ?? new BigNumber(0),
+          marketConfiguration.baseTokenDecimals
+        ).toFormat(2)}
+        $
+      </div>
+      <div>Borrow capacity: {borrowCapacity?.toFormat(2)}</div>
     </div>
   );
 };

apps/frontend-v2/src/components/DashboardView/Input.tsx

@@ -1,9 +1,12 @@
-import { usePrice, useSupplyCollateral } from '@/hooks';
-import { useSupplyBase } from '@/hooks/useSupplyBase';
-import { useWithdrawBase } from '@/hooks/useWithdrawBase';
-import { useWithdrawCollateral } from '@/hooks/useWithdrawCollateral';
+import {
+  useMarketConfiguration,
+  usePrice,
+  useSupplyBase,
+  useSupplyCollateral,
+  useWithdrawBase,
+  useWithdrawCollateral,
+} from '@/hooks';
 import { ACTION_TYPE, useMarketStore } from '@/stores';
-import { TOKENS_BY_SYMBOL, TOKENS_LIST } from '@/utils';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 import { Button } from '../ui/button';
@@ -20,13 +23,15 @@ export const Input = () => {
     changeActionTokenAssetId,
   } = useMarketStore();
 
+  const { data: marketConfiguration } = useMarketConfiguration();
+
   const handleBaseTokenClick = (action: ACTION_TYPE) => {
     changeAction(action);
     changeTokenAmount(BigNumber(0));
-    changeActionTokenAssetId(TOKENS_BY_SYMBOL.USDC.assetId);
+    changeActionTokenAssetId(marketConfiguration?.baseToken);
   };
 
-  const { data: priceData } = usePrice(TOKENS_LIST.map((i) => i.assetId));
+  const { data: priceData } = usePrice();
 
   const { mutate: supplyCollateral } = useSupplyCollateral({
     actionTokenAssetId,
@@ -41,9 +46,11 @@ export const Input = () => {
   const { mutate: withdrawBase } = useWithdrawBase();
 
   const handleSubmit = () => {
+    if (!marketConfiguration) return;
+
     switch (action) {
       case ACTION_TYPE.SUPPLY: {
-        if (actionTokenAssetId === TOKENS_BY_SYMBOL.USDC.assetId) {
+        if (actionTokenAssetId === marketConfiguration.baseToken) {
           supplyBase(tokenAmount);
         } else {
           supplyCollateral(tokenAmount);
@@ -53,7 +60,7 @@ export const Input = () => {
       case ACTION_TYPE.WITHDRAW: {
         if (!priceData) return;
 
-        if (actionTokenAssetId === TOKENS_BY_SYMBOL.USDC.assetId) {
+        if (actionTokenAssetId === marketConfiguration.baseToken) {
           withdrawBase({
             tokenAmount,
             priceUpdateData: priceData.priceUpdateData,