Merge pull request #269 from beck-8/feat/service-providers-reachable-endorsed

feat(service-providers): default to reachable nodes and add endorsed provider badge

Author: rjan90

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.4.7/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.4.9/schema.json",
   "vcs": {
     "enabled": true,
     "clientKind": "git",

src/app/service-providers/components/DesktopTableFilters.tsx

@@ -14,6 +14,7 @@ import { CapacityFilter } from './CapacityFilter'
 import { IpniFilter } from './IpniFilter'
 import { LocationFilter } from './LocationFilter'
 import { ProvingPeriodFilter } from './ProvingPeriodFilter'
+import { ReachableFilter } from './ReachableFilter'
 import { ServiceTierFilter } from './ServiceTierFilter'
 import type { useFilterOptions } from '../hooks/use-filter-options'
 import { useFilterQueryState } from '../hooks/use-filter-query-state'
@@ -72,6 +73,7 @@ export function DesktopTableFilters({ options }: DesktopTableFiltersProps) {
                   provingPeriodMin={provingPeriodMin}
                   provingPeriodMax={provingPeriodMax}
                 />
+                <ReachableFilter />
                 {ipniOptions.length > 1 && <IpniFilter options={ipniOptions} />}
                 {serviceTierOptions.length > 1 && (
                   <ServiceTierFilter options={serviceTierOptions} />

src/app/service-providers/components/MobileTableFilters.tsx

@@ -18,6 +18,7 @@ import { CapacityFilter } from './CapacityFilter'
 import { IpniFilter } from './IpniFilter'
 import { LocationFilter } from './LocationFilter'
 import { ProvingPeriodFilter } from './ProvingPeriodFilter'
+import { ReachableFilter } from './ReachableFilter'
 import { ServiceTierFilter } from './ServiceTierFilter'
 import type { useFilterOptions } from '../hooks/use-filter-options'
 import { useFilterQueryState } from '../hooks/use-filter-query-state'
@@ -74,6 +75,7 @@ export function MobileTableFilters({ options }: MobileTableFiltersProps) {
             provingPeriodMin={provingPeriodMin}
             provingPeriodMax={provingPeriodMax}
           />
+          <ReachableFilter />
 
           {ipniOptions.length > 1 && <IpniFilter options={ipniOptions} />}
 

src/app/service-providers/components/ReachableFilter.tsx

@@ -0,0 +1,32 @@
+import { Fieldset } from '@headlessui/react'
+
+import { CheckboxesContainer } from '@/components/CheckboxesContainer'
+import { CheckboxWithLabel } from '@/components/CheckboxWithLabel'
+import { FilterHeading } from '@/components/FilterHeading'
+
+import { useFilterQueryState } from '../hooks/use-filter-query-state'
+
+const REACHABLE_FILTER_OPTIONS = [
+  { value: 'true', label: 'Accessible' },
+  { value: 'false', label: 'Unavailable' },
+] as const
+
+export function ReachableFilter() {
+  const { filterQueries, toggleFilterQuery } = useFilterQueryState()
+
+  return (
+    <Fieldset>
+      <FilterHeading>Node Accessibility</FilterHeading>
+      <CheckboxesContainer>
+        {REACHABLE_FILTER_OPTIONS.map((option) => (
+          <CheckboxWithLabel
+            key={option.value}
+            checked={filterQueries.reachable.includes(option.value)}
+            onChange={() => toggleFilterQuery('reachable', option.value)}
+            label={option.label}
+          />
+        ))}
+      </CheckboxesContainer>
+    </Fieldset>
+  )
+}

src/app/service-providers/components/ServiceProvidersTable.tsx

@@ -101,6 +101,11 @@ export function ServiceProvidersTable({ data }: ServiceProvidersTableProps) {
         </div>
       </div>
 
+      <p className="mb-3 text-xs text-(--color-text-muted)">
+        Legend: <span aria-hidden>🏅</span> Endorsed = Endorsed (EndorsementSet)
+        | Warm storage = Approved (FWSS)
+      </p>
+
       {hasSearchResults ? (
         <TanstackTable table={table} maxHeight="100vh" />
       ) : (

src/app/service-providers/data/column-definition.tsx

@@ -17,6 +17,7 @@ import {
   ipniFilterFn,
   locationFilterFn,
   provingPeriodRangeFilterFn,
+  reachableFilterFn,
   serviceTierFilterFn,
 } from '../utils/service-provider-filters'
 
@@ -40,6 +41,7 @@ export const columns = [
           description={row.description}
           address={row.serviceProviderAddress}
           serviceUrl={row.serviceUrl}
+          isEndorsed={row.isEndorsed}
         />
       )
     },
@@ -53,6 +55,7 @@ export const columns = [
     },
     sortingFn: sortSoftwareVersion,
     sortUndefined: 'last',
+    filterFn: reachableFilterFn,
   }),
   columnHelper.accessor('isActive', {
     id: 'serviceOffered',

src/app/service-providers/hooks/use-filter-query-state.ts

@@ -10,8 +10,11 @@ import type { ServiceTier } from '@/utils/service-tier'
 import { toggleValueInArray } from '@/utils/toggle-value-in-array'
 
 import { parseNumericInput } from '../utils/parse-numeric-input'
+import { parseAsReachableFilterValue } from '../utils/parse-reachable-filter-value'
 import { parseAsServiceTier } from '../utils/parse-service-tier'
 
+export type ReachableFilterValue = 'true' | 'false'
+
 export type FilterState = {
   location: Array<string>
   capacityMin: number | null
@@ -20,8 +23,11 @@ export type FilterState = {
   provingPeriodMax: number | null
   ipni: Array<string>
   serviceTier: Array<ServiceTier>
+  reachable: Array<ReachableFilterValue>
 }
 
+const DEFAULT_REACHABLE_FILTER: Array<ReachableFilterValue> = ['true']
+
 const filterParsers = {
   location: parseAsArrayOf(parseAsString).withDefault([]),
   capacityMin: parseAsInteger,
@@ -30,6 +36,9 @@ const filterParsers = {
   provingPeriodMax: parseAsInteger,
   ipni: parseAsArrayOf(parseAsString).withDefault([]),
   serviceTier: parseAsArrayOf(parseAsServiceTier).withDefault([]),
+  reachable: parseAsArrayOf(parseAsReachableFilterValue).withDefault(
+    DEFAULT_REACHABLE_FILTER,
+  ),
 }
 
 type ArrayKeys<T> = {
@@ -77,7 +86,9 @@ export function useFilterQueryState() {
 
   const activeFilterCount = useMemo(() => {
     return Object.entries(filterQueries).reduce((count, [_, value]) => {
-      if (Array.isArray(value)) return count + (value.length > 0 ? 1 : 0)
+      if (Array.isArray(value)) {
+        return count + (value.length > 0 ? 1 : 0)
+      }
       if (value != null) return count + 1
       return count
     }, 0)

src/app/service-providers/utils/map-filter-state-to-column-filters.ts

@@ -22,6 +22,7 @@ export function mapFilterStateToColumnFilters({
   provingPeriodMax,
   ipni,
   serviceTier,
+  reachable,
 }: FilterState) {
   const columnFilters: ServiveProviderColumnFilters = []
 
@@ -49,6 +50,9 @@ export function mapFilterStateToColumnFilters({
   if (serviceTier.length > 0) {
     columnFilters.push({ id: 'serviceOffered', value: serviceTier })
   }
+  if (reachable.length > 0) {
+    columnFilters.push({ id: 'softwareVersion', value: reachable })
+  }
 
   return columnFilters
 }

src/app/service-providers/utils/parse-reachable-filter-value.ts

@@ -0,0 +1,13 @@
+import { createParser } from 'nuqs'
+
+import type { ReachableFilterValue } from '../hooks/use-filter-query-state'
+
+export const parseAsReachableFilterValue = createParser({
+  parse: (value) => {
+    if (value === 'true' || value === 'false') {
+      return value as ReachableFilterValue
+    }
+    return null
+  },
+  serialize: (value) => value,
+})

src/app/service-providers/utils/service-provider-filters.ts

@@ -32,6 +32,25 @@ export const ipniFilterFn: FilterFn<ServiceProvider> = (
   return ipniArray.includes(ipniValue)
 }
 
+export const reachableFilterFn: FilterFn<ServiceProvider> = (
+  row,
+  _columnId,
+  filterValue,
+) => {
+  const reachableArray = filterValue as FilterState['reachable']
+  if (reachableArray.length === 0) return true
+
+  // Reachability proxy: Curio only populates softwareVersion when the node is reachable.
+  // Treat any defined value (including empty string) as reachable.
+  const hasSoftwareVersion =
+    row.original.softwareVersion !== null &&
+    row.original.softwareVersion !== undefined
+  const reachableValue: FilterState['reachable'][number] = hasSoftwareVersion
+    ? 'true'
+    : 'false'
+  return reachableArray.includes(reachableValue)
+}
+
 export const capacityRangeFilterFn: FilterFn<ServiceProvider> = (
   row,
   _columnId,