From 483e4c3d64159fde22bcff30873692a634e98d71 Mon Sep 17 00:00:00 2001
From: viet-nv <vietnv1304@gmail.com>
Date: Fri, 27 Oct 2023 15:07:08 +0700
Subject: [PATCH] fix: network

---
 src/pages/App.tsx               | 15 ++++++++++++++-
 src/pages/PartnerSwap/index.tsx | 25 ++++++++++++++++++++++---
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index 9836efe6f5..5ed14aef49 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -42,6 +42,17 @@ import { isAddressString, isSupportLimitOrder, shortenAddress } from 'utils'
 import ElasticLegacyNotice from './ElasticLegacy/ElasticLegacyNotice'
 import VerifyAuth from './Verify/VerifyAuth'
 
+const IframeTest = () => {
+  return (
+    <iframe
+      style={{ margin: 'auto' }}
+      width="500px"
+      height="900px"
+      src={`${window.location.origin}/partner-swap?tab=swap&inputCurrency=ETH&outputCurrency=0xe4DDDfe67E7164b0FE14E218d80dC4C08eDC01cB&isInBps=1&chargeFeeBy=currency_in&feeReceiver=0xDcFCD5dD752492b95ac8C1964C83F992e7e39FA9&feeAmount=500&clientId=viet-nv&chainId=42161`}
+    />
+  )
+}
+
 const Login = lazy(() => import('./Oauth/Login'))
 const Logout = lazy(() => import('./Oauth/Logout'))
 const Consent = lazy(() => import('./Oauth/Consent'))
@@ -320,7 +331,7 @@ export default function App() {
                   <Routes>
                     {/* From react-router-dom@6.5.0, :fromCurrency-to-:toCurrency no long works, need to manually parse the params */}
                     <Route path={`${APP_PATHS.SWAP}/:network/:currency?`} element={<SwapPage />} />
-                    <Route path={`${APP_PATHS.PARTNER_SWAP}/:network`} element={<PartnerSwap />} />
+                    <Route path={`${APP_PATHS.PARTNER_SWAP}`} element={<PartnerSwap />} />
                     {CHAINS_SUPPORT_CROSS_CHAIN.includes(chainId) && (
                       <Route path={`${APP_PATHS.CROSS_CHAIN}`} element={<SwapV3 />} />
                     )}
@@ -434,6 +445,8 @@ export default function App() {
                     <Route path={APP_PATHS.IAM_LOGOUT} element={<Logout />} />
                     <Route path={APP_PATHS.IAM_CONSENT} element={<Consent />} />
 
+                    <Route path={'/iframe-test'} element={<IframeTest />} />
+
                     <Route path="*" element={<RedirectPathToSwapV3Network />} />
                   </Routes>
                 </Web3ReactManager>
diff --git a/src/pages/PartnerSwap/index.tsx b/src/pages/PartnerSwap/index.tsx
index 30bb22efa5..8c5a7b7ed6 100644
--- a/src/pages/PartnerSwap/index.tsx
+++ b/src/pages/PartnerSwap/index.tsx
@@ -26,10 +26,11 @@ import {
   SwapFormWrapper,
   highlight,
 } from 'components/swapv2/styleds'
+import { SUPPORTED_NETWORKS } from 'constants/networks'
 import { useActiveWeb3React } from 'hooks'
 import { useAllTokens, useIsLoadedTokenDefault } from 'hooks/Tokens'
 import useTheme from 'hooks/useTheme'
-import { useSyncNetworkParamWithStore } from 'hooks/web3/useSyncNetworkParamWithStore'
+import { useChangeNetwork } from 'hooks/web3/useChangeNetwork'
 import { BodyWrapper } from 'pages/AppBody'
 import CrossChain from 'pages/CrossChain'
 import CrossChainLink from 'pages/CrossChain/CrossChainLink'
@@ -80,10 +81,28 @@ export const RoutingIconWrapper = styled(RoutingIcon)`
 `
 
 export default function Swap() {
-  useSyncNetworkParamWithStore()
   const { chainId } = useActiveWeb3React()
-  const isShowTradeRoutes = useShowTradeRoutes()
   const [searchParams, setSearchParams] = useSearchParams()
+
+  const requestChainId = searchParams.get('chainId')
+  const { changeNetwork } = useChangeNetwork()
+
+  const [triedToChangeNetwork, setTriedToChangeNetwork] = useState(false)
+
+  useEffect(() => {
+    // if wallet has already connected, request connect onnce
+    if (
+      !triedToChangeNetwork &&
+      requestChainId &&
+      SUPPORTED_NETWORKS.includes(+requestChainId) &&
+      chainId !== +requestChainId
+    ) {
+      setTriedToChangeNetwork(true)
+      changeNetwork(+requestChainId)
+    }
+  }, [chainId, requestChainId, changeNetwork, triedToChangeNetwork])
+
+  const isShowTradeRoutes = useShowTradeRoutes()
   const [routeSummary, setRouteSummary] = useState<DetailedRouteSummary>()
   const [isSelectCurrencyManually, setIsSelectCurrencyManually] = useState(false) // true when: select token input, output manually or click rotate token.