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/quiet-starfishes-matter.md

@@ -0,0 +1,5 @@
+---
+'walletd': minor
+---
+
+Pending transaction event rows are now more opaque.

.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 more opaque and 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
@@ -93,6 +95,42 @@ export const columns: EventsTableColumn[] = [
       )
     },
   },
+  {
+    id: 'maturityHeight',
+    label: 'maturity height',
+    category: 'general',
+    render: ({ data: { pending, maturityHeight, isMature } }) => {
+      if (pending) {
+        return (
+          <Text size="12" ellipsis>
+            <LoadingDots />
+          </Text>
+        )
+      }
+      if (!maturityHeight) {
+        return null
+      }
+      return (
+        <Tooltip
+          content={
+            isMature
+              ? 'The maturity height has been reached.'
+              : 'The maturity height has not been reached, therefore the output is still locked.'
+          }
+        >
+          <Text
+            size="12"
+            ellipsis
+            color={isMature ? 'green' : 'red'}
+            className="flex gap-1 items-center"
+          >
+            {isMature ? <Unlocked16 /> : <Locked16 />}
+            {maturityHeight.toLocaleString()}
+          </Text>
+        </Tooltip>
+      )
+    },
+  },
   {
     id: 'timestamp',
     label: 'timestamp',

apps/walletd/contexts/events/index.tsx

@@ -61,21 +61,23 @@ export function useEventsMain() {
       timestamp: 0,
       pending: true,
       type: e.type,
+      isMature: false,
       amount: new BigNumber(e.received).minus(e.sent),
+      className: 'opacity-50',
     }))
     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 +86,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,26 +103,30 @@ 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 <= e.index.height
       const res: EventData = {
         id: e.id,
         type: e.type,
+        className: isMature ? '' : 'opacity-50',
         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
     })

apps/walletd/contexts/events/types.ts

@@ -9,12 +9,15 @@ 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 =
@@ -23,6 +26,7 @@ export type TableColumnId =
   | 'transactionId'
   | 'type'
   | 'height'
+  | 'maturityHeight'
   | 'timestamp'
   | 'amount'
   | 'fee'
@@ -35,6 +39,7 @@ export const columnsDefaultVisible: TableColumnId[] = [
   'transactionId',
   'type',
   'height',
+  'maturityHeight',
   'timestamp',
   'amount',
   'fee',

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/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
   }
 }