TorusWalletPluginError: Web3Auth is not connected

Hi,
I am trying to run the following example repo on my local machine and whenever i click on initiateTopUp, it gives me the error

Uncaught (in promise) TorusWalletPluginError: Web3Auth is not connected.
    CustomError custom-error.mjs:48
    Web3AuthError base.esm.js:202
    TorusWalletPluginError torusWalletConnectorPlugin.esm.js:10
    fromCode torusWalletConnectorPlugin.esm.js:18
    web3AuthNotConnected torusWalletConnectorPlugin.esm.js:38
    initiateTopup torusWalletConnectorPlugin.esm.js:175
    initiateTopUp page.tsx:168
    callCallback react-dom.development.js:19437
    invokeGuardedCallbackImpl react-dom.development.js:19486
    invokeGuardedCallback react-dom.development.js:19561
    invokeGuardedCallbackAndCatchFirstError react-dom.development.js:19575
    executeDispatch react-dom.development.js:30600
    processDispatchQueueItemsInOrder react-dom.development.js:30632
    processDispatchQueue react-dom.development.js:30645
    dispatchEventsForPlugins react-dom.development.js:30656
    dispatchEventForPluginEventSystem react-dom.development.js:30846
    batchedUpdates$1 react-dom.development.js:23743
    batchedUpdates react-dom.development.js:27562
    dispatchEventForPluginEventSystem react-dom.development.js:30845
    dispatchEvent react-dom.development.js:28618
    dispatchDiscreteEvent react-dom.development.js:28589
undefined:53:24
    initiateTopup torusWalletConnectorPlugin.esm.js:177
    initiateTopUp page.tsx:168
    callCallback react-dom.development.js:19437
    invokeGuardedCallbackImpl react-dom.development.js:19486
    invokeGuardedCallback react-dom.development.js:19561
    invokeGuardedCallbackAndCatchFirstError react-dom.development.js:19575
    executeDispatch react-dom.development.js:30600
    processDispatchQueueItemsInOrder react-dom.development.js:30632
    processDispatchQueue react-dom.development.js:30645
    dispatchEventsForPlugins react-dom.development.js:30656
    dispatchEventForPluginEventSystem react-dom.development.js:30846
    batchedUpdates$1 react-dom.development.js:23743
    batchedUpdates react-dom.development.js:27562
    dispatchEventForPluginEventSystem react-dom.development.js:30845
    dispatchEvent react-dom.development.js:28618
    dispatchDiscreteEvent react-dom.development.js:28589

Hi @Ahmed ,
Welcome to the Web3Auth Community.
I just tried out the initiateTopUp functionality and it seems to be working fine on my end. Could you please try out this example again by using the updated main branch? Because I see you are using this example from a commit, which could be the reason for some unexpected behaviour. Please use the updated main branch to try out examples going forward.
Here’s the link for your convenience: https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/nextjs-modal-quick-start

Hi @maharshi, Thanks for the reply.
I have tried again but still the same error, I have used the same exmple in the provided link. I might be missing something here. Do I need to pass plug and play client id or torus wallet client id from the dashboard in the place of existing client id in the example repo? We are using mainnet in the settings for our project

Hi @Ahmed,
This error could be seen when you manually refresh the page after logging in and when you click on the initiate topup, web3auth provider hasn’t loaded yet.
I will just break it down for you in simple words, could you please try waiting till you see in the console Torus - injected provider. I’ll paste a screenshot for reference. It’s the second from last message printed on console. Let me know if this works for you.

Hi @maharshi,
I have tested it with both usecases, logging in for the first time and logging in again. And in the both scenarios Torus itself is working but not the initateTopUp functionality, I can perform all the other actions associated e.g. Get ID Token, Get User Info etc. It is just the initiateTopUp I am having the trouble with. I believe if it was the issue with initalizing Torus Plugin then I should not have been able to perform other actions too.


Facing the Same problem, any solution?

Update!
I cloned the example repo from the Web3Auth Github and seems like this issue exists there aswell.
web3auth-pnp-examples/web-modal-sdk/evm/react-evm-modal-example at main · Web3Auth/web3auth-pnp-examples · GitHub

Update
The error occurs because you’re allowed to use initiateTopUp only for the accounts created by the Web3Auth(i.e. accounts created using Google, twitter etc…).
If you try to call initiateTopUp with account that are connected with 3rd party wallets(i.e metamask,coinbase etc). the above error is triggered