@xyo-network/react-chain-network 1.19.9 → 1.19.11

package/src/components/broadcast/usePaginatedEventPairs.ts

@@ -0,0 +1,64 @@
+import type { ChangeEvent } from 'react'
+import {
+  useCallback, useMemo, useState,
+} from 'react'
+
+import type { RpcRequestResponsePairsById } from '../../model/index.ts'
+
+export const usePaginatedEventPairs = (
+  formattedEvents: RpcRequestResponsePairsById,
+  numberOfVisiblePairs: number,
+  onClearEvents?: () => void,
+) => {
+  const [currentPage, setCurrentPage] = useState(0)
+
+  const allEventEntries = useMemo(() => {
+    return Object.entries(formattedEvents ?? {})
+  }, [formattedEvents])
+
+  const totalPages = useMemo(() => {
+    return Math.ceil(allEventEntries.length / numberOfVisiblePairs)
+  }, [allEventEntries.length, numberOfVisiblePairs])
+
+  // Clamp current page to valid range
+  const effectiveCurrentPage = useMemo(() => {
+    if (totalPages === 0) return 0
+    return Math.min(currentPage, totalPages - 1)
+  }, [currentPage, totalPages])
+
+  const visibleEvents = useMemo(() => {
+    const startIndex = effectiveCurrentPage * numberOfVisiblePairs
+    const endIndex = startIndex + numberOfVisiblePairs
+    return allEventEntries.slice(startIndex, endIndex)
+  }, [allEventEntries, effectiveCurrentPage, numberOfVisiblePairs])
+
+  const handlePreviousPage = useCallback(() => {
+    setCurrentPage(prev => Math.max(0, prev - 1))
+  }, [])
+
+  const handleNextPage = useCallback(() => {
+    setCurrentPage(prev => Math.min(totalPages - 1, prev + 1))
+  }, [totalPages])
+
+  const handleClearEvents = useCallback(() => {
+    setCurrentPage(0)
+    onClearEvents?.()
+  }, [onClearEvents])
+
+  // Compatible with TablePagination's onPageChange signature
+  // Accepts 1-indexed page, converts to 0-indexed internally
+  const handlePageChange = useCallback((_event: ChangeEvent<unknown>, page: number) => {
+    setCurrentPage(page - 1)
+  }, [])
+
+  return {
+    allEventEntries,
+    visibleEvents,
+    effectiveCurrentPage: effectiveCurrentPage + 1, // Return 1-indexed page
+    totalPages,
+    handlePreviousPage,
+    handleNextPage,
+    handleClearEvents,
+    handlePageChange,
+  }
+}

package/src/context/network/settings/types.ts

@@ -1,7 +1,7 @@
 import type { GatewayName } from '@xyo-network/xl1-sdk'
 
 export type NetworkSetting = {
-  proxy: true
+  proxy: boolean
 }
 
 export type ChainNetworkSettings = Record<GatewayName, NetworkSetting>

package/src/hooks/provider/UseViewerInPage.stories.tsx

@@ -14,11 +14,7 @@ import type { HydratedBlock, NetworkId } from '@xyo-network/xl1-sdk'
 import {
   LocalNetwork, MainNetwork, SequenceNetwork,
 } from '@xyo-network/xl1-sdk'
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-} from 'react'
+import React, { useCallback, useState } from 'react'
 
 import { BroadcastedRpcCallsDrawer } from '../../components/index.ts'
 import type { ChainNetworkSettings } from '../../context/index.ts'
