useConfig must be used within `WagmiConfig

ghost commented 10 months ago

Is there an existing issue for this?

[X] I have searched the existing issues

Package Version

1.3.10

Current Behavior

react-dom.production.min.js:189 Error: useConfig must be used within WagmiConfig.

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)

**NetworkModal.tsx**

import { ModalV2 } from '@pancakeswap/uikit'

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 }

**useActiveWeb3React.tsx**

import { useWeb3React } from '@pancakeswap/wagmi'

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)

if (!parsedQueryChainId && chainId === ChainId.BSC) return setPrevChainId()
if (parsedQueryChainId !== chainId && isChainSupported(chainId)) {
  const removeQueriesFromPath =
    previousChainIdRef.current !== chainId &&
    EXCHANGE_PAGE_PATHS.some((item) => {
      return router.pathname.startsWith(item)
    })
  const uriHash = getHashFromRouter(router)?.[0]
  const { chainId: _chainId, ...omittedQuery } = router.query
  router.replace(
    {
      query: {
        ...(!removeQueriesFromPath && omittedQuery),
        chain: CHAIN_QUERY_NAME[chainId],
      },
      ...(uriHash && { hash: uriHash }),
    },
    undefined,
    {
      shallow: true,
      scroll: false,
    },
  )
}
return setPrevChainId()

}, [chainId, loading, router]) }

/**

Provides a web3 provider with or without user's signer
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

tmm commented 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.

ghost commented 10 months ago

Could you rewrite the code with wrapping wagmiconfig?

github-actions[bot] commented 7 months ago

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.

wevm / wagmi