web3-onboard
web3-onboard copied to clipboard
blocknative
[Feature]: Detachable UI or Replace Current UI
Is your request related to a problem?
No response
Feature Description
Let's say I have vue project and I want to add connect wallet to the project. Currently I use web3-onboard as it is with the OnBoard UI I can customise the UI with custom colors, language and texts. This solves technical problem to have connect wallet in my project and be able to maintain wallet state and other functionality that web3 needs. The problem is I cannot have totally new UI as far as I know, and why do I need new UI. Because every UI of project has their own Layout and Unique feels to it. I think there should be an API which do not ship with UI but has everything that UI needs.
Alternative Solutions
No response
Anything else?
No response
Hi @itsmnthn @YugasVasyl we've been discussing this internally. While it seems nice to think developers might choose to create their own UI for wallet connection, they would need to create additional custom UIs for hardware wallets. web3-onboard is the UI for hardware wallets like ledger, keepkey. Have you considered this? Would you prefer to have a detachable UI without hardware wallet support like other solutions out there?
Would love to hear more to inform our perspective on this
@techgangboss thanks for your response. As far as I know it's already possible to create a custom wallet UI, thanks. About your question - probably not all users need to support hardware wallet, but ideally, it will be cool to have the functionality to create custom UI with hardware wallet support, if that's possible. If it doesn't - then it's up to the developer to use your implementation or build one without hardware wallet support.
@YugasVasyl hi man, you mention As far as I know it's already possible to create a custom wallet UI, but where is this placed in the documentation? or you mean that it can be done with other libraries (not web3-onboard)?
@CastilloLuis I'm not quite sure, because my team worked on it some time ago, but from code I see, that you can build your own UI, and when user selects some of providers, do something like this:
this.w3sWalletConnectService.connectWallet(providerId).subscribe();
where providerId is "MetaMask", "WalletConnect", etc.
it was found inside onboard code, not sure if it's anywhere inside documentation. Remember that you need to handle missing Metamask extension but your own code, plus any potential issues with connecting to providers.
Sometimes custom UI simply means the custom designs of the models used in the flow(without changing the flow or handling it by yourself) which you can always customize by injecting custom CSS files/code to the onboard-v2 #shadow-root
of course, this has its limitation but it mostly works with few compromises which are negligible
