Adapt relayer signers

apps/web/src/components/relayer/relayers-table/columns.tsx

@@ -10,6 +10,7 @@ import Button from "../../../ui/button";
 import PrettyAddress from "../../../components/pretty-address";
 import Chain from "./chain";
 import Title from "./title";
+import Status from "./status";
 
 type DataSource = RelayersRecord;
 type Args = { isDashboard?: boolean; version?: BridgeVersion; onClick?: (row: DataSource) => void };
@@ -18,14 +19,7 @@ export const getColumnStatus = ({ version, isDashboard }: Args): ColumnType<Data
   key: "status",
   title: "",
   width: isDashboard ? (version === "lnv3" ? 32 : 54) : 54,
-  render: ({ heartbeatTimestamp }) => {
-    const isOnline = Date.now() - (heartbeatTimestamp ?? 0) * 1000 < 5 * 60 * 1000; // 5 Minutes
-    return (
-      <Tooltip content={isOnline ? "Online" : "Offline"} className="mx-auto w-fit">
-        <div className={`h-[6px] w-[6px] rounded-full ${isOnline ? "bg-app-green" : "bg-white/50"}`} />
-      </Tooltip>
-    );
-  },
+  render: ({ heartbeatTimestamp, signers }) => <Status heartbeatTimestamp={heartbeatTimestamp} signers={signers} />,
 });
 
 export const getColumnFrom = ({ isDashboard }: Args): ColumnType<DataSource> => ({

apps/web/src/components/relayer/relayers-table/status.tsx

@@ -0,0 +1,56 @@
+import Tooltip from "../../../ui/tooltip";
+import { toShortAdrress } from "../../../utils";
+
+interface Props {
+  signers: string | null;
+  heartbeatTimestamp: number | null;
+}
+
+export default function Status({ signers, heartbeatTimestamp }: Props) {
+  const signersStatus = parseSigners(signers);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const onlineSigners = signersStatus.filter(([_, isOnline]) => isOnline);
+  const online = isOnline(heartbeatTimestamp);
+
+  return signersStatus.length > 0 ? (
+    <Tooltip
+      content={
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-xs font-semibold">{`Total: ${onlineSigners.length} / ${signersStatus.length}`}</span>
+          {signersStatus.map(([address, isOnline]) => (
+            <div key={address} className="flex items-center gap-2">
+              <div className={`h-[8px] w-[8px] rounded-full ${isOnline ? "bg-app-green" : "bg-white/50"}`} />
+              <span className="text-xs font-semibold">{toShortAdrress(address, 10, 8)}</span>
+            </div>
+          ))}
+        </div>
+      }
+      className="mx-auto w-fit"
+    >
+      <div
+        className={`h-[8px] w-[8px] rounded-full ${onlineSigners.length === signersStatus.length ? "bg-app-green" : onlineSigners.length > 0 ? "bg-app-orange" : "bg-white/50"}`}
+      />
+    </Tooltip>
+  ) : (
+    <Tooltip content={online ? "Online" : "Offline"} className="mx-auto w-fit">
+      <div className={`h-[8px] w-[8px] rounded-full ${online ? "bg-app-green" : "bg-white/50"}`} />
+    </Tooltip>
+  );
+}
+
+function isOnline(heartbeat: number | null) {
+  return Date.now() - (heartbeat ?? 0) * 1000 < 5 * 60 * 1000; // 5 Minutes
+}
+
+function parseSigners(signers: string | null) {
+  return (
+    signers?.split(",").reduce(
+      (acc, cur) => {
+        const [address, heartbeat] = cur.split("-");
+        acc.push([address, isOnline(Number(heartbeat))]);
+        return acc;
+      },
+      [] as [string, boolean][],
+    ) || []
+  );
+}

apps/web/src/config/gql.ts

@@ -255,6 +255,7 @@ export const GQL_GET_RELAYERS = gql`
         lastTransferId
         withdrawNonce
         transferLimit
+        signers
       }
     }
   }

apps/web/src/types/graphql.ts

@@ -71,6 +71,7 @@ export interface LnBridgeRelayInfo {
   heartbeatTimestamp: number | null;
   messageChannel: MessageChannel | null;
   transferLimit: string | null;
+  signers: string | null;
 }
 
 export interface SupportChains {
@@ -311,6 +312,7 @@ export type RelayersRecord = Pick<
   | "lastTransferId"
   | "withdrawNonce"
   | "transferLimit"
+  | "signers"
 >;
 
 export interface RelayersReqParams {

apps/web/src/utils/address.ts

@@ -1,5 +1,3 @@
-import { Address } from "viem";
-
-export function toShortAdrress(address: Address, prefixLength = 5, suffixLength = 4) {
+export function toShortAdrress(address: string, prefixLength = 5, suffixLength = 4) {
   return address.length > 16 ? `${address.slice(0, prefixLength)}...${address.slice(-1 * suffixLength)}` : address;
 }