src/Element/RelaysMetadata.tsx

@@ -1,4 +1,4 @@
-import "./Relays.css";
+import "./RelaysMetadata.css";
 import Nostrich from "nostrich.webp";
 import { useState } from "react";
 
@@ -6,10 +6,6 @@ import { RelaySettings } from "Nostr";
 import Read from "Icons/Read";
 import Write from "Icons/Write";
 
-interface RelaysProps {
-  relays: RelaySettings[];
-}
-
 const RelayFavicon = ({ url }: { url: string }) => {
   const cleanUrl = url
     .replace("wss://relay.", "https://")
@@ -22,7 +18,11 @@ const RelayFavicon = ({ url }: { url: string }) => {
   return <img className="favicon" src={faviconUrl} onError={() => setFaviconUrl(Nostrich)} />;
 };
 
-const Relays = ({ relays }: RelaysProps) => {
+interface RelaysMetadataProps {
+  relays: RelaySettings[];
+}
+
+const RelaysMetadata = ({ relays }: RelaysMetadataProps) => {
   return (
     <div className="main-content">
       {relays?.map(({ url, settings }) => {
@@ -41,4 +41,4 @@ const Relays = ({ relays }: RelaysProps) => {
   );
 };
 
-export default Relays;
+export default RelaysMetadata;

src/Pages/ProfilePage.tsx

@@ -6,7 +6,7 @@ import { useNavigate, useParams } from "react-router-dom";
 
 import { unwrap } from "Util";
 import { formatShort } from "Number";
-import Relays from "Element/Relays";
+import RelaysMetadata from "Element/RelaysMetadata";
 import { Tab, TabElement } from "Element/Tabs";
 import Link from "Icons/Link";
 import Qr from "Icons/Qr";
@@ -213,7 +213,7 @@ export default function ProfilePage() {
         return isMe ? <BlockList variant="blocked" /> : null;
       }
       case RELAYS: {
-        return <Relays relays={relays} />;
+        return <RelaysMetadata relays={relays} />;
       }
     }
   }