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' > + + +