fix: disable settings button when contextual chainId !== connectedChainId (#6696)

* fix: disable settings button when contextual chainId !== connectedChainId

* fix: re-enable TDP tests (#6708)

cypress/e2e/token-details.test.ts

@@ -115,7 +115,7 @@ describe('Token details', () => {
       cy.url().should('not.include', `${UNI_MAINNET.address}`)
     })
 
-    it.only('should not share swap state with the main swap page', () => {
+    it('should not share swap state with the main swap page', () => {
       cy.get(`#swap-currency-output .token-symbol-container`).should('contain.text', 'UNI')
       cy.get(`#swap-currency-input .open-currency-select-button`).click()
       cy.contains('WETH').click()
@@ -151,6 +151,7 @@ describe('Token details', () => {
       cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Arbitrum')
       cy.get(getTestSelector('token-table-row-ARB')).click()
       cy.get(`#swap-currency-output .token-symbol-container`).should('contain.text', 'ARB')
+      cy.get(getTestSelector('open-settings-dialog-button')).should('be.disabled')
       cy.contains('Connect to Arbitrum').should('exist')
     })
   })

src/components/NavigationTabs/index.tsx

 import { Trans } from '@lingui/macro'
 import { Percent } from '@uniswap/sdk-core'
+import { useWeb3React } from '@web3-react/core'
 import { ReactNode } from 'react'
 import { ArrowLeft } from 'react-feather'
 import { Link as HistoryLink, useLocation } from 'react-router-dom'
@@ -68,6 +69,7 @@ export function AddRemoveTabs({
   showBackLink?: boolean
   children?: ReactNode
 }) {
+  const { chainId } = useWeb3React()
   const theme = useTheme()
   // reset states on back
   const dispatch = useAppDispatch()
@@ -108,7 +110,7 @@ export function AddRemoveTabs({
           )}
         </ThemedText.DeprecatedMediumHeader>
         <Box style={{ marginRight: '.5rem' }}>{children}</Box>
-        <SettingsTab autoSlippage={autoSlippage} />
+        <SettingsTab autoSlippage={autoSlippage} chainId={chainId} />
       </RowBetween>
     </Tabs>
   )

src/components/Settings/index.tsx

@@ -41,8 +41,8 @@ const MenuFlyout = styled(AutoColumn)`
   padding: 1rem;
 `
 
-export default function SettingsTab({ autoSlippage }: { autoSlippage: Percent }) {
-  const { chainId } = useWeb3React()
+export default function SettingsTab({ autoSlippage, chainId }: { autoSlippage: Percent; chainId?: number }) {
+  const { chainId: connectedChainId } = useWeb3React()
   const showDeadlineSettings = Boolean(chainId && !L2_CHAIN_IDS.includes(chainId))
 
   const node = useRef<HTMLDivElement | null>(null)
@@ -55,7 +55,7 @@ export default function SettingsTab({ autoSlippage }: { autoSlippage: Percent })
 
   return (
     <Menu ref={node}>
-      <MenuButton disabled={!isSupportedChain} isActive={isOpen} onClick={toggleMenu} />
+      <MenuButton disabled={!isSupportedChain || chainId !== connectedChainId} isActive={isOpen} onClick={toggleMenu} />
       {isOpen && (
         <MenuFlyout>
           <RouterPreferenceSettings />

src/components/swap/SwapHeader.tsx

@@ -18,7 +18,7 @@ const HeaderButtonContainer = styled(RowFixed)`
   gap: 16px;
 `
 
-export default function SwapHeader({ autoSlippage }: { autoSlippage: Percent }) {
+export default function SwapHeader({ autoSlippage, chainId }: { autoSlippage: Percent; chainId?: number }) {
   const fiatOnRampButtonEnabled = useFiatOnRampButtonEnabled()
 
   return (
@@ -30,7 +30,7 @@ export default function SwapHeader({ autoSlippage }: { autoSlippage: Percent })
         {fiatOnRampButtonEnabled && <SwapBuyFiatButton />}
       </HeaderButtonContainer>
       <RowFixed>
-        <SettingsTab autoSlippage={autoSlippage} />
+        <SettingsTab autoSlippage={autoSlippage} chainId={chainId} />
       </RowFixed>
     </StyledSwapHeader>
   )

src/pages/MigrateV2/MigrateV2Pair.tsx

@@ -729,7 +729,7 @@ export default function MigrateV2Pair() {
           <ThemedText.DeprecatedMediumHeader>
             <Trans>Migrate V2 Liquidity</Trans>
           </ThemedText.DeprecatedMediumHeader>
-          <SettingsTab autoSlippage={DEFAULT_MIGRATE_SLIPPAGE_TOLERANCE} />
+          <SettingsTab autoSlippage={DEFAULT_MIGRATE_SLIPPAGE_TOLERANCE} chainId={chainId} />
         </AutoRow>
 
         {!account ? (

src/pages/Swap/index.tsx

@@ -539,7 +539,7 @@ export function Swap({
         onCancel={handleDismissTokenWarning}
         showCancel={true}
       />
-      <SwapHeader autoSlippage={autoSlippage} />
+      <SwapHeader autoSlippage={autoSlippage} chainId={chainId} />
       {trade && showConfirm && (
         <ConfirmSwapModal
           trade={trade}