diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
index 4264680fe15..901bd5c356b 100644
--- a/src/assets/translations/en/main.json
+++ b/src/assets/translations/en/main.json
@@ -2214,6 +2214,7 @@
"risky": "Risky",
"confirmAndBorrow": "Confirm and Borrow",
"confirmAndRepay": "Confirm and Repay",
+ "borrowAgain": "Borrow Again",
"transactionInfo": "Transaction Summary",
"repayNoticeTitle": "Hold Up!",
"repayNoticeCta": "I understand",
diff --git a/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx b/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx
index e96fa6e2f7d..a7d12547787 100644
--- a/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx
+++ b/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx
@@ -1,4 +1,14 @@
-import { Button, CardFooter, Collapse, Skeleton, Stack } from '@chakra-ui/react'
+import { ArrowDownIcon } from '@chakra-ui/icons'
+import {
+ Button,
+ CardFooter,
+ Collapse,
+ Divider,
+ Flex,
+ IconButton,
+ Skeleton,
+ Stack,
+} from '@chakra-ui/react'
import { type AccountId, type AssetId } from '@shapeshiftoss/caip'
import noop from 'lodash/noop'
import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -79,6 +89,7 @@ export const BorrowInput = ({
}, [borrowAssets, setBorrowAsset])
const collateralAsset = useAppSelector(state => selectAssetById(state, collateralAssetId))
+ const swapIcon = useMemo(() => , [])
const percentOptions = useMemo(() => [0], [])
@@ -330,6 +341,20 @@ export const BorrowInput = ({
layout='inline'
labelPostFix={collateralAssetSelectComponent}
/>
+
+
+
+
+
{
- const [isLoanClosePending, setIsLoanClosePending] = useState(false)
+ const [isLoanClosePending, setIsLoanClosePending] = useState(undefined)
const [txHash, setTxHash] = useState(null)
const {
@@ -158,7 +158,9 @@ export const RepayConfirm = ({
)
const selectedCurrency = useAppSelector(selectSelectedCurrency)
- const handleRepay = useCallback(async () => {
+ const handleConfirm = useCallback(async () => {
+ if (isLoanClosePending === false) return history.push(RepayRoutePaths.Input)
+
if (
!(
repaymentAsset &&
@@ -218,6 +220,8 @@ export const RepayConfirm = ({
return maybeTxId
}, [
chainAdapter,
+ history,
+ isLoanClosePending,
lendingQuoteCloseData,
repaymentAccountId,
repaymentAmountCryptoPrecision,
@@ -238,6 +242,12 @@ export const RepayConfirm = ({
repaymentAsset,
})
+ const swapStatus = useMemo(() => {
+ if (isLoanClosePending === false) return TxStatus.Confirmed
+ if (isLoanClosePending) return TxStatus.Pending
+ return TxStatus.Unknown
+ }, [isLoanClosePending])
+
if (!collateralAsset || !repaymentAsset) return null
return (
@@ -255,7 +265,7 @@ export const RepayConfirm = ({
sellIcon={repaymentAsset?.icon ?? ''}
buyColor={collateralAsset?.color ?? ''}
sellColor={repaymentAsset?.color ?? ''}
- status={TxStatus.Unknown}
+ status={swapStatus}
px={6}
mb={4}
/>
@@ -347,12 +357,14 @@ export const RepayConfirm = ({
isLendingQuoteCloseLoading || isEstimatedFeesDataLoading || isLoanClosePending
}
disabled={isLoanClosePending}
- onClick={handleRepay}
+ onClick={handleConfirm}
colorScheme='blue'
size='lg'
width='full'
>
- {translate('lending.confirmAndRepay')}
+ {translate(
+ isLoanClosePending === false ? 'lending.borrowAgain' : 'lending.confirmAndRepay',
+ )}
diff --git a/src/pages/Lending/Pool/components/Repay/RepayInput.tsx b/src/pages/Lending/Pool/components/Repay/RepayInput.tsx
index 09d5d868d0c..7033f0bd4d7 100644
--- a/src/pages/Lending/Pool/components/Repay/RepayInput.tsx
+++ b/src/pages/Lending/Pool/components/Repay/RepayInput.tsx
@@ -313,7 +313,9 @@ export const RepayInput = ({
- {/* Actually defined at display time, see isLoaded above */}
+
+ {/* Actually defined at display time, see isLoaded above */}
+
diff --git a/src/pages/Lending/YourLoans.tsx b/src/pages/Lending/YourLoans.tsx
index 4d30c259983..e75470b6ed9 100644
--- a/src/pages/Lending/YourLoans.tsx
+++ b/src/pages/Lending/YourLoans.tsx
@@ -8,9 +8,12 @@ import { HelperTooltip } from 'components/HelperTooltip/HelperTooltip'
import { Main } from 'components/Layout/Main'
import { AssetCell } from 'components/StakingVaults/Cells'
import { RawText, Text } from 'components/Text'
+import type { TextPropTypes } from 'components/Text/Text'
import type { Asset } from 'lib/asset-service'
import { bnOrZero } from 'lib/bignumber/bignumber'
import { isSome } from 'lib/utils'
+import { selectAccountNumberByAccountId } from 'state/slices/selectors'
+import { useAppSelector } from 'state/store'
import { LendingHeader } from './components/LendingHeader'
import { useAllLendingPositionsData } from './hooks/useAllLendingPositionsData'
@@ -47,6 +50,16 @@ const LendingRowGrid = ({ asset, accountId, onPoolClick }: LendingRowGridProps)
onPoolClick(asset.assetId, accountId)
}, [accountId, asset.assetId, onPoolClick])
+ const accountNumberFilter = useMemo(
+ () => ({ assetId: asset.assetId, accountId }),
+ [accountId, asset.assetId],
+ )
+ const accountNumber = useAppSelector(s => selectAccountNumberByAccountId(s, accountNumberFilter))
+ const accountNumberTranslation: TextPropTypes['translation'] = useMemo(
+ () => ['accounts.accountNumber', { accountNumber }],
+ [accountNumber],
+ )
+
if (
lendingPositionData &&
bnOrZero(lendingPositionData.collateralBalanceCryptoPrecision)
@@ -71,6 +84,11 @@ const LendingRowGrid = ({ asset, accountId, onPoolClick }: LendingRowGridProps)
onClick={handlePoolClick}
>
+
+
+
+
+
@@ -160,6 +178,9 @@ export const YourLoans = () => {
fontSize='sm'
>
+
+
+