Please provide the following details too when asking for help in this category:
- SDK Version: 7.0.1
- Platform: Windows ( Brave Browser )
- Browser Console Screenshots:
- Related to Custom Authentication? Please provide the following info too: (Optional)
- Verifier Name:
- JWKS Endpoint:
- Sample idToken(JWT)
Please provide the Web3Auth initialization and login code snippet below:
const [web3auth, setWeb3Auth] = useState<Web3Auth | null>(null)
const [web3authConnector, setWeb3AuthConnector] =
useState<Web3AuthConnector | null>(null)
const { chains, publicClient, webSocketPublicClient } = configureChains(
[polygonMumbai],
[publicProvider()]
)
const defaultConnectors = [
new CoinbaseWalletConnector({
chains,
options: {
appName: 'wagmi',
},
}),
new WalletConnectConnector({
chains,
options: {
qrModalOptions: {
themeMode: 'dark',
},
projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID as string,
showQrModal: true,
},
}),
new InjectedConnector({
chains,
options: {
name: 'Injected',
shimDisconnect: true,
},
}),
]
const connectors = web3authConnector
? [...defaultConnectors, web3authConnector as any]
: defaultConnectors
const config = createConfig({
autoConnect: true,
connectors: connectors,
publicClient,
webSocketPublicClient,
})
useEffect(() => {
;(async () => {
// Initialize within your constructor
const web3auth = new Web3Auth({
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
web3AuthNetwork: 'testnet',
chainConfig: {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: '0x13881',
},
})
// Adding Wallet Connect adapter opens wallet connect modal behind the web3auth modal but doesn't fix the issue
// Also I get this error: "NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': the name "wcm-button" has already been used with this registry" So to fix this I've to remove WalletConnectConnector in wagmi config
// const walletConnectModal = new WalletConnectModal({
// projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID as string,
// })
// const walletConnectV2Settings = await getWalletConnectV2Settings(
// CHAIN_NAMESPACES.EIP155,
// [0x13881],
// process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID as string
// )
// const walletConnectV2Adapter = new WalletConnectV2Adapter({
// adapterSettings: {
// qrcodeModal: walletConnectModal,
// ...walletConnectV2Settings.adapterSettings,
// },
// loginSettings: {
// ...walletConnectV2Settings.loginSettings,
// },
// })
// // @ts-ignore
// web3auth.configureAdapter(walletConnectV2Adapter)
const connector = new Web3AuthConnector({
chains: chains,
options: {
web3AuthInstance: web3auth,
},
})
setWeb3Auth(web3auth)
setWeb3AuthConnector(connector)
})()
}, [])
useEffect(() => {
if (web3auth) {
// Subscribe to lifecycle events emitted by web3auth
web3auth.on(ADAPTER_EVENTS.CONNECTED, (data: CONNECTED_EVENT_DATA) => {
defaultOnConnectEvent(data)
})
web3auth.on(ADAPTER_EVENTS.DISCONNECTED, () => {
defaultOnDisconnectEvent()
})
web3auth.initModal()
}
}, [web3auth])
When I click on Connect Wallet under External Wallets section it keeps on loading ( probably it’s the issue of wallet connect ) and sometimes after hot reload or randomly trying, it somehow loads qr code and shows all appropriate options.
I’m getting same issue in the example repo: https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/wagmi-connector/wagmi-react-modal-example
I’ve also upgraded my dependencies from:
“@walletconnect/modal”: “^2.6.2”,
“@web3auth/base”: “^6.1.4”,
“@web3auth/modal”: “^6.1.1”,
“@web3auth/wallet-connect-v2-adapter”: “^7.0.2”,
“@web3auth/web3auth-wagmi-connector”: “^5.0.1”,
“wagmi”: “^1.4.1”
to:
“@walletconnect/modal”: “^2.6.2”,
“@web3auth/base”: “^7.0.1”,
“@web3auth/modal”: “^7.0.3”,
“@web3auth/wallet-connect-v2-adapter”: “^7.0.2”,
“@web3auth/web3auth-wagmi-connector”: “^5.0.1”,
“wagmi”: “^1.4.1”
( And I was expecting issue to get fix but guess what, now changing theme to dark mode doesn’t work by adding it in uiConfig )
These are the screenshots:
For issue:
And sometimes it just loads two icons (metamask and torus or something ) and not qr code but after sometime, it again keeps on loading. And for this case if I configureAdapter walletConnectV2Adapter, it keeps on loading but wallet connect modal opens behind web3auth modal ( removing web3auth modal from browser inspector shows that it’s wallet connect modal behind web3auth modal )
( I’ve attached many screenshots to describe it in more details but guess what, when I clicked on Create Topic, it then shows me that “new user can only put one embedded media item in a post”, at least it should show this message as warning when I’ve added more that one image. I’ve then remove all other screenshots 
)