@xyo-network/react-chain-blockchain 1.18.0 → 1.18.2

package/src/components/transactions/TransactionsQuickTipButton.tsx

@@ -8,11 +8,9 @@ import {
 } from '@xylabs/react-flexbox'
 import type { QuickTipButtonProps } from '@xylabs/react-quick-tip-button'
 import { QuickTipButton } from '@xylabs/react-quick-tip-button'
-import type { Hash } from '@xylabs/sdk-js'
-import type { HydratedBlockWithHashMeta } from '@xyo-network/xl1-protocol'
-import React, {
-  Fragment, useMemo, useState,
-} from 'react'
+import { type Hash, isDefined } from '@xylabs/sdk-js'
+import type { HydratedBlockWithHashMeta } from '@xyo-network/xl1-sdk'
+import React, { Fragment, useState } from 'react'
 
 import { useTxsFromBlock } from '../../hooks/index.ts'
 
@@ -24,8 +22,16 @@ export const TransactionsQuickTipButton: React.FC<TransactionsQuickTipButtonQuic
   const [transactions, transactionsError] = useTxsFromBlock(block)
 
   const [copied, setCopied] = useState(false)
-  const [showError, setShowError] = useState(false)
-  useMemo(() => transactionsError ? setShowError(true) : setShowError(false), [transactionsError])
+
+  const [closeDialog, setCloseDialog] = useState(false)
+  const open = isDefined(transactionsError)
+
+  // if the error changes, reopen the dialog
+  const [previousTransactionError, setPreviousTransactionError] = useState<Error | undefined>(transactionsError)
+  if (isDefined(transactionsError) && transactionsError !== previousTransactionError) {
+    setPreviousTransactionError(transactionsError)
+    setCloseDialog(false)
+  }
 
   const onCopy = async (transactionHash: Hash) => {
     await navigator.clipboard.writeText(transactionHash)
@@ -49,8 +55,7 @@ export const TransactionsQuickTipButton: React.FC<TransactionsQuickTipButtonQuic
           ? null
           : (
               <FlexGrowCol gap={1} alignItems="stretch">
-                {/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
-                {transactions?.map(([transaction, hash]) => (
+                {transactions?.map(([_transaction, hash]) => (
                   <Fragment key={hash}>
                     <FlexGrowRow gap={2} justifyContent="start">
                       <ContentCopyIcon sx={{ cursor: 'pointer' }} onClick={() => void onCopy(hash)} />
@@ -73,7 +78,7 @@ export const TransactionsQuickTipButton: React.FC<TransactionsQuickTipButtonQuic
               </FlexGrowCol>
             )}
       </QuickTipButton>
-      <Snackbar open={showError} onClose={() => setShowError(false)}>
+      <Snackbar open={open && closeDialog === false} onClose={() => setCloseDialog(true)}>
         <ErrorRender error={transactionsError} scope="TransactionsQuickTipButton" />
       </Snackbar>
     </>

package/src/components/transactions/submit/Builder.tsx

@@ -3,8 +3,8 @@ import {
 } from '@mui/material'
 import { FlexCol } from '@xylabs/react-flexbox'
 import { toHex } from '@xylabs/sdk-js'
-import type { ChainId, TransactionBoundWitnessFields } from '@xyo-network/xl1-protocol'
-import { defaultTransactionFees, toXL1BlockNumber } from '@xyo-network/xl1-protocol'
+import type { ChainId, TransactionBoundWitnessFields } from '@xyo-network/xl1-sdk'
+import { defaultTransactionFees, toXL1BlockNumber } from '@xyo-network/xl1-sdk'
 import React from 'react'
 
 export interface ChainTransactionBuilder {

package/src/components/transactions/submit/SubmitChain.tsx

@@ -11,8 +11,8 @@ import { QueryBoundWitnessBuilder } from '@xyo-network/boundwitness-builder'
 import type { ModuleQueryResult } from '@xyo-network/module-model'
 import { PayloadBuilder } from '@xyo-network/payload-builder'
 import type { Payload } from '@xyo-network/payload-model'
-import type { TransactionBoundWitnessFields } from '@xyo-network/xl1-protocol'
-import { buildTransaction } from '@xyo-network/xl1-protocol-sdk'
+import type { TransactionBoundWitnessFields } from '@xyo-network/xl1-sdk'
+import { buildTransaction } from '@xyo-network/xl1-sdk'
 import { Axios } from 'axios'
 import React, { useState } from 'react'
 

package/src/context/analyzer/Provider.tsx

@@ -1,5 +1,5 @@
 import { isUndefined } from '@xylabs/sdk-js'
-import type { HydratedBlock } from '@xyo-network/xl1-protocol'
+import type { HydratedBlock } from '@xyo-network/xl1-sdk'
 import type { PropsWithChildren } from 'react'
 import React, {
   useCallback, useMemo, useState,
@@ -14,9 +14,9 @@ export interface ChainAnalyzersProviderProps extends PropsWithChildren {
 
 export const ChainAnalyzersProvider: React.FC<ChainAnalyzersProviderProps> = ({ analyzers: analyzersProp, children }) => {
   const [analyzersState, setAnalyzersState] = useState<ChainAnalyzers>(analyzersProp ?? {} as ChainAnalyzers)
-  const [statsUpdated, setStatsUpdated] = useState(Date.now())
+  const [statsUpdated, setStatsUpdated] = useState(1)
 
-  const analyzers = useMemo(() => ({ ...analyzersProp, ...analyzersState }), [analyzersProp])
+  const analyzers = useMemo(() => ({ ...analyzersProp, ...analyzersState }), [analyzersProp, analyzersState])
 
   const addAnalyzers: ChainAnalyzersState['addAnalyzers'] = useCallback((analyzers: ChainAnalyzersState['analyzers']) => {
     if (isUndefined(analyzers)) return

package/src/context/analyzer/state.ts

@@ -1,5 +1,5 @@
 import type { ContextExState } from '@xylabs/react-shared'
-import type { ChainAnalyzer, HydratedBlock } from '@xyo-network/xl1-protocol'
+import type { ChainAnalyzer, HydratedBlock } from '@xyo-network/xl1-sdk'
 
 export type ChainAnalyzerIds = 'producers'
 

package/src/context/chain/Provider.tsx

@@ -1,40 +1,47 @@
+import { isDefined } from '@xylabs/sdk-js'
 import type { PropsWithChildren } from 'react'
-import React, { useMemo, useState } from 'react'
+import React, {
+  useCallback, useMemo, useState,
+} from 'react'
 
 import { ChainInfoContext } from './Context.ts'
 import type { ChainInfoState } from './State.ts'
 
-interface ChainInfoProviderProps extends PropsWithChildren, Omit<ChainInfoState, 'provided'> {
-}
+interface ChainInfoProviderProps extends PropsWithChildren, Omit<ChainInfoState, 'provided'> {}
 
 export const ChainInfoProvider: React.FC<ChainInfoProviderProps> = ({
   children, chainArchivist: chainArchivistProp, chainId: chainIdProp, chainIterator: chainIteratorProp,
 }) => {
   const [chainArchivist, setChainArchivist] = useState<ChainInfoState['chainArchivist']>(chainArchivistProp)
+  const [previousChainArchivist, setPreviousChainArchivist] = useState<ChainInfoState['chainArchivist']>(chainArchivistProp)
+  if (isDefined(chainArchivistProp) && chainArchivistProp !== previousChainArchivist) {
+    setChainArchivist(chainArchivistProp)
+    setPreviousChainArchivist(chainArchivistProp)
+  }
+
   const [chainId, setChainId] = useState<ChainInfoState['chainId']>(chainIdProp)
+  const [previousChainId, setPreviousChainId] = useState<ChainInfoState['chainId']>(chainIdProp)
+  if (isDefined(chainIdProp) && chainIdProp !== previousChainId) {
+    setChainId(chainIdProp)
+    setPreviousChainId(chainIdProp)
+  }
+
   const [chainIterator, setChainIterator] = useState<ChainInfoState['chainIterator']>(chainIteratorProp)
+  const [previousChainIterator, setPreviousChainIterator] = useState<ChainInfoState['chainIterator']>(chainIteratorProp)
+  if (isDefined(chainIteratorProp) && chainIteratorProp !== previousChainIterator) {
+    setChainIterator(chainIteratorProp)
+    setPreviousChainIterator(chainIteratorProp)
+  }
 
-  const updateChainArchivist = (chainArchivist: ChainInfoState['chainArchivist']) => {
+  const updateChainArchivist = useCallback((chainArchivist: ChainInfoState['chainArchivist']) => {
     setChainArchivist(chainArchivist)
-  }
-  const updateChainId = (chainId: ChainInfoState['chainId']) => {
+  }, [])
+  const updateChainId = useCallback((chainId: ChainInfoState['chainId']) => {
     setChainId(chainId)
-  }
-  const updateChainIterator = (chainIterator: ChainInfoState['chainIterator']) => {
+  }, [])
+  const updateChainIterator = useCallback((chainIterator: ChainInfoState['chainIterator']) => {
     setChainIterator(chainIterator)
-  }
-
-  useMemo(() => {
-    updateChainArchivist(chainArchivistProp)
-  }, [chainArchivistProp])
-
-  useMemo(() => {
-    updateChainId(chainIdProp)
-  }, [chainIdProp])
-
-  useMemo(() => {
-    updateChainIterator(chainIteratorProp)
-  }, [chainIteratorProp])
+  }, [])
 
   const chainState: ChainInfoState = useMemo(() => ({
     chainArchivist,

package/src/context/chain/State.ts

@@ -1,7 +1,6 @@
 import type { ContextExState } from '@xylabs/react-shared'
 import type { ArchivistInstance } from '@xyo-network/archivist-model'
-import type { ChainId } from '@xyo-network/xl1-protocol'
-import type { ChainBlockNumberIteratorService } from '@xyo-network/xl1-protocol-sdk'
+import type { ChainBlockNumberIteratorService, ChainId } from '@xyo-network/xl1-sdk'
 
 export type ChainInfoState = ContextExState<{
   chainArchivist?: ArchivistInstance

package/src/helpers/rate/index.ts

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

package/src/helpers/rate/rateUnitToLabel.ts

@@ -0,0 +1,27 @@
+import type { TimeDurations } from '@xyo-network/xl1-sdk'
+
+export const rateUnitToLabel = (rateUnit: keyof TimeDurations) => {
+  switch (rateUnit) {
+    case 'millis': {
+      return 'b/ms'
+    }
+    case 'seconds': {
+      return 'b/s'
+    }
+    case 'minutes': {
+      return 'b/m'
+    }
+    case 'hours': {
+      return 'b/h'
+    }
+    case 'days': {
+      return 'b/d'
+    }
+    case 'weeks': {
+      return 'b/w'
+    }
+    default: {
+      return rateUnit
+    }
+  }
+}

package/src/helpers/txsFromBlock.ts

@@ -1,8 +1,10 @@
+import type { Hash } from '@xylabs/sdk-js'
 import { HydratedBlockWrapper } from '@xyo-network/chain-wrappers'
 import { PayloadBuilder } from '@xyo-network/payload-builder'
-import type { HydratedBlockWithHashMeta } from '@xyo-network/xl1-protocol'
+import type { Payload } from '@xyo-network/payload-model'
+import type { HydratedBlockWithHashMeta } from '@xyo-network/xl1-sdk'
 
-export const txsFromBlock = async (block: HydratedBlockWithHashMeta) => {
+export const txsFromBlock = async (block: HydratedBlockWithHashMeta): Promise<[Payload, Hash][]> => {
   const wrapper = await HydratedBlockWrapper.parse(block)
   const txs = wrapper.transactions
   const txPayloads = txs.map(tx => tx.boundWitness)

package/src/hooks/chain-iterator/useChainIteratorParams.ts

@@ -1,11 +1,14 @@
+import type { UsePromiseState } from '@xylabs/react-promise'
 import { usePromise } from '@xylabs/react-promise'
 import { type Hash, isHash } from '@xylabs/sdk-js'
 import { assertEx, isDefined } from '@xylabs/sdk-js'
 import type { ReadArchivist } from '@xyo-network/archivist-model'
 import { BoundWitnessBuilder } from '@xyo-network/boundwitness-builder'
-import type { BlockBoundWitness } from '@xyo-network/xl1-protocol'
-import { isBlockBoundWitness } from '@xyo-network/xl1-protocol'
-import { getDefaultConfig } from '@xyo-network/xl1-protocol-sdk'
+import type { Payload, WithStorageMeta } from '@xyo-network/payload-model'
+import type {
+  BlockBoundWitness, BlockBoundWitnessWithHashMeta, ChainId, Config, PayloadMapRead,
+} from '@xyo-network/xl1-sdk'
+import { getDefaultConfig, isBlockBoundWitness } from '@xyo-network/xl1-sdk'
 
 import type { BlockChainIterator } from '../../types/index.ts'
 
@@ -26,7 +29,13 @@ export const resolveDefinedHead = async (head: Hash, chainArchivist: ReadArchivi
 
 export const useChainIteratorParams = ({
   chainMap, chainId, head, name,
-}: BlockChainIterator) => {
+}: BlockChainIterator): [{
+  chainId: ChainId
+  chainMap: PayloadMapRead<WithStorageMeta<Payload>>
+  config: Config
+  head: BlockBoundWitnessWithHashMeta
+  name: string
+} | undefined, Error | undefined, UsePromiseState | undefined] => {
   return usePromise(async () => {
     if (isDefined(chainMap) && isDefined(chainId) && isHash(head)) {
       const result = await chainMap.get(head)

package/src/hooks/useTxsFromBlock.ts

@@ -1,5 +1,5 @@
 import { usePromise } from '@xylabs/react-promise'
-import type { HydratedBlockWithHashMeta } from '@xyo-network/xl1-protocol'
+import type { HydratedBlockWithHashMeta } from '@xyo-network/xl1-sdk'
 
 import { txsFromBlock } from '../helpers/index.ts'
 

package/src/stories/ChainArchivistDecorator.tsx

@@ -4,7 +4,7 @@ import { usePromise } from '@xylabs/react-promise'
 import { MemoryArchivist } from '@xyo-network/archivist-memory'
 import { ArchivistConfigSchema } from '@xyo-network/archivist-model'
 import { buildRandomBlockChain } from '@xyo-network/react-chain-shared'
-import { flattenHydratedBlocks } from '@xyo-network/xl1-protocol-sdk'
+import { flattenHydratedBlocks } from '@xyo-network/xl1-sdk'
 import React, { useEffect } from 'react'
 
 import { getChainId } from '../lib/index.ts'

package/src/stories/ChainArchivistDelayedInsertDecorator.tsx

@@ -5,8 +5,8 @@ import { delay } from '@xylabs/sdk-js'
 import { MemoryArchivist } from '@xyo-network/archivist-memory'
 import { ArchivistConfigSchema } from '@xyo-network/archivist-model'
 import { buildRandomBlockChain } from '@xyo-network/react-chain-shared'
-import type { BlockBoundWitness } from '@xyo-network/xl1-protocol'
-import { flattenHydratedBlock } from '@xyo-network/xl1-protocol-sdk'
+import type { BlockBoundWitness } from '@xyo-network/xl1-sdk'
+import { flattenHydratedBlock } from '@xyo-network/xl1-sdk'
 import React, { useEffect, useState } from 'react'
 
 import { getChainId } from '../lib/index.ts'

package/src/types/BlockComponentProps.ts

@@ -1,5 +1,5 @@
 import type { Hash } from '@xylabs/sdk-js'
-import type { HydratedBlockWithHashMeta } from '@xyo-network/xl1-protocol'
+import type { HydratedBlockWithHashMeta } from '@xyo-network/xl1-sdk'
 
 /** Interface for all components that render a single block */
 export interface BlockComponentProps {

package/src/types/BlockComponents.ts

@@ -1,5 +1,5 @@
 import type { NodesWithKeys } from '@xylabs/react-animation'
-import type { HydratedBlock } from '@xyo-network/xl1-protocol'
+import type { HydratedBlock } from '@xyo-network/xl1-sdk'
 
 /** Interface for all block components meant to be rendered in a chain */
 export interface BlockChainRenderComponent extends NodesWithKeys {

package/src/types/render/BlockChainRenderProps.ts

@@ -1,7 +1,6 @@
 import type { CreatableName, Hash } from '@xylabs/sdk-js'
 import type { Payload, WithStorageMeta } from '@xyo-network/payload-model'
-import type { ChainId } from '@xyo-network/xl1-protocol'
-import type { PayloadMapRead } from '@xyo-network/xl1-protocol-sdk'
+import type { ChainId, PayloadMapRead } from '@xyo-network/xl1-sdk'
 
 /** Props that control the rendering (not blockchain specific) */
 export interface RenderProps {