Wallet Services Plugin Error Message

Help - Plug n Play
1

I get the error WalletServicesPluginError: Web3Auth is not connected. when trying to call await walletServicesPlugin.showCheckout();

I’m using:
“@web3auth/modal”: “^8.1.0”
“@web3auth/wallet-services-plugin”: “^8.1.0”

2

Hi @kewyn.comercial,

I hope everything’s going well on your end! To better assist you, could you provide us with a bit more of your code? Having more context would really help us understand your situation better and offer more targeted advice.

Also, have you had a chance to take a look at our modal examples? You can find them here: web3auth-pnp-examples/web-modal-sdk/blockchain-connection-examples/evm-modal-example at main · Web3Auth/web3auth-pnp-examples · GitHub. They might offer some insights or solutions relevant to what you’re working on.

3

I followed the example but the error doesn’t go away.

Here is the code:

const web3AuthOptions: Web3AuthOptions = {
  web3AuthNetwork:'testnet',
  privateKeyProvider: new EthereumPrivateKeyProvider({
    config: {
      chainConfig: {
        chainNamespace: CHAIN_NAMESPACES.EIP155,
        chainId: `0x${EVMNetworkData.Polygon.chainId.toString(16)}`,
        rpcTarget: EVMNetworkData.Polygon.RPCUrl, // This is the public RPC we have added, please pass on your own endpoint while creating an app
      },
    },
  }),
  uiConfig: {},
};

const openLoginSettings: OpenloginAdapterOptions = {
  loginSettings: {
    mfaLevel: 'none',
  },
  adapterSettings: {
    uxMode: 'redirect',
  },
};

const init = useCallback(async () => {
    try {
      const web3auth = new Web3Auth(web3AuthOptions);
      const openLoginAdapter = new OpenloginAdapter(openLoginSettings);
      web3auth.configureAdapter(openLoginAdapter);

      const walletServicesPlugin = new WalletServicesPlugin();
      setWalletServicesPlugin(walletServicesPlugin);
      web3auth.addPlugin(walletServicesPlugin);

      setWeb3Auth(web3auth);

      await web3auth.initModal();
    } catch (error) {
      // eslint-disable-next-line no-console
      console.error(error);
    }
  }, []);

  useEffect(() => {
    init();
  }, []);

  const connectWalletServices = useCallback(async () => {
    if (!walletServicesPlugin) return;

    await walletServicesPlugin.showCheckout();
  }, [walletServicesPlugin]);
4

Sorry to hear that. Let try some test, so we can find the issue.

Did you try our example directly with your ClientId and setup ?

Also would you mind trying with the same packages as the example?

"@web3auth/base": "^8.0.0",
"@web3auth/coinbase-adapter": "^8.0.1",
"@web3auth/default-evm-adapter": "^8.0.1",
"@web3auth/ethereum-provider": "^8.0.1",
"@web3auth/metamask-adapter": "^8.0.1",
"@web3auth/modal": "^8.0.1",
"@web3auth/torus-evm-adapter": "^8.0.1",
"@web3auth/wallet-connect-v2-adapter": "^8.0.1",
"@web3auth/wallet-services-plugin": "^8.0.1",
5

Hello! We are also experiencing the same issue. We tried downloading and testing the modal example, which had the same problem: “Web3Auth is not connected.” However, after importing Adapters into the modal example, the issue was fixed. But when we tried to do the same in our project, it didn’t work.

I’m wondering, are adapters required to implement the wallet services plugin?

Thanks!

6

Yes, I am trying with my clientId. I tried connecting both cyan and testnet.
The core functions work fine, only the wallet services is not working.

I tried installing all the packages you listed at the exact versions but the error persisted.

The console is pointing the error to this code, line 132
image

Could it be because we are not using the initWithWeb3Auth method? The problem is that initWithWeb3Auth uses Web3AuthNoModal as an argument, but we are using Web3AuthModal

7

Hi @artur,

I hope you’re doing well. Could you please create a separate post detailing your problem along with your code snippets? This will allow me to provide more targeted assistance and help you solve it effectively. (try using the package 8.0.1 as the example in github or 8.3)
Looking forward to assisting you further!

8

Hi @kewyn.comercial,

I’ve just checked our example on GitHub, and the wallet service seems to be working fine. If you’re using Mumbai, please switch to Amoy in this case.

Let me know if you need any further assistance!

9

I tried running the example and got the same error. Maybe it’s be the Node.js version. I’m using version v18.17.0

10

hi @artur

Did you try with our v8.3.0 version of the package?

Could you try and come back to me ?

Thanks a lot.

11

We tried that version. Same error. The example has the same error. We just can’t get the plugin to work whatsoever. We have no idea what is happening.

12

Hi @artur and @kewyn.comercial,

The product team has identified the issue and is currently working to resolve it as quickly as possible. I’ll keep you updated as soon as we have a fix in place. Thank you both for your patience and understanding throughout this process.

1 Like
13

i got it running by adding this check, code example comes from the docs.

if (web3AuthInstance?.status !== ‘not_ready’) { // check for ready status first
const walletServicesPlugin = new WalletServicesPlugin();
web3AuthInstance.addPlugin(walletServicesPlugin); // Add the plugin to web3auth

// Show the wallet services plugin
await walletServicesPlugin.showWalletUi();

// Show the wallet connect scanner
await walletServicesPlugin.showWalletConnectScanner();

// Show the checkout
await walletServicesPlugin.showCheckout();
}

14

Do you have a time estimate for the fix?

15

hi @kewyn.comercial

Let me try to give you a precise answer as soon as possible.

Thanks for the pacience.

16

Do you have any news?

17

sorry, not news yet.