From 47585c39bf8fb6f08460ff496664f388e3d2aa58 Mon Sep 17 00:00:00 2001
From: gratestas <stasgrate@gmail.com>
Date: Wed, 18 Jan 2023 22:10:25 +0300
Subject: [PATCH 1/4] fix: remove getDerivedStateFromError due to side effect

---
 src/components/error-boundary.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/error-boundary.js b/src/components/error-boundary.js
index 47511060..2719730e 100644
--- a/src/components/error-boundary.js
+++ b/src/components/error-boundary.js
@@ -9,9 +9,6 @@ export default class ErrorBoundary extends Component {
     this.state = { hasError: false, error: null, errorInfo: null };
   }
 
-  static getDerivedStateFromError = () => {
-    return { hasError: true };
-  };
   componentDidCatch(error, errorInfo) {
     withScope((scope) => {
       Object.keys(errorInfo).forEach((key) => {

From 843b073b9134a1904c3f3c0c85365d34c27b0c1d Mon Sep 17 00:00:00 2001
From: gratestas <stasgrate@gmail.com>
Date: Wed, 18 Jan 2023 22:11:32 +0300
Subject: [PATCH 2/4] fix: remove inner error boundary

---
 src/bootstrap/app.js | 138 ++++++++++++++++++++-----------------------
 1 file changed, 65 insertions(+), 73 deletions(-)

diff --git a/src/bootstrap/app.js b/src/bootstrap/app.js
index 282122a5..89726933 100644
--- a/src/bootstrap/app.js
+++ b/src/bootstrap/app.js
@@ -15,8 +15,6 @@ import { ChainIdProvider } from "../hooks/use-chain-id";
 import { ArchonInitializer } from "./archon";
 import ChainChangeWatcher from "./chain-change-watcher";
 import drizzle, { DrizzleProvider, Initializer, useDrizzle } from "./drizzle";
-import ErrorBoundary from "../components/error-boundary";
-import SwitchChainFallback from "../components/error-fallback/switch-chain";
 
 export default function App() {
   const [isMenuClosed, setIsMenuClosed] = useState(true);
@@ -28,81 +26,75 @@ export default function App() {
         <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i" rel="stylesheet" />
       </Helmet>
       <DrizzleProvider drizzle={drizzle}>
-        <Initializer
-          error={<C404 Web3 />}
-          loadingContractsAndAccounts={<C404 Web3 />}
-          loadingWeb3={<StyledSpin tip="Connecting to your Web3 provider." />}
-        >
+        <Initializer error={<C404 Web3 />} loadingWeb3={<StyledSpin tip="Connecting to your Web3 provider." />}>
           <DrizzleChainIdProvider>
             <ChainChangeWatcher>
-              <ErrorBoundary fallback={SwitchChainFallback}>
-                <ArchonInitializer>
-                  <BrowserRouter>
+              <ArchonInitializer>
+                <BrowserRouter>
+                  <Layout>
+                    <StyledLayoutSider
+                      breakpoint="md"
+                      collapsedWidth="0"
+                      collapsed={isMenuClosed}
+                      onClick={() => setIsMenuClosed((previousState) => !previousState)}
+                    >
+                      <Menu theme="dark">{MenuItems}</Menu>
+                    </StyledLayoutSider>
                     <Layout>
-                      <StyledLayoutSider
-                        breakpoint="md"
-                        collapsedWidth="0"
-                        collapsed={isMenuClosed}
-                        onClick={() => setIsMenuClosed((previousState) => !previousState)}
-                      >
-                        <Menu theme="dark">{MenuItems}</Menu>
-                      </StyledLayoutSider>
-                      <Layout>
-                        <StyledLayoutHeader>
-                          <Row>
-                            <StyledLogoCol lg={4} md={4} sm={12} xs={0}>
-                              <LogoNavLink to="/">
-                                <Logo />
-                              </LogoNavLink>
-                            </StyledLogoCol>
-                            <Col lg={14} md={12} xs={0} style={{ padding: "0 16px" }}>
-                              <StyledMenu mode="horizontal" theme="dark">
-                                {MenuItems}
-                              </StyledMenu>
-                            </Col>
-                            <StyledTrayCol lg={6} md={8} sm={12} xs={24}>
-                              <StyledTray>
-                                <AccountStatus />
-                                <NotificationSettings settings={settings} />
-                              </StyledTray>
-                            </StyledTrayCol>
-                          </Row>
-                        </StyledLayoutHeader>
-                        <StyledLayoutContent>
-                          <Switch>
-                            <Route exact path="/">
-                              <Home />
-                            </Route>
-                            <Route exact path="/courts">
-                              <Courts />
-                            </Route>
-                            <Route exact path="/cases">
-                              <Cases />
-                            </Route>
-                            <Route exact path="/cases/:ID">
-                              <Case />
-                            </Route>
-                            <Route exact path="/tokens">
-                              <Tokens />
-                            </Route>
-                            <Route exact path="/convert-pnk">
-                              <ConvertPnk />
-                            </Route>
-                            <Route path="*">
-                              <C404 />
-                            </Route>
-                          </Switch>
-                        </StyledLayoutContent>
-                        <Footer />
-                        <StyledClickaway
-                          isMenuClosed={isMenuClosed}
-                          onClick={isMenuClosed ? null : () => setIsMenuClosed(true)}
-                        />
-                      </Layout>
+                      <StyledLayoutHeader>
+                        <Row>
+                          <StyledLogoCol lg={4} md={4} sm={12} xs={0}>
+                            <LogoNavLink to="/">
+                              <Logo />
+                            </LogoNavLink>
+                          </StyledLogoCol>
+                          <Col lg={14} md={12} xs={0} style={{ padding: "0 16px" }}>
+                            <StyledMenu mode="horizontal" theme="dark">
+                              {MenuItems}
+                            </StyledMenu>
+                          </Col>
+                          <StyledTrayCol lg={6} md={8} sm={12} xs={24}>
+                            <StyledTray>
+                              <AccountStatus />
+                              <NotificationSettings settings={settings} />
+                            </StyledTray>
+                          </StyledTrayCol>
+                        </Row>
+                      </StyledLayoutHeader>
+                      <StyledLayoutContent>
+                        <Switch>
+                          <Route exact path="/">
+                            <Home />
+                          </Route>
+                          <Route exact path="/courts">
+                            <Courts />
+                          </Route>
+                          <Route exact path="/cases">
+                            <Cases />
+                          </Route>
+                          <Route exact path="/cases/:ID">
+                            <Case />
+                          </Route>
+                          <Route exact path="/tokens">
+                            <Tokens />
+                          </Route>
+                          <Route exact path="/convert-pnk">
+                            <ConvertPnk />
+                          </Route>
+                          <Route path="*">
+                            <C404 />
+                          </Route>
+                        </Switch>
+                      </StyledLayoutContent>
+                      <Footer />
+                      <StyledClickaway
+                        isMenuClosed={isMenuClosed}
+                        onClick={isMenuClosed ? null : () => setIsMenuClosed(true)}
+                      />
                     </Layout>
-                  </BrowserRouter>
-                </ArchonInitializer>
-              </ErrorBoundary>
+                  </Layout>
+                </BrowserRouter>
+              </ArchonInitializer>
             </ChainChangeWatcher>
           </DrizzleChainIdProvider>
         </Initializer>

From 4eeaab4f0e851bc9bb0560cafb941d047c600b45 Mon Sep 17 00:00:00 2001
From: gratestas <stasgrate@gmail.com>
Date: Wed, 18 Jan 2023 22:15:36 +0300
Subject: [PATCH 3/4] refactor: add switch chain modal to chain-change-watcher

---
 src/bootstrap/chain-change-watcher.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/bootstrap/chain-change-watcher.js b/src/bootstrap/chain-change-watcher.js
index ce53e2e4..ead54fe7 100644
--- a/src/bootstrap/chain-change-watcher.js
+++ b/src/bootstrap/chain-change-watcher.js
@@ -1,12 +1,16 @@
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import t from "prop-types";
 import useChainId from "../hooks/use-chain-id";
 import usePrevious from "../hooks/use-previous";
+import SwitchChainFallback from "../components/error-fallback/switch-chain";
+import { isSupportedChain } from "../api/side-chain";
 
 export default function ChainChangeWatcher({ children }) {
-  useReloadOnChainChanged();
+  const chainId = useChainId();
+  const isSupported = isSupportedChain(chainId);
 
-  return children;
+  useReloadOnChainChanged();
+  return !isSupported ? <SwitchChainFallback /> : children;
 }
 
 ChainChangeWatcher.propTypes = {

From a6626a3e1f5b70e37ae2be7b70a0aee13b0ab337 Mon Sep 17 00:00:00 2001
From: gratestas <stasgrate@gmail.com>
Date: Wed, 18 Jan 2023 22:18:44 +0300
Subject: [PATCH 4/4] fix: add conditioal render during drizzle loading

---
 src/components/account-status.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/account-status.js b/src/components/account-status.js
index bc85eea9..a9bf398f 100644
--- a/src/components/account-status.js
+++ b/src/components/account-status.js
@@ -14,6 +14,8 @@ export default function AccountStatus() {
     account: drizzleState.accounts[0],
   }));
 
+  if (account === VIEW_ONLY_ADDRESS) return <></>;
+
   return (
     <AccountDetailsPopup
       pinakion