feat: walletd api changes and app updates

.changeset/cool-buses-exercise.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/types': minor
+---
+
+The library now includes v2 types.

.changeset/fair-rats-return.md

@@ -0,0 +1,5 @@
+---
+'walletd': minor
+---
+
+The UI now uses the new daemon endpoints and changes. Closes https://github.com/SiaFoundation/walletd/issues/73

.changeset/neat-pumpkins-cheat.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/react-walletd': minor
+---
+
+The React hooks have been updated for the daemon endpoint changes. Closes https://github.com/SiaFoundation/walletd/issues/73

apps/walletd/components/Node/index.tsx

@@ -28,7 +28,8 @@ export function Node() {
   const { openDialog } = useDialog()
 
   const transactionCount = txPool.data
-    ? txPool.data.transactions.length + txPool.data.v2Transactions.length
+    ? (txPool.data.transactions?.length || 0) +
+      (txPool.data.v2Transactions?.length || 0)
     : 0
 
   return (

apps/walletd/components/Wallet/WalletActionsMenu.tsx

@@ -30,16 +30,16 @@ export function WalletActionsMenu() {
         isSynced={status.isSynced}
       />
       <AddressesButton />
-      {wallet?.type !== 'watch' && (
+      {wallet?.metadata.type !== 'watch' && (
         <Button
           size="small"
           variant="accent"
           onClick={() => {
-            if (wallet?.type === 'seed') {
+            if (wallet?.metadata.type === 'seed') {
               openDialog('walletSendSeed', {
                 walletId,
               })
-            } else if (wallet?.type === 'ledger') {
+            } else if (wallet?.metadata.type === 'ledger') {
               openDialog('walletSendLedger', {
                 walletId,
               })

apps/walletd/components/Wallet/WalletNavMenu.tsx

@@ -17,9 +17,9 @@ export function WalletNavMenu() {
           })
         }
         className="!p-0"
-        tip={walletTypes[wallet?.type]?.title}
+        tip={walletTypes[wallet?.metadata.type]?.title}
       >
-        {walletTypes[wallet?.type]?.icon}
+        {walletTypes[wallet?.metadata.type]?.icon}
       </Button>
     </div>
   )

apps/walletd/components/WalletAddresses/AddressContextMenu.tsx

@@ -18,7 +18,7 @@ type Props = {
 } & Omit<React.ComponentProps<typeof DropdownMenu>, 'children'>
 
 export function AddressContextMenu({
-  address: { walletId, id, index },
+  address: { walletId, id, metadata },
   ...props
 }: Props) {
   const { openDialog } = useDialog()
@@ -31,8 +31,8 @@ export function AddressContextMenu({
         onSelect={() =>
           openDialog('confirm', {
             title:
-              index !== undefined
-                ? `Remove address ${index}`
+              metadata.index !== undefined
+                ? `Remove address ${metadata.index}`
                 : 'Remove address',
             action: 'Remove',
             variant: 'red',
@@ -57,8 +57,8 @@ export function AddressContextMenu({
                 triggerErrorToast(`Failed to delete address: ${response.error}`)
               } else {
                 triggerSuccessToast(
-                  index !== undefined
-                    ? `Address ${index} removed.`
+                  metadata.index !== undefined
+                    ? `Address ${metadata.index} removed.`
                     : 'Address removed.'
                 )
               }

apps/walletd/components/WalletAddresses/AddressesActionsMenu.tsx

@@ -15,15 +15,15 @@ export function AddressesActionsMenu() {
       <Button
         variant="accent"
         onClick={() => {
-          if (wallet?.type === 'seed') {
+          if (wallet?.metadata.type === 'seed') {
             openDialog('walletAddressesGenerate', { walletId: id })
             return
           }
-          if (wallet?.type === 'watch') {
+          if (wallet?.metadata.type === 'watch') {
             openDialog('walletAddressesAdd', { walletId: id })
             return
           }
-          if (wallet?.type === 'ledger') {
+          if (wallet?.metadata.type === 'ledger') {
             openDialog('walletLedgerAddressGenerate', { walletId: id })
             return
           }

apps/walletd/components/WalletContextMenu.tsx

@@ -18,18 +18,18 @@ type Props = {
 } & Omit<React.ComponentProps<typeof DropdownMenu>, 'children'>
 
 export function WalletContextMenu({
-  wallet: { id, type, status, lock, unlock },
+  wallet: { id, metadata, state, actions },
   ...props
 }: Props) {
   const { openDialog } = useDialog()
   return (
     <DropdownMenu {...props}>
       <DropdownMenuLabel>Actions</DropdownMenuLabel>
-      {type === 'seed' ? (
-        status === 'unlocked' ? (
+      {metadata.type === 'seed' ? (
+        state.status === 'unlocked' ? (
           <DropdownMenuItem
             onClick={(e) => e.stopPropagation()}
-            onSelect={() => lock()}
+            onSelect={() => actions.lock()}
           >
             <DropdownMenuLeftSlot>
               <Locked16 />
@@ -39,7 +39,7 @@ export function WalletContextMenu({
         ) : (
           <DropdownMenuItem
             onClick={(e) => e.stopPropagation()}
-            onSelect={() => unlock()}
+            onSelect={() => actions.unlock()}
           >
             <DropdownMenuLeftSlot>
               <Unlocked16 />

apps/walletd/contexts/addresses/columns.tsx

@@ -72,13 +72,13 @@ export const columns: AddressesTableColumn[] = [
     id: 'index',
     label: 'index',
     category: 'general',
-    render: ({ data: { index } }) => {
-      if (index === undefined) {
+    render: ({ data: { metadata } }) => {
+      if (metadata.index === undefined) {
         return null
       }
       return (
         <div className="flex flex-col gap-2">
-          <Text>{index.toLocaleString()}</Text>
+          <Text>{metadata.index.toLocaleString()}</Text>
         </div>
       )
     },

apps/walletd/contexts/addresses/dataset.tsx

@@ -0,0 +1,67 @@
+import {
+  useDatasetEmptyState,
+  ClientFilterItem,
+} from '@siafoundation/design-system'
+import { useWalletAddresses } from '@siafoundation/react-walletd'
+import { useMemo } from 'react'
+import { AddressData } from './types'
+import { useDialog } from '../dialog'
+
+export function useDataset({
+  walletId,
+  response,
+  filters,
+}: {
+  walletId: string
+  response: ReturnType<typeof useWalletAddresses>
+  filters: ClientFilterItem<AddressData>[]
+}) {
+  const { openDialog } = useDialog()
+  const dataset = useMemo<AddressData[] | null>(() => {
+    if (!response.data) {
+      return null
+    }
+    const data: AddressData[] = response.data.map((addressObject) => {
+      const { address, description, metadata, spendPolicy } = addressObject
+      return {
+        id: address,
+        address,
+        description: description,
+        spendPolicy: spendPolicy,
+        metadata: {
+          index: metadata?.index as number,
+          publicKey: metadata?.publicKey as string,
+        },
+        walletId,
+        onClick: () =>
+          openDialog('addressUpdate', {
+            walletId: walletId,
+            address,
+          }),
+        raw: addressObject,
+      }
+    })
+    return data
+  }, [response.data, openDialog, walletId])
+
+  const dataState = useDatasetEmptyState(
+    dataset,
+    response.isValidating,
+    response.error,
+    filters
+  )
+
+  const lastIndex = (dataset || []).reduce(
+    (highest, { metadata }) =>
+      metadata.index > highest ? metadata.index : highest,
+    -1
+  )
+
+  return {
+    dataset,
+    dataState,
+    error: response.error,
+    lastIndex,
+    filters,
+  }
+}

apps/walletd/contexts/addresses/index.tsx

@@ -1,6 +1,5 @@
 import {
   useTableState,
-  useDatasetEmptyState,
   useClientFilters,
   useClientFilteredDataset,
 } from '@siafoundation/design-system'
@@ -15,12 +14,11 @@ import {
 } from './types'
 import { columns } from './columns'
 import { useRouter } from 'next/router'
-import { useDialog } from '../dialog'
 import { useSiascanUrl } from '../../hooks/useSiascanUrl'
 import { defaultDatasetRefreshInterval } from '../../config/swr'
+import { useDataset } from './dataset'
 
 export function useAddressesMain() {
-  const { openDialog } = useDialog()
   const router = useRouter()
   const walletId = router.query.id as string
 
@@ -36,31 +34,15 @@ export function useAddressesMain() {
     },
   })
 
-  const dataset = useMemo<AddressData[] | null>(() => {
-    if (!response.data) {
-      return null
-    }
-    const data: AddressData[] = Object.entries(response.data || {}).map(
-      ([address, meta]) => ({
-        id: address,
-        address,
-        description: meta.description as string,
-        index: meta.index as number,
-        publicKey: meta.publicKey as string,
-        walletId,
-        onClick: () =>
-          openDialog('addressUpdate', {
-            walletId: walletId,
-            address,
-          }),
-      })
-    )
-    return data
-  }, [response.data, openDialog, walletId])
-
   const { filters, setFilter, removeFilter, removeLastFilter, resetFilters } =
     useClientFilters<AddressData>()
 
+  const { dataset, dataState, lastIndex } = useDataset({
+    walletId,
+    response,
+    filters,
+  })
+
   const {
     configurableColumns,
     enabledColumns,
@@ -96,18 +78,6 @@ export function useAddressesMain() {
     [enabledColumns]
   )
 
-  const dataState = useDatasetEmptyState(
-    dataset,
-    response.isValidating,
-    response.error,
-    filters
-  )
-
-  const lastIndex = (dataset || []).reduce(
-    (highest, { index }) => (index > highest ? index : highest),
-    -1
-  )
-
   const siascanUrl = useSiascanUrl()
   const cellContext = useMemo<CellContext>(
     () => ({

apps/walletd/contexts/addresses/types.ts

@@ -1,3 +1,5 @@
+import { WalletAddress } from '@siafoundation/react-walletd'
+
 export type CellContext = {
   siascanUrl: string
 }
@@ -6,9 +8,13 @@ export type AddressData = {
   id: string
   address: string
   description?: string
-  publicKey?: string
-  index?: number
+  spendPolicy?: string
+  metadata: {
+    index?: number
+    publicKey?: string
+  }
   walletId: string
+  raw?: WalletAddress
 }
 
 export type TableColumnId = 'actions' | 'address' | 'index'

apps/walletd/contexts/events/columns.tsx

@@ -43,14 +43,14 @@ export const columns: EventsTableColumn[] = [
     id: 'transactionId',
     label: 'transaction ID',
     category: 'general',
-    render: ({ data: { transactionId }, context }) => {
-      if (!transactionId) {
+    render: ({ data: { id }, context }) => {
+      if (!id) {
         return null
       }
       return (
         <ValueCopyable
           size="12"
-          value={transactionId}
+          value={id}
           label="transaction ID"
           type="transaction"
           siascanUrl={context.siascanUrl}