fix: Chain and chainId discrepancy in url when changing networks (#10805

)

To reproduce: 

Go to :
https://pancakeswap.finance/swap?outputCurrency=0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82&chainId=56

Change network to eth

The url becomes
https://pancakeswap.finance/swap?outputCurrency=0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82&chainId=56&chain=eth

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating various components to use relative paths
instead of absolute URLs for swap links, as well as modifying how query
parameters are handled in the `addQueryToPath.ts` utility and the
`useSwitchNetwork` hook.

### Detailed summary
- In `addQueryToPath.ts`, `chainId` is deleted from `searchParams` if
the key is `'chain'`.
- Updated links in `EventStepsSection`, `Menu`, and `BTTWarning`
components to use relative paths.
- Modified `tradeNowLink` in `OortTradingBanner` to use a relative path.
- Changed function parameter name from `chainId` to `newChainId` in
`useSwitchNetwork.ts`.
- Adjusted query parameters in `useSwitchNetwork` to reflect the new
naming and logic.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->

apps/web/src/components/Menu/index.tsx

@@ -139,7 +139,7 @@ const Menu = (props) => {
       activeSubItem={activeSubMenuItem?.href}
       activeSubItemChildItem={activeSubChildMenuItem?.href}
       buyCakeLabel={t('Buy CAKE')}
-      buyCakeLink="https://pancakeswap.finance/swap?outputCurrency=0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82&chainId=56"
+      buyCakeLink="/swap?outputCurrency=0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82&chainId=56"
       {...props}
     />
   )

apps/web/src/hooks/useSwitchNetwork.ts

@@ -21,25 +21,27 @@ export function useSwitchNetworkLocal() {
   }, [])
 
   return useCallback(
-    (chainId: number) => {
+    (newChainId: number) => {
+      const { chainId, ...restQuery } = router.query
+
       router.replace(
         {
           pathname: router.pathname,
           query: {
-            ...router.query,
-            chain: CHAIN_QUERY_NAME[chainId],
+            ...restQuery,
+            chain: CHAIN_QUERY_NAME[newChainId],
           },
         },
         undefined,
         {
           shallow: true,
         },
       )
-      setQueryChainId(chainId)
+      setQueryChainId(newChainId)
       // Blocto in-app browser throws change event when no account change which causes user state reset therefore
       // this event should not be handled to avoid unexpected behaviour.
       if (!isBloctoMobileApp) {
-        clearUserStates(dispatch, { chainId, newChainId: chainId })
+        clearUserStates(dispatch, { chainId: newChainId, newChainId })
       }
     },
     [dispatch, isBloctoMobileApp, setQueryChainId, router],

apps/web/src/utils/addQueryToPath.ts

@@ -3,7 +3,11 @@ export function addQueryToPath(path: string, queryParams: { [key: string]: strin
   const searchParams = new URLSearchParams(search)
 
   Object.keys(queryParams).forEach((key) => {
-    searchParams.set(key, queryParams[key])
+    if (key === 'chain') {
+      searchParams.delete('chainId')
+    } else {
+      searchParams.set(key, queryParams[key])
+    }
   })
 
   return `${pathname}?${searchParams.toString()}`

apps/web/src/views/Home/components/Banners/OortTradingBanner.tsx

@@ -32,7 +32,7 @@ const OORT_PATH = `${ASSET_CDN}/web/banners/oort`
 const floatingAsset = `${ASSET_CDN}/web/banners/oort/oort-coin.png`
 
 const tradeNowLink =
-  'https://pancakeswap.finance/swap?outputCurrency=0x5651fA7a726B9Ec0cAd00Ee140179912B6E73599&utm_source=PCSWebsite&utm_medium=HomePageBanner&utm_campaign=SwapOORT&utm_id=OORTTradingCompetition'
+  '/swap?outputCurrency=0x5651fA7a726B9Ec0cAd00Ee140179912B6E73599&utm_source=PCSWebsite&utm_medium=HomePageBanner&utm_campaign=SwapOORT&utm_id=OORTTradingCompetition'
 const learnMoreLink =
   'https://blog.pancakeswap.finance/articles/join-the-oort-trading-competition-on-pancake-swap-to-win-50-000?utm_source=PCSWebsite&utm_medium=HomePageBanner&utm_campaign=SwapOORT&utm_id=OORTTradingCompetition'
 

apps/web/src/views/PancakeSquad/components/EventStepsSection/config.tsx

@@ -61,7 +61,7 @@ const stepsConfigBuilder = ({ t, userInfos, eventInfos, userStatus, account, the
         <>
           <Button
             as="a"
-            href="https://pancakeswap.finance/swap?outputCurrency=0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82&chainId=56"
+            href="/swap?outputCurrency=0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82&chainId=56"
             target="_blank"
             width="100%"
           >

apps/web/src/views/Swap/components/SwapWarningModal/bsc/BTTWarning.tsx

@@ -14,10 +14,7 @@ const BTTWarning = () => {
       <Text>1 BTT (OLD) = 1,000 BTT (NEW)</Text>
       <Text mb="8px">
         {t('Trade the new BTT token')}{' '}
-        <Link
-          style={{ display: 'inline' }}
-          href="https://pancakeswap.finance/swap?outputCurrency=0x352Cb5E19b12FC216548a2677bD0fce83BaE434B"
-        >
+        <Link style={{ display: 'inline' }} href="/swap?outputCurrency=0x352Cb5E19b12FC216548a2677bD0fce83BaE434B">
           {t('here')}
         </Link>
       </Text>