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>
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.
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.
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
Hey @glebstrunnikov
There have been many changes with v10 and the bot hasn’t been trained on the new data, Apologies for the confusion.
The snippet you’re seeing is good for JS(non-Vue, non-React, meant for vanilla JS or Angular). But I would suggest you to go through the docs for Vue composables here.
I will take this as a constructive suggestion to highlight that these snippets were meant for JS and not for Vue or React.
Thank you for pointing it.
Excuse me, I’m not sure I follow your explanation. Vue is a JS framework, and all the code executed in the section must be valid javascript. Also, the libs I’m importing in Vue are the same libs that I would have used in vanilla, and an imported class doesn’t somehow gain or lose some properties depending on the context it’s being imported in. So if I use the same code in a pure JS file, it will give me the same error. Correct me if I’m wrong here, but that’s pbly a matter of the new version lib bug
Hey @glebstrunnikov,
I assumed you were following the Vue composables path to integrate Web3Auth, sorry for the misunderstanding!
Here’s a pure JS example where I’ve added Wallet Services to the Angular quick-start, it uses the JS integration directly.
I’m sure adapting this into your Vue setup will be a breeze
Appreciate you pointing this out, I’ll make sure we update the docs accordingly.