[uni fix] connect and switch network (network selector) (#406)

* fix bad prop * remove annoying logs * remove query param clearing hook * fix switching to network * fix gchain native label * Update src/custom/hooks/useChangeNetworks.ts Co-authored-by: Leandro Boscariol <[email protected]> * remove docstring * don't auto connect user Co-authored-by: Leandro Boscariol <[email protected]>
cowprotocol · Apr 18, 2022 · d995ca8 · d995ca8
1 parent d983da0
commit d995ca8
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 77 deletions.
diff --git a/src/custom/components/CurrencyLogo/CurrencyLogoMod.tsx b/src/custom/components/CurrencyLogo/CurrencyLogoMod.tsx
@@ -5,14 +5,14 @@ import styled from 'styled-components/macro'
 
 import Logo from 'components/Logo'
 
-export const StyledLogo = styled(Logo)<{ size: string; native: boolean }>`
+export const StyledLogo = styled(Logo)<{ size: string; $native: boolean }>`
   width: ${({ size }) => size};
   height: ${({ size }) => size};
   /* background: radial-gradient(white 50%, #ffffff00 calc(75% + 1px), #ffffff00 100%);
   border-radius: 50%;
-  -mox-box-shadow: 0 0 1px ${({ native }) => (native ? 'white' : 'black')};
-  -webkit-box-shadow: 0 0 1px ${({ native }) => (native ? 'white' : 'black')};
-  box-shadow: 0 0 1px ${({ native }) => (native ? 'white' : 'black')};
+  -mox-box-shadow: 0 0 1px ${({ $native }) => ($native ? 'white' : 'black')};
+  -webkit-box-shadow: 0 0 1px ${({ $native }) => ($native ? 'white' : 'black')};
+  box-shadow: 0 0 1px ${({ $native }) => ($native ? 'white' : 'black')};
   border: 0px solid rgba(255, 255, 255, 0); */
   border-radius: ${({ size }) => size};
   box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075);