@@ -67,7 +63,7 @@ const UseViewerInPageStoryTemplate: React.FC = () => {
   const [result, setResult] = useState<HydratedBlock | null | undefined>()
   const [loading, setLoading] = useState(false)
   const [drawerOpen, setDrawerOpen] = useState(false)
-  const { events } = useRpcBroadcastListener()
+  const { clearEvents, events } = useRpcBroadcastListener()
 
   const handleClick = useCallback(async () => {
     if (isDefinedNotNull(viewer)) {
@@ -107,8 +103,13 @@ const UseViewerInPageStoryTemplate: React.FC = () => {
               No wallet extension found. Please install the Xyo Wallet Chrome Extension.
             </Alert>
           )}
-      <BroadcastedRpcCallsDrawer open={drawerOpen} events={events} onClose={() => setDrawerOpen(false)} />
-      <ButtonEx disabled={events.length === 0} variant="contained" onClick={() => setDrawerOpen(true)}>
+      <BroadcastedRpcCallsDrawer
+        open={drawerOpen}
+        events={events}
+        onClearEvents={clearEvents}
+        onClose={() => setDrawerOpen(false)}
+      />
+      <ButtonEx disabled={Object.keys(events).length === 0} variant="contained" onClick={() => setDrawerOpen(true)}>
         Show Broadcasted RPC Calls
       </ButtonEx>
       <ButtonEx loading={loading} variant="contained" onClick={() => void handleClick()} disabled={!isDefined(viewer)}>
@@ -138,6 +139,7 @@ export default {
 const Template: StoryFn<typeof UseViewerInPageStoryTemplate> = args => <UseViewerInPageStoryTemplate {...args} />
 
 const Default = Template.bind({})
+Default.decorators = [UseViewerInPageStoryDecorator]
 Default.args = {}
 const Proxy = Template.bind({})
 Proxy.decorators = [UseViewerInPageStoryProxyDecorator]

package/src/hooks/provider/useRpcBroadcastListener.ts

@@ -1,10 +1,30 @@
-import { isString } from '@xylabs/sdk-js'
+import type { JsonRpcRequest, JsonRpcResponse } from '@metamask/utils'
+import { isJsonRpcRequest, isJsonRpcResponse } from '@metamask/utils'
+import { isDefined, isString } from '@xylabs/sdk-js'
 import { useEffect, useState } from 'react'
 
-import type { BroadcastedRpcCall } from '../../model/index.ts'
+import type {
+  BroadcastedRpcCall, RpcRequestResponsePairs, RpcRequestResponsePairsById,
+} from '../../model/index.ts'
+
+const parseRpcCall = (acc: RpcRequestResponsePairsById, event: BroadcastedRpcCall) => {
+  if (isJsonRpcResponse(event.rpcCall)) {
+    const castedEvent = event as BroadcastedRpcCall<JsonRpcResponse>
+    acc[castedEvent.rpcCall.id as string].result = castedEvent
+  } else if (isJsonRpcRequest(event.rpcCall)) {
+    const castedEvent = event as BroadcastedRpcCall<JsonRpcRequest>
+    acc[castedEvent.rpcCall.id as string].request = castedEvent
+  } else {
+    console.error('Unknown RPC call type', event)
+  }
+  acc[event.rpcCall.id as string].source = event.source
+
+  return acc
+}
 
 export const useRpcBroadcastListener = () => {
-  const [events, setEvents] = useState<BroadcastedRpcCall[]>([])
+  const [events, setEvents] = useState<RpcRequestResponsePairsById>({})
+  const clearEvents = () => setEvents({})
 
   useEffect(() => {
     const listener = (e: Event) => {
@@ -18,9 +38,19 @@ export const useRpcBroadcastListener = () => {
             const broadcastedRpcCall: BroadcastedRpcCall = {
               rpcCall,
               source,
-              timestamp: e.timeStamp,
+              timestamp: Date.now(),
             }
-            setEvents(prev => [broadcastedRpcCall, ...prev])
+            setEvents((prev) => {
+              const { id } = broadcastedRpcCall.rpcCall
+              const newState = { ...prev }
+              if (isDefined(newState[id as string])) {
+                parseRpcCall(newState, broadcastedRpcCall)
+              } else {
+                newState[id as string] = {} as RpcRequestResponsePairs
+                parseRpcCall(newState, broadcastedRpcCall)
+              }
+              return newState
+            })
           } catch (err) {
             console.error(err)
           }
@@ -36,5 +66,5 @@ export const useRpcBroadcastListener = () => {
     }
   }, [])
 
-  return { events }
+  return { events, clearEvents }
 }

package/src/model/BroadcastRpc.ts

@@ -22,3 +22,7 @@ export type RpcRequestResponsePairs = {
   result?: BroadcastedRpcCall<JsonRpcResponse>
   source?: string
 }
+
+export type RpcRequestResponsePairsById = {
+  [id: string]: RpcRequestResponsePairs
+}

package/dist/browser/components/broadcast/helpers/formatEvents.d.ts

@@ -1,7 +0,0 @@
-import type { BroadcastedRpcCall, RpcRequestResponsePairs } from '../../../model/index.ts';
-type RpcRequestResponsePairsById = {
-    [id: string]: RpcRequestResponsePairs;
-};
-export declare const formatEvents: (events: BroadcastedRpcCall[]) => RpcRequestResponsePairsById;
-export {};
-//# sourceMappingURL=formatEvents.d.ts.map

package/dist/browser/components/broadcast/helpers/formatEvents.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"formatEvents.d.ts","sourceRoot":"","sources":["../../../../../src/components/broadcast/helpers/formatEvents.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAA;AAE1F,KAAK,2BAA2B,GAAG;IACjC,CAAC,EAAE,EAAE,MAAM,GAAG,uBAAuB,CAAA;CACtC,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,QAAQ,kBAAkB,EAAE,KAAG,2BA6B3D,CAAA"}

package/dist/browser/components/broadcast/helpers/index.d.ts

@@ -1,2 +0,0 @@
-export * from './formatEvents.ts';
-//# sourceMappingURL=index.d.ts.map

package/dist/browser/components/broadcast/helpers/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/broadcast/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA"}

package/src/components/broadcast/helpers/formatEvents.ts

@@ -1,40 +0,0 @@
-import type { JsonRpcRequest, JsonRpcResponse } from '@metamask/utils'
-import { isJsonRpcRequest, isJsonRpcResponse } from '@metamask/utils'
-import { isArray, isDefined } from '@xylabs/sdk-js'
-
-import type { BroadcastedRpcCall, RpcRequestResponsePairs } from '../../../model/index.ts'
-
-type RpcRequestResponsePairsById = {
-  [id: string]: RpcRequestResponsePairs
-}
-
-export const formatEvents = (events: BroadcastedRpcCall[]): RpcRequestResponsePairsById => {
-  if (!isArray(events) || events.length === 0) return {} as RpcRequestResponsePairsById
-
-  const parseRpcCall = (acc: RpcRequestResponsePairsById, event: BroadcastedRpcCall) => {
-    if (isJsonRpcResponse(event.rpcCall)) {
-      const castedEvent = event as BroadcastedRpcCall<JsonRpcResponse>
-      acc[castedEvent.rpcCall.id as string].result = castedEvent
-    } else if (isJsonRpcRequest(event.rpcCall)) {
-      const castedEvent = event as BroadcastedRpcCall<JsonRpcRequest>
-      acc[castedEvent.rpcCall.id as string].request = castedEvent
-    } else {
-      console.error('Unknown RPC call type', event)
-    }
-    acc[event.rpcCall.id as string].source = event.source
-
-    return acc
-  }
-
-  let acc: RpcRequestResponsePairsById = {}
-  for (const event of events) {
-    const { id } = event.rpcCall
-    if (isDefined(acc[id as string])) {
-      acc = parseRpcCall(acc, event)
-    } else {
-      acc[id as string] = {} as RpcRequestResponsePairs
-      acc = parseRpcCall(acc, event)
-    }
-  }
-  return acc
-}

package/src/components/broadcast/helpers/index.ts

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