diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx index d9b2fdc9f..bece62291 100644 --- a/dapp/src/DApp.tsx +++ b/dapp/src/DApp.tsx @@ -1,7 +1,7 @@ import React from "react" import { Box, ChakraProvider } from "@chakra-ui/react" import { RouterProvider } from "react-router-dom" -import { useSentry, useInitializeAcreSdk } from "./hooks" +import { useInitializeAcreSdk } from "./hooks" import theme from "./theme" import { DocsDrawerContextProvider, @@ -15,6 +15,7 @@ import Sidebar from "./components/Sidebar" import DocsDrawer from "./components/DocsDrawer" import GlobalStyles from "./components/GlobalStyles" import { router } from "./router" +import { useSentry } from "./hooks/sentry" function DApp() { // TODO: Let's uncomment when dark mode is ready diff --git a/dapp/src/acre-react/hooks/useStakeFlow.ts b/dapp/src/acre-react/hooks/useStakeFlow.ts index 5041d0734..a04e98801 100644 --- a/dapp/src/acre-react/hooks/useStakeFlow.ts +++ b/dapp/src/acre-react/hooks/useStakeFlow.ts @@ -1,5 +1,9 @@ import { useCallback, useState } from "react" -import { StakeInitialization, EthereumAddress } from "@acre-btc/sdk" +import { + StakeInitialization, + EthereumAddress, + DepositReceipt, +} from "@acre-btc/sdk" import { useAcreContext } from "./useAcreContext" export type UseStakeFlowReturn = { @@ -11,6 +15,7 @@ export type UseStakeFlowReturn = { btcAddress?: string signMessage: () => Promise stake: () => Promise + depositReceipt?: DepositReceipt } export function useStakeFlow(): UseStakeFlowReturn { @@ -21,6 +26,10 @@ export function useStakeFlow(): UseStakeFlowReturn { ) const [btcAddress, setBtcAddress] = useState(undefined) + const [depositReceipt, setDepositReceipt] = useState< + DepositReceipt | undefined + >(undefined) + const initStake = useCallback( async ( bitcoinRecoveryAddress: string, @@ -36,10 +45,13 @@ export function useStakeFlow(): UseStakeFlowReturn { ) const btcDepositAddress = await initializedStakeFlow.getBitcoinAddress() + const btcDepositReceipt = initializedStakeFlow.getDepositReceipt() + // TODO: add loading indicators or we can `@tanstack/react-query` lib for // handling requests. setStakeFlow(initializedStakeFlow) setBtcAddress(btcDepositAddress) + setDepositReceipt(btcDepositReceipt) }, [isInitialized, acre], ) @@ -61,5 +73,6 @@ export function useStakeFlow(): UseStakeFlowReturn { btcAddress, signMessage, stake, + depositReceipt, } } diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx index 8273aff92..c5b3afb0c 100644 --- a/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx @@ -3,6 +3,7 @@ import { useDepositBTCTransaction, useExecuteFunction, useModalFlowContext, + useSendGeneratedDepositToSentry, useStakeFlowContext, useTransactionContext, } from "#/hooks" @@ -16,6 +17,7 @@ export default function DepositBTCModal() { const { tokenAmount } = useTransactionContext() const { setStatus } = useModalFlowContext() const { btcAddress, stake } = useStakeFlowContext() + useSendGeneratedDepositToSentry() const onStakeBTCSuccess = useCallback(() => { setStatus(PROCESS_STATUSES.SUCCEEDED) diff --git a/dapp/src/hooks/index.ts b/dapp/src/hooks/index.ts index 16a760198..2ccfa239a 100644 --- a/dapp/src/hooks/index.ts +++ b/dapp/src/hooks/index.ts @@ -10,6 +10,6 @@ export * from "./useTransactionDetails" export * from "./useDepositBTCTransaction" export * from "./useInitializeAcreSdk" export * from "./useTransactionHistoryTable" -export * from "./useSentry" export * from "./useExecuteFunction" export * from "./useStakeFlowContext" +export * from "./useSendGeneratedDepositToSentry" diff --git a/dapp/src/hooks/sentry/index.ts b/dapp/src/hooks/sentry/index.ts new file mode 100644 index 000000000..137677560 --- /dev/null +++ b/dapp/src/hooks/sentry/index.ts @@ -0,0 +1,2 @@ +export * from "./useSentry" +export * from "./useCaptureMessage" diff --git a/dapp/src/hooks/sentry/useCaptureMessage.ts b/dapp/src/hooks/sentry/useCaptureMessage.ts new file mode 100644 index 000000000..849574e99 --- /dev/null +++ b/dapp/src/hooks/sentry/useCaptureMessage.ts @@ -0,0 +1,16 @@ +import { useCallback } from "react" +import { captureMessage } from "#/sdk/sentry" + +export const useCaptureMessage = () => + useCallback( + ( + message: string, + params?: { [key: string]: unknown }, + tags?: { [key: string]: string }, + ) => { + if (import.meta.env.VITE_SENTRY_SUPPORT) { + captureMessage(message, params, tags) + } + }, + [], + ) diff --git a/dapp/src/hooks/useSentry.ts b/dapp/src/hooks/sentry/useSentry.ts similarity index 100% rename from dapp/src/hooks/useSentry.ts rename to dapp/src/hooks/sentry/useSentry.ts diff --git a/dapp/src/hooks/useSendGeneratedDepositToSentry.ts b/dapp/src/hooks/useSendGeneratedDepositToSentry.ts new file mode 100644 index 000000000..e5298fba1 --- /dev/null +++ b/dapp/src/hooks/useSendGeneratedDepositToSentry.ts @@ -0,0 +1,36 @@ +import { useEffect } from "react" +import { captureMessage } from "#/sdk/sentry" +import { useWalletContext } from "./useWalletContext" +import { useStakeFlowContext } from "./useStakeFlowContext" + +export function useSendGeneratedDepositToSentry() { + const { depositReceipt, btcAddress } = useStakeFlowContext() + const { ethAccount } = useWalletContext() + + useEffect(() => { + if (depositReceipt) { + const { + depositor, + blindingFactor, + walletPublicKeyHash, + refundPublicKeyHash, + refundLocktime, + extraData, + } = depositReceipt + captureMessage( + `Generated deposit [${btcAddress}]`, + { + depositor: depositor.identifierHex, + blindingFactor: blindingFactor.toString(), + walletPublicKeyHash: walletPublicKeyHash.toString(), + refundPublicKeyHash: refundPublicKeyHash.toString(), + refundLocktime: refundLocktime.toString(), + extraData: extraData?.toString(), + }, + { + ethAddress: `${ethAccount?.address}`, + }, + ) + } + }, [btcAddress, depositReceipt, ethAccount]) +} diff --git a/dapp/src/sdk/sentry/index.ts b/dapp/src/sdk/sentry/index.ts index 8a6fd63fe..9e1b0e61e 100644 --- a/dapp/src/sdk/sentry/index.ts +++ b/dapp/src/sdk/sentry/index.ts @@ -9,3 +9,21 @@ export const initializeSentry = (dsn: string) => { tracesSampleRate: 1.0, }) } + +export const captureMessage = ( + message: string, + params?: { [key: string]: unknown }, + tags?: { [key: string]: string }, +) => { + Sentry.withScope((scope) => { + if (params) { + scope.setExtras(params) + } + + if (tags) { + scope.setTags(tags) + } + + Sentry.captureMessage(message) + }) +}