@xyo-network/react-chain-network 1.20.14 → 1.20.16

package/src/components/broadcast/Drawer.tsx

@@ -1,88 +0,0 @@
-import type { DrawerProps } from '@mui/material'
-import {
-  Box, Button, Drawer, Pagination, Stack, Typography,
-} from '@mui/material'
-import React, { useState } from 'react'
-
-import { useRpcBroadcastListener } from '../../hooks/index.ts'
-import type { RpcRequestResponsePairsById } from '../../model/index.ts'
-import { CloseDrawerIconButton } from './CloseDrawerIconButton.tsx'
-import { BroadcastedRpcCallDetailsCard } from './details/index.ts'
-import { usePaginatedEventPairs } from './usePaginatedEventPairs.ts'
-
-export interface BroadcastRpcCallsDrawer extends DrawerProps {
-  drawerTitle?: string
-  events: RpcRequestResponsePairsById
-  numberOfVisibleEvents?: number
-  onClearEvents?: () => void
-}
-
-export const BroadcastedRpcCallsDrawer: React.FC<BroadcastRpcCallsDrawer> = ({
-  anchor = 'right',
-  onClearEvents,
-  drawerTitle,
-  events,
-  onClose,
-  numberOfVisibleEvents = 25,
-  ...props
-}) => {
-  const [scrollableDiv, setScrollableDiv] = useState<HTMLDivElement | null>(null)
-  const {
-    allEventEntries,
-    visibleEvents,
-    totalPages,
-    effectiveCurrentPage,
-    handleClearEvents,
-    handlePageChange,
-  } = usePaginatedEventPairs(
-    events,
-    numberOfVisibleEvents,
-    onClearEvents,
-    scrollableDiv,
-  )
-
-  return (
-    <Drawer anchor={anchor} onClose={onClose} keepMounted={false} {...props}>
-      <CloseDrawerIconButton anchor={anchor} onClose={onClose} />
-      <Stack gap={2} sx={{ p: 3 }} flexShrink={0}>
-        <Stack direction="row" justifyContent="space-between" alignItems="center" gap={4}>
-          <Typography variant="h6">{drawerTitle ?? 'Broadcasted RPC Calls'}</Typography>
-          <Button variant="outlined" size="small" onClick={handleClearEvents}>Clear All</Button>
-        </Stack>
-        {allEventEntries.length > 0 && (
-          <Pagination
-            count={totalPages}
-            page={effectiveCurrentPage}
-            onChange={handlePageChange}
-            color="primary"
-          />
-        )}
-
-      </Stack>
-      <Stack direction="column" id="events-container" flexGrow={1} sx={{ overflowY: 'hidden' }}>
-        <Box
-          ref={(el: HTMLDivElement) => setScrollableDiv(el)}
-          sx={{
-            overflowY: 'auto', px: 3, pb: 3,
-          }}
-        >
-          {visibleEvents.map(([id, broadcastedRpcCall], index) => {
-            return <BroadcastedRpcCallDetailsCard key={id} rpcRequestResponsePairs={broadcastedRpcCall} sx={{ mb: index < visibleEvents.length - 1 ? 2 : 0 }} />
-          })}
-        </Box>
-      </Stack>
-    </Drawer>
-  )
-}
-
-export const BroadcastedRpcCallsDrawerWithEvents: React.FC<DrawerProps> = (props) => {
-  const { clearEvents, events } = useRpcBroadcastListener()
-
-  return (
-    <BroadcastedRpcCallsDrawer
-      events={events}
-      onClearEvents={clearEvents}
-      {...props}
-    />
-  )
-}

package/src/components/broadcast/details/Card.tsx

