(react-native-dapp) Unable to connect to wallet

[koredefashokun]

I installed the @walletconnect/react-native-dapp package, but on calling the connect() function, I get this error:

TypeError: undefined is not an object (evaluating 'this._qrcodeModal').

I'm running the app on a physical Android device. The code for the app is available here: https://github.com/overthq/Quiz. I call the connect function here.

[pedrouid]

Hey @cawfree, could you help out here?

[cawfree]

Sure, I’ll take a look now 🙏

On Tue, 6 Apr 2021 at 13:43, Pedro Gomes @.***> wrote:

Hey @cawfree https://github.com/cawfree, could you help out here?

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/WalletConnect/walletconnect-monorepo/issues/470#issuecomment-814089261, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB4OFHMJJI33YIU7C5HWU3LTHL6XJANCNFSM42OE3BYA .

[cawfree]

Unable to replicate against @walletconnect/react-native-dapp:1.4.1 using npx create-react-native-dapp on Android, which leads me to think it's something specific with the project configuration.

@koredefashokun Thanks for raising this issue! Is there any possibility you could send over the complete stack trace? In the mean time, I'll try to pull down your repo (thanks so much for providing it to us) and take a look around.

[cawfree]

Think I've figured it out. The invocation interface for connect is here.

In your application, you'll see that you're using onPress={connect}, which is equivalent to writing:

onPress={(e: GestureHandlerEvent) => connect(e)}

Since a GestureHandlerEvent is not a type of ICreateSessionOptions, I think this might be causing some interesting behaviour!

Can you try replacing your invocation with:

onPress={() => connect()}

[koredefashokun]

Hey @cawfree. Thanks so much for your help (especially pulling the repo). I tried your suggestion, and it seems it might not be the issue. Here's what the stack trace looks like (not sure if it exposes a whole lot, as it doesn't point to any files in the @walletconnect/react-native-dapp package). I'm starting to think it might be an error in my implementation.

TypeError: undefined is not an object (evaluating 'this._qrcodeModal')
_callee3$@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:159616:27
tryCatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25032:23
invoke@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25205:32
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:158846:75
tryCallTwo@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:27123:9
doResolve@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:27287:25
Promise@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:27146:14
__awaiter@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:158825:38
onPress@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:215652:23
_performTransitionSideEffects@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:55625:22
_receiveSignal@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:55567:45
onResponderRelease@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:55476:34
invokeGuardedCallbackImpl@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:9234:21
invokeGuardedCallback@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:9328:42
invokeGuardedCallbackAndCatchFirstError@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:9332:36
executeDispatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:9404:48
executeDispatchesInOrder@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:9424:26
executeDispatchesAndRelease@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:10499:35
forEach@[native code]
forEachAccumulated@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:9566:22
runEventsInBatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:10523:27
runExtractedPluginEventsInBatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:10602:25
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:10578:42
batchedUpdates$1@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:21227:20
batchedUpdates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:10485:36
_receiveRootNodeIDEvent@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:10577:23
receiveTouches@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:10630:34
__callFunction@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2794:36
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2526:31
__guard@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2748:15
callFunctionReturnFlushedQueue@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2525:21
callFunctionReturnFlushedQueue@[native code]

By the way, this has been my best experience reporting an issue with any package (especially in the React Native community)!

[cawfree]

@koredefashokun Shoot, really thought I had it! No worries, I'm going to try and spin up your application here and see if I can replicate. Many thanks for your patience! 🙏

Thanks a lot! 😍

[cawfree]

@koredefashokun We're back. 👍

https://user-images.githubusercontent.com/7922333/113791590-ebcedf00-973b-11eb-9f0a-b5b024043891.mov

Looks like there's a bug shipped with this release. Many thanks for spotting! I'm going to submit a PR to resolve this issue, and in the mean time you can use patch-package to resolve the problem:

1. Head into node_modules/@walletconnect/react-native-dapp/providers/WalletConnectProvider.js
2. Replace line 180 if (connector && visible) with if (connector) and save your changes to the file.
3. Run npx patch-package @walletconnect/react-native-dapp.
4. Add npx patch-package to your postinstall step i.e. "postinstall": "node_modules/.bin/ts-node scripts/postinstall && npx patch-package"

This will persist the fix until the feature is merged.

[cawfree]

https://github.com/WalletConnect/walletconnect-monorepo/pull/471

[koredefashokun]

Great! Thanks so much.