Release 1.12.0 RC.1

cypress-custom/integration/swapMod.ts

@@ -5,11 +5,11 @@ describe('Swap (mod)', () => {
     cy.visit('/#/swap')
   })
 
-  it('starts with an Native/USDC swap and quotes it', () => {
-    cy.get('#swap-currency-input .token-amount-input').should('have.value', '1')
+  it('starts with wrapped native selected', () => {
+    cy.get('#swap-currency-input .token-amount-input').should('not.have.value')
     cy.get('#swap-currency-input .token-symbol-container').should('contain.text', 'WETH')
-    cy.get('#swap-currency-output .token-amount-input').should('not.have.value', '')
-    cy.get('#swap-currency-output .token-symbol-container').should('contain.text', 'USDC')
+    cy.get('#swap-currency-output .token-amount-input').should('not.have.value')
+    cy.get('#swap-currency-output .token-symbol-container').should('contain.text', 'Select a token')
   })
 
   it('can enter an amount into input', () => {

src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx

@@ -4,7 +4,7 @@ import { getConnection } from 'connection/utils'
 import { getChainInfo } from 'constants/chainInfo'
 import { CHAIN_IDS_TO_NAMES, SupportedChainId } from 'constants/chains'
 import useParsedQueryString from 'hooks/useParsedQueryString'
-import usePrevious from 'hooks/usePrevious'
+// import usePrevious from 'hooks/usePrevious'
 import { ParsedQs } from 'qs'
 import { useCallback, useEffect, useRef } from 'react'
 import { AlertTriangle, ChevronDown } from 'react-feather'
@@ -277,21 +277,21 @@ function Row({
       <ActiveRowWrapper>
         {rowContent}
         <ActiveRowLinkList>
-          {bridge ? (
+          {bridge && (
             <ExternalLink href={bridge}>
               <BridgeLabel chainId={chainId} /> <LinkOutCircle />
             </ExternalLink>
-          ) : null}
-          {explorer ? (
+          )}
+          {explorer && (
             <ExternalLink href={explorer}>
               <ExplorerLabel chainId={chainId} /> <LinkOutCircle />
             </ExternalLink>
-          ) : null}
-          {helpCenterUrl ? (
+          )}
+          {helpCenterUrl && (
             <ExternalLink href={helpCenterUrl}>
               <Trans>Help Center</Trans> <LinkOutCircle />
             </ExternalLink>
-          ) : null}
+          )}
 
           {supportedChainId(chainId) && (
             <ExternalLink href={getExplorerBaseUrl(chainId)}>
@@ -336,11 +336,11 @@ export const NETWORK_SELECTOR_CHAINS = [
 
 export default function NetworkSelector() {
   const dispatch = useAppDispatch()
-  const { chainId, provider, connector } = useWeb3React()
-  const previousChainId = usePrevious(chainId)
+  const { chainId, provider, connector, account } = useWeb3React()
+  // const previousChainId = usePrevious(chainId)
   const parsedQs = useParsedQueryString()
   const { urlChain, urlChainId } = getParsedChainId(parsedQs)
-  const previousUrlChainId = usePrevious(urlChainId)
+  // const previousUrlChainId = usePrevious(urlChainId)
   const node = useRef<HTMLDivElement>(null)
   const isOpen = useModalIsOpen(ApplicationModal.NETWORK_SELECTOR)
   const openModal = useOpenModal(ApplicationModal.NETWORK_SELECTOR)
@@ -350,6 +350,9 @@ export default function NetworkSelector() {
   const isSmartContractWallet = useIsSmartContractWallet() // mod
   const isUnsupportedNetwork = !supportedChainId(chainId)
 
+  // MOD - to keep track of the switching in progress and avoid race conditions
+  const isSwitching = useRef(false)
+
   const addPopup = useAddPopup()
   const removePopup = useRemovePopup()
 
@@ -359,11 +362,15 @@ export default function NetworkSelector() {
     async (targetChain: SupportedChainId, skipClose?: boolean) => {
       if (!connector) return
 
+      isSwitching.current = true
+
       const connectionType = getConnection(connector).type
 
       try {
         dispatch(updateConnectionError({ connectionType, error: undefined }))
         await switchChain(connector, targetChain)
+        // Update URL right after network change
+        history.replace({ search: replaceURLParam(history.location.search, 'chain', getChainNameFromId(targetChain)) })
       } catch (error) {
         console.error('Failed to switch networks', error)
 
@@ -374,25 +381,29 @@ export default function NetworkSelector() {
       if (!skipClose) {
         closeModal()
       }
+
+      isSwitching.current = false
     },
-    [connector, dispatch, addPopup, closeModal]
+    [connector, dispatch, history, addPopup, closeModal]
   )
 
   useEffect(() => {
-    if (!chainId || !previousChainId) return
-
-    // when network change originates from wallet or dropdown selector, just update URL
-    if (chainId !== previousChainId && chainId !== urlChainId) {
+    if (isSwitching.current) {
+      // if wallet switching is in progress, avoid triggering it again
+      return
+    }
+    if (account && chainId && chainId !== urlChainId) {
+      // if wallet is connected and chainId already set, keep the url param in sync
       history.replace({ search: replaceURLParam(history.location.search, 'chain', getChainNameFromId(chainId)) })
-      // otherwise assume network change originates from URL
-    } else if (urlChainId && urlChainId !== previousUrlChainId && urlChainId !== chainId) {
+    } else if (urlChainId && chainId && urlChainId !== chainId) {
+      // if chain and url chainId are both set and differ, try to update chainid
       onSelectChain(urlChainId, true).catch(() => {
         // we want app network <-> chainId param to be in sync, so if user changes the network by changing the URL
         // but the request fails, revert the URL back to current chainId
         history.replace({ search: replaceURLParam(history.location.search, 'chain', getChainNameFromId(chainId)) })
       })
     }
-  }, [chainId, urlChainId, previousChainId, previousUrlChainId, onSelectChain, history])
+  }, [account, chainId, history, onSelectChain, urlChainId])
 
   // set chain parameter on initial load if not there
   useEffect(() => {

src/custom/pages/Swap/SwapMod.tsx

@@ -96,7 +96,6 @@ import { useGnosisSafeInfo } from 'hooks/useGnosisSafeInfo'
 
 export default function Swap({
   history,
-  location,
   TradeBasicDetails,
   EthWethWrapMessage,
   SwitchToWethBtn,
@@ -114,7 +113,6 @@ export default function Swap({
   const { account, chainId } = useWeb3React()
   const { isSupportedWallet } = useWalletInfo()
   const loadedUrlParams = useDefaultsFromURLSearch()
-  const previousChainId = usePrevious(chainId)
 
   // token warning stuff
   const [loadedInputCurrency, loadedOutputCurrency] = [
@@ -422,13 +420,6 @@ export default function Swap({
   // check if user has gone through approval process, used to show two step buttons, reset on token change
   const [approvalSubmitted, setApprovalSubmitted] = useState<boolean>(false)
 
-  // reset url query on network change
-  useEffect(() => {
-    if (chainId && previousChainId && chainId !== previousChainId) {
-      history.replace(location.pathname)
-    }
-  }, [chainId, history, location.pathname, previousChainId])
-
   // mark when a user has submitted an approval, reset onTokenSelection for input field
   useEffect(() => {
     if (approvalState === ApprovalState.PENDING) {

src/custom/state/swap/hooks.tsx

@@ -386,12 +386,8 @@ export function validatedRecipient(recipient: any): string | null {
   return null
 } */
 
-// mod: defaultInputCurrency and chainId parameters
-export function queryParametersToSwapState(
-  parsedQs: ParsedQs,
-  defaultInputCurrency = '',
-  chainId: SupportedChainId | undefined = undefined
-): SwapState {
+// mod: defaultInputCurrency parameters
+export function queryParametersToSwapState(parsedQs: ParsedQs, defaultInputCurrency = ''): SwapState {
   let inputCurrency = parseCurrencyFromURLParameter(parsedQs.inputCurrency)
   let outputCurrency = parseCurrencyFromURLParameter(parsedQs.outputCurrency)
   const typedValue = parseTokenAmountURLParameter(parsedQs.exactAmount)
@@ -422,18 +418,19 @@ export function queryParametersToSwapState(
 
 // updates the swap state to use the defaults for a given network
 export function useDefaultsFromURLSearch(): SwapState {
-  const { chainId } = useWeb3React()
+  const { chainId: _chainId } = useWeb3React()
+  const chainId = supportedChainId(_chainId)
   const dispatch = useAppDispatch()
   const parsedQs = useParsedQueryString()
 
   // TODO: check whether we can use the new function for native currency
   // This is not a great fix for setting a default token
   // but it is better and easiest considering updating default files
-  const defaultInputToken = WETH[supportedChainId(chainId) || SupportedChainId.MAINNET].address // mod
+  const defaultInputToken = WETH[chainId || SupportedChainId.MAINNET].address // mod
 
   const parsedSwapState = useMemo(() => {
-    return queryParametersToSwapState(parsedQs, defaultInputToken, chainId) // mod
-  }, [chainId, defaultInputToken, parsedQs]) // mod
+    return queryParametersToSwapState(parsedQs, defaultInputToken) // mod
+  }, [defaultInputToken, parsedQs]) // mod
 
   useEffect(() => {
     if (!chainId) return
@@ -451,7 +448,7 @@ export function useDefaultsFromURLSearch(): SwapState {
     )
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chainId, parsedQs])
+  }, [dispatch, chainId])
 
   return parsedSwapState
 }