feat(indexd): contract explorer

Author: alexfreska

apps/indexd/components/Data/Contracts/ContractsTab.tsx

@@ -0,0 +1,86 @@
+import {
+  DataTable,
+  useDataTable,
+  useDataTableParams,
+} from '@siafoundation/design-system'
+import { useCallback } from 'react'
+import { contractsColumns } from './contractsColumns'
+import { DataViewSelect, type DataView } from '../Views'
+import { SidePanel } from '../SidePanel'
+import { SidePanelContract } from './SidePanelContract'
+import { SidePanelContractList } from './SidePanelContractList'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { ContractData } from './types'
+import { useContracts } from './useContracts'
+
+export function ContractsTab() {
+  const params = useSearchParams()
+  const router = useRouter()
+  const pathname = usePathname()
+  const view = params.get('view') as DataView
+  const setView = (view: DataView) => {
+    const paramsObj = new URLSearchParams(Array.from(params.entries()))
+    paramsObj.set('view', view)
+    router.push(`${pathname}?${paramsObj.toString()}`)
+  }
+  const {
+    offset,
+    limit,
+    setOffset,
+    setLimit,
+    selectedId,
+    setSelectedId,
+    columnFilters,
+    setColumnFilters,
+    columnSorts,
+    setColumnSorts,
+  } = useDataTableParams('contractList')
+  const onRowClick = useCallback(
+    (id: string) => {
+      setSelectedId(id)
+    },
+    [setSelectedId],
+  )
+
+  const contracts = useContracts()
+  const table = useDataTable<ContractData>({
+    data: contracts,
+    columns: contractsColumns,
+    columnFilters,
+    setColumnFilters,
+    columnSorts,
+    setColumnSorts,
+    offset,
+    limit,
+    onRowClick,
+    setOffset,
+    setLimit,
+  })
+
+  return (
+    <div className="w-full h-full overflow-hidden flex flex-col">
+      <div className="flex flex-row flex-1 overflow-hidden w-full">
+        <div className="flex-1 h-full overflow-hidden p-4">
+          <DataTable
+            {...table}
+            heading={<DataViewSelect value={view} onValueChange={setView} />}
+          />
+        </div>
+        <div className="py-4 pr-4">
+          {selectedId ? (
+            <SidePanel showCloseButton onClose={() => setSelectedId(undefined)}>
+              <SidePanelContract />
+            </SidePanel>
+          ) : (
+            <SidePanel
+              showCloseButton={false}
+              onClose={() => setSelectedId(undefined)}
+            >
+              <SidePanelContractList contracts={table.rows} />
+            </SidePanel>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

apps/indexd/components/Data/Contracts/SidePanelContract.tsx

@@ -0,0 +1,85 @@
+import {
+  Heading,
+  HostMap,
+  Separator,
+  Text,
+  ValueCopyable,
+  ValueScFiat,
+} from '@siafoundation/design-system'
+import { useDataTableParams } from '@siafoundation/design-system'
+import { useMemo } from 'react'
+import { useContracts } from './useContracts'
+import { UsabilityBadges } from '../UsabilityBadges'
+import { StateBadge, StatusBadge } from './contractsColumns'
+import { InfoRow } from '../InfoRow'
+
+export function SidePanelContract() {
+  const { selectedId } = useDataTableParams('contractList')
+  const contracts = useContracts()
+  const contract = useMemo(
+    () => contracts.find((c) => c.id === selectedId),
+    [selectedId, contracts],
+  )
+  const mapContract = useMemo(() => {
+    if (!contract) return null
+    return {
+      id: contract.hostKey,
+      publicKey: contract.hostKey,
+      location: contract.location,
+    }
+  }, [contract])
+  if (!contract) {
+    return (
+      <div className="flex flex-col items-center justify-center overflow-hidden">
+        <Text>Contract not found</Text>
+      </div>
+    )
+  }
+  return (
+    <div className="flex flex-col overflow-hidden">
+      <Heading size="24" className="mr-[50px] truncate">
+        Contract: {contract?.id}
+      </Heading>
+      <HostMap
+        hosts={mapContract ? [mapContract] : []}
+        activeHost={null}
+        onHostMapClick={() => null}
+        showLegend={false}
+        scale={180}
+      />
+      <Separator className="mb-2" />
+      <Text size="16" weight="medium" className="mb-2">
+        Info
+      </Text>
+      <div className="flex flex-col gap-2">
+        <InfoRow label="State" value={<StateBadge value={contract.state} />} />
+        <InfoRow
+          label="Status"
+          value={<StatusBadge value={contract.good ? 'Good' : 'Bad'} />}
+        />
+        <InfoRow
+          label="Host public key"
+          value={
+            <ValueCopyable value={contract.hostKey} type="hostPublicKey" />
+          }
+        />
+        {contract.host?.addresses.map((address) => (
+          <InfoRow
+            key={address.address}
+            label={address.protocol}
+            value={<ValueCopyable value={address.address} maxLength={24} />}
+          />
+        ))}
+      </div>
+      <Separator className="mt-4 mb-2" />
+      <Text size="16" weight="medium" className="mb-2">
+        Usability
+      </Text>
+      <UsabilityBadges
+        usable={contract.usable}
+        usability={contract.host?.usability}
+        className="w-full overflow-hidden flex-wrap"
+      />
+    </div>
+  )
+}

apps/indexd/components/Data/Contracts/SidePanelContractList.tsx

@@ -0,0 +1,80 @@
+import {
+  Heading,
+  HostMap,
+  useDataTableParams,
+} from '@siafoundation/design-system'
+import { HostMapHost } from '@siafoundation/design-system'
+import { ContractData } from './types'
+import { Row } from '@tanstack/react-table'
+import { useMemo, useDeferredValue } from 'react'
+
+export function SidePanelContractList({
+  contracts,
+}: {
+  contracts: Row<ContractData>[]
+}) {
+  // Defer the hosts prop to avoid blocking UI on large updates.
+  const deferredContracts = useDeferredValue(contracts)
+  const { offset, limit, setSelectedId } = useDataTableParams('contractList')
+  const mapHosts = useMemo(() => {
+    if (deferredContracts.length > 100) {
+      // Group by country
+      const groupedHosts = deferredContracts.reduce(
+        (acc, contract) => {
+          const country = contract.original.location?.countryCode
+          if (!country || !contract.original.location) {
+            return acc
+          }
+          if (!acc[country]) {
+            acc[country] = {
+              type: 'group',
+              id: contract.original.id,
+              location: {
+                latitude: contract.original.location?.latitude,
+                longitude: contract.original.location?.longitude,
+                countryCode: contract.original.location?.countryCode,
+              },
+            }
+          }
+          return acc
+        },
+        {} as {
+          [key: string]: HostMapHost
+        },
+      )
+      return Object.values(groupedHosts)
+    }
+    return deferredContracts
+      .slice(offset, offset + limit)
+      .map(({ original: contract }) => {
+        if (!contract.location) {
+          return null
+        }
+        const hostData: HostMapHost = {
+          id: contract.id,
+          publicKey: contract.id,
+          location: {
+            latitude: contract.location.latitude,
+            longitude: contract.location.longitude,
+            countryCode: contract.location.countryCode,
+          },
+        }
+        return hostData
+      })
+      .filter((contract) => contract !== null)
+  }, [deferredContracts, offset, limit])
+  return (
+    <div className="flex flex-col overflow-hidden">
+      <Heading size="24" className="mb-2">
+        Contracts ({contracts.length})
+      </Heading>
+      <HostMap
+        hosts={mapHosts}
+        activeHost={null}
+        onHostMapClick={(id) => setSelectedId(id)}
+        scale={180}
+        showLegend={false}
+      />
+    </div>
+  )
+}