Merge pull request #8 from elliotsayes/dev

Add delegates

src/components/DelegateSummary.tsx

@@ -0,0 +1,59 @@
+import { z } from "zod"
+import { zGatewayAddressRegistryItem } from "@/types";
+import { useMemo } from "react";
+import { Table, TableBody, TableCell, TableHeader, TableRow } from "./ui/table";
+import { ScrollArea } from "./ui/scroll-area";
+
+interface Props {
+  delegates: z.infer<typeof zGatewayAddressRegistryItem>['delegates']
+}
+
+const DelegateSummary = ({delegates}: Props) => {
+  const sortedDelegates = useMemo(() => {
+    return Object.entries(delegates).sort((a, b) => {
+      return b[1].delegatedStake - a[1].delegatedStake
+    })
+  }, [delegates]);
+
+  return (
+    <div>
+      <ScrollArea className="h-60 w-full pr-4">
+        {/* <p className="text-lg">Delegates</p> */}
+        <Table>
+          <TableHeader>
+            <TableCell className="text-md">
+              Delegate Address
+            </TableCell>
+            <TableCell className="text-md text-right">
+              Stake
+            </TableCell>
+          </TableHeader>
+          <TableBody>
+            {sortedDelegates.map(([delegateId, delegateInfo]) => (
+              <TableRow key={delegateId} className="py-2">
+                <TableCell className="py-1">
+                  <a 
+                    href={`https://viewblock.io/arweave/address/${delegateId}`}
+                    target="_blank"
+                    className="text-secondary-foreground/80 underline"
+                  >
+                    <code className="text-secondary-foreground/80">
+                      {delegateId.slice(0, 5)}...{delegateId.slice(delegateId.length-5)}
+                    </code>
+                  </a>
+                </TableCell>
+                <TableCell className="text-right py-2">
+                  <code className="text-secondary-foreground/80">
+                    {delegateInfo.delegatedStake}
+                  </code>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </ScrollArea>
+    </div>
+  )
+}
+
+export { DelegateSummary }

src/components/DelegatedStakeHoverCard.tsx

@@ -0,0 +1,40 @@
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "./ui/hover-card"
+import { z } from "zod"
+import { useState } from "react"
+import { zGatewayAddressRegistryItem } from "@/types"
+import { DelegateSummary } from "./DelegateSummary"
+
+interface Props {
+  totalDelegatedStake: z.infer<typeof zGatewayAddressRegistryItem>['totalDelegatedStake']
+  delegates: z.infer<typeof zGatewayAddressRegistryItem>['delegates']
+}
+
+const DelegatedStakeHoverCard = ({totalDelegatedStake, delegates}: Props) => {
+  const [open, setOpen] = useState(false);  
+
+  return (
+    <HoverCard
+      open={open}
+      onOpenChange={(o) => setOpen(o)}
+    >
+      <HoverCardTrigger
+        onClick={(e) => {
+          e.stopPropagation();
+          setOpen(true);
+        }}
+      >
+        <span className="line-clamp-1 underline cursor-pointer text-center">
+          {totalDelegatedStake}
+        </span>
+      </HoverCardTrigger>
+      <HoverCardContent 
+        onClick={(e) => e.stopPropagation()}
+        className="w-full"
+      >
+        <DelegateSummary delegates={delegates} />
+      </HoverCardContent>
+    </HoverCard>
+  )
+}
+
+export default DelegatedStakeHoverCard

src/components/GarTable.tsx

@@ -29,13 +29,14 @@ import { formatDuration } from "@/lib/utils"
 import { HostLinksDropdown } from "./HostLinksDropdown"
 import { useVisibilityStatePersistent } from "@/hooks/useVisibilityStatePersisent"
 import IncentiveHoverCard from "./IncentiveHoverCard"
+import DelegatedStakeHoverCard from "./DelegatedStakeHoverCard"
 
 const columns: ColumnDef<z.infer<typeof zGatewayAddressRegistryItem>>[] = [
   {
     id: "Label",
     accessorKey: "settings.label",
     header: "Label",
-    enableHiding: false,
+    // enableHiding: false,
   },
   {
     id: "Address",
@@ -83,6 +84,31 @@ const columns: ColumnDef<z.infer<typeof zGatewayAddressRegistryItem>>[] = [
     id: "Stake",
     accessorKey: "operatorStake",
     header: "Stake",
+    cell: (cell) => {
+      return (
+        <p className="text-right">
+          {cell.row.original.operatorStake}
+        </p>
+      )
+    }
+  },
+  {
+    id: "Delegated Stake",
+    accessorKey: "totalDelegatedStake",
+    header: "Delegated Stake",
+    cell: (cell) => {
+      if (cell.row.original.totalDelegatedStake === 0) {
+        return (
+          <p className="text-right">0</p>
+        )
+      }
+      return <div className="flex justify-end">
+        <DelegatedStakeHoverCard 
+          totalDelegatedStake={cell.row.original.totalDelegatedStake}
+          delegates={cell.row.original.delegates}
+        />
+      </div>
+    }
   },
   {
     id: "Status",

src/lib/gar/schema.ts

@@ -9,9 +9,11 @@ export const zGatewayVault = z.object({
   end: z.number().int().nonnegative(),
 });
 
+export const zGatewayVaults = z.record(zArweaveTxId, zGatewayVault);
+
 export const zGatewayAddressRegistryItemData = z.object({
   operatorStake: z.number().nonnegative(),
-  vaults: z.record(zArweaveTxId, zGatewayVault),
+  vaults: zGatewayVaults,
   settings: z.object({
     label: z.string(),
     fqdn: z.string().regex(/^[a-z0-9-]+(\.[a-z0-9-]+)*$/i),
@@ -24,6 +26,15 @@ export const zGatewayAddressRegistryItemData = z.object({
   start: z.number().int().nonnegative(),
   end: z.number().int().nonnegative(),
   observerWallet: zArweaveTxId,
+  totalDelegatedStake: z.number().nonnegative(),
+  delegates: z.record(
+    zArweaveTxId,
+    z.object({
+      delegatedStake: z.number().nonnegative(),
+      start: z.number().int().nonnegative(),
+      vaults: zGatewayVaults,
+    }),
+  ),
 });
 
 export const zGatewayAddressRegistryCache = z.object({