Merge pull request #570 from threshold-network/display-redemptions-in-my-activity

Display redemptions in my activity

Adds support for fetching pending/completed redemptions and displaying them
under the `my activity` table on the Bridge page.

Author: michalsmiarowski

src/App.tsx

@@ -55,6 +55,7 @@ import { useSubscribeToDepositRevealedEvent } from "./hooks/tbtc/useSubsribeToDe
 import {
   useSubscribeToOptimisticMintingFinalizedEvent,
   useSubscribeToOptimisticMintingRequestedEvent,
+  useSubscribeToRedemptionRequestedEvent,
 } from "./hooks/tbtc"
 import { useSentry } from "./hooks/sentry"
 
@@ -80,6 +81,7 @@ const Web3EventHandlerComponent = () => {
   useSubscribeToDepositRevealedEvent()
   useSubscribeToOptimisticMintingFinalizedEvent()
   useSubscribeToOptimisticMintingRequestedEvent()
+  useSubscribeToRedemptionRequestedEvent()
 
   return <></>
 }

src/components/tBTC/BridgeActivity.tsx

@@ -1,4 +1,5 @@
 import { FC, createContext, useContext, ReactElement } from "react"
+import { useWeb3React } from "@web3-react/core"
 import {
   Badge,
   BodyMd,
@@ -18,12 +19,14 @@ import {
 import {
   BridgeActivityStatus,
   BridgeActivity as BridgeActivityType,
+  UnminBridgeActivityAdditionalData,
 } from "../../threshold-ts/tbtc"
 import emptyHistoryImageSrcDark from "../../static/images/tBTC-bridge-no-history-dark.svg"
 import emptyHistoryImageSrcLight from "../../static/images/tBTC-bridge-no-history-light.svg"
 import { InlineTokenBalance } from "../TokenBalance"
 import Link from "../Link"
 import { OutlineListItem } from "../OutlineListItem"
+import { RedemptionDetailsLinkBuilder } from "../../utils/tBTC"
 
 export type BridgeActivityProps = {
   data: BridgeActivityType[]
@@ -97,16 +100,36 @@ export const BridgeActivityData: FC<ListProps> = (props) => {
 const ActivityItem: FC<BridgeActivityType> = ({
   amount,
   status,
-  depositKey,
+  activityKey,
+  bridgeProcess,
+  additionalData,
+  txHash,
 }) => {
+  const { account } = useWeb3React()
+
+  const link =
+    bridgeProcess === "unmint"
+      ? RedemptionDetailsLinkBuilder.createFromTxHash(txHash)
+          .withRedeemer(account!)
+          .withRedeemerOutputScript(
+            (additionalData as UnminBridgeActivityAdditionalData)
+              .redeemerOutputScript
+          )
+          .withWalletPublicKeyHash(
+            (additionalData as UnminBridgeActivityAdditionalData)
+              .walletPublicKeyHash
+          )
+          .build()
+      : `/tBTC/mint/deposit/${activityKey}`
+
   return (
     <ActivityItemWrapper>
       <LinkOverlay
         as={Link}
         textDecoration="none"
         _hover={{ textDecoration: "none" }}
         color="inherit"
-        to={`/tBTC/mint/deposit/${depositKey}`}
+        to={link}
       >
         <InlineTokenBalance tokenAmount={amount} />
       </LinkOverlay>
@@ -116,7 +139,7 @@ const ActivityItem: FC<BridgeActivityType> = ({
 }
 
 const renderActivityItem = (item: BridgeActivityType) => (
-  <ActivityItem key={item.depositKey} {...item} />
+  <ActivityItem key={`${item.activityKey}-${item.txHash}`} {...item} />
 )
 
 const bridgeActivityStatusToBadgeProps: Record<
@@ -126,6 +149,9 @@ const bridgeActivityStatusToBadgeProps: Record<
   [BridgeActivityStatus.MINTED]: {
     colorScheme: "green",
   },
+  [BridgeActivityStatus.UNMINTED]: {
+    colorScheme: "green",
+  },
   [BridgeActivityStatus.PENDING]: {
     colorScheme: "yellow",
   },

src/hooks/tbtc/index.ts

@@ -8,3 +8,4 @@ export * from "./useFetchDepositDetails"
 export * from "./useFetchRecentDeposits"
 export * from "./useFetchTBTCMetrics"
 export * from "./useRequestRedemption"
+export * from "./useSubscribeToRedemptionRequestedEvent"

src/hooks/tbtc/useSubscribeToRedemptionRequestedEvent.ts

@@ -0,0 +1,49 @@
+import { useWeb3React } from "@web3-react/core"
+import { useSubscribeToContractEvent } from "../../web3/hooks"
+import { isSameETHAddress } from "../../web3/utils"
+import { useAppDispatch } from "../store"
+import { useBridgeContract } from "./useBridgeContract"
+import { tbtcSlice } from "../../store/tbtc"
+import { BigNumber, Event } from "ethers"
+import { useThreshold } from "../../contexts/ThresholdContext"
+import { fromSatoshiToTokenPrecision } from "../../threshold-ts/utils"
+
+export const useSubscribeToRedemptionRequestedEvent = () => {
+  const contract = useBridgeContract()
+  const dispatch = useAppDispatch()
+  const { account } = useWeb3React()
+  const threshold = useThreshold()
+
+  useSubscribeToContractEvent(
+    contract,
+    "RedemptionRequested",
+    //@ts-ignore
+    async (
+      walletPublicKeyHash: string,
+      redeemerOutputScript: string,
+      redeemer: string,
+      requestedAmount: BigNumber,
+      treasuryFee: BigNumber,
+      txMaxFee: BigNumber,
+      event: Event
+    ) => {
+      if (!account || !isSameETHAddress(redeemer, account)) return
+
+      const redemptionKey = threshold.tbtc.buildRedemptionKey(
+        walletPublicKeyHash,
+        redeemerOutputScript
+      )
+
+      dispatch(
+        tbtcSlice.actions.redemptionRequested({
+          amount: fromSatoshiToTokenPrecision(requestedAmount).toString(),
+          txHash: event.transactionHash,
+          redemptionKey,
+          blockNumber: event.blockNumber,
+          additionalData: { redeemerOutputScript, walletPublicKeyHash },
+        })
+      )
+    },
+    [null, null, account]
+  )
+}

src/hooks/tbtc/useSubsribeToDepositRevealedEvent.ts

@@ -61,6 +61,7 @@ export const useSubscribeToDepositRevealedEvent = () => {
           txHash: event.transactionHash,
           depositor: depositor,
           depositKey: depositKeyFromEvent,
+          blockNumber: event.blockNumber,
         })
       )
     },

src/store/tbtc/tbtcSlice.ts

@@ -2,7 +2,11 @@ import { createSlice } from "@reduxjs/toolkit"
 import { PayloadAction } from "@reduxjs/toolkit/dist/createAction"
 import { MintingStep, TbtcStateKey, TbtcState } from "../../types/tbtc"
 import { UpdateStateActionPayload } from "../../types/state"
-import { BridgeActivityStatus, BridgeActivity } from "../../threshold-ts/tbtc"
+import {
+  BridgeActivityStatus,
+  BridgeActivity,
+  UnminBridgeActivityAdditionalData,
+} from "../../threshold-ts/tbtc"
 import { featureFlags } from "../../constants"
 import { startAppListening } from "../listener"
 import {
@@ -54,9 +58,10 @@ export const tbtcSlice = createSlice({
         amount: string
         depositor: string
         txHash: string
+        blockNumber: number
       }>
     ) => {
-      const { amount, txHash, depositKey } = action.payload
+      const { amount, txHash, depositKey, blockNumber } = action.payload
       const history = state.bridgeActivity.data
       const { itemToUpdate } = findActivityByDepositKey(history, depositKey)
 
@@ -66,7 +71,14 @@ export const tbtcSlice = createSlice({
 
       // Add item only if there is no item with the same deposit key.
       state.bridgeActivity.data = [
-        { amount, txHash, status: BridgeActivityStatus.PENDING, depositKey },
+        {
+          amount,
+          txHash,
+          status: BridgeActivityStatus.PENDING,
+          activityKey: depositKey,
+          bridgeProcess: "mint",
+          blockNumber,
+        },
         ...state.bridgeActivity.data,
       ]
     },
@@ -108,6 +120,45 @@ export const tbtcSlice = createSlice({
         }
       }>
     ) => {},
+    redemptionRequested: (
+      state,
+      action: PayloadAction<{
+        redemptionKey: string
+        blockNumber: number
+        amount: string
+        txHash: string
+        additionalData: UnminBridgeActivityAdditionalData
+      }>
+    ) => {
+      const {
+        payload: { amount, redemptionKey, blockNumber, txHash, additionalData },
+      } = action
+
+      const { itemToUpdate } = findRedemptionActivity(
+        state.bridgeActivity.data,
+        redemptionKey,
+        txHash
+      )
+
+      // Do not update an array if there is already an item with the same
+      // redemption key and transaction hash- just in case duplicated Ethereum
+      // events.
+      if (itemToUpdate) return
+
+      // Add item only if there is no item with the same deposit key.
+      state.bridgeActivity.data = [
+        {
+          amount,
+          txHash,
+          status: BridgeActivityStatus.PENDING,
+          activityKey: redemptionKey,
+          bridgeProcess: "unmint",
+          blockNumber,
+          additionalData,
+        },
+        ...state.bridgeActivity.data,
+      ]
+    },
   },
 })
 
@@ -116,7 +167,26 @@ function findActivityByDepositKey(
   depositKey: string
 ) {
   const activityIndexItemToUpdate = bridgeActivities.findIndex(
-    (item) => item.depositKey === depositKey
+    (item) => item.activityKey === depositKey
+  )
+
+  if (activityIndexItemToUpdate < 0) return { index: -1, itemToUpdate: null }
+
+  const activityItemToUpdate = bridgeActivities[activityIndexItemToUpdate]
+
+  return {
+    index: activityIndexItemToUpdate,
+    itemToUpdate: activityItemToUpdate,
+  }
+}
+
+function findRedemptionActivity(
+  bridgeActivities: BridgeActivity[],
+  redemptionKey: string,
+  txHash: string
+) {
+  const activityIndexItemToUpdate = bridgeActivities.findIndex(
+    (item) => item.activityKey === redemptionKey && item.txHash === txHash
   )
 
   if (activityIndexItemToUpdate < 0) return { index: -1, itemToUpdate: null }