How To Use Flow Wallet Mobile App as a "Popup"?

Hello to everyone here!
My name is Nazar, and I am a software engineer who recently started to use Flow, and Flow wallet in particular. And I need your expertise, please.

The testnet version of what I’m trying to do is hosted on firebase here (sorry, wasn’t able to give a link since as a beginner here I have a limit of 2 links).
The code to it is here (GitHub - uandere/challenge_bot_frontend).

It is a 3-buttons form:

  • Log in: signs in current user using wallet discovery
  • Log out: unauthenticates current user
  • Send Transaction!: Sends the simplest “HelloWorld” transaction (which costs 0) onto Flow testnet network.

The problem is: that I tried to use Wallet Discovery as well as WalletConnect(Reown) project id in order to add all available wallet providers, and it “kind of” not working on mobile (I’ll insert the screen recording below). By “kind of” not working, I mean that the wanted behaviour is:

  1. I click on “Log in” → Open in Flow Wallet
  2. It opens the App, but in form of a “popup”, so that after I Approve myself, it returns me to the website
  3. I click on “Send Transaction!”
  4. It again opens the App, but again in form of a “popup”, so that after I signed the transaction, I am redirected back to the website and can see corresponding transaction id and status.

Instead, here what happens (the screen recording from phone):

Don’t pay attention to the fact that transaction failed - what I really need is a way to use the app and then be automatically redirected to the website.

What do you think - is it possible to achieve the described above behaviour? If so, what do I need to change in my code?

1 Like