feat: hostd v2 changes

.changeset/chatty-hats-flash.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+The TransactionDetailsDialog now supports an Event type instead of txType.

.changeset/famous-pears-melt.md

@@ -0,0 +1,7 @@
+---
+'@siafoundation/hostd-js': minor
+'@siafoundation/hostd-react': minor
+'@siafoundation/hostd-types': minor
+---
+
+Updated with v2 endpoints and data types. Closes https://github.com/SiaFoundation/hostd/issues/440

.changeset/kind-trains-bathe.md

@@ -0,0 +1,9 @@
+---
+'@siafoundation/hostd-js': minor
+'@siafoundation/hostd-react': minor
+'@siafoundation/hostd-types': minor
+'@siafoundation/types': minor
+'@siafoundation/walletd-types': minor
+---
+
+Core Event types have been moved to the core types library. Closes https://github.com/SiaFoundation/hostd/issues/440

.changeset/old-hounds-camp.md

@@ -0,0 +1,5 @@
+---
+'hostd': minor
+---
+
+The app has been updated to use the new v2 endpoints and data types. Closes https://github.com/SiaFoundation/hostd/issues/440

.changeset/two-olives-whisper.md

@@ -0,0 +1,6 @@
+---
+'walletd': minor
+'@siafoundation/units': minor
+---
+
+Event and transaction utility methods have been moved to the units library.

apps/hostd/components/CmdRoot/WalletCmdGroup.tsx

@@ -3,7 +3,7 @@ import { routes } from '../../config/routes'
 import { useRouter } from 'next/router'
 import { useDialog } from '../../contexts/dialog'
 import { CommandGroup, CommandItemNav, CommandItemSearch } from './Item'
