feat: log minimum_output_after_slippage to amplitude (#6769)

* feat: log minimum_output_after_slippage to amplitude

* fix: memoize logging props

* fix: dont memoize at all
This commit is contained in:
eddie 2023-06-21 10:22:48 -07:00 committed by GitHub
parent 5caaaf1b1f
commit 052cc69414
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 16 deletions

@ -1,5 +1,5 @@
import { Trans } from '@lingui/macro' import { Trans } from '@lingui/macro'
import { TraceEvent } from '@uniswap/analytics' import { TraceEvent, useTrace } from '@uniswap/analytics'
import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events' import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events'
import { Percent } from '@uniswap/sdk-core' import { Percent } from '@uniswap/sdk-core'
import { useWeb3React } from '@web3-react/core' import { useWeb3React } from '@web3-react/core'
@ -8,6 +8,7 @@ import Column from 'components/Column'
import { LoadingOpacityContainer } from 'components/Loader/styled' import { LoadingOpacityContainer } from 'components/Loader/styled'
import { RowBetween, RowFixed } from 'components/Row' import { RowBetween, RowFixed } from 'components/Row'
import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains' import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
import { formatEventPropertiesForTrade } from 'lib/utils/analytics'
import { useState } from 'react' import { useState } from 'react'
import { ChevronDown } from 'react-feather' import { ChevronDown } from 'react-feather'
import { InterfaceTrade } from 'state/routing/types' import { InterfaceTrade } from 'state/routing/types'
@ -102,6 +103,7 @@ export default function SwapDetailsDropdown({ trade, syncing, loading, allowedSl
const theme = useTheme() const theme = useTheme()
const { chainId } = useWeb3React() const { chainId } = useWeb3React()
const [showDetails, setShowDetails] = useState(false) const [showDetails, setShowDetails] = useState(false)
const trace = useTrace()
return ( return (
<Wrapper> <Wrapper>
@ -109,6 +111,10 @@ export default function SwapDetailsDropdown({ trade, syncing, loading, allowedSl
events={[BrowserEvent.onClick]} events={[BrowserEvent.onClick]}
name={SwapEventName.SWAP_DETAILS_EXPANDED} name={SwapEventName.SWAP_DETAILS_EXPANDED}
element={InterfaceElementName.SWAP_DETAILS_DROPDOWN} element={InterfaceElementName.SWAP_DETAILS_DROPDOWN}
properties={{
...(trade ? formatEventPropertiesForTrade(trade, allowedSlippage) : {}),
...trace,
}}
shouldLogImpression={!showDetails} shouldLogImpression={!showDetails}
> >
<StyledHeaderRow <StyledHeaderRow

@ -93,6 +93,7 @@ export function useUniversalRouterSwapCallback(
sendAnalyticsEvent(SwapEventName.SWAP_SIGNED, { sendAnalyticsEvent(SwapEventName.SWAP_SIGNED, {
...formatSwapSignedAnalyticsEventProperties({ ...formatSwapSignedAnalyticsEventProperties({
trade, trade,
allowedSlippage: options.slippageTolerance,
fiatValues, fiatValues,
txHash: response.hash, txHash: response.hash,
}), }),

@ -36,31 +36,24 @@ export const getPriceUpdateBasisPoints = (
export const formatSwapSignedAnalyticsEventProperties = ({ export const formatSwapSignedAnalyticsEventProperties = ({
trade, trade,
allowedSlippage,
fiatValues, fiatValues,
txHash, txHash,
}: { }: {
trade: InterfaceTrade | Trade<Currency, Currency, TradeType> trade: InterfaceTrade | Trade<Currency, Currency, TradeType>
allowedSlippage: Percent
fiatValues: { amountIn?: number; amountOut?: number } fiatValues: { amountIn?: number; amountOut?: number }
txHash: string txHash: string
}) => ({ }) => ({
transaction_hash: txHash, transaction_hash: txHash,
token_in_address: getTokenAddress(trade.inputAmount.currency),
token_out_address: getTokenAddress(trade.outputAmount.currency),
token_in_symbol: trade.inputAmount.currency.symbol,
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, token_in_amount_usd: fiatValues.amountIn,
token_out_amount_usd: fiatValues.amountOut, token_out_amount_usd: fiatValues.amountOut,
price_impact_basis_points: formatPercentInBasisPointsNumber(computeRealizedPriceImpact(trade)), ...formatEventPropertiesForTrade(trade, allowedSlippage),
chain_id:
trade.inputAmount.currency.chainId === trade.outputAmount.currency.chainId
? trade.inputAmount.currency.chainId
: undefined,
}) })
export const formatSwapQuoteReceivedEventProperties = ( export const formatEventPropertiesForTrade = (
trade: Trade<Currency, Currency, TradeType>, trade: Trade<Currency, Currency, TradeType>,
allowedSlippage: Percent,
gasUseEstimateUSD?: string gasUseEstimateUSD?: string
) => { ) => {
return { return {
@ -76,5 +69,7 @@ export const formatSwapQuoteReceivedEventProperties = (
: undefined, : undefined,
token_in_amount: formatToDecimal(trade.inputAmount, trade.inputAmount.currency.decimals), token_in_amount: formatToDecimal(trade.inputAmount, trade.inputAmount.currency.decimals),
token_out_amount: formatToDecimal(trade.outputAmount, trade.outputAmount.currency.decimals), token_out_amount: formatToDecimal(trade.outputAmount, trade.outputAmount.currency.decimals),
minimum_output_after_slippage: trade.minimumAmountOut(allowedSlippage).toSignificant(6),
allowed_slippage: formatPercentNumber(allowedSlippage),
} }
} }

@ -29,7 +29,7 @@ import { useSwapCallback } from 'hooks/useSwapCallback'
import { useSwitchChain } from 'hooks/useSwitchChain' import { useSwitchChain } from 'hooks/useSwitchChain'
import { useUSDPrice } from 'hooks/useUSDPrice' import { useUSDPrice } from 'hooks/useUSDPrice'
import JSBI from 'jsbi' import JSBI from 'jsbi'
import { formatSwapQuoteReceivedEventProperties } from 'lib/utils/analytics' import { formatEventPropertiesForTrade } from 'lib/utils/analytics'
import { ReactNode, useCallback, useEffect, useMemo, useReducer, useState } from 'react' import { ReactNode, useCallback, useEffect, useMemo, useReducer, useState } from 'react'
import { ArrowDown } from 'react-feather' import { ArrowDown } from 'react-feather'
import { useLocation, useNavigate } from 'react-router-dom' import { useLocation, useNavigate } from 'react-router-dom'
@ -528,10 +528,10 @@ export function Swap({
setSwapQuoteReceivedDate(new Date()) setSwapQuoteReceivedDate(new Date())
sendAnalyticsEvent(SwapEventName.SWAP_QUOTE_RECEIVED, { sendAnalyticsEvent(SwapEventName.SWAP_QUOTE_RECEIVED, {
...formatSwapQuoteReceivedEventProperties(trade, trade.gasUseEstimateUSD ?? undefined), ...formatEventPropertiesForTrade(trade, allowedSlippage, trade.gasUseEstimateUSD ?? undefined),
...trace, ...trace,
}) })
}, [prevTrade, trade, trace]) }, [prevTrade, trade, trace, allowedSlippage])
const showDetailsDropdown = Boolean( const showDetailsDropdown = Boolean(
!showWrap && userHasSpecifiedInputOutput && (trade || routeIsLoading || routeIsSyncing) !showWrap && userHasSpecifiedInputOutput && (trade || routeIsLoading || routeIsSyncing)