diff --git a/src/components/Borrow/AssetExpanded.tsx b/src/components/Borrow/AssetExpanded.tsx
index d4608ee9..589f64ae 100644
--- a/src/components/Borrow/AssetExpanded.tsx
+++ b/src/components/Borrow/AssetExpanded.tsx
@@ -30,7 +30,10 @@ export default function AssetExpanded(props: AssetRowProps) {
}
function repayHandler() {
- useStore.setState({ repayModal: true })
+ if (!asset) return null
+ useStore.setState({
+ borrowModal: { asset: asset, marketData: props.row.original, isRepay: true },
+ })
}
return (
@@ -51,7 +54,7 @@ export default function AssetExpanded(props: AssetRowProps) {
color='primary'
text={isActive ? 'Borrow more' : 'Borrow'}
/>
- {isActive && }
+ {isActive && }
diff --git a/src/components/BorrowModal.tsx b/src/components/BorrowModal.tsx
index f15927c1..0f3df348 100644
--- a/src/components/BorrowModal.tsx
+++ b/src/components/BorrowModal.tsx
@@ -24,6 +24,7 @@ export default function BorrowModal() {
const [selectedAccount, setSelectedAccount] = useState(params.account)
const modal = useStore((s) => s.borrowModal)
const borrow = useStore((s) => s.borrow)
+ const repay = useStore((s) => s.repay)
const creditAccounts = useStore((s) => s.creditAccounts)
function onAccountSelect(accountId: string) {
@@ -32,13 +33,25 @@ export default function BorrowModal() {
function setOpen(isOpen: boolean) {
useStore.setState({ borrowModal: null })
+ setValue(0)
+ setPercentage(0)
}
- function onBorrowClick() {
+ function onConfirmClick() {
if (!modal?.asset) return
const amount = new BigNumber(value).shiftedBy(modal.asset.decimals)
+ if (modal.isRepay) {
+ repay({
+ fee: hardcodedFee,
+ accountId: selectedAccount,
+ coin: { denom: modal.asset.denom, amount: amount.toString() },
+ accountBalance: percentage === 100,
+ })
+ return
+ }
+
borrow({
fee: hardcodedFee,
accountId: selectedAccount,
@@ -47,15 +60,22 @@ export default function BorrowModal() {
}
const onSliderChange = useCallback(
- (percentage: number, liquidityAmount: number) =>
- setValue(new BigNumber(percentage).div(100).times(liquidityAmount).toNumber()),
- [],
+ (percentage: number, maxAmount: number) => {
+ const amount = new BigNumber(percentage).div(100).times(maxAmount).toNumber()
+
+ setValue(amount)
+ setPercentage(percentage)
+ },
+ [modal?.asset.decimals],
)
- const onInputChange = useCallback((value: number, liquidityAmount: number) => {
- setValue(value)
- setPercentage(new BigNumber(value).div(liquidityAmount).times(100).toNumber())
- }, [])
+ const onInputChange = useCallback(
+ (value: number, maxAmount: number) => {
+ setValue(value)
+ setPercentage(new BigNumber(value).div(maxAmount).times(100).toNumber())
+ },
+ [modal?.asset.decimals],
+ )
if (!modal) return null
@@ -71,6 +91,15 @@ export default function BorrowModal() {
decimals: 6,
})
+ let debtAmount = 0
+
+ if ((modal.marketData as BorrowAssetActive)?.debt)
+ debtAmount = Number((modal.marketData as BorrowAssetActive).debt)
+
+ const maxAmount = new BigNumber(modal.isRepay ? debtAmount : liquidityAmount)
+ .shiftedBy(-modal.asset.decimals)
+ .toNumber()
+
return (
- Borrow {modal.asset.symbol}
+
+ {modal.isRepay ? 'Repay' : 'Borrow'} {modal.asset.symbol}
+
}
headerClassName='gradient-header pl-2 pr-2.5 py-2.5 border-b-white/5 border-b'
@@ -90,7 +121,10 @@ export default function BorrowModal() {
sub={'Borrow rate'}
/>
-
+
onInputChange(value, liquidityAmount)}
+ onChange={(value) => onInputChange(value, maxAmount)}
value={value}
- max={liquidityAmount}
+ max={maxAmount}
/>
- onSliderChange(value, liquidityAmount)} />
+ onSliderChange(value, maxAmount)} />
- Borrow to
+ {modal.isRepay ? 'Repay for' : 'Borrow to'}