feat: don't update to newValue when mutation is pending

shapeshift · Nov 23, 2023 · 2662b69 · 2662b69
1 parent df4294f
commit 2662b69
Show file tree

Hide file tree

Showing 11 changed files with 166 additions and 76 deletions.
diff --git 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
@@ -129,7 +129,7 @@ export const TransactionsProvider: React.FC<TransactionsProviderProps> = ({ 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/...roviders/thorchain-savers/components/ThorchainSaversManager/Deposit/components/Status.tsx b/...roviders/thorchain-savers/components/ThorchainSaversManager/Deposit/components/Status.tsx
@@ -87,7 +87,7 @@ export const Status: React.FC<StatusProps> = ({ 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/...oviders/thorchain-savers/components/ThorchainSaversManager/Withdraw/components/Status.tsx b/...oviders/thorchain-savers/components/ThorchainSaversManager/Withdraw/components/Status.tsx
@@ -86,7 +86,7 @@ export const Status: React.FC<StatusProps> = ({ 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
@@ -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
@@ -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<MatchParams>()
   const [stepIndex, setStepIndex] = useState<number>(0)
+  const [borrowTxid, setBorrowTxid] = useState<string | null>(null)
+  const [repayTxid, setRepayTxid] = useState<string | null>(null)
   const [collateralAccountId, setCollateralAccountId] = useState<AccountId>(poolAccountId ?? '')
   const [borrowAsset, setBorrowAsset] = useState<Asset | null>(null)
   const [repaymentAsset, setRepaymentAsset] = useState<Asset | null>(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(() => <PoolHeader />, [])
 
+  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}
                   />
                 </TabPanel>
                 <TabPanel px={0} py={0}>
@@ -398,6 +422,8 @@ export const Pool = () => {
                     repaymentAccountId={repaymentAccountId}
                     onCollateralAccountIdChange={setCollateralAccountId}
                     onRepaymentAccountIdChange={setRepaymentAccountId}
+                    txId={repayTxid}
+                    setTxid={setRepayTxid}
                   />
                 </TabPanel>
               </TabPanels>

diff --git 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<string | null>(null)
 
@@ -87,6 +91,8 @@ export const Borrow = ({
         borrowAccountId={borrowAccountId}
         onCollateralAccountIdChange={handleCollateralAccountIdChange}
         onBorrowAccountIdChange={handleBorrowAccountIdChange}
+        txId={txId}
+        setTxid={setTxid}
       />
     </MemoryRouter>
   )
@@ -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 (