feat: recommended relays list in setting page

BlowaterNostr · Feb 23, 2024 · d7cc8a0 · d7cc8a0
1 parent bc22d90
commit d7cc8a0
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 1 deletion.
diff --git a/app/UI/relay-config.ts b/app/UI/relay-config.ts
@@ -11,6 +11,30 @@ export const defaultRelays = [
     "wss://relay.nostr.wirednet.jp",
 ];
 
+export const recommendedRelays = [
+    "wss://nos.lol",
+    "wss://relay.damus.io",
+    "wss://relay.nostr.wirednet.jp",
+    "wss://relay.nostr.moctane.com",
+    "wss://remnant.cloud",
+    "wss://nostr.cahlen.org",
+    "wss://fog.dedyn.io",
+    "wss://global-relay.cesc.trade",
+    "wss://nostr.dakukitsune.ca",
+    "wss://africa.nostr.joburg",
+    "wss://nostr-relay.ktwo.io",
+    "wss://bevo.nostr1.com",
+    "wss://relay.corpum.com",
+    "wss://relay.nostr.directory",
+    "wss://nostr.1f52b.xyz",
+    "wss://lnbits.eldamar.icu/nostrrelay/relay",
+    "wss://relay.cosmicbolt.net",
+    "wss://island.nostr1.com",
+    "wss://nostr.codingarena.de",
+    "wss://nostr.madco.me",
+    "wss://nostr-relay.bitcoin.ninja",
+];
+
 export class RelayConfig {
     private readonly ctx: NostrAccountContext;
     private readonly relayPool: ConnectionPool;

diff --git a/app/UI/setting.tsx b/app/UI/setting.tsx
@@ -22,7 +22,8 @@ import {
 } from "./style/colors.ts";
 import { RelayIcon } from "./icons/relay-icon.tsx";
 import { DeleteIcon } from "./icons/delete-icon.tsx";
-import { RelayConfig, RemoveBlowaterRelay } from "./relay-config.ts";
+import { AddIcon } from "./icons/add-icon.tsx";
+import { recommendedRelays, RelayConfig, RemoveBlowaterRelay } from "./relay-config.ts";
 import { ConnectionPool } from "../../libs/nostr.ts/relay-pool.ts";
 import { emitFunc } from "../event-bus.ts";
 import { sleep } from "https://raw.githubusercontent.com/BlowaterNostr/csp/master/csp.ts";
@@ -111,13 +112,21 @@ type RelaySettingState = {
     error: string;
     addRelayInput: string;
     relayStatus: { url: string; status: keyof typeof colors }[];
+    recommendedRelaysList: { url: string }[];
 };
 
 export class RelaySetting extends Component<RelaySettingProp, RelaySettingState> {
     state: Readonly<RelaySettingState> = {
         error: "",
         addRelayInput: "",
         relayStatus: [],
+        recommendedRelaysList: [
+            ...recommendedRelays,
+        ].map((url) => {
+            return {
+                url,
+            };
+        }),
     };
     private exit = false;
 
@@ -151,6 +160,14 @@ export class RelaySetting extends Component<RelaySettingProp, RelaySettingState>
         return _relayStatus;
     }
 
+    computeRecommendedRelaysStatus() {
+        // remove the relay that is already in the relay list
+        const _recommendedRelaysStatus = this.state.recommendedRelaysList.filter((r) => {
+            return this.state.relayStatus.find((rs) => rs.url == r.url) == undefined;
+        });
+        return _recommendedRelaysStatus;
+    }
+
     showRelayDetail = (url: string) => {
         this.props.emit({
             type: "ViewRelayDetail",
@@ -162,6 +179,7 @@ export class RelaySetting extends Component<RelaySettingProp, RelaySettingState>
         const addRelayInput = this.state.addRelayInput;
 
         const relayStatus = this.computeRelayStatus(props);
+        const recommendedRelaysStatus = this.computeRecommendedRelaysStatus();
 
         const addRelay = async () => {
             // props.eventBus.emit({ type: "AddRelay" });
@@ -272,6 +290,54 @@ export class RelaySetting extends Component<RelaySettingProp, RelaySettingState>
                         );
                     })}
                 </ul>
+                <p class={`mt-[1.75rem] text-[${PrimaryTextColor}]`}>
+                    Recommended Relays
+                </p>
+                <ul class={`mt-[0.5rem] text-[${PrimaryTextColor}]`}>
+                    {recommendedRelaysStatus.map((r) => {
+                        return (
+                            <li
+                                onClick={() => this.showRelayDetail(r.url)}
+                                class={`w-full px-[1rem] py-[0.75rem] rounded-lg bg-[${DividerBackgroundColor}80] mb-[0.5rem]  flex items-center justify-between cursor-pointer hover:bg-[${HoverButtonBackgroudColor}]`}
+                            >
+                                <div class={`flex items-center flex-1 overflow-hidden`}>
+                                    <span class={`truncate`}>{r.url}</span>
+                                </div>
+                                {r.url != blowater
+                                    ? (
+                                        <button
+                                            class={`w-[2rem] h-[2rem] rounded-lg bg-transparent hover:bg-[${DividerBackgroundColor}] ${CenterClass} ${NoOutlineClass}`}
+                                            onClick={async (e) => {
+                                                e.stopPropagation();
+                                                const p = props.relayConfig.add(r.url);
+                                                this.setState({
+                                                    relayStatus: this.computeRelayStatus(props),
+                                                });
+                                                props.emit({
+                                                    type: "RelayConfigChange",
+                                                    kind: "add",
+                                                    url: r.url,
+                                                });
+                                                const relay = await p;
+                                                if (relay instanceof Error) {
+                                                    console.error(relay);
+                                                    return;
+                                                }
+                                            }}
+                                        >
+                                            <AddIcon
+                                                class={`w-[1rem] h-[1rem]`}
+                                                style={{
+                                                    stroke: ErrorColor,
+                                                }}
+                                            />
+                                        </button>
+                                    )
+                                    : undefined}
+                            </li>
+                        );
+                    })}
+                </ul>
             </Fragment>
         );
     }