From 5204712e841905645004c85e5c757c3846fc9944 Mon Sep 17 00:00:00 2001 From: memoyil <2213635+memoyil@users.noreply.github.com> Date: Fri, 25 Oct 2024 20:54:45 +0200 Subject: [PATCH] fix: Chain and chainId discrepancy in url when changing networks (#10805) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- ## 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}` --- apps/web/src/components/Menu/index.tsx | 2 +- apps/web/src/hooks/useSwitchNetwork.ts | 12 +++++++----- apps/web/src/utils/addQueryToPath.ts | 6 +++++- .../Home/components/Banners/OortTradingBanner.tsx | 2 +- .../components/EventStepsSection/config.tsx | 2 +- .../components/SwapWarningModal/bsc/BTTWarning.tsx | 5 +---- 6 files changed, 16 insertions(+), 13 deletions(-) diff --git a/apps/web/src/components/Menu/index.tsx b/apps/web/src/components/Menu/index.tsx index 0807a61090265..c63e38dcaa201 100644 --- a/apps/web/src/components/Menu/index.tsx +++ b/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} /> ) diff --git a/apps/web/src/hooks/useSwitchNetwork.ts b/apps/web/src/hooks/useSwitchNetwork.ts index cbe33f1d872a8..91c35832a5645 100644 --- a/apps/web/src/hooks/useSwitchNetwork.ts +++ b/apps/web/src/hooks/useSwitchNetwork.ts @@ -21,13 +21,15 @@ 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, @@ -35,11 +37,11 @@ export function useSwitchNetworkLocal() { 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], diff --git a/apps/web/src/utils/addQueryToPath.ts b/apps/web/src/utils/addQueryToPath.ts index d7abf93fcc745..20f1f5446cf3d 100644 --- a/apps/web/src/utils/addQueryToPath.ts +++ b/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()}` diff --git a/apps/web/src/views/Home/components/Banners/OortTradingBanner.tsx b/apps/web/src/views/Home/components/Banners/OortTradingBanner.tsx index 270726ccf43bd..401284e045102 100644 --- a/apps/web/src/views/Home/components/Banners/OortTradingBanner.tsx +++ b/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' diff --git a/apps/web/src/views/PancakeSquad/components/EventStepsSection/config.tsx b/apps/web/src/views/PancakeSquad/components/EventStepsSection/config.tsx index 483ef949ac231..b10a3417af08d 100644 --- a/apps/web/src/views/PancakeSquad/components/EventStepsSection/config.tsx +++ b/apps/web/src/views/PancakeSquad/components/EventStepsSection/config.tsx @@ -61,7 +61,7 @@ const stepsConfigBuilder = ({ t, userInfos, eventInfos, userStatus, account, the <>