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>