Disconnect from default relays when adding a first relay to your list

src/contexts/AccountContext.tsx

@@ -31,6 +31,7 @@ import { account } from "../translations";
 
 export type AccountContextStore = {
   likes: string[],
+  defaultRelays: string[],
   relays: Relay[],
   relaySettings: NostrRelays,
   publicKey: string | undefined,
@@ -60,11 +61,13 @@ export type AccountContextStore = {
     removeRelay: (url: string) => void,
     setConnectToPrimaryRelays: (flag: boolean) => void,
     changeCachingService: (url?: string) => void,
+    dissconnectDefaultRelays: () => void,
   },
 }
 
 const initialData = {
   likes: [],
+  defaultRelays: [],
   relays: [],
   relaySettings: {},
   publicKey: undefined,
@@ -562,6 +565,28 @@ export function AccountProvider(props: { children: number | boolean | Node | JSX
     reset();
   };
 
+  const dissconnectDefaultRelays = () => {
+    console.log('dissconnectDefaultRelays');
+    for(let i=0; i < store.defaultRelays.length; i++) {
+      const url = store.defaultRelays[i];
+
+      const relay = store.relays.find(r => r.url === url);
+
+      if (relay) {
+        console.log('dissconnectDefaultRelays: ', relay.url);
+        relay.close();
+        updateStore('relays', () => store.relays.filter(r => r.url !== url));
+      }
+
+      // Add relay to the list of explicitly closed relays
+      relaysExplicitlyClosed.push(url);
+
+      // Reset connection attempts
+      relayAtempts[url] = 0;
+    }
+
+  };
+
 
 // EFFECTS --------------------------------------
 
@@ -726,6 +751,8 @@ export function AccountProvider(props: { children: number | boolean | Node | JSX
       if (type === 'EVENT') {
         const resp = JSON.parse(content.content || '[]');
 
+        updateStore('defaultRelays', () => [...resp]);
+
         const relaySettings: NostrRelays = resp.reduce((acc: NostrRelays, r: string) => ({ ...acc, [r]: { read: true, write: true }}), {});
 
         if (Object.keys(relaySettings).length > 0) {
@@ -756,6 +783,7 @@ const [store, updateStore] = createStore<AccountContextStore>({
     removeRelay,
     setConnectToPrimaryRelays,
     changeCachingService,
+    dissconnectDefaultRelays,
   },
 });
 

src/pages/Settings/Network.tsx

@@ -86,9 +86,17 @@ const Network: Component = () => {
 
   const onAddRelay = (url: string) => {
     const rels: string[] = import.meta.env.PRIMAL_PRIORITY_RELAYS?.split(',') || [];
+
     if (rels.includes(url)) {
       account?.actions.setConnectToPrimaryRelays(true);
     }
+
+    const myRelays = relays();
+
+    if (myRelays.length === 0) {
+      account?.actions.dissconnectDefaultRelays()
+    }
+
     account?.actions.addRelay(url);
   };
 
@@ -166,25 +174,31 @@ const Network: Component = () => {
         {intl.formatMessage(t.network.myRelays)}
       </div>
 
-      <For each={relays()}>
-        {relay => (
-          <button class={styles.relayItem} onClick={() => setConfirmRemoveRelay(relay.url)}>
-            <div class={styles.relayEntry}>
-              <Show
-                when={isConnected(relay.url)}
-                fallback={<div class={styles.disconnected}></div>}
-              >
-                <div class={styles.connected}></div>
-              </Show>
-              <div class={styles.webIcon}></div>
-              <span class={styles.relayUrl} title={relay.url}>
-                {relay.url}
-              </span>
-            </div>
-            <div class={styles.remove}><div class={styles.closeIcon}></div> {intl.formatMessage(tActions.removeRelay)}</div>
-          </button>
-        )}
-      </For>
+      <Show
+        when={relays().length > 0}
+        fallback={<div class={styles.noMyRelays}>{intl.formatMessage(t.network.noMyRelays)}</div>}
+      >
+        <For each={relays()}>
+          {relay => (
+            <button class={styles.relayItem} onClick={() => setConfirmRemoveRelay(relay.url)}>
+              <div class={styles.relayEntry}>
+                <Show
+                  when={isConnected(relay.url)}
+                  fallback={<div class={styles.disconnected}></div>}
+                >
+                  <div class={styles.connected}></div>
+                </Show>
+                <div class={styles.webIcon}></div>
+                <span class={styles.relayUrl} title={relay.url}>
+                  {relay.url}
+                </span>
+              </div>
+              <div class={styles.remove}><div class={styles.closeIcon}></div> {intl.formatMessage(tActions.removeRelay)}</div>
+            </button>
+          )}
+        </For>
+      </Show>
+
 
       <Show when={!isPrimalRelayInUserSettings()}>
         <Checkbox
@@ -195,24 +209,27 @@ const Network: Component = () => {
         />
       </Show>
 
-      <div class={`${styles.settingsCaption} ${styles.secondCaption}`}>
-        {intl.formatMessage(t.network.recomended)}
-      </div>
+      <Show when={otherRelays().length > 0}>
+        <div class={`${styles.settingsCaption} ${styles.secondCaption}`}>
+          {intl.formatMessage(t.network.recomended)}
+        </div>
 
-      <For each={otherRelays()}>
-        {url => (
-          <button class={styles.relayItem} onClick={() => onAddRelay(url)}>
-            <div class={styles.relayEntry}>
-              <div class={styles.addIcon}></div>
-              <div class={styles.webIcon}></div>
-              <span>
-                {url}
-              </span>
-            </div>
-            <div class={styles.add}><div class={styles.addIcon}></div> {intl.formatMessage(tActions.addRelay)}</div>
-          </button>
-        )}
-      </For>
+        <For each={otherRelays()}>
+          {url => (
+            <button class={styles.relayItem} onClick={() => onAddRelay(url)}>
+              <div class={styles.relayEntry}>
+                <div class={styles.addIcon}></div>
+                <div class={styles.webIcon}></div>
+                <span>
+                  {url}
+                </span>
+              </div>
+              <div class={styles.add}><div class={styles.addIcon}></div> {intl.formatMessage(tActions.addRelay)}</div>
+            </button>
+          )}
+        </For>
+
+      </Show>
 
       <div class={`${styles.settingsCaption} ${styles.secondCaption}`}>
         {intl.formatMessage(t.network.customRelay)}

src/pages/Settings/Settings.module.scss

@@ -72,6 +72,7 @@
   border: none;
   margin: 0;
   padding: 0;
+  text-transform: lowercase;
 
   &:hover {
     text-decoration: underline;
@@ -443,3 +444,11 @@
     line-height: 28px;
   }
 }
+
+.noMyRelays {
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  margin-bottom: 20px;
+}

src/translations.ts

@@ -902,6 +902,11 @@ export const settings = {
       defaultMessage: 'My Relays',
       description: 'Title of the my relays section of the network settings sub-page',
     },
+    noMyRelays: {
+      id: 'settings.networks.noMyRelays',
+      defaultMessage: 'Your Nostr account doesn\'t have any relays specified, so we connected you to a default set of relays. To configure your desired set of relays, please select them from the list below.',
+      description: 'Caption informing the user that he has no relays configured',
+    },
     recomended: {
       id: 'settings.network.recomended',
       defaultMessage: 'Recomended Relays',