When asking for help in this category, please make sure to provide the following details:
- SDK Version(package.json):9.5.3
- Platform: Web Next Js
- Browser Console Screenshots: Brave
Hello here is my config files
projectConfig.ts
import {
CHAIN_NAMESPACES,
CustomChainConfig,
WEB3AUTH_NETWORK
} from '@web3auth/base'
import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider'
import { Web3Auth, Web3AuthOptions } from '@web3auth/modal'
const clientId = process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID || ''
const chainConfig: CustomChainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: '0x1',
rpcTarget: 'https://rpc.ankr.com/eth',
displayName: 'Ethereum Mainnet',
blockExplorerUrl: 'https://etherscan.io',
ticker: 'ETH',
tickerName: 'Ethereum',
logo: 'https://cryptologos.cc/logos/ethereum-eth-logo.png'
}
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig }
})
export const web3AuthOptions: Web3AuthOptions = {
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
privateKeyProvider
}
export const web3auth = new Web3Auth(web3AuthOptions)
My file WalletConnect.tsx
'use client'
import { Button } from '@/components/ui/button'
import { IAdapter, IProvider } from '@web3auth/base'
import { useEffect, useState } from 'react'
import { getDefaultExternalAdapters } from '@web3auth/default-evm-adapter'
import { web3auth, web3AuthOptions } from '@/lib/projectConfig'
export default function Walletconnect() {
const [provider, setProvider] = useState<IProvider | null>(null)
const [loggedIn, setLoggedIn] = useState(false)
useEffect(() => {
const init = async () => {
try {
const adapters = await getDefaultExternalAdapters({
options: web3AuthOptions
})
adapters.forEach((adapter: IAdapter<unknown>) => {
web3auth.configureAdapter(adapter)
})
await web3auth.initModal()
setProvider(web3auth.provider)
if (web3auth.connected) {
setLoggedIn(true)
}
} catch (error) {
console.error(error)
}
}
init()
}, [])
const login = async () => {
const web3authProvider = await web3auth.connect()
setProvider(web3authProvider)
if (web3auth.connected) {
setLoggedIn(true)
}
}
console.log(provider)
console.log(loggedIn)
return (
<div className="flex items-center gap-2">
<Button
variant="outline"
size="lg"
className="rounded-full"
onClick={login}
>
Login
</Button>
</div>
)
}
Inside my Dashboard I have setup:
- Products: Plug and Play
- Select Chains: EVM Based Chain
Errors:
