From 2662b6999c3d48494debc43262ec5a6964c4c167 Mon Sep 17 00:00:00 2001 From: gomes <17035424+gomesalexandre@users.noreply.github.com> Date: Thu, 23 Nov 2023 01:11:29 +0100 Subject: [PATCH] feat: don't update to newValue when mutation is pending --- src/assets/translations/en/main.json | 1 + .../TransactionsProvider.tsx | 2 +- .../Deposit/components/Status.tsx | 2 +- .../Withdraw/components/Status.tsx | 2 +- src/lib/utils/thorchain/index.ts | 6 +- src/pages/Lending/Pool/Pool.tsx | 42 +++++++++-- .../Lending/Pool/components/Borrow/Borrow.tsx | 22 +++++- .../Pool/components/Borrow/BorrowConfirm.tsx | 73 ++++++++++--------- .../Lending/Pool/components/Repay/Repay.tsx | 14 ++++ .../Pool/components/Repay/RepayConfirm.tsx | 69 +++++++++++------- .../Lending/hooks/useLendingPositionData.tsx | 9 ++- 11 files changed, 166 insertions(+), 76 deletions(-) diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json index 08757bca41b..8676f42c81c 100644 --- a/src/assets/translations/en/main.json +++ b/src/assets/translations/en/main.json @@ -2216,6 +2216,7 @@ "confirmAndBorrow": "Confirm and Borrow", "confirmAndRepay": "Confirm and Repay", "borrowAgain": "Borrow Again", + "repayAgain": "Repay Again", "transactionInfo": "Transaction Summary", "repayNoticeTitle": "Hold Up!", "repayNoticeCta": "I understand", diff --git a/src/context/TransactionsProvider/TransactionsProvider.tsx b/src/context/TransactionsProvider/TransactionsProvider.tsx index f2652361299..f0fe646ae58 100644 --- a/src/context/TransactionsProvider/TransactionsProvider.tsx +++ b/src/context/TransactionsProvider/TransactionsProvider.tsx @@ -129,7 +129,7 @@ export const TransactionsProvider: React.FC = ({ chil } else if (shouldRefetchSaversOpportunities) { // Artificial longer completion time, since THORChain Txs take around 15s after confirmation to be picked in the API // This way, we ensure "View Position" actually routes to the updated position - waitForThorchainUpdate({ txHash: txid }).promise.then(() => { + waitForThorchainUpdate({ txId: txid }).promise.then(() => { dispatch( getOpportunitiesUserData.initiate( [ diff --git a/src/features/defi/providers/thorchain-savers/components/ThorchainSaversManager/Deposit/components/Status.tsx b/src/features/defi/providers/thorchain-savers/components/ThorchainSaversManager/Deposit/components/Status.tsx index 3186bd92976..34c638befbf 100644 --- a/src/features/defi/providers/thorchain-savers/components/ThorchainSaversManager/Deposit/components/Status.tsx +++ b/src/features/defi/providers/thorchain-savers/components/ThorchainSaversManager/Deposit/components/Status.tsx @@ -87,7 +87,7 @@ export const Status: React.FC = ({ accountId }) => { ;(async () => { // Artificial longer completion time, since THORChain Txs take around 15s after confirmation to be picked in the API // This way, we ensure "View Position" actually routes to the updated position - await waitForThorchainUpdate({ txHash: confirmedTransaction.txid, skipOutbound: true }) + await waitForThorchainUpdate({ txId: confirmedTransaction.txid, skipOutbound: true }) .promise // Invalidate some react-queries everytime we poll - since status detection is currently suboptimal queryClient?.invalidateQueries({ queryKey: ['thorchainLendingPosition'], exact: false }) diff --git a/src/features/defi/providers/thorchain-savers/components/ThorchainSaversManager/Withdraw/components/Status.tsx b/src/features/defi/providers/thorchain-savers/components/ThorchainSaversManager/Withdraw/components/Status.tsx index d9a1bd1f447..01c6d4adb7f 100644 --- a/src/features/defi/providers/thorchain-savers/components/ThorchainSaversManager/Withdraw/components/Status.tsx +++ b/src/features/defi/providers/thorchain-savers/components/ThorchainSaversManager/Withdraw/components/Status.tsx @@ -86,7 +86,7 @@ export const Status: React.FC = ({ accountId }) => { ;(async () => { // Artificial longer completion time, since THORChain Txs take around 15s after confirmation to be picked in the API // This way, we ensure "View Position" actually routes to the updated position - await waitForThorchainUpdate({ txHash: confirmedTransaction.txid, skipOutbound: true }) + await waitForThorchainUpdate({ txId: confirmedTransaction.txid, skipOutbound: true }) .promise // Invalidate some react-queries everytime we poll - since status detection is currently suboptimal queryClient?.invalidateQueries({ queryKey: ['thorchainLendingPosition'], exact: false }) diff --git a/src/lib/utils/thorchain/index.ts b/src/lib/utils/thorchain/index.ts index ca31631060c..e9eadaaf34b 100644 --- a/src/lib/utils/thorchain/index.ts +++ b/src/lib/utils/thorchain/index.ts @@ -43,14 +43,14 @@ const getThorchainTransactionStatus = async (txHash: string, skipOutbound?: bool } export const waitForThorchainUpdate = ({ - txHash, + txId, skipOutbound, }: { - txHash: string + txId: string skipOutbound?: boolean }) => poll({ - fn: () => getThorchainTransactionStatus(txHash, skipOutbound), + fn: () => getThorchainTransactionStatus(txId, skipOutbound), validate: status => Boolean(status && status === TxStatus.Confirmed), interval: 60000, maxAttempts: 20, diff --git a/src/pages/Lending/Pool/Pool.tsx b/src/pages/Lending/Pool/Pool.tsx index 5cab3b53a17..ebb1645ba51 100644 --- a/src/pages/Lending/Pool/Pool.tsx +++ b/src/pages/Lending/Pool/Pool.tsx @@ -18,6 +18,7 @@ import { Tabs, } from '@chakra-ui/react' import type { AccountId } from '@shapeshiftoss/caip' +import { useMutationState } from '@tanstack/react-query' import type { Property } from 'csstype' import { useCallback, useMemo, useState } from 'react' import { useTranslate } from 'react-polyglot' @@ -92,6 +93,8 @@ const RepaymentLockComponentWithValue = ({ isLoaded, value }: AmountProps & Skel export const Pool = () => { const { poolAccountId } = useParams() const [stepIndex, setStepIndex] = useState(0) + const [borrowTxid, setBorrowTxid] = useState(null) + const [repayTxid, setRepayTxid] = useState(null) const [collateralAccountId, setCollateralAccountId] = useState(poolAccountId ?? '') const [borrowAsset, setBorrowAsset] = useState(null) const [repaymentAsset, setRepaymentAsset] = useState(null) @@ -107,12 +110,6 @@ export const Pool = () => { const translate = useTranslate() - const { data: lendingPositionData, isLoading: isLendingPositionDataLoading } = - useLendingPositionData({ - assetId: poolAssetId, - accountId: collateralAccountId, - }) - const useRepaymentLockDataArgs = useMemo( () => ({ assetId: poolAssetId, accountId: poolAccountId }), [poolAccountId, poolAssetId], @@ -124,6 +121,20 @@ export const Pool = () => { const headerComponent = useMemo(() => , []) + const lendingMutationStatus = useMutationState({ + filters: { mutationKey: [borrowTxid] }, + select: mutation => mutation.state.status, + }) + const isLoanPending = lendingMutationStatus?.[0] === 'pending' + const isLoanUpdated = lendingMutationStatus?.[0] === 'success' + + const { data: lendingPositionData, isLoading: isLendingPositionDataLoading } = + useLendingPositionData({ + assetId: poolAssetId, + accountId: collateralAccountId, + skip: isLoanPending, + }) + const useLendingQuoteQueryArgs = useMemo( () => ({ collateralAssetId: poolAssetId, @@ -140,6 +151,7 @@ export const Pool = () => { depositAmountCryptoPrecision, ], ) + const { data: lendingQuoteOpenData, isSuccess: isLendingQuoteSuccess } = useLendingQuoteOpenQuery(useLendingQuoteQueryArgs) @@ -175,6 +187,8 @@ export const Pool = () => { [asset?.symbol, lendingPositionData?.collateralBalanceCryptoPrecision], ) const newCollateralCrypto = useMemo(() => { + if (isLoanUpdated) return {} + if (stepIndex === 0 && isLendingQuoteSuccess && lendingQuoteOpenData) return { newValue: { @@ -195,6 +209,7 @@ export const Pool = () => { }, [ isLendingQuoteCloseSuccess, isLendingQuoteSuccess, + isLoanUpdated, lendingPositionData?.collateralBalanceCryptoPrecision, lendingQuoteCloseData, lendingQuoteOpenData, @@ -213,6 +228,8 @@ export const Pool = () => { ) const newCollateralFiat = useMemo(() => { + if (isLoanUpdated) return {} + if (stepIndex === 0 && lendingQuoteOpenData && lendingPositionData) return { newValue: { @@ -231,7 +248,7 @@ export const Pool = () => { } return {} - }, [lendingPositionData, lendingQuoteCloseData, lendingQuoteOpenData, stepIndex]) + }, [isLoanUpdated, lendingPositionData, lendingQuoteCloseData, lendingQuoteOpenData, stepIndex]) const debtBalanceComponent = useMemo( () => ( @@ -245,6 +262,8 @@ export const Pool = () => { ) const newDebt = useMemo(() => { + if (isLoanUpdated) return {} + if (stepIndex === 0 && lendingQuoteOpenData && lendingPositionData) return { newValue: { @@ -266,7 +285,7 @@ export const Pool = () => { } return {} - }, [lendingPositionData, lendingQuoteCloseData, lendingQuoteOpenData, stepIndex]) + }, [isLoanUpdated, lendingPositionData, lendingQuoteCloseData, lendingQuoteOpenData, stepIndex]) const repaymentLockComponent = useMemo( () => ( @@ -279,6 +298,8 @@ export const Pool = () => { ) const newRepaymentLock = useMemo(() => { + if (isLoanUpdated) return {} + if ( stepIndex === 0 && isLendingQuoteSuccess && @@ -293,6 +314,7 @@ export const Pool = () => { } return {} }, [ + isLoanUpdated, stepIndex, isLendingQuoteSuccess, lendingQuoteOpenData, @@ -386,6 +408,8 @@ export const Pool = () => { borrowAccountId={borrowAccountId} onCollateralAccountIdChange={setCollateralAccountId} onBorrowAccountIdChange={setBorrowAccountId} + txId={borrowTxid} + setTxid={setBorrowTxid} /> @@ -398,6 +422,8 @@ export const Pool = () => { repaymentAccountId={repaymentAccountId} onCollateralAccountIdChange={setCollateralAccountId} onRepaymentAccountIdChange={setRepaymentAccountId} + txId={repayTxid} + setTxid={setRepayTxid} /> diff --git a/src/pages/Lending/Pool/components/Borrow/Borrow.tsx b/src/pages/Lending/Pool/components/Borrow/Borrow.tsx index 7c50ab70dd1..6c083efd2ed 100644 --- a/src/pages/Lending/Pool/components/Borrow/Borrow.tsx +++ b/src/pages/Lending/Pool/components/Borrow/Borrow.tsx @@ -33,6 +33,8 @@ type BorrowProps = { setCryptoDepositAmount: (amount: string | null) => void borrowAsset: Asset | null setBorrowAsset: (asset: Asset | null) => void + txId: string | null + setTxid: (txId: string | null) => void } export const Borrow = ({ borrowAsset, @@ -43,6 +45,8 @@ export const Borrow = ({ onBorrowAccountIdChange: handleBorrowAccountIdChange, depositAmountCryptoPrecision, setCryptoDepositAmount, + txId, + setTxid, }: BorrowProps) => { const [fiatDepositAmount, setFiatDepositAmount] = useState(null) @@ -87,6 +91,8 @@ export const Borrow = ({ borrowAccountId={borrowAccountId} onCollateralAccountIdChange={handleCollateralAccountIdChange} onBorrowAccountIdChange={handleBorrowAccountIdChange} + txId={txId} + setTxid={setTxid} /> ) @@ -103,6 +109,8 @@ type BorrowRoutesProps = { borrowAccountId: AccountId onCollateralAccountIdChange: (accountId: AccountId) => void onBorrowAccountIdChange: (accountId: AccountId) => void + txId: string | null + setTxid: (txId: string | null) => void } const BorrowRoutes = memo( @@ -117,6 +125,8 @@ const BorrowRoutes = memo( borrowAccountId, onCollateralAccountIdChange: handleCollateralAccountIdChange, onBorrowAccountIdChange: handleBorrowAccountIdChange, + txId, + setTxid, }: BorrowRoutesProps) => { const location = useLocation() @@ -167,9 +177,19 @@ const BorrowRoutes = memo( borrowAccountId={borrowAccountId} collateralAccountId={collateralAccountId} borrowAsset={borrowAsset} + txId={txId} + setTxid={setTxid} /> ), - [collateralAssetId, cryptoDepositAmount, borrowAccountId, collateralAccountId, borrowAsset], + [ + collateralAssetId, + cryptoDepositAmount, + borrowAccountId, + collateralAccountId, + borrowAsset, + txId, + setTxid, + ], ) return ( diff --git a/src/pages/Lending/Pool/components/Borrow/BorrowConfirm.tsx b/src/pages/Lending/Pool/components/Borrow/BorrowConfirm.tsx index d650fec1b0c..30dab1977c4 100644 --- a/src/pages/Lending/Pool/components/Borrow/BorrowConfirm.tsx +++ b/src/pages/Lending/Pool/components/Borrow/BorrowConfirm.tsx @@ -12,8 +12,9 @@ import type { AccountId, AssetId } from '@shapeshiftoss/caip' import { fromAssetId } from '@shapeshiftoss/caip' import { FeeDataKey } from '@shapeshiftoss/chain-adapters' import { TxStatus } from '@shapeshiftoss/unchained-client' +import { useMutation, useMutationState } from '@tanstack/react-query' import { utils } from 'ethers' -import { useCallback, useEffect, useMemo, useState } from 'react' +import { useCallback, useEffect, useMemo } from 'react' import { useTranslate } from 'react-polyglot' import { useHistory } from 'react-router' import { Amount } from 'components/Amount/Amount' @@ -26,14 +27,12 @@ import { Row } from 'components/Row/Row' import { SlideTransition } from 'components/SlideTransition' import { RawText, Text } from 'components/Text' import { getChainAdapterManager } from 'context/PluginProvider/chainAdapterSingleton' -import { queryClient } from 'context/QueryClientProvider/queryClient' import { getSupportedEvmChainIds } from 'hooks/useEvm/useEvm' import { useWallet } from 'hooks/useWallet/useWallet' import type { Asset } from 'lib/asset-service' import { bnOrZero } from 'lib/bignumber/bignumber' import { getThorchainFromAddress, waitForThorchainUpdate } from 'lib/utils/thorchain' import { getThorchainLendingPosition } from 'lib/utils/thorchain/lending' -import { useLendingPositionData } from 'pages/Lending/hooks/useLendingPositionData' import { useLendingQuoteOpenQuery } from 'pages/Lending/hooks/useLendingQuoteQuery' import { useQuoteEstimatedFeesQuery } from 'pages/Lending/hooks/useQuoteEstimatedFees' import { @@ -53,6 +52,8 @@ type BorrowConfirmProps = { collateralAccountId: AccountId borrowAccountId: AccountId borrowAsset: Asset | null + txId: string | null + setTxid: (txId: string | null) => void } export const BorrowConfirm = ({ @@ -61,14 +62,13 @@ export const BorrowConfirm = ({ collateralAccountId, borrowAccountId, borrowAsset, + txId, + setTxid, }: BorrowConfirmProps) => { const { state: { wallet }, } = useWallet() - const [txHash, setTxHash] = useState(null) - const [isLoanOpenPending, setIsLoanOpenPending] = useState(false) - const borrowAssetId = borrowAsset?.assetId ?? '' const history = useHistory() const translate = useTranslate() @@ -77,24 +77,26 @@ export const BorrowConfirm = ({ const collateralAssetMarketData = useAppSelector(state => selectMarketDataById(state, collateralAssetId), ) - const { refetch: refetchLendingPositionData } = useLendingPositionData({ - assetId: collateralAssetId, - accountId: collateralAccountId, + const { mutateAsync } = useMutation({ + mutationKey: [txId], + mutationFn: (_txId: string) => + waitForThorchainUpdate({ txId: _txId, skipOutbound: true }).promise, + }) + + const lendingMutationStatus = useMutationState({ + filters: { mutationKey: [txId] }, + select: mutation => mutation.state.status, }) + const loanTxStatus = useMemo(() => lendingMutationStatus?.[0], [lendingMutationStatus]) + useEffect(() => { // don't start polling until we have a tx - if (!txHash) return - - setIsLoanOpenPending(true) + if (!txId) return ;(async () => { - await waitForThorchainUpdate({ txHash, skipOutbound: true }).promise - // Invalidate some react-queries everytime we poll - since status detection is currently suboptimal - queryClient?.invalidateQueries({ queryKey: ['thorchainLendingPosition'], exact: false }) - setIsLoanOpenPending(false) - await refetchLendingPositionData() + await mutateAsync(txId) })() - }, [refetchLendingPositionData, txHash]) + }, [mutateAsync, txId]) const handleBack = useCallback(() => { history.push(BorrowRoutePaths.Input) @@ -108,16 +110,8 @@ export const BorrowConfirm = ({ borrowAccountId, borrowAssetId, depositAmountCryptoPrecision: depositAmount ?? '0', - isLoanOpenPending, }), - [ - collateralAssetId, - collateralAccountId, - borrowAccountId, - borrowAssetId, - depositAmount, - isLoanOpenPending, - ], + [collateralAssetId, collateralAccountId, borrowAccountId, borrowAssetId, depositAmount], ) const { data: lendingQuoteData, @@ -150,7 +144,13 @@ export const BorrowConfirm = ({ const collateralAccountMetadata = useAppSelector(state => selectPortfolioAccountMetadataByAccountId(state, collateralAccountFilter), ) - const handleDeposit = useCallback(async () => { + const handleConfirm = useCallback(async () => { + if (loanTxStatus === 'pending' || loanTxStatus === 'success') { + // Reset values when going back to input step + setTxid(null) + return history.push(BorrowRoutePaths.Input) + } + if ( !( collateralAssetId && @@ -204,10 +204,11 @@ export const BorrowConfirm = ({ throw new Error('Error sending THORCHain lending Txs') } - setTxHash(maybeTxId) + setTxid(maybeTxId) return maybeTxId }, [ + loanTxStatus, collateralAssetId, depositAmount, wallet, @@ -217,6 +218,8 @@ export const BorrowConfirm = ({ collateralAccountMetadata, collateralAccountId, estimatedFeesData, + setTxid, + history, lendingQuoteData?.quoteInboundAddress, lendingQuoteData?.quoteMemo, selectedCurrency, @@ -319,17 +322,21 @@ export const BorrowConfirm = ({ colorScheme='blue' size='lg' width='full' - onClick={handleDeposit} - isLoading={isLoanOpenPending || isEstimatedFeesDataLoading || isLendingQuoteLoading} + onClick={handleConfirm} + isLoading={ + loanTxStatus === 'pending' || isEstimatedFeesDataLoading || isLendingQuoteLoading + } disabled={ - isLoanOpenPending || + loanTxStatus === 'pending' || isEstimatedFeesDataLoading || isEstimatedFeesDataError || isLendingQuoteLoading || isLendingQuoteError } > - {translate('lending.confirmAndBorrow')} + {translate( + loanTxStatus === 'success' ? 'lending.borrowAgain' : 'lending.confirmAndBorrow', + )} diff --git a/src/pages/Lending/Pool/components/Repay/Repay.tsx b/src/pages/Lending/Pool/components/Repay/Repay.tsx index 16990238b18..47b2b84c73d 100644 --- a/src/pages/Lending/Pool/components/Repay/Repay.tsx +++ b/src/pages/Lending/Pool/components/Repay/Repay.tsx @@ -18,6 +18,8 @@ type RepayProps = { onRepaymentAccountIdChange: (accountId: AccountId) => void repaymentPercent: number setRepaymentPercent: (value: number) => void + txId: string | null + setTxid: (txId: string | null) => void } export const Repay = ({ @@ -29,6 +31,8 @@ export const Repay = ({ onRepaymentAccountIdChange: handleRepaymentAccountIdChange, repaymentPercent, setRepaymentPercent, + txId, + setTxid, }: RepayProps) => { const collateralAssetId = useRouteAssetId() @@ -44,6 +48,8 @@ export const Repay = ({ repaymentAccountId={borrowAccountId} onCollateralAccountIdChange={handleCollateralAccountIdChange} onRepaymentAccountIdChange={handleRepaymentAccountIdChange} + txId={txId} + setTxid={setTxid} /> ) @@ -59,6 +65,8 @@ type RepayRoutesProps = { repaymentAccountId: AccountId onCollateralAccountIdChange: (accountId: AccountId) => void onRepaymentAccountIdChange: (accountId: AccountId) => void + txId: string | null + setTxid: (txId: string | null) => void } const RepayInput = lazy(() => @@ -85,6 +93,8 @@ const RepayRoutes = memo( repaymentAccountId, onCollateralAccountIdChange: handleCollateralAccountIdChange, onRepaymentAccountIdChange: handleRepaymentAccountIdChange, + txId, + setTxid, }: RepayRoutesProps) => { const location = useLocation() @@ -123,6 +133,8 @@ const RepayRoutes = memo( collateralAccountId={collateralAccountId} repaymentAccountId={repaymentAccountId} repaymentAsset={repaymentAsset} + txId={txId} + setTxid={setTxid} /> ), [ @@ -131,6 +143,8 @@ const RepayRoutes = memo( collateralAccountId, repaymentAccountId, repaymentAsset, + txId, + setTxid, ], ) diff --git a/src/pages/Lending/Pool/components/Repay/RepayConfirm.tsx b/src/pages/Lending/Pool/components/Repay/RepayConfirm.tsx index c243679120f..10c37751155 100644 --- a/src/pages/Lending/Pool/components/Repay/RepayConfirm.tsx +++ b/src/pages/Lending/Pool/components/Repay/RepayConfirm.tsx @@ -12,8 +12,9 @@ import type { AccountId, AssetId } from '@shapeshiftoss/caip' import { fromAssetId } from '@shapeshiftoss/caip' import { FeeDataKey } from '@shapeshiftoss/chain-adapters' import { TxStatus } from '@shapeshiftoss/unchained-client' +import { useMutation, useMutationState } from '@tanstack/react-query' import { utils } from 'ethers' -import { useCallback, useEffect, useMemo, useState } from 'react' +import { useCallback, useEffect, useMemo } from 'react' import { useTranslate } from 'react-polyglot' import { useHistory } from 'react-router' import { Amount } from 'components/Amount/Amount' @@ -51,6 +52,8 @@ type RepayConfirmProps = { repaymentPercent: number collateralAccountId: AccountId repaymentAccountId: AccountId + txId: string | null + setTxid: (txId: string | null) => void } export const RepayConfirm = ({ @@ -59,10 +62,9 @@ export const RepayConfirm = ({ repaymentPercent, collateralAccountId, repaymentAccountId, + txId, + setTxid, }: RepayConfirmProps) => { - const [isLoanClosePending, setIsLoanClosePending] = useState(undefined) - const [txHash, setTxHash] = useState(null) - const { state: { wallet }, } = useWallet() @@ -72,19 +74,27 @@ export const RepayConfirm = ({ accountId: collateralAccountId, }) + const { mutateAsync } = useMutation({ + mutationKey: [txId], + mutationFn: async (_txId: string) => { + await waitForThorchainUpdate({ txId: _txId, skipOutbound: true }).promise + queryClient.invalidateQueries({ queryKey: ['thorchainLendingPosition'], exact: false }) + }, + }) + + const lendingMutationStatus = useMutationState({ + filters: { mutationKey: [txId] }, + select: mutation => mutation.state.status, + }) + + const loanTxStatus = useMemo(() => lendingMutationStatus?.[0], [lendingMutationStatus]) useEffect(() => { // don't start polling until we have a tx - if (!txHash) return - - setIsLoanClosePending(true) + if (!txId) return ;(async () => { - await waitForThorchainUpdate({ txHash, skipOutbound: true }).promise - // Invalidate some react-queries everytime we poll - since status detection is currently suboptimal - queryClient?.invalidateQueries({ queryKey: ['thorchainLendingPosition'], exact: false }) - setIsLoanClosePending(false) - await refetchLendingPositionData() + await mutateAsync(txId) })() - }, [refetchLendingPositionData, txHash]) + }, [mutateAsync, refetchLendingPositionData, txId]) const history = useHistory() const translate = useTranslate() @@ -128,15 +138,15 @@ export const RepayConfirm = ({ repaymentPercent, repaymentAccountId, collateralAccountId, - isLoanClosePending, + isLoanClosePending: loanTxStatus === 'pending', }), [ - collateralAccountId, collateralAssetId, - repaymentAccountId, repaymentAsset?.assetId, repaymentPercent, - isLoanClosePending, + repaymentAccountId, + collateralAccountId, + loanTxStatus, ], ) @@ -152,7 +162,11 @@ export const RepayConfirm = ({ const selectedCurrency = useAppSelector(selectSelectedCurrency) const handleConfirm = useCallback(async () => { - if (isLoanClosePending === false) return history.push(RepayRoutePaths.Input) + if (loanTxStatus === 'pending' || loanTxStatus === 'success') { + // Reset values when going back to input step + setTxid(null) + return history.push(RepayRoutePaths.Input) + } if ( !( @@ -208,18 +222,19 @@ export const RepayConfirm = ({ throw new Error('Error sending THORCHain lending Txs') } - setTxHash(maybeTxId) + setTxid(maybeTxId) return maybeTxId }, [ chainAdapter, history, - isLoanClosePending, lendingQuoteCloseData, + loanTxStatus, repaymentAccountId, repaymentAmountCryptoPrecision, repaymentAsset, selectedCurrency, + setTxid, wallet, ]) @@ -236,10 +251,10 @@ export const RepayConfirm = ({ }) const swapStatus = useMemo(() => { - if (isLoanClosePending === false) return TxStatus.Confirmed - if (isLoanClosePending) return TxStatus.Pending + if (loanTxStatus === 'success') return TxStatus.Confirmed + if (loanTxStatus === 'pending') return TxStatus.Pending return TxStatus.Unknown - }, [isLoanClosePending]) + }, [loanTxStatus]) if (!collateralAsset || !repaymentAsset) return null return ( @@ -349,16 +364,18 @@ export const RepayConfirm = ({ diff --git a/src/pages/Lending/hooks/useLendingPositionData.tsx b/src/pages/Lending/hooks/useLendingPositionData.tsx index 6d8f7a25ed4..5e6d418b628 100644 --- a/src/pages/Lending/hooks/useLendingPositionData.tsx +++ b/src/pages/Lending/hooks/useLendingPositionData.tsx @@ -12,9 +12,14 @@ import { store, useAppSelector } from 'state/store' type UseLendingPositionDataProps = { accountId: AccountId assetId: AssetId + skip?: boolean } -export const useLendingPositionData = ({ accountId, assetId }: UseLendingPositionDataProps) => { +export const useLendingPositionData = ({ + accountId, + assetId, + skip, +}: UseLendingPositionDataProps) => { const lendingPositionQueryKey: [string, { accountId: AccountId; assetId: AssetId }] = useMemo( () => ['thorchainLendingPosition', { accountId, assetId }], [accountId, assetId], @@ -50,7 +55,7 @@ export const useLendingPositionData = ({ accountId, assetId }: UseLendingPositio address: data?.owner, } }, - enabled: Boolean(accountId && assetId && poolAssetMarketData.price !== '0'), + enabled: Boolean(!skip && accountId && assetId && poolAssetMarketData.price !== '0'), refetchOnMount: true, refetchInterval: 60_000, refetchIntervalInBackground: true,