Improve Deposit Details data fetch

While refactoring Deposit Details page for Bitcoin on Base we encountered a
problem with data fetch in our new Page Layout. The Page Layout uses the data
in two sections which indicated that we might need to move the data fetch to
redux-toolkit and store it in the redux store. That's what I did here.

The problematic parts before this commit were:
1) `useFetchDepositDetails` hook was used two times - one for main page and one
for right section. This is not good because it is a costly operation,
2) No one source of truth - we had two subscriptions that listened for
optimistic minting events and we store them both in redux store AND in local
state which lead to confusion,
3) Actual implementation of `useFetchDepositDetails` had bugs - if the
optimistic minting event was fired during the data fetch, we could potentially
override the new data with old data that was fetched during the fetch.

To solve this problem I moved everything related to DepositDetails completely to
redux store, under tbtcSlice -> depositDetails.

The main changes are:

1. Remove unnecessary optimistic minting event subscriptions

Up to this point we had two subscriptions for optimistic minting events. The
ones placed in `useSubscribeToOptimisticMintingRequestedEvents` and
`useSubscribeToOptimisticMintingFinalizedEvents` were subscribing to the event
for currently connected account. The other two, placed in
`useSubscribeToOptimisticMintingEvents`, were subscribing to the event based on
deposit key. Turned out that the
`useSubscribeToOptimisticMintingRequestedEvents` is not needed at all and
`useSubscribeToOptimisticMintingFinalizedEvents` is only needed to update the
bridge activity (which is not currently visible in bitcoin on base).

I've decided to move subscriptions from `useSubscribeToOptimisticMintingEvents`
to those two file I mentioned so that now they are subscribe to the events based
on deposit key. I've also separated subscription to the optimistic minting
finalized event (previously `useSubscribeToOptimisticMintingFinalizedEvents`) to
a separate hook called
`useSubscribeToOptimisticMintingFinalizedEventForCurrentAccount`

2. Move deposit details data to the store

This was needed because we needed that data in two places in our layout. I've
moved the fetching logic to a separate redux-toolkit effect that is called in
deposit details page each time the depositKey parameter is changed. To prevent
fetching the data for the wrong deposit, we also keep depositKey in the store,
so that the store is not updated if the depositKey in the store was changed. We
use useEffect's cleanup function to clearTheDepositData (including depositKey)
from the store.

3. Remove unnecessary variables from tbtcSlice

We are removing `txConfirmations`, `optimisticMintingRequestedTxHash` and
`optimisticMintingFinalizedTxHash` from the tbtcSlice. Well, technically, we are
not removing them but moving it to `depositDetails` object in tbtcSlice.

4. Fire confirmation listener after deposit details data is fetched in
redux-toolkit

Previously we've fired it in useEffect in DepositDetails manually. Now, we are
moving it to redux-toolkit and fire after the depositDetails data is fetched. Of
course only if it's needed - if the confirmations surpass the required
confirmations value then listener is not needed.

src/App.tsx

@@ -22,8 +22,7 @@ import { Token } from "./enums"
 import { usePosthog } from "./hooks/posthog"
 import { useSentry } from "./hooks/sentry"
 import {
-  useSubscribeToOptimisticMintingFinalizedEvent,
-  useSubscribeToOptimisticMintingRequestedEvent,
+  useSubscribeToOptimisticMintingFinalizedEventForCurrentAccount,
   useSubscribeToRedemptionRequestedEvent,
 } from "./hooks/tbtc"
 import { useSubscribeToDepositRevealedEvent } from "./hooks/tbtc/useSubsribeToDepositRevealedEvent"
