@xyo-network/react-chain-blockchain 1.16.16 → 1.16.17

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-blockchain",
-  "version": "1.16.16",
+  "version": "1.16.17",
   "description": "XYO Layer One React SDK Blockchain",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -38,7 +38,10 @@
   "types": "./dist/browser/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "src",
+    "!**/*.bench.*",
+    "!**/*.spec.*",
+    "!**/*.test.*"
   ],
   "scripts": {
     "package-cycle": "echo Nothing to do"
@@ -60,18 +63,18 @@
     "@xyo-network/boundwitness-builder": "~5.1.23",
     "@xyo-network/boundwitness-model": "~5.1.23",
     "@xyo-network/bridge-http": "~5.1.23",
-    "@xyo-network/chain-analyze": "~1.16.16",
-    "@xyo-network/chain-protocol": "~1.16.16",
-    "@xyo-network/chain-services": "~1.16.16",
-    "@xyo-network/chain-utils": "~1.16.16",
-    "@xyo-network/chain-wrappers": "~1.16.16",
+    "@xyo-network/chain-analyze": "~1.16.17",
+    "@xyo-network/chain-protocol": "~1.16.17",
+    "@xyo-network/chain-services": "~1.16.17",
+    "@xyo-network/chain-utils": "~1.16.17",
+    "@xyo-network/chain-wrappers": "~1.16.17",
     "@xyo-network/module-model": "~5.1.23",
     "@xyo-network/payload-builder": "~5.1.23",
     "@xyo-network/payload-model": "~5.1.23",
     "@xyo-network/react-boundwitness-plugin": "~7.3.10",
-    "@xyo-network/react-chain-blockies": "~1.16.16",
-    "@xyo-network/react-chain-provider": "~1.16.16",
-    "@xyo-network/react-chain-shared": "~1.16.16",
+    "@xyo-network/react-chain-blockies": "~1.16.17",
+    "@xyo-network/react-chain-provider": "~1.16.17",
+    "@xyo-network/react-chain-shared": "~1.16.17",
     "@xyo-network/react-error": "~7.3.10",
     "@xyo-network/react-event": "~7.3.10",
     "@xyo-network/react-payload-raw-info": "~7.3.10",
@@ -79,7 +82,7 @@
     "@xyo-network/react-shared": "~7.3.10",
     "@xyo-network/react-table": "~7.3.10",
     "@xyo-network/xl1-protocol": "~1.13.11",
-    "@xyo-network/xl1-protocol-sdk": "~1.16.16"
+    "@xyo-network/xl1-protocol-sdk": "~1.16.17"
   },
   "devDependencies": {
     "@emotion/react": "~11.14.0",
@@ -87,14 +90,15 @@
     "@mui/icons-material": "~7.3.5",
     "@mui/material": "~7.3.5",
     "@types/react": "~19.2.5",
+    "@xylabs/react-button": "~7.1.8",
     "@xylabs/sdk-js": "~5.0.34",
     "@xylabs/ts-scripts-yarn3": "~7.2.8",
     "@xylabs/tsconfig": "~7.2.8",
     "@xylabs/tsconfig-dom": "~7.2.8",
     "@xylabs/tsconfig-react": "~7.2.8",
     "@xyo-network/api-models": "~5.1.23",
-    "@xyo-network/xl1-network-model": "~1.16.16",
-    "@xyo-network/xl1-rpc": "~1.16.16",
+    "@xyo-network/xl1-network-model": "~1.16.17",
+    "@xyo-network/xl1-rpc": "~1.16.17",
     "axios": "^1.13.2",
     "eslint": "^9.39.1",
     "react": "~19.2.0",

package/src/components/account/hooks/index.ts

@@ -0,0 +1 @@
+export * from './usePagedAccountBalanceHistory.ts'

package/src/components/account/hooks/usePagedAccountBalanceHistory.ts

@@ -0,0 +1,44 @@
+import type { Address } from '@xylabs/sdk-js'
+import { isDefined } from '@xylabs/sdk-js'
+import type { AccountBalanceHistoryItemFormatted } from '@xyo-network/react-chain-provider'
+import { useAccountBalanceHistory } from '@xyo-network/react-chain-provider'
+import type { XL1BlockRange } from '@xyo-network/xl1-protocol'
+import type { XyoViewer } from '@xyo-network/xl1-protocol-sdk'
+import {
+  useCallback, useMemo, useState,
+} from 'react'
+
+export const usePagedAccountBalanceHistory = (address?: Address, viewer?: XyoViewer, maxPage = 1) => {
+  const [updatedBlockRange, setUpdatedBlockRange] = useState<XL1BlockRange>()
+  const [pagedHistory, setPagedHistory] = useState<AccountBalanceHistoryItemFormatted[]>()
+  const [results, error, loading] = useAccountBalanceHistory(address, viewer, maxPage, updatedBlockRange)
+
+  const { history, truncated } = results || {}
+
+  useMemo(() => {
+    if (isDefined(history)) {
+      setPagedHistory((pagedHistory) => {
+        return [...pagedHistory ?? [], ...history]
+      })
+    }
+  }, [history])
+
+  const firstBlock = isDefined(history) ? history.at(0)?.blockNumber : undefined
+  const lastBlock = isDefined(history) ? history.at(-1)?.blockNumber : undefined
+  const historyComplete = isDefined(history) && history.length === 0
+
+  const updateRange = useCallback(() => {
+    if (isDefined(lastBlock) && lastBlock > 0 && truncated) {
+      const newEndBlock = lastBlock - 1
+      setUpdatedBlockRange([0, newEndBlock] as XL1BlockRange)
+    }
+  }, [firstBlock, lastBlock, truncated])
+
+  return {
+    pagedHistory,
+    historyComplete,
+    updateRange,
+    error,
+    loading,
+  }
+}

package/src/components/account/index.ts

@@ -1,3 +1,4 @@
 export * from './BalanceHistoryFlexbox.tsx'
 export * from './helpers/index.ts'
+export * from './hooks/index.ts'
 export * from './table/index.ts'

package/src/components/account/table/BalanceHistoryTableEx.stories.tsx

@@ -1,15 +1,20 @@
 import {
-  Alert, AlertTitle, LinearProgress, Snackbar,
+  Alert, AlertTitle,
+  LinearProgress, Snackbar,
+  Stack,
 } from '@mui/material'
 import type { Meta, StoryFn } from '@storybook/react-vite'
-import type { Address } from '@xylabs/sdk-js'
+import { ButtonEx } from '@xylabs/react-button'
+import { type Address } from '@xylabs/sdk-js'
 import { useAccountBalanceHistory, useHttpRpcViewer } from '@xyo-network/react-chain-provider'
 import { ErrorRender } from '@xyo-network/react-error'
 import type { Event } from '@xyo-network/react-event'
 import { useEvent } from '@xyo-network/react-event'
 import { LocalNetwork } from '@xyo-network/xl1-network-model'
-import React, { useState } from 'react'
+import type { XL1BlockRange } from '@xyo-network/xl1-protocol'
+import { useState } from 'react'
 
+import { usePagedAccountBalanceHistory } from '../hooks/index.ts'
 import { AccountBalanceHistoryTableEx } from './BalanceHistoryTableEx.tsx'
 
 export default {
@@ -21,9 +26,9 @@ const TEST_ADDRESS = 'aa9401662e9cd3ce8bb8a6ab92a35ed83e85ac67' as Address
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const TEST_ADDRESS_1 = '2b1a21d8c90e658d8bf1e2aad31c8dc892c353c1' as Address
 
-const useFetchBalanceHistory = (address?: Address) => {
+const useFetchBalanceHistory = (address?: Address, maxPage = 10, blockRange?: XL1BlockRange) => {
   const viewer = useHttpRpcViewer(LocalNetwork.url)
-  return useAccountBalanceHistory(address, viewer)
+  return useAccountBalanceHistory(address, viewer, maxPage, blockRange)
 }
 
 const Template: StoryFn<typeof AccountBalanceHistoryTableEx> = (args) => {
@@ -66,10 +71,38 @@ const TemplateLinked: StoryFn<typeof AccountBalanceHistoryTableEx> = (args) => {
   )
 }
 
+const TemplatePaged: StoryFn<typeof AccountBalanceHistoryTableEx> = (args) => {
+  const viewer = useHttpRpcViewer(LocalNetwork.url)
+  const {
+    pagedHistory, historyComplete, updateRange, error, loading,
+  } = usePagedAccountBalanceHistory(TEST_ADDRESS, viewer, 1)
+
+  return (
+    <Stack gap={2}>
+      <ErrorRender error={error} scope="AccountBalanceHistoryTableStory" />
+      {loading === 'pending' ? <LinearProgress /> : null}
+      <AccountBalanceHistoryTableEx history={pagedHistory} {...args} />
+      <ButtonEx
+        variant="contained"
+        onClick={updateRange}
+        disabled={loading === 'pending' || historyComplete}
+        loading={loading === 'pending'}
+      >
+        {historyComplete ? 'End of History' : 'More History'}
+      </ButtonEx>
+    </Stack>
+  )
+}
+
 const Default = Template.bind({})
 Default.args = {}
 
 const WithLinked = TemplateLinked.bind({})
 WithLinked.args = { linked: true }
 
-export { Default, WithLinked }
+const WithPaged = TemplatePaged.bind({})
+WithPaged.args = {}
+
+export {
+  Default, WithLinked, WithPaged,
+}