2

I'm working on a dapp, I plan to use QR Code login to the dapp using the walletconnect/qrcode-modal npm package but I couldn't found customization for popup QR using the walletconnect.

Is there a way to customise the QR Code displayed by walletconnet with our own css styles

TylerH
  • 20,799
  • 66
  • 75
  • 101
Mohanraj G
  • 85
  • 1
  • 9
  • Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. – Community Jun 18 '22 at 11:02

1 Answers1

0

So far the best solution I've found is just inspecting the classes that the QR code modal has and targeting them with CSS when they load.

You can inspect the elements with the developer tools by pressing F12 (although you might know that already).

It will be easier if you style the modal as you like and one by one copy the CSS into your project.

Update (17/7/2022): There is a library called "web3modal", which has a section about customisation. It can be useful to you.

https://github.com/web3modal/web3modal
Viktor Lazarov
  • 16
  • 2
  • I'm using tailwind css in my Next.js project. Is there a another way to customise the qr-code? – Mohanraj G Jul 14 '22 at 08:41
  • I am not familiar with Tailwind, if there is a way to style already loaded elements, then yes. Additionally the package has to inject the modal from somewhere, so you could fork it and customise it as you need: ``` https://github.com/WalletConnect/walletconnect-monorepo ``` – Viktor Lazarov Jul 14 '22 at 15:32