From b721824c7f019934884cc6dc426b12abc0ff4b70 Mon Sep 17 00:00:00 2001 From: Tina <59578595+tinaszheng@users.noreply.github.com> Date: Thu, 9 Mar 2023 10:07:46 -0500 Subject: [PATCH] feat: Add USD amounts to swap analytics (#6108) --- src/components/Widget/transactions.ts | 2 ++ src/hooks/useSwapCallback.tsx | 5 +++-- src/hooks/useUniversalRouter.ts | 6 ++++-- src/lib/utils/analytics.ts | 4 ++++ src/pages/Swap/index.tsx | 4 ++++ 5 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/components/Widget/transactions.ts b/src/components/Widget/transactions.ts index e582f3757a..2f5b21e3d4 100644 --- a/src/components/Widget/transactions.ts +++ b/src/components/Widget/transactions.ts @@ -107,6 +107,8 @@ export function useSyncWidgetTransactions() { const eventProperties = { ...formatSwapSignedAnalyticsEventProperties({ trade, + // TODO: add once Widgets adds fiat values to callback + fiatValues: { amountIn: null, amountOut: null }, txHash: transaction.receipt?.transactionHash ?? '', }), ...trace, diff --git a/src/hooks/useSwapCallback.tsx b/src/hooks/useSwapCallback.tsx index 2c77957b7b..322b8c9725 100644 --- a/src/hooks/useSwapCallback.tsx +++ b/src/hooks/useSwapCallback.tsx @@ -1,5 +1,5 @@ import { Trade } from '@uniswap/router-sdk' -import { Currency, Percent, TradeType } from '@uniswap/sdk-core' +import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core' import { PermitSignature } from 'hooks/usePermitAllowance' import { useMemo } from 'react' @@ -13,6 +13,7 @@ import { useUniversalRouterSwapCallback } from './useUniversalRouter' // and the user has approved the slippage adjusted input amount for the trade export function useSwapCallback( trade: Trade | undefined, // trade to execute, required + fiatValues: { amountIn: CurrencyAmount | null; amountOut: CurrencyAmount | null }, // usd values for amount in and out, logged for analytics allowedSlippage: Percent, // in bips permitSignature: PermitSignature | undefined ): { callback: null | (() => Promise) } { @@ -20,7 +21,7 @@ export function useSwapCallback( const addTransaction = useTransactionAdder() - const universalRouterSwapCallback = useUniversalRouterSwapCallback(trade, { + const universalRouterSwapCallback = useUniversalRouterSwapCallback(trade, fiatValues, { slippageTolerance: allowedSlippage, deadline, permit: permitSignature, diff --git a/src/hooks/useUniversalRouter.ts b/src/hooks/useUniversalRouter.ts index b0140d368f..c5a8fe4522 100644 --- a/src/hooks/useUniversalRouter.ts +++ b/src/hooks/useUniversalRouter.ts @@ -4,7 +4,7 @@ import { t } from '@lingui/macro' import { sendAnalyticsEvent } from '@uniswap/analytics' import { SwapEventName } from '@uniswap/analytics-events' import { Trade } from '@uniswap/router-sdk' -import { Currency, Percent, TradeType } from '@uniswap/sdk-core' +import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core' import { SwapRouter, UNIVERSAL_ROUTER_ADDRESS } from '@uniswap/universal-router-sdk' import { FeeOptions, toHex } from '@uniswap/v3-sdk' import { useWeb3React } from '@web3-react/core' @@ -27,6 +27,7 @@ interface SwapOptions { export function useUniversalRouterSwapCallback( trade: Trade | undefined, + fiatValues: { amountIn: CurrencyAmount | null; amountOut: CurrencyAmount | null }, options: SwapOptions ) { const { account, chainId, provider } = useWeb3React() @@ -66,7 +67,7 @@ export function useUniversalRouterSwapCallback( .then((response) => { sendAnalyticsEvent( SwapEventName.SWAP_SIGNED, - formatSwapSignedAnalyticsEventProperties({ trade, txHash: response.hash }) + formatSwapSignedAnalyticsEventProperties({ trade, fiatValues, txHash: response.hash }) ) if (tx.data !== response.data) { sendAnalyticsEvent(SwapEventName.SWAP_MODIFIED_IN_WALLET, { txHash: response.hash }) @@ -84,6 +85,7 @@ export function useUniversalRouterSwapCallback( }, [ account, chainId, + fiatValues, options.deadline, options.feeOptions, options.permit, diff --git a/src/lib/utils/analytics.ts b/src/lib/utils/analytics.ts index ce94ed7a45..10b09e93e3 100644 --- a/src/lib/utils/analytics.ts +++ b/src/lib/utils/analytics.ts @@ -36,9 +36,11 @@ export const getPriceUpdateBasisPoints = ( export const formatSwapSignedAnalyticsEventProperties = ({ trade, + fiatValues, txHash, }: { trade: InterfaceTrade | Trade + fiatValues: { amountIn: CurrencyAmount | null; amountOut: CurrencyAmount | null } txHash: string }) => ({ transaction_hash: txHash, @@ -48,6 +50,8 @@ export const formatSwapSignedAnalyticsEventProperties = ({ token_out_symbol: trade.outputAmount.currency.symbol, token_in_amount: formatToDecimal(trade.inputAmount, trade.inputAmount.currency.decimals), token_out_amount: formatToDecimal(trade.outputAmount, trade.outputAmount.currency.decimals), + token_in_amount_usd: fiatValues.amountIn ? parseFloat(fiatValues.amountIn.toFixed(2)) : undefined, + token_out_amount_usd: fiatValues.amountOut ? parseFloat(fiatValues.amountOut.toFixed(2)) : undefined, price_impact_basis_points: formatPercentInBasisPointsNumber(computeRealizedPriceImpact(trade)), chain_id: trade.inputAmount.currency.chainId === trade.outputAmount.currency.chainId diff --git a/src/pages/Swap/index.tsx b/src/pages/Swap/index.tsx index a399d8765a..bc7c4739ab 100644 --- a/src/pages/Swap/index.tsx +++ b/src/pages/Swap/index.tsx @@ -333,10 +333,14 @@ export default function Swap({ className }: { className?: string }) { [currencyBalances] ) const showMaxButton = Boolean(maxInputAmount?.greaterThan(0) && !parsedAmounts[Field.INPUT]?.equalTo(maxInputAmount)) + const swapFiatValues = useMemo(() => { + return { amountIn: fiatValueTradeInput, amountOut: fiatValueTradeOutput } + }, [fiatValueTradeInput, fiatValueTradeOutput]) // the callback to execute the swap const { callback: swapCallback } = useSwapCallback( trade, + swapFiatValues, allowedSlippage, allowance.state === AllowanceState.ALLOWED ? allowance.permitSignature : undefined )