diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx index 2035639a..dcd6eb3a 100644 --- a/components/Modal/index.tsx +++ b/components/Modal/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useEffect, useState, createContext } from "react"; import { Modal as MUIModal, Typography, Box, Stack, useTheme } from "@mui/material"; import Decimal from "decimal.js"; @@ -40,6 +40,7 @@ import { CollateralTypeSelectorRepay, } from "./CollateralTypeSelector"; +export const ModalContext = createContext(null) as any; const Modal = () => { const isOpen = useAppSelector(getModalStatus); const accountId = useAppSelector(getAccountId); @@ -124,60 +125,66 @@ const Modal = () => { }, }} > - - {!accountId && } - - {action === "Borrow" ? ( - - ) : null} - {action === "Repay" ? ( - - ) : null} - - -
- - {action === "Repay" && - isRepayFromDeposits && - selectedCollateralType !== DEFAULT_POSITION ? ( - + + + {!accountId && } + + {action === "Borrow" ? ( + ) : null} - - - {!canUseAsCollateral ? ( - - ) : ( - - )} - {/* */} -
- - - + ) : null} + + +
+ + {action === "Repay" && + isRepayFromDeposits && + selectedCollateralType !== DEFAULT_POSITION ? ( + + ) : null} + + + {!canUseAsCollateral ? ( + + ) : ( + + )} + {/* */} +
+ + + + ); diff --git a/components/SelectToken/index.tsx b/components/SelectToken/index.tsx index 7c53ee6f..6fb4f8a6 100644 --- a/components/SelectToken/index.tsx +++ b/components/SelectToken/index.tsx @@ -14,6 +14,7 @@ import { CloseIcon } from "../Modal/svg"; import { toggleUseAsCollateral } from "../../redux/appSlice"; import { IToken } from "../../interfaces/asset"; import { DEFAULT_POSITION } from "../../utils/config"; +import { ModalContext } from "../Modal/index"; export type IAssetType = "borrow" | "supply"; type IBalance = { supply_balance?: string; borrow_balance?: string }; @@ -40,7 +41,7 @@ export default function SelectToken({ list.sort(sortByBalance); setAssetList(list); } - }, [Object.keys(updateAsset)?.length, rows?.length]); + }, [JSON.stringify(updateAsset), Object.keys(updateAsset)?.length, rows?.length]); const sortByBalance = assetType === "supply" ? sortBySupplyBalance : sortByBorrowBalance; function sortBySupplyBalance(b: IUIAsset, a: IUIAsset) { @@ -198,15 +199,18 @@ function GetBalance({ asset, updateAsset, setUpdateAsset, + position, }: { asset: IUIAsset; updateAsset: Record; setUpdateAsset: any; + position: string; }) { const { symbol, tokenId } = asset; const isWrappedNear = symbol === "NEAR"; const { supplyBalance, maxBorrowAmountPositions } = useUserBalance(tokenId, isWrappedNear); - const borrowBalance = maxBorrowAmountPositions[DEFAULT_POSITION]?.maxBorrowAmount?.toString(); // TODO + const borrowBalance = + maxBorrowAmountPositions[position || DEFAULT_POSITION]?.maxBorrowAmount?.toString(); updateAsset[tokenId] = { ...asset, supply_balance: supplyBalance, @@ -221,6 +225,7 @@ function GetBalance({ function TokenList() { const { rows, updateAsset, setUpdateAsset, assetList, assetType, handleClose, selectRef } = useContext(SelectTokenData) as any; + const { position } = useContext(ModalContext) as any; return ( <> {rows.map((asset: IUIAsset) => ( @@ -229,6 +234,7 @@ function TokenList() { asset={asset} updateAsset={updateAsset} setUpdateAsset={setUpdateAsset} + position={position} /> ))} {assetList.map((asset: IUIAsset) => ( diff --git a/hooks/useUserBalance.ts b/hooks/useUserBalance.ts index 5e46eded..7c5a27fe 100644 --- a/hooks/useUserBalance.ts +++ b/hooks/useUserBalance.ts @@ -19,6 +19,6 @@ export function useUserBalance(tokenId: string, isWrappedNear: boolean) { } else { supplyBalance = new Decimal(available || 0).toFixed(); } - // borrowBalance = Decimal.min(Math.max(0, maxBorrowAmount), availableLiquidity || 0).toFixed(); // TODO + // borrowBalance = Decimal.min(Math.max(0, maxBorrowAmount), availableLiquidity || 0).toFixed(); return { supplyBalance, maxBorrowAmountPositions }; } diff --git a/redux/selectors/getBorrowMaxAmount.ts b/redux/selectors/getBorrowMaxAmount.ts index 0d289247..4cd05ea8 100644 --- a/redux/selectors/getBorrowMaxAmount.ts +++ b/redux/selectors/getBorrowMaxAmount.ts @@ -1,28 +1,37 @@ import { createSelector } from "@reduxjs/toolkit"; +import Decimal from "decimal.js"; import { MAX_RATIO } from "../../store"; import { RootState } from "../store"; -import { hasAssets } from "../utils"; +import { hasAssets, transformAsset } from "../utils"; import { Assets } from "../assetState"; import { Portfolio } from "../accountState"; import { getAdjustedSum } from "./getWithdrawMaxAmount"; import { DEFAULT_POSITION } from "../../utils/config"; +import { UIAsset } from "../../interfaces"; -export const computeBorrowMaxAmount = (tokenId: string, assets: Assets, portfolio: Portfolio) => { +export const computeBorrowMaxAmount = (tokenId: string, assets: Assets, account, app) => { + const { portfolio } = account; const asset = assets[tokenId]; + const uiAsset: UIAsset = transformAsset(asset, account, assets, app); return Object.keys(portfolio.positions) .map((position: string) => { const adjustedCollateralSum = getAdjustedSum("collateral", portfolio, assets, position); const adjustedBorrowedSum = getAdjustedSum("borrowed", portfolio, assets, position); const volatiliyRatio = asset.config.volatility_ratio || 0; const price = asset.price?.usd || Infinity; - const maxBorrowPriced = adjustedCollateralSum + const maxBorrowPricedTemp = adjustedCollateralSum .sub(adjustedBorrowedSum) .mul(volatiliyRatio) .div(MAX_RATIO) .mul(95) .div(100); - const maxBorrowAmount = maxBorrowPriced.div(price); + const maxBorrowAmountTemp = maxBorrowPricedTemp.div(price); + const maxBorrowAmount = Decimal.min( + Math.max(0, maxBorrowAmountTemp.toNumber()), + uiAsset.availableLiquidity || 0, + ); + const maxBorrowPriced = maxBorrowAmountTemp.mul(price); return { [position]: { maxBorrowAmount: Math.max(maxBorrowAmount.toNumber(), 0), @@ -37,12 +46,13 @@ export const getBorrowMaxAmount = (tokenId: string) => createSelector( (state: RootState) => state.assets, (state: RootState) => state.account, - (assets, account) => { + (state: RootState) => state.app, + (assets, account, app) => { if (!account.accountId || !tokenId) return { [DEFAULT_POSITION]: { maxBorrowAmount: 0, maxBorrowValue: 0 } }; if (!hasAssets(assets)) return { [DEFAULT_POSITION]: { maxBorrowAmount: 0, maxBorrowValue: 0 } }; - const maxBorrowAmount = computeBorrowMaxAmount(tokenId, assets.data, account.portfolio); + const maxBorrowAmount = computeBorrowMaxAmount(tokenId, assets.data, account, app); return maxBorrowAmount; }, ); diff --git a/redux/utils.ts b/redux/utils.ts index 4a736094..28cd0a7e 100644 --- a/redux/utils.ts +++ b/redux/utils.ts @@ -69,7 +69,6 @@ export const transformAsset = ( shrinkToken(totalBorrowedD, asset.metadata.decimals + asset.config.extra_decimals), ); - // TODO: refactor: remove temp vars using ramda const temp1 = new Decimal(asset.supplied.balance) .plus(new Decimal(asset.reserved)) .plus(asset.prot_fee) @@ -91,7 +90,6 @@ export const transformAsset = ( extraDecimals: 0, }; - // TODO: refactor this without conditional if (account.accountId) { const decimals = asset.metadata.decimals + asset.config.extra_decimals; const supplied = Number( @@ -100,13 +98,13 @@ export const transformAsset = ( const collateral = Number( shrinkToken( asset.isLpToken - ? account.portfolio.positions[tokenId].collateral[tokenId]?.balance || 0 + ? account.portfolio.positions[tokenId]?.collateral?.[tokenId]?.balance || 0 : account.portfolio.collateral[tokenId]?.balance || 0, decimals, ), ); const borrowed = asset.isLpToken - ? account.portfolio.positions[tokenId].borrowed[tokenId]?.balance || 0 + ? account.portfolio.positions[tokenId]?.borrowed?.[tokenId]?.balance || 0 : account.portfolio.borrowed[tokenId]?.balance || 0; const available = account.balances[tokenId] || 0; const availableNEAR = account.balances["near"] || 0; diff --git a/utils/index.ts b/utils/index.ts index 1c256d2a..b63f2610 100644 --- a/utils/index.ts +++ b/utils/index.ts @@ -113,8 +113,6 @@ export const getBurrow = async ({ throw err; } }; - - /// TODO is this deprecated??? const call = async ( contract: Contract, methodName: string,