From 42d268325a8f4ffe1fd39f51ba8c9251d8cb502b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ti=E1=BA=BFn=20Nguy=E1=BB=85n=20Kh=E1=BA=AFc?=
 <tien.nguyenkhac@icloud.com>
Date: Tue, 4 Jul 2023 12:04:47 +1200
Subject: [PATCH] refactor: more granular error boundaries

Let other stake position display as normal event if some other positions has errors
---
 apps/web/src/components/widgets/ErrorBoundary.tsx    |  2 +-
 .../src/components/widgets/staking/PoolStakes.tsx    |  5 ++++-
 apps/web/src/components/widgets/staking/Stakes.tsx   | 12 ++++++++----
 .../components/widgets/staking/ValidatorStakes.tsx   |  9 +++++++--
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/widgets/ErrorBoundary.tsx b/apps/web/src/components/widgets/ErrorBoundary.tsx
index 44c535431..915452d10 100644
--- a/apps/web/src/components/widgets/ErrorBoundary.tsx
+++ b/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()
diff --git a/apps/web/src/components/widgets/staking/PoolStakes.tsx b/apps/web/src/components/widgets/staking/PoolStakes.tsx
index 64cf068c3..177f6ce2c 100644
--- a/apps/web/src/components/widgets/staking/PoolStakes.tsx
+++ b/apps/web/src/components/widgets/staking/PoolStakes.tsx
@@ -2,6 +2,7 @@ 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))
@@ -9,7 +10,9 @@ const PoolStakes = () => {
   return (
     <>
       {pools?.map((pool, index) => (
-        <PoolStakeItem key={index} item={pool} />
+        <ErrorBoundary key={index} orientation="horizontal">
+          <PoolStakeItem item={pool} />
+        </ErrorBoundary>
       ))}
     </>
   )
diff --git a/apps/web/src/components/widgets/staking/Stakes.tsx b/apps/web/src/components/widgets/staking/Stakes.tsx
index aabdf902a..3ad128bf4 100644
--- a/apps/web/src/components/widgets/staking/Stakes.tsx
+++ b/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>
         ))}
diff --git a/apps/web/src/components/widgets/staking/ValidatorStakes.tsx b/apps/web/src/components/widgets/staking/ValidatorStakes.tsx
index 71a9a6401..7c1bfa256 100644
--- a/apps/web/src/components/widgets/staking/ValidatorStakes.tsx
+++ b/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>
       ))}
     </>
   )