tmp

packages/app/src/Element/Relay.tsx

@@ -1,33 +1,23 @@
 import "./Relay.css";
 import { useMemo } from "react";
-import { useIntl, FormattedMessage } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faPlug,
-  faSquareCheck,
-  faSquareXmark,
-  faWifi,
-  faPlugCircleXmark,
-  faGear,
-  faWarning,
-} from "@fortawesome/free-solid-svg-icons";
 import { RelaySettings } from "@snort/nostr";
 
 import useRelayState from "Feed/RelayState";
 import { System } from "System";
 import { getRelayName, unixNowMs, unwrap } from "Util";
-
-import messages from "./messages";
 import useLogin from "Hooks/useLogin";
 import { setRelays } from "Login";
+import Icon from "Icons/Icon";
+
+import messages from "./messages";
 
 export interface RelayProps {
   addr: string;
 }
 
 export default function Relay(props: RelayProps) {
-  const { formatMessage } = useIntl();
   const navigate = useNavigate();
   const login = useLogin();
   const relaySettings = unwrap(login.relays.item[props.addr] ?? System.Sockets.get(props.addr)?.Settings ?? {});
@@ -50,7 +40,7 @@ export default function Relay(props: RelayProps) {
     <>
       <div className={`relay w-max`}>
         <div className={`flex ${state?.connected ? "bg-success" : "bg-error"}`}>
-          <FontAwesomeIcon icon={faPlug} />
+          <Icon name="wifi" />
         </div>
         <div className="f-grow f-col">
           <div className="flex mb10">
@@ -65,7 +55,7 @@ export default function Relay(props: RelayProps) {
                     read: relaySettings.read,
                   })
                 }>
-                <FontAwesomeIcon icon={relaySettings.write ? faSquareCheck : faSquareXmark} />
+                <Icon name={relaySettings.write ? "check" : "close"} size={12} />
               </span>
             </div>
             <div className="f-1">
@@ -78,28 +68,15 @@ export default function Relay(props: RelayProps) {
                     read: !relaySettings.read,
                   })
                 }>
-                <FontAwesomeIcon icon={relaySettings.read ? faSquareCheck : faSquareXmark} />
+                <Icon name={relaySettings.read ? "check" : "close"} size={12} />
               </span>
             </div>
           </div>
           <div className="flex">
-            <div className="f-grow">
-              <FontAwesomeIcon icon={faWifi} className="mr5 ml5" />
-              {latency > 2000
-                ? formatMessage(messages.Seconds, {
-                    n: (latency / 1000).toFixed(0),
-                  })
-                : formatMessage(messages.Milliseconds, {
-                    n: latency.toLocaleString(),
-                  })}
-              &nbsp;
-              <FontAwesomeIcon icon={faPlugCircleXmark} className="mr5 ml5" /> {state?.disconnects}
-              <FontAwesomeIcon icon={faWarning} className="mr5 ml5" />
-              {state?.pendingRequests?.length}
-            </div>
+            <div className="f-grow"></div>
             <div>
               <span className="icon-btn" onClick={() => navigate(state?.id ?? "")}>
-                <FontAwesomeIcon icon={faGear} />
+                <Icon name="gear" size={12} />
               </span>
             </div>
           </div>