Merge pull request #843 from threshold-network/feat/add-cross-chain-redemption-support

feat: update components to add crosschain redemption

Author: evandrosaturnino

craco.config.js

@@ -53,23 +53,25 @@ module.exports = {
         }),
       ]
 
-      // Add node polyfills (webpack 4 style)
-      webpackConfig.node = {
-        ...webpackConfig.node,
-        crypto: true,
-        stream: true,
-        buffer: true,
-      }
-
-      // Ensure starknet is properly resolved
+      // Polyfill node modules for webpack 4
       webpackConfig.resolve.alias = {
         ...webpackConfig.resolve.alias,
-        starknet: require.resolve("starknet"),
         crypto: require.resolve("crypto-browserify"),
         stream: require.resolve("stream-browserify"),
-        buffer: require.resolve("buffer/"),
+        buffer: require.resolve("buffer"),
+        starknet: require.resolve("starknet"),
       }
 
+      // Treat .mjs files in node_modules as javascript/auto so CRA's webpack 4 can
+      // properly handle ESM-only packages. Without this, imports from deps like
+      // starknet.js, multiformats, uint8arrays (and transitively @keep-network/tbtc-v2.ts)
+      // can fail with "Module parse failed" or missing named export errors.
+      webpackConfig.module.rules.push({
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: "javascript/auto",
+      })
+
       return webpackConfig
     },
   },

package.json

@@ -18,7 +18,7 @@
     "@keep-network/keep-ecdsa": "1.8.0",
     "@keep-network/random-beacon": "2.0.0",
     "@keep-network/tbtc": "1.1.0",
-    "@keep-network/tbtc-v2.ts": "^2.8.0",
+    "@keep-network/tbtc-v2.ts": "3.0.0",
     "@ledgerhq/connect-kit-loader": "1.1.8",
     "@ledgerhq/wallet-api-client": "^1.2.0",
     "@ledgerhq/wallet-api-client-react": "^1.1.1",
@@ -119,6 +119,8 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-logical-assignment-operators": "^7.20.7",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-transform-class-properties": "^7.22.5",
     "@chakra-ui/cli": "2",
     "@craco/craco": "6.4.5",

src/components/Modal/TransactionModal/TransactionIsPending.tsx

@@ -12,8 +12,10 @@ import ViewInBlockExplorer from "../../ViewInBlockExplorer"
 import { ExplorerDataType } from "../../../networks/enums/networks"
 import { useWeb3React } from "@web3-react/core"
 import { useNonEVMConnection } from "../../../hooks/useNonEVMConnection"
+import withBaseModal from "../withBaseModal"
+import { BaseModalProps } from "../../../types"
 
-interface Props {
+interface Props extends BaseModalProps {
   transactionHash: string
 }
 
@@ -55,4 +57,4 @@ const TransactionIsPending: FC<Props> = ({ transactionHash }) => {
   )
 }
 
-export default TransactionIsPending
+export default withBaseModal(TransactionIsPending)

src/components/Modal/tBTC/InitiateUnminting.tsx

@@ -49,20 +49,21 @@ const InitiateUnmintingBase: FC<InitiateUnmintingProps> = ({
   const { estimatedBTCAmount, thresholdNetworkFee } =
     useRedemptionEstimatedFees(unmintAmount)
   const threshold = useThreshold()
+  const isCrossChain = threshold.config.crossChain.isCrossChain
 
   const onSuccess: OnSuccessCallback = (receipt, additionalParams) => {
     //@ts-ignore
-    const { walletPublicKey } = additionalParams
-    if (walletPublicKey) {
-      navigate(
-        buildRedemptionDetailsLink(
-          receipt.transactionHash,
-          account!,
-          walletPublicKey,
-          btcAddress,
-          threshold.tbtc.bitcoinNetwork
-        )
-      )
+    const { walletPublicKey, chainName } = additionalParams
+    const link = buildRedemptionDetailsLink(
+      account!,
+      btcAddress,
+      threshold.tbtc.bitcoinNetwork,
+      receipt.transactionHash,
+      walletPublicKey ?? undefined,
+      chainName ?? undefined
+    )
+    if (link) {
+      navigate(link)
     }
     closeModal()
   }

src/components/Navbar/NetworkButton.tsx

@@ -56,14 +56,14 @@ const getNetworkIcon = (chainId: number, colorMode: string): NetworkIconMap => {
             icon: <Icon as={ethereumLogo} boxSize="5" />,
             bg: grayBackground,
           },
-          // [SupportedChainIds.ArbitrumSepolia]: {
-          //   icon: <Icon as={Arbitrum} boxSize="5" />,
-          //   bg: grayBackground,
-          // },
-          // [SupportedChainIds.BaseSepolia]: {
-          //   icon: <Icon as={Base} boxSize="5" />,
-          //   bg: "blue.500",
-          // },
+          [SupportedChainIds.ArbitrumSepolia]: {
+            icon: <Icon as={Arbitrum} boxSize="5" />,
+            bg: grayBackground,
+          },
+          [SupportedChainIds.BaseSepolia]: {
+            icon: <Icon as={Base} boxSize="5" />,
+            bg: "blue.500",
+          },
         }),
   }
 

