From fb415a9140282abb5989c3ff97da4dab55d19a7d Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Wed, 3 Jul 2024 12:55:17 +0200
Subject: [PATCH 1/2] Wrap RouteError into default Layout

---
 src/layout/Default.tsx | 7 +++----
 src/router/index.tsx   | 8 ++++++--
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/layout/Default.tsx b/src/layout/Default.tsx
index 97f8c62..a630805 100644
--- a/src/layout/Default.tsx
+++ b/src/layout/Default.tsx
@@ -1,4 +1,5 @@
 import { Box, BoxProps, Grid } from '@chakra-ui/react'
+import { PropsWithChildren } from 'react'
 import { Outlet, ScrollRestoration } from 'react-router-dom'
 import { Footer } from '~components/Layout/Footer'
 import { TopBar } from '~components/Layout/TopBar'
@@ -16,14 +17,12 @@ const DefaultLayout = (props: BoxProps) => (
   />
 )
 
-const Layout = () => (
+const Layout = ({ children }: PropsWithChildren) => (
   <Box minH='100vh' display='flex' flexDirection='column'>
     <ScrollRestoration />
     <Grid p={{ base: 0, md: 3 }}>
       <TopBar />
-      <DefaultLayout>
-        <Outlet />
-      </DefaultLayout>
+      <DefaultLayout>{children ?? <Outlet />}</DefaultLayout>
     </Grid>
     <Footer />
   </Box>
diff --git a/src/router/index.tsx b/src/router/index.tsx
index b4b6689..a37f288 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,3 +1,4 @@
+import { ExtendedSDKClient } from '@vocdoni/extended-sdk'
 import { useClient } from '@vocdoni/react-providers'
 import { lazy } from 'react'
 import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router-dom'
@@ -6,7 +7,6 @@ import Layout from '~src/layout/Default'
 import Error404 from '~src/router/Error404'
 import RouteError from '~src/router/RouteError'
 import { SuspenseLoader } from '~src/router/SuspenseLoader'
-import { ExtendedSDKClient } from '@vocdoni/extended-sdk'
 
 const Home = lazy(() => import('~pages/Home'))
 const Block = lazy(() => import('~pages/block'))
@@ -27,7 +27,11 @@ export const RoutesProvider = () => {
     {
       path: RoutePath.Base,
       element: <Layout />,
-      errorElement: <RouteError />,
+      errorElement: (
+        <Layout>
+          <RouteError />
+        </Layout>
+      ),
       children: [
         {
           index: true,

From c3f1af0dfca0842e1e2824cc9ca2d25c90b00452 Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Wed, 3 Jul 2024 13:36:10 +0200
Subject: [PATCH 2/2] Create error layout sublevel

---
 src/layout/Default.tsx |   7 +-
 src/router/index.tsx   | 218 ++++++++++++++++++++---------------------
 2 files changed, 113 insertions(+), 112 deletions(-)

diff --git a/src/layout/Default.tsx b/src/layout/Default.tsx
index a630805..97f8c62 100644
--- a/src/layout/Default.tsx
+++ b/src/layout/Default.tsx
@@ -1,5 +1,4 @@
 import { Box, BoxProps, Grid } from '@chakra-ui/react'
-import { PropsWithChildren } from 'react'
 import { Outlet, ScrollRestoration } from 'react-router-dom'
 import { Footer } from '~components/Layout/Footer'
 import { TopBar } from '~components/Layout/TopBar'
@@ -17,12 +16,14 @@ const DefaultLayout = (props: BoxProps) => (
   />
 )
 
-const Layout = ({ children }: PropsWithChildren) => (
+const Layout = () => (
   <Box minH='100vh' display='flex' flexDirection='column'>
     <ScrollRestoration />
     <Grid p={{ base: 0, md: 3 }}>
       <TopBar />
-      <DefaultLayout>{children ?? <Outlet />}</DefaultLayout>
+      <DefaultLayout>
+        <Outlet />
+      </DefaultLayout>
     </Grid>
     <Footer />
   </Box>
diff --git a/src/router/index.tsx b/src/router/index.tsx
index a37f288..e0a7689 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -27,117 +27,117 @@ export const RoutesProvider = () => {
     {
       path: RoutePath.Base,
       element: <Layout />,
-      errorElement: (
-        <Layout>
-          <RouteError />
-        </Layout>
-      ),
       children: [
         {
-          index: true,
-          element: (
-            <SuspenseLoader>
-              <Home />
-            </SuspenseLoader>
-          ),
-        },
-        {
-          path: RoutePath.Block,
-          element: (
-            <SuspenseLoader>
-              <Block />
-            </SuspenseLoader>
-          ),
-          loader: async ({ params }) => await client.blockByHeight(Number(params.height)),
-        },
-        {
-          path: RoutePath.BlocksList,
-          element: (
-            <SuspenseLoader>
-              <BlocksList />
-            </SuspenseLoader>
-          ),
-        },
-        {
-          path: RoutePath.Organization,
-          element: (
-            <SuspenseLoader>
-              <Organization />
-            </SuspenseLoader>
-          ),
-          loader: async ({ params }) => await client.fetchAccount(params.pid),
-        },
-        {
-          path: RoutePath.Envelope,
-          element: (
-            <SuspenseLoader>
-              <Envelope />
-            </SuspenseLoader>
-          ),
-          loader: async ({ params }) => await client.voteInfo(params.verifier as string),
-        },
-        {
-          path: RoutePath.OrganizationsList,
-          element: (
-            <SuspenseLoader>
-              <OrganizationsList />
-            </SuspenseLoader>
-          ),
-        },
-        {
-          path: RoutePath.ProcessesList,
-          element: (
-            <SuspenseLoader>
-              <ProcessList />
-            </SuspenseLoader>
-          ),
-        },
-        {
-          path: RoutePath.Process,
-          element: (
-            <SuspenseLoader>
-              <Process />
-            </SuspenseLoader>
-          ),
-          loader: async ({ params }) => await client.fetchElection(params.pid),
-        },
-        {
-          path: RoutePath.Transaction,
-          element: (
-            <SuspenseLoader>
-              <Transaction />
-            </SuspenseLoader>
-          ),
-          loader: async ({ params }) => await client.txInfoByBlock(Number(params.block), Number(params.index)),
-        },
-        {
-          path: RoutePath.TransactionsList,
-          element: (
-            <SuspenseLoader>
-              <TransactionsList />
-            </SuspenseLoader>
-          ),
-        },
-        {
-          path: RoutePath.Validators,
-          element: (
-            <SuspenseLoader>
-              <Validators />
-            </SuspenseLoader>
-          ),
-          loader: async ({ params }) => await client.validatorsList(),
-        },
-        {
-          path: RoutePath.Verify,
-          element: (
-            <SuspenseLoader>
-              <Verify />
-            </SuspenseLoader>
-          ),
-        },
-        {
-          path: '*',
-          element: <Error404 />,
+          errorElement: <RouteError />,
+          children: [
+            {
+              index: true,
+              element: (
+                <SuspenseLoader>
+                  <Home />
+                </SuspenseLoader>
+              ),
+            },
+            {
+              path: RoutePath.Block,
+              element: (
+                <SuspenseLoader>
+                  <Block />
+                </SuspenseLoader>
+              ),
+              loader: async ({ params }) => await client.blockByHeight(Number(params.height)),
+            },
+            {
+              path: RoutePath.BlocksList,
+              element: (
+                <SuspenseLoader>
+                  <BlocksList />
+                </SuspenseLoader>
+              ),
+            },
+            {
+              path: RoutePath.Organization,
+              element: (
+                <SuspenseLoader>
+                  <Organization />
+                </SuspenseLoader>
+              ),
+              loader: async ({ params }) => await client.fetchAccount(params.pid),
+            },
+            {
+              path: RoutePath.Envelope,
+              element: (
+                <SuspenseLoader>
+                  <Envelope />
+                </SuspenseLoader>
+              ),
+              loader: async ({ params }) => await client.voteInfo(params.verifier as string),
+            },
+            {
+              path: RoutePath.OrganizationsList,
+              element: (
+                <SuspenseLoader>
+                  <OrganizationsList />
+                </SuspenseLoader>
+              ),
+            },
+            {
+              path: RoutePath.ProcessesList,
+              element: (
+                <SuspenseLoader>
+                  <ProcessList />
+                </SuspenseLoader>
+              ),
+            },
+            {
+              path: RoutePath.Process,
+              element: (
+                <SuspenseLoader>
+                  <Process />
+                </SuspenseLoader>
+              ),
+              loader: async ({ params }) => await client.fetchElection(params.pid),
+            },
+            {
+              path: RoutePath.Transaction,
+              element: (
+                <SuspenseLoader>
+                  <Transaction />
+                </SuspenseLoader>
+              ),
+              loader: async ({ params }) => await client.txInfoByBlock(Number(params.block), Number(params.index)),
+            },
+            {
+              path: RoutePath.TransactionsList,
+              element: (
+                <SuspenseLoader>
+                  <TransactionsList />
+                </SuspenseLoader>
+              ),
+            },
+            {
+              path: RoutePath.Validators,
+              element: (
+                <SuspenseLoader>
+                  <Validators />
+                </SuspenseLoader>
+              ),
+              loader: async ({ params }) => await client.validatorsList(),
+            },
+            {
+              path: RoutePath.Verify,
+              element: (
+                <SuspenseLoader>
+                  <Verify />
+                </SuspenseLoader>
+              ),
+            },
+            {
+              path: '*',
+              element: <Error404 />,
+            },
+          ],
         },
       ],
     },