React Native app demonstrating using xmtp-js to send a message

Overview

XMTP React Native Example

This is a work in progress to demonstrate importing xmtp-js into a React Native app. The example currently generates a random account and sends a message to a given address. Please reference blockers for production for ongoing work and getting started to run the app.

Warning

This code should only be used experimentally as we work to remove our dependency on PeculiarVentures/webcrypto (a SubtleCrypto polyfill) as the library includes the following warning.

At this time this solution should be considered suitable for research and experimentation, further code and security review is needed before utilization in a production application.

Getting started

  1. Follow the React Native guide to set up CLI environment
  2. Clone this repo and cd example_chat_rn
  3. Edit the blockchain account address in App.tsx's sendGm() to point to the recipient's address
  4. Run npx react-native start to start Metro
  5. Run npx react-native run-ios or npx react-native run-android to run the app
  6. Press the Send a gm button once the app is running
  7. A message will arrive in the account provided in Step 3

Blockers for production

  1. Remove the SubtleCrypto dependency from xmtp-js or add a Node crypto workaround as proposed in a proof of concept PR. This will allow us to remove the PeculiarVentures/webcrypto polyfill noted in the above warning.
  2. Add authentication to the app instead of generating a random private key for a sender account in App.tsx.
  3. Nice to have: Remove unnecessary local storage dependency from xmtp-js to remove the polyfill in App.tsx.

Requirements

  • The JavaScript engine used in the React Native app must include BigInt support as it is required by xmtp-js use of paulmillr/noble-secp256k1.
    • BigInt is included in the following JS environments:
      • Hermes v0.70 for both iOS and Android (used in this example)
      • JavaScriptCore for iOS starting with iOS 14
      • V8 for Android

Polyfills

  • @azure/core-asynciterator-polyfill (necessary for Hermes only)
  • @ethersproject/shims
  • crypto-browserify
  • stream-browserify
  • events
  • process
  • react-native-get-random-values
  • text-encoding
  • web-streams-polyfill
  • @peculiar/webcrypto (necessary for SubtleCrypto but need to remove)
  • @react-native-async-storage/async-storage (necessary for global.localStorage)
