A simple example on how to get WalletConnect to authenticate wallets in the Expo Go app.

Overview

WalletConnect Example on Expo

This is a simple example how to get WalletConnect up and running with Expo for React Native.

WalletConnect's dependency on Node's crypto package

WalletConnect uses node's built-in crypto package which is not available on iOS or Android. In order to work around this we can use metro.config.js to create aliases for different packages, this idea is from here. This will allow us to use WalletConnect directly from the expo client without having to eject the application.

Getting Started

Please go ahead and install the packages via yarn install, then, run yarn start or expo start. Once the build is complete and opened in the Expo Go app, connect your wallet by pressing the Connect a wallet button.

alt text

Comments
  • Web version is keep refreshing

    Web version is keep refreshing

    The web version is keep refreshing, you can reproduce this by starting expo with 'yarn start' and in the expo developer tools click 'Open in web browser'

    opened by bdhcode 6
  • WalletConnect Popup for selecting Wallets is not working

    WalletConnect Popup for selecting Wallets is not working

    Hi @clxyder, Thanks for this source code.

    I have cloned your repo and tried to run it as instructed in README.md. But when I tap on "Connect to Wallet" CTA, it takes me to the browser instead of showing WalletConnect Popup for selecting Wallets. Attaching a reference video. Note: I have Metamask And Rainbow wallets installed on the mobile. And Didn't change anything in the code.

    Am I missing anything? Please help me here.

    https://user-images.githubusercontent.com/100852255/171848326-d6eefab0-2a26-4265-b446-c968400684b5.mp4

    opened by anandparmar-quark 3
  • Error: Cannot find module 'url/'

    Error: Cannot find module 'url/'

    any suggestions what this error is about?

    I notice there's a require like this in your metro config, but not sure what this syntax means:

    const url = require.resolve('url/');

    opened by dcsan 1
  • Android devices give 404 not found error when click on connect wallet button

    Android devices give 404 not found error when click on connect wallet button

    @clxyder it works on ios when I connect with qr code but when I try to run with android simulator on my windows pc or qr code with my android device then click to connect wallet button browser opens and give 404 not found error.

    These are on android simulator

    image image

    These are on my android device

    image

    These are on my ios device

    image image image image image

    as you can see it works fine with ios but not working with android where am I mistaking ? I cloned the repo changed nothing.

    opened by safakyavsan 1
  • connector.connect is not a function

    connector.connect is not a function

    After the use of connector = useWalletConnect(), when connector.connect() is called it shows this error message. It worked once with node14 but stopped working after. Please help

    opened by PhalakshaCG 2
  • help me

    help me

    [Unhandled promise rejection: Error: Mobile registry not yet ready.] at http://192.168.101.241:19000/index.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:161817:37 in connect$ at node_modules/@walletconnect/react-native-dapp/dist/providers/WalletConnectProvider.js:192:29 in Object.assign$argument_1.connect at screens/TabOneScreen.tsx:20:24 in TabOneScreen at node_modules/react-native/Libraries/Pressability/Pressability.js:697:17 in _performTransitionSideEffects at node_modules/react-native/Libraries/Pressability/Pressability.js:634:6 in _receiveSignal at node_modules/react-native/Libraries/Pressability/Pressability.js:528:8 in responderEventHandlers.onResponderRelease

    opened by PigCharid 1
  • ImageBackground component won't render

    ImageBackground component won't render

    The ImageBackground component does not work with this setup. I keep getting this error in Expo Go but I don’t see the corresponding file ImageBackground.js to inspect/fix.

    187077149-12069f23-a33d-434e-a7f4-84411e1af6d6 .

    opened by akistem 1
  • not work useWalletConnect

    not work useWalletConnect

    In my project doesn't work useWalletConnect() useWalletConnect() only return Object{connected}; modules versions are all the same. why? Please help me.

    スクリーンショット 2022-07-23 18 06 23
    opened by raimirarara 0
  • Thank you! Question about @walletconnect/web3-provider

    Thank you! Question about @walletconnect/web3-provider

    First, thanks so much for putting this out! Super, super helpful.

    I added @walletconnect/web3-provider to do ENS name resolution and everything kinda fell apart. Started getting that

    The provided value 'moz-chunked-arraybuffer' is not a valid 'responseType'.

    error.

    Maybe withWalletConnect and @walletconnect/web3-provider don't play nicely together? Any thoughts on how to get a provider within the framework you designed?

    opened by shawnmitchell 1
  • Require new feature of Moralis provider

    Require new feature of Moralis provider

    Firstly I would like to thank you for this contribution by which I got inspired to have the walletconnect work. In addition to it, I would like to extend the feature with moralis solution, I understand that Moralis team has official react-native boilerplate but it requires react-native-cli with bare bone project, which is not what I want to implement. I would like to implement it with expo go as you have done this example with walletconnect. However, it turns out that several issues occur while tyring to bring in moralis library.See here.

    I am wondering if you have already got around it (moralis + expo go). If yes, it will be appreciated if you could share some hints with me so that I can contribute to this project.

    opened by happyeric77 3
