Withdraw and fund fix (#756)

* fix: fixed markets.find(byDenom())

* fix: fixed the account Summary in modals

* fix: fixed the withdraw lent assets logic

src/components/Modals/BorrowModal.tsx

@@ -107,7 +107,7 @@ function BorrowModal(props: Props) {
   )
 
   const overpayExeedsCap = useMemo(() => {
-    const marketAsset = markets.find(byDenom(asset.denom))
+    const marketAsset = markets.find((market) => market.asset.denom === asset.denom)
     if (!marketAsset) return
     const overpayAmount = totalDebtRepayAmount.minus(totalDebt)
     const marketCapAfterOverpay = marketAsset.cap.used.plus(overpayAmount)

src/components/Modals/FundWithdraw/WithdrawFromAccount.tsx

@@ -51,9 +51,8 @@ export default function WithdrawFromAccount(props: Props) {
   const accountLent = account.lends.find(byDenom(currentAsset.denom))?.amount ?? BN_ZERO
   const shouldReclaim = amount.isGreaterThan(accountDeposit) && !accountLent.isZero()
   const isReclaimingMaxAmount = accountLent.isLessThanOrEqualTo(amount.minus(accountDeposit))
-  const reclaimAmount = isReclaimingMaxAmount
-    ? amount
-    : accountLent.minus(amount).minus(accountDeposit)
+
+  const reclaimAmount = isReclaimingMaxAmount ? amount : amount.minus(accountDeposit)
 
   function onChangeAmount(val: BigNumber) {
     setAmount(val)

src/components/Modals/ModalContentWithSummary.tsx

@@ -5,7 +5,6 @@ import AccountSummary from 'components/account/AccountSummary'
 import Card from 'components/common/Card'
 import { CircularProgress } from 'components/common/CircularProgress'
 import Modal, { ModalProps } from 'components/Modals/Modal'
-import useStore from 'store'
 
 interface Props extends ModalProps {
   isHls?: boolean
@@ -36,7 +35,6 @@ function modalContent(content: React.ReactNode, isContentCard?: boolean, account
 }
 
 export default function ModalContentWithSummary(props: Props) {
-  const updatedAccount = useStore((s) => s.updatedAccount)
   return (
     <Modal
       {...props}
@@ -48,9 +46,7 @@ export default function ModalContentWithSummary(props: Props) {
     >
       {props.subHeader && props.subHeader}
       {modalContent(props.content, props.isContentCard, props.account)}
-      {props.account && (
-        <AccountSummary account={updatedAccount || props.account} isHls={props.isHls} />
-      )}
+      {props.account && <AccountSummary account={props.account} isHls={props.isHls} />}
     </Modal>
   )
 }

src/components/account/AccountBalancesTable/Columns/Apy.tsx

@@ -1,5 +1,4 @@
 import AssetRate from 'components/common/assets/AssetRate'
-import { byDenom } from 'utils/array'
 
 export const APY_META = { accessorKey: 'apy', header: 'APY', meta: { className: 'w-30' } }
 
@@ -14,7 +13,8 @@ export default function Apr(props: Props) {
   const { markets, type, denom, apy } = props
 
   if (apy === 0) return <p className='w-full text-xs text-right number'>&ndash;</p>
-  const isEnabled = markets.find(byDenom(denom))?.borrowEnabled ?? false
+  const isEnabled =
+    markets.find((market) => market.asset.denom === props.denom)?.borrowEnabled ?? false
 
   return (
     <AssetRate

src/components/account/AccountBalancesTable/Columns/Size.tsx

@@ -1,5 +1,6 @@
 import { Row } from '@tanstack/react-table'
 import classNames from 'classnames'
+import { useMemo } from 'react'
 
 import { getAmountChangeColor } from 'components/account/AccountBalancesTable/functions'
 import { FormattedNumber } from 'components/common/FormattedNumber'
@@ -27,10 +28,9 @@ export const sizeSortingFn = (a: Row<AccountBalanceRow>, b: Row<AccountBalanceRo
 
 export default function Size(props: Props) {
   const { amountChange, type, size } = props
+  const color = useMemo(() => getAmountChangeColor(type, amountChange), [amountChange, type])
 
   if (type === 'vault') return <p className='text-xs text-right number'>&ndash;</p>
-
-  const color = getAmountChangeColor(type, amountChange)
   const className = classNames('text-xs text-right', color)
   const allowZero = !amountChange.isZero()
 
@@ -47,6 +47,7 @@ export default function Size(props: Props) {
   const formattedAmount = formatAmountToPrecision(size, MAX_AMOUNT_DECIMALS)
   const minimumAmount = allowZero ? 0 : MIN_AMOUNT
   const lowAmount = formattedAmount === 0 ? minimumAmount : Math.max(formattedAmount, MIN_AMOUNT)
+
   return (
     <FormattedNumber
       className={className}

src/components/account/AccountBalancesTable/useAccountBalanceData.tsx

@@ -37,6 +37,7 @@ export default function useAccountBalanceData(props: Props) {
         ? hlsStrategies.find((strategy) => strategy.denoms.deposit === asset.denom)?.apy ?? 0
         : 0
       const prevDeposit = updatedAccount ? account?.deposits.find(byDenom(deposit.denom)) : deposit
+
       deposits.push(
         getAssetAccountBalanceRow('deposit', asset, prices, assets, deposit, apy, prevDeposit),
       )

src/components/account/AccountFund/AccountFundContent.tsx

@@ -128,7 +128,7 @@ export default function AccountFundContent(props: Props) {
   const depositCapReachedCoins = useMemo(() => {
     const depositCapReachedCoins: BNCoin[] = []
     fundingAssets.forEach((asset) => {
-      const marketAsset = markets.find(byDenom(asset.denom))
+      const marketAsset = markets.find((market) => market.asset.denom === asset.denom)
       if (!marketAsset) return
 
       const capLeft = getCapLeftWithBuffer(marketAsset.cap)

src/components/common/Select/Option.tsx

@@ -9,7 +9,6 @@ import { BN_ZERO } from 'constants/math'
 import useAsset from 'hooks/assets/useAsset'
 import useMarkets from 'hooks/markets/useMarkets'
 import { BNCoin } from 'types/classes/BNCoin'
-import { byDenom } from 'utils/array'
 import { formatValue } from 'utils/formatters'
 
 interface Props extends SelectOption {
@@ -33,7 +32,7 @@ export default function Option(props: Props) {
 
   if (isCoin) {
     const balance = props.amount ?? BN_ZERO
-    const marketAsset = markets.find(byDenom(props.denom || ''))
+    const marketAsset = markets.find((market) => market.asset.denom === props.denom)
 
     if (!asset || !marketAsset) return null
 

src/components/common/TokenInput/index.tsx

@@ -54,7 +54,7 @@ export default function TokenInput(props: Props) {
       <div
         data-testid='token-input-wrapper'
         className={classNames(
-          'relative isolate z-20 box-content flex h-11 w-full rounded-sm border bg-white/5',
+          'relative isolate z-40 box-content flex h-11 w-full rounded-sm border bg-white/5',
           props.warningMessages.length ? 'border-warning' : 'border-white/20',
         )}
       >

src/components/trade/TradeModule/SwapForm/index.tsx

@@ -63,7 +63,8 @@ export default function SwapForm(props: Props) {
     inputAsset.denom,
     outputAsset.denom,
   )
-  const isBorrowEnabled = !!markets.find(byDenom(inputAsset.denom))?.borrowEnabled
+  const isBorrowEnabled = !!markets.find((market) => market.asset.denom === inputAsset.denom)
+    ?.borrowEnabled
   const isRepayable = !!account?.debts.find(byDenom(outputAsset.denom))
   const [isMarginChecked, setMarginChecked] = useToggle(isBorrowEnabled ? useMargin : false)
   const [isAutoRepayChecked, setAutoRepayChecked] = useToggle(
@@ -85,7 +86,7 @@ export default function SwapForm(props: Props) {
   const assets = useMarketEnabledAssets()
 
   const depositCapReachedCoins: BNCoin[] = useMemo(() => {
-    const outputMarketAsset = markets.find(byDenom(outputAsset.denom))
+    const outputMarketAsset = markets.find((market) => market.asset.denom === outputAsset.denom)
 
     if (!outputMarketAsset) return []