src/components/ViewInBlockExplorer.tsx

@@ -64,8 +64,7 @@ const ViewInBlockExplorer: FC<ViewInBlockExplorerProps> = ({
   // contract. For those cases in particular, the connected chainId
   // should be passed as a prop as ethereumNetworkChainId.
   const { chainId } = useIsActive()
-  const explorerChainId =
-    ethereumNetworkChainId ?? getMainnetOrTestnetChainId(chainId)
+  const explorerChainId = ethereumNetworkChainId ?? chainId
 
   const link = createLinkToBlockExplorerForChain[chain](
     id,

src/components/tBTC/BridgeActivity.tsx

@@ -113,17 +113,23 @@ const ActivityItem: FC<BridgeActivityType> = ({
 
   const link =
     bridgeProcess === "unmint"
-      ? RedemptionDetailsLinkBuilder.createFromTxHash(txHash)
-          .withRedeemer(account!)
-          .withRedeemerOutputScript(
-            (additionalData as UnmintBridgeActivityAdditionalData)
-              .redeemerOutputScript
-          )
-          .withWalletPublicKeyHash(
-            (additionalData as UnmintBridgeActivityAdditionalData)
-              .walletPublicKeyHash
-          )
-          .build()
+      ? (() => {
+          const unmintData =
+            additionalData as UnmintBridgeActivityAdditionalData
+          const builder = RedemptionDetailsLinkBuilder.createFromTxHash(txHash)
+            .withRedeemer(account!)
+            .withRedeemerOutputScript(unmintData.redeemerOutputScript)
+
+          // For cross-chain redemptions, add chainName
+          // For L1 redemptions, add walletPublicKeyHash
+          if (unmintData.chainName) {
+            builder.withChainName(unmintData.chainName)
+          } else {
+            builder.withWalletPublicKeyHash(unmintData.walletPublicKeyHash)
+          }
+
+          return builder.build()
+        })()
       : `/tBTC/mint/deposit/${activityKey}`
 
   return (

src/contexts/ThresholdContext.tsx

@@ -1,12 +1,22 @@
-import { createContext, FC, useContext, useEffect, useRef } from "react"
+import {
+  createContext,
+  FC,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react"
 import { getThresholdLibProvider, threshold } from "../utils/getThresholdLib"
 import { useLedgerLiveApp } from "./LedgerLiveAppContext"
 import { useIsActive } from "../hooks/useIsActive"
 import { useIsEmbed } from "../hooks/useIsEmbed"
 import { getEthereumDefaultProviderChainId } from "../utils/getEnvVariable"
 import { useWeb3React } from "@web3-react/core"
 import { ChainName } from "../threshold-ts/types"
-import { isL2Network } from "../networks/utils"
+import {
+  getEthereumNetworkNameFromChainId,
+  isL2Network,
+} from "../networks/utils"
 import { useNonEVMConnection } from "../hooks/useNonEVMConnection"
 
 const defaultCrossChainConfig = {
@@ -22,6 +32,7 @@ export const useThreshold = () => {
 }
 
 export const ThresholdProvider: FC = ({ children }) => {
+  const [thresholdState, setThresholdState] = useState(threshold)
   const { library } = useWeb3React()
   const hasThresholdLibConfigBeenUpdated = useRef(false)
   const { ledgerLiveAppEthereumSigner } = useLedgerLiveApp()
@@ -30,6 +41,13 @@ export const ThresholdProvider: FC = ({ children }) => {
     useNonEVMConnection()
   const { isEmbed } = useIsEmbed()
 
+  useEffect(() => {
+    const unsubscribe = threshold.subscribe(() =>
+      setThresholdState(Object.create(threshold))
+    )
+    return unsubscribe
+  }, [])
+
   useEffect(() => {
     if (isActive && chainId) {
       threshold.updateConfig({
@@ -44,39 +62,39 @@ export const ThresholdProvider: FC = ({ children }) => {
         bitcoin: threshold.config.bitcoin,
         crossChain: {
           ...defaultCrossChainConfig,
-          chainName: isL2Network(chainId) ? ChainName.Ethereum : null,
+          chainName: getEthereumNetworkNameFromChainId(chainId) as ChainName,
           isCrossChain: isL2Network(chainId),
         },
       })
       hasThresholdLibConfigBeenUpdated.current = true
     }
 
-    if (!isActive && hasThresholdLibConfigBeenUpdated.current) {
+    if (isNonEVMActive) {
       threshold.updateConfig({
-        ethereum: {
-          ...threshold.config.ethereum,
-          ethereumProviderOrSigner: getThresholdLibProvider(),
-          account: undefined,
-          chainId: getEthereumDefaultProviderChainId(),
-        },
+        ethereum: threshold.config.ethereum,
         bitcoin: threshold.config.bitcoin,
         crossChain: {
-          ...threshold.config.crossChain,
+          isCrossChain: true,
+          chainName: nonEVMChainName as Exclude<ChainName, ChainName.Ethereum>,
+          nonEVMProvider: nonEVMProvider,
         },
       })
-      hasThresholdLibConfigBeenUpdated.current = false
     }
 
-    if (isNonEVMActive) {
+    if (!isActive && hasThresholdLibConfigBeenUpdated.current) {
       threshold.updateConfig({
-        ethereum: threshold.config.ethereum,
+        ethereum: {
+          ...threshold.config.ethereum,
+          ethereumProviderOrSigner: getThresholdLibProvider(),
+          account: undefined,
+          chainId: undefined,
+        },
         bitcoin: threshold.config.bitcoin,
         crossChain: {
-          isCrossChain: true,
-          chainName: nonEVMChainName as Exclude<ChainName, ChainName.Ethereum>,
-          nonEVMProvider: nonEVMProvider,
+          ...defaultCrossChainConfig,
         },
       })
+      hasThresholdLibConfigBeenUpdated.current = false
     }
   }, [
     isActive,
@@ -89,7 +107,7 @@ export const ThresholdProvider: FC = ({ children }) => {
   ])
 
   return (
-    <ThresholdContext.Provider value={threshold}>
+    <ThresholdContext.Provider value={thresholdState}>
       {children}
     </ThresholdContext.Provider>
   )

src/hooks/tbtc/index.ts

@@ -1,9 +1,11 @@
 export * from "./useFetchDepositDetails"
+export * from "./useFetchTBTCMetrics"
 export * from "./useFetchRecentDeposits"
 export * from "./useFetchTBTCMetrics"
 export * from "./useRedemptionEstimatedFees"
 export * from "./useRequestRedemption"
 export * from "./useRevealDepositTransaction"
+export * from "./useApproveL2TBTCToken"
 export * from "./useSubscribeToOptimisticMintingFinalizedEvent"
 export * from "./useSubscribeToOptimisticMintingRequestedEvent"
 export * from "./useSubscribeToRedemptionRequestedEvent"
@@ -13,3 +15,7 @@ export * from "./useTBTCVaultContract"
 export * from "./useSubscribeToRedemptionsCompletedEvent"
 export * from "./useFindRedemptionInBitcoinTx"
 export * from "./useStarknetTBTCBalance"
+export * from "./useFetchCrossChainRedemptionDetails"
+export * from "./useFetchVaaFromTxHash"
+export * from "./useFetchL2RedemptionRequestedEvent"
+export * from "./useSubscribeToL1BitcoinRedeemerRedemptionRequestedEvent"

src/hooks/tbtc/useApproveL2TBTCToken.ts

@@ -0,0 +1,22 @@
+import { useThreshold } from "../../contexts/ThresholdContext"
+import {
+  OnErrorCallback,
+  OnSuccessCallback,
+  useSendTransactionFromFn,
+} from "../../web3/hooks"
+
+export const useApproveL2TBTCToken = (
+  onSuccess?: OnSuccessCallback,
+  onError?: OnErrorCallback
+) => {
+  const threshold = useThreshold()
+  const pendingText =
+    "Approving tBTC for cross-chain redemption. Please sign in your wallet."
+
+  return useSendTransactionFromFn(
+    threshold.tbtc.approveL2TBTCToken,
+    onSuccess,
+    onError,
+    pendingText
+  )
+}