@@ -1,71 +0,0 @@
-import type { CardProps } from '@mui/material'
-import {
-  Card, Collapse,
-  Stack, Typography,
-} from '@mui/material'
-import { isDefined } from '@xylabs/sdk-js'
-import { JsonViewerEx } from '@xyo-network/react-payload-raw-info'
-import React, { memo, useState } from 'react'
-
-import type { RpcRequestResponsePairs } from '../../../model/index.ts'
-import { BroadcastedRpcCallDetailsSummaryStack } from './SummaryStack.tsx'
-
-const JSON_VIEWER_WIDTH = 600
-
-export interface BroadcastRpcCallDetailsCardProps extends CardProps {
-  rpcRequestResponsePairs?: RpcRequestResponsePairs
-}
-
-export const BroadcastedRpcCallDetailsCard: React.FC<BroadcastRpcCallDetailsCardProps> = memo(({
-  rpcRequestResponsePairs, sx, ...props
-}) => {
-  const [expanded, setExpanded] = useState(false)
-
-  if (!rpcRequestResponsePairs) return null
-
-  const {
-    request, result, source,
-  } = rpcRequestResponsePairs
-
-  return (
-    <Card
-      sx={{
-        p: 1, display: 'flex', flexDirection: 'column', width: JSON_VIEWER_WIDTH, ...sx,
-      }}
-      {...props}
-    >
-      <BroadcastedRpcCallDetailsSummaryStack
-        expanded={expanded}
-        params={request.rpcCall.params}
-        hasResult={isDefined(result)}
-        method={request.rpcCall.method}
-        setExpanded={setExpanded}
-        timestamp={request.timestamp}
-      />
-      <Collapse in={expanded} mountOnEnter unmountOnExit>
-        <Stack direction="column" p={1} gap={2} alignItems="stretch">
-          <Typography variant="body2">
-            Source:
-            <Typography variant="caption" component="span" fontFamily="monospace" sx={{ ml: 1 }}>{source}</Typography>
-          </Typography>
-          <Typography variant="body2">Request:</Typography>
-          <JsonViewerEx
-            value={request}
-            sx={{ maxHeight: 300, overflow: 'auto' }}
-          />
-          {isDefined(result)
-            ? (
-                <>
-                  <Typography variant="body2">Result:</Typography>
-                  <JsonViewerEx
-                    value={result}
-                    sx={{ maxHeight: 300, overflow: 'auto' }}
-                  />
-                </>
-              )
-            : null}
-        </Stack>
-      </Collapse>
-    </Card>
-  )
-})

package/src/components/broadcast/details/SummaryStack.stories.tsx

@@ -1,36 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import { BroadcastedRpcCallDetailsSummaryStack } from './index.ts'
-
-export default {
-  title: 'network/Broadcast/Details/SummaryStack',
-  component: BroadcastedRpcCallDetailsSummaryStack,
-} as Meta
-
-const Template: StoryFn<typeof BroadcastedRpcCallDetailsSummaryStack> = args => <BroadcastedRpcCallDetailsSummaryStack {...args} />
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithHashParam = Template.bind({})
-WithHashParam.args = {
-  expanded: true,
-  hasResult: true,
-  method: 'xyoViewer_blocksByHash',
-  params: ['5378eddddc7f5a16766988eafcfd28499a9d0248974c23bef2d92eb359834bca', 1],
-  timestamp: Date.now(),
-}
-
-const WithUnknownParam = Template.bind({})
-WithUnknownParam.args = {
-  expanded: true,
-  hasResult: true,
-  method: 'xyoViewer_currentBlock',
-  params: [],
-  timestamp: Date.now(),
-}
-
-export {
-  Default, WithHashParam, WithUnknownParam,
-}

package/src/components/broadcast/details/SummaryStack.tsx

