Bug fixes / tech debt + Report Tx Id paste + Incentives + Delegates

package.json

@@ -18,13 +18,15 @@
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-scroll-area": "^1.0.4",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@rehooks/local-storage": "^2.4.5",
     "@tanstack/react-query": "^5.8.4",
-    "@tanstack/react-router": "0.0.1-beta.185",
+    "@tanstack/react-router": "^1.4.2",
     "@tanstack/react-table": "^8.9.8",
     "arweave-graphql": "^0.0.5",
     "base64-arraybuffer": "^1.0.2",

src/App.tsx

@@ -1,8 +1,8 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { QueryClientProvider } from '@tanstack/react-query'
 import { RouterProvider } from '@tanstack/react-router'
+import { queryClient } from './lib/query'
 import { router } from './routes'
 
-const queryClient = new QueryClient()
 
 function App() {
   return (

src/Root.tsx

@@ -1,36 +1,47 @@
-import { Outlet } from "@tanstack/react-router"
+import { Link, Outlet } from "@tanstack/react-router"
 import {
-  Card,
   CardContent,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
 import arioLogo from './assets/ar.io-white.png'
 import { Toaster } from "./components/ui/toaster"
+import { NetworkInfo } from "./components/NetworkInfo"
+import { useNetwork } from "./hooks/useNetwork"
 
 export const Root = () => {
+  const { network } = useNetwork();
+
   return (
     <>
       <div className="max-h-[100vh] px-2 md:px-8 lg:px-16 py-4">
-        <Card>
+        <div>
           <CardHeader>
-            <CardTitle className='flex flex-col md:flex-row gap-2 px-2 items-center md:items-baseline'>
-              <a
-                href='/'
+            <CardTitle className='flex flex-col md:flex-row px-2 items-center md:items-baseline'>
+              <Link
+                to={'/'}
                 className='flex items-center px-1 flex-col md:flex-row gap-2 md:gap-4'
               >
                 <img src={arioLogo} width='100rem' />
                 <span className='font-ario text-3xl'>
                   Gateway Explorer
                 </span>
-              </a>
+              </Link>
+              {
+                network === "testnet" &&
+                <NetworkInfo nextNetwork="devnet" />
+              }
+              {
+                network == "devnet" &&
+                <NetworkInfo nextNetwork="testnet" />
+              }
             </CardTitle>
             {/* <CardDescription>List of all Gateways</CardDescription> */}
           </CardHeader>
           <CardContent>
             <Outlet />
           </CardContent>
-        </Card>
+        </div>
         <div className='flex flex-col text-center text-muted-foreground gap-1 pt-2'>
           <div className='flex flex-row flex-grow justify-center gap-2'>
             <div className='flex'>
@@ -58,7 +69,7 @@ export const Root = () => {
             </div>
           </div>
           <div>
-            ©2023 ar.io
+            ©2024 ar.io
           </div>
           {/* <div className={`${isDetailsSheetOpen ? 'h-[calc(50vh+3em)]' : 'h-[2em]'} transition-all duration-200`} /> */}
           <div className={`h-[2em] transition-all duration-200`} />

src/components/ColumnSelection.tsx

@@ -1,10 +1,9 @@
-import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"
 import { Eye } from "lucide-react"
 import { Table } from "@tanstack/react-table"
-
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
+  DropdownMenuTrigger,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuLabel,

src/components/CurrentReport.tsx

@@ -2,7 +2,7 @@
 import { useQuery } from "@tanstack/react-query"
 import { downloadCurrentReportInfoFromGateway } from "@/lib/observer/downloadObservation"
 import { ReportSummaryTable } from "./ReportSummaryTable";
-import { garQuery } from "@/lib/query";
+import { useGarData } from "@/hooks/useGarData";
 
 interface Props {
   host: string;
@@ -12,9 +12,9 @@ export const CurrentReport = ({ host }: Props) => {
   const {
     data: garData,
     isError: isGarError,
-  } = useQuery(garQuery);
+  } = useGarData();
 
-  const observer = garData?.find((item) => item.settings.fqdn === host)
+  const observer = garData?.find((item) => item.fqdnKey === host)
   const observerNotFound = (garData !== undefined) && (observer === undefined);
 
   const {

src/components/DelegateSummary.tsx

@@ -0,0 +1,60 @@
+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";
+import { mIoToIo } from "@/lib/utils";
+
+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" type="always">
+        <p className="text-lg">Delegates ({sortedDelegates.length})</p>
+        <Table>
+          <TableHeader>
+            <TableCell className="text-md">
+              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">
+                    {mIoToIo(delegateInfo.delegatedStake).toFixed(2)}
+                  </code>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </ScrollArea>
+    </div>
+  )
+}
+
+export { DelegateSummary }

src/components/DelegatedStakeHoverCard.tsx

@@ -0,0 +1,41 @@
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "./ui/hover-card"
+import { z } from "zod"
+import { useState } from "react"
+import { zGatewayAddressRegistryItem } from "@/types"
+import { DelegateSummary } from "./DelegateSummary"
+import { mIoToIo } from "@/lib/utils"
+
+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">
+          {mIoToIo(totalDelegatedStake).toFixed(2)}
+        </span>
+      </HoverCardTrigger>
+      <HoverCardContent 
+        onClick={(e) => e.stopPropagation()}
+        className="w-full"
+      >
+        <DelegateSummary delegates={delegates} />
+      </HoverCardContent>
+    </HoverCard>
+  )
+}
+
+export default DelegatedStakeHoverCard

src/components/DistributionDetails.tsx

@@ -0,0 +1,44 @@
+import { useNetwork } from "@/hooks/useNetwork";
+import { fetchDistributions } from "@/lib/distribution/fetchDistributions";
+import { useQuery } from "@tanstack/react-query";
+import { fetchBalanceContract } from "@/lib/balance/fetchBalance";
+import { networkConfigMap } from "@/lib/networks";
+import { capitalizeWord, mIoToIo } from "@/lib/utils";
+import { DISTRIBUTION_PROPORTION_PER_EPOCH } from "@/lib/distribution/distribution";
+
+const DistributionDetails = () => {
+  const { network } = useNetwork();
+  const { data: distributionsData } = useQuery({
+    queryKey: ['distributions', network],
+    queryFn: () => fetchDistributions(network),
+  });
+
+  const { data: balanceContractData } = useQuery({
+    queryKey: ['balance', network],
+    queryFn: () => fetchBalanceContract(network),
+  })
+
+  if (distributionsData === undefined || balanceContractData === undefined) 
+    return <div>Loading...</div>;
+
+  return (
+    <div>
+      <p className="text-lg pb-0.5">
+        <a href={`https://viewblock.io/arweave/tx/${networkConfigMap[network].contractTxIds.garCache}`} target="_blank" className="underline cursor-pointer"><span className=" ">{capitalizeWord(network)}</span> contract</a>&nbsp;
+        <span className="text-sm text-secondary-foreground/80">
+          (block <code className="text-xs">{distributionsData.epochZeroStartHeight}</code>+)
+        </span>
+      </p>
+      <p className="text-secondary-foreground/80">Epoch #{distributionsData.epochPeriod}&nbsp;
+        <span className="text-sm">
+          (block <code className="text-xs">{distributionsData.epochStartHeight}</code>–<code className="text-xs">{distributionsData.epochEndHeight}</code>)
+        </span>
+      </p>
+      <div className="text-secondary-foreground/80">
+        <p className="text-sm">Distributing ~{mIoToIo(balanceContractData * DISTRIBUTION_PROPORTION_PER_EPOCH).toFixed(2)} <a href="https://docs.ar.io/token/" className="underline cursor-pointer">$IO</a> at block <code className="text-xs">{distributionsData.nextDistributionHeight}</code></p>
+      </div>
+    </div>
+  )
+}
+
+export { DistributionDetails }

src/components/GarLoader.tsx

@@ -6,15 +6,16 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle } from './ui/sheet';
 import GatewayDetails from './GatewayDetails';
 import { z } from 'zod';
 import { zGatewayAddressRegistryItem } from '@/types';
-import { garQuery } from '@/lib/query';
+import { useGarData } from '@/hooks/useGarData';
 
 const GarLoader = () => {
   const {
     data,
     isLoading,
     isFetching,
     error,
-  } = useQuery(garQuery);
+    refetch,
+  } = useGarData();
 
   const {
     data: procData,
@@ -47,7 +48,13 @@ const GarLoader = () => {
 
   const [isDetailsSheetOpen, setIsDetailsSheetOpen] = useState(false)
 
-  if (error) return <div>Error: {JSON.stringify(error)}</div>
+  if (error) return (
+    <div>
+      <p>Error: {JSON.stringify(error)}</p>
+      <button onClick={() => refetch()}>Retry</button>
+    </div>
+  )
+
 
   return (
     <>

src/components/GarTable.stories.ts

@@ -53,12 +53,10 @@ export const MultipleItems: Story = {
   },
 };
 
-import GatewayAddressRegistryCache from "../fixtures/GatewayAddressRegistryCache.json";
-import { zGatewayAddressRegistryCache } from "@/types";
+import IncentiveContract from "../fixtures/IncentiveContract.json";
 import { extractGarItems } from "@/lib/convert";
-const garCache = zGatewayAddressRegistryCache.parse(
-  GatewayAddressRegistryCache
-);
+import { incentiveContractSchema } from "@/lib/incentive/schema";
+const garCache = incentiveContractSchema.parse(IncentiveContract);
 const items = extractGarItems(garCache);
 export const ManyItems: Story = {
   args: {