refactor(renterd): migrate to events apis and remove other deprecated…

… apis
SiaFoundation · Sep 17, 2024 · 64d82fc · 64d82fc
1 parent 978b70a
commit 64d82fc
Show file tree

Hide file tree

Showing 26 changed files with 582 additions and 312 deletions.
diff --git a/.changeset/beige-cycles-change.md b/.changeset/beige-cycles-change.md
@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The transactions list now includes more details such as specific transaction types and maturity height for locked siacoin.
diff --git a/.changeset/cold-poems-appear.md b/.changeset/cold-poems-appear.md
@@ -0,0 +1,7 @@
+---
+'@siafoundation/renterd-js': minor
+'@siafoundation/renterd-react': minor
+'@siafoundation/renterd-types': minor
+---
+
+Removed deprecated wallet transactions and pending transactions APIs.
diff --git a/.changeset/fifty-dots-do.md b/.changeset/fifty-dots-do.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Authed layout, wallet balance, and wallet layout actions now require immature balance value.
diff --git a/.changeset/poor-berries-sin.md b/.changeset/poor-berries-sin.md
@@ -0,0 +1,7 @@
+---
+'@siafoundation/renterd-js': minor
+'@siafoundation/renterd-react': minor
+'@siafoundation/renterd-types': minor
+---
+
+Added wallet events and pending events APIs.
diff --git a/.changeset/silent-icons-rule.md b/.changeset/silent-icons-rule.md
@@ -0,0 +1,7 @@
+---
+'@siafoundation/renterd-js': minor
+'@siafoundation/renterd-react': minor
+'@siafoundation/renterd-types': minor
+---
+
+Removed deprecated wallet discard, fund, sign, and outputs APIs.
diff --git a/apps/hostd/contexts/transactions/index.tsx b/apps/hostd/contexts/transactions/index.tsx
@@ -113,7 +113,7 @@ function useTransactionsMain() {
     sortField,
     sortDirection,
     resetDefaultColumnVisibility,
-  } = useTableState('walletd/v0/events', {
+  } = useTableState('hostd/v0/events', {
     columns,
     columnsDefaultVisible,
     sortOptions,

diff --git a/apps/renterd-e2e/src/specs/wallet.spec.ts b/apps/renterd-e2e/src/specs/wallet.spec.ts
@@ -7,7 +7,7 @@ import BigNumber from 'bignumber.js'
 import { setSwitchByLabel } from '../fixtures/switchValue'
 
 test.beforeEach(async ({ page }) => {
-  await beforeTest(page, false)
+  await beforeTest(page)
 })
 
 test('send siacoin with include fee off', async ({ page }) => {
@@ -66,20 +66,35 @@ test('send siacoin with include fee off', async ({ page }) => {
   await expect(sendDialog.getByTestId('transactionId')).toBeVisible()
 
   // List.
-  // TODO: Add this after we migrate to the new events API.
-  // await sendDialog.getByRole('button', { name: 'Close' }).click()
-  // await expect(page.getByTestId('eventsTable')).toBeVisible()
-  // await expect(
-  //   page.getByTestId('eventsTable').locator('tbody tr').first()
-  // ).toBeVisible()
-  // await expect(
-  //   page
-  //     .getByTestId('eventsTable')
-  //     .locator('tbody tr')
-  //     .first()
-  //     .getByTestId('amount')
-  //     .getByText(`-${amountWithFeeString}`)
-  // ).toBeVisible()
+  await sendDialog.getByRole('button', { name: 'Close' }).click()
+  await expect(page.getByTestId('eventsTable')).toBeVisible()
+  await expect(
+    page.getByTestId('eventsTable').locator('tbody tr').first()
+  ).toBeVisible()
+  await expect(
+    page
+      .getByTestId('eventsTable')
+      .locator('tbody tr')
+      .first()
+      .getByTestId('amount')
+      .getByText(`-${amountWithFeeString}`)
+  ).toBeVisible()
+  await expect(
+    page
+      .getByTestId('eventsTable')
+      .locator('tbody tr')
+      .first()
+      .getByTestId('type')
+      .getByText('siacoin transfer')
+  ).toBeVisible()
+  await expect(
+    page
+      .getByTestId('eventsTable')
+      .locator('tbody tr')
+      .first()
+      .getByTestId('fee')
+      .getByText('12.000 mS')
+  ).toBeVisible()
 })
 
 test('send siacoin with include fee on', async ({ page }) => {
@@ -139,18 +154,33 @@ test('send siacoin with include fee on', async ({ page }) => {
   await expect(sendDialog.getByTestId('transactionId')).toBeVisible()
 
   // List.
-  // TODO: Add this after we migrate to the new events API.
-  // await sendDialog.getByRole('button', { name: 'Close' }).click()
-  // await expect(page.getByTestId('eventsTable')).toBeVisible()
-  // await expect(
-  //   page.getByTestId('eventsTable').locator('tbody tr').first()
-  // ).toBeVisible()
-  // await expect(
-  //   page
-  //     .getByTestId('eventsTable')
-  //     .locator('tbody tr')
-  //     .first()
-  //     .getByTestId('amount')
-  //     .getByText(`-${amountWithFeeString}`)
-  // ).toBeVisible()
+  await sendDialog.getByRole('button', { name: 'Close' }).click()
+  await expect(page.getByTestId('eventsTable')).toBeVisible()
+  await expect(
+    page.getByTestId('eventsTable').locator('tbody tr').first()
+  ).toBeVisible()
+  await expect(
+    page
+      .getByTestId('eventsTable')
+      .locator('tbody tr')
+      .first()
+      .getByTestId('amount')
+      .getByText(`-${amountString}`)
+  ).toBeVisible()
+  await expect(
+    page
+      .getByTestId('eventsTable')
+      .locator('tbody tr')
+      .first()
+      .getByTestId('type')
+      .getByText('siacoin transfer')
+  ).toBeVisible()
+  await expect(
+    page
+      .getByTestId('eventsTable')
+      .locator('tbody tr')
+      .first()
+      .getByTestId('fee')
+      .getByText('12.000 mS')
+  ).toBeVisible()
 })
diff --git a/apps/renterd/components/RenterdAuthedLayout.tsx b/apps/renterd/components/RenterdAuthedLayout.tsx
@@ -28,6 +28,7 @@ export function RenterdAuthedLayout(
           spendable: new BigNumber(wallet.data.spendable),
           confirmed: new BigNumber(wallet.data.confirmed),
           unconfirmed: new BigNumber(wallet.data.unconfirmed),
+          immature: new BigNumber(wallet.data.immature),
         }
       }
       {...props}

diff --git a/apps/renterd/components/Wallet/StateError.tsx b/apps/renterd/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>
+  )
+}
diff --git a/apps/renterd/components/Wallet/StateNoneMatching.tsx b/apps/renterd/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>
+  )
+}
diff --git a/apps/renterd/components/Wallet/StateNoneYet.tsx b/apps/renterd/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>
+  )
+}
diff --git a/apps/renterd/components/Wallet/WalletFilterBar.tsx b/apps/renterd/components/Wallet/WalletFilterBar.tsx
@@ -1,9 +1,14 @@
-import { WalletSyncWarning } from '@siafoundation/design-system'
+import {
+  PaginatorUnknownTotal,
+  WalletSyncWarning,
+} from '@siafoundation/design-system'
 import { useSyncStatus } from '../../hooks/useSyncStatus'
