Hello there, I’m currently using web3auth with both WalletConnect and Metamask. However, I am experiencing some issues when trying to connect to Polygon through WalletConnect. After the connection is established, I receive an error message when using Next.js. Unfortunately, I haven’t been able to find a solution to this problem.
export const useWeb3Auth = () => {
const [web3auth, setWeb3auth] = useState<Web3Auth | null>(null)
const [provider, setProvider] = useState<IProvider | null>(null)
const [isConnected, setIsConnected] = useState<boolean>(false)
const [address, setAddress] = useState<addressType>(undefined)
const [chainId, setChainId] = useState<number | null>(null)
const [web3authStatus, setWeb3AuthStatus] = useState<string | null>(null)
const initWeb3Auth = async (defaultConnection?: CustomChainConfig): Promise<Web3Auth> => {
const web3AuthConfig = generateWeb3AuthConfig(defaultConnection)
const web3AuthInstance = new Web3Auth(web3AuthConfig)
web3AuthInstance.configureAdapter(openloginAdapter)
const adapters = await getDefaultExternalAdapters({ options: web3AuthConfig })
adapters.forEach((adapter) => {
web3AuthInstance.configureAdapter(adapter)
})
await web3AuthInstance.initModal()
setWeb3auth(web3AuthInstance)
return web3AuthInstance
}
const login = useCallback(
async (defaultChain?: CustomChainConfig, isSwap?: boolean) => {
try {
await (async () => {
let web3AuthInstance = web3auth
if ((!web3AuthInstance || defaultChain) && !isSwap) {
console.info('[web3auth] starting')
web3AuthInstance = await initWeb3Auth(defaultChain)
}
if (!web3AuthInstance) {
console.warn('[web3auth] not initialized yet')
return
}
const web3Provider = provider || (await web3AuthInstance.connect())
if (web3Provider) {
const ethersProvider = new ethers.providers.Web3Provider(web3Provider)
await getAddress(ethersProvider)
await getChainId(ethersProvider)
setProvider(web3Provider)
setIsConnected(true)
}
})()
} catch (error) {
console.error('Error during login process:', error)
}
},
[provider, web3auth, setProvider, setIsConnected],
)
// Check current connection
useEffect(() => {
if (web3auth && web3auth.status === 'connected' && !provider) {
login()
}
}, [web3auth, provider, login])
const swapChain = useCallback(
async (network: CustomChainConfig) => {
try {
if (!web3auth) return
await web3auth.addChain(network)
console.info('[web3auth] New Chain Added')
await web3auth.switchChain({ chainId: network.chainId })
await login(network, true)
} catch (error: unknown) {
const web3AuthError = error as Web3AuthError
throw web3AuthError
}
},
[web3auth, login],
)
const getAddress = async (ethersProvider: ethers.providers.Web3Provider) => {
const signer = ethersProvider.getSigner()
const address = await signer.getAddress()
setAddress(address as addressType)
}
const getChainId = async (ethersProvider: ethers.providers.Web3Provider) => {
const network = await ethersProvider.getNetwork()
setChainId(network.chainId)
}
const clearStates = () => {
setProvider(null)
setIsConnected(false)
setAddress(undefined)
setChainId(null)
setWeb3AuthStatus(null)
}
const logout = useCallback(async () => {
if (!web3auth || !isConnected) {
console.warn('[web3auth] not initialized yet or not connected')
return
}
try {
await web3auth.logout()
} catch (error) {
console.error('Error during logout:', error)
}
clearStates()
}, [web3auth, isConnected])
return { web3auth, provider, isConnected, address, chainId, web3authStatus, swapChain, login, logout }
}