-import { useStateHost } from '@siafoundation/hostd-react'
+import { useWallet } from '@siafoundation/hostd-react'
 import { Page } from './types'
 
 const commandPage = {
@@ -20,7 +20,7 @@ type Props = {
 export function WalletCmdGroup({ currentPage, parentPage, pushPage }: Props) {
   const { openDialog, closeDialog } = useDialog()
   const router = useRouter()
-  const state = useStateHost({
+  const wallet = useWallet({
     config: {
       swr: {
         revalidateOnFocus: false,
@@ -81,7 +81,7 @@ export function WalletCmdGroup({ currentPage, parentPage, pushPage }: Props) {
         currentPage={currentPage}
         commandPage={commandPage}
         onSelect={() => {
-          copyToClipboard(state.data?.walletAddress, 'wallet address')
+          copyToClipboard(wallet.data?.address, 'wallet address')
           closeDialog()
         }}
       >

apps/hostd/components/Config/AnnounceButton.tsx

@@ -10,7 +10,7 @@ import { useDialog } from '../../contexts/dialog'
 import {
   useSettings,
   useSettingsAnnounce,
-  useStateHost,
+  useHostState,
   useTxPoolFee,
 } from '@siafoundation/hostd-react'
 import { humanSiacoin } from '@siafoundation/units'
@@ -21,7 +21,7 @@ export function AnnounceButton() {
   const { openConfirmDialog } = useDialog()
   const txpoolFee = useTxPoolFee()
   const settingsAnnounce = useSettingsAnnounce()
-  const host = useStateHost()
+  const host = useHostState()
   const settings = useSettings({
     config: {
       swr: {

apps/hostd/components/HostdTestnetWarningBanner.tsx

@@ -1,18 +1,18 @@
 import { TestnetWarningBanner } from '@siafoundation/design-system'
-import { useStateHost } from '@siafoundation/hostd-react'
+import { useConsensusNetwork } from '@siafoundation/hostd-react'
 
 export function HostdTestnetWarningBanner() {
-  const host = useStateHost({
+  const host = useConsensusNetwork({
     config: {
       swr: {
         revalidateOnFocus: false,
       },
     },
   })
 
-  if (!host.data || host.data.network === 'Mainnet') {
+  if (!host.data || host.data.name === 'mainnet') {
     return null
   }
 
-  return <TestnetWarningBanner testnetName={host.data.network} />
+  return <TestnetWarningBanner testnetName={host.data.name} />
 }

apps/hostd/components/Profile/index.tsx

@@ -7,8 +7,10 @@ import {
 } from '@siafoundation/design-system'
 import {
   useSettings,
-  useStateHost,
+  useHostState,
   useSyncerPeers,
+  useWallet,
+  useConsensusNetwork,
 } from '@siafoundation/hostd-react'
 import { useSyncStatus } from '../../hooks/useSyncStatus'
 import { useDialog } from '../../contexts/dialog'
@@ -17,7 +19,21 @@ import { humanTime } from '@siafoundation/units'
 
 export function Profile() {
   const { openDialog } = useDialog()
-  const state = useStateHost({
+  const state = useHostState({
+    config: {
+      swr: {
+        revalidateOnFocus: false,
+      },
+    },
+  })
+  const wallet = useWallet({
+    config: {
+      swr: {
+        revalidateOnFocus: false,
+      },
+    },
+  })
+  const network = useConsensusNetwork({
     config: {
       swr: {
         revalidateOnFocus: false,
@@ -94,7 +110,7 @@ export function Profile() {
           <ValueCopyable
             size="14"
             maxLength={24}
-            value={state.data?.walletAddress}
+            value={wallet.data?.address}
             type="address"
           />
         </div>
@@ -114,7 +130,7 @@ export function Profile() {
           Network
         </Label>
         <div className="flex-1 flex justify-end overflow-hidden">
-          <Text size="14">{state.data?.network}</Text>
+          <Text size="14">{network.data?.name}</Text>
         </div>
       </div>
       <div className="flex gap-2 justify-between items-center">

apps/hostd/components/Wallet/StateError.tsx

@@ -0,0 +1,15 @@
+import { Text } from '@siafoundation/design-system'
+import { MisuseOutline32 } from '@siafoundation/react-icons'
+
+export function StateError() {
+  return (
+    <div className="flex flex-col gap-10 justify-center items-center h-[400px]">
+      <Text>
+        <MisuseOutline32 className="scale-[200%]" />
+      </Text>
+      <Text color="subtle" className="text-center max-w-[500px]">
+        Error fetching transactions.
+      </Text>
+    </div>
+  )
+}

apps/hostd/components/Wallet/StateNoneMatching.tsx

@@ -0,0 +1,15 @@
+import { Text } from '@siafoundation/design-system'
+import { Filter32 } from '@siafoundation/react-icons'
+
+export function StateNoneMatching() {
+  return (
+    <div className="flex flex-col gap-10 justify-center items-center h-[400px]">
+      <Text>
+        <Filter32 className="scale-[200%]" />
+      </Text>
+      <Text color="subtle" className="text-center max-w-[500px]">
+        No transactions matching filters.
+      </Text>
+    </div>
+  )
+}

apps/hostd/components/Wallet/StateNoneYet.tsx

@@ -0,0 +1,15 @@
+import { Text } from '@siafoundation/design-system'
+import { Money32 } from '@siafoundation/react-icons'
+
+export function StateNoneYet() {
+  return (
+    <div className="flex flex-col gap-10 justify-center items-center h-[400px]">
+      <Text>
+        <Money32 className="scale-[200%]" />
+      </Text>
+      <Text color="subtle" className="text-center max-w-[500px]">
+        The wallet has no transactions yet.
+      </Text>
+    </div>
+  )
+}

apps/hostd/components/Wallet/index.tsx

@@ -1,8 +1,7 @@
 import {
-  EntityList,
   WalletLayoutActions,
   BalanceEvolution,
-  PaginatorUnknownTotal,
+  Table,
 } from '@siafoundation/design-system'
 import { useWallet } from '@siafoundation/hostd-react'
 import { useDialog } from '../../contexts/dialog'
@@ -11,18 +10,30 @@ import BigNumber from 'bignumber.js'
 import { HostdSidenav } from '../HostdSidenav'
 import { HostdAuthedLayout } from '../HostdAuthedLayout'
 import { useSyncStatus } from '../../hooks/useSyncStatus'
-import { EmptyState } from './EmptyState'
 import { useTransactions } from '../../contexts/transactions'
 import { WalletFilterBar } from './WalletFilterBar'
+import { StateNoneMatching } from './StateNoneMatching'
+import { StateNoneYet } from './StateNoneYet'
+import { StateError } from './StateError'
 
 export function Wallet() {
   const { openDialog } = useDialog()
   const wallet = useWallet()
   const { isSynced, isWalletSynced, syncPercent, walletScanPercent } =
     useSyncStatus()
 
-  const { dataset, balances, metrics, offset, limit, dataState, pageCount } =
-    useTransactions()
+  const {
+    balances,
+    metrics,
+    dataset,
+    dataState,
+    columns,
+    cellContext,
+    sortableColumns,
+    sortDirection,
+    sortField,
+    toggleSort,
+  } = useTransactions()
 
   return (
     <HostdAuthedLayout
@@ -51,26 +62,33 @@ export function Wallet() {
       }
       stats={<WalletFilterBar />}
     >
-      <div className="p-6 flex flex-col gap-5">
+      <div className="flex flex-col gap-4 px-6 py-7 min-w-fit">
         {balances?.length && balances.find((b) => b.sc) ? (
           <BalanceEvolution
             balances={balances}
             isLoading={metrics.isValidating}
           />
         ) : null}
-        <EntityList
-          title="Transactions"
-          dataset={dataset}
+        <Table
+          testId="transactionsTable"
           isLoading={dataState === 'loading'}
-          emptyState={<EmptyState />}
-          actions={
-            <PaginatorUnknownTotal
-              offset={offset}
-              limit={limit}
-              pageTotal={pageCount}
-              isLoading={dataState === 'loading'}
-            />
+          emptyState={
+            dataState === 'noneMatchingFilters' ? (
+              <StateNoneMatching />
+            ) : dataState === 'noneYet' ? (
+              <StateNoneYet />
+            ) : dataState === 'error' ? (
+              <StateError />
+            ) : null
           }
+          pageSize={6}
+          data={dataset}
+          context={cellContext}
+          columns={columns}
+          sortableColumns={sortableColumns}
+          sortDirection={sortDirection}
+          sortField={sortField}
+          toggleSort={toggleSort}
         />
       </div>
     </HostdAuthedLayout>

apps/hostd/config/routes.ts

@@ -1,4 +1,4 @@
-import { stateHostRoute } from '@siafoundation/hostd-types'
+import { hostStateRoute } from '@siafoundation/hostd-types'
 
 export const routes = {
   home: '/',
@@ -28,4 +28,4 @@ export const routes = {
   login: '/login',
 }
 
-export const connectivityRoute = stateHostRoute
+export const connectivityRoute = hostStateRoute

apps/hostd/contexts/config/index.tsx

@@ -17,7 +17,7 @@ import {
   checkIfAnyResourcesErrored,
 } from './resources'
 import { useOnValid } from './useOnValid'
-import { useStateHost } from '@siafoundation/hostd-react'
+import { useHostState } from '@siafoundation/hostd-react'
 
 export function useConfigMain() {
   const { settings, settingsPinned, dynDNSCheck } = useResources()
@@ -54,7 +54,7 @@ export function useConfigMain() {
     [resources]
   )
 
-  const state = useStateHost()
+  const state = useHostState()
   const pinningEnabled = state.data?.explorer.enabled
   const revalidateAndResetForm = useCallback(async () => {
     const _settings = await settings.mutate()

apps/hostd/contexts/config/useForm.tsx

@@ -4,7 +4,7 @@ import { useEffect, useMemo, useRef } from 'react'
 import { getFields } from './fields'
 import useLocalStorageState from 'use-local-storage-state'
 import { useSiaCentralExchangeRates } from '@siafoundation/sia-central-react'
-import { useStateHost } from '@siafoundation/hostd-react'
+import { useHostState } from '@siafoundation/hostd-react'
 import { useAutoCalculatedFields } from './useAutoCalculatedFields'
 
 export function useForm() {
@@ -25,7 +25,7 @@ export function useForm() {
   })
 
   const rates = useSiaCentralExchangeRates()
-  const state = useStateHost()
+  const state = useHostState()
   const pinningEnabled = state.data?.explorer.enabled
   // Field validation is only re-applied on re-mount,
   // so we pass a ref with latest data that can be used interally.

apps/hostd/contexts/config/useOnValid.tsx

@@ -8,9 +8,9 @@ import { SettingsData } from './types'
 import { transformUpSettings, transformUpSettingsPinned } from './transform'
 import { Resources } from './resources'
 import {
+  useHostState,
   useSettingsPinnedUpdate,
   useSettingsUpdate,
-  useStateHost,
 } from '@siafoundation/hostd-react'
 
 export function useOnValid({
@@ -20,16 +20,15 @@ export function useOnValid({
   resources: Resources
   revalidateAndResetForm: () => Promise<void>
 }) {
-  const state = useStateHost()
-  const settingsUpdate = useSettingsUpdate()
-  const settingsPinnedUpdate = useSettingsPinnedUpdate()
-  const host = useStateHost({
+  const state = useHostState({
     config: {
       swr: {
         refreshInterval: minutesInMilliseconds(1),
       },
     },
   })
+  const settingsUpdate = useSettingsUpdate()
+  const settingsPinnedUpdate = useSettingsPinnedUpdate()
   const onValid = useCallback(
     async (values: SettingsData) => {
       if (!resources) {
@@ -60,7 +59,7 @@ export function useOnValid({
         }
 
         const needsToAnnounce =
-          host.data?.lastAnnouncement?.address !== values.netAddress
+          state.data?.lastAnnouncement?.address !== values.netAddress
         if (needsToAnnounce) {
           triggerSuccessToast({
             title: 'Settings have been saved',
@@ -86,7 +85,6 @@ export function useOnValid({
       settingsUpdate,
       settingsPinnedUpdate,
       revalidateAndResetForm,
-      host.data,
       state.data,
     ]
   )