add expo example

examples/bun/client.ts

@@ -1,4 +1,3 @@
-// bun run client.ts
 import "dotenv/config"
 const ws = new WebSocket("ws://localhost:3000");
 

examples/bun/package.json

@@ -0,0 +1,5 @@
+{
+    "scripts": {
+        "start": "bun client.ts"
+    }
+}

examples/expo/.gitignore

@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

examples/expo/App.js

@@ -0,0 +1,65 @@
+import { StatusBar } from 'expo-status-bar';
+import { TextInput, StyleSheet, Text, SafeAreaView, Button } from 'react-native';
+import { useState, useEffect } from "react";
+
+const hostname = "wss://substreams-sink-websockets-production.up.railway.app"
+const ws = new WebSocket(hostname);
+
+export default function App() {
+  const [moduleHash, setModuleHash] = useState('0a363b2a63aadb76a525208f1973531d3616fbae');
+  const [messages, setMessages] = useState([]);
+
+  function handlePress() {
+    ws.send(moduleHash);
+  }
+
+  useEffect(() => {
+    ws.onmessage = event => {
+      const json = JSON.parse(event.data);
+      const { message, clock, manifest, data } = json;
+      const payload = message ?? `Block: ${clock.number} | Transactions: ${data.transactionTraces}`;
+      if ( payload ) setMessages((prevMessages) => [...prevMessages, payload]);
+    };
+  }, [])
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.title}>Substreams WebSockets</Text>
+      <Text>Hash Module</Text>
+      <TextInput
+        style={styles.input}
+        onChangeText={setModuleHash}
+        value={moduleHash}
+      />
+      <Button
+        onPress={handlePress}
+        title="Send"
+        color="#111"
+        accessibilityLabel="Learn more about this purple button"
+      />
+      {messages.map((message, index) => {
+        return <Text key={index}>{message}</Text>;
+      })}
+      <StatusBar style="auto" />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 40,
+    margin: 12,
+    borderWidth: 1,
+    padding: 10,
+  },
+});

examples/expo/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "my-app",
+    "slug": "my-app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

examples/expo/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

examples/expo/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "my-app",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "expo": "~49.0.13",
+    "expo-status-bar": "~1.6.0",
+    "react": "18.2.0",
+    "react-native": "0.72.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0"
+  },
+  "private": true
+}

examples/html/index.js

@@ -1,5 +1,3 @@
-// http-server . -c-1
-
 const messages = document.querySelector("#messages");
 const send = document.querySelector("#send");
 const message = document.querySelector("#message");

examples/html/package.json

@@ -0,0 +1,8 @@
+{
+    "scripts": {
+        "start": "http-server . -c-1"
+    },
+    "devDependencies": {
+        "http-server": "latest"
+    }
+}