+import { useTransactions } from '../../contexts/transactions'
 
 export function WalletFilterBar() {
   const { isSynced, syncPercent, isWalletSynced, walletScanPercent } =
     useSyncStatus()
+  const { offset, limit, pageCount, dataState } = useTransactions()
   return (
     <div className="flex gap-2 w-full">
       <WalletSyncWarning
@@ -13,6 +18,12 @@ export function WalletFilterBar() {
         walletScanPercent={walletScanPercent}
       />
       <div className="flex-1" />
+      <PaginatorUnknownTotal
+        offset={offset}
+        limit={limit}
+        pageTotal={pageCount}
+        isLoading={dataState === 'loading'}
+      />
     </div>
   )
 }
diff --git a/apps/renterd/components/Wallet/index.tsx b/apps/renterd/components/Wallet/index.tsx
@@ -1,7 +1,6 @@
 import {
   BalanceEvolution,
-  EntityList,
-  PaginatorUnknownTotal,
+  Table,
   WalletLayoutActions,
 } from '@siafoundation/design-system'
 import { useWallet } from '@siafoundation/renterd-react'
@@ -11,18 +10,32 @@ import BigNumber from 'bignumber.js'
 import { RenterdSidenav } from '../RenterdSidenav'
 import { RenterdAuthedLayout } from '../RenterdAuthedLayout'
 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 { dataset, offset, limit, pageCount, dataState, balances, metrics } =
-    useTransactions()
-  const { isSynced, syncPercent, isWalletSynced, walletScanPercent } =
+  const { isSynced, isWalletSynced, syncPercent, walletScanPercent } =
     useSyncStatus()
 
+  const {
+    balances,
+    metrics,
+    dataset,
+    dataState,
+    columns,
+    cellContext,
+    sortableColumns,
+    sortDirection,
+    sortField,
+    toggleSort,
+    defaultPageSize,
+  } = useTransactions()
+
   return (
     <RenterdAuthedLayout
       routes={routes}
@@ -41,6 +54,7 @@ export function Wallet() {
                   spendable: new BigNumber(wallet.data.spendable),
                   unconfirmed: new BigNumber(wallet.data.unconfirmed),
                   confirmed: new BigNumber(wallet.data.confirmed),
+                  immature: new BigNumber(wallet.data.immature),
                 }
               : undefined
           }
@@ -50,7 +64,7 @@ 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 ? (
           <BalanceEvolution
             // see comment above
@@ -59,19 +73,26 @@ export function Wallet() {
             isLoading={metrics.isValidating}
           />
         ) : null}
-        <EntityList
-          title="Transactions"
+        <Table
+          testId="eventsTable"
           isLoading={dataState === 'loading'}
-          dataset={dataset}
-          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={defaultPageSize}
+          data={dataset}
+          context={cellContext}
+          columns={columns}
+          sortableColumns={sortableColumns}
+          sortDirection={sortDirection}
+          sortField={sortField}
+          toggleSort={toggleSort}
         />
       </div>
     </RenterdAuthedLayout>