This PR demonstrates streaming messages in a Conversation. The issue was React Native's fetch implementation doesn't support streaming with body.

Related RN issue and RN feature request to upvote.

The feature request led me to Realm's workaround https://github.com/realm/realm-js/pull/4155 which was extremely helpful as it pointed me to use text type instead of blob in https://github.com/react-native-community/fetch. However, we can't pass the: { reactNative: { textStreaming: true } } to fetch itself like it's recommended since our fetch methods are auto-generated in the https://github.com/xmtp/proto repo. To workaround that, I patched the default type to text instead of blob which I believe should be ok since it appears it can still be overridden in the options.

Here's the motivation behind using text for streaming to begin with: https://github.com/react-native-community/fetch#motivation.

NOTE: This only resolves streaming on iOS. Android streaming is still under investigation.

Relates to: https://github.com/xmtp/xmtp-js/issues/223

Demo

https://user-images.githubusercontent.com/556051/207852004-7c3e9630-2242-4b10-87c8-bbb2f036eb0c.mov

Testing steps

• [x] Ensure streaming works with a random wallet address
• [x] Re-test sign in and ensure streaming works with my authenticated address
• [x] Stream on iOS
• [ ] Stream on Android

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.

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.

Testing steps

• [x] Authenticate and send a message from an Android device
• [x] Authenticate and send a message from an iOS device

Demos

| iOS | Android | |--|--| | https://user-images.githubusercontent.com/556051/205200204-3a1c1db9-a67b-41a9-a26d-6764ac4e6b93.mp4 | https://user-images.githubusercontent.com/556051/205200231-1358febc-737d-4087-9648-68ef88e04b75.mp4 |

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

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. :)

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

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

Thanks for this lib and this sample app!

However, I'm having really bad performance with it, do you know if that's normal?

A classic conversations.list() usually takes 2-3 seconds when in the browser or NodeJS. But in the react native environment it takes 42 seconds in the simulator and 58 seconds on my iPhone!

Using the wallet created in app (that's empty) it is almost immediate Using my own wallet that has 7 conversations on the testnet it takes a very long time

Here is an example code diff to show you what I did in the app (pretty straightforward) : https://github.com/xmtp/example-chat-react-native/compare/main...nmalzieu:xmtp-react-native:main

Do tell me if you want more information or if we should hop on a call to debug together

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

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

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