Closed ghost closed 10 months ago
Wagmi Hooks can only be used inside the WagmiConfig
Context Provider. Not seeing that included in the code you posted above. If you want me to look into it further, attach a minimal reproduction.
Could you rewrite the code with wrapping wagmiconfig?
This issue has been locked since it has been closed for more than 14 days.
If you found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest wagmi version. If you have any other comments you can create a new discussion.
Is there an existing issue for this?
Package Version
1.3.10
Current Behavior
react-dom.production.min.js:189 Error:
useConfig
must be used withinWagmiConfig
.Read more: https://wagmi.sh/react/WagmiConfig at d (index.js:75:1) at y (index.js:841:1) at s (index.mjs:6:21) at y (useActiveWeb3React.ts:58:21) at v (NetworkModal.tsx:26:46) at ab (react-dom.production.min.js:167:135) at i (react-dom.production.min.js:290:335) at oO (react-dom.production.min.js:280:383) at react-dom.production.min.js:280:319 at oF (react-dom.production.min.js:280:319)
import useActiveWeb3React from 'hooks/useActiveWeb3React' import { CHAIN_IDS } from 'utils/wagmi' import { ChainId } from '@pancakeswap/chains' import { useMemo } from 'react' import { useNetwork } from 'wagmi' import { atom, useAtom } from 'jotai' import { SUPPORT_ONLY_BSC } from 'config/constants/supportChains' import dynamic from 'next/dynamic'
export const hideWrongNetworkModalAtom = atom(false)
const PageNetworkSupportModal = dynamic( () => import('./PageNetworkSupportModal').then((mod) => mod.PageNetworkSupportModal), { ssr: false }, ) const WrongNetworkModal = dynamic(() => import('./WrongNetworkModal').then((mod) => mod.WrongNetworkModal), { ssr: false, }) const UnsupportedNetworkModal = dynamic( () => import('./UnsupportedNetworkModal').then((mod) => mod.UnsupportedNetworkModal), { ssr: false }, )
export const NetworkModal = ({ pageSupportedChains = SUPPORT_ONLY_BSC }: { pageSupportedChains?: number[] }) => { const { chainId, chain, isWrongNetwork } = useActiveWeb3React() const { chains } = useNetwork() const [dismissWrongNetwork, setDismissWrongNetwork] = useAtom(hideWrongNetworkModalAtom)
const isBNBOnlyPage = useMemo(() => { return pageSupportedChains?.length === 1 && pageSupportedChains[0] === ChainId.BSC }, [pageSupportedChains])
const isPageNotSupported = useMemo( () => Boolean(pageSupportedChains.length) && !pageSupportedChains.includes(chainId), [chainId, pageSupportedChains], ) if (pageSupportedChains?.length === 0) return null // open to all chains
if (isPageNotSupported && isBNBOnlyPage) { return (
}
if (isWrongNetwork && !dismissWrongNetwork && !isPageNotSupported) { const currentChain = chains.find((c) => c.id === chainId) if (!currentChain) return null return ( <ModalV2 isOpen={isWrongNetwork} closeOnOverlayClick onDismiss={() => setDismissWrongNetwork(true)}> <WrongNetworkModal currentChain={currentChain} onDismiss={() => setDismissWrongNetwork(true)} /> ) }
if ((chain?.unsupported ?? false) || isPageNotSupported) { return (
}
return null }
import { useRouter } from 'next/router' import { useEffect, useRef } from 'react' import { EXCHANGE_PAGE_PATHS } from 'config/constants/exchange' import { isChainSupported } from 'utils/wagmi' import { ChainId } from '@pancakeswap/chains' import { CHAIN_QUERY_NAME, getChainId } from 'config/chains' import { getHashFromRouter } from 'utils/getHashFromRouter' import { useActiveChainId } from './useActiveChainId' import { useSwitchNetworkLoading } from './useSwitchNetworkLoading'
export function useNetworkConnectorUpdater() { const { chainId } = useActiveChainId() const previousChainIdRef = useRef(chainId) const [loading] = useSwitchNetworkLoading() const router = useRouter()
useEffect(() => { const setPrevChainId = () => { previousChainIdRef.current = chainId } if (loading || !router.isReady) return setPrevChainId() const parsedQueryChainId = getChainId(router.query.chain as string)
}, [chainId, loading, router]) }
/**
Recreate web3 instance only if the provider change */ const useActiveWeb3React = () => { const web3React = useWeb3React() const { chainId, isWrongNetwork } = useActiveChainId()
return { ...web3React, chainId, isWrongNetwork, } }
export default useActiveWeb3React
Expected Behavior
No response
Steps To Reproduce
No response
Link to Minimal Reproducible Example (StackBlitz, CodeSandbox, GitHub repo etc.)
No response
Anything else?
No response