@@ -39,8 +38,7 @@ import { isSameETHAddress } from "./web3/utils"
 const Web3EventHandlerComponent = () => {
   useSubscribeToERC20TransferEvent(Token.TBTC)
   useSubscribeToDepositRevealedEvent()
-  useSubscribeToOptimisticMintingFinalizedEvent()
-  useSubscribeToOptimisticMintingRequestedEvent()
+  useSubscribeToOptimisticMintingFinalizedEventForCurrentAccount()
   useSubscribeToRedemptionRequestedEvent()
 
   return <></>

src/hooks/tbtc/index.ts

@@ -1,4 +1,3 @@
-export * from "./useFetchDepositDetails"
 export * from "./useFetchRecentDeposits"
 export * from "./useFetchTBTCMetrics"
 export * from "./useRedemptionEstimatedFees"

src/hooks/tbtc/useSubscribeToOptimisticMintingFinalizedEvent.ts

@@ -5,7 +5,6 @@ import { useAppDispatch } from "../store"
 import { useTBTCVaultContract } from "./useTBTCVaultContract"
 import { useSubscribeToContractEvent } from "../../web3/hooks"
 import { useTbtcState } from "../useTbtcState"
-import { MintingStep } from "../../types/tbtc"
 import { useThreshold } from "../../contexts/ThresholdContext"
 
 type OptimisticMintingFinalizedEventCallback = (
@@ -33,38 +32,64 @@ export const useSubscribeToOptimisticMintingFinalizedEventBase = (
   )
 }
 
-export const useSubscribeToOptimisticMintingFinalizedEvent = () => {
-  const threshold = useThreshold()
-  const { updateState, utxo, mintingStep } = useTbtcState()
-  const dispatch = useAppDispatch()
-  const { account } = useWeb3React()
+/**
+ * Subscribes to optimistic minting finalized events based on the deposit key.
+ * This is used to update the deposit details data state needed for Deposit
+ * Details page.
+ * @param {string} depositKey String representing the deposit key.
+ */
+export const useSubscribeToOptimisticMintingFinalizedEvent = (
+  depositKey?: string
+) => {
+  const { updateDepositDetailsDataState } = useTbtcState()
 
   useSubscribeToOptimisticMintingFinalizedEventBase(
-    (...args) => {
-      const [, depositKey, , , event] = args
-      const depositKeyFromEvent = depositKey.toHexString()
-      const depositKeyFromUTXO = utxo
-        ? threshold.tbtc.buildDepositKey(
-            utxo.transactionHash.toString(),
-            utxo.outputIndex,
-            "big-endian"
-          )
-        : ""
-
-      if (
-        mintingStep === MintingStep.MintingSuccess &&
-        depositKeyFromEvent === depositKeyFromUTXO
-      ) {
-        updateState("optimisticMintingFinalizedTxHash", event.transactionHash)
+    (minter, depositKeyEventParam, depositor, optimisticMintingDebt, event) => {
+      const depositKeyFromEvent = depositKeyEventParam.toHexString()
+      if (depositKeyFromEvent === depositKey) {
+        updateDepositDetailsDataState(
+          "optimisticMintingFinalizedTxHashFromEvent",
+          event.transactionHash
+        )
       }
-
-      dispatch(
-        tbtcSlice.actions.optimisticMintingFinalized({
-          depositKey: depositKeyFromEvent,
-          txHash: event.transactionHash,
-        })
-      )
     },
-    [null, null, account]
+    undefined,
+    true
   )
 }
+
+/**
+ * Subscribes to optimistic minting finalized events based on the currently
+ * connected account. This is used to update the bridge activity state (for the
+ * current account) when the optimistic minting is finalized.
+ */
+export const useSubscribeToOptimisticMintingFinalizedEventForCurrentAccount =
+  () => {
+    const threshold = useThreshold()
+    const { utxo } = useTbtcState()
+    const dispatch = useAppDispatch()
+    const { account } = useWeb3React()
+
+    useSubscribeToOptimisticMintingFinalizedEventBase(
+      (...args) => {
+        const [, depositKey, , , event] = args
+        const depositKeyFromEvent = depositKey.toHexString()
+        const depositKeyFromUTXO = utxo
+          ? threshold.tbtc.buildDepositKey(
+              utxo.transactionHash.toString(),
+              utxo.outputIndex,
+              "big-endian"
+            )
+          : ""
+
+        // Updates bridge activity state if the deposit key from the event matches
+        dispatch(
+          tbtcSlice.actions.optimisticMintingFinalized({
+            depositKey: depositKeyFromEvent,
+            txHash: event.transactionHash,
+          })
+        )
+      },
+      [null, null, account]
+    )
+  }

src/hooks/tbtc/useSubscribeToOptimisticMintingRequestedEvent.ts

@@ -16,7 +16,7 @@ type OptimisticMintingRequestedEventCallback = (
   event: Event
 ) => void
 
-export const useSubscribeToOptimisticMintingRequestedEventBase = (
+const useSubscribeToOptimisticMintingRequestedEventBase = (
   callback: OptimisticMintingRequestedEventCallback,
   filterParams?: any[string],
   shouldSubscribeIfUserNotConnected: boolean = false
@@ -33,37 +33,36 @@ export const useSubscribeToOptimisticMintingRequestedEventBase = (
   )
 }
 
-export const useSubscribeToOptimisticMintingRequestedEvent = () => {
-  const threshold = useThreshold()
-  const { updateState, utxo, mintingStep } = useTbtcState()
-  const { account } = useWeb3React()
+/**
+ * Subscribes to optimistic minting requested events based on the deposit key.
+ * This is used to update the deposit details data state needed for Deposit
+ * Details page.
+ * @param {string} depositKey String representing the deposit key.
+ */
+export const useSubscribeToOptimisticMintingRequestedEvent = (
+  depositKey?: string
+) => {
+  const { updateDepositDetailsDataState } = useTbtcState()
 
   useSubscribeToOptimisticMintingRequestedEventBase(
     (
-      minter: string,
-      depositKey: BigNumber,
-      depositor: string,
-      amount: BigNumber,
-      fundingTxHash: unknown,
-      fundingOutputIndex: BigNumber,
-      event: Event
+      minter,
+      depositKeyEventParam,
+      depositor,
+      amount,
+      fundingTxHash,
+      fundingOutputIndex,
+      event
     ) => {
-      const depositKeyFromEvent = depositKey.toHexString()
-      const depositKeyFromUTXO = utxo
-        ? threshold.tbtc.buildDepositKey(
-            utxo.transactionHash.toString(),
-            utxo.outputIndex,
-            "big-endian"
-          )
-        : ""
-
-      if (
-        mintingStep === MintingStep.MintingSuccess &&
-        depositKeyFromEvent === depositKeyFromUTXO
-      ) {
-        updateState("optimisticMintingRequestedTxHash", event.transactionHash)
+      const depositKeyFromEvent = depositKeyEventParam.toHexString()
+      if (depositKeyFromEvent === depositKey) {
+        updateDepositDetailsDataState(
+          "optimisticMintingRequestedTxHashFromEvent",
+          event.transactionHash
+        )
       }
     },
-    [null, null, account]
+    undefined,
+    true
   )
 }