Mobile dapp / web3 wallet integration

Anvil Q&A
1

What I’m trying to do:
I’m trying to create a dapp using Anvil, but I’m having a hard time making it work on mobile. Could anyone point me in the right direction?

What I’ve tried and what’s not working:
I’ve tried using ethers, but window.ethereum does not exist on mobile.
Then I started looking into web3modal and walletconnect.

The web3modal approach is the closest I’ve gotten so far: it works on desktop, but opens a gray modal seemingly without content on mobile. When the clicking anywhere in the modal, I get the following error: InternalError: Modal closed by user. (see clone link below)

@stucork Any idea what I’m doing wrong / what else I could try? I’ve searched around the forum but did not find a working solution to connect to a crypto wallet that works both on desktops as on mobile.

@joinlook and @owen.campbell Tagging both of you since by the looks of it you have experimented quite a bit with dapps on Anvil. Any chance you guys could put me on the right track?

Clone link:
share a copy of your app

2

@meredydd Do you have an idea? Been trying to get this working for days, but I just can’t seem to get there. Anyone on the team has any experience with wallet integrations?

3

Hey I just saw this. Did yoj get it situated?

5

@jeremy.deceuster this is the one that most dapps are tending towards @web3-onboard/core

You’ll need to use a cdn to get it into your app @hnipps/web3-onboard-core CDN by jsDelivr - A CDN for npm and GitHub

but you’re on the right track, avoid using ethers and go for one of the pre-built modals that will give you all the functionality

1 Like
6

Thanks James, I’ll give that one a go sometime! You got it working in anvil? I eventually gave up and built what I needed using React.

7

Hey, no I ended up using React instead. You managed to get it to work in anvil?

8

@james.campbell and I threw together a quick demo of onboard working in anvil…

9

This works indeed, many thanks! I noticed disconnecting all wallets throws an error though, but that’s not that big of a deal.

EDIT: @owen.campbell does it work on mobile for you? Forgot to test it earlier but it doesn’t seem to work.

10

It’s a quick crude demo. Nothing more!

1 Like
11

Yes I have a wallet connect component I import into all of my dapps. I can share this

1 Like
12

here is mypost with a clone link:

1 Like
14

Awesome, thank you so much for sharing!

Works like a charm on desktop, but I can’t seem to connect on mobile (it opens metamask, but the prompt to connect never shows up). Any idea what could cause this?

1 Like
15

No idea! Which browser? Which os?

16

Chrome on android. It opens metamask, after I auth with my finger it shows a message “connecting to metamask” but after that nothing happens. Tried altering some UI elements on the “connect” event (since I can’t access the dev console on mobile) but the event is never triggered.

18

Out of interest, does the taco demo work for you?

That uses the same onboard lib but a newer version.

19

Sorry which demo is that? I’ll give it a try

20
21

No, this is what I get when trying to encrypt.

1000030856
10000308561080×2400 90.9 KB

22

OK. That gives me something to go on. No idea just yet but I’ll what I can find…

1 Like
23

Which wallet app are you using?