feat: log chain changed (#7350)

package.json

@@ -190,7 +190,7 @@
     "@sentry/types": "^7.45.0",
     "@types/react-window-infinite-loader": "^1.0.6",
     "@uniswap/analytics": "^1.4.0",
-    "@uniswap/analytics-events": "^2.22.0",
+    "@uniswap/analytics-events": "^2.23.0",
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",
     "@uniswap/merkle-distributor": "^1.0.1",

src/components/NavBar/ChainSelectorRow.test.tsx

@@ -0,0 +1,45 @@
+import { ChainId, SUPPORTED_CHAINS } from '@uniswap/sdk-core'
+import { render } from 'test-utils/render'
+
+import ChainSelectorRow from './ChainSelectorRow'
+
+describe('ChainSelectorRow', () => {
+  SUPPORTED_CHAINS.forEach((chainId) => {
+    it(`should match snapshot for chainId ${chainId}`, () => {
+      const { container } = render(
+        <ChainSelectorRow targetChain={chainId} onSelectChain={jest.fn()} isPending={false} disabled={false} />
+      )
+      expect(container).toMatchSnapshot()
+    })
+  })
+
+  it('should be clickable when enabled', () => {
+    const onSelectChain = jest.fn()
+    const { getByTestId } = render(
+      <ChainSelectorRow
+        targetChain={ChainId.OPTIMISM}
+        onSelectChain={onSelectChain}
+        isPending={false}
+        disabled={false}
+      />
+    )
+    const button = getByTestId('Optimism-selector')
+    button.click()
+    expect(onSelectChain).toHaveBeenCalled()
+  })
+
+  it('should not be clickable when disabled', () => {
+    const onSelectChain = jest.fn()
+    const { getByTestId } = render(
+      <ChainSelectorRow
+        targetChain={ChainId.OPTIMISM}
+        onSelectChain={onSelectChain}
+        isPending={false}
+        disabled={true}
+      />
+    )
+    const button = getByTestId('Optimism-selector')
+    button.click()
+    expect(onSelectChain).not.toHaveBeenCalled()
+  })
+})

src/components/NavBar/ChainSelectorRow.tsx

@@ -1,6 +1,8 @@
 import { Trans } from '@lingui/macro'
+import { BrowserEvent, SharedEventName } from '@uniswap/analytics-events'
 import { ChainId } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
+import { TraceEvent } from 'analytics'
 import Loader from 'components/Icons/LoadingSpinner'
 import { getChainInfo } from 'constants/chainInfo'
 import { CheckMarkIcon } from 'nft/components/icons'
@@ -78,28 +80,31 @@ export default function ChainSelectorRow({ disabled, targetChain, onSelectChain,
   const theme = useTheme()
 
   return (
-    <Container
-      disabled={!!disabled}
-      onClick={() => {
-        if (!disabled) onSelectChain(targetChain)
-      }}
-    >
-      {logoUrl && <Logo src={logoUrl} alt={label} />}
-      {label && <Label>{label}</Label>}
-      {disabled && (
-        <CaptionText>
-          <Trans>Unsupported by your wallet</Trans>
-        </CaptionText>
-      )}
-      {isPending && (
-        <CaptionText>
-          <Trans>Approve in wallet</Trans>
-        </CaptionText>
-      )}
-      <Status>
-        {active && <CheckMarkIcon width={LOGO_SIZE} height={LOGO_SIZE} color={theme.accent1} />}
-        {!active && isPending && <Loader width={LOGO_SIZE} height={LOGO_SIZE} />}
-      </Status>
-    </Container>
+    <TraceEvent events={[BrowserEvent.onClick]} name={SharedEventName.ELEMENT_CLICKED} element={`${label}-selector`}>
+      <Container
+        data-testid={`${label}-selector`}
+        disabled={!!disabled}
+        onClick={() => {
+          if (!disabled) onSelectChain(targetChain)
+        }}
+      >
+        {logoUrl && <Logo src={logoUrl} alt={label} />}
+        {label && <Label>{label}</Label>}
+        {disabled && (
+          <CaptionText>
+            <Trans>Unsupported by your wallet</Trans>
+          </CaptionText>
+        )}
+        {isPending && (
+          <CaptionText>
+            <Trans>Approve in wallet</Trans>
+          </CaptionText>
+        )}
+        <Status>
+          {active && <CheckMarkIcon width={LOGO_SIZE} height={LOGO_SIZE} color={theme.accent1} />}
+          {!active && isPending && <Loader width={LOGO_SIZE} height={LOGO_SIZE} />}
+        </Status>
+      </Container>
+    </TraceEvent>
   )
 }

src/components/Web3Provider/index.test.tsx

@@ -13,6 +13,7 @@ import { mocked } from 'test-utils/mocked'
 import Web3Provider from '.'
 
 jest.mock('analytics', () => ({
+  useTrace: jest.fn(),
   sendAnalyticsEvent: jest.fn(),
   user: { set: jest.fn(), postInsert: jest.fn() },
 }))

src/components/Web3Provider/index.tsx

@@ -1,7 +1,7 @@
 import { CustomUserProperties, InterfaceEventName, WalletConnectionResult } from '@uniswap/analytics-events'
 import { useWeb3React, Web3ReactHooks, Web3ReactProvider } from '@web3-react/core'
 import { Connector } from '@web3-react/types'
-import { sendAnalyticsEvent, user } from 'analytics'
+import { sendAnalyticsEvent, user, useTrace } from 'analytics'
 import { connections, getConnection } from 'connection'
 import { isSupportedChain } from 'constants/chains'
 import { RPC_PROVIDERS } from 'constants/providers'
@@ -29,6 +29,7 @@ function Updater() {
   const { account, chainId, connector, provider } = useWeb3React()
   const { pathname } = useLocation()
   const currentPage = getCurrentPageFromLocation(pathname)
+  const analyticsContext = useTrace()
 
   // Trace RPC calls (for debugging).
   const networkProvider = isSupportedChain(chainId) ? RPC_PROVIDERS[chainId] : undefined
@@ -44,7 +45,22 @@ function Updater() {
       provider?.off('debug', trace)
       networkProvider?.off('debug', trace)
     }
-  }, [networkProvider, provider, shouldTrace])
+  }, [analyticsContext, networkProvider, provider, shouldTrace])
+
+  const previousConnectedChainId = usePrevious(chainId)
+  useEffect(() => {
+    const chainChanged = previousConnectedChainId && previousConnectedChainId !== chainId
+    if (chainChanged) {
+      sendAnalyticsEvent(InterfaceEventName.CHAIN_CHANGED, {
+        result: WalletConnectionResult.SUCCEEDED,
+        wallet_address: account,
+        wallet_type: getConnection(connector).getName(),
+        chain_id: chainId,
+        previousConnectedChainId,
+        page: currentPage,
+      })
+    }
+  }, [account, chainId, connector, currentPage, previousConnectedChainId])
 
   // Send analytics events when the active account changes.
   const previousAccount = usePrevious(account)

