relay indicator component

ndk-mobile/index.ts

@@ -5,4 +5,6 @@ export * from './src/hooks';
 export * from './src/context';
 export * from './src/providers';
 export * from './src/cache-adapter/sqlite';
-export * from '@nostr-dev-kit/ndk';
+export * from './src/components';
+export * from './src/components/relays';
+export * from '@nostr-dev-kit/ndk';

ndk-mobile/package.json

@@ -34,6 +34,18 @@
         "types": "./lib/typescript/module/index.d.ts",
         "default": "./lib/module/index.js"
       }
+    },
+    "./components": {
+      "import": {
+        "types": "./lib/typescript/module/components/index.d.ts",
+        "default": "./lib/module/components/index.js"
+      }
+    },
+    "./components/relays": {
+      "import": {
+        "types": "./lib/typescript/module/components/relays/index.d.ts",
+        "default": "./lib/module/components/relays/index.js"
+      }
     }
   },
   "scripts": {

ndk-mobile/src/components/index.ts

@@ -0,0 +1,7 @@
+import Relays from "./relays";
+
+const Components = {
+    Relays
+};
+
+export { Components };

ndk-mobile/src/components/relays/index.tsx

@@ -0,0 +1,3 @@
+import ConnectivityIndicator from "./indicator";
+
+export default { ConnectivityIndicator };

ndk-mobile/src/components/relays/indicator.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { NDKRelay } from "@nostr-dev-kit/ndk";
+
+import { NDKRelayStatus } from "@nostr-dev-kit/ndk";
+import { useState, useEffect } from "react";
+import { View } from "react-native";
+
+const CONNECTIVITY_STATUS_COLORS: Record<NDKRelayStatus, string> = {
+    [NDKRelayStatus.RECONNECTING]: '#f1c40f',
+    [NDKRelayStatus.CONNECTING]: '#f1c40f',
+    [NDKRelayStatus.DISCONNECTED]: '#aa4240',
+    [NDKRelayStatus.DISCONNECTING]: '#aa4240',
+    [NDKRelayStatus.CONNECTED]: '#66cc66',
+    [NDKRelayStatus.FLAPPING]: '#2ecc71',
+    [NDKRelayStatus.AUTHENTICATING]: '#3498db',
+    [NDKRelayStatus.AUTHENTICATED]: '#e74c3c',
+    [NDKRelayStatus.AUTH_REQUESTED]: '#e74c3c',
+} as const;
+
+export default function RelayConnectivityIndicator({ relay }: { relay: NDKRelay }) {
+    const [ color, setColor ] = useState(CONNECTIVITY_STATUS_COLORS[relay.status]);
+
+    useEffect(() => {
+        relay.on("connect", () => setColor(CONNECTIVITY_STATUS_COLORS[relay.status]));
+        relay.on("disconnect", () => setColor(CONNECTIVITY_STATUS_COLORS[relay.status]));
+        relay.on("ready", () => setColor(CONNECTIVITY_STATUS_COLORS[relay.status]));
+        relay.on("flapping", () => setColor(CONNECTIVITY_STATUS_COLORS[relay.status]));
+        relay.on("notice", () => setColor(CONNECTIVITY_STATUS_COLORS[relay.status]));
+        relay.on("auth", () => setColor(CONNECTIVITY_STATUS_COLORS[relay.status]));
+        relay.on("authed", () => setColor(CONNECTIVITY_STATUS_COLORS[relay.status]));
+        relay.on("auth:failed", () => setColor(CONNECTIVITY_STATUS_COLORS[relay.status]));
+        relay.on("delayed-connect", () => setColor(CONNECTIVITY_STATUS_COLORS[relay.status]));
+    }, []);
+
+    return (
+        <View
+            style={{
+                borderRadius: 10,
+                width: 8,
+                height: 8,
+                backgroundColor: color,
+            }}
+        />
+    );
+}

ndk-mobile/src/index.ts

@@ -5,6 +5,7 @@ export * from './hooks';
 export * from './context';
 export * from './providers';
 export * from './cache-adapter/sqlite';
+export * from './components';
 
 export * from '@nostr-dev-kit/ndk';
 import NDK from '@nostr-dev-kit/ndk';