diff --git a/package.json b/package.json
index 63a667d83e..b61d31b030 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/NavBar/ChainSelectorRow.test.tsx b/src/components/NavBar/ChainSelectorRow.test.tsx
new file mode 100644
index 0000000000..46c82d6ded
--- /dev/null
+++ b/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(
+
+ )
+ expect(container).toMatchSnapshot()
+ })
+ })
+
+ it('should be clickable when enabled', () => {
+ const onSelectChain = jest.fn()
+ const { getByTestId } = render(
+
+ )
+ const button = getByTestId('Optimism-selector')
+ button.click()
+ expect(onSelectChain).toHaveBeenCalled()
+ })
+
+ it('should not be clickable when disabled', () => {
+ const onSelectChain = jest.fn()
+ const { getByTestId } = render(
+
+ )
+ const button = getByTestId('Optimism-selector')
+ button.click()
+ expect(onSelectChain).not.toHaveBeenCalled()
+ })
+})
diff --git a/src/components/NavBar/ChainSelectorRow.tsx b/src/components/NavBar/ChainSelectorRow.tsx
index 9f9fb400f3..2b14f3004a 100644
--- a/src/components/NavBar/ChainSelectorRow.tsx
+++ b/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 (
- {
- if (!disabled) onSelectChain(targetChain)
- }}
- >
- {logoUrl && }
- {label && }
- {disabled && (
-
- Unsupported by your wallet
-
- )}
- {isPending && (
-
- Approve in wallet
-
- )}
-
- {active && }
- {!active && isPending && }
-
-
+
+ {
+ if (!disabled) onSelectChain(targetChain)
+ }}
+ >
+ {logoUrl && }
+ {label && }
+ {disabled && (
+
+ Unsupported by your wallet
+
+ )}
+ {isPending && (
+
+ Approve in wallet
+
+ )}
+
+ {active && }
+ {!active && isPending && }
+
+
+
)
}
diff --git a/src/components/NavBar/__snapshots__/ChainSelectorRow.test.tsx.snap b/src/components/NavBar/__snapshots__/ChainSelectorRow.test.tsx.snap
new file mode 100644
index 0000000000..df639228f6
--- /dev/null
+++ b/src/components/NavBar/__snapshots__/ChainSelectorRow.test.tsx.snap
@@ -0,0 +1,1269 @@
+// 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%;
+ }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+