yarn.lock

@@ -6045,10 +6045,10 @@
     "@typescript-eslint/types" "5.59.1"
     eslint-visitor-keys "^3.3.0"
 
-"@uniswap/analytics-events@^2.22.0":
-  version "2.22.0"
-  resolved "https://registry.yarnpkg.com/@uniswap/analytics-events/-/analytics-events-2.22.0.tgz#25600f5f6d9df4ea3aa7328dbc6ec44af4b652d1"
-  integrity sha512-Q/H4JaxQuEBFZvMWW40J3m51/zUXr2FYkfO2+IA0EJfoZiWE8Yl0xWtNrO5RDc4Q57Q9z0cEzzDLN2L1RQSpJA==
+"@uniswap/analytics-events@^2.23.0":
+  version "2.23.0"
+  resolved "https://registry.yarnpkg.com/@uniswap/analytics-events/-/analytics-events-2.23.0.tgz#f1a65a9b2926700001c8512564ee5da14e0811f9"
+  integrity sha512-8UCAVQKSA1bKjNPZnNraYqgicQrQs1ecKfydZ7jHdhjjrLTB239MjSshHTWdnXMfqIA7y2kApKECu+3Ah9hRNg==
 
 "@uniswap/analytics@^1.4.0":
   version "1.4.0"