fix: walletd events update

.changeset/gentle-zoos-love.md

@@ -0,0 +1,6 @@
+---
+'walletd': minor
+'@siafoundation/walletd-types': minor
+---
+
+Updated wallet events to include maturityHeight and renamed val to data. Closes https://github.com/SiaFoundation/walletd/issues/114

.changeset/six-fishes-check.md

@@ -0,0 +1,5 @@
+---
+'walletd': minor
+---
+
+The events list now shows the maturity height, transactions that have not reached this height are shown as locked. Closes https://github.com/SiaFoundation/walletd/issues/115

apps/walletd/contexts/events/columns.tsx

@@ -5,9 +5,11 @@ import {
   LoadingDots,
   ValueScFiat,
   ValueSf,
+  Tooltip,
 } from '@siafoundation/design-system'
 import { humanDate } from '@siafoundation/units'
 import { CellContext, EventData, TableColumnId } from './types'
+import { Locked16, Unlocked16 } from '@siafoundation/react-icons'
 
 type EventsTableColumn = TableColumn<TableColumnId, EventData, CellContext> & {
   fixed?: boolean
@@ -22,23 +24,6 @@ export const columns: EventsTableColumn[] = [
   //   cellClassName: 'w-[50px] !pl-2 !pr-4 [&+*]:!pl-0',
   //   render: ({ data: { name } }) => null,
   // },
-  // {
-  //   id: 'id',
-  //   label: 'ID',
-  //   category: 'general',
-  //   fixed: true,
-  //   render: ({ data: { id }, context }) => {
-  //     return (
-  //       <ValueCopyable
-  //         size="12"
-  //         maxLength={20}
-  //         value={id}
-  //         type="transaction"
-  //         siascanUrl={context.siascanUrl}
-  //       />
-  //     )
-  //   },
-  // },
   {
     id: 'transactionId',
     label: 'transaction ID',
@@ -75,7 +60,8 @@ export const columns: EventsTableColumn[] = [
     id: 'height',
     label: 'height',
     category: 'general',
-    render: ({ data: { height, pending } }) => {
+    contentClassName: 'justify-end',
+    render: ({ data: { height, pending, maturityHeight, isMature } }) => {
       if (pending) {
         return (
           <Text size="12" ellipsis>
@@ -86,8 +72,42 @@ export const columns: EventsTableColumn[] = [
       if (!height) {
         return null
       }
+      if (height && maturityHeight && maturityHeight > height) {
+        return (
+          <Tooltip
+            content={
+              isMature
+                ? 'The maturity height has been reached.'
+                : 'The maturity height has not been reached, therefore the output is still locked.'
+            }
+          >
+            <div className="flex flex-col gap-[5px]">
+              <div className="flex justify-end">
+                <Text
+                  size="12"
+                  font="mono"
+                  ellipsis
+                  color={isMature ? 'green' : 'red'}
+                  className="flex gap-1 items-center"
+                >
+                  {isMature ? <Unlocked16 /> : <Locked16 />}
+                  {maturityHeight.toLocaleString()}
+                </Text>
+              </div>
+              <div className="flex justify-between items-end gap-1">
+                <div className="pl-[8px] pb-[6px]">
+                  <div className="border-l border-b border-gray-800 dark:border-graydark-800 h-[20px] w-[7px]" />
+                </div>
+                <Text size="12" font="mono" color="subtle" ellipsis>
+                  {height.toLocaleString()}
+                </Text>
+              </div>
+            </div>
+          </Tooltip>
+        )
+      }
       return (
-        <Text size="12" ellipsis>
+        <Text size="12" font="mono" ellipsis>
           {height.toLocaleString()}
         </Text>
       )
@@ -97,6 +117,7 @@ export const columns: EventsTableColumn[] = [
     id: 'timestamp',
     label: 'timestamp',
     category: 'general',
+    contentClassName: 'justify-end',
     render: ({ data: { timestamp, pending } }) => {
       if (pending) {
         return (

apps/walletd/contexts/events/index.tsx

@@ -3,7 +3,11 @@ import {
   useDatasetEmptyState,
   useServerFilters,
 } from '@siafoundation/design-system'
-import { useWalletEvents, useWalletTxPool } from '@siafoundation/walletd-react'
+import {
+  useNodeState,
+  useWalletEvents,
+  useWalletTxPool,
+} from '@siafoundation/walletd-react'
 import { createContext, useContext, useMemo } from 'react'
 import {
   CellContext,
@@ -17,6 +21,7 @@ import { useRouter } from 'next/router'
 import BigNumber from 'bignumber.js'
 import { useSiascanUrl } from '../../hooks/useSiascanUrl'
 import { defaultDatasetRefreshInterval } from '../../config/swr'
+import { useSyncStatus } from '../../hooks/useSyncStatus'
 
 const defaultLimit = 100
 
@@ -52,6 +57,7 @@ export function useEventsMain() {
     },
   })
 
+  const syncStatus = useSyncStatus()
   const dataset = useMemo<EventData[] | null>(() => {
     if (!responseEvents.data || !responseTxPool.data) {
       return null
@@ -61,21 +67,22 @@ export function useEventsMain() {
       timestamp: 0,
       pending: true,
       type: e.type,
+      isMature: false,
       amount: new BigNumber(e.received).minus(e.sent),
     }))
     const dataEvents: EventData[] = responseEvents.data.map((e, index) => {
       let amountSc = new BigNumber(0)
       let amountSf = 0
       if (e.type === 'transaction') {
         const inputsScTotal =
-          e.val?.siacoinInputs?.reduce((acc, o) => {
+          e.data?.siacoinInputs?.reduce((acc, o) => {
             if (e.relevant.includes(o.siacoinOutput.address)) {
               return acc.plus(o.siacoinOutput.value)
             }
             return acc
           }, new BigNumber(0)) || new BigNumber(0)
         const outputsScTotal =
-          e.val?.siacoinOutputs?.reduce((acc, o) => {
+          e.data?.siacoinOutputs?.reduce((acc, o) => {
             if (e.relevant.includes(o.siacoinOutput.address)) {
               return acc.plus(o.siacoinOutput.value)
             }
@@ -84,14 +91,14 @@ export function useEventsMain() {
         amountSc = outputsScTotal.minus(inputsScTotal)
 
         const inputsSfTotal =
-          e.val?.siafundInputs?.reduce((acc, o) => {
+          e.data?.siafundInputs?.reduce((acc, o) => {
             if (e.relevant.includes(o.siafundElement.siafundOutput.address)) {
               return acc + o.siafundElement.siafundOutput.value
             }
             return acc
           }, 0) || 0
         const outputsSfTotal =
-          e.val?.siafundOutputs?.reduce((acc, o) => {
+          e.data?.siafundOutputs?.reduce((acc, o) => {
             if (e.relevant.includes(o.siafundOutput.address)) {
               return acc + o.siafundOutput.value
             }
@@ -101,31 +108,34 @@ export function useEventsMain() {
       }
 
       if (e.type === 'miner payout') {
-        amountSc = new BigNumber(e.val.siacoinOutput.siacoinOutput.value)
+        amountSc = new BigNumber(e.data.siacoinOutput.siacoinOutput.value)
       }
       if (e.type === 'foundation subsidy') {
-        amountSc = new BigNumber(e.val.siacoinOutput.siacoinOutput.value)
+        amountSc = new BigNumber(e.data.siacoinOutput.siacoinOutput.value)
       }
 
+      const isMature = e.maturityHeight <= syncStatus.nodeBlockHeight
       const res: EventData = {
         id: e.id,
         type: e.type,
         timestamp: new Date(e.timestamp).getTime(),
+        maturityHeight: e.maturityHeight,
+        isMature,
         height: e.index.height,
         pending: false,
         amountSc,
         amountSf,
       }
       if (e.type === 'transaction') {
-        res.fee = new BigNumber(e.val.fee)
+        res.fee = new BigNumber(e.data.fee)
       }
       if (e.type === 'contract payout') {
-        res.contractId = e.val.fileContract.id
+        res.contractId = e.data.fileContract.id
       }
       return res
     })
     return [...dataTxPool.reverse(), ...dataEvents]
-  }, [responseEvents.data, responseTxPool.data])
+  }, [responseEvents.data, responseTxPool.data, syncStatus.nodeBlockHeight])
 
   const {
     configurableColumns,

apps/walletd/contexts/events/types.ts

@@ -9,17 +9,19 @@ export type EventData = {
   transactionId?: string
   timestamp: number
   height?: number
+  maturityHeight?: number
+  isMature?: boolean
   pending: boolean
   type: string
   fee?: BigNumber
   amountSc?: BigNumber
   amountSf?: number
   contractId?: string
+  className?: string
 }
 
 export type TableColumnId =
   // | 'actions'
-  // | 'id'
   | 'transactionId'
   | 'type'
   | 'height'
@@ -31,7 +33,6 @@ export type TableColumnId =
 
 export const columnsDefaultVisible: TableColumnId[] = [
   // 'actions',
-  // 'id',
   'transactionId',
   'type',
   'height',

libs/design-system/src/components/Table/TableRow.tsx

@@ -12,6 +12,7 @@ type Data = {
   id: string
   isDraggable?: boolean
   isDroppable?: boolean
+  className?: string
   onClick?: () => void
 }
 
@@ -91,6 +92,7 @@ export function createTableRow<
           className={cx(
             'border-b border-gray-200/50 dark:border-graydark-100',
             data.onClick ? 'cursor-pointer' : '',
+            data.className,
             className
           )}
         >

libs/design-system/src/core/Separator.tsx

@@ -11,6 +11,7 @@ const styles = cva(['m-0 flex-shrink-0 cursor-default'], {
       horizontal: 'border-b',
     },
     color: {
+      contrast: 'border-gray-700 dark:border-graydark-700',
       subtle: 'border-gray-300 dark:border-graydark-300',
       verySubtle: 'border-gray-100 dark:border-graydark-100',
       panel: 'border-gray-100 dark:border-graydark-400/50',

libs/walletd-types/src/types.ts

@@ -39,6 +39,7 @@ export type WalletEventBase = {
   id: Hash256
   timestamp: string
   index: ChainIndex
+  maturityHeight: number
   relevant: Address[]
 }
 
@@ -67,7 +68,7 @@ export type WalletHostAnnouncement = {
 
 export type WalletEventTransaction = WalletEventBase & {
   type: 'transaction'
-  val: {
+  data: {
     siacoinInputs?: SiacoinElement[]
     siacoinOutputs?: SiacoinElement[]
     siafundInputs?: WalletSiafundInput[]
@@ -81,14 +82,14 @@ export type WalletEventTransaction = WalletEventBase & {
 
 export type WalletEventMinerPayout = WalletEventBase & {
   type: 'miner payout'
-  val: {
+  data: {
     siacoinOutput: SiacoinElement
   }
 }
 
 export type WalletEventContractPayout = WalletEventBase & {
   type: 'contract payout'
-  val: {
+  data: {
     fileContract: FileContractElement
     siacoinOutput: SiacoinElement
     missed: boolean
@@ -101,7 +102,7 @@ export type WalletEventSiafundClaim = WalletEventBase & {
 
 export type WalletEventFoundationSubsidy = WalletEventBase & {
   type: 'foundation subsidy'
-  val: {
+  data: {
     siacoinOutput: SiacoinElement
   }
 }