feat: implement other swap events part 1 (#4151)

* init commit

* fix prettier errors

* check node env in vercel

* add shouldLogImpression to TraceEvent

src/components/AmplitudeAnalytics/TraceEvent.tsx

@@ -8,6 +8,7 @@ type TraceEventProps = {
   events: Event[]
   name: EventName
   properties?: Record<string, unknown>
+  shouldLogImpression?: boolean
 } & ITraceContext
 
 /**
@@ -19,7 +20,7 @@ type TraceEventProps = {
  *  </TraceEvent>
  */
 export const TraceEvent = memo((props: PropsWithChildren<TraceEventProps>) => {
-  const { name, properties, events, children, ...traceProps } = props
+  const { shouldLogImpression, name, properties, events, children, ...traceProps } = props
 
   return (
     <Trace {...traceProps}>
@@ -31,7 +32,10 @@ export const TraceEvent = memo((props: PropsWithChildren<TraceEventProps>) => {
             }
 
             // For each child, augment event handlers defined in `events` with event tracing.
-            return cloneElement(child, getEventHandlers(child, traceContext, events, name, properties))
+            return cloneElement(
+              child,
+              getEventHandlers(child, traceContext, events, name, properties, shouldLogImpression)
+            )
           })
         }
       </TraceContext.Consumer>
@@ -50,7 +54,8 @@ function getEventHandlers(
   traceContext: ITraceContext,
   events: Event[],
   name: EventName,
-  properties?: Record<string, unknown>
+  properties?: Record<string, unknown>,
+  shouldLogImpression = true
 ) {
   const eventHandlers: Partial<Record<Event, (e: SyntheticEvent<Element, Event>) => void>> = {}
 
@@ -61,7 +66,7 @@ function getEventHandlers(
       child.props[event]?.apply(child, args)
 
       // augment handler with analytics logging
-      sendAnalyticsEvent(name, { ...traceContext, ...properties, action: event })
+      if (shouldLogImpression) sendAnalyticsEvent(name, { ...traceContext, ...properties, action: event })
     }
   }
 

src/components/AmplitudeAnalytics/constants.ts

@@ -7,7 +7,11 @@
 export enum EventName {
   CONNECT_WALLET_BUTTON_CLICKED = 'Connect Wallet Button Clicked',
   PAGE_VIEWED = 'Page Viewed',
+  SWAP_AUTOROUTER_VISUALIZATION_EXPANDED = 'Swap Autorouter Visualization Expanded',
+  SWAP_DETAILS_EXPANDED = 'Swap Details Expanded',
+  SWAP_MAX_TOKEN_AMOUNT_SELECTED = 'Swap Max Token Amount Selected',
   SWAP_SUBMITTED = 'Swap Submitted',
+  SWAP_TOKENS_REVERSED = 'Swap Tokens Reversed',
   TOKEN_IMPORTED = 'Token Imported',
   TOKEN_SELECTED = 'Token Selected',
   TOKEN_SELECTOR_OPENED = 'Token Selector Opened',
@@ -45,7 +49,7 @@ export const enum SectionName {
 
 /** Known modals for analytics purposes. */
 export const enum ModalName {
-  SWAP = 'swap-modal',
+  CONFIRM_SWAP = 'confirm-swap-modal',
   TOKEN_SELECTOR = 'token-selector-modal',
   // alphabetize additional modal names.
 }
@@ -55,11 +59,15 @@ export const enum ModalName {
  * Use to identify low-level components given a TraceContext
  */
 export const enum ElementName {
+  AUTOROUTER_VISUALIZATION_ROW = 'expandable-autorouter-visualization-row',
   COMMON_BASES_CURRENCY_BUTTON = 'common-bases-currency-button',
   CONFIRM_SWAP_BUTTON = 'confirm-swap-or-send',
   CONNECT_WALLET_BUTTON = 'connect-wallet-button',
   IMPORT_TOKEN_BUTTON = 'import-token-button',
+  MAX_TOKEN_AMOUNT_BUTTON = 'max-token-amount-button',
   SWAP_BUTTON = 'swap-button',
+  SWAP_DETAILS_DROPDOWN = 'swap-details-dropdown',
+  SWAP_TOKENS_REVERSE_ARROW_BUTTON = 'swap-tokens-reverse-arrow-button',
   TOKEN_SELECTOR_ROW = 'token-selector-row',
   WALLET_TYPE_OPTION = 'wallet-type-option',
   // alphabetize additional element names.

src/components/CurrencyInputPanel/index.tsx

@@ -2,6 +2,8 @@ import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { useWeb3React } from '@web3-react/core'
+import { ElementName, Event, EventName } from 'components/AmplitudeAnalytics/constants'
+import { TraceEvent } from 'components/AmplitudeAnalytics/TraceEvent'
 import { AutoColumn } from 'components/Column'
 import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
 import { isSupportedChain } from 'constants/chains'
@@ -311,9 +313,15 @@ export default function CurrencyInputPanel({
                     ) : null}
                   </ThemedText.Body>
                   {showMaxButton && selectedCurrencyBalance ? (
+                    <TraceEvent
+                      events={[Event.onClick]}
+                      name={EventName.SWAP_MAX_TOKEN_AMOUNT_SELECTED}
+                      element={ElementName.MAX_TOKEN_AMOUNT_BUTTON}
+                    >
                       <StyledBalanceMax onClick={onMax}>
                         <Trans>MAX</Trans>
                       </StyledBalanceMax>
+                    </TraceEvent>
                   ) : null}
                 </RowFixed>
               ) : (

src/components/swap/ConfirmSwapModal.tsx

 import { Trans } from '@lingui/macro'
 import { Trade } from '@uniswap/router-sdk'
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
+import { ModalName } from 'components/AmplitudeAnalytics/constants'
+import { Trace } from 'components/AmplitudeAnalytics/Trace'
 import { ReactNode, useCallback, useMemo } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
 import { tradeMeaningfullyDiffers } from 'utils/tradeMeaningFullyDiffer'
@@ -89,6 +91,7 @@ export default function ConfirmSwapModal({
   )
 
   return (
+    <Trace modal={ModalName.CONFIRM_SWAP} shouldLogImpression={isOpen}>
       <TransactionConfirmationModal
         isOpen={isOpen}
         onDismiss={onDismiss}
@@ -98,5 +101,6 @@ export default function ConfirmSwapModal({
         pendingText={pendingText}
         currencyToAdd={trade?.outputAmount.currency}
       />
+    </Trace>
   )
 }

src/components/swap/SwapDetailsDropdown.tsx

 import { Trans } from '@lingui/macro'
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
+import { ElementName, Event, EventName } from 'components/AmplitudeAnalytics/constants'
+import { TraceEvent } from 'components/AmplitudeAnalytics/TraceEvent'
 import AnimatedDropdown from 'components/AnimatedDropdown'
 import Card, { OutlineCard } from 'components/Card'
 import { AutoColumn } from 'components/Column'
@@ -133,6 +135,12 @@ export default function SwapDetailsDropdown({
   return (
     <Wrapper>
       <AutoColumn gap={'8px'} style={{ width: '100%', marginBottom: '-8px' }}>
+        <TraceEvent
+          events={[Event.onClick]}
+          name={EventName.SWAP_DETAILS_EXPANDED}
+          element={ElementName.SWAP_DETAILS_DROPDOWN}
+          shouldLogImpression={!showDetails}
+        >
           <StyledHeaderRow onClick={() => setShowDetails(!showDetails)} disabled={!trade} open={showDetails}>
             <RowFixed style={{ position: 'relative' }}>
               {loading || syncing ? (
@@ -196,6 +204,7 @@ export default function SwapDetailsDropdown({
               />
             </RowFixed>
           </StyledHeaderRow>
+        </TraceEvent>
         <AnimatedDropdown open={showDetails}>
           <AutoColumn gap={'8px'} style={{ padding: '0', paddingBottom: '8px' }}>
             {trade ? (

src/components/swap/SwapRoute.tsx

@@ -4,6 +4,8 @@ import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { FeeAmount } from '@uniswap/v3-sdk'
 import { useWeb3React } from '@web3-react/core'
+import { ElementName, Event, EventName } from 'components/AmplitudeAnalytics/constants'
+import { TraceEvent } from 'components/AmplitudeAnalytics/TraceEvent'
 import AnimatedDropdown from 'components/AnimatedDropdown'
 import { AutoColumn } from 'components/Column'
 import { LoadingRows } from 'components/Loader/styled'
@@ -62,6 +64,12 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
 
   return (
     <Wrapper {...rest} darkMode={darkMode} fixedOpen={fixedOpen}>
+      <TraceEvent
+        events={[Event.onClick]}
+        name={EventName.SWAP_AUTOROUTER_VISUALIZATION_EXPANDED}
+        element={ElementName.AUTOROUTER_VISUALIZATION_ROW}
+        shouldLogImpression={!open}
+      >
         <RowBetween onClick={() => setOpen(!open)}>
           <AutoRow gap="4px" width="auto">
             <AutoRouterLogo />
@@ -69,6 +77,7 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
           </AutoRow>
           {fixedOpen ? null : <OpenCloseIcon open={open} />}
         </RowBetween>
+      </TraceEvent>
       <AnimatedDropdown open={open || fixedOpen}>
         <AutoRow gap="4px" width="auto" style={{ paddingTop: '12px', margin: 0 }}>
           {syncing ? (

src/pages/Swap/index.tsx

@@ -463,6 +463,11 @@ export default function Swap() {
                   />
                 </Trace>
                 <ArrowWrapper clickable={isSupportedChain(chainId)}>
+                  <TraceEvent
+                    events={[Event.onClick]}
+                    name={EventName.SWAP_TOKENS_REVERSED}
+                    element={ElementName.SWAP_TOKENS_REVERSE_ARROW_BUTTON}
+                  >
                     <ArrowDown
                       size="16"
                       onClick={() => {
@@ -475,6 +480,7 @@ export default function Swap() {
                           : theme.deprecated_text3
                       }
                     />
+                  </TraceEvent>
                 </ArrowWrapper>
                 <Trace section={SectionName.CURRENCY_OUTPUT_PANEL}>
                   <CurrencyInputPanel