feat(indexd): contract explorer

Author: alexfreska

.changeset/dark-women-marry.md

@@ -0,0 +1,5 @@
+---
+'indexd': minor
+---
+
+The app now has a contract explorer with contract and related host metadata.

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,86 @@
+import {
+  Heading,
+  HostMap,
+  Separator,
+  Text,
+  ValueCopyable,
+} 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.host?.location,
+      v2Settings: contract.host?.settings,
+      usable: contract.host?.usable,
+    }
+  }, [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.host?.usable || false}
+        usability={contract.host?.usability}
+        className="w-full overflow-hidden flex-wrap"
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,38 @@
+import {
+  Heading,
+  HostMap,
+  useDataTableParams,
+} from '@siafoundation/design-system'
+import { ContractData } from './types'
+import { Row } from '@tanstack/react-table'
+import { useMapHosts } from '../useMapHosts'
+
+export function SidePanelContractList({
+  contracts,
+}: {
+  contracts: Row<ContractData>[]
+}) {
+  const { setSelectedId } = useDataTableParams('contractList')
+  const mapHosts = useMapHosts({
+    hosts: contracts.map((contract) => ({
+      ...contract.original,
+      settings: contract.original.host?.settings,
+      usable: contract.original.host?.usable,
+      location: contract.original.host?.location,
+    })),
+  })
+  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>
+  )
+}