Best Practice/Recommendation for customization of Wallet Connection Modal

[marc0olo]

Hey,

we plan to make use of Wharf in our application. Without having had a deeper look into the SessionKit, Wallet Plugins and the WebRenderer, I would like to ask what you'd recommend if we "just" want to apply some customized CSS to the Wallet Connection Modal.

Would you recommend to create a custom WebRenderer or do you think this can easily be handled via CSS only while still making use of the default WebRenderer?

Note: I am not the UI dev and I hate doing CSS, the work will actually done by somebody else 😅

Marco

[Wapaca]

If you want to keep your own dialog and don't want to dig deep into the webrender you can do sessionKit.login({ walletPlugin: ‘cloudwallet’ }) or sessionKit.login({ walletPlugin: ‘anchor’ }) to trigger the wallet connection.

Then for other dialogs that opens during transactions you can hide them with new WebRenderer({ minimal: true }) in this case you will need to handle error/success displaying yourself.

[aaroncox]

The web renderer itself is sandboxed intentionally to try and prevent the webapps CSS from bleeding unintentionally into it, so it might be hard to just apply CSS to it to style it how you want.

Being able to intentionally add CSS is something we've talked about - but is not implemented.

Actually building your own web renderer would be somewhat challenging. It would need to handle all the conditional logic that all the wallets require for their different functionality too.

What @Wapaca recommended though is probably the easiest approach. Instead of triggering the generic login, build your own "wallet chooser" and then trigger the wallet directly. That'll bypass most of the UI from Wharf, though when transacting you'll still get the defaults.

[Wapaca]

I just tried to override the css but i'm not really familiar with shadow dom and i'll stop losing time searching.

Is there a nasty way to bring your own css while the proper way is not done yet ?

It's the last missing piece for me to be able to push wharfkit on prod.

[aaroncox]

Ummm, I'm honestly not sure without doing research either 😅

You might have to use JS to inject CSS into the shadow-dom.

Also I wish notifications were better on these boards... I often just accidentally stumble into responses here after way too much time has passed!