Comments
  • fix: Upgrade XMTP to 7.0 and remove local storage polyfill

    fix: Upgrade XMTP to 7.0 and remove local storage polyfill

    Description

    This PR fixes an issue integrating with WalletConnect due to our use of global.localStorage as documented in https://github.com/WalletConnect/walletconnect-monorepo/issues/1658#issuecomment-1321842144.

    Since xmtp-js no longer requires global.localStorage as of version 7.0+, we can safely remove this dependency altogether in the example. Read more in the xmtp-js version 7.0 release notes.

    Test steps

    • [x] Sent a gm from iOS
    • [x] Sent a gm from Android
    opened by elisealix22 0
  • Move imports into a consolidated polyfills file

    Move imports into a consolidated polyfills file

    Move all necessary imports into a single root polyfills.js file to make it easier to understand what is required to use xmtp-js. It's worth noting crypto-browserify and stream-browserify are still polyfilled in the Metro Node overrides:

    https://github.com/xmtp/example-chat-react-native/blob/db0141e60aad28027eea10389a4a4e28230e93a2/metro.config.js#L18-L21

    opened by elisealix22 0
  • Upgrade to WalletConnect v2

    Upgrade to WalletConnect v2

    WalletConnect v1 is sunsetting March 1, 2023 https://medium.com/walletconnect/walletconnect-v1-0-sunset-notice-and-migration-schedule-8af9d3720d2e.

    Related:

    • https://github.com/WalletConnect/walletconnect-monorepo/issues/1118
    opened by elisealix22 0
  • Add Firebase Messaging

    Add Firebase Messaging

    Summary

    • Adds some new hooks to register the device token with the dev notification service
    • Adds background message handlers to decrypt and display the message using Notifee (tried react-native-push-notification but the docs were way out of date and the thing seems very poorly maintained)
    • Generates API client for the Notifications service and includes the generated client in the repo.
    • A bunch of build/config updates to make Firebase and Notifee work. Notably, had to update the required Android version to 33
    opened by neekolas 0
  • Reproduce TypeError when using react-native-quick-crypto

    Reproduce TypeError when using react-native-quick-crypto

    Context

    We noticed an issue when integrating XMTP into a project using react-native-quick-crypto so this PR is to help identify and track the bug.

    The issue seems to be in cipher.getAuthTag() which is causing a TypeError: undefined is not a function in the following block of code:

              var cipher = crypto.createCipheriv(`aes-${key.algorithm.length}-gcm`, key.data, Buffer.from(algorithm.iv), {
                authTagLength: (algorithm.tagLength || 128) >> 3
              });
    
              if (algorithm.additionalData) {
                cipher.setAAD(Buffer.from(algorithm.additionalData));
              }
    
              var enc = cipher.update(data);
              enc = Buffer.concat([enc, cipher.final(), cipher.getAuthTag()]);
    

    Repro steps

    • yarn install
    • npx react-native run-ios
    • Tap the "Send GM" button
    opened by elisealix22 1
  • Add wallet connect auth

    Add wallet connect auth

    Description

    This PR adds WalletConnect v1 integration to authenticate with XMTP. We will have to upgrade to v2 by March 1, 2023 which we are tracking here. For now though, I haven't found much guidance for dapps on how to upgrade as it seems they are focusing on wallets upgrading first.

    WC upgrade schedule

    migration_sched

    Also, I had to patch the v1 WC module because it was not working on Android. I'm hoping when we switch to v2, we'll be able to clean this all up.

    Note: Currently there is an error being thrown when the signature is successfully signed and the modal is closed. I'm opening this up for early review since it's so close, but will try to track down the cause of that bug tomorrow.

    https://user-images.githubusercontent.com/556051/204954971-529229de-abd8-42bc-86d3-f18765a18138.mp4

    Testing steps

    • [ ] Authenticate and send a message from an Android device
    • [ ] Authenticate and send a message from an iOS device
    opened by elisealix22 0
  • Streaming message feature

    Streaming message feature

    Context

    Attempting to use xmtp-js in React Native, I successfully integrate the SDK, I can send messages, and also get the messages list works fine.

    Problem

    Listen for new messages in a conversation it's not working

    for await (const message of await conversation.streamMessages()) {
      if (message.senderAddress === xmtp.address) {
        // This message was sent from me
        continue
      }
      console.log(`New message from ${message.senderAddress}: ${message.content}`)
    }
    

    Screenshot

    Screen Shot 2022-11-16 at 12 11 51 PM Screen Shot 2022-11-16 at 12 14 23 PM

    Expectation

    As I followed the documentation, the expected result whenever I send a message from user A to user B, the message should be displayed for user B, but it is not the case for me.

    I'll be so thankful If give us any hints to make this work. :)

    opened by HassenMabrouki 0
Owner
XMTP
XMTP
Sceneform React Native AR Component using ARCore and Google Filament as 3D engine. This the Sceneform Maintained Component for React Native

Discord Server Join us on Discord if you need a hand or just want to talk about Sceneform and AR. Features Remote and local assets Augmented Faces Clo

SceneView Open Community 41 Oct 27, 2022
📬Zola (Extremely) Simple Message Queue for spring, It is the simplest Message Queue you've ever experienced.

It is the simplest Message Queue you've ever experienced. home (engish version) korean version docs ?? Getting Started || Overview || Docs ZSMQ ZSMQ (

onigiri 42 Nov 23, 2022
React native wrapper for Jitsi Meet SDK Library that rely on the native view (Activity / ViewController)

react-native-jitsi-meet-sdk React native wrapper for Jitsi Meet SDK Library. This Library implements the Jitsi SDK with a native activity on the Andro

null 7 May 2, 2022
An awesome native wheel picker component for React Native.

⛏️ react-native-picky An awesome native wheel picker component for react-native. Features Supports multiple columns ✅ Supports looping ✅ Native Androi

null 28 Dec 4, 2022
An example Java application demonstrating TigrisDB's usage

