{props.accounts.map((account) => {
- const positionBalance = calculateAccountBalance(account, prices)
+ const positionBalance = calculateAccountDeposits(account, prices)
const isActive = selectedAccount === account.id
return (
diff --git a/src/components/Account/AccountMenu.tsx b/src/components/Account/AccountMenu.tsx
index bdb14314..a2aa2da8 100644
--- a/src/components/Account/AccountMenu.tsx
+++ b/src/components/Account/AccountMenu.tsx
@@ -9,6 +9,7 @@ interface Props {
}
async function Content(props: Props) {
+ if (props.params.address === undefined) return null
const accounts = await getAccounts(props.params.address)
return
}
diff --git a/src/components/Account/AccountSummary.tsx b/src/components/Account/AccountSummary.tsx
index 3a974dd2..93768596 100644
--- a/src/components/Account/AccountSummary.tsx
+++ b/src/components/Account/AccountSummary.tsx
@@ -8,7 +8,7 @@ import DisplayCurrency from 'components/DisplayCurrency'
import { ArrowChartLineUp } from 'components/Icons'
import Text from 'components/Text'
import useStore from 'store'
-import { calculateAccountBalance } from 'utils/accounts'
+import { calculateAccountDeposits } from 'utils/accounts'
import { BN } from 'utils/helpers'
interface Props {
@@ -19,7 +19,7 @@ interface Props {
export default function AccountSummary(props: Props) {
const prices = useStore((s) => s.prices)
const baseCurrency = useStore((s) => s.baseCurrency)
- const accountBalance = props.account ? calculateAccountBalance(props.account, prices) : BN(0)
+ const accountBalance = props.account ? calculateAccountDeposits(props.account, prices) : BN(0)
if (!props.account) return null
return (
diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx
index 72007fb6..cd57f1df 100644
--- a/src/components/Divider.tsx
+++ b/src/components/Divider.tsx
@@ -1,10 +1,13 @@
+import classNames from 'classnames'
+
interface Props {
orientation?: 'horizontal' | 'vertical'
+ className?: string
}
export default function Divider(props: Props) {
if (props.orientation === 'vertical') {
- return
+ return
}
- return
+ return
}
diff --git a/src/components/Modals/BorrowModal.tsx b/src/components/Modals/BorrowModal.tsx
index 00a26129..c2cd3682 100644
--- a/src/components/Modals/BorrowModal.tsx
+++ b/src/components/Modals/BorrowModal.tsx
@@ -1,5 +1,7 @@
+'use client'
+
import Image from 'next/image'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
import AccountSummary from 'components/Account/AccountSummary'
import { Button } from 'components/Button'
@@ -7,16 +9,17 @@ import Card from 'components/Card'
import Divider from 'components/Divider'
import { ArrowRight } from 'components/Icons'
import Modal from 'components/Modal'
+import Select from 'components/Select/Select'
import Text from 'components/Text'
import TitleAndSubCell from 'components/TitleAndSubCell'
import TokenInputWithSlider from 'components/TokenInputWithSlider'
import { ASSETS } from 'constants/assets'
import useCurrentAccount from 'hooks/useCurrentAccount'
+import useToggle from 'hooks/useToggle'
import useStore from 'store'
import { hardcodedFee } from 'utils/contants'
import { formatPercent, formatValue } from 'utils/formatters'
import { BN } from 'utils/helpers'
-import useParams from 'utils/route'
function getDebtAmount(modal: BorrowModal | null) {
if (!(modal?.marketData as BorrowAssetActive)?.debt) return '0'
@@ -29,46 +32,57 @@ function getAssetLogo(modal: BorrowModal | null) {
}
export default function BorrowModal() {
- const params = useParams()
const currentAccount = useCurrentAccount()
const [percentage, setPercentage] = useState(0)
const [amount, setAmount] = useState(BN(0))
- const [selectedAccount, setSelectedAccount] = useState(params.accountId)
+ const [change, setChange] = useState
()
+ const [selectedAccount, setSelectedAccount] = useState(currentAccount)
+ const [isConfirming, setIsConfirming] = useToggle()
const modal = useStore((s) => s.borrowModal)
const borrow = useStore((s) => s.borrow)
const repay = useStore((s) => s.repay)
const asset = modal?.asset ?? ASSETS[0]
- const accounts = useStore((s) => s.accounts)?.map((account) => {
- return account.id
+ const accounts = useStore((s) => s.accounts)
+ const accountOptions = accounts?.map((account) => {
+ return { value: account.id, label: `Account ${account.id}` }
})
+ const isRepay = modal?.isRepay ?? false
- function onAccountSelect(accountId: string) {
- setSelectedAccount(accountId)
+ function resetState() {
+ setAmount(BN(0))
+ setPercentage(0)
+ setIsConfirming(false)
}
- function onConfirmClick() {
+ async function onConfirmClick() {
if (!modal?.asset) return
- if (modal.isRepay) {
- repay({
+ setIsConfirming(true)
+ let result
+ if (isRepay) {
+ result = await repay({
fee: hardcodedFee,
- accountId: selectedAccount,
+ accountId: selectedAccount?.id ?? '0',
coin: { denom: modal.asset.denom, amount: amount.toString() },
accountBalance: percentage === 100,
})
- return
+ } else {
+ result = await borrow({
+ fee: hardcodedFee,
+ accountId: selectedAccount?.id ?? '0',
+ coin: { denom: modal.asset.denom, amount: amount.toString() },
+ })
}
- borrow({
- fee: hardcodedFee,
- accountId: selectedAccount,
- coin: { denom: modal.asset.denom, amount: amount.toString() },
- })
+ setIsConfirming(false)
+ if (result) {
+ resetState()
+ useStore.setState({ borrowModal: null })
+ }
}
function onClose() {
+ resetState()
useStore.setState({ borrowModal: null })
- setAmount(BN(0))
- setPercentage(0)
}
const liquidityAmountString = formatValue(modal?.marketData?.liquidity?.amount || 0, {
@@ -81,7 +95,31 @@ export default function BorrowModal() {
decimals: 6,
})
- const max = BN(modal?.isRepay ? getDebtAmount(modal) : liquidityAmountString)
+ const max = BN(isRepay ? getDebtAmount(modal) : modal?.marketData?.liquidity?.amount ?? '0')
+
+ useEffect(() => {
+ if (!selectedAccount)
+ setSelectedAccount(currentAccount)
+ }, [selectedAccount, currentAccount])
+
+ useEffect(() => {
+ if (!modal?.asset) return
+
+ setChange({
+ deposits: [
+ {
+ amount: isRepay ? BN(0).minus(amount).toString() : BN(0).plus(amount).toString(),
+ denom: modal.asset.denom,
+ },
+ ],
+ debts: [
+ {
+ amount: isRepay ? BN(0).minus(amount).toString() : BN(0).plus(amount).toString(),
+ denom: modal.asset.denom,
+ },
+ ],
+ })
+ }, [amount, modal?.asset, currentAccount, isRepay])
return (
{getAssetLogo(modal)}
- {modal?.isRepay ? 'Repay' : 'Borrow'} {asset.symbol}
+ {isRepay ? 'Repay' : 'Borrow'} {asset.symbol}
}
@@ -119,39 +157,43 @@ export default function BorrowModal() {
)
diff --git a/src/components/Modals/FundAndWithdrawModal.tsx b/src/components/Modals/FundAndWithdrawModal.tsx
index e87f1e62..4d3430f5 100644
--- a/src/components/Modals/FundAndWithdrawModal.tsx
+++ b/src/components/Modals/FundAndWithdrawModal.tsx
@@ -19,7 +19,7 @@ import { BN } from 'utils/helpers'
export default function FundAndWithdrawModal() {
const currentAccount = useCurrentAccount()
- const modal = useStore((s) => s.fundAndWithdrawModal)
+ const modal = useStore