@@ -1,68 +0,0 @@
-import type { JsonRpcParams } from '@metamask/json-rpc-engine/v2'
-import {
-  ArrowRight, CheckCircle, Warning,
-} from '@mui/icons-material'
-import {
-  Avatar,
-  Icon, IconButton, Stack, type StackProps, Tooltip, Typography,
-  useTheme,
-} from '@mui/material'
-import { Identicon } from '@xylabs/react-identicon'
-import { usePromise } from '@xylabs/react-promise'
-import { isDefined } from '@xylabs/sdk-js'
-import { ObjectHasher } from '@xyo-network/hash'
-import React, { useMemo } from 'react'
-
-export interface BroadcastRpcCallDetailsSummaryStackProps extends StackProps {
-  expanded?: boolean
-  hasResult?: boolean
-  method?: string
-  params?: JsonRpcParams
-  setExpanded?: (expanded: boolean) => void
-  timestamp?: number
-}
-
-export const BroadcastedRpcCallDetailsSummaryStack: React.FC<BroadcastRpcCallDetailsSummaryStackProps> = ({
-  expanded, setExpanded, method, timestamp, hasResult, params, ...props
-}) => {
-  const theme = useTheme()
-  const [hash, hashError] = usePromise(async () => {
-    if (isDefined(params)) {
-      return await ObjectHasher.hash(params)
-    }
-  }, [params])
-
-  const formattedTimestamp = useMemo(() => isDefined(timestamp) ? new Date(timestamp).toLocaleString() : '', [timestamp])
-
-  return (
-    <Stack direction="row" gap={2} alignItems="center" justifyContent="space-between" {...props}>
-      <Stack direction="row" gap={2} alignItems="center">
-        <IconButton
-          size="small"
-          onClick={() => setExpanded?.(!expanded)}
-        >
-          <ArrowRight sx={{ transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform 0.2s ease-in-out' }} fontSize="small" />
-        </IconButton>
-        <Tooltip
-          title={isDefined(hashError)
-            ? `Error generating hash of params: ${hashError.message}`
-            : isDefined(params) ? `Params : ${JSON.stringify(params, null, 2)}` : 'No Params Provided'}
-        >
-          <Avatar sx={{
-            backgroundColor: theme.vars?.palette.text.primary, width: 20, height: 20, opacity: isDefined(hash) ? 1 : 0.5,
-          }}
-          >
-            <Identicon value={hash} size={14} />
-          </Avatar>
-        </Tooltip>
-        <Typography component="span" variant="body2" fontFamily="monospace">
-          {method}
-        </Typography>
-        <Typography component="span" variant="caption" color="text.secondary" sx={{ opacity: 0.6 }}>
-          {formattedTimestamp}
-        </Typography>
-      </Stack>
-      <Icon sx={{ justifySelf: 'end' }}>{hasResult ? <CheckCircle color="success" /> : <Warning color="warning" />}</Icon>
-    </Stack>
-  )
-}

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

@@ -1,2 +0,0 @@
-export * from './Card.tsx'
-export * from './SummaryStack.tsx'

package/src/components/broadcast/index.ts

@@ -1 +0,0 @@
-export * from './Drawer.tsx'

package/src/components/broadcast/usePaginatedEventPairs.ts

@@ -1,69 +0,0 @@
-import { isDefinedNotNull } from '@xylabs/sdk-js'
-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,
-  scrollableDiv?: HTMLDivElement | null,
-) => {
-  const [currentPage, setCurrentPage] = useState(0)
-
-  const allEventEntries = useMemo(() => {
-    return Object.entries(formattedEvents ?? {}).toSorted(([, a], [, b]) => b.request.timestamp - a.request.timestamp)
-  }, [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(() => {
-    if (isDefinedNotNull(scrollableDiv)) {
-      scrollableDiv.scrollTo({ top: 0, behavior: 'smooth' })
-    }
-    const startIndex = effectiveCurrentPage * numberOfVisiblePairs
-    const endIndex = startIndex + numberOfVisiblePairs
-    return allEventEntries.slice(startIndex, endIndex)
-  }, [allEventEntries, effectiveCurrentPage, numberOfVisiblePairs, scrollableDiv])
-
-  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/components/index.ts

@@ -1,3 +0,0 @@
-export * from './broadcast/index.ts'
-export * from './menu/index.ts'
-export * from './status/index.ts'

package/src/components/menu/Avatar.tsx

@@ -1,42 +0,0 @@
-import type { AvatarProps } from '@mui/material'
-import { Avatar } from '@mui/material'
-import type { CSSProperties } from 'react'
-import React from 'react'
-
-import { useChainNetwork } from '../../context/index.ts'
-import { NetworkIcon } from './Icon.tsx'
-
-export interface NetworkAvatarProps extends AvatarProps {
-  icon?: string
-  iconStyles?: CSSProperties
-  name?: string
-}
-
-export const NetworkAvatar: React.FC<NetworkAvatarProps> = ({
-  icon, iconStyles, name, sx, ...props
-}) => {
-  return (
-    <Avatar
-      sx={{ backgroundColor: 'white', ...sx }}
-      alt={name}
-      {...props}
-    >
-      <NetworkIcon
-        icon={icon}
-        style={{ ...iconStyles }}
-      />
-    </Avatar>
-  )
-}
-
-export const ActiveNetworkAvatar: React.FC<AvatarProps> = (props) => {
-  const { activeNetwork } = useChainNetwork()
-
-  return (
-    <NetworkAvatar
-      icon={activeNetwork?.icon}
-      name={activeNetwork?.name}
-      {...props}
-    />
-  )
-}

package/src/components/menu/Icon.tsx

@@ -1,21 +0,0 @@
-import type { DetailedHTMLProps, HtmlHTMLAttributes } from 'react'
-import React from 'react'
-
-export interface NetworkIconProps extends DetailedHTMLProps<HtmlHTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
-  icon?: string
-}
-
-export const NetworkIcon: React.FC<NetworkIconProps> = ({
-  icon, style, ...props
-}) => {
-  return (
-    <span
-      // eslint-disable-next-line react-dom/no-dangerously-set-innerhtml
-      dangerouslySetInnerHTML={{ __html: icon ?? '' }} // Placeholder for SVG\
-      style={{
-        display: 'inline-flex', width: 24, height: 24, ...style,
-      }}
-      {...props}
-    />
-  )
-}

package/src/components/menu/MenuItem.tsx

@@ -1,38 +0,0 @@
-import type { MenuItemProps } from '@mui/material'
-import { ListItemText } from '@mui/material'
-import { ActiveMenuItem } from '@xyo-network/react-chain-shared'
-import type { NetworkBootstrap, NetworkId } from '@xyo-network/xl1-sdk'
-import type { MouseEvent as ReactMouseEvent } from 'react'
-import React from 'react'
-
-import { NetworkAvatar } from './Avatar.tsx'
-
-export interface NetworkMenuItemProps extends MenuItemProps {
-  active?: boolean
-  network?: NetworkBootstrap
-  updateActiveNetwork?: (networkId: NetworkId) => void
-}
-
-export const NetworkMenuItem: React.FC<NetworkMenuItemProps> = ({
-  active, network, onClick, updateActiveNetwork, ...props
-}) => {
-  const handleClick = (event: ReactMouseEvent<HTMLLIElement, MouseEvent>) => {
-    if (network === undefined) throw new Error('Network is undefined')
-    updateActiveNetwork?.(network.id)
-    onClick?.(event)
-  }
-
-  return (
-    <ActiveMenuItem
-      title={network?.name}
-      disableRipple
-      onClick={handleClick}
-      active={active}
-      sx={{ py: 1 }}
-      {...props}
-    >
-      <NetworkAvatar icon={network?.icon} name={network?.name} sx={{ width: 30, height: 30 }} />
-      <ListItemText>{network?.name}</ListItemText>
-    </ActiveMenuItem>
-  )
-}

package/src/components/menu/index.ts

@@ -1,3 +0,0 @@
-export * from './Avatar.tsx'
-export * from './Icon.tsx'
-export * from './MenuItem.tsx'

package/src/components/status/Alert.stories.tsx

@@ -1,74 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import type { NetworkStatus } from '@xyo-network/xl1-sdk'
-import { NetworkStatusSchema } from '@xyo-network/xl1-sdk'
-import React from 'react'
-
-import { NetworkStatusAlert } from './Alert.tsx'
-
-const exampleOnlineStatus: NetworkStatus = {
-  state: 'online',
-  schema: NetworkStatusSchema,
-  description: 'The network is online and functioning normally.',
-}
-
-const exampleOfflineStatus: NetworkStatus = {
-  state: 'offline',
-  schema: NetworkStatusSchema,
-  description: 'The network is offline and not functioning.',
-  updates: [
-    {
-      start: Date.now() - 1000 * 60 * 60,
-      end: Date.now(),
-      update: 'The network was offline for 1 hour.',
-    },
-  ],
-}
-const exampleUnknown: NetworkStatus = {
-  state: 'unknown',
-  schema: NetworkStatusSchema,
-  description: 'Unable to fetch network status.',
-}
-
-const exampleDegradedStatus: NetworkStatus = {
-  state: 'degraded',
-  schema: NetworkStatusSchema,
-  description: 'The network is degraded and may be experiencing issues.',
-  updates: [
-    {
-      start: Date.now() - 1000 * 60 * 60,
-      end: Date.now(),
-      update: 'Blocks are being produced, but some nodes are offline.',
-    },
-    {
-      start: Date.now() - 1000 * 60 * 60,
-      end: Date.now(),
-      update: 'Blocks are being produced, but some nodes are offline.',
-    },
-  ],
-}
-
-export default {
-  title: 'Network/Status/Alert',
-  component: NetworkStatusAlert,
-} as Meta
-
-const Template: StoryFn<typeof NetworkStatusAlert> = args => <NetworkStatusAlert {...args} />
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithOnlineStatus = Template.bind({})
-WithOnlineStatus.args = { status: exampleOnlineStatus }
-
-const WithOfflineStatus = Template.bind({})
-WithOfflineStatus.args = { status: exampleOfflineStatus }
-
-const WithDegradedStatus = Template.bind({})
-WithDegradedStatus.args = { status: exampleDegradedStatus }
-
-const WithUnknownStatus = Template.bind({})
-WithUnknownStatus.args = { status: exampleUnknown }
-
-export {
-  Default, WithDegradedStatus, WithOfflineStatus, WithOnlineStatus, WithUnknownStatus,
-}

package/src/components/status/Alert.tsx

@@ -1,51 +0,0 @@
-import type { AlertProps } from '@mui/material'
-import {
-  Alert, AlertTitle, Button,
-} from '@mui/material'
-import type { NetworkStatus } from '@xyo-network/xl1-sdk'
-import React, { useMemo, useState } from 'react'
-
-import { NetworkStatusDialog } from './Dialog.tsx'
-
-export interface NetworkStatusAlertProps extends AlertProps {
-  status?: NetworkStatus
-}
-
-export const NetworkStatusAlert: React.FC<NetworkStatusAlertProps> = ({ status, ...props }) => {
-  const [open, setOpen] = useState(false)
-  const handleClose = () => setOpen(false)
-
-  const severity = useMemo(() => {
-    if (!status) return
-    switch (status.state) {
-      case 'online': {
-        return 'success'
-      }
-      case 'offline': {
-        return 'error'
-      }
-      case 'degraded': {
-        return 'warning'
-      }
-      case 'unknown': {
-        return 'error'
-      }
-    }
-  }, [status])
-
-  return (
-    <Alert severity={severity} {...props}>
-      <AlertTitle>{status?.description}</AlertTitle>
-      {status?.updates && status.updates.length > 0
-        ? (
-            <>
-              <Button color={severity} variant="outlined" size="small" onClick={() => setOpen(true)}>
-                Updates
-              </Button>
-              <NetworkStatusDialog open={open} onClose={handleClose} updates={status.updates} />
-            </>
-          )
-        : null}
-    </Alert>
-  )
-}

package/src/components/status/Dialog.tsx

@@ -1,51 +0,0 @@
-import type { DialogProps } from '@mui/material'
-import {
-  Button, Dialog, DialogActions, DialogContent, DialogTitle, List, ListItem, Typography,
-} from '@mui/material'
-import type { NetworkStatusUpdate } from '@xyo-network/xl1-sdk'
-import React from 'react'
-
-export interface NetworkStatusDialogProps extends DialogProps {
-  updates: NetworkStatusUpdate[]
-}
-
-export const NetworkStatusDialog: React.FC<NetworkStatusDialogProps> = ({ updates, ...props }) => {
-  return (
-    <Dialog {...props}>
-      <DialogTitle>Recent Status Updates</DialogTitle>
-      <DialogContent>
-        <List>
-          {updates.map(({
-            start, end, update,
-          }) => (
-            <ListItem
-              key={start + update}
-              sx={{
-                flexDirection: 'column', alignItems: 'start', pl: 0,
-              }}
-            >
-              <Typography>
-                {update}
-              </Typography>
-              <Typography gutterBottom sx={{ opacity: 0.75, fontSize: '.8333rem' }}>
-                Start:
-                {' '}
-                {new Date(start).toLocaleString()}
-                {' '}
-                <br />
-                End:
-                {' '}
-                {new Date(end).toLocaleString()}
-              </Typography>
-            </ListItem>
-          ))}
-        </List>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={e => props.onClose?.(e, 'backdropClick')} color="primary" variant="outlined">
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}

package/src/components/status/NetworkStatus.tsx

@@ -1,21 +0,0 @@
-import type { AlertProps } from '@mui/material'
-import type { PropsWithChildren } from 'react'
-import React from 'react'
-
-import { usePollNetworkStatus } from '../../hooks/index.ts'
-import { NetworkStatusAlert } from './Alert.tsx'
-
-const validNetworkStates = new Set(['online', 'unknown'])
-
-export interface NetworkStatusProps extends PropsWithChildren<AlertProps> {}
-
-export const NetworkStatus: React.FC<NetworkStatusProps> = ({ children, ...props }) => {
-  const [networkStatus] = usePollNetworkStatus()
-  const showStatus = networkStatus && !validNetworkStates.has(networkStatus.state)
-  return (
-    <>
-      {showStatus ? <NetworkStatusAlert status={networkStatus} {...props} /> : null}
-      {children}
-    </>
-  )
-}

package/src/components/status/index.ts

@@ -1,2 +0,0 @@
-export * from './Alert.tsx'
-export * from './NetworkStatus.tsx'

package/src/context/ActiveGatewayProvider.tsx

@@ -1,21 +0,0 @@
-import { GatewayProvider, InPageGatewaysProvider } from '@xyo-network/react-chain-provider'
-import type { AccountInstance } from '@xyo-network/sdk-js'
-import type { PropsWithChildren } from 'react'
-import React from 'react'
-
-import { useChainNetwork } from './network/index.ts'
-
-export interface ActiveGatewayProviderProps extends PropsWithChildren {
-  account?: AccountInstance
-}
-
-export const ActiveGatewayProvider: React.FC<ActiveGatewayProviderProps> = ({ account, children }) => {
-  const { activeNetwork } = useChainNetwork()
-  return (
-    <InPageGatewaysProvider account={account}>
-      <GatewayProvider gatewayName={activeNetwork?.id}>
-        {children}
-      </GatewayProvider>
-    </InPageGatewaysProvider>
-  )
-}