2023-02-10 19:23:52 +00:00
|
|
|
import "./RelaysMetadata.css";
|
|
|
|
import Nostrich from "nostrich.webp";
|
|
|
|
import { useState } from "react";
|
|
|
|
|
2023-02-11 20:05:46 +00:00
|
|
|
import { FullRelaySettings } from "@snort/nostr";
|
2023-02-10 19:23:52 +00:00
|
|
|
import Read from "Icons/Read";
|
|
|
|
import Write from "Icons/Write";
|
|
|
|
|
|
|
|
const RelayFavicon = ({ url }: { url: string }) => {
|
|
|
|
const cleanUrl = url
|
2023-02-12 12:44:37 +00:00
|
|
|
.replace(/^wss:\/\//, "https://")
|
|
|
|
.replace(/^ws:\/\//, "http://")
|
2023-02-10 19:23:52 +00:00
|
|
|
.replace(/\/$/, "");
|
|
|
|
const [faviconUrl, setFaviconUrl] = useState(`${cleanUrl}/favicon.ico`);
|
2023-02-20 22:55:01 +00:00
|
|
|
return (
|
|
|
|
<img className="favicon" src={faviconUrl} onError={() => setFaviconUrl(Nostrich)} alt={`favicon for ${url}`} />
|
|
|
|
);
|
2023-02-10 19:23:52 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
interface RelaysMetadataProps {
|
2023-02-11 20:05:46 +00:00
|
|
|
relays: FullRelaySettings[];
|
2023-02-10 19:23:52 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
const RelaysMetadata = ({ relays }: RelaysMetadataProps) => {
|
|
|
|
return (
|
|
|
|
<div className="main-content">
|
|
|
|
{relays?.map(({ url, settings }) => {
|
|
|
|
return (
|
2023-02-20 22:53:08 +00:00
|
|
|
<div key={url} className="card relay-card">
|
2023-02-10 19:23:52 +00:00
|
|
|
<RelayFavicon url={url} />
|
2023-02-12 12:44:37 +00:00
|
|
|
<code className="relay-url f-ellipsis">{url}</code>
|
2023-02-10 19:23:52 +00:00
|
|
|
<div className="relay-settings">
|
|
|
|
<Read className={settings.read ? "enabled" : "disabled"} />
|
|
|
|
<Write className={settings.write ? "enabled" : "disabled"} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default RelaysMetadata;
|