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

+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

 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/NavBar/__snapshots__/ChainSelectorRow.test.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChainSelectorRow should match snapshot for chainId 1 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 12px;
+  color: #222222;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  line-height: 20px;
+  opacity: 1;
+  padding: 10px 8px;
+  text-align: left;
+  -webkit-transition: 250ms ease background-color;
+  transition: 250ms ease background-color;
+  width: 240px;
+}
+
+.c0:hover {
+  background-color: #22222212;
+}
+
+.c2 {
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 16px;
+  font-weight: 485;
+}
+
+.c3 {
+  grid-column: 3;
+  grid-row: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 20px;
+}
+
+.c1 {
+  height: 20px;
+  width: 20px;
+  margin-right: 12px;
+}
+
+@media only screen and (max-width:640px) {
+  .c0 {
+    width: 100%;
+  }
+}
+
+<div>
+  <button
+    class="c0"
+    data-testid="Ethereum-selector"
+  >
+    <img
+      alt="Ethereum"
+      class="c1"
+      src="ethereum-logo.png"
+    />
+    <div
+      class="c2"
+    >
+      Ethereum
+    </div>
+    <div
+      class="c3"
+    >
+      <svg
+        color="#FC72FF"
+        fill="none"
+        height="20"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M16.6693 5.33789L7.5026 14.3175L3.33594 10.2358"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+        />
+      </svg>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`ChainSelectorRow should match snapshot for chainId 5 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 12px;
+  color: #222222;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  line-height: 20px;
+  opacity: 1;
+  padding: 10px 8px;
+  text-align: left;
+  -webkit-transition: 250ms ease background-color;
+  transition: 250ms ease background-color;
+  width: 240px;
+}
+
+.c0:hover {
+  background-color: #22222212;
+}
+
+.c2 {
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 16px;
+  font-weight: 485;
+}
+
+.c3 {
+  grid-column: 3;
+  grid-row: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 20px;
+}
+
+.c1 {
+  height: 20px;
+  width: 20px;
+  margin-right: 12px;
+}
+
+@media only screen and (max-width:640px) {
+  .c0 {
+    width: 100%;
+  }
+}
+
+<div>
+  <button
+    class="c0"
+    data-testid="Görli-selector"
+  >
+    <img
+      alt="Görli"
+      class="c1"
+      src="ethereum-logo.png"
+    />
+    <div
+      class="c2"
+    >
+      Görli
+    </div>
+    <div
+      class="c3"
+    />
+  </button>
+</div>
+`;
+
+exports[`ChainSelectorRow should match snapshot for chainId 10 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 12px;
+  color: #222222;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  line-height: 20px;
+  opacity: 1;
+  padding: 10px 8px;
+  text-align: left;
+  -webkit-transition: 250ms ease background-color;
+  transition: 250ms ease background-color;
+  width: 240px;
+}
+
+.c0:hover {
+  background-color: #22222212;
+}
+
+.c2 {
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 16px;
+  font-weight: 485;
+}
+
+.c3 {
+  grid-column: 3;
+  grid-row: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 20px;
+}
+
+.c1 {
+  height: 20px;
+  width: 20px;
+  margin-right: 12px;
+}
+
+@media only screen and (max-width:640px) {
+  .c0 {
+    width: 100%;
+  }
+}
+
+<div>
+  <button
+    class="c0"
+    data-testid="Optimism-selector"
+  >
+    <img
+      alt="Optimism"
+      class="c1"
+      src="optimistic_ethereum.svg"
+    />
+    <div
+      class="c2"
+    >
+      Optimism
+    </div>
+    <div
+      class="c3"
+    />
+  </button>
+</div>
+`;
+
+exports[`ChainSelectorRow should match snapshot for chainId 56 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 12px;
+  color: #222222;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  line-height: 20px;
+  opacity: 1;
+  padding: 10px 8px;
+  text-align: left;
+  -webkit-transition: 250ms ease background-color;
+  transition: 250ms ease background-color;
+  width: 240px;
+}
+
+.c0:hover {
+  background-color: #22222212;
+}
+
+.c2 {
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 16px;
+  font-weight: 485;
+}
+
+.c3 {
+  grid-column: 3;
+  grid-row: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 20px;
+}
+
+.c1 {
+  height: 20px;
+  width: 20px;
+  margin-right: 12px;
+}
+
+@media only screen and (max-width:640px) {
+  .c0 {
+    width: 100%;
+  }
+}
+
+<div>
+  <button
+    class="c0"
+    data-testid="BNB Chain-selector"
+  >
+    <img
+      alt="BNB Chain"
+      class="c1"
+      src="bnb-logo.svg"
+    />
+    <div
+      class="c2"
+    >
+      BNB Chain
+    </div>
+    <div
+      class="c3"
+    />
+  </button>
+</div>
+`;
+
+exports[`ChainSelectorRow should match snapshot for chainId 137 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 12px;
+  color: #222222;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  line-height: 20px;
+  opacity: 1;
+  padding: 10px 8px;
+  text-align: left;
+  -webkit-transition: 250ms ease background-color;
+  transition: 250ms ease background-color;
+  width: 240px;
+}
+
+.c0:hover {
+  background-color: #22222212;
+}
+
+.c2 {
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 16px;
+  font-weight: 485;
+}
+
+.c3 {
+  grid-column: 3;
+  grid-row: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 20px;
+}
+
+.c1 {
+  height: 20px;
+  width: 20px;
+  margin-right: 12px;
+}
+
+@media only screen and (max-width:640px) {
+  .c0 {
+    width: 100%;
+  }
+}
+
+<div>
+  <button
+    class="c0"
+    data-testid="Polygon-selector"
+  >
+    <img
+      alt="Polygon"
+      class="c1"
+      src="polygon-matic-logo.svg"
+    />
+    <div
+      class="c2"
+    >
+      Polygon
+    </div>
+    <div
+      class="c3"
+    />
+  </button>
+</div>
+`;
+
+exports[`ChainSelectorRow should match snapshot for chainId 420 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 12px;
+  color: #222222;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  line-height: 20px;
+  opacity: 1;
+  padding: 10px 8px;
+  text-align: left;
+  -webkit-transition: 250ms ease background-color;
+  transition: 250ms ease background-color;
+  width: 240px;
+}
+
+.c0:hover {
+  background-color: #22222212;
+}
+
+.c2 {
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 16px;
+  font-weight: 485;
+}
+
+.c3 {
+  grid-column: 3;
+  grid-row: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 20px;
+}
+
+.c1 {
+  height: 20px;
+  width: 20px;
+  margin-right: 12px;
+}
+
+@media only screen and (max-width:640px) {
+  .c0 {
+    width: 100%;
+  }
+}
+
+<div>
+  <button
+    class="c0"
+    data-testid="Optimism Görli-selector"
+  >
+    <img
+      alt="Optimism Görli"
+      class="c1"
+      src="optimistic_ethereum.svg"
+    />
+    <div
+      class="c2"
+    >
+      Optimism Görli
+    </div>
+    <div
+      class="c3"
+    />
+  </button>
+</div>
+`;
+
+exports[`ChainSelectorRow should match snapshot for chainId 8453 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 12px;
+  color: #222222;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  line-height: 20px;
+  opacity: 1;
+  padding: 10px 8px;
+  text-align: left;
+  -webkit-transition: 250ms ease background-color;
+  transition: 250ms ease background-color;
+  width: 240px;
+}
+
+.c0:hover {
+  background-color: #22222212;
+}
+
+.c2 {
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 16px;
+  font-weight: 485;
+}
+
+.c3 {
+  grid-column: 3;
+  grid-row: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 20px;
+}
+
+.c1 {
+  height: 20px;
+  width: 20px;
+  margin-right: 12px;
+}
+
+@media only screen and (max-width:640px) {
+  .c0 {
+    width: 100%;
+  }
+}
+
+<div>
+  <button
+    class="c0"
+    data-testid="Base-selector"
+  >
+    <img
+      alt="Base"
+      class="c1"
+      src="base_logo.svg"
+    />
+    <div
+      class="c2"
+    >
+      Base
+    </div>
+    <div
+      class="c3"
+    />
+  </button>
+</div>
+`;
+
+exports[`ChainSelectorRow should match snapshot for chainId 42161 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 12px;
+  color: #222222;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  line-height: 20px;
+  opacity: 1;
+  padding: 10px 8px;
+  text-align: left;
+  -webkit-transition: 250ms ease background-color;
+  transition: 250ms ease background-color;
+  width: 240px;
+}
+
+.c0:hover {
+  background-color: #22222212;
+}
+
+.c2 {
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 16px;
+  font-weight: 485;
+}
+
+.c3 {
+  grid-column: 3;
+  grid-row: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 20px;
+}
+
+.c1 {
+  height: 20px;
+  width: 20px;
+  margin-right: 12px;
+}
+
+@media only screen and (max-width:640px) {
+  .c0 {
+    width: 100%;
+  }
+}
+
+<div>
+  <button
+    class="c0"
+    data-testid="Arbitrum-selector"
+  >
+    <img
+      alt="Arbitrum"
+      class="c1"
+      src="arbitrum_logo.svg"
+    />
+    <div
+      class="c2"
+    >
+      Arbitrum
+    </div>
+    <div
+      class="c3"
+    />
+  </button>
+</div>
+`;
+
+exports[`ChainSelectorRow should match snapshot for chainId 42220 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 12px;
+  color: #222222;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  line-height: 20px;
+  opacity: 1;
+  padding: 10px 8px;
+  text-align: left;
+  -webkit-transition: 250ms ease background-color;
+  transition: 250ms ease background-color;
+  width: 240px;
+}
+
+.c0:hover {
+  background-color: #22222212;
+}
+
+.c2 {
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 16px;
+  font-weight: 485;
+}
+
+.c3 {
+  grid-column: 3;
+  grid-row: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 20px;
+}
+
+.c1 {
+  height: 20px;
+  width: 20px;
+  margin-right: 12px;
+}
+
+@media only screen and (max-width:640px) {
+  .c0 {
+    width: 100%;
+  }
+}
+
+<div>
+  <button
+    class="c0"
+    data-testid="Celo-selector"
+  >
+    <img
+      alt="Celo"
+      class="c1"
+      src="celo_logo.svg"
+    />
+    <div
+      class="c2"
+    >
+      Celo
+    </div>
+    <div
+      class="c3"
+    />
+  </button>
+</div>
+`;
+
+exports[`ChainSelectorRow should match snapshot for chainId 43114 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 12px;
+  color: #222222;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  line-height: 20px;
+  opacity: 1;
+  padding: 10px 8px;
+  text-align: left;
+  -webkit-transition: 250ms ease background-color;
+  transition: 250ms ease background-color;
+  width: 240px;
+}
+
+.c0:hover {
+  background-color: #22222212;
+}
+
+.c2 {
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 16px;
+  font-weight: 485;
+}
+
+.c3 {
+  grid-column: 3;
+  grid-row: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 20px;
+}
+
+.c1 {
+  height: 20px;
+  width: 20px;
+  margin-right: 12px;
+}
+
+@media only screen and (max-width:640px) {
+  .c0 {
+    width: 100%;
+  }
+}
+
+<div>
+  <button
+    class="c0"
+    data-testid="Avalanche-selector"
+  >
+    <img
+      alt="Avalanche"
+      class="c1"
+      src="avax_logo.svg"
+    />
+    <div
+      class="c2"
+    >
+      Avalanche
+    </div>
+    <div
+      class="c3"
+    />
+  </button>
+</div>
+`;
+
+exports[`ChainSelectorRow should match snapshot for chainId 44787 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 12px;
+  color: #222222;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  line-height: 20px;
+  opacity: 1;
+  padding: 10px 8px;
+  text-align: left;
+  -webkit-transition: 250ms ease background-color;
+  transition: 250ms ease background-color;
+  width: 240px;
+}
+
+.c0:hover {
+  background-color: #22222212;
+}
+
+.c2 {
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 16px;
+  font-weight: 485;
+}
+
+.c3 {
+  grid-column: 3;
+  grid-row: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 20px;
+}
+
+.c1 {
+  height: 20px;
+  width: 20px;
+  margin-right: 12px;
+}
+
+@media only screen and (max-width:640px) {
+  .c0 {
+    width: 100%;
+  }
+}
+
+<div>
+  <button
+    class="c0"
+    data-testid="Celo Alfajores-selector"
+  >
+    <img
+      alt="Celo Alfajores"
+      class="c1"
+      src="celo_logo.svg"
+    />
+    <div
+      class="c2"
+    >
+      Celo Alfajores
+    </div>
+    <div
+      class="c3"
+    />
+  </button>
+</div>
+`;
+
+exports[`ChainSelectorRow should match snapshot for chainId 80001 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 12px;
+  color: #222222;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  line-height: 20px;
+  opacity: 1;
+  padding: 10px 8px;
+  text-align: left;
+  -webkit-transition: 250ms ease background-color;
+  transition: 250ms ease background-color;
+  width: 240px;
+}
+
+.c0:hover {
+  background-color: #22222212;
+}
+
+.c2 {
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 16px;
+  font-weight: 485;
+}
+
+.c3 {
+  grid-column: 3;
+  grid-row: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 20px;
+}
+
+.c1 {
+  height: 20px;
+  width: 20px;
+  margin-right: 12px;
+}
+
+@media only screen and (max-width:640px) {
+  .c0 {
+    width: 100%;
+  }
+}
+
+<div>
+  <button
+    class="c0"
+    data-testid="Polygon Mumbai-selector"
+  >
+    <img
+      alt="Polygon Mumbai"
+      class="c1"
+      src="polygon-matic-logo.svg"
+    />
+    <div
+      class="c2"
+    >
+      Polygon Mumbai
+    </div>
+    <div
+      class="c3"
+    />
+  </button>
+</div>
+`;
+
+exports[`ChainSelectorRow should match snapshot for chainId 84531 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 12px;
+  color: #222222;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  line-height: 20px;
+  opacity: 1;
+  padding: 10px 8px;
+  text-align: left;
+  -webkit-transition: 250ms ease background-color;
+  transition: 250ms ease background-color;
+  width: 240px;
+}
+
+.c0:hover {
+  background-color: #22222212;
+}
+
+.c1 {
+  grid-column: 3;
+  grid-row: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 20px;
+}
+
+@media only screen and (max-width:640px) {
+  .c0 {
+    width: 100%;
+  }
+}
+
+<div>
+  <button
+    class="c0"
+    data-testid="undefined-selector"
+  >
+    <div
+      class="c1"
+    />
+  </button>
+</div>
+`;
+
+exports[`ChainSelectorRow should match snapshot for chainId 421613 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 12px;
+  color: #222222;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  line-height: 20px;
+  opacity: 1;
+  padding: 10px 8px;
+  text-align: left;
+  -webkit-transition: 250ms ease background-color;
+  transition: 250ms ease background-color;
+  width: 240px;
+}
+
+.c0:hover {
+  background-color: #22222212;
+}
+
+.c2 {
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 16px;
+  font-weight: 485;
+}
+
+.c3 {
+  grid-column: 3;
+  grid-row: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 20px;
+}
+
+.c1 {
+  height: 20px;
+  width: 20px;
+  margin-right: 12px;
+}
+
+@media only screen and (max-width:640px) {
+  .c0 {
+    width: 100%;
+  }
+}
+
+<div>
+  <button
+    class="c0"
+    data-testid="Arbitrum Goerli-selector"
+  >
+    <img
+      alt="Arbitrum Goerli"
+      class="c1"
+      src="arbitrum_logo.svg"
+    />
+    <div
+      class="c2"
+    >
+      Arbitrum Goerli
+    </div>
+    <div
+      class="c3"
+    />
+  </button>
+</div>
+`;
+
+exports[`ChainSelectorRow should match snapshot for chainId 11155111 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 12px;
+  color: #222222;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  line-height: 20px;
+  opacity: 1;
+  padding: 10px 8px;
+  text-align: left;
+  -webkit-transition: 250ms ease background-color;
+  transition: 250ms ease background-color;
+  width: 240px;
+}
+
+.c0:hover {
+  background-color: #22222212;
+}
+
+.c2 {
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 16px;
+  font-weight: 485;
+}
+
+.c3 {
+  grid-column: 3;
+  grid-row: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 20px;
+}
+
+.c1 {
+  height: 20px;
+  width: 20px;
+  margin-right: 12px;
+}
+
+@media only screen and (max-width:640px) {
+  .c0 {
+    width: 100%;
+  }
+}
+
+<div>
+  <button
+    class="c0"
+    data-testid="Sepolia-selector"
+  >
+    <img
+      alt="Sepolia"
+      class="c1"
+      src="ethereum-logo.png"
+    />
+    <div
+      class="c2"
+    >
+      Sepolia
+    </div>
+    <div
+      class="c3"
+    />
+  </button>
+</div>
+`;

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

 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"