Wallet-services-plugin functions unavailable in web3auth (showWalletUi is not a function) - PnP web SDK v. 10

Help - Plug n Play PnP Web SDKs
1

After I successfully migrated to v.10, I tried to implement the wallet modal UI in my dApp, so I followed the instructions from Migrating to the Web3Auth PnP Web SDK v10 | Documentation | Web3Auth

Unfortunately, when I try to execute web3auth.showWalletUi, I get an error Uncaught (in promise) TypeError: web3auth.showWalletUi is not a function. Other functions like showCheckout are also not present in a Web3Auth class unstance. Code Below. It’s a Vue app, but I’m using the basic JS setup:

<script setup lang="ts">
import {
  Web3Auth,
  WEB3AUTH_NETWORK,
  WALLET_CONNECTORS,
  MFA_LEVELS,
  CONFIRMATION_STRATEGY,
  BUTTON_POSITION,
} from '@web3auth/modal';

  const provider = ref<IProvider | null>(null);
  const loggedInCrypto = computed(() => !!provider.value);
  const clientId = import.meta.env.VITE_WEB3AUTH_ID;

  const web3auth = new Web3Auth({
    clientId: clientId, // Get your Client ID from Web3Auth Dashboard
    web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET, // or WEB3AUTH_NETWORK.SAPPHIRE_MAINNET

    modalConfig: {
      connectors: {
        [WALLET_CONNECTORS.AUTH]: {
          label: 'auth',
          loginMethods: {
            google: {
              name: 'google login',
              showOnModal: true,
              // logoDark: "url to your custom logo which will shown in dark mode",
            },
            email_passwordless: {
              name: 'email passwordless login',
              showOnModal: true,
              authConnectionId: 'prop-test-email',
            },
          },
          showOnModal: true, // set to false to hide all social login methods
        },
      },
      hideWalletDiscovery: false, // set to true to hide external wallets discovery
    },
    mfaLevel: MFA_LEVELS.MANDATORY,
  });

  async function init() {
    try {
      await web3auth.init();
    } catch (error) {
      console.error(error);
    }
    if (web3auth.connected) {
      provider.value = web3auth.provider;
    }
  }

  async function login() {
    if (loggedInCrypto.value) {
      console.log('already connected to crypto');
      return;
    }
    const res = await web3auth.connect();
    console.log('connected to crypto');
    provider.value = res;
    return;
  }
  async function toggleWalletUi(val) {
    console.log(web3auth);
    await web3auth.showWalletUi({
      show: val,
    });
  }
  onMounted(async () => {
    await init();
    await login();

})
</script>
<template>
  <BaseButton @click="toggleWalletUi(true)"></BaseButton>
</template>
2

Thanks for sharing the detailed context and code snippet, Глеб! Here’s a summary of your issue for the support team:

Issue Summary

  • SDK: Web3Auth Plug and Play (PnP) Web SDK
  • SDK Version: v10
  • Platform: Vue (with basic JS setup)
  • Issue:
    • After migrating to v10, functions like showWalletUi and showCheckout are not available on the Web3Auth instance.
    • Error:
      Uncaught (in promise) TypeError: web3auth.showWalletUi is not a function
  • Reference: Followed wallet-services-plugin integration guide
  • Code: Provided (see above)

Initial Analysis & Suggestions

1. Plugin Installation Required

In v10, wallet UI features are moved to a plugin. You need to install and register the WalletServicesPlugin with your Web3Auth instance. The showWalletUi method is exposed by this plugin, not directly on the Web3Auth class.

2. Migration Guide Reference

From the migration guide:

The wallet UI and related features have been moved to a plugin. You must install the plugin and add it to your Web3Auth instance.

3. Example Fix

Install the plugin:

npm install @web3auth/wallet-services-plugin

Update your code:

import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";

// ... your existing imports and setup

const web3auth = new Web3Auth({ /* ...your config */ });

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

// Now you can use:
await walletServicesPlugin.showWalletUi({ show: true });

Note: showWalletUi is a method of the plugin, not the web3auth instance.

4. Docs Reference

Next Steps

  • Please update your code to use the WalletServicesPlugin as described above.
  • If you still face issues, please share:
    • Any new error messages
    • How you are importing and initializing the plugin

Let us know if this helps or if you need further assistance!

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. Web3Auth Developer Office Hours

3

This bot is hallucinating and the link he has provided contains the text which is quite the opposite to he’s suggesting. Actually, the link says:

In v10, this integration is significantly streamlined:

  • The @web3auth/wallet-services-plugin package is deprecated and should be removed.
  • Wallet Services functions are now directly available as methods on the web3auth SDK instance itself.