chore: update app

Author: achingbrain

App.js

@@ -1,23 +1,73 @@
 import './globals.js'
+import './globals-crypto.js'
 import { StatusBar } from 'expo-status-bar'
 import { StyleSheet, Text, View } from 'react-native'
 import { useState, useEffect } from 'react'
 import { createLibp2p } from 'libp2p'
+import { webSockets } from '@libp2p/websockets'
+import { bootstrap } from '@libp2p/bootstrap'
+import { noise } from '@chainsafe/libp2p-noise'
+import { yamux } from '@chainsafe/libp2p-yamux'
+import { identify } from '@libp2p/identify'
+import { circuitRelayTransport } from '@libp2p/circuit-relay-v2'
+import { kadDHT } from '@libp2p/kad-dht'
+import debug from 'debug'
+
+debug.enable('libp2p:circuit-relay:*')
 
 export default function App () {
   const [libp2p, setLibp2p] = useState(null)
+  const [peers, setPeers] = useState(null)
+  const [multiaddrs, setMultiaddrs] = useState(null)
+
   useEffect(() => {
      async function getLibp2p() {
-        const node = await createLibp2p()
+        const node = await createLibp2p({
+          transports: [
+            webSockets(),
+            circuitRelayTransport({
+              discoverRelays: 1
+            })
+          ],
+          connectionEncryption: [
+            noise()
+          ],
+          streamMuxers: [
+            yamux()
+          ],
+          peerDiscovery: [
+            bootstrap({
+              list: [
+                '/dnsaddr/bootstrap.libp2p.io/p2p/QmNnooDu7bfjPFoTZYxMNLWUQJyrVwtbZg5gBMjTezGAJN',
+                '/dnsaddr/bootstrap.libp2p.io/p2p/QmQCU2EcMqAqQPR2i9bChDtGNJchTbq5TbXJJ16u19uLTa',
+                '/dnsaddr/bootstrap.libp2p.io/p2p/QmbLHAnMoJPWSCR5Zhtx6BHJX9KiKNN6tpvbUcqanj75Nb',
+                '/dnsaddr/bootstrap.libp2p.io/p2p/QmcZf59bWwK5XFi76CZX8cbJ4BhTzzA3gU1ZjYZcYW3dwt',
+                '/ip4/104.131.131.82/tcp/4001/p2p/QmaCpDMGvV2BGHeYERUEnRQAwe3N8SzbUtfsmvsqQLuvuJ'
+              ]
+            })
+          ],
+          services: {
+            identify: identify(),
+            kadDHT: kadDHT()
+          }
+        })
+
+        setInterval(() => {
+          setPeers(node.getPeers())
+          setMultiaddrs(node.getMultiaddrs())
+        }, 1000)
+
         setLibp2p(node)
      }
      getLibp2p()
   }, [])
 
   return (
     <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
+      <Text>js-libp2p running on React Native</Text>
       <Text>Our PeerId is {libp2p?.peerId.toString()}</Text>
+      <Text>Peers {peers?.join(', ')}</Text>
+      <Text>Multiaddrs {multiaddrs?.join(', ')}</Text>
       <StatusBar style="auto" />
     </View>
   )

README.md

@@ -1,6 +1,6 @@
 # Running js-libp2p under React Native
 
-Very basic support so far, just js-libp2p itself, no extra modules yet.
+There is some setup that needs to be done to modernise the react-native runtime.
 
 1. Turn on [exports map support](https://reactnative.dev/blog/2023/06/21/package-exports-support)
 
@@ -19,16 +19,53 @@ Some standard JS APIs aren't available in React Native, these need to be polyfil
 
 ```js
 // globals.js - this should be imported at the top of your App.js file
+import '@azure/core-asynciterator-polyfill'
+import 'react-native-url-polyfill/auto'
 import 'react-native-get-random-values'
+import 'weakmap-polyfill'
 import { TextEncoder, TextDecoder } from 'text-encoding'
 import { EventTarget, Event } from 'event-target-shim'
+import { Buffer } from '@craftzdog/react-native-buffer'
 
 global.TextEncoder = TextEncoder
 global.TextDecoder = TextDecoder
 global.EventTarget = EventTarget
 global.Event = Event
+
+global.AbortSignal.timeout = (ms) => {
+  const controller = new AbortController()
+  setTimeout(() => {
+    controller.abort(new Error('Aborted'))
+  }, ms)
+}
+global.Buffer = Buffer
+```
+
+3. WebCrypto
+
+It's necessary to shim support for [SubtleCrypto](https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto)
+until it's added to react-native by default.
+
+First install the necessary dependencies:
+
+```console
+$ npm i @peculiar/webcrypto
+```
+
+..and create a shim file:
+
+```js
+// globals-crypto.js - this should be imported at the top of your App.js file
+// but AFTER globals.js
+import { Crypto } from '@peculiar/webcrypto'
+
+global.crypto.subtle = new Crypto().subtle
 ```
 
+IMPORTANT: until [PeculiarVentures/webcrypto#67](https://github.com/PeculiarVentures/webcrypto/pull/67) is
+merged, SubtleCrypto has to be shimmed *after* the node Buffer polyfill has
+been added to the global context.
+
 ## Running
 
 ### iOS
@@ -50,3 +87,18 @@ $ npm start
 ```
 
 Follow the instructions - press `i` to start iOS or `a` for Android.
+
+## Notes
+
+- By default this demo uses pure-js crypto - it's not efficient enough to run on an actual device, `crypto-browserify` should be replaced with `react-native-quick-crypto` in `bable.config.js` for native builds
+- `@libp2p/webrtc` can also only run on a device since it needs native code
+
+### Debugging
+
+Put this at the top of your app file:
+
+```js
+import debug from 'debug'
+
+debug.enable('libp2p:*')
+```

babel.config.js

@@ -4,6 +4,17 @@ module.exports = function (api) {
   return {
     presets: [
       'babel-preset-expo'
+    ],
+    plugins: [
+      ['module-resolver', {
+        alias: {
+          //'crypto': 'react-native-quick-crypto',
+          'crypto': 'crypto-browserify',
+          'node:crypto': 'crypto-browserify',
+          'stream': 'stream-browserify',
+          'node:stream': 'stream-browserify'
+        }
+      }]
     ]
   }
 }

globals-crypto.js

@@ -0,0 +1,7 @@
+// Ship SubtleCrypto - this has do be done after the Buffer polyfill has been
+// added to the global object. Can be folded into `./globals.js` if
+// https://github.com/PeculiarVentures/webcrypto/pull/67 is merged
+
+import { Crypto } from '@peculiar/webcrypto'
+
+global.crypto.subtle = new Crypto().subtle

globals.js

@@ -1,11 +1,23 @@
 // Shim global JS objects, hopefully this won't be necessary forever
 // https://github.com/facebook/hermes/discussions/1072
 
+import '@azure/core-asynciterator-polyfill'
+import 'react-native-url-polyfill/auto'
 import 'react-native-get-random-values'
+import 'weakmap-polyfill'
 import { TextEncoder, TextDecoder } from 'text-encoding'
 import { EventTarget, Event } from 'event-target-shim'
+import { Buffer } from '@craftzdog/react-native-buffer'
 
 global.TextEncoder = TextEncoder
 global.TextDecoder = TextDecoder
 global.EventTarget = EventTarget
 global.Event = Event
+
+global.AbortSignal.timeout = (ms) => {
+  const controller = new AbortController()
+  setTimeout(() => {
+    controller.abort(new Error('Aborted'))
+  }, ms)
+}
+global.Buffer = Buffer

package.json

@@ -3,23 +3,39 @@
   "version": "1.0.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "expo start",
+    "start": "expo start -c",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web"
   },
   "dependencies": {
+    "@azure/core-asynciterator-polyfill": "^1.0.2",
     "@chainsafe/libp2p-noise": "^14.0.0",
     "@chainsafe/libp2p-yamux": "^6.0.1",
+    "@craftzdog/react-native-buffer": "^6.0.5",
+    "@libp2p/bootstrap": "^10.0.6",
+    "@libp2p/circuit-relay-v2": "^1.0.6",
+    "@libp2p/identify": "^1.0.5",
+    "@libp2p/kad-dht": "^11.0.6",
     "@libp2p/websockets": "^8.0.6",
+    "@peculiar/webcrypto": "^1.4.3",
+    "crypto-browserify": "^3.12.0",
     "event-target-shim": "^6.0.2",
     "expo": "~49.0.15",
-    "expo-status-bar": "~1.6.0",
+    "expo-status-bar": "^1.7.1",
     "libp2p": "^1.0.9",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
     "react": "18.2.0",
-    "react-native": "0.72.6",
+    "react-native": "^0.73.0",
     "react-native-get-random-values": "^1.10.0",
-    "text-encoding": "^0.7.0"
+    "react-native-quick-crypto": "^0.6.1",
+    "react-native-url-polyfill": "^2.0.0",
+    "react-native-webrtc": "^118.0.0",
+    "stream-browserify": "^3.0.0",
+    "text-encoding": "^0.7.0",
+    "weakmap-polyfill": "^2.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"