diff --git a/src/custom/components/CurrencyLogo/CurrencyLogoMod.tsx b/src/custom/components/CurrencyLogo/CurrencyLogoMod.tsx index 09d8df83ad..a31c7ea396 100644 --- 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 ( 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 = ( - onSelectChain(targetChain)} active={active}> + onSelectChain(targetChain, { skipToggle: false, skipWalletToggle: false })} + active={active} + > {label} {chainId === targetChain && } @@ -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 index 8015b09b04..6eb78d12ea 100644 --- 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 index 236e68439f..bc7c89e02f 100644 --- 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 index bfde2ffd6c..1b5baaf19c 100644 --- 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, 'chainId' | 'library'> +type ChangeNetworksParams = Pick, '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 index aac12b79fc..a222227841 100644 --- 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 = Loading... export default function App() { - // Dealing with empty URL queryParameters - useFilterEmptyQueryParams() - return ( <> diff --git a/src/custom/pages/Claim/ClaimsOnOtherChainsBanner.tsx b/src/custom/pages/Claim/ClaimsOnOtherChainsBanner.tsx index d78b0628ae..e428d807e3 100644 --- a/src/custom/pages/Claim/ClaimsOnOtherChainsBanner.tsx +++ b/src/custom/pages/Claim/ClaimsOnOtherChainsBanner.tsx @@ -102,7 +102,8 @@ function ClaimsOnOtherChainsBanner({ className }: { className?: string }) {
This account has available claims on
{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 (