@@ -34,7 +34,7 @@ export default function CurrencyLogo({
   return (
     <StyledLogo
       size={size}
-      native={currency?.isNative ?? false}
+      $native={currency?.isNative ?? false}
       srcs={logoURIs}
       alt={`${currency?.symbol ?? 'token'} logo`}
       style={style}

diff --git a/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx b/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx
@@ -25,7 +25,7 @@ import {
   FlyoutHeader,
   LinkOutCircle,
 } from '@src/components/Header/NetworkSelector'
-import useChangeNetworks from 'hooks/useChangeNetworks'
+import useChangeNetworks, { ChainSwitchCallbackOptions } from 'hooks/useChangeNetworks'
 import { transparentize } from 'polished'
 
 /* const ActiveRowLinkList = styled.div`
@@ -213,7 +213,7 @@ function Row({
   onSelectChain,
 }: {
   targetChain: SupportedChainId
-  onSelectChain: (targetChain: number) => void
+  onSelectChain: (targetChain: number, options: ChainSwitchCallbackOptions) => void
 }) {
   const { library, chainId } = useActiveWeb3React()
   if (!library || !chainId) {
@@ -223,7 +223,10 @@ function Row({
   const { helpCenterUrl, explorer, bridge, label, logoUrl } = CHAIN_INFO[targetChain]
 
   const rowContent = (
-    <FlyoutRow onClick={() => onSelectChain(targetChain)} active={active}>
+    <FlyoutRow
+      onClick={() => onSelectChain(targetChain, { skipToggle: false, skipWalletToggle: false })}
+      active={active}
+    >
       <Logo src={logoUrl} />
       <NetworkLabel>{label}</NetworkLabel>
       {chainId === targetChain && <FlyoutRowActiveIndicator active />}
@@ -276,9 +279,10 @@ export const getChainNameFromId = (id: string | number) => {
 }
 
 export default function NetworkSelector() {
-  const { chainId, library } = useActiveWeb3React()
+  // mod: add account
+  const { account, chainId, library } = useActiveWeb3React()
   // mod: refactored inner logic into useChangeNetworks hook
-  const { node, open, toggle, info, handleChainSwitch } = useChangeNetworks({ chainId, library })
+  const { node, open, toggle, info, handleChainSwitch } = useChangeNetworks({ account, chainId, library })
 
   /* const parsedQs = useParsedQueryString()
   const { urlChain, urlChainId } = getParsedChainId(parsedQs)

diff --git a/src/custom/constants/tokens/tokensMod.ts b/src/custom/constants/tokens/tokensMod.ts
@@ -290,19 +290,6 @@ class GnosisChainNativeCurrency extends NativeCurrency {
   }
 }
 
-export class GpEther extends Ether {
-  public get wrapped(): Token {
-    if (this.chainId in WRAPPED_NATIVE_CURRENCY) return WRAPPED_NATIVE_CURRENCY[this.chainId]
-    throw new Error('Unsupported chain ID')
-  }
-
-  private static _cachedExtendedEther: { [chainId: number]: NativeCurrency } = {}
-
-  public static onChain(chainId: number): ExtendedEther {
-    return this._cachedExtendedEther[chainId] ?? (this._cachedExtendedEther[chainId] = new ExtendedEther(chainId))
-  }
-}
-
 const cachedNativeCurrency: { [chainId: number]: NativeCurrency } = {}
 export function nativeOnChain(chainId: number): NativeCurrency {
   return (
@@ -313,6 +300,17 @@ export function nativeOnChain(chainId: number): NativeCurrency {
   )
 }
 
+export class GpEther extends Ether {
+  public get wrapped(): Token {
+    if (this.chainId in WRAPPED_NATIVE_CURRENCY) return WRAPPED_NATIVE_CURRENCY[this.chainId]
+    throw new Error('Unsupported chain ID')
+  }
+
+  private static _cachedExtendedEther: { [chainId: number]: NativeCurrency } = {}
+
+  public static onChain = nativeOnChain
+}
+
 export const TOKEN_SHORTHANDS: { [shorthand: string]: { [chainId in SupportedChainId]?: string } } = {
   USDC: {
     ...UNI_TOKEN_SHORTHANDS['USDC'],

diff --git a/src/custom/hooks/useApproveCallback/useApproveCallbackMod.ts b/src/custom/hooks/useApproveCallback/useApproveCallbackMod.ts
@@ -68,31 +68,6 @@ export function useApproveCallback({
   const pendingApproval = useHasPendingApproval(token?.address, spender)
   const spenderCurrency = useCurrency(spender)
 
-  // TODO: Nice to have, can be deleted
-  // eslint-disable-next-line no-lone-blocks
-  {
-    process.env.NODE_ENV !== 'production' &&
-      console.debug(`
-    $$$$Approval metrics:
-    ====
-    CurrentAllowance: ${currentAllowance?.toExact()}
-    raw: ${currentAllowance?.quotient.toString()}
-    ====
-    amountToCheckAgainstApproval: ${amountToCheckAgainstAllowance?.toExact()}
-    raw: ${amountToCheckAgainstAllowance?.quotient.toString()}
-    ====
-    amountToApprove: ${amountToApprove?.toExact()}
-    raw: ${amountToApprove?.quotient.toString()}
-    ====
-    Needs approval?: ${
-      !amountToCheckAgainstAllowance && !amountToApprove
-        ? 'Unknown - no amounts'
-        : currentAllowance && amountToApprove
-        ? currentAllowance.lessThan(amountToCheckAgainstAllowance || amountToApprove)
-        : 'unknown no currentAllowance'
-    }
-  `)
-  }
   // check the current approval status
   const approvalState: ApprovalState = useMemo(() => {
     if (!amountToApprove || !spender) return ApprovalState.UNKNOWN

diff --git a/src/custom/hooks/useChangeNetworks.ts b/src/custom/hooks/useChangeNetworks.ts
@@ -2,25 +2,20 @@ import { useCallback, useEffect, useRef } from 'react'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { useActiveWeb3React } from 'hooks/web3'
 import { switchToNetwork } from 'utils/switchToNetwork'
-import { useModalOpen, useToggleModal } from '../state/application/hooks'
+import { useModalOpen, useToggleModal } from 'state/application/hooks'
 import { CHAIN_INFO } from 'constants/chainInfo'
-import useParsedQueryString from '@src/hooks/useParsedQueryString'
-import usePrevious from '@src/hooks/usePrevious'
-import { addPopup, ApplicationModal } from '@src/state/application/reducer'
-import { useAppDispatch } from '@src/state/hooks'
-import { replaceURLParam } from '@src/utils/routes'
+import useParsedQueryString from 'hooks/useParsedQueryString'
+import usePrevious from 'hooks/usePrevious'
+import { addPopup, ApplicationModal } from 'state/application/reducer'
+import { useAppDispatch } from 'state/hooks'
+import { replaceURLParam } from 'utils/routes'
 import { getChainNameFromId, getParsedChainId } from 'components/Header/NetworkSelector'
 import { useHistory } from 'react-router-dom'
 
-type ChangeNetworksParams = Pick<ReturnType<typeof useActiveWeb3React>, 'chainId' | 'library'>
+type ChangeNetworksParams = Pick<ReturnType<typeof useActiveWeb3React>, 'account' | 'chainId' | 'library'>
+export type ChainSwitchCallbackOptions = { skipWalletToggle: boolean; skipToggle: boolean }
 
-/**
- * Hook extracted from Header/NetworkSelector component pretty much verbatim
- *
- * @param chainId
- * @param library
- */
-export default function useChangeNetworks({ chainId, library }: ChangeNetworksParams) {
+export default function useChangeNetworks({ account, chainId, library }: ChangeNetworksParams) {
   const parsedQs = useParsedQueryString()
   const { urlChain, urlChainId } = getParsedChainId(parsedQs)
   const prevChainId = usePrevious(chainId)
@@ -31,16 +26,18 @@ export default function useChangeNetworks({ chainId, library }: ChangeNetworksPa
 
   const history = useHistory()
 
-  const info = chainId ? CHAIN_INFO[chainId] : undefined
-
   const dispatch = useAppDispatch()
 
+  const info = chainId ? CHAIN_INFO[chainId] : undefined
+
   const handleChainSwitch = useCallback(
-    (targetChain: number, skipToggle?: boolean) => {
+    (targetChain: number, options: ChainSwitchCallbackOptions) => {
       if (!library) return
+
       switchToNetwork({ library, chainId: targetChain })
         .then(() => {
-          if (!skipToggle) {
+          // mod
+          if (!options.skipToggle) {
             toggle()
           }
           history.replace({
@@ -53,17 +50,19 @@ export default function useChangeNetworks({ chainId, library }: ChangeNetworksPa
           // 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
           if (chainId) {
-            history.replace({ search: replaceURLParam(history.location.search, 'chain', getChainNameFromId(chainId)) })
+            history.replace({
+              search: replaceURLParam(history.location.search, 'chain', getChainNameFromId(chainId)),
+            })
           }
-
-          if (!skipToggle) {
+          // mod
+          if (!options.skipToggle) {
             toggle()
           }
 
           dispatch(addPopup({ content: { failedSwitchNetwork: targetChain }, key: `failed-network-switch` }))
         })
     },
-    [dispatch, library, toggle, history, chainId]
+    [chainId, dispatch, history, library, toggle]
   )
 
   useEffect(() => {
@@ -73,10 +72,12 @@ export default function useChangeNetworks({ chainId, library }: ChangeNetworksPa
     if (chainId !== prevChainId) {
       history.replace({ search: replaceURLParam(history.location.search, 'chain', getChainNameFromId(chainId)) })
       // otherwise assume network change originates from URL
+      // } else if (urlChainId && urlChainId !== chainId) {
     } else if (urlChainId && urlChainId !== chainId) {
-      handleChainSwitch(urlChainId, true)
+      // handleChainSwitch(urlChainId, true)
+      handleChainSwitch(urlChainId, { skipToggle: true, skipWalletToggle: false }) // MOD
     }
-  }, [chainId, urlChainId, prevChainId, handleChainSwitch, history])
+  }, [chainId, handleChainSwitch, history, prevChainId, urlChainId])
 
   // set chain parameter on initial load if not there
   useEffect(() => {

diff --git a/src/custom/pages/App/index.tsx b/src/custom/pages/App/index.tsx
@@ -9,7 +9,6 @@ import * as Sentry from '@sentry/react'
 import { Integrations } from '@sentry/tracing'
 import { version } from '@src/../package.json'
 import { environmentName } from 'utils/environments'
-import { useFilterEmptyQueryParams } from 'hooks/useFilterEmptyQueryParams'
 import RedirectAnySwapAffectedUsers from 'pages/error/AnySwapAffectedUsers/RedirectAnySwapAffectedUsers'
 import { SENTRY_IGNORED_GP_QUOTE_ERRORS } from 'api/gnosisProtocol/errors/QuoteError'
 
@@ -89,9 +88,6 @@ function createRedirectExternal(url: string) {
 const Loading = <LoadingWrapper>Loading...</LoadingWrapper>
 
 export default function App() {
-  // Dealing with empty URL queryParameters
-  useFilterEmptyQueryParams()
-
   return (
     <>
       <RedirectAnySwapAffectedUsers />

diff --git a/src/custom/pages/Claim/ClaimsOnOtherChainsBanner.tsx b/src/custom/pages/Claim/ClaimsOnOtherChainsBanner.tsx
@@ -102,7 +102,8 @@ function ClaimsOnOtherChainsBanner({ className }: { className?: string }) {
         <div>This account has available claims on</div>
         <div>
           {chainsWithClaims.map((chainId, index, array) => {
-            const changeNetworksCallback = () => handleChainSwitch(chainId, true) // true to avoid opening the dropdown
+            const changeNetworksCallback = () =>
+              handleChainSwitch(chainId, { skipToggle: true, skipWalletToggle: false }) // true to avoid opening the dropdown
             const isLastInMultiple = index === array.length - 1 && array.length > 1
             return (
               <Fragment key={chainId}>