Modal from external library

Hello,
I have installed a package (@web3auth/modal) that has a function to init and show a modal.
I created a simple view with hilla to call it, when I click the button to show the modal I see in the Dom a new correctly added by the library, but it does not contain anything, while it should contain more html.

Do you have any example to see this use case implemented? Thanks

Can you share your code, how you’re using it?

Hi @secure-leopard, this is the login-view:

@customElement(‘login-view’)
export class LoginView extends View {

private async showModal() {
const provider = new JsonRpcProvider(“xxx”);
const network = await provider.getNetwork();
const chainId = toQuantity(network.chainId);
const web3auth = new Web3Auth({
clientId: “xxxx”,
web3AuthNetwork: “testnet”,
chainConfig: {
chainNamespace: ADAPTER_NAMESPACES.EIP155,
chainId: chainId,
rpcTarget: “xxxx”
},
uiConfig: {
theme: “dark”,
loginMethodsOrder: [“email_passwordless”],
defaultLanguage: “en”,
loginGridCol: 3,
primaryButton: “emailLogin”
}
});
await web3auth.initModal();
}
render() {
return html <main className={"flex min-h-screen flex-col items-center justify-between p-24"}> <div> <vaadin-button theme="primary" @click=${this.showModal}>Login</vaadin-button> </div> </main> ;
}
}

And here you can see the screenshots before and after clicking the login button: in the 2nd one, the w3a-container appears but is empty, it should not

I would be curious to know why you want to use 3rd party modal instead of Dialog of Vaadin?

Just pointing here that mixing different design systems / component libraries components using z-indeces is generally not a good idea Make <vaadin-select> usable in native dialog element by allowing the overlay to attach to an element other than body · Issue #6325 · vaadin/web-components · GitHub

Hi @yummy-rhino, because the login method i want to use is provided by a js library and there isn’t any alternative

What I’m trying to accomplish is similar to https://github.com/stackup-wallet/next-web3auth-userop-example

As Hilla runs on Spring Boot, you should prefer setting up Web 3 via Spring Security

it is a possibility, but here i really need to use web3auth, as it is integrated with the stackup wallet, the service that i really need

I found the issue, my mistake. Thanks anyway!