Owner
Carlos A. Wong
Carlos A. Wong
Expo Config Plugin that generates an App Clip for iOS apps built with Expo.

react-native-app-clip Expo Config Plugin that generates an App Clip for iOS apps built with Expo. Warning This plugin is a work in progress and hasn’t

Benedikt 186 Dec 24, 2022
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
A lite version for the my original app loki stream which allowed watching anime on your phone. Made using expo.

LokiStream Lite A lite version for the my original app loki stream. This app is faster, smaller and more optimized for your phone. It allows you to wa

Lavish Kumar 18 Dec 24, 2022
Boilerplate to build Cross-Platform Apps with Expo and React Native

Expo and React Native Boilerplate Boilerplate to build Cross-Platform Apps with Expo and React Native What are you going to find in this boilerplate E

José Ferrer 26 Apr 29, 2022
React Native & Expo music player application UI

Would you like to support me? Musicont React Native & Expo music player application UI Demo: https://expo.io/@jsxclan/musicont APK: Download on Google

JSX Clan 82 Dec 14, 2022
Our Expo-based mobile application for demonstration purposes.

Capable Care reference implementation This repository provides a working example of a React Native mobile application (built on Expo) integrating Capa

Capable Health 11 Oct 1, 2022
Tamagui with Supabase, Expo, Next.js, Solito and Jotai

Tamagui + Supabase + Solito + Next + Expo Monorepo ⚡️ Instant clone & deploy ?? About This monorepo is a starter todo app, built using Supabase + Expo

Lachlan Hawthorne 15 Dec 12, 2022
Convert a CSS linear gradient function to expo-linear-gradient props

@bacons/css-to-expo-linear-gradient Demo: snack Convert a CSS linear gradient function to expo-linear-gradient props. Add the package to your npm depe

Evan Bacon 15 Dec 15, 2022
An easy hook to use with expo-calendar library!

useCalendar Hook ?? Updated to Expo SDK45 This is an easy hook to use expo-calendar. It allows you: Get access permission to calendar Open settings to

AtilaDev 12 Nov 1, 2022
Expo Demo: Screen Capture with Managed Workflow

Expo Demo: Screen Capture with Managed Workflow This code demonstrates how to setup screen capture on an Expo app, without having to eject from the ma

Luis Taniça 12 Dec 30, 2022
A new renovated version of Directory to search @expo-google-fonts

Directory | AtilaDev Directory is an easy & quick search to find google fonts using @expo-google-fonts for your React Native App. Usage Press / key to

Leandro Favre 2 Oct 5, 2022
React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in

A comprehensive starter kit for rapid application development using React. Why Slingshot? One command to get started - Type npm start to start develop

Cory House 9.8k Dec 22, 2022
An example of a fast food ordering app with Ionic React

ionic-fast-food-app An example of a Food Ordering app in Ionic React Included in this Ionic React Template/UI Data fetching from JSON files Global sta

Alan Montgomery 25 Nov 28, 2022
An example of a travel style app built with Ionic React

ionic-react-travel-app An example of a travel style app built with Ionic React If you'd like to support, you can buy me a coffee ☕️ Included in this I

Alan Montgomery 29 Sep 27, 2022
Example "Mushroom App" used as a p2panda tutorial

mushroom-app-tutorial This is an example app accompanying the p2panda tutorial "Let's build a mushroom app!" with TypeScript, Webpack and React. Usage

null 3 Nov 4, 2022
Next.js + Prisma + Supabase simple Blog example

Next.js + Prisma + Supabase Blog Project About the Project Prisma connects the PostgreSQL Database provided by Supabase by using postgres connection s

Soham Shah 4 Nov 19, 2022
Redux-Toolkit example with React Hooks CRUD Application, Axios, Rest API, Bootstrap

Redux-Toolkit CRUD example with React Hooks, Axios & Web API Build Redux-Toolkit CRUD application with React Hooks and Rest API calls in that: Each it

null 69 Dec 27, 2022
Example project using Miniflare, esbuild and AVA

Miniflare Example Project This is an example Cloudflare Workers project that uses Miniflare for local development, esbuild for bundling, and AVA for t

MrBBot 13 Dec 3, 2022
This example represents SCORM-compliant question set (aka quiz)

HTML&JS SCORM 2004 Compliant Quiz This example represents SCORM-compliant question set (aka quiz) and was made with Bootstrap 5 and Vanilla JS. You ma

null 1 Dec 25, 2021