- SDK Version: 8.0.0
- Platform: Web - Nuxt 3 - Vue 3 - Vite
- Browser Console Screenshots: Doesn’t apply
Also, kindly provide the Web3Auth initialization and login code snippet below. This will help us better understand your issue and provide you with the necessary assistance.
Hello, we’ve implemented web3auth into our app through a webview and we are using the WalletServicesPlugin to display the walletUI using showWalletUi().
We’ve set up Ethereum chain with Ankr, but in the walletUI we can see more chains that we have not set up.
We can also see that the user can select testnet chains when the project has a mainnet set up.
We would like to add more chains to the walletUI, but we hadn’t found any documentation about it. Is it possible to do it using the walletUI?
Here is my web3auth set up and how we login and invoke the user’s walletUI.
const {Web3AuthNoModal} = await import('@web3auth/no-modal')
const chainConfig = {
chainId: runtimeConfig.public.CHAIN_ID,
rpcTarget: <string>runtimeConfig.public.ETH_RCP_TARGET,
chainNamespace: CHAIN_NAMESPACES.EIP155,
displayName: runtimeConfig.public.DISPLAY_NAME,
blockExplorer: runtimeConfig.public.BLOCK_EXPLORER,
ticker: "ETH",
tickerName: "Ethereum",
}
const privateKeyProvider = new EthereumPrivateKeyProvider({config: {chainConfig}});
const lang: LANGUAGE_TYPE = <LANGUAGE_TYPE>route.query.lang?.toString() || 'en'
const web3auth = new Web3AuthNoModal({
clientId: runtimeConfig.public.CLIENT_ID,
web3AuthNetwork: <OPENLOGIN_NETWORK_TYPE>runtimeConfig.public.WEB3AUTH_NETWORK,
privateKeyProvider,
uiConfig: {
appName: 'App',
logoLight: "https://app-s3-bucket-1.s3.eu-central-1.amazonaws.com/app-logos/app-logo.png",
logoDark: "https://app-s3-bucket-1.s3.eu-central-1.amazonaws.com/app-logos/app-logo.png",
mode: "dark",
defaultLanguage: lang,
theme: {
primary: '#400A84',
onPrimary: '#ffffff'
}
}
})
const verifier: string = route.query.verifier?.toString() || <string>runtimeConfig.public.DEFAULT_VERIFIER
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
network: <OPENLOGIN_NETWORK_TYPE>runtimeConfig.public.WEB3AUTH_NETWORK, // Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
uxMode: UX_MODE.REDIRECT,
loginConfig: {
jwt: {
verifier,
typeOfLogin: "jwt",
clientId: runtimeConfig.public.CLIENT_ID
},
},
},
});
web3auth.configureAdapter(openloginAdapter);
const walletServicesPlugin = new WalletServicesPlugin()
web3auth.addPlugin(walletServicesPlugin)
await web3auth.init();
async function invokeWeb3AuthFlow(token: string) {
await login(token)
await loadWalletUI()
}
async function login(token: string) {
if ($web3auth.connected) return
return await $web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
loginProvider: 'jwt',
extraLoginOptions: {
id_token: token,
verifierIdField: "sub",
},
}).catch((e: WalletLoginError) => console.error(e))
}
async function loadWalletUI() {
return await $walletServicesPlugin.showWalletUi()
.catch(e => console.error(e))
}
Thanks for your time :).