refactor: more granular error boundaries

apps/web/src/components/widgets/ErrorBoundary.tsx

@@ -74,7 +74,7 @@ const ErrorBoundaryDebuggerChildren = (props: PropsWithChildren<{ error?: Error;
 
   return (
     <div
-      css={{ border: '1px dotted red' }}
+      css={{ 'display': 'contents', '> *': { outline: '1px dotted red' } }}
       onContextMenu={event => {
         event.preventDefault()
         event.stopPropagation()

apps/web/src/components/widgets/staking/PoolStakes.tsx

@@ -2,14 +2,17 @@ import { selectedSubstrateAccountsState } from '@domains/accounts'
 import { usePoolStakes } from '@domains/nominationPools/hooks'
 import { useRecoilValue } from 'recoil'
 import PoolStakeItem from './PoolStakeItem'
+import ErrorBoundary from '../ErrorBoundary'
 
 const PoolStakes = () => {
   const pools = usePoolStakes(useRecoilValue(selectedSubstrateAccountsState))
 
   return (
     <>
       {pools?.map((pool, index) => (
-        <PoolStakeItem key={index} item={pool} />
+        <ErrorBoundary key={index} orientation="horizontal">
+          <PoolStakeItem item={pool} />
+        </ErrorBoundary>
       ))}
     </>
   )

apps/web/src/components/widgets/staking/Stakes.tsx

@@ -1,11 +1,11 @@
 import SectionHeader from '@components/molecules/SectionHeader'
 import StakeItem from '@components/recipes/StakeItem'
+import { ChainProvider, chainsState } from '@domains/chains'
 import { Button, HiddenDetails, Text } from '@talismn/ui'
 import { Suspense, useId } from 'react'
 import { Link } from 'react-router-dom'
 import { useRecoilValue } from 'recoil'
-
-import { ChainProvider, chainsState } from '@domains/chains'
+import ErrorBoundary from '../ErrorBoundary'
 import PoolStakes from './PoolStakes'
 import ValidatorStakes from './ValidatorStakes'
 
@@ -59,8 +59,12 @@ const Stakes = () => {
             fallback={<StakeItem.Skeleton className={skeletonId} css={{ order: 1, display: 'none' }} />}
           >
             <ChainProvider value={chain}>
-              <PoolStakes />
-              <ValidatorStakes />
+              <ErrorBoundary orientation="horizontal">
+                <PoolStakes />
+              </ErrorBoundary>
+              <ErrorBoundary orientation="horizontal">
+                <ValidatorStakes />
+              </ErrorBoundary>
             </ChainProvider>
           </Suspense>
         ))}

apps/web/src/components/widgets/staking/ValidatorStakes.tsx

@@ -6,6 +6,7 @@ import { useDeriveState, useQueryMultiState, useQueryState } from '@talismn/reac
 import { useMemo } from 'react'
 import { useRecoilValue, useRecoilValueLoadable, waitForAll } from 'recoil'
 import ValidatorStakeItem from './ValidatorStakeItem'
+import ErrorBoundary from '../ErrorBoundary'
 
 const useStakes = () => {
   const accounts = useRecoilValue(selectedSubstrateAccountsState)
@@ -79,7 +80,9 @@ const BaseValidatorStakes = () => {
   return (
     <>
       {stakes.map((props, index) => (
-        <ValidatorStakeItem key={index} {...props} />
+        <ErrorBoundary key={index} orientation="horizontal">
+          <ValidatorStakeItem {...props} />
+        </ErrorBoundary>
       ))}
     </>
   )
@@ -95,7 +98,9 @@ const ValidatorStakesWithFastUnstake = () => {
   return (
     <>
       {stakes.map((props, index) => (
-        <ValidatorStakeItem key={index} {...props} />
+        <ErrorBoundary key={index} orientation="horizontal">
+          <ValidatorStakeItem key={index} {...props} />
+        </ErrorBoundary>
       ))}
     </>
   )