tigrisdb-starter-java A starter Java application for TigrisDB. Key points Schema TigrisDB schemas are located in src/main/resources/tigrisdb-schema. E

Tigris Data Inc 3 Jun 27, 2022
🖥 CRUD Angular + Spring demonstrating Has-Many relationship, including tests for the back-end and front-end

REST API with Spring Boot and Angular CRUD Angular + Spring demonstrating Has-Many relationship, with tests. ?? Tecnologies Java 17 Spring Boot 3 JPA

Loiane Groner 46 Dec 2, 2022
This project contains many sample codes for demonstrating the usage of some common design patterns.

STUDY COMMON DESIGN PATTERNS 1. About this project This project contains many sample codes for demonstrating the usage of the following design pattern

Võ Trần Minh Quân 18 Nov 16, 2022
Prevent Screenshots in your React Native app when needed. 🦄

React Native Prevent Screenshots Prevent Screenshots in your React Native app when needed. ?? Installation First, you need to install the package usin

Ahmed Mahmoud 64 Oct 19, 2022
Project developed for MB Talk - App Center integration on React Native

App Center Setup Download APK Click here Requirements React Native CLI Yarn Sign Up on App Center and create a new App. How to use this repo Clone thi

André Angeloni 2 Oct 31, 2022
👾 A React Native app to visualize your NFTs in AR

AR NFT ?? Description AR NFT is a mobile app developed using React Native, Wallet Connect, and Viro React to allow users to login in your favorite wal

Akinn Rosa 79 Nov 11, 2022
This app is simple and awesome notepad. It is a quick notepad editing experience when writing notes,emails,message,shoppings and to do list.

This app is simple and awesome notepad. It is a quick notepad editing experience when writing notes,emails,message,shoppings and to do list.It is easy to use and enjoy hassle free with pen and paper.

Md Arif Hossain 1 Jan 18, 2022
An implementation of a sample E-Commerce app in k8s. This online retail marketplace app uses Spring Boot, React, and YugabyteDB.

An implementation of a sample E-Commerce app in k8s. This online retail marketplace app uses Spring Boot, React, and YugabyteDB.

yugabyte 1 Oct 27, 2022
Using turborepo & react-native

Turborepo starter with NPM This is an official starter turborepo. What's inside? This turborepo uses NPM as a package manager. It includes the followi

Renan Machado 5 Feb 16, 2022
This is a Food Delivery Mobile Application. Build Using React Native

Ax Food Delivery Service This is a Food Delivery Mobile Application build using ?????????? ???????????? ?? Installation Clone this repository git clon

Mindula Dilthushan Manamperi 13 Jul 14, 2022
This project is a simple messaging application made using React-Native framework, Gifted-Chat library and Firebase database

This project is a simple messaging application made using React-Native framework, Gifted-Chat library and Firebase database. The example that will be shown here focuses on the ability of two people to message each other in a chat room.

null 3 Jan 30, 2022
Better performance with lottie animations using RLottie in react-native

?? react-native-rlottie Features ▶️ Uses rlottie to run lottie animations ?? rlottie creates rasterized bitmaps for each frame of the animation (inste

Skill Nation 22 Nov 25, 2022
This bare project template includes a minimal setup for using unimodules with React Native tvOS.

What This is a clone of expo's bare minimal template which includes a minimal setup for using unimodules with React Native. Additionally, this templat

Abdullah Musab Ceylan 4 Oct 7, 2022
In this course, we will learn how to build a complete full-stack web application using Spring boot as backend and React (React Hooks) as frontend

In this course, we will learn how to build a complete full-stack web application using Spring boot as backend and React (React Hooks) as frontend. We will use MySQL database to store and retrieve the data.

Ramesh Fadatare 41 Nov 27, 2022
A Spring Boot Camel boilerplate that aims to consume events from Apache Kafka, process it and send to a PostgreSQL database.

SPRING-BOOT CAMEL BOILERPLATE This is a Spring-Boot Camel Application model that you can use as a reference to study or even to use in your company. I

Bruno Delgado 45 Apr 4, 2022