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.

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 }