search

reown-com / appkit

The full stack toolkit to build onchain app UX
https://reown.com/appkit
Apache License 2.0
4.88k stars 1.37k forks source link

@web3modal/react : QR code is not working #750

Closed ZeeshanAhmadKhalil closed 1 year ago

ZeeshanAhmadKhalil commented 1 year ago

Describe the bug I am trying to scan the QR code provided by @web3modal/react using the example wallet. But it's not scanning the QR code.

However when I enter wc: it works fine.

SDK Version "wagmi": "^0.8.10" "@web3modal/react": "^2.0.0-beta.7" "@web3modal/ethereum": "^2.0.0-beta.7"

To Reproduce Steps to reproduce the behavior:

  1. Create a next js app
  2. install pages and setup the app following the doc
  3. goto example wallet and scan the QR code

Expected behavior Should scan the QR code

Desktop:

Smartphone:

xzilja commented 1 year ago

Combination of packages that you provided uses both sign v2 sdk (@walletconnect/sign-client) and sign v1 in @web3modal/ethereum.

You also have 2 versions of the modal v1 and v2.

Could you expand on your use case and why are using all those packages? If you need to support v1/v2 of sign sdk, you can use web3modal in standalone mode https://docs.walletconnect.com/2.0/web3modal/standalone/installation

ZeeshanAhmadKhalil commented 1 year ago

@0xAsimetriq I have created the application using standalone and installed the following packages:

@walletconnect/qrcode-modal": "^1.8.0 @walletconnect/sign-client": "^2.1.4

but now I have removed them from my application and currently using V2 and following the react doc.

Still, I am unable to scan the QR code with the example wallet.

I have just used the open() of useWeb3Modal(). And working on further implementation.

xzilja commented 1 year ago

html and react documentation currently use WalletConnect v1 under the hood. They also don't require @walletconnect/sign-client which is for WalletConnect v2.

If you want to use @walletconnect/sign-client you need to follow this guide https://docs.walletconnect.com/2.0/web3modal/standalone/installation

It shows how to use web3modal in standalone mode (just ui, just walletconnect with no metamask etc...). We are currently working on supporting WalletConnect v2 in our managed react and html packages.

Let me know if you have further questions on this, but breakdown of the packages is like this

  1. react / html - Fully managed web3modal experience, uses wagmi, WalletConnect v1, also manages injected walllets etc..
  2. standalone - Just ui of web3modal with only walletconnect specific connectors. You need to pass connection uri here yourself, hence why @walletconnect/sign-client is needed or alternatively @walletconnect/client if you want to use WalletConnect v2.

All of this should become much easier once we deprecate v1 😅

If you can share a github link to your project I could have a look and give further feedback.

ZeeshanAhmadKhalil commented 1 year ago

https://github.com/ZeeshanAhmadKhalil/nftdd-wallet

xzilja commented 1 year ago

So, what I see in the repo and questions asked here seem to be mixed up.

In the repo you have these dependencies

    "@walletconnect/qrcode-modal": "^1.8.0", (Web3Modal v1)
    "@walletconnect/sign-client": "^2.1.4", (WalletConnect v2)

This is fine, as you can also use v1 modal to show qr code from v2 conenction, but in your question you are making references to wagmi (it uses WalletConnect V1) and useWeb3Modal hook from react documentation for Web3Modal v2.

What is your end goal here?

  1. Do you want to use WalletConnect v1 or v2?
  2. Do you want to use Web3Modal v1 or V2?
ZeeshanAhmadKhalil commented 1 year ago

https://github.com/ZeeshanAhmadKhalil/nftdd-wallet

This is a production repo. I have removed the following standalone packages from the dev repo and will sync the changes once get it running.

@walletconnect/qrcode-modal": "^1.8.0 @walletconnect/sign-client": "^2.1.4

I just want to connect my wallet (later loopring wallet) with the web app so I can transfer Ethereum to other users from the connected wallet.

Later we will me the monthly transactions automated.

ZeeshanAhmadKhalil commented 1 year ago

looks like I have to look at wagmi in detail.

xzilja commented 1 year ago

I see, ty for the info, basically

  1. If you want to continue using qrcode-modal package and wagmi, you can do so easilly, it is supported out of the box, just follow https://wagmi.sh

  2. If you want to use new web3modal and I assume you are using react, just follow https://docs.walletconnect.com/2.0/web3modal/react/installation

You don't need @walletconnect/sign-client at the moment I think. And it will be supported in wagmi soon as well.