From 9a59ecfcf005e9d47c21510130daa22760970fdf Mon Sep 17 00:00:00 2001 From: sehyunc <41171808+sehyunc@users.noreply.github.com> Date: Tue, 19 Nov 2024 17:15:24 -0800 Subject: [PATCH 1/6] metrics: fix env name --- app/components/datadog.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/components/datadog.tsx b/app/components/datadog.tsx index 4d73d368..407d8784 100644 --- a/app/components/datadog.tsx +++ b/app/components/datadog.tsx @@ -25,8 +25,8 @@ export function LazyDatadog() { applicationId: process.env.NEXT_PUBLIC_DATADOG_APPLICATION_ID, clientToken: process.env.NEXT_PUBLIC_DATADOG_CLIENT_TOKEN, site: "us5.datadoghq.com", - service: "testnet-interface", - env: "testnet", + service: `${process.env.NEXT_PUBLIC_DD_ENV}-interface`, + env: process.env.NEXT_PUBLIC_DD_ENV, version: "1.0.0", sessionSampleRate: 100, sessionReplaySampleRate: 100, @@ -40,8 +40,8 @@ export function LazyDatadog() { datadogLogs.init({ clientToken: process.env.NEXT_PUBLIC_DATADOG_CLIENT_TOKEN, site: "us5.datadoghq.com", - service: "testnet-interface", - env: "testnet", + service: `${process.env.NEXT_PUBLIC_DD_ENV}-interface`, + env: process.env.NEXT_PUBLIC_DD_ENV, forwardErrorsToLogs: true, forwardConsoleLogs: "all", sessionSampleRate: 100, From 606f352589c84340c667b3c400e729c88cbbd618 Mon Sep 17 00:00:00 2001 From: sehyunc <41171808+sehyunc@users.noreply.github.com> Date: Tue, 19 Nov 2024 18:01:50 -0800 Subject: [PATCH 2/6] transfer dialog: track bridge events --- components/dialogs/transfer/usdc-form.tsx | 375 +++++++++++++++++++--- hooks/use-event-tracker.ts | 35 ++ 2 files changed, 366 insertions(+), 44 deletions(-) create mode 100644 hooks/use-event-tracker.ts diff --git a/components/dialogs/transfer/usdc-form.tsx b/components/dialogs/transfer/usdc-form.tsx index 3df97a88..428dd21b 100644 --- a/components/dialogs/transfer/usdc-form.tsx +++ b/components/dialogs/transfer/usdc-form.tsx @@ -63,6 +63,7 @@ import { Separator } from "@/components/ui/separator" import { useAllowanceRequired } from "@/hooks/use-allowance-required" import { useCheckChain } from "@/hooks/use-check-chain" import { useDeposit } from "@/hooks/use-deposit" +import { EventNames, useEventTracker } from "@/hooks/use-event-tracker" import { useMediaQuery } from "@/hooks/use-media-query" import { useSwapConfirmation } from "@/hooks/use-swap-confirmation" import { useTransactionConfirmation } from "@/hooks/use-transaction-confirmation" @@ -296,6 +297,35 @@ export function USDCForm({ ...bridgeQuote?.transactionRequest, type: "legacy", }, + { + onSettled(_, error) { + const context = { + fromChainId: bridgeQuote?.action.fromChainId, + fromTokenMint: bridgeQuote?.action.fromToken.address, + fromTokenTicker: bridgeQuote?.action.fromToken.symbol, + fromTokenAmount: formatUnits( + BigInt(bridgeQuote?.estimate.fromAmount ?? 0), + bridgeQuote?.action.fromToken.decimals ?? 0, + ), + toChainId: bridgeQuote?.action.toChainId, + toTokenMint: bridgeQuote?.action.toToken.address, + toTokenTicker: bridgeQuote?.action.toToken.symbol, + toTokenAmount: formatUnits( + BigInt(bridgeQuote?.estimate.toAmount ?? 0), + bridgeQuote?.action.toToken.decimals ?? 0, + ), + tool: bridgeQuote?.tool, + } + if (error?.name) { + track(EventNames.BRIDGE_ERROR, { + ...context, + ...error, + }) + } else { + track(EventNames.BRIDGE_COMPLETED, context) + } + }, + }, ), ) }, @@ -328,13 +358,37 @@ export function USDCForm({ setCurrentStep((prev) => prev + 1) if (allowanceRequired) { await switchChainAndInvoke(chain.id, () => - handleApprove({ - address: USDC_L2_TOKEN.address, - args: [ - process.env.NEXT_PUBLIC_PERMIT2_CONTRACT as `0x${string}`, - UNLIMITED_ALLOWANCE, - ], - }), + handleApprove( + { + address: USDC_L2_TOKEN.address, + args: [ + process.env.NEXT_PUBLIC_PERMIT2_CONTRACT as `0x${string}`, + UNLIMITED_ALLOWANCE, + ], + }, + { + onSettled(_, error) { + const context = { + mint: USDC_L2_TOKEN.address, + amount: + network !== chain.id + ? formatUnits( + BigInt(bridge.receivedAmount ?? 0), + USDC_L2_TOKEN.decimals, + ) + : amount, + } + if (error?.name) { + track(EventNames.APPROVE_DARKPOOL_ERROR, { + ...context, + ...error, + }) + } else { + track(EventNames.APPROVE_DARKPOOL_COMPLETED, context) + } + }, + }, + ), ) } else { await switchChainAndInvoke(chain.id, () => @@ -382,13 +436,37 @@ export function USDCForm({ setCurrentStep((prev) => prev + 1) if (allowanceRequired) { await switchChainAndInvoke(chain.id, () => - handleApprove({ - address: USDC_L2_TOKEN.address, - args: [ - process.env.NEXT_PUBLIC_PERMIT2_CONTRACT as `0x${string}`, - UNLIMITED_ALLOWANCE, - ], - }), + handleApprove( + { + address: USDC_L2_TOKEN.address, + args: [ + process.env.NEXT_PUBLIC_PERMIT2_CONTRACT as `0x${string}`, + UNLIMITED_ALLOWANCE, + ], + }, + { + onSettled(_, error) { + const context = { + mint: USDC_L2_TOKEN.address, + amount: + network !== chain.id + ? formatUnits( + BigInt(bridge.receivedAmount ?? 0), + USDC_L2_TOKEN.decimals, + ) + : amount, + } + if (error?.name) { + track(EventNames.APPROVE_DARKPOOL_ERROR, { + ...context, + ...error, + }) + } else { + track(EventNames.APPROVE_DARKPOOL_COMPLETED, context) + } + }, + }, + ), ) } else { await switchChainAndInvoke(chain.id, () => @@ -436,6 +514,7 @@ export function USDCForm({ decimals: USDCE_L2_TOKEN.decimals, }) + const { track } = useEventTracker() const { writeContract: handleApproveSwap, status: approveSwapStatus, @@ -462,6 +541,34 @@ export function USDCForm({ ...swapQuote?.transactionRequest, type: "legacy", }, + { + onSettled(_, error, variables) { + const context = { + chainId: variables.chainId, + fromTokenMint: swapQuote?.action.fromToken.address, + fromTokenTicker: swapQuote?.action.fromToken.symbol, + fromTokenAmount: formatUnits( + BigInt(swapQuote?.estimate.fromAmount ?? 0), + swapQuote?.action.fromToken.decimals ?? 0, + ), + toTokenMint: swapQuote?.action.toToken.address, + toTokenTicker: swapQuote?.action.toToken.symbol, + toTokenAmount: formatUnits( + BigInt(swapQuote?.estimate.toAmount ?? 0), + swapQuote?.action.toToken.decimals ?? 0, + ), + tool: swapQuote?.tool, + } + if (error?.name) { + track(EventNames.SWAP_ERROR, { + ...context, + ...error, + }) + } else { + track(EventNames.SWAP_COMPLETED, context) + } + }, + }, ), ) }, @@ -484,13 +591,37 @@ export function USDCForm({ setCurrentStep((prev) => prev + 1) if (allowanceRequired) { await switchChainAndInvoke(chain.id, () => - handleApprove({ - address: USDC_L2_TOKEN.address, - args: [ - process.env.NEXT_PUBLIC_PERMIT2_CONTRACT as `0x${string}`, - UNLIMITED_ALLOWANCE, - ], - }), + handleApprove( + { + address: USDC_L2_TOKEN.address, + args: [ + process.env.NEXT_PUBLIC_PERMIT2_CONTRACT as `0x${string}`, + UNLIMITED_ALLOWANCE, + ], + }, + { + onSettled(_, error) { + const context = { + mint: USDC_L2_TOKEN.address, + amount: + network !== chain.id + ? formatUnits( + BigInt(swap.receivedAmount ?? 0), + USDC_L2_TOKEN.decimals, + ) + : amount, + } + if (error?.name) { + track(EventNames.APPROVE_DARKPOOL_ERROR, { + ...context, + ...error, + }) + } else { + track(EventNames.APPROVE_DARKPOOL_COMPLETED, context) + } + }, + }, + ), ) } else { await switchChainAndInvoke(chain.id, () => @@ -573,6 +704,13 @@ export function USDCForm({ const handleDepositSuccess = (data: any) => { setTaskId(data.taskId) // form.reset() + track(EventNames.DEPOSIT_TASK_STARTED, { + amount, + chainId: chain.id, + mint, + taskId: data.taskId, + ticker: USDC_L2_TOKEN.ticker, + }) onSuccess?.() const message = constructStartToastMessage(UpdateType.Deposit) toast.loading(message, { @@ -657,14 +795,37 @@ export function USDCForm({ } if (bridgeAllowanceRequired) { await switchChainAndInvoke(mainnet.id, async () => - handleApproveBridge({ - chainId: mainnet.id, - address: USDC_L1_TOKEN.address, - args: [ - bridgeQuote?.estimate.approvalAddress as `0x${string}`, - BigInt(bridgeQuote?.estimate.fromAmount ?? UNLIMITED_ALLOWANCE), - ], - }), + handleApproveBridge( + { + chainId: mainnet.id, + address: USDC_L1_TOKEN.address, + args: [ + bridgeQuote?.estimate.approvalAddress as `0x${string}`, + BigInt(bridgeQuote?.estimate.fromAmount ?? UNLIMITED_ALLOWANCE), + ], + }, + { + onSettled(_, error, variables) { + const context = { + chainId: variables.chainId, + mint: USDC_L1_TOKEN.address, + ticker: USDC_L1_TOKEN.ticker, + amount: formatUnits( + variables.args[1], + USDC_L1_TOKEN.decimals, + ), + } + if (error?.name) { + track(EventNames.APPROVE_BRIDGE_ERROR, { + ...context, + ...error, + }) + } else { + track(EventNames.APPROVE_BRIDGE_COMPLETED, context) + } + }, + }, + ), ) } else { await switchChainAndInvoke(mainnet.id, async () => @@ -674,6 +835,35 @@ export function USDCForm({ ...bridgeQuote?.transactionRequest, type: "legacy", }, + { + onSettled(_, error) { + const context = { + fromChainId: bridgeQuote?.action.fromChainId, + fromTokenMint: bridgeQuote?.action.fromToken.address, + fromTokenTicker: bridgeQuote?.action.fromToken.symbol, + fromTokenAmount: formatUnits( + BigInt(bridgeQuote?.estimate.fromAmount ?? 0), + bridgeQuote?.action.fromToken.decimals ?? 0, + ), + toChainId: bridgeQuote?.action.toChainId, + toTokenMint: bridgeQuote?.action.toToken.address, + toTokenTicker: bridgeQuote?.action.toToken.symbol, + toTokenAmount: formatUnits( + BigInt(bridgeQuote?.estimate.toAmount ?? 0), + bridgeQuote?.action.toToken.decimals ?? 0, + ), + tool: bridgeQuote?.tool, + } + if (error?.name) { + track(EventNames.BRIDGE_ERROR, { + ...context, + ...error, + }) + } else { + track(EventNames.BRIDGE_COMPLETED, context) + } + }, + }, ), ) } @@ -685,7 +875,35 @@ export function USDCForm({ }) return } else { - handleSolanaBridge(bridgeQuote.transactionRequest) + handleSolanaBridge(bridgeQuote.transactionRequest, { + onSettled(_, error) { + const context = { + fromChainId: bridgeQuote.action.fromChainId, + fromTokenMint: bridgeQuote.action.fromToken.address, + fromTokenTicker: bridgeQuote.action.fromToken.symbol, + fromTokenAmount: formatUnits( + BigInt(bridgeQuote.action.fromAmount ?? 0), + bridgeQuote.action.fromToken.decimals ?? 0, + ), + toChainId: bridgeQuote.action.toChainId, + toTokenMint: bridgeQuote.action.toToken.address, + toTokenTicker: bridgeQuote.action.toToken.symbol, + toTokenAmount: formatUnits( + BigInt(bridgeQuote.estimate.toAmount ?? 0), + bridgeQuote.action.toToken.decimals ?? 0, + ), + tool: bridgeQuote.tool, + } + if (error?.name) { + track(EventNames.BRIDGE_ERROR, { + ...context, + ...error, + }) + } else { + track(EventNames.BRIDGE_COMPLETED, context) + } + }, + }) } } else if (swapRequired) { if (!swapQuote) { @@ -696,13 +914,36 @@ export function USDCForm({ } if (swapAllowanceRequired) { await switchChainAndInvoke(chain.id, () => - handleApproveSwap({ - address: USDCE_L2_TOKEN.address, - args: [ - swapQuote.estimate.approvalAddress as `0x${string}`, - BigInt(swapQuote?.estimate.fromAmount ?? UNLIMITED_ALLOWANCE), - ], - }), + handleApproveSwap( + { + address: USDCE_L2_TOKEN.address, + args: [ + swapQuote.estimate.approvalAddress as `0x${string}`, + BigInt(swapQuote?.estimate.fromAmount ?? UNLIMITED_ALLOWANCE), + ], + }, + { + onSettled(_, error, variables) { + const context = { + chainId: variables.chainId, + mint: variables.address, + ticker: USDCE_L2_TOKEN.ticker, + amount: formatUnits( + variables.args[1], + USDCE_L2_TOKEN.decimals, + ), + } + if (error?.name) { + track(EventNames.APPROVE_SWAP_ERROR, { + ...context, + ...error, + }) + } else { + track(EventNames.APPROVE_SWAP_COMPLETED, context) + } + }, + }, + ), ) } else { await switchChainAndInvoke(chain.id, () => @@ -712,18 +953,64 @@ export function USDCForm({ ...swapQuote.transactionRequest, type: "legacy", }, + { + onSettled(_, error, variables) { + const context = { + chainId: variables.chainId, + fromTokenMint: swapQuote?.action.fromToken.address, + fromTokenTicker: swapQuote?.action.fromToken.symbol, + fromTokenAmount: formatUnits( + BigInt(swapQuote?.estimate.fromAmount ?? 0), + swapQuote?.action.fromToken.decimals ?? 0, + ), + toTokenMint: swapQuote?.action.toToken.address, + toTokenTicker: swapQuote?.action.toToken.symbol, + toTokenAmount: formatUnits( + BigInt(swapQuote?.estimate.toAmount ?? 0), + swapQuote?.action.toToken.decimals ?? 0, + ), + tool: swapQuote?.tool, + } + if (error?.name) { + track(EventNames.SWAP_ERROR, { + ...context, + ...error, + }) + } else { + track(EventNames.SWAP_COMPLETED, context) + } + }, + }, ), ) } } else if (allowanceRequired) { await switchChainAndInvoke(chain.id, () => - handleApprove({ - address: USDC_L2_TOKEN.address, - args: [ - process.env.NEXT_PUBLIC_PERMIT2_CONTRACT as `0x${string}`, - UNLIMITED_ALLOWANCE, - ], - }), + handleApprove( + { + address: USDC_L2_TOKEN.address, + args: [ + process.env.NEXT_PUBLIC_PERMIT2_CONTRACT as `0x${string}`, + UNLIMITED_ALLOWANCE, + ], + }, + { + onSettled(_, error) { + const context = { + mint: USDC_L2_TOKEN.address, + amount, + } + if (error?.name) { + track(EventNames.APPROVE_DARKPOOL_ERROR, { + ...context, + ...error, + }) + } else { + track(EventNames.APPROVE_DARKPOOL_COMPLETED, context) + } + }, + }, + ), ) } else { await switchChainAndInvoke(chain.id, () => diff --git a/hooks/use-event-tracker.ts b/hooks/use-event-tracker.ts new file mode 100644 index 00000000..3fad246e --- /dev/null +++ b/hooks/use-event-tracker.ts @@ -0,0 +1,35 @@ +import { datadogRum } from "@datadog/browser-rum" +import { useWalletId } from "@renegade-fi/react" +import { useAccount } from "wagmi" + +export function useEventTracker() { + const walletId = useWalletId() + const { connector, chainId } = useAccount() + const track = (event: string, params: Record) => { + const context = { + ...params, + walletId, + connector: connector?.name, + chainId, + } + console.log("track", { event, context }) + datadogRum.addAction(event, context) + } + + return { track } +} + +export const EventNames = { + APPROVE_SWAP_COMPLETED: "approve_swap_completed", + SWAP_COMPLETED: "swap_completed", + DEPOSIT_TASK_STARTED: "deposit_task_started", + APPROVE_BRIDGE_COMPLETED: "approve_bridge_completed", + BRIDGE_COMPLETED: "bridge_completed", + APPROVE_DARKPOOL_COMPLETED: "approve_darkpool_completed", + APPROVE_SWAP_ERROR: "approve_swap_error", + SWAP_ERROR: "swap_error", + DEPOSIT_ERROR: "deposit_error", + APPROVE_BRIDGE_ERROR: "approve_bridge_error", + BRIDGE_ERROR: "bridge_error", + APPROVE_DARKPOOL_ERROR: "approve_darkpool_error", +} as const From 019a0a2d589fa21f763855af6107ff935b9e93c9 Mon Sep 17 00:00:00 2001 From: sehyunc <41171808+sehyunc@users.noreply.github.com> Date: Wed, 20 Nov 2024 18:42:49 -0800 Subject: [PATCH 3/6] s --- components/dialogs/transfer/usdc-form.tsx | 101 +++------------------- hooks/use-event-tracker.ts | 32 ++++--- 2 files changed, 31 insertions(+), 102 deletions(-) diff --git a/components/dialogs/transfer/usdc-form.tsx b/components/dialogs/transfer/usdc-form.tsx index 428dd21b..8bb1bf38 100644 --- a/components/dialogs/transfer/usdc-form.tsx +++ b/components/dialogs/transfer/usdc-form.tsx @@ -316,14 +316,7 @@ export function USDCForm({ ), tool: bridgeQuote?.tool, } - if (error?.name) { - track(EventNames.BRIDGE_ERROR, { - ...context, - ...error, - }) - } else { - track(EventNames.BRIDGE_COMPLETED, context) - } + trackMutation(EventNames.BRIDGE, context, error) }, }, ), @@ -378,14 +371,7 @@ export function USDCForm({ ) : amount, } - if (error?.name) { - track(EventNames.APPROVE_DARKPOOL_ERROR, { - ...context, - ...error, - }) - } else { - track(EventNames.APPROVE_DARKPOOL_COMPLETED, context) - } + trackMutation(EventNames.APPROVE_DARKPOOL, context, error) }, }, ), @@ -456,14 +442,7 @@ export function USDCForm({ ) : amount, } - if (error?.name) { - track(EventNames.APPROVE_DARKPOOL_ERROR, { - ...context, - ...error, - }) - } else { - track(EventNames.APPROVE_DARKPOOL_COMPLETED, context) - } + trackMutation(EventNames.APPROVE_DARKPOOL, context, error) }, }, ), @@ -514,7 +493,7 @@ export function USDCForm({ decimals: USDCE_L2_TOKEN.decimals, }) - const { track } = useEventTracker() + const { track, trackMutation } = useEventTracker() const { writeContract: handleApproveSwap, status: approveSwapStatus, @@ -559,14 +538,7 @@ export function USDCForm({ ), tool: swapQuote?.tool, } - if (error?.name) { - track(EventNames.SWAP_ERROR, { - ...context, - ...error, - }) - } else { - track(EventNames.SWAP_COMPLETED, context) - } + trackMutation(EventNames.SWAP, context, error) }, }, ), @@ -611,14 +583,7 @@ export function USDCForm({ ) : amount, } - if (error?.name) { - track(EventNames.APPROVE_DARKPOOL_ERROR, { - ...context, - ...error, - }) - } else { - track(EventNames.APPROVE_DARKPOOL_COMPLETED, context) - } + trackMutation(EventNames.APPROVE_DARKPOOL, context, error) }, }, ), @@ -815,14 +780,7 @@ export function USDCForm({ USDC_L1_TOKEN.decimals, ), } - if (error?.name) { - track(EventNames.APPROVE_BRIDGE_ERROR, { - ...context, - ...error, - }) - } else { - track(EventNames.APPROVE_BRIDGE_COMPLETED, context) - } + trackMutation(EventNames.APPROVE_BRIDGE, context, error) }, }, ), @@ -854,14 +812,7 @@ export function USDCForm({ ), tool: bridgeQuote?.tool, } - if (error?.name) { - track(EventNames.BRIDGE_ERROR, { - ...context, - ...error, - }) - } else { - track(EventNames.BRIDGE_COMPLETED, context) - } + trackMutation(EventNames.BRIDGE, context, error) }, }, ), @@ -894,14 +845,7 @@ export function USDCForm({ ), tool: bridgeQuote.tool, } - if (error?.name) { - track(EventNames.BRIDGE_ERROR, { - ...context, - ...error, - }) - } else { - track(EventNames.BRIDGE_COMPLETED, context) - } + trackMutation(EventNames.BRIDGE, context, error) }, }) } @@ -933,14 +877,7 @@ export function USDCForm({ USDCE_L2_TOKEN.decimals, ), } - if (error?.name) { - track(EventNames.APPROVE_SWAP_ERROR, { - ...context, - ...error, - }) - } else { - track(EventNames.APPROVE_SWAP_COMPLETED, context) - } + trackMutation(EventNames.APPROVE_SWAP, context, error) }, }, ), @@ -971,14 +908,7 @@ export function USDCForm({ ), tool: swapQuote?.tool, } - if (error?.name) { - track(EventNames.SWAP_ERROR, { - ...context, - ...error, - }) - } else { - track(EventNames.SWAP_COMPLETED, context) - } + trackMutation(EventNames.SWAP, context, error) }, }, ), @@ -1000,14 +930,7 @@ export function USDCForm({ mint: USDC_L2_TOKEN.address, amount, } - if (error?.name) { - track(EventNames.APPROVE_DARKPOOL_ERROR, { - ...context, - ...error, - }) - } else { - track(EventNames.APPROVE_DARKPOOL_COMPLETED, context) - } + trackMutation(EventNames.APPROVE_DARKPOOL, context, error) }, }, ), diff --git a/hooks/use-event-tracker.ts b/hooks/use-event-tracker.ts index 3fad246e..ece46c6e 100644 --- a/hooks/use-event-tracker.ts +++ b/hooks/use-event-tracker.ts @@ -1,6 +1,6 @@ import { datadogRum } from "@datadog/browser-rum" import { useWalletId } from "@renegade-fi/react" -import { useAccount } from "wagmi" +import { BaseError, useAccount } from "wagmi" export function useEventTracker() { const walletId = useWalletId() @@ -16,20 +16,26 @@ export function useEventTracker() { datadogRum.addAction(event, context) } - return { track } + const trackMutation = ( + name: string, + params: Record, + error?: Error | null, + ) => { + if (error?.name) { + track(`${name}_error`, { ...params, ...error }) + } else { + track(`${name}_completed`, params) + } + } + + return { track, trackMutation } } export const EventNames = { - APPROVE_SWAP_COMPLETED: "approve_swap_completed", - SWAP_COMPLETED: "swap_completed", + APPROVE_SWAP: "approve_swap", + SWAP: "swap", DEPOSIT_TASK_STARTED: "deposit_task_started", - APPROVE_BRIDGE_COMPLETED: "approve_bridge_completed", - BRIDGE_COMPLETED: "bridge_completed", - APPROVE_DARKPOOL_COMPLETED: "approve_darkpool_completed", - APPROVE_SWAP_ERROR: "approve_swap_error", - SWAP_ERROR: "swap_error", - DEPOSIT_ERROR: "deposit_error", - APPROVE_BRIDGE_ERROR: "approve_bridge_error", - BRIDGE_ERROR: "bridge_error", - APPROVE_DARKPOOL_ERROR: "approve_darkpool_error", + APPROVE_BRIDGE: "approve_bridge", + BRIDGE: "bridge", + APPROVE_DARKPOOL: "approve_darkpool", } as const From 76855387d2ca938d191c3727ad73dd363074d6da Mon Sep 17 00:00:00 2001 From: sehyunc <41171808+sehyunc@users.noreply.github.com> Date: Wed, 20 Nov 2024 18:49:00 -0800 Subject: [PATCH 4/6] s --- components/dialogs/transfer/helpers.ts | 23 ++++ components/dialogs/transfer/usdc-form.tsx | 121 ++++++---------------- 2 files changed, 54 insertions(+), 90 deletions(-) diff --git a/components/dialogs/transfer/helpers.ts b/components/dialogs/transfer/helpers.ts index 86438735..b3ecd1aa 100644 --- a/components/dialogs/transfer/helpers.ts +++ b/components/dialogs/transfer/helpers.ts @@ -1,3 +1,4 @@ +import { LiFiStep } from "@lifi/sdk" import { Token } from "@renegade-fi/react" import { QueryClient } from "@tanstack/react-query" import { formatUnits } from "viem" @@ -128,3 +129,25 @@ export function getExplorerLink( } return `${explorerUrl}/tx/${txHash}` } + +export function formatQuoteToEventParams(quote?: LiFiStep) { + if (!quote) return {} + const { action, estimate } = quote + return { + fromChainId: action.fromChainId, + fromTokenMint: action.fromToken.address, + fromTokenTicker: action.fromToken.symbol, + fromTokenAmount: formatUnits( + BigInt(estimate.fromAmount ?? 0), + action.fromToken.decimals ?? 0, + ), + toChainId: action.toChainId, + toTokenMint: action.toToken.address, + toTokenTicker: action.toToken.symbol, + toTokenAmount: formatUnits( + BigInt(estimate.toAmount ?? 0), + action.toToken.decimals ?? 0, + ), + tool: quote.tool, + } +} diff --git a/components/dialogs/transfer/usdc-form.tsx b/components/dialogs/transfer/usdc-form.tsx index 8bb1bf38..c3e7fc47 100644 --- a/components/dialogs/transfer/usdc-form.tsx +++ b/components/dialogs/transfer/usdc-form.tsx @@ -20,6 +20,7 @@ import { checkAmount, checkBalance, formSchema, + formatQuoteToEventParams, normalizeStatus, } from "@/components/dialogs/transfer/helpers" import { useBridgeConfirmation } from "@/components/dialogs/transfer/hooks/use-bridge-confirmation" @@ -299,24 +300,11 @@ export function USDCForm({ }, { onSettled(_, error) { - const context = { - fromChainId: bridgeQuote?.action.fromChainId, - fromTokenMint: bridgeQuote?.action.fromToken.address, - fromTokenTicker: bridgeQuote?.action.fromToken.symbol, - fromTokenAmount: formatUnits( - BigInt(bridgeQuote?.estimate.fromAmount ?? 0), - bridgeQuote?.action.fromToken.decimals ?? 0, - ), - toChainId: bridgeQuote?.action.toChainId, - toTokenMint: bridgeQuote?.action.toToken.address, - toTokenTicker: bridgeQuote?.action.toToken.symbol, - toTokenAmount: formatUnits( - BigInt(bridgeQuote?.estimate.toAmount ?? 0), - bridgeQuote?.action.toToken.decimals ?? 0, - ), - tool: bridgeQuote?.tool, - } - trackMutation(EventNames.BRIDGE, context, error) + trackMutation( + EventNames.BRIDGE, + formatQuoteToEventParams(bridgeQuote), + error, + ) }, }, ), @@ -362,6 +350,7 @@ export function USDCForm({ { onSettled(_, error) { const context = { + chainId: chain.id, mint: USDC_L2_TOKEN.address, amount: network !== chain.id @@ -433,6 +422,7 @@ export function USDCForm({ { onSettled(_, error) { const context = { + chainId: chain.id, mint: USDC_L2_TOKEN.address, amount: network !== chain.id @@ -521,24 +511,12 @@ export function USDCForm({ type: "legacy", }, { - onSettled(_, error, variables) { - const context = { - chainId: variables.chainId, - fromTokenMint: swapQuote?.action.fromToken.address, - fromTokenTicker: swapQuote?.action.fromToken.symbol, - fromTokenAmount: formatUnits( - BigInt(swapQuote?.estimate.fromAmount ?? 0), - swapQuote?.action.fromToken.decimals ?? 0, - ), - toTokenMint: swapQuote?.action.toToken.address, - toTokenTicker: swapQuote?.action.toToken.symbol, - toTokenAmount: formatUnits( - BigInt(swapQuote?.estimate.toAmount ?? 0), - swapQuote?.action.toToken.decimals ?? 0, - ), - tool: swapQuote?.tool, - } - trackMutation(EventNames.SWAP, context, error) + onSettled(_, error) { + trackMutation( + EventNames.SWAP, + formatQuoteToEventParams(swapQuote), + error, + ) }, }, ), @@ -574,6 +552,7 @@ export function USDCForm({ { onSettled(_, error) { const context = { + chainId: chain.id, mint: USDC_L2_TOKEN.address, amount: network !== chain.id @@ -795,24 +774,11 @@ export function USDCForm({ }, { onSettled(_, error) { - const context = { - fromChainId: bridgeQuote?.action.fromChainId, - fromTokenMint: bridgeQuote?.action.fromToken.address, - fromTokenTicker: bridgeQuote?.action.fromToken.symbol, - fromTokenAmount: formatUnits( - BigInt(bridgeQuote?.estimate.fromAmount ?? 0), - bridgeQuote?.action.fromToken.decimals ?? 0, - ), - toChainId: bridgeQuote?.action.toChainId, - toTokenMint: bridgeQuote?.action.toToken.address, - toTokenTicker: bridgeQuote?.action.toToken.symbol, - toTokenAmount: formatUnits( - BigInt(bridgeQuote?.estimate.toAmount ?? 0), - bridgeQuote?.action.toToken.decimals ?? 0, - ), - tool: bridgeQuote?.tool, - } - trackMutation(EventNames.BRIDGE, context, error) + trackMutation( + EventNames.BRIDGE, + formatQuoteToEventParams(bridgeQuote), + error, + ) }, }, ), @@ -828,24 +794,11 @@ export function USDCForm({ } else { handleSolanaBridge(bridgeQuote.transactionRequest, { onSettled(_, error) { - const context = { - fromChainId: bridgeQuote.action.fromChainId, - fromTokenMint: bridgeQuote.action.fromToken.address, - fromTokenTicker: bridgeQuote.action.fromToken.symbol, - fromTokenAmount: formatUnits( - BigInt(bridgeQuote.action.fromAmount ?? 0), - bridgeQuote.action.fromToken.decimals ?? 0, - ), - toChainId: bridgeQuote.action.toChainId, - toTokenMint: bridgeQuote.action.toToken.address, - toTokenTicker: bridgeQuote.action.toToken.symbol, - toTokenAmount: formatUnits( - BigInt(bridgeQuote.estimate.toAmount ?? 0), - bridgeQuote.action.toToken.decimals ?? 0, - ), - tool: bridgeQuote.tool, - } - trackMutation(EventNames.BRIDGE, context, error) + trackMutation( + EventNames.BRIDGE, + formatQuoteToEventParams(bridgeQuote), + error, + ) }, }) } @@ -891,24 +844,12 @@ export function USDCForm({ type: "legacy", }, { - onSettled(_, error, variables) { - const context = { - chainId: variables.chainId, - fromTokenMint: swapQuote?.action.fromToken.address, - fromTokenTicker: swapQuote?.action.fromToken.symbol, - fromTokenAmount: formatUnits( - BigInt(swapQuote?.estimate.fromAmount ?? 0), - swapQuote?.action.fromToken.decimals ?? 0, - ), - toTokenMint: swapQuote?.action.toToken.address, - toTokenTicker: swapQuote?.action.toToken.symbol, - toTokenAmount: formatUnits( - BigInt(swapQuote?.estimate.toAmount ?? 0), - swapQuote?.action.toToken.decimals ?? 0, - ), - tool: swapQuote?.tool, - } - trackMutation(EventNames.SWAP, context, error) + onSettled(_, error) { + trackMutation( + EventNames.SWAP, + formatQuoteToEventParams(swapQuote), + error, + ) }, }, ), From 634f1bf7078f728d7bc35da08b6dda6a55201b8a Mon Sep 17 00:00:00 2001 From: sehyunc <41171808+sehyunc@users.noreply.github.com> Date: Wed, 20 Nov 2024 18:52:17 -0800 Subject: [PATCH 5/6] s --- components/dialogs/transfer/usdc-form.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/components/dialogs/transfer/usdc-form.tsx b/components/dialogs/transfer/usdc-form.tsx index c3e7fc47..4f6a691b 100644 --- a/components/dialogs/transfer/usdc-form.tsx +++ b/components/dialogs/transfer/usdc-form.tsx @@ -348,9 +348,9 @@ export function USDCForm({ ], }, { - onSettled(_, error) { + onSettled(_, error, variables) { const context = { - chainId: chain.id, + chainId: variables.chainId, mint: USDC_L2_TOKEN.address, amount: network !== chain.id @@ -420,9 +420,9 @@ export function USDCForm({ ], }, { - onSettled(_, error) { + onSettled(_, error, variables) { const context = { - chainId: chain.id, + chainId: variables.chainId, mint: USDC_L2_TOKEN.address, amount: network !== chain.id @@ -550,9 +550,9 @@ export function USDCForm({ ], }, { - onSettled(_, error) { + onSettled(_, error, variables) { const context = { - chainId: chain.id, + chainId: variables.chainId, mint: USDC_L2_TOKEN.address, amount: network !== chain.id @@ -752,7 +752,7 @@ export function USDCForm({ onSettled(_, error, variables) { const context = { chainId: variables.chainId, - mint: USDC_L1_TOKEN.address, + mint: variables.address, ticker: USDC_L1_TOKEN.ticker, amount: formatUnits( variables.args[1], From ce2bc65c3635e65366bbb792867e3efb814be4fb Mon Sep 17 00:00:00 2001 From: sehyunc <41171808+sehyunc@users.noreply.github.com> Date: Wed, 20 Nov 2024 19:34:07 -0800 Subject: [PATCH 6/6] update names --- components/dialogs/transfer/usdc-form.tsx | 38 ++++++++++++++++------- hooks/use-event-tracker.ts | 28 +++++++++++------ 2 files changed, 44 insertions(+), 22 deletions(-) diff --git a/components/dialogs/transfer/usdc-form.tsx b/components/dialogs/transfer/usdc-form.tsx index 4f6a691b..3ea5d33d 100644 --- a/components/dialogs/transfer/usdc-form.tsx +++ b/components/dialogs/transfer/usdc-form.tsx @@ -122,6 +122,7 @@ export function USDCForm({ onError: (error) => setSwitchChainError(error), }, }) + const { track, trackMutation } = useEventTracker() const catchError = (error: Error, message: string) => { console.error("Error in USDC form", error) @@ -285,6 +286,7 @@ export function USDCForm({ const approveBridgeConfirmationStatus = useTransactionConfirmation( approveBridgeHash, async () => { + track(EventNames.APPROVE_BRIDGE_CONFIRMED) queryClient.invalidateQueries({ queryKey: bridgeAllowanceQueryKey }) setCurrentStep((prev) => prev + 1) if (Date.now() - bridgeQuoteUpdatedAt! > QUOTE_STALE_TIME) { @@ -301,7 +303,7 @@ export function USDCForm({ { onSettled(_, error) { trackMutation( - EventNames.BRIDGE, + EventNames.SOURCE_BRIDGE_TX_SENT, formatQuoteToEventParams(bridgeQuote), error, ) @@ -334,6 +336,7 @@ export function USDCForm({ const { data: solanaBridgeExecutionStatus } = useBridgeConfirmation( solanaBridgeHash, async (bridge) => { + track(EventNames.DESTINATION_BRIDGE_TX_CONFIRMED) queryClient.invalidateQueries({ queryKey: usdcSolanaBalanceQueryKey }) queryClient.invalidateQueries({ queryKey: usdcL2BalanceQueryKey }) setCurrentStep((prev) => prev + 1) @@ -360,7 +363,11 @@ export function USDCForm({ ) : amount, } - trackMutation(EventNames.APPROVE_DARKPOOL, context, error) + trackMutation( + EventNames.APPROVE_DARKPOOL_TX_SENT, + context, + error, + ) }, }, ), @@ -397,6 +404,7 @@ export function USDCForm({ const sendBridgeConfirmationStatus = useTransactionConfirmation( bridgeHash, async () => { + track(EventNames.SOURCE_BRIDGE_TX_CONFIRMED) queryClient.invalidateQueries({ queryKey: usdcL1BalanceQueryKey }) setCurrentStep((prev) => prev + 1) }, @@ -406,6 +414,7 @@ export function USDCForm({ const { data: bridgeExecutionStatus } = useBridgeConfirmation( bridgeHash, async (bridge) => { + track(EventNames.DESTINATION_BRIDGE_TX_CONFIRMED) queryClient.invalidateQueries({ queryKey: usdcL1BalanceQueryKey }) queryClient.invalidateQueries({ queryKey: usdcL2BalanceQueryKey }) setCurrentStep((prev) => prev + 1) @@ -432,7 +441,11 @@ export function USDCForm({ ) : amount, } - trackMutation(EventNames.APPROVE_DARKPOOL, context, error) + trackMutation( + EventNames.APPROVE_DARKPOOL_TX_SENT, + context, + error, + ) }, }, ), @@ -483,7 +496,6 @@ export function USDCForm({ decimals: USDCE_L2_TOKEN.decimals, }) - const { track, trackMutation } = useEventTracker() const { writeContract: handleApproveSwap, status: approveSwapStatus, @@ -497,6 +509,7 @@ export function USDCForm({ const approveSwapConfirmationStatus = useTransactionConfirmation( approveSwapHash, async () => { + track(EventNames.APPROVE_SWAP_TX_CONFIRMED) queryClient.invalidateQueries({ queryKey: swapAllowanceQueryKey }) setCurrentStep((prev) => prev + 1) if (Date.now() - quoteUpdatedAt! > QUOTE_STALE_TIME) { @@ -513,7 +526,7 @@ export function USDCForm({ { onSettled(_, error) { trackMutation( - EventNames.SWAP, + EventNames.SWAP_TX_SENT, formatQuoteToEventParams(swapQuote), error, ) @@ -562,7 +575,7 @@ export function USDCForm({ ) : amount, } - trackMutation(EventNames.APPROVE_DARKPOOL, context, error) + trackMutation(EventNames.APPROVE_DARKPOOL_TX_SENT, context, error) }, }, ), @@ -614,6 +627,7 @@ export function USDCForm({ const approveConfirmationStatus = useTransactionConfirmation( approveHash, async () => { + track(EventNames.APPROVE_DARKPOOL_TX_CONFIRMED) queryClient.invalidateQueries({ queryKey: usdcL2AllowanceQueryKey }) setCurrentStep((prev) => prev + 1) await switchChainAndInvoke(chain.id, () => @@ -759,7 +773,7 @@ export function USDCForm({ USDC_L1_TOKEN.decimals, ), } - trackMutation(EventNames.APPROVE_BRIDGE, context, error) + trackMutation(EventNames.APPROVE_BRIDGE_TX_SENT, context, error) }, }, ), @@ -775,7 +789,7 @@ export function USDCForm({ { onSettled(_, error) { trackMutation( - EventNames.BRIDGE, + EventNames.SOURCE_BRIDGE_TX_SENT, formatQuoteToEventParams(bridgeQuote), error, ) @@ -795,7 +809,7 @@ export function USDCForm({ handleSolanaBridge(bridgeQuote.transactionRequest, { onSettled(_, error) { trackMutation( - EventNames.BRIDGE, + EventNames.SOURCE_BRIDGE_TX_SENT, formatQuoteToEventParams(bridgeQuote), error, ) @@ -830,7 +844,7 @@ export function USDCForm({ USDCE_L2_TOKEN.decimals, ), } - trackMutation(EventNames.APPROVE_SWAP, context, error) + trackMutation(EventNames.APPROVE_SWAP_TX_SENT, context, error) }, }, ), @@ -846,7 +860,7 @@ export function USDCForm({ { onSettled(_, error) { trackMutation( - EventNames.SWAP, + EventNames.SWAP_TX_SENT, formatQuoteToEventParams(swapQuote), error, ) @@ -871,7 +885,7 @@ export function USDCForm({ mint: USDC_L2_TOKEN.address, amount, } - trackMutation(EventNames.APPROVE_DARKPOOL, context, error) + trackMutation(EventNames.APPROVE_DARKPOOL_TX_SENT, context, error) }, }, ), diff --git a/hooks/use-event-tracker.ts b/hooks/use-event-tracker.ts index ece46c6e..d195d6e9 100644 --- a/hooks/use-event-tracker.ts +++ b/hooks/use-event-tracker.ts @@ -4,13 +4,12 @@ import { BaseError, useAccount } from "wagmi" export function useEventTracker() { const walletId = useWalletId() - const { connector, chainId } = useAccount() - const track = (event: string, params: Record) => { + const { connector } = useAccount() + const track = (event: string, params: Record = {}) => { const context = { ...params, walletId, connector: connector?.name, - chainId, } console.log("track", { event, context }) datadogRum.addAction(event, context) @@ -22,9 +21,9 @@ export function useEventTracker() { error?: Error | null, ) => { if (error?.name) { - track(`${name}_error`, { ...params, ...error }) + track(`${name}_error`, { ...params, error }) } else { - track(`${name}_completed`, params) + track(`${name}_success`, params) } } @@ -32,10 +31,19 @@ export function useEventTracker() { } export const EventNames = { - APPROVE_SWAP: "approve_swap", - SWAP: "swap", + // Darkpool + APPROVE_DARKPOOL_TX_SENT: "approve_darkpool_tx_sent", + APPROVE_DARKPOOL_TX_CONFIRMED: "approve_darkpool_tx_confirmed", DEPOSIT_TASK_STARTED: "deposit_task_started", - APPROVE_BRIDGE: "approve_bridge", - BRIDGE: "bridge", - APPROVE_DARKPOOL: "approve_darkpool", + // Swap + APPROVE_SWAP_TX_SENT: "approve_swap_tx_sent", + APPROVE_SWAP_TX_CONFIRMED: "approve_swap_tx_confirmed", + SWAP_TX_SENT: "swap_tx_sent", + SWAP_TX_CONFIRMED: "swap_tx_confirmed", + // Bridge + APPROVE_BRIDGE_TX_SENT: "approve_bridge_tx_sent", + APPROVE_BRIDGE_CONFIRMED: "approve_bridge_confirmed", + SOURCE_BRIDGE_TX_SENT: "source_bridge_tx_sent", + SOURCE_BRIDGE_TX_CONFIRMED: "source_bridge_tx_confirmed", + DESTINATION_BRIDGE_TX_CONFIRMED: "destination_bridge_tx_confirmed", } as const